Integrating Your First Smart Contract with a Frontend

When you open this cloned hello-world-part-four repository, you'll notice that it contains two folders: starter-files and completed.

starter files contains the starter files (essentially the React UI) for this project. In this tutorial, we will be working in this directory, as you learn how to bring this UI to life by connecting it to your Ethereum wallet and the Hello World smart contract that you published on Etherscan in Part 3.

completed contains the entire completed tutorial and is there for you as a reference if you get stuck.

Next, open your copy of starter-files to your favorite code editor (at Alchemy, we we're big fans of VScode), and then navigate into your src folder:

All of the code we'll write will live under the src folder. We'll be editing the HelloWorld.js component and the util/interact.js javascript files to give our project Web3 functionality.

To get the project running, navigate to the root directory of the starter files folder, and then run npm install in your terminal to install the dependencies of the project:

-- CODE language-js line-numbers -- cd starter-files npm install

Once those have finished installing, run npm start in your terminal:

-- CODE language-js line-numbers -- npm start

Let's go back into the src folder in our editor and open the HelloWorld.js file. It's super important that we understand everything in this file, as it is the primary React component we will be working on.

At the top of this file, you'll notice we have several import statements that are necessary to get our project running, including the React library, useEffect and useState hooks, some items from the ./util/interact.js (we'll describe them in more details soon!), and the Alchemy logo.🧙

-- CODE language-js line-numbers -- import React from "react"; import { useEffect, useState } from "react"; import { helloWorldContract, connectWallet, updateMessage, loadCurrentMessage, getCurrentWalletConnected, } from "./util/interact.js"; import alchemylogo from "./alchemylogo.svg";

-- CODE language-js line-numbers -- //State variables const [walletAddress, setWallet] = useState(""); const [status, setStatus] = useState(""); const [message, setMessage] = useState("No connection to the network."); const [newMessage, setNewMessage] = useState("");

walletAddress- a string that stores the user's wallet address

status- a string that stores a helpful message that guides the user on how to interact with the dApp

message- a string that stores the current message in the smart contract

new message- a string that stores the new message that will be written to the smart contract

After the state variables, you'll see five un-implemented functions: useEffect, addSmartContractListener, connectWalletPressed, and onUpdatePressed. We'll explain what they do below:

-- CODE language-js line-numbers -- //called only once useEffect(async () => { //TODO: implement }, []); function addSmartContractListener() { //TODO: implement } function addWalletListener() { //TODO: implement } const connectWalletPressed = async () => { //TODO: implement }; const onUpdatePressed = async () => { //TODO: implement };

useEffect- this is a React hook that is called after your component is rendered. Because it has an empty array [] prop passed into it (see line 4), it will only be called on the component's first render. Here we'll load the current message stored in our smart contract, call our smart contract and wallet listeners, and update our UI to reflect whether a wallet is already connected.

addSmartContractListener- this function sets up a listener that will watch for our HelloWorld contract's UpdatedMessages event and update our UI when the message is changed in our smart contract.

addWalletListener- this function sets up a listener that detects changes in the user's Metamask wallet state, such as when the user disconnects their wallet or switches addresses.

connectWalletPressed- this function will be called to connect the user's Metamask wallet to our dApp.

onUpdatePressed- this function will be called when the user wants to update the message stored in the smart contract.

On lines 6-12, if the user's wallet is connected (i.e. walletAddress.length > 0), we display a truncated version of the user walletAddress in the button with ID "walletButton;" otherwise it simply says "Connect Wallet."

On line 17, we display the current message stored in the smart contract, which is captured in the message string.

On lines 23-26, we use a conntrolled component to update our newMessage state variable when the input in the text field changes.

In addition to our state variables, you'll also see that connectWalletPressed and onUpdatePressed functions are called when the buttons with IDs publishButton and walletButton are clicked respectively.

Finally let's address where is this HelloWorld.js component added.

If you go to the App.js, which is the main component in React that acts as a container for all other components, you'll see that our HelloWorld.js component is injected on line 7.

Last but not least, let's check out one more file provided for you, the interact.js file.

Because we want to prescribe to the M-V-C paradigm, we'll want a separate file that contains all our functions to manage the logic, data, and rules of our dApp, and then be able to export those functions to our frontend (our HelloWorld.js component).

👆🏽This is the exact purpose of our interact.js file!

Navigate to the util folder in your src directory, and you'll notice we've included a file called interact.js that will contain all of our smart contract interaction and wallet functions and variables.

-- CODE language-js line-numbers -- //export const helloWorldContract; export const loadCurrentMessage = async () => { }; export const connectWallet = async () => { }; const getCurrentWalletConnected = async () => { }; export const updateMessage = async (message) => { };

You'll notice at the top of the file that we've commented out the helloWorldContract object. Later in this tutorial, we will uncomment this object and instantiate our smart contract in this variable, which we will then export into our HelloWorld.js component.

The four unimplemented functions after our helloWorldContract object do the following:

loadCurrentMessage- this function handles the logic of loading the current message stored in the smart contract. It will make a read call to the Hello World smart contract using the Alchemy Web3 API.

connectWallet- this function will connect the user's Metamask to our dApp.

getCurrentWalletConnected- this function will check if an Ethereum account is already connected to our dApp on page load and update our UI accordingly.

updateMessage this function will update the message stored in the smart contract. It will make a write call to the Hello World smart contract, so the user's Metamask wallet will have to sign an Ethereum transaction to update the message.

If you don't have it already, first install Alchemy Web3 by navigating to the root directory of your starter-files and running the following in your terminalstarter-filesand running the following in your terminal

-- CODE language-js line-numbers -- npm install @alch/alchemy-web3

-- CODE language-js line-numbers -- npm install dotenv --save

Once you have your API key, create a .env file in your root directory and add your Alchemy Websockets url to it. Afterwards, your .env file should look like so:

-- CODE language-js line-numbers -- REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/

Now, we're ready to set up our Alchemy Web3 endpoint in our dApp! Let's go back to our interact.js which is nested inside our util folder and add the following code at the top of the file:

-- CODE language-js line-numbers -- require('dotenv').config(); const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY; const { createAlchemyWeb3 } = require("@alch/alchemy-web3"); const web3 = createAlchemyWeb3(alchemyKey); //export const helloWorldContract;

Above, we first imported the Alchemy ket from our .env file and then passed our alchemyKey to createAlchemyWeb3 to establish our Alchemy Web3 endpoint.

Armed with our contract address, ABI, and Alchemy Web3 endpoint, we can use the contract method to load an instance of our smart contract. Import your contract ABI into the interact.js file and add your contract address.

-- CODE language-js line-numbers -- const contractABI = require("../contract-abi.json"); const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A";

We can now finally uncomment our helloWorldContract variable, and load the smart contract using our AlchemyWeb3 endpoint:

-- CODE language-js line-numbers -- export const helloWorldContract = new web3.eth.Contract( contractABI, contractAddress );

To recap, the first 12 lines of your interact.js should now look like this:

-- CODE language-js line-numbers -- require('dotenv').config(); const alchemyKey = process.env.REACT_APP_ALCHEMY_KEY; const { createAlchemyWeb3 } = require("@alch/alchemy-web3"); const web3 = createAlchemyWeb3(alchemyKey); const contractABI = require('../contract-abi.json') const contractAddress = "0x6f3f635A9762B47954229Ea479b4541eAF402A6A"; export const helloWorldContract = new web3.eth.Contract( contractABI, contractAddress );

Now that we have our contract loaded, we can implement our loadCurrentMessage function!

Update the loadCurrentMessage in your interact.js file to the following:

-- CODE language-js line-numbers -- export const loadCurrentMessage = async () => { const message = await helloWorldContract.methods.message().call(); return message; };

Since we want to display this smart contract in our UI, let's update the useEffect function in our HelloWorld.js component to the following:

-- CODE language-js line-numbers -- //called only once useEffect(async () => { const message = await loadCurrentMessage(); setMessage(message); }, []);

Note, we want our loadCurrentMessage to be called once during the component's first render. We'll soon implement addSmartContractListener to automatically update the UI after the message in the smart contract changes.

Before we dive into our listener, let's check out what we have so far! Save your HelloWorld.js and interact.js files, and then go to http://localhost:3000/

If you think back to the HelloWorld.sol file we wrote in Part 1 of this tutorial series, you'll recall that there is a smart contract event called UpdatedMessages that is emitted after our smart contract's update function is invoked (see lines 9 and 27):

-- CODE language-js line-numbers -- // Specifies the version of Solidity, using semantic versioning. // Learn more: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma pragma solidity ^0.7.3; // Defines a contract named `HelloWorld`. // A contract is a collection of functions and data (its state). Once deployed, a contract resides at a specific address on the Ethereum blockchain. Learn more: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html contract HelloWorld { //Emitted when update function is called //Smart contract events are a way for your contract to communicate that something happened on the blockchain to your app front-end, which can be 'listening' for certain events and take action when they happen. event UpdatedMessages(string oldStr, string newStr); // Declares a state variable `message` of type `string`. // State variables are variables whose values are permanently stored in contract storage. The keyword `public` makes variables accessible from outside a contract and creates a function that other contracts or clients can call to access the value. string public message; // Similar to many class-based object-oriented languages, a constructor is a special function that is only executed upon contract creation. // Constructors are used to initialize the contract's data. Learn more:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors constructor(string memory initMessage) { // Accepts a string argument `initMessage` and sets the value into the contract's `message` storage variable). message = initMessage; } // A public function that accepts a string argument and updates the `message` storage variable. function update(string memory newMessage) public { string memory oldMsg = message; message = newMessage; emit UpdatedMessages(oldMsg, newMessage); } }

The addSmartContractListener function is going to specifically listen for our Hello World smart contract's UpdatedMessages event, and update our UI to display the new message.

Modify addSmartContractListener to the following:

-- CODE language-js line-numbers -- function addSmartContractListener() { helloWorldContract.events.UpdatedMessages({}, (error, data) => { if (error) { setStatus("😥 " + error.message); } else { setMessage(data.returnValues[1]); setNewMessage(""); setStatus("🎉 Your message has been updated!"); } }); }

If an error occurs when the event is emitted, it will be reflected in the UI via our status state variable.

Otherwise, we will use the data object returned. The data.returnValues is an array indexed at zero where the first element in the array stores the previous message and second element stores the updated one. Altogether, on a successful event we'll set our message string to the updated message, clear the newMessage string, and update our status state variable to reflect that a new message has been published on our smart contract.

Finally, let's call our listener in our useEffect function so it is initialized on the HelloWorld.js component first render. Altogether, your useEffect function should look like this:

-- CODE language-js line-numbers -- useEffect(async () => { const message = await loadCurrentMessage(); setMessage(message); addSmartContractListener(); }, []);

-- CODE language-js line-numbers -- {"jsonrpc": "2.0", "id": 0, "result": "0xde0b6b3a7640000"}

In our interact.js file, let's implement the connectWallet function, which we can then call in our HelloWorld.js component.

Let's modify connectWallet to the following:

-- CODE language-js line-numbers -- export const connectWallet = async () => { if (window.ethereum) { try { const addressArray = await window.ethereum.request({ method: "eth_requestAccounts", }); const obj = { status: "👆🏽 Write a message in the text-field above.", address: addressArray[0], }; return obj; } catch (err) { return { address: "", status: "😥 " + err.message, }; } } else { return { address: "", status: (

{" "} 🦊{" "} You must install Metamask, a virtual Ethereum wallet, in your browser.

Well, first, it checks if window.ethereum is enabled in your browser.

If window.ethereum is not present, then that means Metamask is not installed. This results in a JSON object being returned, where address returned is an empty string, and the status JSX object relays that the user must install Metamask.

Now if window.ethereum is present, then that's when things get interesting.

Using a try/catch loop, we'll try to connect to Metamask by calling window.ethereum.request({ method: "eth_requestAccounts" }); Calling this function will open up Metamask in the browser, whereby the user will be prompted to connect their wallet to your dApp.

If the user chooses to connect, method: "eth_requestAccounts" will return an array that contains all of the user's account addresses that connected to the dApp. Altogether, our connectWallet function will return a JSON object that contains the first address in this array (see line 9) and a stats message that prompts the user to write a message to the smart contract.

If the user rejects the connection, then the JSON object will contain an empty string for the address returned and a status message that reflects that the user rejected the connection.

Now that we've written this connectWallet function, the next step is to call it to our HelloWorld.js component.

Navigate to the connectWalletPressed function in the HelloWorld.js, and update it to the following:

-- CODE language-js line-numbers -- const connectWalletPressed = async () => { const walletResponse = await connectWallet(); setStatus(walletResponse.status); setWallet(walletResponse.address); };

Notice how most of our functionality is abstracted away to our HelloWorld.js component from the interact.js file? This is so we comply with the M-V-C paradigm!

In connectWalletPressed we simple make an await call to our imported connectWallet function, and using its response, we update our status and walletAddress variables via their state hooks.

Now, let's save both files (HelloWorld.js and interact.js) and test out our UI so far.

However, have no fear! We easily can address that (get it? 😅) by implementing getCurrentWalletConnected, which will check if an address is already connected to our dApp and update our UI accordingly!

Update your getCurrentWalletConnected function in the interact.js file to the following:

-- CODE language-js line-numbers -- export const getCurrentWalletConnected = async () => { if (window.ethereum) { try { const addressArray = await window.ethereum.request({ method: "eth_accounts", }); if (addressArray.length > 0) { return { address: addressArray[0], status: "👆🏽 Write a message in the text-field above.", }; } else { return { address: "", status: "🦊 Connect to Metamask using the top right button.", }; } } catch (err) { return { address: "", status: "😥 " + err.message, }; } } else { return { address: "", status: (

{" "} 🦊{" "} You must install Metamask, a virtual Ethereum wallet, in your browser.

This code is very similar to the connectWallet function we just wrote up in the previous step.

The main difference is that instead of calling the method eth_requestAccounts, which opens Metamask for the user to connect their wallet, here we call the method eth_accounts, which simply returns an array containing the Metamask addresses currently connected to our dApp.

The main difference is that instead of calling the method eth_requestAccounts, which opens Metamask for the user to connect their wallet, here we call the method eth_accounts, which simply returns an array containing the Metamask addresses currently connected to our dApp.

-- CODE language-js line-numbers -- useEffect(async () => { const message = await loadCurrentMessage(); setMessage(message); addSmartContractListener(); const {address, status} = await getCurrentWalletConnected(); setWallet(address); setStatus(status); }, []);

Notice we use the response of our call to getCurrentWalletConnected to update our walletAddress and status state variables.

In your HelloWorld.js file, modify your addWalletListener function as following:

First, our function checks if window.ethereum is enabled (i.e. Metamask is installed).

If it's not, we simply set our status state variable to a JSX string that prompts the user to install Metamask.

If it is enabled, we set up the listener window.ethereum.on("accountsChanged") on line 3 that listens for state changes in the Metamask wallet, which include when the user connects an additional account to the dApp, switches accounts, or disconnects an account. If there is at least one account connected, the walletAddress state variable is updated as the first account in the accounts array returned by the listener. Otherwise, walletAddress is set as an empty string.

Last but not least, we must call it in our useEffect function:

-- CODE language-js line-numbers -- useEffect(async () => { const message = await loadCurrentMessage(); setMessage(message); addSmartContractListener(); const {address, status} = await getCurrentWalletConnected(); setWallet(address) setStatus(status); addWalletListener(); }, []);

Alrighty fam, we've arrived at the home stretch! In the updateMessage of your interact.js file, we're going to do the following:

Call this function from our HelloWorld.js frontend component

We'll want our function to return early if there is no Metamask extension installed, there is no wallet connected (i.e. the address passed in is an empty string), or the message is an empty string. Let's add the following error handling to updateMessage:

-- CODE language-js line-numbers -- export const updateMessage = async (address, message) => { if (!window.ethereum || address === null) { return { status: "💡 Connect your Metamask wallet to update the message on the blockchain.", }; } if (message.trim() === "") { return { status: "❌ Your message cannot be an empty string.", }; } };

If you're already comfortable with traditional web3 Ethereum transactions, the code we write next will be very familiar. Below your input error handling code, add the following to updateMessage:

-- CODE language-js line-numbers -- //set up transaction parameters const transactionParameters = { to: contractAddress, // Required except during contract publications. from: address, // must match user's active address. data: helloWorldContract.methods.update(message).encodeABI(), }; //sign the transaction try { const txHash = await window.ethereum.request({ method: "eth_sendTransaction", params: [transactionParameters], }); return { status: ( ✅{" "} View the status of your transaction on Etherscan!
ℹ️ Once the transaction is verified by the network, the message will be updated automatically. ), }; } catch (error) { return { status: "😥 " + error.message, }; }

to specifies the recipient address (our smart contract)

from specifies the signer of the transaction, the address variable we passed into our function

data contains the call to our Hello World smart contract's update method, receiving our messagestring variable as input

Then, we make an await call, window.ethereum.request, where we ask Metamask to sign the transaction. Notice, on lines 11 and 12, we're specifying our eth method, eth_sendTransaction and passing in our transactionParameters.

Altogether, our updateMessage functon should look like this:

-- CODE language-js line-numbers -- export const updateMessage = async (address, message) => { //input error handling if (!window.ethereum || address === null) { return { status: "💡 Connect your Metamask wallet to update the message on the blockchain.", }; } if (message.trim() === "") { return { status: "❌ Your message cannot be an empty string.", }; } //set up transaction parameters const transactionParameters = { to: contractAddress, // Required except during contract publications. from: address, // must match user's active address. data: helloWorldContract.methods.update(message).encodeABI(), }; //sign the transaction try { const txHash = await window.ethereum.request({ method: "eth_sendTransaction", params: [transactionParameters], }); return { status: ( ✅{" "} View the status of your transaction on Etherscan!
ℹ️ Once the transaction is verified by the network, the message will be updated automatically. ), }; } catch (error) { return { status: "😥 " + error.message, }; } };

Last but not least, we need to connect our updateMessage functon to our HelloWorld.js component.

Our onUpdatePressed function should make an await call to the imported updateMessage function and modify the status state variable to reflect whether our transaction succeeded or failed:

-- CODE language-js line-numbers -- const onUpdatePressed = async () => { const { status } = await updateMessage(walletAddress, newMessage); setStatus(status); };