Build a Custom UI

Use the SDK to connect wallets to your app but using your own UI components.

Available Hooks, Connectors and Configurators

Wallet	Wallet Configurator (React)	Hook (React)	Wallet Class Connectors (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
Phantom	phantomWallet	useConnect	PhantomWallet

Using Hooks (for Supported Wallets)

Using hooks allows you to have more control over the user experience and requires you to build your own UI. The useConnect and wallet-specific hooks allow you to programmatically connect to the wallet.

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

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>
  );
}

Create a Wallet Connection UI (for a Custom Wallet Configurator)

To integrate a wallet with ConnectWallet, you need to create a wallet configurator - a function that returns a WalletConfig object and add it in ThirdwebProvider's supportedWallets.

connectUI

To create a custom UI for connecting your wallet, create a connectUI function in your wallet configurator.

// optional - render a UI for connecting your wallet
    connectUI(props) {
      return <MyWalletConnectionUI {...props} />;
    },

selectUI

To create a custom UI for selecting your wallet in the wallet selection screen in the connect wallet modal, create a selectUI function in your wallet configurator.

    // optional - override the default UI for selecting your wallet in the wallet selector screen
    selectUI(props) {
      return <MyWalletSelectionUI {...props} />
    }