Metalayer Bridge Widget

React component for cross-chain token bridging powered by Caldera's Bridge Aggregator.

Features

• Cross-chain token bridging
• Multi-wallet support (Ethereum + Solana)
• Responsive design
• TypeScript support
• Framework agnostic

📚 Full Documentation

Installation

pnpm add @metalayer/widget viem wagmi material-symbols @tanstack/react-query @solana/web3.js @solana/spl-token

Requirements: React 16.8+, TypeScript 5.0+ (recommended)

Get your API key by contacting Caldera's team.

Quick Start

import '@metalayer/widget/styles.css';
import 'material-symbols/rounded.css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WidgetProvider, Widget } from '@metalayer/widget';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WidgetProvider
        sdkConfig={{
          apiKey: 'your-api-key',
          environment: 'mainnet',
        }}
      >
        <Widget
          config={{
            onOpenConnectModal: () => openWalletModal(),
          }}
        />
      </WidgetProvider>
    </QueryClientProvider>
  );
}

Components

WidgetProvider

Sets up the widget context and configuration. Wraps your app with Metalayer SDK and wallet provider configuration.

Key Props:

• sdkConfig (required) - API key and environment configuration
• defaultSource - Default source chain and token
• defaultDestination - Default destination chain and token
• onSupportedChainsLoad - Callback when chains load (useful for external wallet providers)
• onError - Error handling callback
• debugEnabled - Enable debug logging

<WidgetProvider
  sdkConfig={{ apiKey: 'your-api-key', environment: 'mainnet' }}
  defaultSource={{ chainId: 1, tokenAddress: '0x...' }}
  defaultDestination={{ chainId: 42161, tokenAddress: '0x...' }}
  onSupportedChainsLoad={(chains) => updateWalletConfig(chains)}
>

Widget

Main UI component that renders the bridge interface.

Key Props:

• config.onOpenConnectModal (required) - Callback to open wallet connection modal
• config.solanaSigner - Solana wallet signer (for Solana bridging)

<Widget
  config={{
    onOpenConnectModal: () => openWalletModal(),
    solanaSigner: solanaSigner,
  }}
/>

📖 Components Reference

Integration Examples

With Dynamic.xyz

import { DynamicContextProvider, DynamicWagmiConnector, useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { WidgetProvider, Widget } from '@metalayer/widget';

function App() {
  return (
    <DynamicContextProvider settings={{ environmentId: 'your-id' }}>
      <WidgetProvider sdkConfig={{ apiKey: 'your-api-key', environment: 'mainnet' }}>
        <DynamicWagmiConnector>
          <BridgePage />
        </DynamicWagmiConnector>
      </WidgetProvider>
    </DynamicContextProvider>
  );
}

function BridgePage() {
  const { setShowAuthFlow } = useDynamicContext();
  return <Widget config={{ onOpenConnectModal: () => setShowAuthFlow(true) }} />;
}

With RainbowKit

import { RainbowKitProvider, useConnectModal } from '@rainbow-me/rainbowkit';
import { WidgetProvider, Widget } from '@metalayer/widget';

function App() {
  return (
    <WidgetProvider sdkConfig={{ apiKey: 'your-api-key', environment: 'mainnet' }}>
      <RainbowKitProvider>
        <BridgePage />
      </RainbowKitProvider>
    </WidgetProvider>
  );
}

function BridgePage() {
  const { openConnectModal } = useConnectModal();
  return <Widget config={{ onOpenConnectModal: openConnectModal }} />;
}

Next.js

Import styles in your layout or _app:

import '@metalayer/widget/styles.css';
import 'material-symbols/rounded.css';

📖 Full Examples - Includes Solana integration, advanced configuration, and more.