# 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 ](https://docs.cometh.io/advanced/other-signers-auth-providers)(metamask...) that will control the account

## Example

<pre class="language-typescript"><code class="lang-typescript"><strong>"use client";
</strong>
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 (
        &#x3C;html lang="en">
            &#x3C;QueryClientProvider client={queryClient}>
                &#x3C;ConnectProvider
                    config={{
                        apiKey,
                        networksConfig
                    }}
                    queryClient={queryClient}
                >
                    &#x3C;body className={inter.className}>{children}&#x3C;/body>
                &#x3C;/ConnectProvider>
            &#x3C;/QueryClientProvider>
        &#x3C;/html>
    );
}
</code></pre>