Creating a simple Web3 Dapp Skeleton with Thirdweb and React.js

As the world of decentralized applications (dapps) continues to grow, developers are constantly looking for new ways to create and deploy these applications. One popular framework for building dapps is thirdweb, which allows developers to easily create and deploy Web3 applications using the React.js library.

In this tutorial, we will walk through the process of creating a basic Web3 Dapp skeleton using ThirdWeb and React.js. This skeleton will provide a foundation for building out a more complex dapp, and will include the following features:

• A simple user interface built with React.js
• A connection to the Ethereum blockchain testnet through thirdweb.
• A smart contract deployed on the Ethereum blockchain

A full version of the skeleton can be found at my github if you don't want to read this article.

Prerequisites

Before getting started, you will need to have the following tools installed on your machine and a new Metamask wallet:

Node.js
npm
Metamask

Setting up the Project

First, create a new directory for your project and navigate to it in your terminal. Then, run the following command to create a new ThirdWeb project:

npx thirdweb@latest create --app

You can configure your application like I did below.

EVM (Ethereum)

Packages installed in your project. This can be done by running

yarn install

in your project's root directory.

Configure the Project

Once you have packages installed, you can use it to connect to Web3 and start interacting with the Ethereum blockchain.

First, edit the file called main.jsx in the src/ directory and change the following code:

// in line 8, Change the network to Goerli Testnet
const activeChainId = ChainId.Goerli;

If you have no balance in your ethereum goerli testnet wallet, you can get Goerli Faucet here

Second, create a new directory called context/ in src/ and create a file called index.jsx in the context/. Fill with the following code:

import React, {createContext, useContext} from 'react';

// Import custom hooks for interacting with Metamask
import {useAddress, useDisconnect, useMetamask} from '@thirdweb-dev/react';

// Create the context with createContext
const StateContext = createContext();

// StateContextProvider is a wrapper component that provides the context value to its children
export const StateContextProvider = ({ children }) => {

// useAddress(): Retrieve the current address
  const address = useAddress();
// useMetamask(): Connect to Metamask
  const connect = useMetamask();
// useDisconnect(): Disconnect from Metamask
  const disconnect = useDisconnect();

  // Render the StateContext.Provider component with the address, connect, and disconnect values as the context value
  return (
    <StateContext.Provider
      value={{
        address,
        connect,
        disconnect,
      }}
    >
      {/* Render the children inside the provider */}
      {children}
    </StateContext.Provider>
  )
}

// useStateContext is a custom hook that allows components to consume the StateContext context
export const useStateContext = () => useContext(StateContext);

Third, edit the file called main.jsx in the src/ directory and change the following code:

    <ThirdwebProvider desiredChainId={activeChainId}>
        // Add the context provider to <App />
        <StateContextProvider>
            <App />
        </StateContextProvider>
    </ThirdwebProvider>

Finally, edit the file called App.jsx in the src/ directory and change to the following code:

import "./styles/Home.css";
import {useStateContext} from "./context";

export default function Home() {
    const {connect, disconnect, address} = useStateContext();

    return (
        <div>
            <button
                onClick={() => {address ? disconnect() : connect()}}
            >
                {address ? 'Disconnect' : 'Connect'}
            </button>
            <p>
                {address}
            </p>
        </div>
    );
}

Running the Dapp

We can now start the development server and see our dapp in action. Run the following command in your terminal:

You will see a single button like this:

Once you click on the button, your Metamask wallet will have pop-up window which allow you to connect to the Dapp like this :

After you approve the action, your Dapp will display your wallet address and the connect button will change to disconnect:

Conclusion

In this tutorial, we walked through the process of creating a simple Web3 Dapp skeleton using ThirdWeb and React.js. We deployed a smart contract to the Ethereum blockchain and used it to display a message on the page. This skeleton can serve as a starting point for building out more complex dapps.

A full version of the skeleton can be found at my github

I hope this tutorial was helpful and gave you a good understanding of how to create a Web3 Dapp with ThirdWeb and React.js. Happy coding!