Dev Setup

Now, let’s set up our Greeter contract with React Truffle Box. We’ll need to follow the steps in the React Truffle Box repository.

Create a new directory:

mkdir greeter-dapp

Change into the new directory:

cd greeter-dapp

Install Truffle globally:

npm install -g truffle

And run this command inside it to unbox the React Truffle Box:

truffle unbox react

Your Greeter project should now include the following files:

greeter
├── client
│   └──src
├── contracts
│   └──
├── migrations
├── test
└── truffle-config.js

Our React application can be found inside /client/src in our greeter directory. Here you’ll find all the frontend files we’ll be using in this chapter and later on with our fundraiser application.

Let’s start with getting our contracts imported to React and running with Truffle so we can call the methods from our Greeter contract and interact with them in the frontend of our application.

React Truffle Box Setup

Before we get the development of our frontend application started, we need to switch our MetaMask network to match what we saw earlier when we ran truffle develop. We need this to be the same so we’re connecting to the right localhost and serving up the right information.

When we ran truffle develop, we saw this:

Truffle Develop started at http://127.0.0.1:9545/

Copy http://127.0.0.1:9545/ to your clipboard. Next, we need to open MetaMask and import that network. Open the MetaMask extension and select Main Ethereum Network. We’ll need to select Custom RPC and enter http://127.0.0.1:9545 where it says New RPC URL.”

You should see this in the MetaMask extension after selecting Custom RPC, as illustrated in Figure 9-1.

Figure 9-1. Select a custom RPC to connect to Truffle

Next, we’ll need to import one of the fake test accounts that we saved earlier. In MetaMask, select the top right circular icon where you’ll see something similar to the dropdown in Figure 9-2.

Figure 9-2. Import your test account from the Truffle Develop console

Paste the private key in the MetaMask import and select Import (see Figure 9-3).

Figure 9-3. Enter your private key to import your test account

If the account was successfully imported, you’ll see a bunch of ether show up in your new account, as illustrated in Figure 9-4.

Figure 9-4. What the successful addition of your test account should look like

Now that we have Truffle and MetaMask up and running, we’ll get the React application running.

Change to the src directory inside of our Greeter repository and install the dependencies:

cd client // this is the cd command that lets you move into directories
npm i

After everything is installed, we can start the frontend of your application so we can actually see the app in action:

npm run start

Now you’ll be able to see your DApp in your browser if you navigate to http://localhost:3000/. It should look similar to Figure 9-5.

You should see MetaMask pop up asking you to accept a connection request. See Figure 9-6.

Figure 9-5. Congratulations! If your app is running properly, it should look like this.

Figure 9-6. Accept the React Box application setup

Now that we have our basic application up and running, let’s import our contracts so we can use the Greeter contract.

Importing our Greeter Contracts

Currently, we’re using the default contracts with React Box. We’ll need to import our Greeter contracts written previously so we can interact with them. Go back to our Greeter contract repository, and copy the Greeter.sol file. In the contracts file in our Greeter repository we just created, create a new file:

touch contracts/Greeter.sol

Open up the Greeter repository in your text editor and paste the Greeter contract into that file.

Create a new file for the migration like we did previously:

touch migrations/3_deploy_greeter.js

We’ll now run our compile and migrate commands again so we can be sure we’re interacting with the new Greeter contract we’ve imported. If we don’t do this, our Truffle Develop terminal will still be interacting with the standard React Truffle Box contracts.

After our contracts have successfully compiled and the migrations are finished, let’s open up our client directory in our application and get started on creating a UI for our own contracts.

Open up the App.js file. We’re going to modify some of the code to interact with our contracts. Start by removing all the standard Truffle boilerplate in the return function. Your code should now look like this:

return (
  <div className="App">
  </div>
);

Let’s add our own Greeter contract header now:

return (
  <div className="App">
    <h1>Greeter</h1>
  </div>
);

Next, instead of importing the boilerplate contract SimpleStorage, let’s import our Greeter contract so we can start calling methods from the Greeter contracts that we wrote earlier:

import GreeterContract from "./contracts/Greeter.json";

Still in the App.js file, and in the componentDidMount function, we’ll replace the following line with our Greeter contract network ID:

const deployedNetwork = SimpleStorageContract.networks[networkId];

This will allow us to actually connect to our Greeter contract:

const deployedNetwork = GreeterContract.networks[networkId];

In the same componentDidMount function, replace the SimpleStorage contract with our own GreeterContract reference:

const instance = new web3.eth.Contract(
  GreeterContract.abi,
  deployedNetwork && deployedNetwork.address,
);

Now let’s add our Greeter contract so our users can interact with it through our React frontend.

Adding Our Greeter Contract Functionality

We’re going to need to make a few more modifications to the App.js boilerplate code before we can work with our Greeter contract.

In our App.js file, we’ll need to use Web3 so we can connect to an Ethereum network. In our componentDidMount method, we’ll access Web3 and store it in our React state. We’ll stick with most of the boilerplate code, with a few additions.

To set up our Greeter contract to work with our frontend, we’ll first need to get rid of some of the boilerplate code from Truffle Box. We’ll first need to change the state of our App.js component to match our contracts code:

state = { storageValue: 0, web3: null, accounts: null, contract: null };

Where it says storageValue: 0, we’ll replace that with a new state to store our return from our greeting function. Now, instead of storageValue: 0, you can replace that with greeting: '' as shown here. This will use the React state to display our greeting to the user:

state = { greeting: '', web3: null, accounts: null, contract: null };

Next, we’ll need to replace the current runExample function code with our own. Remove all the old code from Truffle Box, except for the following code:

runExample = async () => {
  const { accounts, contract } = this.state;

};

Now, let’s add our own code, which we’ll call our Greeter contract, and set our React state:

const response = await contract.methods.greet().call()

this.setState({ greeting: response });

We’ll want to call our Greeter contract method right after the first line in runExample. That will store the response from our greet() method in a const.

After we’ve gotten our response, we’re setting our React state with the response, as you can see with greeting: response.

Next, we need to return our new React state from our render function! Replace the current render function with the following code:

render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        <h1>Greeter</h1>

        {this.state.greeting}
      </div>
    );
  }

We’re accessing our React state and now rendering it in our page. You should now see “Hello World” on localhost:3000 (Figure 9-7).

Figure 9-7. The home page of your application should be displaying “Hello World!”

Congratulations! You’ve just displayed your first contract response on a React application! But what if we want to display our greeting? In the next section, we’ll update our greeting in the UI through a user interaction.

Setting Our Greeting Through React

Our next step will be setting a new greeting using React. Right now, our contract is only returning the default greeting. We’ll use the setGreeting function in our Greeter.sol file and set our own message.

Let’s start with creating a React text input so we can write our own message to set. Here is a simple form that we’ll add right after {this.state.greeting} in our render function:

<form>
  <label>
    New Greeting:
    <input type="text" value={this.state.greeting}
        onChange={this.handleGreetingChange} />
  </label>
</form>

<button onClick={this.formSubmitHandler}> Submit </button>

After your app rerenders, you should now see your new input on the screen, as illustrated in Figure 9-8.

Figure 9-8. Your application can now interact with users through an input

If you type something in right now, nothing happens! Let’s fix that.

First, create the empty skeleton functions for our onSubmit and onChange actions:

formSubmitHandler = () => {
  // do awesome Web3 stuff here!
}

handleGreetingChange = (e) => {
  // update our react state here
}

Ultimately, we’re going to use Web3 in our formSubmitHandler function to connect to our contract and update our greeting. But let’s first start with getting the data from our user into our handleGreetingChange function.

We’ll need to update our onChange function in our input form, as shown here. This will allow us to access the actual input from the user in our function:

<input type="text" value={this.state.greeting}
    onChange={e => this.handleGreetingChange(e)} />

In the handleGreetingChange function, we need to now grab the data from our input when the function is invoked. Add the following code to your handleGreetingChange function:

handleGreetingChange = (e) => {
  const inputVal = e.target.value
  this.setState({ greeting: inputVal })
}

This function will now grab the input from the user and set the state. We are just updating the state, however, and not yet sending it to the blockchain. If you refresh the page right now, you’ll see the data isn’t stored. Let’s work on that next.

In our formSubmitHandler function, we need to first grab the state for our current greeting input so we know what information we want to send to the blockchain.

formSubmitHandler = async () => {
  const { accounts, contract, greeting } = this.state
}

We’ll just need to add one last thing now to get our data to the blockchain. We’ll use Web3 to interact with our setGreeting method from our contract:

formSubmitHandler = async () => {
  const { accounts, contract, greeting } = this.state;
  const updatedGreeting = await contract.methods.setGreeting(greeting)
}

Now if you type something into the input form, and click submit, which calls our submit action, our data is actually saved on the blockchain. A transaction permanently exists on the blockchain with our new greeter input. If we refresh our page again, we can see our greeter frontend has changed.