token count example component

src/app/liquidity-party.json

@@ -0,0 +1,6 @@
+{
+  "31337": {
+    "IPartyPlanner": "0xB35D3C9b9f2Fd72FAAb282E8Dd56da31FAA30E3d",
+    "IPartyPoolViewer": "0x238213078DbD09f2D15F4c14c02300FA1b2A81BB"
+  }
+}

src/components/token-count-display.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { usePublicClient } from 'wagmi';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {useEffect, useState} from 'react';
+import {usePublicClient} from 'wagmi';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import chainInfo from '@/app/liquidity-party.json';
 import IPartyPlannerABI from '@/contracts/IPartyPlannerABI';
 
-const PARTY_PLANNER_ADDRESS = '0xB35D3C9b9f2Fd72FAAb282E8Dd56da31FAA30E3d' as const;
 
 export function TokenCountDisplay() {
   const publicClient = usePublicClient();
@@ -33,8 +33,10 @@ export function TokenCountDisplay() {
         setError(null);
 
         // In viem 2.x, readContract is a method on the client
-        const count = await publicClient.readContract({
-          address: PARTY_PLANNER_ADDRESS,
+        const chainId = await publicClient.getChainId()
+        const address = chainInfo[chainId.toString()]?.IPartyPlanner;
+        const count = !address ? BigInt(0) : await publicClient.readContract({
+          address,
           abi: IPartyPlannerABI,
           functionName: 'tokenCount', // Fully typed from ABI
         });
@@ -85,9 +87,6 @@ export function TokenCountDisplay() {
             <p className="text-sm text-muted-foreground">
               Total tokens in Party Planner
             </p>
-            <p className="text-xs text-muted-foreground break-all">
-              Contract: {PARTY_PLANNER_ADDRESS}
-            </p>
           </div>
         )}
       </CardContent>