Connection Hooks

You can build a completely custom UI for connecting the wallet using the useConnect hook to connect any of supported wallets.

import { createThirdwebClient } from "thirdweb";
import { useConnect } from "thirdweb/react";
import { createWallet, injectedProvider } from "thirdweb/wallets";
 
const client = createThirdwebClient({ clientId });
 
function Example() {
  const { connect, isConnecting, error } = useConnect();
  return (
    <button
      onClick={() =>
        connect(async () => {
          // create a wallet instance
          const metamask = createWallet("io.metamask"); // autocomplete the wallet id
          // trigger the connection
          await metamask.connect({ client });
          // return the wallet
          return metamask;
        })
      }
    >
      Connect
    </button>
  );
}

You can create any wallet by id with auto completion using the createWallet function. Or use one of the first party wallets like inAppWallet or ecosystemWallet.

inAppWallet

Create an in app wallet

ecosystemWallet

Create an ecosystem wallet

createWallet

Create any external wallet by id with auto completion

Use these hooks to trigger and manage wallet wallet connection within your own UI. Refer to wallet connection hooks reference for more information.

Once the wallet is connected, you can use the wallet connection hooks to get information about the connected wallet like getting the address, account, etc.