Connecting Wallets

There are two ways you connect user's wallet to your application using thirdweb's React SDK

Using the ConnectWallet component for a quick, easy and customizable UI
Create a completely custom UI using wallet connection hooks

Supported Wallets

Wallet Name	Wallet Configurator
MetaMask	`metamaskWallet`
Coinbase Wallet	`coinbaseWallet`
Wallet Connect v2	`walletConnect`
Safe Wallet	`safeWallet`
Paper Wallet	`paperWallet`
Embedded Wallet	`embeddedWallet`
Local Wallet	`localWallet`
Smart Wallet	`smartWallet`
Magic Link	`magicLink`
Rainbow Wallet	`rainbowWallet`
Zerion Wallet	`zerionWallet`
Blocto Wallet	`bloctoWallet`
Frame Wallet	`frameWallet`
Phantom	`phantomWallet`
Cometh Connect	`comethConnect`

info

Don't see the wallet you are looking for?

You can easily integrate any wallet provider by Building your own wallet !

1. ConnectWallet component

ConnectWallet component renders a button which when clicked opens a modal to allow users to connect to wallets specified in the ThirdwebProvider's supportedWallets prop.

If supportedWallets is not configured in the ThirdwebProvider, the ConnectWallet Modal shows the below shown default wallets:

info

Try out ConnectWallet in action on ConnectWallet Playground!

import {
  ThirdwebProvider,
  ConnectWallet,
  // import the wallets you want
  metamaskWallet,
  coinbaseWallet,
  walletConnect,
} from "@thirdweb-dev/react";

// wrap your App with ThirdwebProvider and set supportedWallets prop

function Page() {
  return (
    <ThirdwebProvider
      supportedWallets={[metamaskWallet(), coinbaseWallet(), walletConnect()]}
      activeChain="mumbai"
      clientId="your-client-id"
    >
      <App />
    </ThirdwebProvider>
  );
}

// render ConnectWallet component in your App - that's it!

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

2. Create a completely custom UI to connect wallets

Connecting a wallet involves a few steps:

Create a wallet instance
Call the connect method on the wallet instance
Set the connected wallet instance as "connected wallet"

If you just want to connect a wallet as mentioned above - there's a simple way to do it using the useConnect hook which does all the above steps for you.

Using useConnect hook

import {
  useConnect,
  // import the wallet you want to connect
  metamaskWallet,
} from "@thirdweb-dev/react";

const walletConfig = metamaskWallet();

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

  async function handleConnect() {
    try {
      const wallet = await connect(
        walletConfig, // pass the wallet config object
        connectOptions, // pass options required by the wallet (if any)
      );

      console.log("connected to", wallet);
    } catch (e) {
      console.error("failed to connect", e);
    }
  }

  return <button onClick={handleConnect}> connect wallet </button>;
}

But if you need to create wallet instance and call some methods on the wallet instance before connecting the wallet, you can do these steps manually as shown below using the useCreateWalletInstance, useSetConnectionStatus and useSetConnectedWallet hooks.

Manually creating wallet instance and connecting

There are 3 steps to connect your wallet manually:

create an instance of your wallet using useCreateWalletInstance
connect your wallet using the connect method of the wallet
once the wallet is connected, set the wallet instance as connected using useSetConnectedWallet

Make sure to update the connectionStatus using useSetConnectionStatus to "connecting" before connecting your wallet and "disconnected" if the connection fails.

Example

We will use localWallet as an example because it can not be connected using the useConnect hook because it requires additional steps after creating the wallet instance - like generating a random wallet or importing a wallet. We will generate a random wallet in this example.

import {
  useCreateWalletInstance,
  useSetConnectionStatus,
  useSetConnectedWallet,
  // import the wallet you want to connect
  localWallet,
} from "@thirdweb-dev/react";

const walletConfig = localWallet();

function Example() {
  const createWalletInstance = useCreateWalletInstance();
  const setConnectionStatus = useSetConnectionStatus();
  const setConnectedWallet = useSetConnectedWallet();

  const handleConnect = async () => {
    // 1. create wallet instance
    const wallet = createWalletInstance(walletConfig);

    // perform additional steps that needs to be done before connecting the wallet
    // here, we will generate a random wallet
    await wallet.generate();

    try {
      setConnectionStatus("connecting");

      // 2. Call `connect` method on wallet instance
      await wallet.connect(
        connectOptions, // pass options required by the wallet (if any)
      );

      // 3. Set wallet instance as the connected wallet
      setConnectedWallet(wallet);
    } catch (e) {
      setConnectionStatus("disconnected");
      console.error("failed to connect", e);
      // show error UI or close modal using props.close()
    }
  };

  return <button onClick={handleConnect}> connect wallet </button>;
}

Once the wallet is connected, you can use React SDK's 100+ hooks to show connected wallet's details, send transactions, interact with smart contracts, sign messages and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more!

Here is a list of few hooks that will be useful when creating custom UI

Hook	Description
useAddress	get connected wallet's account address
useDisconnect	disconnect the connected wallet
useWallet	get connected wallet instance
useWalletConfig	get connected wallet's config
useConnectionStatus	get status of wallet connection
useSigner	get signer of connected wallet

1. ConnectWallet component ​

2. Create a completely custom UI to connect wallets ​

Example​

1. ConnectWallet component

2. Create a completely custom UI to connect wallets

Example