useChainGate

The useChainGate() hook provides access to a ChainGate instance from anywhere within your React component tree. It gives you access to explorers, connectors, networks, and all blockchain query functionality — without having to wire the SDK through props.

Quick setup

1. Wrap your app with the provider

Start by wrapping your application or a subtree with <ChainGateProvider>:

import { ChainGateProvider } from 'chaingate-react'

function App() {
  return (
    <ChainGateProvider>
      <YourComponent />
    </ChainGateProvider>
  )
}

2. Initialize and use in any component

import { useChainGate } from 'chaingate-react'

function Dashboard() {
  const { chaingate, initializeChainGate } = useChainGate()

  // Initialize once (e.g., on mount or user action)
  useEffect(() => {
    initializeChainGate({ apiKey: 'your-api-key' })
  }, [])

  // Use chaingate to explore networks
  const fetchLatestBlock = async () => {
    if (!chaingate) return
    const explorer = chaingate.explore(chaingate.networks.bitcoin)
    const block = await explorer.getLatestBlock()
    console.log('Latest block:', block.height)
  }

  return <button onClick={fetchLatestBlock}>Get Latest Block</button>
}

What it gives you

• chaingate — The current ChainGate instance (or null if not yet initialized).
• initializeChainGate({ apiKey }) — Creates a ChainGate instance and stores it in context. Returns the instance.

Once initialized, chaingate gives you access to:

• chaingate.explore(network) — Get an explorer for querying blockchain data (balances, blocks, transactions, gas prices on EVM chains, and so on).
• chaingate.exploreGlobal() — Get a global explorer for market data, network info, and logos.
• chaingate.connect(network, wallet) — Connect a wallet to a network for address derivation, transfers, and more.
• chaingate.networks — Access all supported networks.
• chaingate.rpcUrls — Pre-built JSON-RPC endpoint URLs.

Combining with useWallet()

For a complete React wallet app, use both providers together:

import { WalletProvider, ChainGateProvider } from 'chaingate-react'

function App() {
  return (
    <ChainGateProvider>
      <WalletProvider>
        <MyApp />
      </WalletProvider>
    </ChainGateProvider>
  )
}

import { useWallet, useChainGate } from 'chaingate-react'

function WalletDashboard() {
  const { wallet, newWallet } = useWallet()
  const { chaingate, initializeChainGate } = useChainGate()

  useEffect(() => {
    initializeChainGate({ apiKey: 'your-api-key' })
  }, [])

  const getBalance = async () => {
    if (!wallet || !chaingate) return
    const eth = chaingate.connect(chaingate.networks.ethereum, wallet)
    const { confirmed } = await eth.addressBalance()
    console.log('ETH balance:', confirmed.base().toString(), confirmed.symbol)
  }

  return (
    <div>
      <button onClick={() => newWallet()}>Create Wallet</button>
      <button onClick={getBalance}>Get Balance</button>
    </div>
  )
}

Error handling

If useChainGate() is called outside the <ChainGateProvider>, it will throw an error:

Error: useChainGate must be used within <ChainGateProvider>

Make sure your component is inside the provider tree.

Key points

• Provides full access to the ChainGate API (explorers, connectors, networks).
• Initialize once with initializeChainGate({ apiKey }), then use chaingate everywhere.
• Combine with <WalletProvider> for a complete wallet solution.