React Hooks

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: 'production',
};

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

import { useSupportedChains } from '@metalayer/sdk';

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

import { useTokens } from '@metalayer/sdk';

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

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...',
});

import { useOrderPolling } from '@metalayer/sdk';

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

import { useWalletOrders } from '@metalayer/sdk';

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

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>;
}