Skip to main content

useSwitchChain

Hook to switch blockchain networks with Web3Auth.

Import​

import { useSwitchChain } from "@web3auth/modal/react";

Usage​

import { useSwitchChain } from "@web3auth/modal/react";

function SwitchChainButton() {
  const { switchChain, loading, error } = useSwitchChain();

  return (
    <div>
      <button onClick={() => switchChain("0x1")} disabled={loading}>
        {loading ? "Switching..." : "Switch to Ethereum Mainnet"}
      </button>
      {error && <span>Error: {error.message}</span>}
    </div>
  );
}

Return Type​

import { type IUseSwitchChain } from "@web3auth/modal/react";

loading​

boolean

Whether the chain switching process is in progress.

error​

Web3AuthError | null

Error that occurred during the chain switching process.

switchChain​

(chainId: string) => Promise<void>

Function to initiate the chain switch. Pass the target chainId as a string (e.g., "0x1" for Ethereum Mainnet).

Example​

switchChain.tsx
import { useSwitchChain, useWeb3Auth } from "@web3auth/modal/react";

export function SwitchChain() {
  const { web3Auth } = useWeb3Auth();

  const { switchChain, error } = useSwitchChain();

  return (
    <div>
      <h2>Switch Chain</h2>
      <h3>Connected to {web3Auth?.currentChain?.displayName}</h3>
      {web3Auth?.coreOptions.chains?.map((chain) => {
        return (
          <button
            disabled={web3Auth?.currentChain?.chainId === chain.chainId}
            key={chain.chainId}
            onClick={() => switchChain(chain.chainId)}
            type="button"
            className="card"
          >
            {chain.displayName}
          </button>
        );
      })}

      {error?.message}
    </div>
  );
}