useChain

The useChain hook is used to get the currently connected chain as well as set the current chain.

Import

import { useChain } from "@alchemy/aa-alchemy/react";

Usage

useChain.tsx

import { useChain } from "@alchemy/aa-alchemy/react";
import { optimism } from "@alchemy/aa-core";
 
export function ComponentWithUseChain() {
  const { chain, setChain } = useChain();
 
  return (
    <div>
      <p>{chain.id}</p>
      <button onClick={() => setChain({ chain: optimism })}>
        Change Chain to Optimism
      </button>
    </div>
  );
}

Return Type

import { type UseChainResult } from "@alchemy/aa-alchemy/react";

chain

The currently connected chain.

setChain

A function that allows you to set the current chain.

Parameters for setChain - chain: an object of type Chain (ex. setChain({chain: Chain}))

NOTE: The chain must be included in your config's connections array like so:

multi-chain-config.ts

import { createConfig } from "@alchemy/aa-alchemy/config";
import { base, mainnet, sepolia } from "@alchemy/aa-core";
 
// the examples use different routes for your chains and signer connection, but you can handle
// this in one route if you prefer
export const config = createConfig({
  // this is the default chain to connect to
  chain: sepolia,
  // this adds configs for all other chains you want to support.
  // NOTE: you must include a config for the default chain as well
  connections: [
    // connection using rpcUrl
    { chain: sepolia, rpcUrl: "/api/rpc/sepolia" },
    // connection using an api key
    { chain: mainnet, apiKey: "ALCHEMY_API_KEY" },
    // connection using a gas manager
    {
      chain: base,
      apiKey: "ALCHEMY_API_KEY",
      gasManagerConfig: { policyId: "POLICY_ID" },
    },
  ],
  // when using multiple chains, you must specify the signer connection config since it might be different than your chain RPC urls
  signerConnection: {
    rpcUrl: "/api/rpc/signer",
  },
});