Fetch the list of supported chains to populate source and destination chain selectors in your UI. This data enables users to choose which networks they want to bridge between.
Retrieve available tokens organized by chain to build token selection lists. Use this data to create filtered token dropdowns that update based on the user’s selected source and destination chains.
Request bridge quotes based on user selections from your UI. This provides routing options, fees, and estimated completion times for the bridge transaction.
Copy
Ask AI
import { useQuote } from '@metalayer/sdk';const { data: quoteData, isLoading } = useQuote({ sourceChainId: 1, // Ethereum Mainnet sourceTokenAddress: '0x0000000000000000000000000000000000000000', // ETH destinationChainId: 33139, // ApeChain destinationTokenAddress: '0x0000000000000000000000000000000000000000', // ETH amount: BigInt('1000000000000000000'), // 1 ETH senderAddress: '0xYourWalletAddress',});const bestQuote = quoteData?.quotes[0];
Execute the bridge transaction using the selected quote. This typically involves multiple steps like token approvals followed by the actual bridge transaction, with each step requiring user wallet confirmation.
Copy
Ask AI
// Execute quote stepsfor (const step of bestQuote.steps) { switch (step.action.case) { case 'transactionRequest': await walletClient.sendTransaction({ to: step.action.value.to, data: step.action.value.data, value: step.action.value.value, }); break; case 'eip712Data': await walletClient.signTypedData(step.action.value); break; }}
Track the bridge transaction progress to provide real-time status updates to users. Use this to display progress indicators, completion confirmations, or error states in your UI.
Copy
Ask AI
import { useOrderPolling, OrderStatus } from '@metalayer/sdk';const { data: order } = useOrderPolling({ sourceTransactionHash: '0xTxHash', sourceChainId: 1,});// Check order status - see OrderStatus Values section for all possible valuesif (order?.status === OrderStatus.FULFILLED) { console.log('Bridge completed successfully!');} else if (order?.status === OrderStatus.FAILED) { console.log('Bridge failed');} else if (order?.status === OrderStatus.PENDING) { console.log('Bridge in progress...');}