useWalletConnect (v2)

Hook for initiating a Wallet Connect connection prompt for the user.

import { useWalletConnect } from "@thirdweb-dev/react";

Usage

Call the function returned by the useWalletConnect hook to prompt the user to connect their mobile wallet to your dApp via Wallet Connect.

You can then use the useAddress hook to get the user's address.

import { useWalletConnect } from "@thirdweb-dev/react";

function App() {
  const connectWithWalletConnect = useWalletConnect();

  return (
    <button onClick={() => connectWithWalletConnect()}>Connect wallet</button>
  );
}

Configuration

chainId

To connect to a specific chain when connecting the wallet, pass the chainId in a configuration object as shown below.

This will prompt the user to switch to the given network after they connect.

import { useWalletConnect } from "@thirdweb-dev/react";
import { Dogechain } from "@thirdweb-dev/chains";

function App() {
  const connectWithWalletConnect = useWalletConnect();

  return (
    <button
      onClick={() =>
        connectWithWalletConnect({
          chainId: Dogechain.chainId,
        })
      }
    >
      Connect Wallet
    </button>
  );
}

If the chain is not configured in the user’s wallet, you must add this chain in ThirdwebProvider’s supportedChains prop:

import { Dogechain } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Dogechain]}>
      <App />
    </ThirdwebProvider>
  );
}