React

chaingate-react provides React hooks and context providers for integrating ChainGate into your React application. 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.

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 a 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:

• 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'