useChainId

Hook for getting current chain ID.

Import

import { useChainId } from "starkweb/react";

Usage

index.tsx

import { useChainId } from "starkweb/react";
 
function App() {
  const chainId = useChainId();
}

Parameters

import { type UseChainIdParameters } from "starkweb/react";

config

Config | undefined

Config to use instead of retrieving from the nearest StarkwebProvider.

index.tsx

import { useChainId } from "starkweb/react";
import { config } from "./config"; 
 
function App() {
  const chainId = useChainId({
    config, 
  });
}

Return Type

import { type UseChainIdReturnType } from "starkweb/react";

number

Current chain ID from config.state.chainId.

Examples

Basic Usage

basic.tsx

import { useChainId } from "starkweb/react";
 
function ChainInfo() {
  const chainId = useChainId();
  return <div>Connected to chain: {chainId}</div>;
}

With Config Override

config-override.tsx

import { useChainId } from "starkweb/react";
import { createConfig, http } from "starkweb/core";
import { mainnet } from "starkweb/chains";
 
const customConfig = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.chain_id]: http(),
  },
});
 
function CustomChainInfo() {
  const chainId = useChainId({
    config: customConfig,
  });
 
  return <div>Using chain: {chainId}</div>;
}

With Chain Validation

chain-validation.tsx

import { useChainId } from "starkweb/react";
import { mainnet, testnet } from "starkweb/chains";
 
function ValidatedChainInfo() {
  const chainId = useChainId();
 
  const isMainnet = chainId === mainnet.chain_id;
  const isTestnet = chainId === testnet.chain_id;
 
  return (
    <div>
      <div>Current Chain ID: {chainId}</div>
      <div>
        Network:{" "}
        {isMainnet ? "Mainnet" : isTestnet ? "Testnet" : "Unknown Network"}
      </div>
    </div>
  );
}