search

Getting Started

hashtag
Installation

Install comp-kit and its peer dependencies. I am using yarn as the package manager, you can use the package manager of your choice.

npm install @nazeeh2000/comp-kit viem @stitches/react @walletconnect/modal @walletconnect/ethereum-provider

hashtag
Configuration

Once you're done with the installation of the dependencies, you need to set up KitProvider at the root of your application. This can be either in your layout.tsx (if you're using Next.js 13 app directory), _app.tsx (if you're using old pages directory of Next.js) or App.tsx depending on the framework you're using.

Below is an example of the Next.js 13 app directory. For that, in your layout.tsx file, wrap your children with KitProvider imported from @nazeeh2000/comp-kit

layout.tsx
'use client'
import { KitProvider } from "@nazeeh2000/comp-kit";
import "./globals.css";
import { Inter } from "next/font/google";
import { arbitrum, mainnet, polygon } from "viem/chains";

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <KitProvider
          projectId="" // WallectConnect projectId
          supportedChains={[mainnet, polygon, arbitrum]}
        >
          {children}
        </KitProvider>
      </body>
    </html>
  );
}

You have to pass two required props to KitProvider i.e. projectId and supportedChains.

  • projectId refers to the id you get from the WalletConnect dashboard

  • supportedChains accepts an array of the chains you want to support for your dapp. These chains have to be imported from viem/chains.

PreviousIntroductionNextClients

Last updated