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.

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.