useChain

Hook for getting the Chain object of the network that the user is connected - but only if it's a supported network (added in the ThirdwebProvider's supportedChains or one of default chains ).

Returns undefined if the network is not supported or the user is not connected to a wallet. You can use the useConnectionStatus hook to check if the user is connected to a wallet or not to differentiate between the two cases.

If you only want to get the chain id of the network the user is connected to regardless of whether it's supported or not, use useChainId instead.

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

const chain = useChain();

Usage

import { useChain, useConnectionStatus } from "@thirdweb-dev/react";

function App() {
  const chain = useChain();
  const status = useConnectionStatus();

  if (status === "unknown") return <div> Loading... </div>;
  if (status === "disconnected") return <div> disconnected </div>;
  if (status === "connecting") return <div> connecting... </div>;

  if (chain) {
    return <p> Connected to {chain.name} </p>;
  }

  return <p> Connected to an unsupported network </p>;
}

Return value

chain

An object of type Chain from @thirdweb-dev/chains package containing various information about the network, or undefined if the network is not supported or user is not connected to a wallet.

Chain | undefined;

type Chain = {
  name: string;
  chain: string;
  icon?: {
    url: string;
    width: number;
    height: number;
    format: string;
    sizes?: readonly number[];
  };
  rpc: readonly string[];
  features?: Readonly<Array<{ name: string }>>;
  faucets?: readonly string[];
  nativeCurrency: {
    name: string;
    symbol: string;
    decimals: number;
  };
  infoURL?: string;
  shortName: string;
  chainId: number;
  networkId?: number;
  ens?: {
    registry: string;
  };
  explorers?: Readonly<
    Array<{
      name: string;
      url: string;
      standard: string;
    }>
  >;
  testnet: boolean;
  slug: string;
  slip44?: number;
  status?: string;
};