ConnectProvider

Description

The ConnectProvider component in TypeScript React sets up a context provider for managing the ConnectSmartAccount related state and functionality.

Parameters

apiKey : Cometh Connect public api key. This can be retrieved from the Cometh dashboard
networksConfig: - bundlerUrl: The URL of the Cometh bundler. This can be retrieved from the Cometh 4337 docs and dashboard. - paymasterUrl - optional: The paymaster API key. This can be retrieved from the Cometh dashboard - chain: Your required viem chain. - rpcUrl - optional
signer - optional: A signer from an external auth provider (metamask...) that will control the account

Example

"use client";

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

import { ConnectProvider } from "@cometh/connect-react-hooks";
import { arbitrumSepolia } from "viem/chains";

const queryClient = new QueryClient();

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

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 = "https://arbitrum-sepolia.blockpi.network/v1/rpc/public";

const networksConfig = [
    {
        chain: arbitrumSepolia,
        bundlerUrl,
        paymasterUrl,
        rpcUrl
    },
];


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

PreviousReact hooks NextuseAccount

Last updated 8 months ago

Parameters

apiKey : Cometh Connect public api key. This can be retrieved from the Cometh dashboard

networksConfig: - bundlerUrl: The URL of the Cometh bundler. This can be retrieved from the Cometh 4337 docs and dashboard. - paymasterUrl - optional: The paymaster API key. This can be retrieved from the Cometh dashboard - chain: Your required viem chain. - rpcUrl - optional

signer - optional: A signer from an external auth provider (metamask...) that will control the account

Example

"use client";

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

import { ConnectProvider } from "@cometh/connect-react-hooks";
import { arbitrumSepolia } from "viem/chains";

const queryClient = new QueryClient();

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

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 = "https://arbitrum-sepolia.blockpi.network/v1/rpc/public";

const networksConfig = [
    {
        chain: arbitrumSepolia,
        bundlerUrl,
        paymasterUrl,
        rpcUrl
    },
];


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