Widget Reference

OrdaProvider

Main provider component that wraps your application.

interface OrdaProviderProps {
  config: OrdaProviderConfig;
  children: React.ReactNode;
}

interface OrdaProviderConfig {
  getToken: () => Promise<TokenResponse>;
  appKitConfig: AppKitConfig;
  debug?: boolean;
}

createAppKitConfig

Factory function for creating wallet configuration.

function createAppKitConfig(config: AppKitFactoryConfig): AppKitConfig;

interface AppKitFactoryConfig {
  projectId: string;
  metadata?: {
    name?: string;
    description?: string;
    url?: string;
    icons?: string[];
  };
}

Hooks

useOrdaSDK

Access the SDK instance and authentication state.

function useOrdaSDK(): OrdaSDKContextValue;

interface OrdaSDKContextValue {
  sdk: OrdaSDK | null;
  isLoading: boolean;
  error: Error | null;
  refreshToken: () => Promise<void>;
  isRefreshing: boolean;
  waitForRefresh: () => Promise<void>;
}

useQuote

Generate payment quotes.

function useQuote(): UseQuoteReturn;

interface UseQuoteReturn {
  quote: TransferResponse | DirectTransferResponse | null;
  isLoading: boolean;
  error: Error | null;
  requestQuote: (params: QuoteRequestParams) => Promise<QuoteResponse>;
  clearQuote: () => void;
}

useTransaction

Monitor transaction status.

function useTransaction(): UseTransactionReturn;

interface UseTransactionReturn {
  status: TransactionStatusResponse | null;
  isLoading: boolean;
  error: Error | null;
  getStatus: (params: TransactionStatusParams) => Promise<TransactionStatusResponse>;
  waitForCompletion: (txId: string, options?: PollingOptions) => Promise<TransactionStatusResponse>;
  clearStatus: () => void;
}

useTokenPrices

Fetch token USD prices.

function useTokenPrices(
  tokens: TokenPriceRequest[],
  options?: UseTokenPricesOptions
): UseTokenPricesReturn;

interface UseTokenPricesReturn {
  prices: TokenPriceData[];
  isLoading: boolean;
  isFetching: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

useBalances

Fetch wallet token balances.

function useBalances(
  address: string | undefined,
  options?: UseBalancesOptions
): UseBalancesReturn;

interface UseBalancesReturn {
  data: BalancesFetchResponse | null;
  isLoading: boolean;
  isFetching: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

Components

Widget

Main payment widget component.

function Widget(): JSX.Element;

UI Components

shadcn/ui-based components:

• Button - Button component with variants

• Dialog - Modal dialog

• Drawer - Bottom drawer (mobile)

• Input - Text input

• Select - Dropdown select

• Badge - Badge/chip component

• Label - Form label

• Popover - Popover tooltip

• Sheet - Side sheet

Utilities

// Formatting
formatUsd(value: number): string;
formatUsdFull(value: number): string;
formatCryptoAmount(amount: string, decimals: number): string;
truncateAddress(address: string, start?: number, end?: number): string;

// Parsing
parseToNativeUnits(amount: string, decimals: number): string;
parseFromNativeUnits(amount: string, decimals: number): string;

// Validation
isValidAddress(address: string): boolean;
isValidAmount(amount: string): boolean;

// Chain utilities
getWagmiChain(chainId: string): Chain | undefined;
getChainName(chainId: string): string;

Constants

// Chain IDs
enum ChainId {
  ETHEREUM = '1',
  POLYGON = '137',
  ARBITRUM = '42161',
  // ... more chains
}

// Supported chains
const SUPPORTED_CHAINS: ChainInfo[];

// Common tokens
const COMMON_TOKENS: TokenInfo[];

// Fiat currencies
const FIAT_CURRENCIES: FiatInfo[];