PolygonKitProvider

Configure the PolygonKit provider for your application

Overview

The PolygonKitProvider is the root component that provides blockchain connectivity and state management to your entire application. It sets up wagmi, React Query, and WalletConnect integration.

Basic Usage

Wrap your application with the provider:

import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';

function App() {
  return (
    <PolygonKitProvider>
      {/* Your app components */}
    </PolygonKitProvider>
  );
}

Configuration Options

The provider accepts an optional config prop for customization:

interface PolygonKitConfig {
  chains?: Chain[];
  projectId?: string;
  appName?: string;
  appDescription?: string;
  appUrl?: string;
  appIcons?: string[];
}

chains

An array of blockchain networks your app supports. Defaults to Polygon PoS, Polygon Amoy, and Polygon zkEVM.

import { polygon, polygonAmoy, polygonZkEVM } from 'wagmi/chains';

<PolygonKitProvider
  config={{
    chains: [polygon, polygonAmoy, polygonZkEVM],
  }}
>
  <App />
</PolygonKitProvider>

Available Polygon Chains

• polygon (137) - Polygon PoS Mainnet
• polygonAmoy (80002) - Polygon Amoy Testnet
• polygonZkEVM (1101) - Polygon zkEVM Mainnet
• polygonZkEvmTestnet (1442) - Polygon zkEVM Testnet
• polygonMumbai (80001) - Polygon Mumbai Testnet (deprecated)

projectId

Your WalletConnect Project ID. Required for WalletConnect functionality.

<PolygonKitProvider
  config={{
    projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  }}
>
  <App />
</PolygonKitProvider>

Get a Project ID

Learn how to create a WalletConnect Project ID

appName

The name of your application displayed in wallet connection modals.

<PolygonKitProvider
  config={{
    appName: 'My Polygon DApp',
  }}
>
  <App />
</PolygonKitProvider>

appDescription

A description of your application shown to users.

<PolygonKitProvider
  config={{
    appDescription: 'A decentralized application built on Polygon',
  }}
>
  <App />
</PolygonKitProvider>

appUrl

Your application’s URL.

<PolygonKitProvider
  config={{
    appUrl: 'https://myapp.com',
  }}
>
  <App />
</PolygonKitProvider>

appIcons

An array of icon URLs for your application.

<PolygonKitProvider
  config={{
    appIcons: ['https://myapp.com/logo.png'],
  }}
>
  <App />
</PolygonKitProvider>

Complete Example

Here’s a fully configured provider:

import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';
import { polygon, polygonAmoy } from 'wagmi/chains';

function App() {
  return (
    <PolygonKitProvider
      config={{
        chains: [polygon, polygonAmoy],
        projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
        appName: 'My Polygon DApp',
        appDescription: 'A decentralized application built on Polygon',
        appUrl: 'https://myapp.com',
        appIcons: ['https://myapp.com/logo.png'],
      }}
    >
      {/* Your app components */}
    </PolygonKitProvider>
  );
}

Environment Variables

Store sensitive configuration in environment variables:

Next.js

.env.local

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_APP_NAME=My Polygon DApp
NEXT_PUBLIC_APP_URL=https://myapp.com

<PolygonKitProvider
  config={{
    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
    appName: process.env.NEXT_PUBLIC_APP_NAME,
    appUrl: process.env.NEXT_PUBLIC_APP_URL,
  }}
>
  <App />
</PolygonKitProvider>

Vite

.env

VITE_WALLETCONNECT_PROJECT_ID=your_project_id
VITE_APP_NAME=My Polygon DApp
VITE_APP_URL=https://myapp.com

<PolygonKitProvider
  config={{
    projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
    appName: import.meta.env.VITE_APP_NAME,
    appUrl: import.meta.env.VITE_APP_URL,
  }}
>
  <App />
</PolygonKitProvider>

Remix

.env

VITE_WALLETCONNECT_PROJECT_ID=your_project_id
VITE_APP_NAME=My Polygon DApp

<PolygonKitProvider
  config={{
    projectId: process.env.VITE_WALLETCONNECT_PROJECT_ID,
    appName: process.env.VITE_APP_NAME,
  }}
>
  <App />
</PolygonKitProvider>

Never commit .env files to version control. Add them to .gitignore to keep your credentials secure.

Default Configuration

If you don’t provide a config, PolygonKit uses these defaults:

{
  chains: [polygon, polygonAmoy, polygonZkEVM],
  projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5', // Default demo ID
  appName: 'PolygonKit App',
  appDescription: 'Your Polygon App',
  appUrl: 'https://polygon.technology',
  appIcons: ['https://avatars.githubusercontent.com/u/21101868'],
}

The default Project ID is for development only. Create your own for production apps.

React Query Configuration

PolygonKit uses TanStack React Query internally. The provider automatically sets up a QueryClient with sensible defaults:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      refetchOnWindowFocus: false,
    },
  },
});

Wagmi Configuration

The provider creates a wagmi config with:

• WalletConnect connector
• Injected wallet connector (MetaMask, etc.)
• Coinbase Wallet connector
• Public RPC transports for all chains

Best Practices

Use Environment Variables

Store your WalletConnect Project ID and other sensitive data in environment variables, not in your code.

Limit Chains

Only include the chains your app actually uses. This improves UX and reduces unnecessary network requests.

Provide Metadata

Set appName, appDescription, and appIcons to give users context about your app when connecting their wallet.

Test Multiple Frameworks

If supporting multiple frameworks (Next.js, Vite, Remix), test the provider configuration in each environment.

Troubleshooting

Provider not found error

Make sure PolygonKitProvider is wrapping your entire app at the root level, not inside specific pages or components.

Invalid Project ID

Verify your WalletConnect Project ID is correct and has not been revoked. Create a new one if needed.

Chains not switching

Ensure all chains you want to support are included in the chains array configuration.

Chain Configuration

Learn more about configuring chains

WalletConnect Setup

Set up WalletConnect Project ID