chaingate-react

chaingate-react

React hooks and providers for the ChainGate cryptocurrency SDK.

📦 ChainGate SDK   |   📖 Documentation   |   🔑 Get your free API key

Features

• 👛 Wallet state management -- Create, import, restore, and close wallets via React context
• ⚡ ChainGate provider -- Initialize and share the API client across your component tree
• 🪝 Two hooks, zero boilerplate -- useWallet() and useChainGate() for everything
• 🔄 Auto-sync -- Wallet state updates are immediately available in all components

Install

npm install chaingate-react chaingate react

Examples

Setup Providers

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

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

Initialize the API Client

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

function Init() {
  const { initializeChainGate } = useChainGate();

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

  return null;
}

Create a Wallet

import { useWallet } from 'chaingate-react';

function CreateWallet() {
  const { newWallet } = useWallet();

  const handleCreate = () => {
    const { phrase, wallet } = newWallet();
    console.log('Mnemonic:', phrase);
    // wallet is now available across the app via useWallet().wallet
  };

  return <button onClick={handleCreate}>Create Wallet</button>;
}

Import a Wallet

import { useWallet } from 'chaingate-react';

function ImportWallet() {
  const { importWallet, createWalletFromString } = useWallet();

  // From mnemonic
  importWallet({ phrase: 'abandon abandon abandon ...' });

  // From private key
  importWallet({ privateKey: '0x...' });

  // From xpub (view-only)
  importWallet({ xpub: 'xpub...' });

  // Auto-detect any format
  createWalletFromString('xprv9s21ZrQH143K...');
}

Check Balance

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

function Balance() {
  const { chaingate } = useChainGate();
  const { wallet } = useWallet();

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

  return <button onClick={getBalance}>Get ETH Balance</button>;
}

Send a Transaction

const { chaingate } = useChainGate();
const { wallet } = useWallet();

const send = async () => {
  if (!chaingate || !wallet) return;
  const eth = chaingate.connect(chaingate.networks.ethereum, wallet);
  const amount = chaingate.networks.ethereum.amount('0.1');
  const tx = await eth.transfer(amount, '0xRecipient...');
  tx.setFee('high');
  const broadcasted = await tx.signAndBroadcast();
  broadcasted.onConfirmed((details) => {
    console.log('Confirmed in block', details.blockHeight);
  });
};

Connect to Any EVM Chain

const bsc = chaingate.networks.evmRpc({
  rpcUrl: 'https://bsc-dataseed.binance.org',
  chainId: 56,
  name: 'BNB Smart Chain',
  symbol: 'BNB',
});

const conn = chaingate.connect(bsc, wallet);

Restore an Encrypted Wallet

import { useWallet } from 'chaingate-react';

function RestoreWallet() {
  const { deserializeWallet } = useWallet();

  const restore = () => {
    const saved = JSON.parse(localStorage.getItem('wallet')!);
    deserializeWallet(saved, async () => {
      return window.prompt('Enter your wallet password:');
    });
  };

  return <button onClick={restore}>Restore Wallet</button>;
}

Close Wallet

const { closeWallet } = useWallet();

<button onClick={closeWallet}>Log Out</button>

📖 Read the full docs