Forem: Jacob E. Dawson

Import & Test a Popular NFT Smart Contract with Hardhat & Ethers

Jacob E. Dawson — Sun, 25 Jul 2021 22:06:17 +0000

Today we're going to learn how to use the very cool smart-contract development framework Hardhat to locally import & test a publicly deployed smart contract. To make things fun & relevant, we'll be using the Bored Ape Yacht Club NFT smart contract in our example. Using a well-known project's smart contract should make it clear how open the Ethereum ecosystem is, and how many opportunities there are to get started in Dapp and smart contract development!

By the end of this tutorial you will know the following:

How to find smart contract code for specific projects
How to add that code to a local development environment
How to install & set-up a simple Hardhat development environment
How to compile a contract and write tests for it

This tutorial won't involve any front-end development, but if you're interested in understanding how to get started with Web3 dapp development, feel free to check out my previous tutorials here on dev.to:

Step 1: Finding the Smart Contract Code

To begin with, we're going to start by choosing a project (Bored Ape Yacht Club), and then tracking down the smart contract code. Personally the first thing I'd do in this case is quickly check out the website of the project in question to see if they have a link to their contracts. In this case, https://boredapeyachtclub.com/ only contains social links, so we'll have to look elsewhere.

Since Bored Ape Yacht Club is an Ethereum-based NFT project, our next port of call will be Etherscan, the Ethereum blockchain explorer. Since I know that Bored Ape Yacht Club uses the symbol BAYC, I can just search for that symbol using Etherscan (why, yes, I use dark mode on everything, how could you tell?):

And there we go - we can see that this is a verified ERC-721 token contract with the name we're looking for! If we click on the search result we'll go through to the page for the BoredApeYachtClub token, with the Etherscan address: https://etherscan.io/token/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d

That's great, we're getting closer - in the top right hand section of the token page, called "Profile Summary", we will see a "Contract" address with a link:

If we click that we'll arrive at the "Contract" page on Etherscan - this is what we're looking for! Click on the "Contract" tab:

And there we have it - the verified contract source code for the contract named BoredApeYachtClub. Here's the Etherscan link to that specific section: https://etherscan.io/address/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d#code

Now, at this point you might be wondering if there's a way to programmatically retrieve the contract code, given that we know the contract name, symbol and address. The answer is: of course :) But let's do it the manual way for now, I'll leave it to you to devise some more efficient ways to grab the contract using code ;)

We've almost finished step 1 - we can copy the contract code and save it somewhere - for now you can just put it in a note pad or save it in a file somewhere, we're going to come back to this file later on in the tutorial. Next up, we'll set up our Hardhat environment..

Step 2: Setting up our Hardhat Project

Tooling for Ethereum development hasn't had very long to evolve - the initial release of Ethereum was in July, 2015 - as of the writing of this article it has been only 6 years (which is hard to believe considering how far the Ethereum ecosystem has come during that time). Thanks to the efforts of the Ethereum community, we've progressed from rudimentary development environments that were only intuitive for experienced developers, through to 2021, where we've been blessed with finely-crafted frameworks, tools & libraries that make developing for the Ethereum ecosystem a breeze.

The folks over at Nomic Labs have had their heads down building what has quickly become the gold-standard in Ethereum development environments: Hardhat. It encompasses test running, compilation, deployment, a rich plugin-system and a local network to run everything against. When combined with other great tools like Ethers, Waffle, and Chai, Hardhat puts an entire control panel in front of you to take an Ethereum project all the way from idea to IDO.

NOTE: The instructions for this section can also be found in more detail here: https://hardhat.org/getting-started/#overview

Let's start by creating a new folder in your local environment:

mkdir hardhat-tutorial

Move into that new folder, run npm init -Y, and then install hardhat:

npm i -D hardhat

Now run npx hardhat and select "Create an empty hardhat.config.js":

That will add a hardhat.config.js file for us, which we'll have a look at soon. We're also going to install some other tools, including the Waffle test suite and Ethers. So run:

npm i -D @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

Let's go all the way and make our Hardhat project TypeScript ready.

First, install TypeScript and some types:

npm i -D ts-node typescript @types/node @types/chai @types/mocha

Then we'll rename our hardhat.config.js file to be hardhat.config.ts:

mv hardhat.config.js hardhat.config.ts

We now need to make a change to our hardhat.config.ts file, since with a Hardhat TypeScript project plugins need to be loaded with import instead of require, and functions must be explictly imported:

Change this:

// hardhat.config.ts
require("@nomiclabs/hardhat-waffle");

task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(await account.address);
  }
});

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.7.3",
};

Into this:

// hardhat.config.ts
import { task } from "hardhat/config"; // import function
import "@nomiclabs/hardhat-waffle"; // change require to import

task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(await account.address);
  }
});

export default {
  solidity: "0.7.3",
};

Sweet - we're setup with TypeScript. Now if you run npx hardhat again you should see some help instructions in your console:

Great! If you've made it this far we have a Hardhat project configured with TypeScript and our required tools are installed.

Notice in the screenshot above that there is a section called "Available Tasks" - this is a list of built-in tasks that are provided by the Hardhat team, enabling us to run important tasks from the get-go. Hardhat is extremely malleable, and works with 3rd party plugins that help us to adapt our project to our specific needs. We've already installed the hardhat-waffle and hardhat-ethers plugins, and you can find an extensive list of plugins here: https://hardhat.org/plugins/

We can also create our own tasks. If you open hardhat.config.ts you'll see the sample "accounts" task definition. The task definition function takes 3 arguments - a name, a description, and a callback function that carries out the task. If you change the description of the "accounts" task, to "Hello, world!", and then run npx hardhat in your console, you'll see that the "accounts" task now has the description "Hello, world!".

// hardhat.config.ts
import { task } from "hardhat/config";
import "@nomiclabs/hardhat-waffle";

task("accounts", "Hello, world!", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();
  for (const account of accounts) {
    console.log(account.address);
  }
});

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
export default {
  solidity: "0.7.3",
};

Now our simple Hardhat project is all set up, let's move on to importing & compiling our Bored Ape contract...

Step 3: Importing & Compiling our Contract

Let's start by creating a new folder called contracts in our root directory (Hardhat uses the "contracts" folder as the source folder by default - if you want to change that name, you'll need to configure it within the hardhat.config.ts file):

mdkir contracts

Create a new file called bored-ape.sol in the contracts folder, then paste the contract code that we copied from Etherscan earlier.

NOTE: The .sol extension is the Solidity file extension. To add syntax highlighting and type hints for Solidity files, there is a great VSCode extension made by Juan Blanco called "solidity" - I recommend installing it to make developing Solidity easier:

I also use a VSCode extension called "Solidity Visual Developer", and you'll find many more in the VSCode marketplace.

Now that we have a contracts folder with the bored-ape.sol contract inside it, we are ready to compile the contract. We can use a built-in compile task to do this - all we need to do is run:

npx hardhat compile

When we compile a contract with Hardhat, two files will be generated for each contract and placed into a artifacts/contracts/<CONTRACT NAME> folder. These two files (an "artifact" .json file, and a debug "dbg" .json file) will be generated for each contract - the Bored Ape contract code that we copied from Etherscan actually contains multiple "contracts".

If you view the original contracts/bored-ape.sol file you can see that the "contract" keyword is used 15 times in total, and each instance has its own contract name - therefore, after compiling the bored-ape.sol file we will end up with 30 files in the artifacts/contracts/bored-ape.sol/ folder.

That's ok though - since Solidity contracts are essentially object-oriented classes, we need only be concerned with the BoredApeYachtClub.json artifact - this is the file that contains the "BoredApeYachtClub" ABI (the Application Binary Interface, a JSON representation of the contract's variables & functions), and is exactly what we need to pass into Ethers in order to create a contract instance.

We've now achieved 3 out of our 4 objectives - our last objective for this tutorial is to write a test file so that we can run tests against our imported contract.

Step 4: Writing Tests for our Contract

Testing is a deep and complex subject, so we're going to keep this simple, so that you understand the general process and can dive deeper into the subject at your own pace. Our goal for this step will be to setup and write some tests for the "BoredApeYachtClub" contract.

We've already installed "hardhat-ethers", which is a Hardhat plugin that will give us access to the "Ethers" library, and enable us to interact with our smart contract.

NOTE: If you have a JavaScript / Hardhat project, all of the properties of the Hardhat Runtime Environment are automatically injected into the global scope. When using TypeScript, however, nothing is available in the global scope, so we have to import instances explicitly.

Let's create a new test in the test folder in the root directory, and call it bored-ape.test.ts. Now we'll write a test, and I'll explain what we're doing in the code comments:

// bored-ape.test.ts
// We are using TypeScript, so will use "import" syntax
import { ethers } from "hardhat"; // Import the Ethers library
import { expect } from "chai"; // Import the "expect" function from the Chai assertion library, we'll use this in our test

// "describe" is used to group tests & enhance readability
describe("Bored Ape", () => {
  // "it" is a single test case - give it a descriptive name
  it("Should initialize Bored Ape contract", async () => {
    // We can refer to the contract by the contract name in 
    // `artifacts/contracts/bored-ape.sol/BoredApeYachtClub.json`
    // initialize the contract factory: https://docs.ethers.io/v5/api/contract/contract-factory/
    const BoredApeFactory = await ethers.getContractFactory("BoredApeYachtClub");
    // create an instance of the contract, giving us access to all
    // functions & variables
    const boredApeContract = await BoredApeFactory.deploy(
      "Bored Ape Yacht Club",
      "BAYC",
      10000,
      1
    );
    // use the "expect" assertion, and read the MAX_APES variable
    expect(await boredApeContract.MAX_APES()).to.equal(5000);
  });
});

That's a fair bit of code! Essentially we are creating a Contract Factory, which contains additional information necessary to deploy a contract. Once we have the Contract Factory, we can use the .deploy() method, passing in variables that are required by the contract constructor. Here is the original contract constructor:

//bored-ape.sol
constructor(string memory name, string memory symbol, uint256 maxNftSupply, uint256 saleStart) ERC721(name, symbol)

The constructor takes 4 arguments, each with type definitions:

name, a string
symbol, a string
maxNftSupply, a number
saleStart, a number

Ok - now comes the moment of truth - let's run our test with:

npx hardhat test

You should see something like this:

But hang on - why is it failing? Well, we can see under 1) Bored Ape AssertionError: Expected "10000" to be equal 5000. This is nothing to worry about - I've deliberately added a test case that will fail on the first run - this is good practice, to help remove false positives. If we don't add a failing case to begin with, we can't be certain that we aren't accidentally writing a test that will always return true. A more thorough version of this method would actually begin with creating the test first and then gradually writing code to make it pass, but since it's not the focus of this tutorial we'll gloss over that. If you're interested in learning more about this style of writing tests and then implementing code to make it pass, here are a couple of good introductions:

To make our test pass, edit this line to include 10000:

expect(await boredApeContract.MAX_APES()).to.equal(10000);

Nice! We now have a passing test case :) Let's write a few more tests to flex our muscles.

Before we do that though, we're going to use a helper function called beforeEach that will simplify the setup for each test, and allow us to reuse variables for each test. We'll move our contract deployment code into the beforeEach function, and as you can see, we can use the boredApeContract instance in our "initialize" test:

// bored-ape.test.ts
import { expect } from "chai";
import { ethers } from "hardhat";
import { beforeEach } from "mocha";
import { Contract } from "ethers";
import { SignerWithAddress } from "@nomiclabs/hardhat-ethers/signers";

describe("Bored Ape", () => {
  let boredApeContract: Contract;
  let owner: SignerWithAddress;
  let address1: SignerWithAddress;

  beforeEach(async () => {
    const BoredApeFactory = await ethers.getContractFactory(
      "BoredApeYachtClub"
    );
    [owner, address1] = await ethers.getSigners();
    boredApeContract = await BoredApeFactory.deploy(
      "Bored Ape Yacht Club",
      "BAYC",
      10000,
      1
    );
  });

  it("Should initialize the Bored Ape contract", async () => {
    expect(await boredApeContract.MAX_APES()).to.equal(10000);
  });

  it("Should set the right owner", async () => {
    expect(await boredApeContract.owner()).to.equal(await owner.address);
  });
});

Since we're using TypeScript, we've imported types for our variables in "beforeEach", and have added an "owner" and "address1" variable that can be used in test cases that require addresses. We've made use of the owner variable by adding another test "Should set the right owner" - this checks that the owner of the contract is the same one that is returned when we deployed the contract.

In the bored-ape.sol file, notice that there is a function called mintApe which takes in both a number of tokens (representing Bored Ape NFTs), and also expects to receive some ETH. Let's write a test for that function, which will let us try out payments, and force us to make use of some other methods in the contract to make the test pass.

We'll start by defining the test:

// bored-ape.test.ts
it("Should mint an ape", async () => {
  expect(await boredApeContract.mintApe(1)).to.emit(
    boredApeContract,
    "Transfer"
  );
});

Since the mintApe method doesn't return a value, we are going to listen for an event called "Transfer" - we can trace the mintApe function's inheritance and see that ultimately it calls the _mint function of an ERC-721 token and emits a { Transfer } event:

At the moment it doesn't matter that we listen for the "Transfer" event - this test is going to fail since mintApe contains a number of conditions that we haven't fulfilled:

We can see that an error "Sale must be active to mint Ape", so it looks like first we have to call the contract method flipSaleState:

// bored-ape.test.ts
await boredApeContract.flipSaleState();

Run npx hardhat test and...we're still failing - but with a different error! A different error is actually great news, because it means we're making progress :) Looks like "Ether value sent is not correct" - which makes sense, since we didn't send any ETH along with our contract call. Notice that the mintApe method signature contains the keyword "payable":

// bored-ape.sol
function mintApe(uint numberOfTokens) public payable

That means that this method can (and expects to) receive ETH. We can retrieve the required cost of a Bored Ape first by calling the apePrice getter method:

// bored-ape.sol
uint256 public constant apePrice = 80000000000000000; //0.08 ETH

Finally, we need to import some more functions, use apePrice as our value, and send it through as ETH with our call to mintApe. We'll also chain another method called withArgs to our emit call, which will give us the ability to listen to the arguments emitted by the "Transfer" event:

// bored-ape.test.ts
import chai from "chai";
import { solidity } from "ethereum-waffle";

chai.use(solidity)

it("Should mint an ape", async () => {
  await boredApeContract.flipSaleState();
  const apePrice = await boredApeContract.apePrice();
  const tokenId = await boredApeContract.totalSupply();
  expect(
    await boredApeContract.mintApe(1, {
      value: apePrice,
    })
  )
  .to.emit(boredApeContract, "Transfer")
  .withArgs(ethers.constants.AddressZero, owner.address, tokenId);
});

We're using an "overrides" object (https://docs.ethers.io/ethers.js/html/api-contract.html#overrides) to add additional data to our method call - in this case, a value property that will be received by the contract's mintApe method as msg.value, ensuring that we now satisfy the condition of the "Ether value sent is not correct" requirement:

// bored-ape.sol
require(apePrice.mul(numberOfTokens) <= msg.value, "Ether value sent is not correct");

We've imported chai into our test file so that we can use chai "matchers" - which we combine with the "solidity" matcher imported from "ethereum-waffle": https://ethereum-waffle.readthedocs.io/en/latest/matchers.html - now we are able to specify the exact arguments that we expect to receive from the "Transfer" event, and we can ensure that the test is actually passing as intended.

If you're wondering how we determined the arguments we expect to receive, I'll explain: First, we can inspect the _mint method in bored-ape.sol and see that Transfer emits 3 arguments.

// bored-ape.sol
emit Transfer(address(0), to, tokenId);

The first argument is the "Zero account": https://ethereum.stackexchange.com/questions/13523/what-is-the-zero-account-as-described-by-the-solidity-docs - also known as "AddressZero". The second argument "to" is the address that sent the mintApe transaction - in this case we're just using the owner's address. Lastly, the tokenId is defined within a for-loop in the mintApe method, and is set to be equal to the return value of calling the tokenSupply getter.

Once we know what these values are, we can input them into our withArgs method, including a handy constant provided by the ethers library called AddressZero:

// bored-ape.test.ts
.withArgs(ethers.constants.AddressZero, owner.address, tokenId);

And that's it - we can run npx hardhat test and we'll get a passing test. If you change any of the values in withArgs you'll get a failing test - exactly what we expect!

Here's what the final test file looks like:

import { expect } from "chai";
import { ethers } from "hardhat";
import chai from "chai";
import { solidity } from "ethereum-waffle";
import { beforeEach } from "mocha";
import { Contract } from "ethers";
import { SignerWithAddress } from "@nomiclabs/hardhat-ethers/signers";

chai.use(solidity);

describe("Bored Ape", () => {
  let boredApeContract: Contract;
  let owner: SignerWithAddress;
  let address1: SignerWithAddress;

  beforeEach(async () => {
    const BoredApeFactory = await ethers.getContractFactory(
      "BoredApeYachtClub"
    );
    [owner, address1] = await ethers.getSigners();
    boredApeContract = await BoredApeFactory.deploy(
      "Bored Ape Yacht Club",
      "BAYC",
      10000,
      1
    );
  });

  it("Should initialize the Bored Ape contract", async () => {
    expect(await boredApeContract.MAX_APES()).to.equal(10000);
  });

  it("Should set the right owner", async () => {
    expect(await boredApeContract.owner()).to.equal(await owner.address);
  });

  it("Should mint an ape", async () => {
    await boredApeContract.flipSaleState();
    const apePrice = await boredApeContract.apePrice();
    const tokenId = await boredApeContract.totalSupply();
    expect(
      await boredApeContract.mintApe(1, {
        value: apePrice,
      })
    )
      .to.emit(boredApeContract, "Transfer")
      .withArgs(ethers.constants.AddressZero, owner.address, tokenId);
  });
});

Jackpot! Well done, we've covered all of our objectives for this tutorial:

How to find smart contract code for specific projects
How to add that code to a local development environment
How to install & set-up a simple Hardhat development environment
How to compile a contract and write tests for it

Hopefully this has given you some insight into the process of importing and testing contracts with Hardhat, Ethers, Chai & Mocha. The same processes can be followed when you write your own Solidity contracts, and when combined with a front-end repo you have the power of a complete development suite with really intuitive processes & thorough documentation.

If you'd like to view the source code for this tutorial, you can find it here: https://github.com/jacobedawson/import-test-contracts-hardhat

Thanks for playing ;)

Follow me on Twitter: https://twitter.com/jacobedawson

Send React Web3 Transactions via MetaMask with useDapp

Jacob E. Dawson — Tue, 20 Jul 2021 08:25:52 +0000

Today we're going to send real transactions via our React Dapp, both reading from & writing to an Ethereum smart-contract written in Solidity. If you followed the last tutorial Build a Web3 Dapp in React & Login with MetaMask, you'll already know how to connect an Ethereum account to a dapp - now we're getting to the good stuff: interacting with and changing the state of the Ethereum network!

By the end of today's tutorial you will know the following:

How to write a basic smart contract in Solidity
How to deploy that contract to a test network
How to import that contract into a frontend
How to read from & write to that contract

Tech Stack

In addition to the tech we used last time:

react ^17.0.2
typescript ^4.2.1
@usedapp/core ^0.4.1
@chakra-ui/react ^1.6.5

We'll also be making use of Solidity >0.5 and the Remix Solidity online editor.

NOTE: Before we start, make sure you have MetaMask installed and you are connected to the Ropsten test network.

Part 1: Creating & Deploying a Smart Contract via Remix

Step 1.) Create a basic contract in Remix

We're going to create a simple smart contract using the online editor Remix: https://remix.ethereum.org/. Make sure you're connected to the Ropsten network (via MetaMask), then navigate to the File Explorer tab, click on contracts and create a new file called SimpleContract.sol:

We're not going to spend too much time on explaining Solidity - it's essentially an object-oriented language with JavaScript-like syntax, where class is contract. There are many more subtle differences, but they are beyond the scope of this tutorial! (I'll add some links for learning more about Solidity at the end of this tutorial).

Inside SimpleContract.sol, add the following code:



pragma solidity >0.5; // pragma is always required

contract SimpleContract {
  uint256 public count;

  function incrementCount() public {}

  function setCount(uint256 _count) public {}
}

In the above code we are initializing a variable called count as a uint256 integer type. When we declare this variable it is automatically set to 0.

You may notice that both our variable & function definitions include the keyword "public"; this is to give external accounts the ability to interact with them (other keywords include private, internal & external).

Another thing to note is that when we declare a public variable as we have with count, Solidity will automatically create a "getter" function with the same name for that variable - this contract now includes a function called count that we can use to read the count variable.

Lastly, you will see a notification on the Solidity compiler tab in Remix - Remix is automatically compiling the contracts that we write in the online editor, saving us a step (that we would normally have to initiate in our local development environment):

Next, let's add some logic to the two functions we created in SimpleContract.sol:



pragma solidity > 0.5;

contract SimpleContract {
    uint256 public count;

    function incrementCount() public {
        count++;
    }

    function setCount(uint256 _count) public {
        require(_count > 0);
        count = _count;
    }
}

This is really all we need to get started - the incrementCounter function will increment the count variable when we call it, and the setCounter function lets us set the count variable.

Notice the line require(_count > 0); - require is a Solidity function that is essentially a conditional, whereby the condition _count > 0 must be true for the program flow to continue - if the condition is not true, the program execution will halt with an error.

You might see the compiler complaining here about a missing license definition - to fix that, simply add the following license identifier at the top of SimpleContract.sol:



// SPDX-License-Identifier: MIT

Step 2.) Deploying our Smart Contract

Now we have a contract that we will be able to read from & write to - but in order to do that we will want to deploy the contract to the Ropsten test network (we use Ropsten for test purposes and also because we can use test ETH that does not cost us real-world money!).

Click the "Deploy & Run Transactions" tab in Remix, and change the "Environment" dropdown to "Injected Web3":

This will prompt your MetaMask extension to open, and show the "Connect With MetaMask" screen. Here you can select the account that you would like to connect with:

Click "Next", and then "Connect" on the next screen, where MetaMask asks if you would like to allow this site to "View the addresses of your permitted accounts". Once you do that, you will see that your Ethereum account is now connected to the Remix dapp:

You're going to need some test ETH to deploy the contract, so run over to the Ropsten testnet faucet, enter the account address that you've connected with, and request some test ETH. This should take a few seconds, but may take a little longer depending on how busy the faucet is.

So now we have a smart-contract written & compiled, and our Ethereum account connected to Remix. Let's now deploy our contract to Ropsten. While on the "Deploy & Run Transactions" tab, click the orange "Deploy" button - this is going to prompt your MetaMask to open, and this time you will need to spend some test ETH:

Scroll down and click "Confirm" to pay the gas required to deploy our SimpleContract. In the Remix console you'll see that the contract creation is pending:

This may take up to a minute, but soon you'll see a confirmation that the contract has been deployed!

Now, down the bottom of the Deploy & Run Transactions tab we can see some details about our deployed contract:

Here you can use the provided inputs to play with the contract, and test if it's working (in a professional workflow we would test our contracts during the creation process, but for this tutorial we won't need to go through that process).

Step 3.) Interacting with our Smart Contract via Remix

Click "Count" - you'll see that it triggers our automatically created "getter" function, and will show us the current state of the count variable. In the Remix console you'll also see that a CALL was made to our deployed contract, triggering the function and returning the variable value!

NOTE: When you deploy a contract, it will have an Ethereum address that cannot be changed*. We will need to store this address as we will use it in our frontend dapp. Contracts deployed to the Ethereum network are immutable - once they are deployed they cannot be changed. If you need to change something within a contract, you'll need to deploy a new version, which will also use a brand new contract address.

*There are "Upgrades Plugins" provided by OpenZeppelin, but I don't currently know enough about them to understand how they work, so for all intents & purposes we will regard our contracts as completely immutable.

You can copy the deployed contract's address from the Remix interface:

You can also view additional information about the address on the network it has been deployed on using Etherscan: https://ropsten.etherscan.io/address/[YOUR_CONTRACT_ADDRESS]

Before you continue testing the contract, it's also useful to know: reading from a contract is free, writing to a contract costs ETH. While on a test network this isn't an issue, you just have to make sure you have test ETH from the faucet - but writing to contracts on the mainnet is going to cost you real money.

If you click "incrementCount" you'll be prompted by MetaMask to confirm the fee - you're changing the state of the contract (and therefore the state of the entire Ethereum network), and this will cost you a gas fee. The transaction will then be pending, and eventually processed:

If you now click "count" again, you'll see that the count variable has indeed been incremented :)

Let's try the setCount function - add the number 99 in the field then click "setCount" - once again, MetaMask will open since we are writing to the smart contract state and therefore need to pay for the computation. After the transaction has been processed by the network, reading the count variable will now return 99 - everything is working as expected.

Remember that we set a require statement in our setCount function? Trying sending the number 0 as input to setCount and see what happens..

We've now completed Part 1 of this tutorial - writing & deploying a smart contract to to Ethereum network, and interacting with the contract. In Part 2 we're going to create a simple dapp with a custom UI that allows us to interact with our contract.

Part 2: Create a React Dapp & Connecting it to our Smart Contract

Step 1.) Setting up our project

To get into the good stuff, we'll start by creating a new branch from the UI we built in the previous tutorial. If you haven't already, clone that repo:



git clone https://github.com/jacobedawson/connect-metamask-react-dapp

Then cd into connect-metamask-react-dapp

Run the following command to create a new branch:



git checkout -b send-transactions

Then run:



yarn install

So we are now in our React dapp repo called connect-metamask-react-dapp, on a branch called send-transactions. Run the following command to start up the project:



yarn start

Make sure that you're on Ropsten Test Network, and that you have ETH in your account. Connect to the dapp and you should be seeing something like this (with your account & balance):

Our goals now are the following:

Connect the SimpleContract contract to our React UI
Read the count variable and display it in our interface
Add some inputs to our interface
Send transactions to update the count variable

Step 2: Import our Contract & Read a Value

We're using the useDapp framework in our app to provide a clean abstraction for interacting with the Ethereum network, and they provide the useContractCall and useContractCalls hooks to make custom calls to a smart contract.

In order to interact with a smart contract from our Dapp, we need two things: the contract address and an ABI (application binary interface).

Let's create a new folder in our src directory called contracts, and then create an index.ts file in that folder (remember, we are using TypeScript, not pure JavaScript).

Go to Remix and copy the address of the smart contract that you have deployed to the Ropsten network, and export it from the index.ts file:



export const simpleContractAddress = "0x5711aCCC813db3E27091acD1cae9Cc483721717C";

Now we want to get the ABI of our contract from Remix. First, create a new folder in src called abi, and inside that create a new .json file called SimpleContract.json. In Remix, go to the "Compile" tab, and down below "Compilation Details" you will see a copy icon next to "ABI". Click it to copy the ABI, then paste it into abi/SimpleContract.json. It should look like this:



[
    {
        "inputs": [],
        "name": "incrementCount",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "uint256",
                "name": "_count",
                "type": "uint256"
            }
        ],
        "name": "setCount",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "count",
        "outputs": [
            {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
]

We can now import our contract address and ABI into any other file in our React project. Now we're going to create the component to display our "count" variable. In our components directory, create a file called Count.tsx - this is also where we'll add our inputs. Let's add a basic layout:



import { Flex, Text, Button } from "@chakra-ui/react";

export default function Count() {
  return (
    <Flex direction="column" align="center" mt="4">
      <Text color="white" fontSize="8xl"></Text>
      <Button colorScheme="teal" size="lg">
        Increment
      </Button>
    </Flex>
  );
}

And import Count into App:



import Count from "./components/Count";

// ...other code
<Layout>
  <ConnectButton handleOpenModal={onOpen} />
  <AccountModal isOpen={isOpen} onClose={onClose} />
  <Count />
</Layout

We should now see the following:

Step 3: Create a Hook to Read Values from our Contract

Our "Increment" button doesn't do anything yet, and we also aren't pulling in any data from our smart contract. In order to do this we're going to create a hook. Create a folder called hooks inside the src directory, and then create the file index.ts inside the hooks folder. Inside hooks/index.ts we'll import our contract address & ABI, as well as a useContractCall hook from useDapp and a utils object from Ethers:



// hooks/index.ts
import { ethers } from "ethers";
import { useContractCall } from "@usedapp/core";
import simpleContractAbi from "../abi/SimpleContract.json";
import { simpleContractAddress } from "../contracts"

const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

export function useCount() {
  const [count]: any = useContractCall({
    abi: simpleContractInterface,
    address: simpleContractAddress,
    method: "count",
    args: [],
  }) ?? [];
  return count;
}

If you're not familiar with the double question mark syntax (known formally by its very catchy name "Nullish coalescing operator"), if the left-hand side operand is null or undefined, it will return the right-hand operand, so if our useContractCall is undefined, the count variable we destructure will be undefined (since the right-hand operand is an empty array).

We're using the Interface constructor from Ethers to create a new Interface instance, which we'll need to pass to the useDapp hook useContractCall. Let's import the hook into our Count.tsx file:



// Count.tsx
import { Flex, Text, Button } from "@chakra-ui/react";
import { useCount } from "../hooks";

export default function Count() {
  const count = useCount();
  return (
    <Flex direction="column" align="center" mt="4">
      <Text color="white" fontSize="8xl">
        {count ? count.toNumber() : 0}
      </Text>
      <Button colorScheme="teal" size="lg">
        Increment
      </Button>
    </Flex>
  );
}

If the count variable is undefined, we'll show 0, otherwise we'll display the count variable. Notice that we're converting the value returned by useCount into a regular JavaScript number using the .toNumber method - our smart contract function is actually returning a BigNumber object, so we need to transform it so that React can display it.

Depending on current state of your contract, the number that you'll now see on the screen will differ. To check that we're reading up-to-date information directly from our contract, go to Remix and use the "setCount" function to set the count to something distinctive. Send the transaction and in a few seconds you will see the React UI display the updated count:

We're making good progress now! We're importing our contract, reading a value from it and displaying it in our UI. The next step is to be able to send transactions from our UI and update the state of the smart contract.

Step 4: Send Transactions & Update our Smart Contract

First we'll add a new hook into our hooks/index.ts file. We're also going to import useContractFunction from useDapp, and the Contract constructor from ethers. The imports in hooks/index.ts should look like this:



import { ethers } from "ethers";
import { Contract } from "@ethersproject/contracts";
import { useContractCall, useContractFunction } from "@usedapp/core";
import simpleContractAbi from "../abi/SimpleContract.json";
import { simpleContractAddress } from "../contracts";

We're going to use the Contract constructor to create an instance of our contract, and to do that we need to pass in both our contract address and our newly created interface:



// hooks/index.ts
const contract = new Contract(simpleContractAddress, simpleContractInterface);

Now let's create our hook (we'll call it "useIncrement"), which makes use of useDapp's useContractFunction hook:



export function useIncrement() {
  const { state, send } = useContractFunction(contract, "incrementCount", {});
  return { state, send };
}

The useContractFunction hook takes in our contract instance, the name of the method that we'd like to call, and an options object. It returns an object with two variables - state and send, which we are destructuring from the function call. Lastly, we export our useIncrement hook so that we can use it anywhere in our dapp.

That's all we need for now, so let's move over to Count.tsx, import the new useIncrement hook, and create a "handleIncrement" function, which we'll add to our Button component's onClick handler:



// Count.tsx
import { Flex, Text, Button } from "@chakra-ui/react";
import { useCount, useIncrement } from "../hooks";

export default function Count() {
  const count = useCount();
  const { state, send: incrementCount } = useIncrement();

  function handleIncrement() {
    incrementCount();
  }

  return (
    <Flex direction="column" align="center" mt="4">
      <Text color="white" fontSize="8xl">
        {count ? count.toNumber() : 0}
      </Text>
      <Button 
        colorScheme="teal" 
        size="lg" 
        onClick={handleIncrement}>
        Increment
      </Button>
    </Flex>
  );
}

Now we're ready to test out our "Increment" button. Make sure that the dapp is running, and the click "Increment". Your MetaMask extension should open up with a prompt, where you can set a gas price for the transaction and then confirm you want to send the transaction:

Once you confirm the transaction it will be signed using our private key and sent to the Ethereum network, where it will be processed (mined) quickly by a node, added to a block, broadcast to the network and added to the updated network state - after all of that, we should see our interface increment the count variable by 1. It may seem like a lot of work just to see a number increase by 1, but actually we've now covered most of the basics of web3 development - connecting to an account, reading values and sending transactions!

We're almost done - let's take this opportunity to go one step further and send a value input by the user to our smart contract...

Step 5: Sending User Input to our Smart Contract

For the last part of today's tutorial, we're going to accept user input in our UI and send it to our setCount smart contract function.

We'll start by adding another hook to hooks/index.ts called "useSetCount":



// hooks/index.ts
export function useSetCount() {
  const { state, send } = useContractFunction(contract, "setCount", {});
  return { state, send };
}

This is essentially the same as our existing useIncrement hook - the only difference is the method name. That gives us an opportunity to create a more generic hook that takes a method name and returns { state, send } - let's create a single hook "useContractMethod" that will replace both useIncrement and useSetCount:



// hooks/index.ts
export function useContractMethod(methodName: string) {
  const { state, send } = useContractFunction(contract, methodName, {});
  return { state, send };
}

Now we can delete useIncrement and useSetCount and import useContractMethod into our Count.tsx component:



// Count.tsx
import { useCount, useContractMethod } from "../hooks";

// pass method names to useContractMethod
const { state, send: incrementCount } = useContractMethod("incrementCount");
const { state: setCountState, send: setCount } = useContractMethod("setCount");

Notice how we are also changing the variable names for some of the destructured values from useContractMethod. Now that we've imported the methods, we'll import useState to hold the input state, add an input component and another button in order to collect user input, and send it to the setCount method. Here's the final, complete code for Count.tsx:



// Count.tsx
import { useState } from "react";
import {
  Box,
  Flex,
  Text,
  Button,
  NumberInput,
  NumberInputField,
} from "@chakra-ui/react";
import { useCount, useContractMethod } from "../hooks";

export default function Count() {
  const count = useCount();
  const { state, send: incrementCount } = useContractMethod("incrementCount");
  const { state: setCountState, send: setCount } =
    useContractMethod("setCount");
  const [input, setInput] = useState("");

  function handleIncrement() {
    incrementCount();
  }

  function handleSetCount() {
    const _count = parseInt(input);
    if (_count) {
      setCount(_count);
    }
  }

  function handleInput(valueAsString: string, valueAsNumber: number) {
    setInput(valueAsString);
  }

  return (
    <Flex direction="column" align="center" mt="4">
      <Text color="white" fontSize="8xl">
        {count ? count.toNumber() : 0}
      </Text>
      <Button colorScheme="teal" size="lg" onClick={handleIncrement}>
        Increment
      </Button>
      <Box mt={4}>
        <NumberInput
          mb={2}
          min={1}
          value={input}
          onChange={handleInput}
          color="white"
          clampValueOnBlur={false}
        >
          <NumberInputField />
        </NumberInput>
        <Button isFullWidth colorScheme="purple" onClick={handleSetCount}>
          Set Count
        </Button>
      </Box>
    </Flex>
  );
}

At this point we should have our entire UI for this tutorial ready to go:

Our "NumberInput" will only accept numbers, and we've coded logic into our component to only fire the setCount method if our count value is 1 or more. Let's test it out by setting the count to 500 and clicking "Set Count":

All good! That's it - well done if you've made it this far - we've managed to achieve all of our goals for this tutorial:

How to write a basic smart contract in Solidity
How to deploy that contract to a test network
How to import that contract into a frontend
How to read from & write to that contract

Hopefully this tutorial has shown you how easy it is to get started with dapp development. If you spot any bugs or have any questions, leave a comment below and I'll get back to you asap!

In the next tutorial, we'll learn how to import a pre-existing 3rd party contract and build an alternate interface for it..

Thanks for playing ;)

Helpful Resources & Frameworks

https://ethereum.org/en/whitepaper/
https://usedapp.readthedocs.io/en/latest/
https://ethereum.org/en/developers/tutorials/
https://ethernaut.openzeppelin.com/
https://eth.build/
https://hardhat.org/tutorial/
https://www.quicknode.com/guides/defi
https://chakra-ui.com/
https://solidity-by-example.org/

Full Repo (send-transactions branch)

Follow me on Twitter: https://twitter.com/jacobedawson

Build a Web3 Dapp in React & Login with MetaMask

Jacob E. Dawson — Wed, 14 Jul 2021 12:47:00 +0000

Today we're going to build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface - specifically, we are building the "account login" button that allows users to connect to a Dapp using their MetaMask extension.

By the end of the tutorial you will have a working React app that will be able to connect to your MetaMask account, and read your address & ETH balance. If you connect with multiple accounts the interface will change to reflect the active account.

A lot of tutorials skip this basic login strategy, or use outdated libraries (which you don't find out until you're halfway through!). To avoid confusion, as of July, 2021 this tutorial & the accompanying repo uses the following tech:

react ^17.0.2
typescript ^4.2.1
@usedapp/core ^0.4.1
@chakra-ui/react ^1.6.5

The full repository can be found HERE.

We will be replicating (fairly closely) the look, feel, and functionality of the following "Connect to a wallet" section of the Uniswap v2 interface:

Before we get started:

You'll need MetaMask installed to get this working. If you don't already have it, start by downloading & installing the MetaMask extension for Chrome, Firefox, Brave, or Edge: https://metamask.io/download.html (be careful to triple check the URL and ensure you are downloading from a trusted website). If you haven't set up MetaMask before, follow the instructions to set up an Ethereum account.

Once you have MetaMask installed, we are ready to start coding...

Step 1: Install Our Libraries

We'll be using Create React App with a TypeScript template to build our app. We don't use a lot of TypeScript in the tutorial but it's a good way to dip your toes in if you haven't used it before.

To create the app, open up a console and execute the following instructions:

npx create-react-app YOUR_APP_NAME --template typescript

This will make a new Create React App project called simple-web3-dapp, with TypeScript pre-configured.

If you open up a copy of VSCode (or the editor of your choice) and navigate to your app folder, you'll see a React project ready to go, including index.tsx, App.tsx and a tsconfig.json file.

We won't need a lot of the template files & code, so delete all of the code in the index.tsx file and add the following code:

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById("root")
);

This gives us the most basic index.tsx file we need to begin. Next, we're going to install a few more libraries that we'll be using to create our app:

yarn install @chakra-ui/react @emotion/react @emotion/styled @framer-motion @usedapp/core

Step 2: Set up useDApp

Apart from their decision to add a capital A to the name of their library, useDApp is an incredibly useful framework for "rapid DApp development", and includes some helpful hooks and seamless integration into a modern React project. To dive into everything you can do with the framework, check out their website at https://usedapp.io/. We'll only be using some basic elements of useDApp to get our web3 dapp working, but there's much more you can do with it.

In our index.tsx file, we're going to import the DAppProvider from useDApp to set up an app-wide provider that will allow us to access Ethereum accounts and prompt MetaMask to ask for permission to read addresses:

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"
// Import DAppProvider
import { DAppProvider } from "@usedapp/core";

ReactDOM.render(
  <React.StrictMode>
    {/* 
       Wrap our app in the provider, config is required, 
        but can be left as an empty object: 
    */}
    <DAppProvider config={{}}>
      <App />
    </DAppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Step 3: Set Up App.tsx and a Layout component

Next let's move to our App.tsx file, where we'll add Chakra UI to handle styling & components within our app. Chakra UI has become my favourite React component library, I find it extremely intuitive with sensible defaults and an API that makes it super-easy to override when necessary. I recommend Chakra over Tailwind because it's less verbose and easier to get started with:

// App.tsx
import { ChakraProvider } from "@chakra-ui/react";

export default function App() {
  return (
    // lets us use Chakra UI syntax across our app:
    <ChakraProvider>
      // we'll add content to our app shortly
    </ChakraProvider>
  )
}

To keep this tutorial focused, we won't be replicating the entire Uniswap navbar, so we'll just center the elements we're focused on by wrapping them in a Layout component. Inside the src directory of your project, create a components directory and inside that create a Layout.tsx file:

// Layout.tsx
import { ReactNode } from "react";
import { Flex } from "@chakra-ui/react";

type Props = {
  children?: ReactNode;
};

export default function Layout({ children }: Props) {
  return (
    <Flex
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      h="100vh"
      bg="gray.800"
    >
      {children}
    </Flex>
  )
}

The code we've added should be pretty easy to follow - we're using a Chakra Flex component, setting the height to the full page height and centering the child elements. We've also added a TypeScript type to define the child elements as a ReactNode, which lets us add individual elements, and arrays of elements, while keeping TypeScript happy and providing us with type hints elsewhere in the project.

Let's now import that Layout component into our App.tsx:

// App.tsx
import { ChakraProvider } from "@chakra-ui/react";
import Layout from "./components/Layout";

export default function App() {
  return (
    <ChakraProvider>
      <Layout>
        <p style={{ color: "white" }}>Hello, world!</p>
      </Layout>
    </ChakraProvider>
  )
}

If you run yarn start you should now see a page with "Hello, world!" vertically centered. We're getting to the good stuff soon, I promise :)

Step 4: Creating our "Connect to a wallet" button

We're going to create our ConnectButton now, which is where the bulk of the magic happens. Start by creating a file called ConnectButton.tsx inside the components folder:

// ConnectButton.tsx
import { Button, Box, Text } from "@chakra-ui/react";
import { useEthers, useEtherBalance } from "@usedapp/core";

export default function ConnectButton() {
  const {activateBrowserWallet, account } = useEthers();
  const etherBalance = useEtherBalance(account);

  return account ? (
    <Box>
      <Text color="white" fontSize="md">
        {etherBalance && etherBalance} ETH
      </Text>
    </Box>
  ) : (
    <Button>Connect to a wallet</Button>
  );
}

Here we've imported the useEthers and useEtherBalance hooks from useDApp, which will enable us to connect to our MetaMask wallet. Import ConnectButton.tsx into App.tsx and place the component in between the Layout component in App.tsx:

// App.tsx
import ConnectButton from "./components/ConnectButton";
// other code

<Layout>
  <ConnectButton />
</Layout>

If you still have React running your page should have hot reloaded and you'll see this:

Great - we've got a button, but it doesn't do anything - let's add a function to handle the button click. In ConnectButton.tsx, we'll add a click handler:

// ConnectButton.tsx
export default function ConnectButton() {
  // other code

  function handleConnectWallet() {
    activateBrowserWallet();
  }

  return account ? (
    <Box>
      <Text color="white" fontSize="md">
        // etherBalance will be an object, so we stringify it 
        {etherBalance && JSON.stringify(etherBalance)} ETH
      </Text>
    </Box>
  ) : (
    <Button onClick={handleConnectWallet}>
      Connect to a wallet
    </Button>
  );
}

I personally like to define named functions within my components, so we're creating the handleConnectWallet function which simply invokes the activateBrowserWallet function provided by useDApp. It might seem unnecessary at the moment, but I find that getting into the practice of defining function handlers keeps my code cleaner and easier to manage than mixing inline event handlers.

Now for the moment of truth: let's click the "Connect to a wallet button"...

If everything has gone to plan then clicking the button should have prompted MetaMask to open and give us a "Connect With MetaMask" view:

Select the account that you'd like to log in with and click "Next" in the MetaMask UI. You should then see a section asking if you will let the dapp view the addresses of your permitted accounts:

Click "Connect" and all of a sudden you'll see that the Connect Button has been replaced by some text:

This means we're connected! If you have React Dev Tools installed you can also navigate to the Components tab and look for Web3ReactContext - primary.Provider - you'll see that the context now holds a value object with an account property that matches the Ethereum account you connected with:

Ok, so we've made some progress - we're connecting to a React dapp with MetaMask, and we can see account info within our dapp's state. But, this isn't very pretty or useful. We have to do a little bit of work to display something nicer.

Step 4: Formatting & Styling our Connect Button

The etherBalance value returned by the useEtherBalance hook is giving us a BigNumber object that we need to format. Let's import a utility from ethers.js:

// ConnectButton.tsx
import { formatEther } from "@ethersproject/units";

Once we've done that, we can use formatEther which will convert ETH denominated in Wei into a floating point number, which we will then pass through the JavaScript method parseFloat set to 3 fixed decimal places:

// ConnectButton.tsx
<Box>
  <Text color="white" fontSize="md">
  {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(3)} ETH
  </Text>
</Box

Now we should see: 0.000 ETH (or if you already have ETH you'll see your account balance). You can grab some Ethereum from the Ropsten faucet here if you want to see a nice balance :)

Now we're going to add some styles and also pull in the user account address to display it on the Connect Button's logged in state:

// ConnectButton.tsx
import { Button, Box, Text } from "@chakra-ui/react";
import { useEthers, useEtherBalance } from "@usedapp/core";
import { formatEther } from "@ethersproject/units";


export default function ConnectButton() {
  const { activateBrowserWallet, account } = useEthers();
  const etherBalance = useEtherBalance(account);

  function handleConnectWallet() {
    activateBrowserWallet();
  }

  return account ? (
    <Box
      display="flex"
      alignItems="center"
      background="gray.700"
      borderRadius="xl"
      py="0"
    >
      <Box px="3">
        <Text color="white" fontSize="md">
          {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(3)} ETH
        </Text>
      </Box>
      <Button
        bg="gray.800"
        border="1px solid transparent"
        _hover={{
          border: "1px",
          borderStyle: "solid",
          borderColor: "blue.400",
          backgroundColor: "gray.700",
        }}
        borderRadius="xl"
        m="1px"
        px={3}
        height="38px"
      >
        <Text color="white" fontSize="md" fontWeight="medium" mr="2">
          // check account is defined and then slice the string
          {account &&
            `${account.slice(0, 6)}...${account.slice(
              account.length - 4,
              account.length
            )}`}
        </Text>
      </Button>
    </Box>
  ) : (
    <Button onClick={handleConnectWallet}>Connect to a wallet</Button>
  );
}

Here we've added some styles to replicate the Uniswap button, using some neat Chakra properties on the components. You'll notice that we also use the .slice string method to shorten the Ethereum account address - an Ethereum address is 42 characters long, which is a bit unwieldy for the UI, so the standard practice is to trim some of the middle characters for display. Here we show the first 6 and last 4 characters, the same as the Uniswap UI.

Let's compare our Connect Button with the Uniswap version:

We're looking pretty close, but we're missing the little avatar. Let's make another component, called Identicon.tsx, which we'll create in our components folder:

// Identicon.tsx
import { useEffect, useRef } from "react";
import { useEthers } from "@usedapp/core";
import styled from "@emotion/styled";

const StyledIdenticon = styled.div`
  height: 1rem;
  width: 1rem;
  border-radius: 1.125rem;
  background-color: black;
`;

export default function Identicon() {
  const ref = useRef<HTMLDivElement>();
  const { account } = useEthers();

  useEffect(() => {
    if (account && ref.current) {
      ref.current.innerHTML = "";
    }
  }, [account]);

  return <StyledIdenticon ref={ref as any}
}

At the moment this won't show us anything different - we're going to install a library called Jazzicon made by MetaMask themselves:

yarn add @metamask/jazzicon

The Jazzicon library takes a diameter in pixels, and a JavaScript integer and returns a colorful, Cubist avatar - this is actually the exact same library and technique that the Uniswap interface uses:

// Identicon.tsx
import Jazzicon from "@metamask/jazzicon";
// ...othercode

useEffect(() => {
  if (account && ref.current) {
    ref.current.innerHTML = "";
    ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)));
  }
}, [account]);

return <StyledIdenticon ref={ref as any} />

NOTE: You might run into a TypeScript error here, so we'll quickly declare a module to get rid of the error. Go to the react-app-env.d.ts file (preinstalled by Create React App), and add the following module declaration:

declare module "@metamask/jazzicon" {
  export default function (diameter: number, seed: number): HTMLElement;
}

Now let's import Identicon.tsx into ConnectButton.tsx and add the Identicon component to our account button:

// ConnectButton.tsx
import Identicon from "./Identicon";

// ...other code
      <Button
        bg="gray.800"
        border="1px solid transparent"
        _hover={{
          border: "1px",
          borderStyle: "solid",
          borderColor: "blue.400",
          backgroundColor: "gray.700",
        }}
        borderRadius="xl"
        m="1px"
        px={3}
        height="38px"
      >
        <Text color="white" fontSize="md" fontWeight="medium" mr="2">
          {account &&
            `${account.slice(0, 6)}...${account.slice(
              account.length - 4,
              account.length
            )}`}
        </Text>
        // Add the newly imported Identicon component
        <Identicon />
      </Button>

Lovely! Now we should have an element that displays our Ethereum account and ETH balance along with a nice little avatar:

So let's take stock of where we are now:

We have added the useDApp provider to our React dapp
We can connect an Ethereum account and retrieve the address & ETH balance
We've used Chakra to mimic the style of the Uniswap connect element

A reasonable question that might come up now is: how do we "logout" from the dapp? Notice that the useEthers hook comes with the activateBrowserWallet function. It also comes with a deactivate function that we can use to "log out" from the dapp - however, that needs to come with a bit of extra info: using the deactivate function does not actually disconnect the user from the dapp, it merely clears the state in the provider. If we "deactivate" and refresh the page, then click "Connect to a wallet" again, you'll see that the user address and balance is instantly shown, without logging back in via MetaMask.

The reason for this is that once MetaMask is connected via the permissions, it will remain connected until we explicitly disconnect via the MetaMask interface:

If you've used a lot of DeFi products you'll notice that this is the standard Web3 practice, even though it is unintuitive compared to traditional Web2-style auth. This is an ongoing issue related to MetaMask: https://github.com/MetaMask/metamask-extension/issues/8990, and while several solutions have been suggested, I personally haven't found one that works as expected. You might notice that in the Uniswap interface itself, they don't provide a "logout" button, just a way to swap wallets:

For a bit of extra fun, let's emulate that modal, which will give us a chance to see what else Chakra UI can do in terms of building interfaces.

Step 5: Add an Account Modal

Let's start by creating AccountModal.tsx inside our components folder:

// AccountModal.tsx
import {
  Box,
  Button,
  Flex,
  Link,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Text,
} from "@chakra-ui/react";
import { ExternalLinkIcon, CopyIcon } from "@chakra-ui/icons";
import { useEthers } from "@usedapp/core";
import Identicon from "./Identicon";

export default function AccountModal() {}

We're importing a lot of components from Chakra UI here, including 6 modal component elements, and also a couple of icons.

yarn add @chakra-ui/icons

Now let's flesh out the modal:

// AccountModal.tsx
export default function AccountModal() {
  const { account, deactivate } = useEthers();

    <Modal isCentered size="md">
      <ModalOverlay />
      <ModalContent
        background="gray.900"
        border="1px"
        borderStyle="solid"
        borderColor="gray.700"
        borderRadius="3xl"
      >
        <ModalHeader color="white" px={4} fontSize="lg" fontWeight="medium">
          Account
        </ModalHeader>
        <ModalCloseButton
          color="white"
          fontSize="sm"
          _hover={{
            color: "whiteAlpha.700",
          }}
        />
        <ModalBody pt={0} px={4}>
          <Box
            borderRadius="3xl"
            border="1px"
            borderStyle="solid"
            borderColor="gray.600"
            px={5}
            pt={4}
            pb={2}
            mb={3}
          >
            <Flex justifyContent="space-between" alignItems="center" mb={3}>
              <Text color="gray.400" fontSize="sm">
                Connected with MetaMask
              </Text>
              <Button
                variant="outline"
                size="sm"
                borderColor="blue.800"
                borderRadius="3xl"
                color="blue.500"
                fontSize="13px"
                fontWeight="normal"
                px={2}
                height="26px"
                _hover={{
                  background: "none",
                  borderColor: "blue.300",
                  textDecoration: "underline",
                }}

              >
                Change
              </Button>
            </Flex>
            <Flex alignItems="center" mt={2} mb={4} lineHeight={1}>
              <Identicon />
              <Text
                color="white"
                fontSize="xl"
                fontWeight="semibold"
                ml="2"
                lineHeight="1.1"
              >
                {account &&
                  `${account.slice(0, 6)}...${account.slice(
                    account.length - 4,
                    account.length
                  )}`}
              </Text>
            </Flex>
            <Flex alignContent="center" m={3}>
              <Button
                variant="link"
                color="gray.400"
                fontWeight="normal"
                fontSize="sm"
                _hover={{
                  textDecoration: "none",
                  color: "whiteAlpha.800",
                }}
              >
                <CopyIcon mr={1} />
                Copy Address
              </Button>
              <Link
                fontSize="sm"
                display="flex"
                alignItems="center"
                href={`https://ropsten.etherscan.io/address/${account}`}
                isExternal
                color="gray.400"
                ml={6}
                _hover={{
                  color: "whiteAlpha.800",
                  textDecoration: "underline",
                }}
              >
                <ExternalLinkIcon mr={1} />
                View on Explorer
              </Link>
            </Flex>
          </Box>
        </ModalBody>

        <ModalFooter
          justifyContent="end"
          background="gray.700"
          borderBottomLeftRadius="3xl"
          borderBottomRightRadius="3xl"
          p={6}
        >
          <Text
            color="white"
            textAlign="left"
            fontWeight="medium"
            fontSize="md"
          >
            Your transactions willl appear here...
          </Text>
        </ModalFooter>
      </ModalContent>
    </Modal>
}

Now we've got the layout for the modal, but no way to trigger it. Normally in a React UI I would create a UI context and wrap my app in the provider, so that I can trigger modals and sidebars via a single control point. However, we're keeping our dapp simple, so instead we're going to pass callbacks as props down from our App.tsx component.

Inside App.tsx, we'll import a handy Chakra hook called useDisclosure that abstracts away the standard (and often repeated) logic for opening and closing modals. We've already imported ChakraProvider, so we'll just add the useDisclosure hook and destructure the variables:

// App.tsx
import { ChakraProvider, useDisclosure } from "@chakra-ui/react";
import theme from "./theme";
import Layout from "./components/Layout";
import ConnectButton from "./components/ConnectButton";
import AccountModal from "./components/AccountModal";
import "@fontsource/inter";

function App() {
  // Pull the disclosure methods
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <ChakraProvider theme={theme}>
      <Layout>
        // Our connect button will only handle opening
        <ConnectButton handleOpenModal={onOpen} />
        // Our Account modal will handle open state & closing
        <AccountModal isOpen={isOpen} onClose={onClose} />
      </Layout>
    </ChakraProvider>
  );
}

export default App;

Since we're passing a prop to our ConnectButton, we'll have to make a slight change there to handle it:

// ConnectButton.tsx
// ...other code
type Props = {
  handleOpenModal: any;
}

// ...other code
      <Button
        // add named function to handle opening modal
        onClick={handleOpenModal}
        bg="gray.800"
        border="1px solid transparent"
        _hover={{
          border: "1px",
          borderStyle: "solid",
          borderColor: "blue.400",
          backgroundColor: "gray.700",
        }}
        borderRadius="xl"
        m="1px"
        px={3}
        height="38px"
      >

We've also added two props to AccountModal.tsx, so let's add a TypeScript type (just using "any" to keep TypeScript from complaining - not best practice) and add the handlers:

// AccountModal.tsx
// ...other code
type Props = {
  isOpen: any;
  onClose: any;
}

export default function AccountModal({ isOpen, onClose }: Props) {
  const { account, deactivate } = useEthers();

  // Add a function to handle deactivating account
  function handleDeactivateAccount() {
    deactivate();
    onClose();
  }

  return ( 
    // add our isOpen state and onClose handler to the Modal
    <Modal isOpen={isOpen} onClose={onClose} isCentered size="md">
    // ...other code
                <Flex justifyContent="space-between" alignItems="center" mb={3}>
              <Text color="gray.400" fontSize="sm">
                Connected with MetaMask
              </Text>
              <Button
                variant="outline"
                size="sm"
                borderColor="blue.800"
                borderRadius="3xl"
                color="blue.500"
                fontSize="13px"
                fontWeight="normal"
                px={2}
                height="26px"
                _hover={{
                  background: "none",
                  borderColor: "blue.300",
                  textDecoration: "underline",
                }}
                // Add our deactivate account handler onClick
                onClick={handleDeactivateAccount}
              >
                Change
              </Button>
            </Flex>

Now we should be able to trigger our AccountModal when we click on the logged-in ConnectButton, which will open up the modal and allow us to deactivate the account by clicking "Change".

You'll notice that if you click "Change" that we will see the logged out ConnectButton. If you click it you'll also see that we're immediately logged in - our MetaMask was never disconnected from the dapp.

And that's it for this tutorial! Hopefully it will help you feel comfortable getting started with connecting an Ethereum account to a Web3 dapp, and show you the power of combining the useDApp framework with React, alongside the power of the Chakra UI component library.

The next steps for us will be to learn how to import contracts and make transactions - let me know in the comments if that's something you'd like to learn!

Thanks for playing ;)

Full Repo

Follow me on Twitter: https://twitter.com/jacobedawson

Leave breadcrumbs for your fellow devs

Jacob E. Dawson — Thu, 21 Jan 2021 23:08:39 +0000

For my fellow coders, especially the new ones dipping their toes into this great ocean of digital possibilities, I'd like to keep this one short & sweet:

Please, please, leave breadcrumbs for your fellow devs.

What do I mean by that? Well, as you begin your coding journey, you'll find that a large part of coding is debugging :) Sometimes the errors are loud & red, and sometimes they're deathly silent - something isn't working, but... nothing is complaining (at least not audibly) - yet your code isn't working so there has just got to be something wrong, somewhere.

So what do you do? Probably what we (slightly more experienced devs) did when we were starting out (and not so secretly still do every single day): we start searching for answers. Google the error message or, if there isn't one, try to explain the error in a string of words that you hope Google can somehow parse and lead you towards a solution (and not to a recipe for some kind of tasty-looking Thai soup).

Then what? Then you end up at Stack Overflow, or Dev.to, or Github, or Medium (at which point you get paywalled and have to open the article in incognito), or Reddit (honestly, it's getting pretty grim if you get to the Reddit stage). You aren't the first person to have hit this brick wall, and you won't be the last to question your sanity, or have to start retracing your steps through VS Code, or seriously start thinking about going back to study Dentistry.

If (it's a big if) - if you're lucky - you'll come across an answer full of breadcrumbs. Most of the time, though, I'm sorry to say you'll come across something like this:

Big Title with Description of The Exact Error You're Facing

Comment saying they solved the issue with literally zero information on how they did it

That ^, my friend, is a fellow dev who doesn't leave breadcrumbs. Many such cases!

Then what's the right thing to do? It's not about being spoon-fed code that you can just copy-paste into your file and get back to programming your Jamstack resume (although sometimes that's pretty sweet) - it's about leaving breadcrumbs for the devs that follow you. Even if it takes an extra minute or two, take that time to leave some helpful information that the next dev along can use to help them solve their issue!

If I'm forced to go on an "Everything is Broken and This is Why We Can't Have Nice Things" Google-spree trying to discover why that icon keeps wobbling crazily at the top of my animation loop, I like to keep the browser tabs open when I find questions that cover the same issue but don't have an answer. When I do eventually track down the solution (there's always a solution), I like to take a few minutes to go back and drop some breadcrumbs.

So, if you're just learning to code and surely going through the head-to-keyboard moments of struggling with an error, use the opportunity to journey out into the net and take notice of the devs that have left you clues from the past to help you on your way, and remember to take the time to pass the favour on! If you're a dev with a bit more experience under your belt - then do the needful and share some of that sweet info for everyone else :)

And that's that.

“With words we begin to leave traces behind us like breadcrumbs: memories in symbols for others to follow. Ants deploy their pheromones, trails of chemical information; Theseus unwound Ariadne's thread. Now people leave paper trails.”

― James Gleick, The Information: A History, a Theory, a Flood