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

import React from "react";
import { 
function useChain(mutationArgs?: UseChainParams): UseChainResult
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.
useChain } from "@account-kit/react";
// Assuming the chain sepolia is defined in your initial createConfig call
import { 
const sepolia: Chain
sepolia } from "@account-kit/infra";

function 
function ComponentUsingChain(): JSX.Element
ComponentUsingChain() {
  const { 
const chain: Chain
chain, 
const setChain: (params: {
    chain: Chain;
}) => void
setChain, 
const isSettingChain: boolean
isSettingChain } = 
function useChain(mutationArgs?: UseChainParams): UseChainResult
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.
useChain();

  return (
    <
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Current Chain: {
const chain: Chain
chain.
id: number
ID in number form
id}</
React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
        
React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const setChain: (params: {
    chain: Chain;
}) => void
setChain({ 
chain: Chain
chain: 
const sepolia: Chain
sepolia })}
        
React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
disabled={
const isSettingChain: boolean
isSettingChain}
      >
        Set Chain
      </
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

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