Wagmi

Install

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

Configure Wagmi Provider (Next v14 example)

See the boilerplate example

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Inter } from "next/font/google";
import "./lib/ui/globals.css";

import { smartAccountConnector } from "@cometh/connect-sdk-4337";
import type { Hex } from "viem";
import { arbitrumSepolia } from "viem/chains";
import { http, WagmiProvider, createConfig } from "wagmi";

const inter = Inter({
    subsets: ["latin"],
});

const queryClient = new QueryClient();

const apiKey = process.env.NEXT_PUBLIC_COMETH_API_KEY;
const bundlerUrl = process.env.NEXT_PUBLIC_4337_BUNDLER_URL;
const paymasterUrl = process.env.NEXT_PUBLIC_4337_PAYMASTER_URL;
const rpcUrl = process.env.NEXT_PUBLIC_RPC_URL;

const connector = smartAccountConnector({
    apiKey,
    bundlerUrl,
    rpcUrl,
    paymasterUrl
});

const config = createConfig({
    chains: [arbitrumSepolia],
    connectors: [connector],
    transports: {
        [arbitrumSepolia.id]: http(),
    },
    ssr: true,
});

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <WagmiProvider config={config}>
                <QueryClientProvider client={queryClient}>
                    <body className={inter.className}>{children}</body>
                </QueryClientProvider>
            </WagmiProvider>
        </html>
    );
}
PreviousViemNextReact hooks

Last updated