Examples - Caldera Docs

Dynamic.xyz Integration

Complete integration with Dynamic.xyz for multi-chain wallet support.

This example includes Solana wallet support, which is currently in beta and requires additional dependencies. See the EVM + Solana installation for setup instructions.

import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
import { DynamicContextProvider, mergeNetworks, useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { SolanaWalletConnectors, isSolanaWallet } from '@dynamic-labs/solana';
import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
import { chainToViemChain, ChainArchitecture } from '@metalayer/sdk';
import { createWidgetClient, WidgetProvider, Widget } from '@metalayer/widget';
import { useState, useMemo } from 'react';
import type { Chain as ViemChain } from 'viem/chains';
import { mainnet } from 'viem/chains';
import { createConfig, WagmiProvider } from 'wagmi';

function createWagmiConfig(chains: [ViemChain, ...ViemChain[]]) {
  return createConfig({
    chains,
    multiInjectedProviderDiscovery: false,
    client({ chain }) {
      return createWidgetClient(chain);
    },
  });
}

function App() {
  const [evmNetworks, setEvmNetworks] = useState([]);
  const [viemChains, setViemChains] = useState<ViemChain[]>([mainnet]);

  const wagmiConfig = useMemo(
    () => createWagmiConfig(viemChains as [ViemChain, ...ViemChain[]]),
    [viemChains],
  );

  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'your-dynamic-environment-id',
        walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
        overrides: {
          evmNetworks: (networks) => mergeNetworks(evmNetworks, networks),
        },
      }}
    >
      <WagmiProvider config={wagmiConfig}>
        <WidgetProvider
          sdkConfig={{
            apiKey: 'your-api-key',
            environment: 'mainnet',
          }}
          defaultSource={{
            chainId: 1,
            tokenAddress: '0xa0b86a33e6441e073b793e4e36b4de0d82cd5e22', // USDC - see Default Source/Destination section
          }}
          onSupportedChainsLoad={(chains) => {
            const ethereumChains = chains.filter(
              (chain) => chain.identifier?.architecture === ChainArchitecture.ETHEREUM,
            );
            const nextViem = ethereumChains.map((chain) => chainToViemChain(chain));
            setViemChains(nextViem.length ? nextViem : [mainnet]);
            setEvmNetworks(
              ethereumChains.map((chain) =>
                viemChainToEvmNetwork(chainToViemChain(chain), chain.imageUrl),
              ),
            );
          }}
          onError={(error) => console.error('Widget error:', error)}
        >
          <DynamicWagmiConnector>
            <WidgetWrapper />
          </DynamicWagmiConnector>
        </WidgetProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  );
}

function WidgetWrapper() {
  const { setShowAuthFlow, primaryWallet } = useDynamicContext();

  const solanaSigner = useMemo(() => {
    if (!primaryWallet || !isSolanaWallet(primaryWallet)) return undefined;

    return {
      address: primaryWallet.address,
      isConnected: () => !!primaryWallet.address,
      signTransaction: async (transaction) => {
        const signer = await primaryWallet.getSigner();
        return await signer.signTransaction(transaction);
      },
    };
  }, [primaryWallet]);

  return (
    <Widget
      solanaSigner={solanaSigner}
      onConnectClick={() => setShowAuthFlow(true)}
    />
  );
}

// `ViemChain` is viem's Chain (imported above as `Chain as ViemChain`).

// Helper function to convert Viem chain to EVM network
function viemChainToEvmNetwork(viemChain, iconUrl) {
  return {
    chainId: viemChain.id,
    name: viemChain.name,
    networkId: viemChain.id,
    nativeCurrency: viemChain.nativeCurrency,
    rpcUrls: Object.values(viemChain.rpcUrls.default).flat(),
    blockExplorerUrls: viemChain.blockExplorers?.default?.url ? [viemChain.blockExplorers.default.url] : [],
    isTestnet: viemChain.testnet,
    iconUrls: iconUrl ? [iconUrl] : [],
  };
}

RainbowKit Integration

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RainbowKitProvider, getDefaultConfig, useConnectModal } from '@rainbow-me/rainbowkit';
import { chainsToViemChains } from '@metalayer/sdk';
import { createWidgetTransportsRecord, WidgetProvider, Widget } from '@metalayer/widget';
import { useMemo, useState } from 'react';
import type { Chain as ViemChain } from 'viem/chains';
import { mainnet } from 'wagmi/chains';
import { WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();

function App() {
  const [viemChains, setViemChains] = useState<ViemChain[]>([mainnet]);

  const wagmiConfig = useMemo(
    () =>
      getDefaultConfig({
        appName: 'My App',
        projectId: 'your-walletconnect-project-id',
        chains: viemChains as [ViemChain, ...ViemChain[]],
        transports: createWidgetTransportsRecord(viemChains),
      }),
    [viemChains],
  );

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <WidgetProvider
          sdkConfig={{
            apiKey: 'your-api-key',
            environment: 'mainnet',
          }}
          onSupportedChainsLoad={(chains) => {
            const next = chainsToViemChains(chains);
            if (next.length) setViemChains(next);
          }}
        >
          <RainbowKitProvider>
            <BridgePage />
          </RainbowKitProvider>
        </WidgetProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

function BridgePage() {
  const { openConnectModal } = useConnectModal();

  return (
    <Widget onConnectClick={openConnectModal} />
  );
}

Privy Integration

Complete integration with Privy for multi-chain wallet support with external wagmi configuration.

import { type Chain, ChainArchitecture, chainToViemChain } from '@metalayer/sdk';
import { createWidgetTransportsRecord, WidgetProvider } from '@metalayer/widget';
import { PrivyProvider } from '@privy-io/react-auth';
import { createConfig, WagmiProvider } from '@privy-io/wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import type { Chain as ViemChain } from 'viem/chains';
import { mainnet } from 'viem/chains';

const queryClient = new QueryClient();

function Providers({ children }: { children: React.ReactNode }) {
  const [supportedChains, setSupportedChains] = useState<ViemChain[]>([mainnet]);

  const wagmiConfig = useMemo(
    () =>
      createConfig({
        chains: supportedChains as [ViemChain, ...ViemChain[]],
        transports: createWidgetTransportsRecord(supportedChains),
      }),
    [supportedChains],
  );

  return (
    <PrivyProvider
      appId="your-privy-app-id"
      config={{ supportedChains }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <WidgetProvider
            sdkConfig={{
              apiKey: 'your-api-key',
              environment: 'mainnet',
            }}
            onSupportedChainsLoad={(chains: Chain[]) => {
              // Filter for EVM chains and convert to viem chains
              const evmChains = chains
                .filter(chain => chain.identifier?.architecture === ChainArchitecture.ETHEREUM)
                .map(chain => chainToViemChain(chain));
              setSupportedChains(evmChains);
            }}
          >
            {children}
          </WidgetProvider>
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  );
}

import { Widget } from '@metalayer/widget';
import { usePrivy } from '@privy-io/react-auth';

function BridgePage() {
  const { login, authenticated } = usePrivy();

  return (
    <Widget
      onConnectClick={() => {
        if (!authenticated) login();
      }}
    />
  );
}

Next.js Setup

App Router

In your layout.tsx:

import '@metalayer/widget/styles.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Pages Router

In your _app.tsx:

import '@metalayer/widget/styles.css';

export default function App({ Component, pageProps }) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}

Vite Setup

When using the widget with Vite, you’ll need to configure Node.js polyfills: Install the plugin:

pnpm add -D vite-plugin-node-polyfills

npm install --save-dev vite-plugin-node-polyfills

yarn add -D vite-plugin-node-polyfills

Update your vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    // Add this plugin to your existing plugins array
    nodePolyfills({
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
    }),
  ],
  // ... your other config options
});

If you already have other plugins configured, simply add the nodePolyfills plugin to your existing plugins array.

Advanced Configuration

Configure the widget with advanced options for production use.

import { chainsToViemChains } from '@metalayer/sdk';
import { WidgetProvider, Widget } from '@metalayer/widget';

function AdvancedBridgeApp() {
  return (
    <WidgetProvider
      sdkConfig={{
        apiKey: process.env.NEXT_PUBLIC_METALAYER_API_KEY,
        environment: process.env.NODE_ENV === 'production'
          ? 'mainnet'
          : 'testnet',
      }}
      defaultSource={{
        chainId: 1, // Ethereum Mainnet
        tokenAddress: '0x0000000000000000000000000000000000000000', // ETH
      }}
      defaultDestination={{
        chainId: 42161, // Arbitrum One
        tokenAddress: '0x0000000000000000000000000000000000000000', // ETH
      }}
      onSupportedChainsLoad={(chains) => {
        const viemChains = chainsToViemChains(chains);
        if (viemChains.length) {
          /* Recreate wagmi with viemChains + createWidgetClient or createWidgetTransportsRecord (see Widget Components docs) */
        }
      }}
      onError={(error) => {
        // Send to error tracking service
        console.error('Widget error:', error);
        // trackError(error);
      }}
      debugEnabled={process.env.NODE_ENV === 'development'}
    >
      <Widget
        onConnectClick={() => {
          // Your wallet connection logic
          openWalletModal();
        }}
        solanaSigner={getSolanaSigner()} // If supporting Solana
      />
    </WidgetProvider>
  );
}

Analytics Integration

Track widget usage and user interactions:

import { WidgetProvider, Widget } from '@metalayer/widget';

function AnalyticsEnabledWidget() {
  const trackEvent = (eventName, properties) => {
    // Your analytics implementation
    analytics.track(eventName, properties);
  };

  return (
    <WidgetProvider
      sdkConfig={{
        apiKey: 'your-api-key',
        environment: 'mainnet',
      }}
      onSupportedChainsLoad={(chains) => {
        trackEvent('widget_chains_loaded', { 
          chainCount: chains.length 
        });
      }}
    >
      <Widget
        onConnectClick={() => {
          trackEvent('wallet_connect_initiated');
          openWalletModal();
        }}
        onTransactionSubmitted={(
          sourceChainId: number,
          destChainId?: number,
          amount?: string
        ) => {
          trackEvent('bridge_transaction_submitted', {
            sourceChainId,
            destChainId,
            amount
          });
        }}
      />
    </WidgetProvider>
  );
}

​Dynamic.xyz Integration

​RainbowKit Integration

​Privy Integration

​Next.js Setup

​App Router

​Pages Router

​Vite Setup

​Advanced Configuration

​Analytics Integration

Dynamic.xyz Integration

RainbowKit Integration

Privy Integration

Next.js Setup

App Router

Pages Router

Vite Setup

Advanced Configuration

Analytics Integration