thirdwebDocs
GitHub

useConnectModal

hook that allows you to open the Connect UI in a Modal to prompt the user to connect wallet.

Example

import { createThirdwebClient } from "thirdweb";
import { useConnectModal } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "<your_client_id>",
});
 
function Example() {
  const { connect, isConnecting } = useConnectModal();
 
  async function handleConnect() {
    const wallet = await connect({ client }); // opens the connect modal
    console.log("connected to", wallet);
  }
 
  return <button onClick={handleConnect}> Connect </button>;
}

The returned connect method takes an object of type UseConnectModalOptions as an argument to customize the Connect Modal UI. Refer to UseConnectModalOptions to see the available options.

function useConnectModal(): {
  connect: (props: UseConnectModalOptions) => Promise<Wallet>;
  isConnecting: boolean;
};

Returns

let returnType: {
  connect: (props: UseConnectModalOptions) => Promise<Wallet>;
  isConnecting: boolean;
};