Connecting Wallets

Wallet	Wallet Configurator (React)	Hook (React)	Wallet Class (Typescript)
MetaMask	`metamaskWallet`	`useMetamask`	`MetaMaskWallet`
Coinbase Wallet	`coinbaseWallet`	`useCoinbaseWallet`	`CoinbaseWallet`
Wallet Connect v2	`walletConnect`	`useWalletConnect`	`WalletConnect`
Safe Wallet	`safeWallet`	`useSafe`	`SafeWallet`
Paper Wallet	`paperWallet`	`usePaperWallet`	`PaperWallet`
Local Wallet	`localWallet`	`useConnect`	`LocalWallet`
Smart Wallet	`smartWallet`	`useSmartWallet`	`SmartWallet`
Magic Link	`magicLink`	`useMagic`	`MagicLink`
Rainbow Wallet	`rainbowWallet`	`useRainbowWallet`	`WalletConnect`
Zerion Wallet	`zerionWallet`	`useConnect`	`ZerionWallet`
Blocto Wallet	`bloctoWallet`	`useBloctoWallet`	`BloctoWallet`
Frame Wallet	`frameWallet`	`useFrameWallet`	`FrameWallet`

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

Using the ConnectWallet component, for a pre-built approach.
Using the wallet connection hooks, for a customizable approach.

Using the Connect Wallet Button

To allow users to connect wallet using the ConnectWallet component, you must first declare which wallets you want to support in supportedWallets prop of the ThirdwebProvider component,

If no supportedWallets prop is passed, the default is to support metamaskWallet, coinbaseWallet.

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

function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect({
          projectId: "YOUR_PROJECT_ID",
        }),
        safeWallet(),
        paperWallet({
          clientId: "YOUR_CLIENT_ID",
        }),
        magicLink({
          apiKey: "YOUR_MAGIC_API_KEY",
        }),
      ]}
      activeChain="mumbai"
      clientId="your-client-id"
    >
      <App />
    </ThirdwebProvider>
  );
}

Using hooks

Either use a useConnect hook or use the wallet specific hooks as shown in the table above.

Using the Connect Wallet Button​

Using hooks​

Using the Connect Wallet Button

Using hooks