Connect 4337
Cometh ConnectCometh MarketplaceCometh Checkout
  • 🚀Quick start
    • What is Connect 4337
    • Getting started
    • Supported Networks
  • 🛠️CORE FEATURES
    • Create a Wallet
    • Send transactions
    • Go Gasless
    • Sign/Verify a message
    • Retrieve a wallet address
    • Handle owners
    • Import a safe into connect
  • 🥷ADVANCED
    • Session Keys
      • Tutorial
      • Policies
        • Sudo policy
        • Action policy
    • Social recovery
    • Add a passkey signer on a different OS
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
      • grantPermissions
    • Other signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
  • 🔌Integrations
    • React hooks
      • ConnectProvider
      • useAccount
      • useConnect
      • useDisconnect
      • useGetGasPrice
      • useSendTransaction
      • useSignMessage
      • useVerifyMessage
      • useWriteContract
      • Handle owners
        • useRemoveOwner
        • useValidateAddDevice
        • useCreateNewSigner
        • useAddOwner
        • useGetOwners/EnrichedOwners
      • Session Keys
        • useGrantPermission
        • useSendPermission
        • useSessionKeyClient
        • useSessionKeySigner
      • Recovery
        • useIsRecoveryActive
        • useSetUpRecovery
        • useGetRecoveryRequest
        • useCancelRecoveryRequest
    • Mobile SDKs
      • IOS
      • Android
      • React Native
    • Wagmi
  • SDK Core
    • Signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
    • Handle owners
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
  • SDK Session Keys
    • Setup Smart Account Client
    • Manage session keys
    • Policies
      • Sudo policy
      • Action policy
  • 📦Bundler
    • Bundler API
      • eth_sendUserOperation
      • eth_estimateUserOperationGas
      • eth_getUserOperationByHash
      • eth_getUserOperationReceipt
      • eth_supportedEntryPoints
  • 💳Paymaster
    • Paymaster API
  • 📖RESOURCES
    • Migrate from the connect legacy SDK
    • Connect Legacy SDKs (Unity, JS)
    • FAQ
Powered by GitBook
On this page
  • Install
  • Configure Wagmi Provider (Next v14 example)
  1. Integrations

Wagmi

PreviousReact NativeNextSDK Core

Last updated 1 month ago

Install

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

Configure Wagmi Provider (Next v14 example)

See

"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 publicClient = createPublicClient({
    chain: arbitrumSepolia,
    transport: http(),
    cacheTime: 60_000,
    batch: {
        multicall: { wait: 50 },
    },
});

const connector = smartAccountConnector({
    apiKey,
    bundlerUrl,
    publicClient,
    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>
    );
}
🔌
the boilerplate example