Skip to main content

​
Overview

The usePolygonKit hook is the main hook for accessing wallet connection state, address, chain information, and wallet actions.

​
Usage

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

function MyComponent() {
  const { address, isConnected, chain, balance, connect, disconnect } = usePolygonKit();

  return (
    <div>
      {isConnected ? (
        <p>Connected: {address}</p>
      ) : (
        <button onClick={connect}>Connect</button>
      )}
    </div>
  );
}

​
Return Values

​
address
Address | undefined
The connected wallet address
​
isConnected
boolean
Whether a wallet is connected
​
chain
Chain | undefined
The current chain the wallet is connected to
​
balance
Balance | undefined
The wallet’s native token balance
​
connect
() => void
Function to open the wallet connection modal
​
disconnect
() => void
Function to disconnect the wallet
​
connectors
readonly Connector[]
Available wallet connectors

​
Examples

​
Display Wallet Info

function WalletInfo() {
  const { address, isConnected, chain, balance } = usePolygonKit();

  if (!isConnected) {
    return <p>Not connected</p>;
  }

  return (
    <div>
      <p>Address: {address}</p>
      <p>Chain: {chain?.name}</p>
      <p>Balance: {balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}

​
Conditional Rendering

function App() {
  const { isConnected } = usePolygonKit();

  return (
    <div>
      {isConnected ? (
        <Dashboard />
      ) : (
        <LandingPage />
      )}
    </div>
  );
}

​
Programmatic Connection

function CustomConnectButton() {
  const { connect, disconnect, isConnected } = usePolygonKit();

  return (
    <button onClick={isConnected ? disconnect : connect}>
      {isConnected ? 'Disconnect' : 'Connect'}
    </button>
  );
}

​
Check Specific Chain

import { polygon } from 'wagmi/chains';

function PolygonOnlyContent() {
  const { chain, isConnected } = usePolygonKit();

  if (!isConnected) {
    return <p>Connect your wallet</p>;
  }

  if (chain?.id !== polygon.id) {
    return <p>Please switch to Polygon network</p>;
  }

  return <div>{/* Polygon-specific content */}</div>;
}

​
Type Safety

The hook is fully typed for TypeScript: 
import type { Address } from 'viem';

function Component() {
  const { address } = usePolygonKit();

  // address is typed as Address | undefined
  if (address) {
    // address is typed as Address here
    console.log(address.toLowerCase());
  }
}