React

chaingate-react provides React hooks and context providers for integrating ChainGate into your React application. It's the recommended way to build a multi-chain crypto app (wallet, balances, transfers) from the browser. It includes chaingate as a dependency, so you only need to install one package.

Installation

npm install chaingate-react

This installs both chaingate-react and chaingate — no need to install them separately. You get every supported chain (Bitcoin, Ethereum, Litecoin, Dogecoin, Bitcoin Cash, Polygon, Arbitrum, Base, and more) in one package.

Setup

Wrap your application with the providers. ChainGateProvider manages the ChainGate instance, and WalletProvider manages the wallet state:

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

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

Initialize ChainGate

Use the useChainGate() hook to initialize and access the ChainGate instance:

import { useChainGate } from 'chaingate-react'
import { useEffect } from 'react'

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

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

  // chaingate is now available
}

Quick example

Create a wallet and check an ETH balance in a few lines:

import { useWallet, useChainGate } from 'chaingate-react'
import { useEffect } from '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>
  )
}

Available hooks

Hook	Description
useWallet()	Manage wallet state — create, import, close
useChainGate()	Access the ChainGate instance — explorers, connectors, networks

What's included

Since chaingate-react includes chaingate, you have access to everything from both packages — the full ChainGate SDK plus the React-specific hooks and providers:

• React hooks: useWallet(), useChainGate()
• Providers: WalletProvider, ChainGateProvider
• Full ChainGate SDK: networks, explorers, connectors, wallet creation, transfers, and more

Import React-specific APIs from chaingate-react and core SDK APIs from chaingate:

import { useWallet, useChainGate, WalletProvider, ChainGateProvider } from 'chaingate-react'
import { newWallet, ChainGate } from 'chaingate'