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

Refer to createWallet and injectedProvider 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