The provider component that sets up the widget context and configuration.
Props
Prop Type Description Default Required sdkConfigMetalayerConfig SDK configuration - ✅ defaultSourceDefaultChainToken Default source chain and token undefined❌ defaultDestinationDefaultChainToken Default destination chain and token undefined❌ chainsChain []Pre-loaded chains (bypasses fetching) undefined❌ onSupportedChainsLoad(chains: Chain[]) => voidCallback when chains are loaded undefined❌ onError(error: Error) => voidError handling callback undefined❌ debugEnabledbooleanEnable debug logging false❌ disableWagmibooleanDisable internal wagmi provider (use when parent provides wagmi) false❌ brandColorstringCustom color for action buttons (submit, claim, prove, accept, cancel) #000000❌
SDK Configuration Basic Configuration
With Custom Options
< WidgetProvider sdkConfig = { { apiKey: 'your-api-key' , environment: 'mainnet' , // or 'testnet' } } >
The defaultOptions configuration is optional. When not specified, the widget will display all supported chains and use default quote preference.
Default Source/Destination < WidgetProvider defaultSource = { { chainId: 1 , // Ethereum Mainnet tokenAddress: '0x0000000000000000000000000000000000000000' , // ETH } } defaultDestination = { { chainId: 33139 , // ApeChain tokenAddress: '0x0000000000000000000000000000000000000000' , // ETH } } > Chain Loading Callback < WidgetProvider onSupportedChainsLoad = { ( chains ) => { // Use chains with your wallet provider const viemChains = chainsToViemChains ( chains ); updateWalletConfig ( viemChains ); } } >
📋 Note : The WidgetProvider automatically sets up a wagmi context internally with the supported chains. The onSupportedChainsLoad callback is provided for external wallet providers that need chain configuration (e.g., Dynamic.xyz). If using an external wagmi provider (e.g., Privy), set disableWagmi={true} to use the parent’s wagmi configuration.
The main UI component that renders the bridge interface.
Props
Prop Type Description Default Required configWidgetConfig Widget configuration - ✅
< Widget config = { { onOpenConnectModal : () => openWalletModal (), solanaSigner: solanaSigner , } } /> Type Definitions SDK configuration object. See MetalayerConfig
Property Type Description Default Required onOpenConnectModal() => voidCallback function called when the user opens the connect modal - ✅ onSubmitTransaction(sourceChainId?: number, destChainId?: number, amount?: string) => voidCallback function called when the user submits a transaction undefined❌ onSelectToken(direction: 'source' | 'destination', chainId: number, tokenAddress: string) => voidCallback function called when the user selects tokens undefined❌ source{ chainId: number; tokenAddress?: string }Source chain and token address undefined❌ destination{ chainId: number; tokenAddress?: string }Destination chain and token address undefined❌ isConnectingbooleanWhether a wallet is connecting false❌ solanaSignerWidgetSolanaSigner Solana wallet signer for Solana transactions undefined❌ classNamestringCSS class name applied to the widget’s main container div for custom styling undefined❌ onDisconnectWallet() => voidEnables disconnect button in config tab; executes provided function when clicked (for custom wallet management) undefined❌
import type { WidgetConfig } from '@metalayer/widget' ;
Property Type Description Default Required addressstringSolana wallet address - ✅ isConnected() => booleanFunction that returns whether the wallet is connected - ✅ signTransaction(transaction: Transaction) => Promise<Transaction>Function to sign a Solana transaction - ✅
const solanaSigner = { address: wallet . publicKey . toString (), isConnected : () => wallet . connected , signTransaction : async ( transaction ) => await wallet . signTransaction ( transaction ), }; DefaultSource/Destination interface DefaultChainToken { chainId : number ; tokenAddress : string ; }
Property Type Description Default Required chainIdnumberChain ID of the default network - ✅ tokenAddressstringToken contract address - ✅
Utility Functions The widget provides utility functions for chain conversion. For detailed documentation and usage examples, see the SDK Utilities section:
CSS Styling The widget requires CSS imports for proper styling:
import '@metalayer/widget/styles.css' ; import 'material-symbols/rounded.css' ; Error Handling Error Callback Handle errors in the widget through the onError callback:
< WidgetProvider onError = { ( error ) => { console . error ( 'Widget error:' , error ); // Handle error (show toast, log to service, etc.) } } > 