TypeScript SDK

useConnect

A hook to set a wallet as active wallet

Example


import { createThirdwebClient } from "thirdweb";
import { useConnect } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
function Example() {
  const { connect, isConnecting, error } = useConnect();
  return (
    <button
      onClick={() =>
        connect(async () => {
          // instantiate wallet
          const wallet = createWallet("io.metamask");
          // connect wallet
          await wallet.connect({
            client,
          });
          // return the wallet
          return wallet;
        })
      }
    >
      Connect
    </button>
  );
}


function useConnect(options?: ConnectManagerOptions): {
  cancelConnection: () => void;
  readonly connect: (
    walletOrFn: Wallet | (() => Promise<Wallet>),
  ) => Promise<null | Wallet>;
  error: null | Error;
  isConnecting: boolean;
};

Parameters

Type


let options: {
  accountAbstraction?: SmartWalletOptions;
  client: ThirdwebClient;
  onConnect?: (wallet: Wallet) => void;
  setWalletAsActive?: boolean;
};

Returns


let returnType: {
  cancelConnection: () => void;
  readonly connect: (
    walletOrFn: Wallet | (() => Promise<Wallet>),
  ) => Promise<null | Wallet>;
  error: null | Error;
  isConnecting: boolean;
};

A function that lets you connect a wallet.