Examples

import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
import { DynamicContextProvider, mergeNetworks } 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 { WidgetProvider, Widget } from '@metalayer/widget';
import { useState, useMemo } from 'react';

function App() {
  const [evmNetworks, setEvmNetworks] = useState([]);

  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'your-dynamic-environment-id',
        walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
        overrides: {
          evmNetworks: (networks) => mergeNetworks(evmNetworks, networks),
        },
      }}
    >
      <WidgetProvider
        sdkConfig={{
          apiKey: 'your-api-key',
          environment: 'production',
        }}
        defaultSource={{
          chainId: 1,
          tokenAddress: '0xa0b86a33e6441e073b793e4e36b4de0d82cd5e22', // USDC - see Default Source/Destination section
        }}
        onSupportedChainsLoad={(chains) => {
          // See Chain Loading Callback section for details
          const evmNetworks = chains
            .filter(chain => chain.identifier?.architecture === ChainArchitecture.ETHEREUM)
            .map(chain => {
              const viemChain = chainToViemChain(chain);
              return viemChainToEvmNetwork(viemChain, chain.imageUrl);
            });
          setEvmNetworks(evmNetworks);
        }}
        onError={(error) => console.error('Widget error:', error)}
      >
        <DynamicWagmiConnector>
          <WidgetWrapper />
        </DynamicWagmiConnector>
      </WidgetProvider>
    </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
      config={{
        solanaSigner,
        onOpenConnectModal: () => setShowAuthFlow(true),
      }}
    />
  );
}

// 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(chain.rpcUrls.default).flat(),
    blockExplorerUrls: viemChain.blockExplorers?.default?.url ? [viemChain.blockExplorers.default.url] : [],
    isTestnet: chain.testnet,
    iconUrls: iconUrl ? [iconUrl] : [],
  };
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RainbowKitProvider, useConnectModal } from '@rainbow-me/rainbowkit';
import { WidgetProvider, Widget } from '@metalayer/widget';

const queryClient = new QueryClient();

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

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

  return (
    <Widget config={{ onOpenConnectModal: openConnectModal }} />
  );
}

import { type Chain, ChainArchitecture, chainToViemChain } from '@metalayer/sdk';
import { 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 { http, type Chain as ViemChain } from 'viem';
import { mainnet } from 'viem/chains';

const queryClient = new QueryClient();

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

  // Create wagmi config with loaded chains
  const wagmiConfig = useMemo(() => {
    const transports: Record<number, ReturnType<typeof http>> = {};
    for (const chain of supportedChains) {
      transports[chain.id] = http();
    }
    return createConfig({
      chains: supportedChains as [ViemChain, ...ViemChain[]],
      transports,
    });
  }, [supportedChains]);

  return (
    <PrivyProvider
      appId="your-privy-app-id"
      config={{ supportedChains }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <WidgetProvider
            disableWagmi
            sdkConfig={{
              apiKey: 'your-api-key',
              environment: 'production',
            }}
            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
      config={{
        onOpenConnectModal: () => {
          if (!authenticated) login();
        },
      }}
    />
  );
}

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

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

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

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

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

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'
          ? 'production'
          : 'staging',
      }}
      defaultSource={{
        chainId: 1, // Ethereum Mainnet
        tokenAddress: '0x0000000000000000000000000000000000000000', // ETH
      }}
      defaultDestination={{
        chainId: 42161, // Arbitrum One
        tokenAddress: '0x0000000000000000000000000000000000000000', // ETH
      }}
      onSupportedChainsLoad={(chains) => {
        // Update your application's chain configuration
        console.log('Supported chains loaded:', chains.length);
      }}
      onError={(error) => {
        // Send to error tracking service
        console.error('Widget error:', error);
        // trackError(error);
      }}
      debugEnabled={process.env.NODE_ENV === 'development'}
    >
      <Widget
        config={{
          onOpenConnectModal: () => {
            // Your wallet connection logic
            openWalletModal();
          },
          solanaSigner: getSolanaSigner(), // If supporting Solana
        }}
      />
    </WidgetProvider>
  );
}

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: 'production',
      }}
      onSupportedChainsLoad={(chains) => {
        trackEvent('widget_chains_loaded', { 
          chainCount: chains.length 
        });
      }}
    >
      <Widget
        config={{
          onOpenConnectModal: () => {
            trackEvent('wallet_connect_initiated');
            openWalletModal();
          },
          onSubmitTransaction: (
            sourceChainId?: number, 
            destChainId?: number, 
            amount?: string
          ) => {
            trackEvent('bridge_transaction_submitted', {
              sourceChainId,
              destChainId,
              amount
            });
          },
        }}
      />
    </WidgetProvider>
  );
}