ThirdwebProvider: Connect your DApp and wallet

When developing a blockchain-based application, you have to connect the application to a wallet. Depending on what wallet you’re using, you have to go through the documentation to find the correct connection code for each, which can be a hectic and time-consuming task.

thirdweb’s provider component, ThirdwebProvider, solves this problem, helping you connect your DApp with different wallets like MetaMask, CoinBase, Magic.link, and WalletConnect with very little code. In this article, we’ll connect our app with a wallet using the ThirdwebProvider component. Let’s get started!

• What is a DApp?
• How is a DApp made?
  • Frontend
  • Smart contract
  • Blockchain network
• What is thirdweb?
• Using ThirdwebProvider
• Installation
• App.js
• Functional component
• ConnectWallet by thirdweb
• Functional component
• Custom connect button
• Custom button output

What is a DApp?

Before connecting our DApp to a wallet, first, we need to actually understand what a DApp is. A DApp, which stands for decentralized application, uses a smart contract to run on a peer-to-peer (P2P) blockchain network. In simpler terms, an application can become a decentralized application only when it meets the following criteria:

• It uses a smart contract to run its features
• It uses a blockchain network for transactions

How is a DApp made?

When you know the fundamentals of web development and blockchain networks, it’s not too difficult to create a DApp. A DApp can be broken up into three major parts, the frontend, the smart contract, and the blockchain network.

Frontend

Just like a normal web application, your DApp will have a frontend, which you can create using HTML, CSS, JavaScript, or any JavaScript framework. This frontend can connect to a smart contract directly, otherwise, you can use a backend to communicate to a smart contract.

Smart contract

A smart contract is a computer program that is non-modifiable once it is deployed and automatically executed once its defined criteria are met.

Your frontend will communicate with smart contracts for various functions. For example, consider an NFT marketplace. When you mint an NFT, all the functions to create an NFT are stored in smart contracts. The function in the smart contract runs to mint the NFT with your address.

Blockchain network

The blockchain is a non-modifiable ledger system that records the transaction. It is shared across the nodes, which are all the computers participating in the network. When you deploy your smart contract for transactions, you do so on the blockchain.

There are many different blockchain networks available, and some popular ones include Ethereum, Polygon, Solana, and Avalanche. For interaction to occur, the smart contract and user must be on the same blockchain network. Crypto wallets are available to manage user accounts, but they must be connected to the DApp.

Let’s connect our DApp to a wallet with ThirdwebProvider.

What is thirdweb?

thirdweb is a platform that provides an SDK, libraries, and modules to accelerate the development of Web3-based applications. Thirdweb’s major feature is that it provides modules for smart contracts, including NFTs, an NFT marketplace, tokens, drops, decentralized voting systems, and more. Altogether, these features help developers deploy smart contracts without having to write any solid code.

ThirdwebProvider is one of the components that comes with the @3rdweb/react library, helping applications to connect with different wallets. ThirdwebProvider includes features like:

• Support for multiple wallets like MetaMask, CoinBase, Magic.link, and WalletConnect
• Options for pre-built and custom buttons
• Ease in defining the network and switching between networks

To learn more about ThirdwebProvider, we’ll create a small application to connect our DApp to a wallet.

Using ThirdwebProvider

To use the ThirdwebProvider component in our application, we need to install libraries to create the interface for it:

npm install @3rdweb/react @3rdweb/hooks 

• 3rdweb/react: Provides us with the Thirdwebprovider component
• 3rdweb/hooks: Helps in managing the network and providing the ConnectWallet button component, which we’ll add later

App.js

Let’s start writing our code in App.js. First, let’s start with the imports that we need:

import { ThirdwebProvider } from "@3rdweb/react";

Functional component

We need to wrap our application with ThirdwebProvider to use its functions throughout our application. We also need to include other components like ConnectWallet, otherwise, extracting data from the wallet will not work outside the ThirdwebProvider component:

export default function App() {
  return (
    <ThirdwebProvider
      connectors={connectors}
      supportedChainIds={supportedChainIds}
    >
      <childrenComponent />
    </ThirdwebProvider>
  );
}

We’ve defined the ThirdwebProvider so that we can make other components in our application the child of it. We have two props, connectors and supportedChainIds, and we can define both properties in the same App.js component:

const supportedChainIds = [1, 4, 137];
const connectors = {
  injected: {}
};

In supportedChainIds, we’ve defined the supported chain in our application. We define different ID’s in an array. A chain ID is a numerical value for a blockchain network. The table below includes some major blockchain networks and the associated chain ID:

In connectors, we’ve defined different wallets to connect to, specifically injected for MetaMask. You can define more wallets like CoinBase, Magic Link, and WalletConnect, separating each with a comma ,. The table below includes the code for the different wallets:

injected: {}

walletlink: {
appName: "thirdweb - demo", url: "https://thirdweb.com", darkMode: false, },

magic: {
apiKey: "pk_...", // Your magic api key chainId: 1, // The chain ID you want to allow on magic }

walletconnect: {}

All together, our App.js file will look like the code below:

import "./styles.css";
import { ThirdwebProvider } from "@3rdweb/react";
const supportedChainIds = [1, 4, 137];
const connectors = {
  injected: {}
};
export default function App() {
  return (
    <ThirdwebProvider
      connectors={connectors}
      supportedChainIds={supportedChainIds}
    >
      <Children />
    </ThirdwebProvider>
  );
}

Now, we’re all set to create a button and extract data from the wallet, like an address and provider.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

thirdweb ConnectWallet

Now that our App.js file is ready, we just need to add a button to interact with the wallet. We’ll use the ConnectWallet button component from thirdweb:

import { ConnectWallet } from "@3rdweb/react";
import { useWeb3 } from "@3rdweb/hooks";

• ConnectWallet: Our button for connecting to a wallet
• useWeb3: Used to extract data from the wallet, like address, chainId, provider, etc.

Functional component

Now, we just need to add the ConnectWallet component to the return for the button. I’ve added a few more lines of code to display the address of the wallet and the chainId of the network:

  return (
    <div className="container">
      <h1>ThirdWeb Button</h1>
      <ConnectWallet />
      <h2>
        Address:<b> {address}</b>
      </h2>
      <h2>
        ChainId:<b> {chainId}</b>
      </h2>
    </div>
  );
};

In the code above, we used the address and chainId, but we haven’t defined it. Let’s define them with useWeb3:

  const { address, chainId, provider } = useWeb3();

Altogether, the component will look like the following code:

import { ConnectWallet } from "@3rdweb/react";
import { useWeb3 } from "@3rdweb/hooks";
const ThirdwebConnect = () => {
  const { address, chainId, provider } = useWeb3();
  return (
    <div className="container">
      <h1>ThirdWeb Button</h1>
      <ConnectWallet />
      <h2>
        Address:<b> {address}</b>
      </h2>
      <h2>
        ChainId:<b> {chainId}</b>
      </h2>
    </div>
  );
};
export default ThirdwebConnect;

Now, we’re all set to use the button to connect our application to our wallet. Click on the button and sign into the MetaMask wallet. After connecting, you’ll see the details of the wallet:

Custom connect button

Let’s create a custom button component with useWeb3:

import { useWeb3 } from "@3rdweb/hooks";

Along with extracting data, useWeb3 will also provide us with connectWallet to connect the application to the wallet.

Functional component

We’ve defined two buttons, one for connecting and one for disconnecting to the wallet. We are rendering buttons through conditional rendering. We’re using MetaMask, so we’ve defined connectWallet as injected, but you can use other wallets as well:

return (
    <div className="container">
      <h1>Custom Button</h1>
      {address && (
        <Button type="primary" onClick={disconnectWallet} className="primary">
          Wallet Connected
        </Button>
      )}
      {!address && (
        <Button type="primary" onClick={() => connectWallet("injected")}>
          Connect Wallet
        </Button>
      )}
      <h2>
        Address:<b> {address}</b>
      </h2>
      <h2>
        ChainId:<b> {chainId}</b>
      </h2>
    </div>
  );

For connectWallet and disconnectWallet, we used useWeb3:

  const {
    address,
    chainId,
    provider,
    disconnectWallet,
    connectWallet
  } = useWeb3();

The custom button component will look like the following:

import { useWeb3 } from "@3rdweb/hooks";
import { Button } from "antd";
const CustomConnect = () => {
  const {
    address,
    chainId,
    provider,
    disconnectWallet,
    connectWallet
  } = useWeb3();
  return (
    <div className="container">
      <h1>Custom Button</h1>
      {address && (
        <Button type="primary" onClick={disconnectWallet} className="primary">
          Wallet Connected
        </Button>
      )}
      {!address && (
        <Button type="primary" onClick={() => connectWallet("injected")}>
          Connect Wallet
        </Button>
      )}
      <h2>
        Address:<b> {address}</b>
      </h2>
      <h2>
        ChainId:<b> {chainId}</b>
      </h2>
    </div>
  );
};
export default CustomConnect;

Custom button output

Our custom button works similarly to the thirdweb button:

You can check out the live, working project on CodeSandbox:

Conclusion

In this article, we’ve learned about thirdweb, DApps, the fundamentals of making a DApp, and connecting the DApp to a wallet. These concepts will help you better understand Web3. I hope this article has helped improve your understanding of DApps. You should be able to follow the steps from this article to connect your DApp to a wallet. Happy coding!

Join organizations like Bitso and Coinsquare who use LogRocket to proactively monitor their Web3 apps

Client-side issues that impact users’ ability to activate and transact in your apps can drastically affect your bottom line. If you’re interested in monitoring UX issues, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.