Before we do any React coding, we need to make sure our browser can interact with sites that access the blockchain. We do this by using a browser extension called MetaMask.
MetaMask
MetaMask is a browser plugin that allows users to make Ethereum transactions through regular websites. Head over to their website, install the extension and create an account.
Next, click on the MetaMask icon in your browser and log in. There, you need to add a custom RPC so the extension can access your local blockchain. Use the information from Ganache, head back to MetaMask, click Custom RPC, and enter the information. You should see it appear in the list of connections as shown in Figure 8 with http://localhost:7545. Connect to this network by clicking it.
MetaMask creates a wallet address when you create an account, but you can also import other wallet addresses provided you have control of the private keys. This is great for testing because we can use the accounts provided by Ganache to interact with our local blockchain.
Head over to Ganache and copy the private key from the first address in the list. You can display the private key by clicking the key icon on the right side of the row for each account, as shown in Figure 9.
Head back to MetaMask in your browser and open the Accounts panel by clicking on the icon in the top-right corner, as seen circled in Figure 10.
Click Import Account, paste the private key in, and click Import. This will add the account to your list of accounts. Select that account. Great! Let’s test it out.
Front end
Let’s test our React client. As I mentioned earlier, the Truffle Box provides some React boilerplate. In your terminal, navigate into the client/ folder and run the following:
npm run start
This should open a new browser tab and attempt to connect your browser to the blockchain. You’ll get a notification from the MetaMask extension attempting to connect. Confirm it. The webpage displayed should look like Figure 11.
Next, we’re going to load the new HelloWorld contract, retrieve the greeting by calling getGreeting(), and display it on this page.
Querying the blockchain
Head over to your text editor and open up App.js in the client/ folder.
First, import the compiled contract. Add the following line to the import statements:
import HelloWorld from "./contracts/HelloWorld.json";
Then we need to do the following:
- Inside
componentDidMount(), we needthis.setState()to include the HelloWorld contract, where it currently only has the SimpleStorage contract. - Once we’ve done that, we need
runExample()to use callgetGreeting()on the HelloWorld contract just as it callsget()on the SimpleStorage contract. - Finally, we need a new div in the
render()method to display the value.
Try this yourself and check the browser to see if your changes have the desired effect. When finished, your App.js file should look similar to the code in Figure 12.
Congratulations! You have successfully created a Truffle project using the React Truffle Box, added a smart contract to the project, retrieved data from this contract, and displayed it in the React app. Well done! I hope this inspires you to explore blockchain development more and I encourage you to follow some of the links below to expand your knowledge.
