Cometh ConnectCometh MarketplaceCometh Checkout

Wagmi + Web3modal

Install​

npm i @cometh/connect-sdk-viem wagmi viem

Add Connect to Wagmi/Web3modal config

You need to import to ComethConnectConnector as a connector. It takes some params (click here to view all parameters):

chains - required

options - required (apikey, walletAddress and other optional parameters)

"use client";

import "./lib/ui/globals.css";
import { cookieStorage, createStorage, WagmiProvider } from 'wagmi'

import { polygon } from "viem/chains";
import { createWeb3Modal } from "@web3modal/wagmi/react";
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'

import { comethConnectConnector } from "@cometh/connect-sdk-viem";

const projectId = NEXT_PUBLIC_WALLET_CONNECT_ID;
const apiKey = NEXT_PUBLIC_COMETH_API_KEY;
const chains = [polygon] as const

// 1. Configure cometh connect wagmi connector
const connectorConnect = comethConnectConnector({
   apiKey
});

// 2. Configure wagmi config
const metadata = {
  name: 'Web3Modal',
  description: 'Web3Modal Example',
  url: 'https://web3modal.com', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/37784886']
}

export const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  ssr: true,
  storage: createStorage({
    storage: cookieStorage
  }),
  connectors: [connectorConnect],
  ...wagmiOptions // Optional - Override createConfig parameters
})

// 3. Add connect svg to web3modal
const connectorImages = {
  "cometh-connect":
    "https://pbs.twimg.com/profile_images/1679433363818442753/E2kNVLBe_400x400.jpg",
};

// 4. Create modal
createWeb3Modal({ wagmiConfig, projectId, connectorImages });

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

Add Connect Button

function ConnectWallet(): JSX.Element {
  return <w3m-button />;
}

export default ConnectWallet;

Great ! You can now use regular wagmi tools using web3modal and cometh connect !

Last updated