Toolset

For this project, we’ll be using:

Remix IDE : A Solidity development environment provide by the Ethereum development team. It’s available online here. Please keep it open as we work through this learning experience.

: A Solidity development environment provide by the Ethereum development team. It’s available online here. Please keep it open as we work through this learning experience. Metamask : A Chrome extension used to engage the Ethereum blockchain. Please install it and setup your account. We’ll use this to connect with the Ethereum Ropsten Testnet.

: A Chrome extension used to engage the Ethereum blockchain. Please install it and setup your account. We’ll use this to connect with the Ethereum Ropsten Testnet. Text editor: Any text editor you chose will work great. We’ll be using an editor starting in Phase 2 to wire up React with the Ropsten Testnet Etherium Blockchain using Metamask.

Overview of Phases

Each phase aims to show specific nuggets of knowledge. They are self-contained and build on top of each other, as in, Phase 2 builds on the work in Phase 1.

Phase 0 : Get familiar with Remix, and create a smart contract scaffold.

: Get familiar with Remix, and create a smart contract scaffold. Phase 1 : Create a public variable, deploy smart contract on JavaScript VM, and interact with it in Remix.

: Create a public variable, deploy smart contract on JavaScript VM, and interact with it in Remix. Phase 2 : Create a private variable, deploy smart contract to Ethereum Ropsten Testnet, and interact with private variable on a React frontend using Metamask as the intermediary.

: Create a private variable, deploy smart contract to Ethereum Ropsten Testnet, and interact with private variable on a React frontend using Metamask as the intermediary. Phase 3 : Manipulate the state of a smart contract from React.

: Manipulate the state of a smart contract from React. Phase 4: Engage a conditional on a smart contract, and explore its implications.

Phase 0: Remix IDE & Smart Contract Scaffold

We’ll open up Remix IDE and begin by becoming familiar with its layout, specifically with the right column. We’ll start there.

Right column of Remix IDE with the Compile tab open

The Compile tab compiles the source code present in the editor when Remix is loaded. After compiling, Remix provides a Static Analysis, which offers warnings and errors that we can use to edit our code. We can safely ignore warnings for now.

By default, the ‘Auto Compile’ box near the top is checked. I personally prefer to uncheck it, so the compiler doesn’t trigger with each change I make in the editor. Then I manually click the ‘Start to compile’ button each time I need the source code compiled.

Next, let’s look at the Run tab.

Right column of Remix IDE with the Run tab open

We deploy smart contracts from the Run tab. Please note the Environment dropdown menu and the light-red Create button. First we select the Environment to declare the context of our deployment, then we click Create to make the smart contract.

Under the Environment menu, we’ll use these options:

JavaScript VM : To deploy and play with our smart contract right on our browser.

: To deploy and play with our smart contract right on our browser. Injected Web3: To deploy our smart contract through Metamask on the Ethereum Ropsten Test Network or the Ethereum Main Network.

We’ll use the Compile and Run tabs frequently in this project.

The left column in Remix is a file explorer, and the center column contains the code editor and a console. I think these are reasonably self-explanatory.

Smart Contract Scaffold

Remix usually comes shipped with some code. Please delete this code, and change the filename on the left tab to ReactExample.sol. Then we’ll enter our code in the editor found in the center column.

Initial scaffold for a Solidity Smart Contract

Note: I offer an image so one can practice typing it, instead of copy / pasting it. This’ll help build memory, as well as be a better learning experience.

Since familiarity with Solidity is not assumed, I’ll try to explain each section of code.

Line 1: Tells the Solidity compiler that the source code is written in version 0.4.11. Newer versions will be supported up to, but not including, version 0.5.0. I picked version 0.4.11 arbitrarily — in a real-life project, picking a version will be a technical decision weighing pros, cons, and trade-offs.

Line 4: Declares a state variable of type address, which is named owner. It is declared private so its value isn’t visible outside our contract. An address type holds a 160-bit value, the size of an Ethereum address. State variables are stored in a smart contract’s storage, which is a persistent memory area.

Line 6: Provides a constructor function that’ll run once, when the smart contract is created. It’s visibility is set to public, which means it’s visible to everyone. All functions in our contract are public, which is the default visibility modifier if none are specified. The constructor’s name must be the same as the contract’s name, which is ReactExample in our case.

Line 7: Initializes the owner to be the address of who created the contract. The creator’s address is contained in msg.sender. Note: In JavaScript and other programming languages, we’d need the this keyword to refer to the smart contract instance. In Solidity, it’s not required in this context, but required for external function calls.

Line 10: Provides a function which the owner can call in case the smart contract is compromised. Invoking it will destroy the contract.

Line 11: Ensures that only the owner can self-destruct the contract. require (condition) throws an exception if the condition inside its parentheses is false.

Line 12: Destroys the contract. Recall: owner is an address, so selfdestruct (owner) is going to forward its balance to the owner.

Line 15: Provides an anonymous function called a fallback function. The payable modifier ensures the function can receive ether. The revert () call gives back ether to whoever invokes this function.

That’s it for Phase 0. Now that we’re a little more familiar with Remix and some basic workings of Solidity, let’s move on to Phase 1 and play with a deployed smart contract.