Creating a simple Web3 Dapp Skeleton with Thirdweb and React.js
Tags: webdev, react, web3, blockchain
Published: 2022-12-24 01:00:49

_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](https://thirdweb.com/), 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](https://github.com/CopsGit/thirdweb-skeleton) 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](https://nodejs.org/)
[npm](https://www.npmjs.com/)
[Metamask](https://metamask.io/)

## 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.

![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sa50n160vuqdewuzfxi.png)
_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:

```javascript
// 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](https://goerlifaucet.com/)_

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

```javascript
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:

```javascript
    <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:

```javascript
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:

![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjuqn40n1h8id2lmng1a.png)

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

![Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6jbl7hrp5pzu7apsaqe.png)

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


![Image4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erxwsbsw9dqd0go9kzuj.png)

## 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](https://github.com/CopsGit/thirdweb-skeleton)

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!