Skip to main content

​
Features

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

​
Installation

pnpm add viem wagmi material-symbols @tanstack/react-query @metalayer/widget

​
API Key Setup

Contact our team to get your API key.

​
Basic Usage

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: 'production',
        }}
      >
        <Widget
          config={{
            onOpenConnectModal: () => openWalletModal(),
          }}
        />
      </WidgetProvider>
    </QueryClientProvider>
  );
}