thirdwebDocs
GitHub

useConnect

Defined in

Hook for connecting a wallet to your app.

The wallet also needs to be added in ThirdwebProvider 's supportedWallets prop to enable auto-connection on page load.

Example

import { useConnect, metamaskWallet } from "@thirdweb-dev/react";
 
const metamaskConfig = metamaskWallet();
 
function App() {
  const connect = useConnect();
 
  return (
    <button
      onClick={async () => {
        const wallet = await connect(metamaskConfig, connectOptions);
        console.log("connected to ", wallet);
      }}
    >
      Connect to MetaMask
    </button>
  );
}
function useConnect(): (...args: ConnectFnArgs<I>) => Promise<I>;

Returns

let returnType: (...args: ConnectFnArgs<I>) => Promise<I>;

A function to connect a wallet

const connect = useConnect();
 
function handleConnect() {
 const wallet = await connect(walletConfig, connectOptions);
}

The function accepts two arguments: walletConfig and connectOptions

walletConfig

The wallet to connect. Must be of type WalletConfig .

Learn more about the available wallet options .

connectOptions

The typeof connectOptions object depends on the wallet you are connecting. For some wallets, it may be optional

If you are using typescript, connect will automatically infer the type of connectOptions based on the walletConfig you pass in as the first argument and will show type errors if you pass in invalid options.