Skip to main content

​
WidgetProvider

The provider component that sets up the widget context and configuration.

​
Props

PropTypeDescriptionDefaultRequired
sdkConfigMetalayerConfigSDK configuration-✅
defaultSourceDefaultChainTokenDefault source chain and tokenundefined❌
defaultDestinationDefaultChainTokenDefault destination chain and tokenundefined❌
chainsChain[]Pre-loaded chains (bypasses fetching)undefined❌
onSupportedChainsLoad(chains: Chain[]) => voidCallback when chains are loadedundefined❌
onError(error: Error) => voidError handling callbackundefined❌
debugEnabledbooleanEnable debug loggingfalse❌

​
SDK Configuration

<WidgetProvider
  sdkConfig={{
    apiKey: 'your-api-key',
    environment: 'production', // or 'staging'
  }}
>

​
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).

​
Widget

The main UI component that renders the bridge interface.

​
Props

PropTypeDescriptionDefaultRequired
configWidgetConfigWidget configuration-✅
<Widget
  config={{
    onOpenConnectModal: () => openWalletModal(),
    solanaSigner: solanaSigner,
  }}
/>

​
Type Definitions

​
MetalayerConfig

SDK configuration object. See MetalayerConfig in the SDK documentation for full details.

​
WidgetConfig

PropertyTypeDescriptionDefaultRequired
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 transactionundefined❌
onSelectToken(direction: 'source' | 'destination', chainId: number, tokenAddress: string) => voidCallback function called when the user selects tokensundefined❌
source{ chainId: number; tokenAddress?: string }Source chain and token addressundefined❌
destination{ chainId: number; tokenAddress?: string }Destination chain and token addressundefined❌
isConnectingbooleanWhether a wallet is connectingfalse❌
solanaSignerWidgetSolanaSignerSolana wallet signer for Solana transactionsundefined❌
import type { WidgetConfig } from '@metalayer/widget';

​
WidgetSolanaSigner

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