useChain

A hook that returns the current chain as well as a function to set the chain. Note: when calling setChain the chain that’s passed in must be defined in your initial createConfig call. Calling setChain causes the chain to change across the board. For example, if you use set chain then use useSmartAccountClient, the client will flip to the loading state and address for the account on the changed chain.

For switching chains, you can also use createBundlerClient or createSmartAccoutClient directly and create a different client for each chain. You would have to manage different clients, but you wouldn’t have to wait for any hooks to complete and can run these queries in parallel. This way the chain set in the config that the smart account client and other hooks inherit is not also affected.

Import

1
import { useChain } from "@account-kit/react";

Usage

1
import React from "react";
2
import { useChain } from "@account-kit/react";
3
// Assuming the chain sepolia is defined in your initial createConfig call
4
import { sepolia } from "@account-kit/infra";
5
6
function ComponentUsingChain() {
7
  const { chain, setChain, isSettingChain } = useChain();
8
9
  return (
10
    <div>
11
      <p>Current Chain: {chain.id}</p>
12
      <button
13
        onClick={() => setChain({ chain: sepolia })}
14
        disabled={isSettingChain}
15
      >
16
        Set Chain
17
      </button>
18
    </div>
19
  );
20
}

Parameters

mutationArgs

UseChainParams optional properties which contain mutation arg overrides. ref

Returns

UseChainResult an object containing the current chain and a function to set the chain as well as loading state of setting the chain. ref