Advanced Usage

Using Hooks Independently

You can use the SDK hooks independently without the full widget UI.

useQuote - Generate Payment Quotes

useQuote example.tsx

import { useQuote } from '@ordanetwork/sdk/react';

function QuoteExample() {
  const { quote, isLoading, error, requestQuote } = useQuote();

  const getQuote = async () => {
    const result = await requestQuote({
      fromChainId: '1',        // Ethereum
      toChainId: '137',        // Polygon
      fromTokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
      toTokenAddress: '0xc2132D05D31c914a87C6611C10748AEb04B58e8F',   // USDT
      amount: '100',           // 100 USDC
      fromAddress: '0x...',    // User wallet
    });

    console.log('Quote:', result);
  };

  return (
    <div>
      <button onClick={getQuote} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Get Quote'}
      </button>
      {quote && (
        <div>
          <p>You will receive: {quote.toAmount} {quote.toToken.symbol}</p>
          <p>Fee: {quote.fee}</p>
        </div>
      )}
    </div>
  );
}

---

useTransaction - Monitor Transaction Status

useTransaction example.tsx

import { useTransaction } from '@ordanetwork/sdk/react';

function TransactionStatus({ txId }: { txId: string }) {
  const { status, isLoading, waitForCompletion } = useTransaction();

  useEffect(() => {
    if (txId) {
      // Poll for transaction completion
      waitForCompletion(txId, {
        interval: 2000,    // Check every 2 seconds
        timeout: 300000,   // Timeout after 5 minutes
      }).then((finalStatus) => {
        console.log('Transaction complete:', finalStatus);
      });
    }
  }, [txId, waitForCompletion]);

  return (
    <div>
      {status && (
        <div>
          <p>Status: {status.status}</p>
          <p>Progress: {status.completionPercentage}%</p>
        </div>
      )}
    </div>
  );
}

---

useTokenPrices - Fetch USD Prices

useTokenPrices example.tsx

import { useTokenPrices } from '@ordanetwork/sdk/react';

function TokenPrices() {
  const { prices, isLoading, error } = useTokenPrices([
    { address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', chainId: '1' }, // USDC
    { address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', chainId: '1' }, // WETH
  ]);

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

  return (
    <div>
      {prices.map((price) => (
        <div key={price.address}>
          <p>{price.symbol}: ${price.usdPrice}</p>
        </div>
      ))}
    </div>
  );
}

---

useBalances - Fetch Wallet Balances

useBalances example.tsx

import { useBalances } from '@ordanetwork/sdk/react';
import { useAccount } from 'wagmi';

function WalletBalances() {
  const { address } = useAccount();
  const { data, isLoading, error } = useBalances(address, {
    chainIds: ['1', '137', '42161'], // Ethereum, Polygon, Arbitrum
    filter: 'known', // Only show known tokens
  });

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

  return (
    <div>
      {data?.balances.map((balance) => (
        <div key={`${balance.chainId}-${balance.address}`}>
          <p>
            {balance.symbol}: {balance.formatted} (${balance.usdValue})
          </p>
        </div>
      ))}
    </div>
  );
}

---

Accessing the SDK Instance

Access the core SDK instance for direct API calls:

useOrdaSDK example.tsx

import { useOrdaSDK } from '@ordanetwork/sdk/react';

function CustomComponent() {
  const { sdk, isLoading, error } = useOrdaSDK();

  useEffect(() => {
    if (sdk) {
      // Direct SDK access
      sdk.quote.request({ /* params */ })
        .then((quote) => console.log('Quote:', quote));
    }
  }, [sdk]);

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

  return <div>SDK Ready!</div>;
}

---

Using UI Components Separately

All UI components can be used independently:

UI components example.tsx

import { Button, Dialog, Input } from '@ordanetwork/sdk/react';

function CustomForm() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="default">Open Form</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Enter Amount</DialogTitle>
        </DialogHeader>
        <Input type="number" placeholder="0.00" />
        <Button>Submit</Button>
      </DialogContent>
    </Dialog>
  );
}

---

OrdaProvider Configuration

The OrdaProvider component accepts a config prop with the following options:

interface OrdaProviderConfig {
  /**
   * Async function that fetches a JWT token from your backend.
   * Called on initialization and automatically before token expiration.
   *
   * @returns Promise resolving to { jwt: string, expiresAt: number }
   */
  getToken: () => Promise<TokenResponse>;

  /**
   * AppKit configuration for wallet connections.
   * Create using createAppKitConfig().
   */
  appKitConfig: AppKitConfig;

  /**
   * Enable debug mode for development.
   * Logs SDK initialization, token refresh, and request details.
   *
   * @default false
   */
  debug?: boolean;
}

interface TokenResponse {
  jwt: string;      // JWT token string
  expiresAt: number; // Unix timestamp in seconds
}

AppKit Configuration

The createAppKitConfig function creates a wallet connection configuration:

interface AppKitFactoryConfig {
  /**
   * WalletConnect Project ID from cloud.reown.com
   * Required for wallet connections.
   */
  projectId: string;

  /**
   * Optional metadata for wallet connection UI
   */
  metadata?: {
    name?: string;        // App name (default: 'orda Widget')
    description?: string; // App description
    url?: string;         // App URL (default: 'https://orda.network')
    icons?: string[];     // App icon URLs
  };
}

Example with custom metadata:

const appKitConfig = createAppKitConfig({
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
  metadata: {
    name: 'My DeFi App',
    description: 'Multi-chain payment platform',
    url: 'https://mydefiapp.com',
    icons: ['https://mydefiapp.com/logo.png'],
  },
});