WidgetProvider
The provider component that sets up the widget context and configuration.Props
Prop | Type | Description | Default | Required |
---|---|---|---|---|
sdkConfig | MetalayerConfig | SDK configuration | - | ✅ |
defaultSource | DefaultChainToken | Default source chain and token | undefined | ❌ |
defaultDestination | DefaultChainToken | Default destination chain and token | undefined | ❌ |
chains | Chain[] | Pre-loaded chains (bypasses fetching) | undefined | ❌ |
onSupportedChainsLoad | (chains: Chain[]) => void | Callback when chains are loaded | undefined | ❌ |
onError | (error: Error) => void | Error handling callback | undefined | ❌ |
debugEnabled | boolean | Enable debug logging | false | ❌ |
disableWagmi | boolean | Disable internal wagmi provider (use when parent provides wagmi) | false | ❌ |
SDK Configuration
Default Source/Destination
Chain Loading Callback
📋 Note: The WidgetProvider automatically sets up a wagmi context internally with the supported chains. TheonSupportedChainsLoad
callback is provided for external wallet providers that need chain configuration (e.g., Dynamic.xyz). If using an external wagmi provider (e.g., Privy), setdisableWagmi={true}
to use the parent’s wagmi configuration.
Widget
The main UI component that renders the bridge interface.Props
Prop | Type | Description | Default | Required |
---|---|---|---|---|
config | WidgetConfig | Widget configuration | - | ✅ |
Type Definitions
MetalayerConfig
SDK configuration object. See MetalayerConfig in the SDK documentation for full details.WidgetConfig
Property | Type | Description | Default | Required |
---|---|---|---|---|
onOpenConnectModal | () => void | Callback function called when the user opens the connect modal | - | ✅ |
onSubmitTransaction | (sourceChainId?: number, destChainId?: number, amount?: string) => void | Callback function called when the user submits a transaction | undefined | ❌ |
onSelectToken | (direction: 'source' | 'destination', chainId: number, tokenAddress: string) => void | Callback 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 | ❌ |
isConnecting | boolean | Whether a wallet is connecting | false | ❌ |
solanaSigner | WidgetSolanaSigner | Solana wallet signer for Solana transactions | undefined | ❌ |
WidgetSolanaSigner
Property | Type | Description | Default | Required |
---|---|---|---|---|
address | string | Solana wallet address | - | ✅ |
isConnected | () => boolean | Function that returns whether the wallet is connected | - | ✅ |
signTransaction | (transaction: Transaction) => Promise<Transaction> | Function to sign a Solana transaction | - | ✅ |
DefaultSource/Destination
Property | Type | Description | Default | Required |
---|---|---|---|---|
chainId | number | Chain ID of the default network | - | ✅ |
tokenAddress | string | Token contract address | - | ✅ |
Utility Functions
The widget provides utility functions for chain conversion. For detailed documentation and usage examples, see the SDK Utilities section:- chainsToViemChains - Convert an array of Metalayer chains to Viem format
- chainToViemChain - Convert a single Metalayer chain to Viem format
CSS Styling
The widget requires CSS imports for proper styling:Error Handling
Error Callback
Handle errors in the widget through theonError
callback: