Usage with React SDK

Quick Started

The quickest way to get started is to use the interactive Connect Wallet component builder.

This playground allows you to modify the theme, size, and supported wallets of the Connect Wallet component and preview the changes in real time.

You can then copy the code snippet and add it directly to your app.

For details on how to use the Connect Wallet component in an app and set up a project, read the guide below and use your generated code snippet for the ConnectWallet component.

Connect Wallet Component Builder

Guide

When you want to use a wallet with React SDK - Instead of importing the wallet from @thirdweb-dev/wallets, you need to import its “wallet configurator” function from the @thirdweb-dev/react package.

This wallet configurator function contains additional metadata and UI for connecting the wallet which is shown in the ConnectWallet component's Modal.

You can find the list of all wallet configurators for React SDK here

You can connect to a wallet in two ways:

1. using ConnectWallet component for a prebuilt solution with UI
2. using useConnect hook to build a custom solution

1. Using ConnectWallet

ConnectWallet component allows you to connect to wallets that are specified in ThirdwebProvider

Clicking on the ConnectWallet button shows wallets in a Modal and shows wallet-specific UI for connecting the wallet when it is selected (This UI is defined in the wallet configurator itself, not in ConnectWallet component)

Example

import {
  ThirdwebProvider,
  metamaskWallet,
  coinbaseWallet,
  walletConnect,
} from "@thirdweb-dev/react";

// provide supported wallets to ThirdwebProvider

function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect({
          projectId: "YOUR_PROJECT_ID",
        }),
      ]}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebProvider>
  );
}

import { ConnectWallet } from "@thirdweb-dev/react";

// render ConnectWallet button wherever you want

function App() {
  return (
    <div>
      <ConnectWallet />
    </div>
  );
}

2. Using useConnect hook

useConnect hook allows you to programmatically connect to the wallet. You will need to build your own UI for connecting the wallet.

import { useConnect, metamaskWallet } from "@thirdweb-dev/react";

const metamask = metamaskWallet();

function App() {
  const connect = useConnect();

  return (
    <button
      onClick={async () => {
        const wallet = await connect(metamask, connectOptions);
        console.log("connected to ", wallet);
      }}
    >
      Connect to MetaMask
    </button>
  );
}

3. Using ThirdwebSDKProvider

ThirdwebSDKProvider is a lower level provider that accepts an arbitrary wallet and only handles contract interaction. This means you can use the Wallet SDK to programmatically connect to any wallet, and pass the connected wallet to this provider to execute transactions from the connected wallet.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { LocalWallet } from "@thirdweb-dev/wallets";
import { Goerli } from "@thirdweb-dev/chains";
import { Signer } from "ethers";

function MyComponent() {
  const [signer, setSigner] = useState<Signer | null>(null);
  // in this example we just generate a random wallet
  useEffect(() => {
    const generateWallet = async () => {
      const localWallet = new LocalWallet({
        chain: Goerli,
      });
      await localWallet.generate();
      await localWallet.connect();
      setSigner(await localWallet.getSigner());
    };
    generateWallet();
  }, []);

  // The provider will handle maintaining the connected wallet
  // calling contracts from within the provider with the regular hooks
  // will execute on behalf of the provided wallet signer
  return (
    <ThirdwebSDKProvider
      activeChain={Goerli}
      signer={signer}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

info

If you are building your own wallet and want to use it with React SDK you will need to create a wallet configurator as mentioned in Build a wallet guide where you can define a custom UI for connecting your wallet that will be shown in the ConnectWallet modal

Learn more about React SDK