token count example component

src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { SwapForm } from '@/components/swap-form';
+import { TokenCountDisplay } from '@/components/token-count-display';
 
 export default function HomePage() {
   const { t } = useTranslation();
@@ -16,7 +17,10 @@ export default function HomePage() {
         </TabsList>
 
         <TabsContent value="swap">
+          <div className="space-y-6">
+            <TokenCountDisplay />
             <SwapForm />
+          </div>
         </TabsContent>
 
         <TabsContent value="stake">

src/components/token-count-display.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePublicClient } from 'wagmi';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import IPartyPlannerABI from '@/contracts/IPartyPlannerABI';
+
+const PARTY_PLANNER_ADDRESS = '0xB35D3C9b9f2Fd72FAAb282E8Dd56da31FAA30E3d' as const;
+
+export function TokenCountDisplay() {
+  const publicClient = usePublicClient();
+  const [mounted, setMounted] = useState(false);
+  const [tokenCount, setTokenCount] = useState<bigint | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Handle hydration for Next.js static export
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const fetchTokenCount = async () => {
+      if (!publicClient) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        // In viem 2.x, readContract is a method on the client
+        const count = await publicClient.readContract({
+          address: PARTY_PLANNER_ADDRESS,
+          abi: IPartyPlannerABI,
+          functionName: 'tokenCount', // Fully typed from ABI
+        });
+
+        setTokenCount(count);
+      } catch (err) {
+        console.error('Error reading token count:', err);
+        setError(err instanceof Error ? err.message : 'Failed to read token count');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTokenCount();
+  }, [publicClient, mounted]);
+
+  // Don't render until client-side hydration is complete
+  if (!mounted) {
+    return (
+      <Card className="w-full max-w-md mx-auto">
+        <CardHeader>
+          <CardTitle>Party Planner Token Count</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Loading...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle>Party Planner Token Count</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {loading && (
+          <p className="text-muted-foreground">Loading token count...</p>
+        )}
+
+        {error && (
+          <p className="text-destructive">Error: {error}</p>
+        )}
+
+        {tokenCount !== null && !loading && (
+          <div className="space-y-2">
+            <p className="text-3xl font-bold">{tokenCount.toString()}</p>
+            <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>
+    </Card>
+  );
+}