Skip to main content

useSwitchChain

Hook to switch blockchain networks with Web3Auth.

Import

import { useSwitchChain } from '@web3auth/modal/react'

Usage

import { useSwitchChain } from '@web3auth/modal/react'

function SwitchChainButton() {
const { switchChain, loading, error } = useSwitchChain()

return (
<div>
<button onClick={() => switchChain('0x1')} disabled={loading}>
{loading ? 'Switching...' : 'Switch to Ethereum Mainnet'}
</button>
{error && <span>Error: {error.message}</span>}
</div>
)
}

Return Type

import { type IUseSwitchChain } from '@web3auth/modal/react'

loading

boolean

Whether the chain switching process is in progress.

error

Web3AuthError | null

Error that occurred during the chain switching process.

switchChain

(chainId: string) => Promise<void>

Function to initiate the chain switch. Pass the target chainId as a string (e.g., "0x1" for Ethereum Mainnet).

Example

switchChain.tsx
import { useSwitchChain, useWeb3Auth } from '@web3auth/modal/react'

export function SwitchChain() {
const { web3Auth } = useWeb3Auth()

const { switchChain, error } = useSwitchChain()

return (
<div>
<h2>Switch Chain</h2>
<h3>Connected to {web3Auth?.currentChain?.displayName}</h3>
{web3Auth?.coreOptions.chains?.map(chain => {
return (
<button
disabled={web3Auth?.currentChain?.chainId === chain.chainId}
key={chain.chainId}
onClick={() => switchChain(chain.chainId)}
type="button"
className="card">
{chain.displayName}
</button>
)
})}

{error?.message}
</div>
)
}