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.

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, etc.).
• 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.