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❌
disableWagmibooleanDisable internal wagmi provider (use when parent provides wagmi)false❌

​
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). If using an external wagmi provider (e.g., Privy), set disableWagmi={true} to use the parent’s wagmi configuration.

​
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.)
  }}
>
⌘I