# Widget Reference

### `OrdaProvider`

Main provider component that wraps your application.

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

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

### `createAppKitConfig`

Factory function for creating wallet configuration.

```typescript
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.

```typescript
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.

```typescript
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.

```typescript
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.

```typescript
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.

```typescript
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.

```typescript
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

```typescript
// 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

```typescript
// 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[];
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.orda.network/developers/widget-beta/widget-reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.