Getting Started

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

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WidgetProvider, Widget } from '@metalayer/widget';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
});

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <WidgetProvider
          sdkConfig={{
            apiKey: 'your-api-key',
            environment: 'mainnet',
          }}
          onSupportedChainsLoad={(chains) => {
            // Update your wagmi config with the widget's supported chains
          }}
        >
          <Widget onConnectClick={() => openWalletModal()} />
        </WidgetProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}