@leapwallet/ondo-gm-react-adapter

React adapter providing hooks, mutations, providers, and queries for seamless Ondo protocol integration in React applications.

Features

• 🪝 React Hooks: Data fetching hooks for assets, markets, accounts, and more
• 🔄 Mutations: Transaction preparation, execution, and status tracking
• 🏪 Providers: Context providers for API clients and query management
• 🔗 Ethers Integration: Seamless conversion between viem and ethers.js
• 📊 TypeScript: Full type safety with auto-completion

Installation

npm install @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core
# or
pnpm add @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core
# or
yarn add @leapwallet/ondo-gm-react-adapter @leapwallet/ondo-gm-core

Quick Start

1. Setup Provider

Wrap your app with the Ondo API provider:

import { OndoGMApi } from '@leapwallet/ondo-gm-core';
import { OndoApiProvider } from '@leapwallet/ondo-gm-react-adapter';

// Initialize the API client
const apiClient = new OndoGMApi({
  baseUrl: 'https://api.ondo.finance',
});

function App() {
  return (
    <OndoApiProvider apiClient={apiClient}>
      {/* Your app components */}
      <MyComponent />
    </OndoApiProvider>
  );
}

2. Use Data Fetching Hooks

import { useAccount, useAssets, useMarket } from '@leapwallet/ondo-gm-react-adapter';

function AssetDashboard() {
  // Fetch all assets
  const { data: assets, isLoading, error } = useAssets();

  // Fetch specific market data
  const { data: market } = useMarket({
    assetSymbol: 'USDC',
  });

  // Fetch account information
  const { data: account } = useAccount({
    address: '0x...',
  });

  if (isLoading) return <div>Loading assets...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Available Assets</h2>
      {assets?.map((asset) => (
        <div key={asset.symbol}>
          {asset.symbol}: ${asset.price}
        </div>
      ))}
    </div>
  );
}

3. Execute Transactions

import { useTransaction } from '@leapwallet/ondo-gm-react-adapter';

function TradeComponent() {
  const {
    mutate: executeTransaction,
    data: result,
    isLoading: isExecuting,
    error,
    status,
    currentStep,
  } = useTransaction();

  const handleTrade = () => {
    executeTransaction({
      chainId: '1',
      fromAddress: '0x...',
      toAddress: '0x...',
      amount: '1000000', // 1 USDC
      // ... other transaction params
    });
  };

  return (
    <div>
      <button onClick={handleTrade} disabled={isExecuting}>
        {isExecuting ? `${currentStep}...` : 'Execute Trade'}
      </button>

      {result && <div>Transaction successful: {result.transactionHash}</div>}

      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

4. Working with Ethers.js

Convert between viem and ethers.js providers:

import { useEthersProvider, useEthersSigner } from '@leapwallet/ondo-gm-react-adapter';

function EthersExample() {
  const provider = useEthersProvider();
  const signer = useEthersSigner();

  const checkBalance = async () => {
    if (provider) {
      const balance = await provider.getBalance('0x...');
      console.log('Balance:', balance.toString());
    }
  };

  const signMessage = async () => {
    if (signer) {
      const signature = await signer.signMessage('Hello Ondo!');
      console.log('Signature:', signature);
    }
  };

  return (
    <div>
      <button onClick={checkBalance}>Check Balance</button>
      <button onClick={signMessage}>Sign Message</button>
    </div>
  );
}

API Reference

Data Hooks

Asset Hooks

• useAssets(query?, options?) - Fetch all assets with prices
• useAssetPrice(query, options?) - Fetch specific asset price
• useAssetAddress(query, options?) - Fetch asset address information

Market Hooks

• useMarket(query, options?) - Fetch market data
• useMarketStats(query, options?) - Fetch market statistics
• useOHLC(query, options?) - Fetch OHLC candlestick data

Account Hooks

• useAccount(query, options?) - Fetch account information
• useDividend(query, options?) - Fetch dividend data

External Data

• useCoingeckoPrice(query, options?) - Fetch prices from CoinGecko

Transaction Mutations

Individual Transaction Steps

• useCreateAttestation(options?) - Create transaction attestation
• usePrepareTransaction(options?) - Prepare transaction for execution
• useExecuteTransaction(options?) - Execute prepared transaction
• usePollStatus(options?) - Poll transaction status

Complete Transaction Flow

• useTransaction(options?) - Complete transaction lifecycle management

Utility Hooks

Ethers.js Integration

• useEthersProvider(config?) - Convert viem client to ethers provider
• useEthersSigner(config?) - Convert viem client to ethers signer
• useOndoEvmClient() - Get configured Ondo EVM client

Providers

OndoApiProvider

<OndoApiProvider
  apiClient={ondoApiClient}
  queryClient={customQueryClient} // optional
>
  {children}
</OndoApiProvider>

Advanced Usage

Custom Query Options

All data hooks accept standard React Query options:

const { data: assets } = useAssets(
  { limit: 10 }, // Query parameters
  {
    staleTime: 30000, // 30 seconds
    refetchInterval: 60000, // 1 minute
    enabled: isAuthenticated,
  }
);

Transaction Status Tracking

Monitor transaction progress with detailed status information:

const { currentStep, status, data } = useTransaction();

useEffect(() => {
  console.log('Current step:', currentStep);
  // 'idle' | 'creating_attestation' | 'preparing' | 'executing' | 'polling' | 'success' | 'error'
}, [currentStep]);

Error Handling

const { error, reset } = useAssets();

if (error) {
  return (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={() => reset()}>Retry</button>
    </div>
  );
}

Peer Dependencies

This package requires the following peer dependencies:

{
  "@leapwallet/ondo-gm-core": "workspace:*",
  "ethers": "6.14.4",
  "viem": "^2.31.6",
  "wagmi": "^2.15.6"
}

Integration with Other Packages

• @leapwallet/ondo-gm-core - Core functionality and types
• @leapwallet/ondo-gm-evm-client - EVM transaction execution
• @leapwallet/ondo-gm-react-ui - Pre-built UI components

License

ISC