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