Connecting to different web3 wallets using Wagmi.sh and ReactJS
Tags: blockchain, web3, webdev, tutorial
Published: 2022-09-02 13:07:33

=============================================================================================================================================> I OFFER FULL STACK BLOCKCHAIN DEVELOPMENT SERVICES: ERC20/721 TOKEN CREATION, TOKEN SALE SMART CONTRACT, WHITELISTING, LENDING PROTOCOL, MARKETING REFERRAL, DAO DEVELOPMENT AND MORE.

FRONT END INTEGRATION INCLUDED. 

IF YOU NEED SMART CONTRACTS, CONTACT ME.
IF YOU NEED FRONT END INTEGRATION WITH SMART CONTRACTS, CONTACT ME. 

SEE MY OFFERS, CLIENT TESTIMONIALS AND PREVIOUS WORK BY VISITING =>https://www.muratcanyuksel.xyz

OR SEND ME AN EMAIL VIA mail@muratcanyuksel.xyz
=============================================================================================================================================>

Hello everyone! In this post, I'll show you how to connect to different web3 wallets using Wagmi.sh. In the course of this tutorial, we'll write a basic smart contract using Solidity, create and deploy the project using Hardhat, interact with it using EthersJS on top of React, deploy the frontend to GhPages and hide our sensitive data with env variables.

So, first off, let me tell you about what is Wagmi.sh, what we'll use it for, and why would we need it anyway?

## Introduction to Wagmi.sh and the project we're going to build

According to their website (`https://wagmi.sh/`) "wagmi is a collection of React Hooks containing everything you need to start working with Ethereum." What interests me initially is that we can connect to different web3 wallet providers easily using wagmi. Although there are other libraries that does the same thing, I've found wagmi to be really easy to use. They also have a library comparison page where they outline their pros and cons (`https://wagmi.sh/docs/comparison`). The biggest pro for me was that using wagmi with Ethers.js is a breeze. Wagmi supports the following wallet providers: Metamask, Coinbase Wallet, WalletConnect, and Injected.

Now, the project we're going to be a fairly simple one. When the app opens the first time, we will be presented with different buttons signifying their respective wallet providers. We can choose any one of them to connect to the app. Here's the first screen we see.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j9eov3ssmg2b00qs8i2.png)

Once connected, we'll see an input field and a button that says "Wave". If we enter a name and hit the "Wave" button, the wallet provider will be triggered and we'll be asked to pay for the transaction. After the transaction is complete, the name we've entered will be displayed on the screen.

At any time we can disconnect from the chosen wallet provider and connect with another one.

We will use the Goerli test network for this application.

# Part One: Creating the backend

## Writing and Deploying the Smart contract with Hardhat

Let's start our application by creating an empty Hardhat project. We'll use Hardhat to deploy our smart contract into the Goerli test network. We'll use the solidity language to write our smart contract.

To start, let's create an empty folder. We'll keep both our smart contract and frontend in this folder for ease of use. Since I use Linux, I'll create a folder named `wagmi-project` by typing `mkdir wagmi-project` in the terminal. I'll `cd` into the folder and run the following command on the terminal to create a package.json file: `yarn init -y` (if you use npm, you'd enter `npm init -y` instead). Once that's done, I'll install hardhat with entering `yarn add --dev hardhat` in the terminal. Then, I'll start a new hardhat project by entering `npx hardhat` in the terminal and choose to create a new Javascript project. Then I'll add some dependencies with `yarn add --dev @nomiclabs/hardhat-waffle@^2.0.0 ethereum-waffle@^3.0.0 chai@^4.2.0 @nomiclabs/hardhat-ethers@^2.0.0 ethers@^5.0.0 `. That's it for the hardhat setup. Now I'll just delete the folders inside contracts, scripts and test folders that we've just created.

Then I'll enter `yarn add dotenv` as I'll use environment variables later on to protect sensitive data such as my private wallet key.

After all that's done, I go to my `hardhat.config.js` file and change it's contents to the following:

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

module.exports = {
  solidity: "0.8.0",
  networks: {
    goerli: {
      url: `${process.env.ALCHEMY_GOERLI_URL}`,
      accounts: [`${process.env.MY_PRIVATE_KEY}`],
    },
  },
};

```

As you can see, there are some things going on here. Apart from requiring waffle from hardhat and dotenv library for env variables, I also specify the Solidity compiler version, the network I'm going to use (goerli test network in our case), and pass my sensitive data that's been cached from unwanted attention by env variables. I'll show how to find, add, and hide those env variables in the next step.

## Adding env variables to hide sensitive data

### Alchemy API

To start with, I'll create an empty `.env` file. I will place this file in the `wagmi-frontend` folder I'll create soon. You can just create is somewhere else right now and move it to that forlder later on. Now to populate it, I'll need some external help from Alchemy. If you don't have an Alchemy account, please go to `https://www.alchemy.com/` and create one (it's free). Now, since we have our Alchemy account, we'll go to our dashboard and create a new project by clicking the `+create app` button on the top right. While creating the app, it is of utmost importance to choose `Goerli` for our network, because we're not going to use the Ethereum Mainnet as we don't want to spend real money on practice. Now that we've created our application on Alchemy, we'll click the `view key` button on the right of the project's tab and copy-paste the `API KEY` and `HTTPS` sections. We will need both of them for our project.

### Metamask private key

Now, for this step you need a metamask account with some fake money for Goerli test network in it. To continue with the tutorial, please install the Metamask extension on your browser, request some test money from a faucet like this one `https://goerlifaucet.com/` (you can login and request money using your Alchemy account since you have one now)

NB: Please use a burner wallet. That is to say, never put real money in this wallet, never use it for production or any other purpose than practice. It is better just to forget about and never use this particular wallet after the tutorial.

Now, to get the private key, click on the three vertical dots on the right side of the metamask extension and choose `account details`. there, you'll see a button that'll direct you to your private key. Enter your password there and get the private key. Once you copy your private key, let's go to our .env file and paste all the info we've got so far there. It should look something like the following:

```
ALCHEMY_GOERLI_URL=https://eth-goerli.g.alchemy.com/somethingsomething
MY_PRIVATE_KEY= somethingsomethingmyprivatekey
ALCHEMY_ID=sthsthmyalchemyID
```

Don't show the info in your .env file to anyone, and if you're going to use GitHub for your project, please check your .gitignore file includes .env files so that you won't post these vital info to the public. People even steal fake money, I've heard it.

With the .env file populated, we can now write our smart contract for deployment.

## Writing the Smart Contract

Now that we've set up our project structure, we need a smart contract to deploy. Let's create a Wave.sol file in the contracts folder we've created by initiating a hardhat project and paste the following contract inside of it:

```
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Wave {
    string public name = "Murat";

     function setName(string memory _name) external {

        name = _name;

    }
}
```

What's going on here? First of all, `.sol` extension indicated that this is a Solidity file, i.e. the code written inside of this file is with Solidity language. In the first line I specify what kind of license I'm using (MIT in this case, open source), and the compiler version for Solidity. In this case, it means anything above 0.8.0 passes.

I start my contract with the `contract` keyword and give it a name of `Wave`. Inside of it I define a public string and give it an initial value of Murat, my name. You can give whatever you want obviously. Then, I write a function called `setName` and give it a parameter of type `string` which is saved in the memory. Then, I make it external so that it can be called from outside of the contract. All this function does is change the value of the public string taking the value that's put in the function parameter. Notice that the function parameter starts with an underline `_name`. This is not necessary, but is a convention used in the Solidity community. It helps us to discern between what is an actual variable and what's a parameter per se.

Do not worry too much about the Solidity code for now, this tutorial doesn't focus on writing Solidity smart contracts.

Now we're finished with the smart contract, let's tie it all together and deploy it to the test network!

## Deploying the Smart Contract

In order for these steps to work, you should be using a supported version of nodeJS for hardhat. It is generally the LTS version.

Go to the root of the project, and enter `npx hardhat compile` in the terminal. If everything goes alright, you'll be prompted with `Compiled 1 Solidity file successfully `, if not, enter `npx hardhat clean` and redeploy until it's succesfull.

Now if you check your folder structre again, you'll see there's a new folder called `artifacts`. If you go to the `contracts` folder inside of that `artifacts` folder, you'll see a .json file with the name you've gave to your smart contract. We will use this file later on, it is our contract abi (application binary interface).

Now, let's go back and cd into our `scripts` folder and add a `deploy.js` file with the following code inside of it:

```
const hre = require("hardhat");

async function main() {
  // We get the contract to deploy
  const [owner] = await hre.ethers.getSigners();
  //Here make sure you enter the name of the .sol file you've created in the contracts folder.
  const WaveContractFactory = await hre.ethers.getContractFactory("Wave");
  const WaveContract = await WaveContractFactory.deploy();
  await WaveContract.deployed();

  console.log("WaveContract deployed to:", WaveContract.address);
  console.log("WaveContract owner address:", owner.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });
```

The above code will make sure our code is deployed. As I've mentioned in the comments, just make sure you've entered the name of the smart contract you've written previously.

Now, we write the following into the terminal `npx hardhat run scripts/deploy.js --network goerli`

If succcesful, you'll be prompted with something like:

```
WaveContract deployed to: somehweresomething
WaveContract owner address: somehweresomethingelse
```

Save these addresses in somewhere safe and hidden, we will use them later on.

Congrats! You've just deployed a smart contract to the blockchain! You can even check your contract by going to `https://goerli.etherscan.io/` and pasting the address that this contract was deployed!

Even for a simple contract, that was a lot of moving parts, so pat yourself on the back. Now, we'll get into the frontend stuff, i.e. how are we going to make the users interact with the contract we've just deployed.

# Part Two: Creating the Frontend

## Installing the dependencies

I'll use reactJS in this project, so let's go to our root folder and create a react project by entering `npx create-react-app wagmi-frontend` in the terminal.

After that's done our folder structure should be something like the following:

```
-Wagmi-project (root)
--artifacts
--cache
-contracts
-node_modules
-scripts
-test
-wagmi-frontend
-.gitignore
-hardhat-config.js
-package.json
-README.md
-yarn.lock
```

Now, we'll cd into this new `wagmi-frontend` folder and install ethersJS as well as wagmi.sh. To install ethersJS library, I write the following command into the terminal `yarn add ethers`, and to install wagmi.sh I write the following `yarn add wagmi ethers`.

I also install `buffer` since node polyfills are not bundled with webpack anymore, to install this package is the easiest solution I've found to work with the error we'd see if we didn't have buffer. To install buffer, I write the following to command line `yarn add buffer`. Then, I'll go to my `index.js` file inside `wagmi-frontend/src/` and require buffer as such `window.Buffer = require("buffer/").Buffer;` at the top of the component. Now my `index.js` file looks like this:

```
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
window.Buffer = require("buffer/").Buffer;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

```

Lastly, I'll install gh-pages as I want to deploy the project to Github Pages. To do that, I write the following command into the terminal `yarn add gh-pages`.

Now we're done with installing the dependencies, we can see how to use them to create a frontend to interact with our smart contract.

## Writing the frontend

Since we're inside of our `wagmi-frontend` folder, our folder structure (excluding anything that's other than `wagmi-frontend`) should look like the following:

```
-node_modules
-public
-src
-.env
-.gitignore
-hardhat-config.js
-package.json
-README.md
-yarn.lock
```

Now I'll add a couple of more folders and files into this `wagmi-frontend` folder. I'll add 2 folders named `contracts` and `style`, I'll also add a `Profile.js` file. Before proceeding any further, I'll create a `Wave.json` file in the `contracts` folder I've just created. To populate this file, I need to go back to my root folder (not the `wagmi-frontend` folder we're currently in, but the folder that contains it also). There, you'll remember we had an `artifacts` folder, I'll cd into it and find the `contracts` folder. Inside of the `contracts` folder, there's this `Wave.json` file that's been created by hardhat. I'll copy everthing inside of it.

After copying the contents of that `Wave.json` file, I'll go back to the `wagmi-frontend` folder, go inside `src`, then to `contracts` folder there and create another `Wave.json` file. I'll paste everything I've copied inside of this file. This file contains the abi of our smart contract.

In the `style` folder, I'll create a `profile.css` file and add the following contents inside of it (don't worry about this at all, it's just to make the buttons look a bit nicer. This is not a post about writing CSS after all.):

```
.btn {
  display: flex;
  flex-wrap: wrap;
  width: 150px;
  margin-bottom: 10px;
  padding: 5px;
}

```

I'll also go into the `App.css` file in the `src` folder and add the following contents:

```
.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: black;
  color: white;
  height: 100vh;
}

```

Now I can go into `App.js` file, delete everything inside of it and write my own code.

## App.js

I'll start by importing the dependencies for the application:

```
import { useState } from "react";
import { ethers, utils } from "ethers";
import abi from "./contracts/Wave.json";
import Profile from "./Profile";
import "./App.css";
import {
  WagmiConfig,
  createClient,
  defaultChains,
  configureChains,
} from "wagmi";

import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";

import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
```

You see that I'll use `useState` hook from React, `ethers` library, the contract abi we've saved in `Wave.json` file, a `Profile` component we'll create later on, `App.css` file, dependencies for wagmi which includes providers alongside with wallet connectors. After that's done, I'll add the following lines of code just under it:

```

const alchemyId = process.env.ALCHEMY_ID;

// Configure chains & providers with the Alchemy provider.
// Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)
const { chains, provider, webSocketProvider } = configureChains(defaultChains, [
  alchemyProvider({ alchemyId }),
  publicProvider(),
]);

// Set up client
const client = createClient({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi",
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        qrcode: true,
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  provider,
  webSocketProvider,
});

```

These parts can also be found on the wagmi documentation. What we're doing here is asically, we take our Alchemy Id we've saved in our .env file and then set up the client for different wallet options. You see that we have Metamask, Coinbase, WalletConnector and Injected here. After we specified these parts, we can start writing our main function, so let's do that.

```
const App = () => {
  const [isWalletConnected, setIsWalletConnected] = useState(false);
  const [userName, setUserName] = useState("");
  const [displayedUserName, setDisplayedUserName] = useState("initial name");
  const [error, setError] = useState(null);
  const contractAddress = "theaddressthatourcontracthasbeendeployedtocomeshere";
  const contractABI = abi.abi;
  }
```

As you can see, I have some constants for changing the state, the contract address we've got when we deployed our contract to the (test) blockchain, and the contract abi that we've imported from our `Wave.json` file.

Next, I'll add the necessary functions. Let's look at what they're doing:

```

  const handleInput = (name) => {
    setUserName(name.target.value);
  };

  const handleChild = (status) => {
    console.log(status);
    status ? setIsWalletConnected(true) : setIsWalletConnected(false);
  };

  const handleClick = async (e) => {
    e.preventDefault();
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const waveContract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

      const txn = await waveContract.setName(
        utils.formatBytes32String(userName)
      );
      console.log("setting user name");
      await txn.wait();
      console.log("user name set", txn.hash);
      setDisplayedUserName(userName);
    }
  };
```

`handleInput` function is easy to understand. We'll take the user's input and set it to the state and display it in the UI.
`handleChild` function is a bit more complicated as it is linked to the child component (`Profile.js`) we'll create in the next steps. It'll make more sense retrospectively, but the gist is that I'll send this function to the child as props, check if any wallet is connected there, and send the boolean data from child back to this function (which is in the parent component). That's what I do in the ternary operator (` status ? setIsWalletConnected(true) : setIsWalletConnected(false);`). Actually, I don't even need to write this ternary operator, I can just do away with `setIsWalletConnected(true)` too but I want to be as explicit as possible so that I wouldn't look at the screen for hours and hours when I want to go back to this piece of code after some time.

Next, `handleClick` function. It is asynchronous, and it checks if there's a wallet in the browser, then by using ethersJS library, it deals with providers and signers. `txn` is the transaction, it converts the userName to Bytes32 so that EVM(Ethereum Virtual Machine) can understand it. Then it waits for the transaction to be mined and then it sets the userName.

Now let's look at the last bits of our App.js component:

```
  let userInteraction;
  if (isWalletConnected === true) {
    userInteraction = (
      <div>
        <input onChange={handleInput} type="text" />
        <button onClick={handleClick}>Wave</button>
        <p> {displayedUserName} waved!</p>
      </div>
    );
  }

  return (
    <div className="App">
      <h1>Wagmi Project</h1>

      {userInteraction}
      <WagmiConfig client={client}>
        <Profile handleChild={handleChild} />
      </WagmiConfig>
    </div>
  );
};

export default App;
```

First, I define an empty `userInteraction` variable. Then depending on the connection status of the wallet, I populate it with the appropriate UI. If the wallet is connected, I'll display the input field and the button. If the wallet is not connected, they won't be there.

In our return statement, I pass the above conditional statement, and invoke our `Profile.js` child component with `handleChild` passed as props as I've mentioned earlier.

Just for making sure everything is in place, let's see the whole `App.js` component:

```
import { useState, useEffect } from "react";
import { ethers, utils } from "ethers";
import abi from "./contracts/Wave.json";
import Profile from "./Profile";
import "./App.css";
import {
  WagmiConfig,
  createClient,
  defaultChains,
  configureChains,
} from "wagmi";

import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";

import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";

const alchemyId = process.env.ALCHEMY_ID;

// Configure chains & providers with the Alchemy provider.
// Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)
const { chains, provider, webSocketProvider } = configureChains(defaultChains, [
  alchemyProvider({ alchemyId }),
  publicProvider(),
]);

// Set up client
const client = createClient({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi",
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        qrcode: true,
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  provider,
  webSocketProvider,
});

const App = () => {
  const [isWalletConnected, setIsWalletConnected] = useState(false);
  const [userName, setUserName] = useState("");
  const [displayedUserName, setDisplayedUserName] = useState("initial name");
  const [error, setError] = useState(null);
  const contractAddress = "0x17c5A76a5D6db7740821425aFa029B3494DeecaB";
  const contractABI = abi.abi;

  const handleInput = (name) => {
    setUserName(name.target.value);
  };

  const handleChild = (status) => {
    console.log(status);
    status ? setIsWalletConnected(true) : setIsWalletConnected(false);
  };

  const handleClick = async (e) => {
    e.preventDefault();
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const waveContract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

      const txn = await waveContract.setName(
        utils.formatBytes32String(userName)
      );
      console.log("setting user name");
      await txn.wait();
      console.log("user name set", txn.hash);
      setDisplayedUserName(userName);
    }
  };

  let userInteraction;
  if (isWalletConnected === true) {
    userInteraction = (
      <div>
        <input onChange={handleInput} type="text" />
        <button onClick={handleClick}>Wave</button>
        <p> {displayedUserName} waved!</p>
      </div>
    );
  }

  return (
    <div className="App">
      <h1>Wagmi Project</h1>

      {userInteraction}
      <WagmiConfig client={client}>
        <Profile handleChild={handleChild} />
      </WagmiConfig>
    </div>
  );
};

export default App;
```

We're done with the `App.js` component. I know it is a lot, but we're left one more component, the child, `Profile.js`. After that we're all done.

## Writing the child component

I start by importing whatever needs to be imported at the beginning as such:

```
import { React, useEffect } from "react";
import {
  useAccount,
  useConnect,
  useDisconnect,
  useEnsAvatar,
  useEnsName,
} from "wagmi";
import "./style/profile.css";
```

Next comes our child component's main function with `handleChild` that's been passed from the parent as props:

```
const Profile = ({ handleChild }) => {
  const { address, connector, isConnected } = useAccount();
  const { data: ensAvatar } = useEnsAvatar({ addressOrName: address });
  const { data: ensName } = useEnsName({ address });
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect();
  const { disconnect } = useDisconnect();

  useEffect(() => {
    console.log(isConnected);

    if (isConnected === true) {
      handleChild(true);
    }
  });
```

You'll notice that I use destructured props with curly braces around them, I find this to be more readable.

Here we have our constants that can be found in wagmi.sh documentation that helps us to use its hooks.

In the `useEffect` hook, I check if the user is connected. If they are, I send the data to parent by invoking the `handleChild` function. Remember, it does set the state of the wallet as connected in the parent component. Next, I have a conditional statement that checks if the user is connected. f they are, I display the address of the wallet that's connected, and the name of it (Metamask or Coinbase for instance):

```

  if (isConnected) {
    return (
      <div>
        {/* <img src={ensAvatar} alt="ENS Avatar" /> */}
        <div>{ensName ? `${ensName} (${address})` : address}</div>
        <div>Connected to {connector.name}</div>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }
```

To wrap it up, I have my return statement. It's pretty self-explanatory:

```
  return (
    <div>
      {connectors.map((connector) => (
        <button
          className="btn"
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && " (unsupported)"}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            " (connecting)"}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  );
};

export default Profile;
```

That's all, actually. Now, if we went to our `wagmi-frontend` folder and enter `yarn start` (or `npm run start` if you're using npm), we can see that the app is running.

## Closing thoughts

Congratulations! You've finished the tutorial. You can find the source code for this tutorial here=> https://github.com/muratcan-yuksel/wagmi-post . I know there were a lot of moving parts and things to do but I hope you've enjoyed it. If you have any questions, feel free to reach out to me on Twitter or Github.

Keep calm & happy hacking!