> ## Documentation Index
> Fetch the complete documentation index at: https://docs.caldera.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# React Hooks

> React hooks for the Metalayer SDK

## Setup

```tsx theme={null}
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { MetalayerProvider, type MetalayerConfig } from '@metalayer/sdk';

const queryClient = new QueryClient();

const config: MetalayerConfig = {
  apiKey: 'your-api-key',
  environment: 'mainnet',
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MetalayerProvider config={config}>
        <YourApp />
      </MetalayerProvider>
    </QueryClientProvider>
  );
}
```

## Available Hooks

### `useSupportedChains()`

Get supported blockchain networks.

```tsx theme={null}
import { useSupportedChains } from '@metalayer/sdk';

const { data, isLoading, error } = useSupportedChains();
const chains = data?.chains;
```

### `useTokens(params?)`

Get token information by chain.

```tsx theme={null}
import { useTokens } from '@metalayer/sdk';

const { data, isLoading } = useTokens({
  chainId: 1 // Optional: filter by chain
});
const tokensByChain = data?.tokensByChain;
```

### `useQuote(params, interval?)`

Get quotes for cross-chain bridging with real-time updates.

```tsx theme={null}
import { useQuote } from '@metalayer/sdk';

const {
  quote, // Best quote based on preferences (default: 'bestReturn')
  quotes, // Full list of quotes
  isLoading,
  error,
  refetch
} = useQuote({
  sourceChainId: 1,
  sourceTokenAddress: '0x...',
  destinationChainId: 33139,
  destinationTokenAddress: '0x...',
  amount: BigInt('1000000000000000000'),
  senderAddress: '0x...',
});
```

### `useOrderPolling(params, interval?)`

Poll order status with automatic updates.

```tsx theme={null}
import { useOrderPolling } from '@metalayer/sdk';

const {
  data: order,
  isLoading,
  error
} = useOrderPolling({
  sourceTransactionHash: '0xTxHash',
  sourceChainId: 1,
}, 15000); // Poll every 15 seconds
```

### `useWalletOrders(address)`

Get all orders for a specific wallet address.

```tsx theme={null}
import { useWalletOrders } from '@metalayer/sdk';

const {
  data: orders,
  isLoading,
  error
} = useWalletOrders('0xWalletAddress');
```

### `useMetalayer()`

Access the Metalayer client instance for direct API calls.

```tsx theme={null}
import { useMetalayer } from '@metalayer/sdk';

function Component() {
  const { router } = useMetalayer();

  // Use router directly for client method calls
  const handleQuote = async () => {
    const quote = await router.quote({
      sourceChainId: 1,
      destinationChainId: 33139,
      // ... other params
    });
  };

  return <div>Use router for direct API calls</div>;
}
```