Using React SDK Hooks

The Sprinter React SDK provides a set of hooks to simplify access to the core Sprinter SDK's functionality. These hooks allow you to easily retrieve and manage user balances, tokens, chains, and bridge solutions directly within your React components.

Each hook returns stateful data (data, loading, error) along with functions to interact with Sprinter’s Intent Engine.

Available Hooks

1. useSprinter

Access all of the context provided by SprinterContext. It allows you to get access to balances, chains, tokens, and solutions across your app.

import { useSprinter } from '@chainsafe/sprinter-react';

function YourComponent() {
  const {
    balances,
    tokens,
    chains,
    solution,
    getUserBalances,
    getAvailableTokens,
    getAvailableChains,
    getBridgeAndCall,
    getBridgeAggregateBalance,
    getBridgeAggregateBalanceAndCall,
  } = useSprinter();

  // You now have access to the full Sprinter context!
}

2. useSprinterTokens

Fetch the list of available tokens supported by Sprinter across various chains.

import { useSprinterTokens } from '@chainsafe/sprinter-react';

function TokenList() {
  const { tokens, getAvailableTokens } = useSprinterTokens();

  useEffect(() => {
    getAvailableTokens();  // Fetch tokens on component mount
  }, []);

  if (tokens.loading) return <div>Loading tokens...</div>;
  if (tokens.error) return <div>Error: {tokens.error}</div>;

  return (
    <ul>
      {tokens.data && tokens.data.map(token => (
        <li key={token.symbol}>{token.name}</li>
      ))}
    </ul>
  );
}

3. useSprinterChains

This hook retrieves the supported blockchain networks.

import { useSprinterChains } from '@chainsafe/sprinter-react';

function ChainList() {
  const { chains, getAvailableChains } = useSprinterChains();

  useEffect(() => {
    getAvailableChains();  // Fetch chains on component mount
  }, []);

  if (chains.loading) return <div>Loading chains...</div>;
  if (chains.error) return <div>Error fetching chains: {chains.error}</div>;

  return (
    <ul>
      {chains.data && chains.data.map(chain => (
        <li key={chain.chainID}>{chain.name}</li>
      ))}
    </ul>
  );
}

4. useSprinterBalances

This hook allows you to fetch and manage user balances across multiple blockchains.

import { useSprinterBalances } from '@chainsafe/sprinter-react';

function BalanceComponent({ account }) {
  const { balances, getUserBalances } = useSprinterBalances(account);

  useEffect(() => {
    getUserBalances();  // Fetch balances when the component mounts
  }, [account]);

  if (balances.loading) return <div>Loading balances...</div>;
  if (balances.error) return <div>Error fetching balances: {balances.error}</div>;

  return (
    <ul>
      {balances.data && balances.data.map((balance) => (
        <li key={balance.symbol}>
          {balance.symbol}: {balance.amount}
        </li>
      ))}
    </ul>
  );
}

5. useSprinterBridge

Generate cross-chain bridge and contract call solutions.

import { useSprinterBridge } from '@chainsafe/sprinter-react';

function BridgeSolution() {
  const { getBridgeAggregateBalance, solution } = useSprinterBridge();

  useEffect(() => {
    const settings = {
      account: '0xYourAddressHere',
      destinationChain: 11155111,  // Sepolia testnet
      token: 'USDC',
      amount: 1000000,  // 1 USDC in smallest denomination
      sourceChains: [84532, 1993],  // Optional: source chains to consider
    };

    getBridgeAggregateBalance(settings);
  }, []);

  if (solution.loading) return <div>Loading bridge solution...</div>;
  if (solution.error) return <div>Error: {solution.error}</div>;

  return <div>Bridge Solution: {JSON.stringify(solution.data)}</div>;
}

---

Summary

The Sprinter React SDK hooks provide an easy way to interact with cross-chain balances, tokens, chains, and bridging solutions. These hooks manage state for you (loading, error, and data) and allow you to integrate Sprinter functionality seamlessly into your React components.

For more detailed method references, check out the Methods Reference.