Methods

Get quotes, routes and orders

Overview

• static init(config: MetaRouterConfig): MetaRouterClient

• quote(params: QuotesParams): Promise<QuotesResponse>

• getTokenRoutes(params: TokenRoutesParams): Promise<TokenRoutesResponse>

• getSupportedChains(params: SupportedChainsParams): Promise<SupportedChainsResponse>

• getOrder(params: OrderParams): Promise<OrderResponse>

• getOrders(params: OrdersParams): Promise<OrdersResponse>

​React Hooks

The SDK provides React hooks for easy integration:

• useQuote

• useTokenRoutes

• useSupportedChains

• useOrderPolling

• useWalletOrders

​useQuote

Get quotes for a transfer:CopyAsk AI

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

function Component() {
  const { quote: bestQuote, isLoading } = useQuote({
    chainInId: 1,
    tokenInAddress: '0x0000000000000000000000000000000000000000',
    chainOutId: 10,
    tokenOutAddress: '0x0000000000000000000000000000000000000000',
    amount: BigInt(1000000000000000000), // 1 ETH
    senderAddress: '0xYourWalletAddress',
  });

  if (isLoading) return <div>Loading quote...</div>;

  return (
    <div>
      Best amount out: {bestQuote?.amountOut.toString()}
    </div>
  );
}

​useTokenRoutes

Fetch available token routes:CopyAsk AI

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

function Component() {
  // All available routes
  const { data: tokenRoutes, isLoading } = useTokenRoutes();

  // Available routes for specific Source chain & token
  const { data: tokenRoutesSource, isLoading } = useTokenRoutes({
    chainInId: 1,
    tokenInAddress: '0x0000000000000000000000000000000000000000'
  });

  // Available routes for specific Destination chain & token
  const { data: tokenRoutesDestination, isLoading } = useTokenRoutes({
    chainOutId: 1,
    tokenOutAddress: '0x0000000000000000000000000000000000000000'
  });
  
  if (isLoading) return <div>Loading routes...</div>;

  return (
    <div>
      Available routes: {tokenRoutes?.routes.length}
      Available routes for specific source: {tokenRoutesSource?.routes.length}
      Available routes for specific destination: {tokenRoutesDestination?.routes.length}
    </div>
  );
}

​useSupportedChains with useTokenRoutes

Fetch supported chains and token routes, using chain and token data to display route information with icons:CopyAsk AI

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

function Component() {
  const { data: chainsData, isLoading: chainsLoading } = useSupportedChains();
  const { data: tokenRoutes, isLoading: routesLoading } = useTokenRoutes();

  if (chainsLoading || routesLoading) return <div>Loading...</div>;

  const getChainInfo = (chainId: number) => {
    const chain = chainsData?.chains.find(c => c.id === chainId);
    return {
      name: chain?.name || `Chain ${chainId}`,
      icon: chain?.imageUrl,
    };
  };

  const getTokenInfo = (chainId: number, address: string) => {
    const key = `${chainId}_${address}`;
    const token = tokenRoutes?.tokens[key];
    return {
      symbol: token?.symbol || 'Unknown',
      icon: token?.imageUrl,
    };
  };

  return (
    <ul>
      {tokenRoutes?.routes.slice(0, 5).map((route, index) => {
        const sourceChain = getChainInfo(route.chainInId);
        const destChain = getChainInfo(route.chainOutId);
        const sourceToken = getTokenInfo(route.chainInId, route.tokenInAddress);
        const destToken = getTokenInfo(route.chainOutId, route.tokenOutAddress);

        return (
          <li key={index} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            {sourceToken.icon && <img src={sourceToken.icon} alt={sourceToken.symbol} width={20} />}
            {sourceToken.symbol}
            {sourceChain.icon && <img src={sourceChain.icon} alt={sourceChain.name} width={20} />}
            on {sourceChain.name} →
            {destToken.icon && <img src={destToken.icon} alt={destToken.symbol} width={20} />}
            {destToken.symbol}
            {destChain.icon && <img src={destChain.icon} alt={destChain.name} width={20} />}
            on {destChain.name}
          </li>
        );
      })}
    </ul>
  );
}

​useOrderPolling

Poll for order status:CopyAsk AI

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

function Component() {
  // Recommended: Poll by source transaction & source chain id
  const { data: order, isLoading } = useOrderPolling({
    sourceTransactionHash: '0xYourTxHash',
    sourceChainId: 1,
    sourceTransactionStatus: 'success',
  }, 15000); // Poll every 15 seconds

  // For Relay Quote Provider: Must pass the quote object to poll by quote ID
  const { data: relayOrder, isLoading: relayLoading } = useOrderPolling({
    quote: quote,
    sourceTransactionStatus: 'success',
  }, 15000);

  if (isLoading) return <div>Loading order...</div>;

  return (
    <div>
      <div>Order Status: {order?.status}</div>
      <div>Relay Order Status: {relayOrder?.status}</div>
    </div>
  );
}

​useWalletOrders

Fetch orders for a wallet:CopyAsk AI

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

function Component() {
  const { data: orders, isLoading } = useWalletOrders('0xYourWalletAddress');

  if (isLoading) return <div>Loading orders...</div>;

  return <div>Total orders: {orders?.length}</div>;
}