Quick Start

Installation and setup

​Install npm package

To install the Widget, use your preferred package manager:CopyAsk AI

pnpm add @metalayer/widget
# or
npm install @metalayer/widget 
# or
yarn add @metalayer/widget 

​Dependecies

​npm package dependencies

CopyAsk AI

pnpm add @metalayer/viem-chains @tanstack/react-query react react-dom [email protected] wagmi material-symbols

Optional, for RainbowKit integrationCopyAsk AI

pnpm add @rainbow-me/rainbowkit

​required css

CopyAsk AI

import '@metalayer/widget/styles.css';
import '@rainbow-me/rainbowkit/styles.css'; // If using RainbowKit
import 'material-symbols/rounded.css'; // Temporary icon dependency

​Basic Integration

Metalayer widget needs to be wrapped in WidgetProvider.

​Widget

CopyAsk AI

<Widget
  config={{ 
    onOpenConnectModal: openConnectModal // Function to open wallet connection modal
  }} 
/>

​WidgetProvider

CopyAsk AI

<WidgetProvider
  // Required
  sdkConfig={{
    apiKey: "your-api-key",
    environment: "development", // "production" or "staging"
  }}
  // Optional error handling
  onError={(error) => {
    console.error('Widget error:', error);
  }}
/>

​NextJS example

CopyAsk AI

import { WidgetProvider, Widget } from '@metalayer/widget';
import { METALAYER_TESTNETS } from '@metalayer/viem-chains';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, createConfig, http } from 'wagmi';
import type { Chain } from 'viem/chains';
// Import RainbowKit components and styles
// Note: You can replace RainbowKit with any other wagmi/viem compatible wallet connector
import { RainbowKitProvider, ConnectButton, useConnectModal, getDefaultConfig } from '@rainbow-me/rainbowkit';

// Import required styles (order matters for proper styling)
import '@metalayer/widget/styles.css';
import '@rainbow-me/rainbowkit/styles.css';
import 'material-symbols/rounded.css';

// Create wagmi config with RainbowKit 
// Note: This configuration can be replaced with any other wagmi/viem based wallet solution
const config = getDefaultConfig({
  appName: 'Metalayer Bridge Widget Example',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Get one at https://cloud.reown.com/
  chains: [...METALAYER_TESTNETS as unknown as readonly [Chain, ...Chain[]]],
});

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/* RainbowKit provider can be replaced with your preferred wallet connector */}
        <RainbowKitProvider>
          <WidgetProvider
            sdkConfig={{
              apiKey: 'your-api-key',
              environment: 'development',
            }}
            onError={(error) => {
              console.error('Widget error:', error);
              // Use your preferred toast library
              // toast.error(error.message);
            }}
          >
            <Page />
          </WidgetProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

function Page() {
  // Using RainbowKit's ConnectButton to handle wallet connection
  // This can be replaced with any other wallet connection UI
  const { openConnectModal } = useConnectModal();
  
  return (
    <div className="app">
      <header>
        {/* ConnectButton can be replaced with your preferred wallet connection UI */}
        <ConnectButton />
      </header>
      <main>
        <Widget config={{ onOpenConnectModal: openConnectModal }} />
      </main>
    </div>
  );
}