Connecting Wallets

There are two ways you can enable user’s to connect their wallet with your application:

1. Using the Connect Wallet Button component, for a pre-built approach.
2. Using the wallet connection hooks, for a customizable approach.

Both involve a two-step process, first to declare the supported wallets in the ThirdwebProvider component, and then prompt the user to connect, either with the UI component or a hook.

1. Declaring Supported Wallets

Using the supportedWallets prop of the ThirdwebProvider component, you can declare which wallets you want to support.

If no supportedWallets prop is passed, the default is to support MetaMask, Coinbase Wallet, and Wallet Connect v1.

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

function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect({
          projectId: "YOUR_PROJECT_ID", // optional
        }),
        walletConnectV1(),
        safeWallet(),
        paperWallet({
          clientId: "YOUR_CLIENT_ID", // required
        }),
      ]}
      activeChain="mumbai"
    >
      <App />
    </ThirdwebProvider>
  );
}

Available options to use are:

Wallet	Import / supportedWallet prop value	Hook
MetaMask	metamaskWallet	useMetamask
Coinbase	coinbaseWallet	useCoinbaseWallet
Wallet Connect v1	walletConnectV1	useWalletConnectV1
Wallet Connect v2	walletConnect	useWalletConnect
Safe	safeWallet	useSafe
Paper	paperWallet	useConnect

2. Prompting User Connection

Once a wallet has been declared, either use the Connect Wallet Button component, or a wallet connection hook to prompt the user to connect their wallet to your app.