adding token prices

src/components/stake-form.tsx

@@ -345,8 +345,15 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
                             <span className="font-medium">{pool.symbol}</span>
                             <span className="text-xs text-muted-foreground">{pool.name}</span>
                           </div>
-                          {pool.price && (
+                          {(pool.price || pool.tvl) && (
-                            <span className="text-sm font-medium text-muted-foreground">{pool.price}</span>
+                            <div className="flex flex-col items-end">
+                              {pool.price && (
+                                <span className="text-sm font-medium text-muted-foreground">{pool.price}</span>
+                              )}
+                              {pool.tvl && (
+                                <span className="text-xs text-muted-foreground">TVL: {pool.tvl}</span>
+                              )}
+                            </div>
                           )}
                         </div>
                       </button>
@@ -400,8 +407,15 @@ export function StakeForm({ defaultMode = 'stake' }: StakeFormProps) {
                             <span className="font-medium">{pool.symbol}</span>
                             <span className="text-xs text-muted-foreground">{pool.name}</span>
                           </div>
-                          {pool.price && (
+                          {(pool.price || pool.tvl) && (
-                            <span className="text-sm font-medium text-muted-foreground">{pool.price}</span>
+                            <div className="flex flex-col items-end">
+                              {pool.price && (
+                                <span className="text-sm font-medium text-muted-foreground">{pool.price}</span>
+                              )}
+                              {pool.tvl && (
+                                <span className="text-xs text-muted-foreground">TVL: {pool.tvl}</span>
+                              )}
+                            </div>
                           )}
                         </div>
                       </button>

src/hooks/usePartyPlanner.ts

@@ -9,6 +9,19 @@ import IPartyPoolViewerABI from '@/contracts/IPartyPoolViewerABI';
 import IPartyInfoABI from '@/contracts/IPartyInfoABI';
 import { ERC20ABI } from '@/contracts/ERC20ABI';
 
+// Helper function to format large numbers with K, M, B suffixes
+function formatTVL(value: number): string {
+  if (value >= 1_000_000_000) {
+    return `$${(value / 1_000_000_000).toFixed(2)}B`;
+  } else if (value >= 1_000_000) {
+    return `$${(value / 1_000_000).toFixed(2)}M`;
+  } else if (value >= 1_000) {
+    return `$${(value / 1_000).toFixed(2)}K`;
+  } else {
+    return `$${value.toFixed(2)}`;
+  }
+}
+
 export function useGetAllTokens(offset: number = 0, limit: number = 100) {
   const publicClient = usePublicClient();
   const [mounted, setMounted] = useState(false);
@@ -334,6 +347,7 @@ export interface PoolDetails {
   symbol: string;
   tokens: readonly `0x${string}`[];
   price?: string; // Formatted price string
+  tvl?: string; // Formatted TVL string (e.g., "$1.2M")
 }
 
 export function useGetAllPools(offset: number = 0, limit: number = 100) {
@@ -443,12 +457,45 @@ export function useGetAllPools(offset: number = 0, limit: number = 100) {
                 priceStr = undefined;
               }
 
+              // Calculate TVL (approximate by getting first token balance and doubling it)
+              let tvlStr: string | undefined;
+              try {
+                if (tokens && tokens.length > 0) {
+                  const firstTokenAddress = tokens[0];
+
+                  // Get token decimals and balance
+                  const [decimals, balance] = await Promise.all([
+                    publicClient.readContract({
+                      address: firstTokenAddress as `0x${string}`,
+                      abi: ERC20ABI,
+                      functionName: 'decimals',
+                    }) as Promise<number>,
+                    publicClient.readContract({
+                      address: firstTokenAddress as `0x${string}`,
+                      abi: ERC20ABI,
+                      functionName: 'balanceOf',
+                      args: [poolAddress],
+                    }) as Promise<bigint>,
+                  ]);
+
+                  // Convert balance to float and double it for total TVL approximation
+                  const tokenBalance = Number(balance) / Math.pow(10, decimals);
+                  const approximateTVL = tokenBalance * 3;
+
+                  tvlStr = formatTVL(approximateTVL);
+                }
+              } catch (err) {
+                console.error(`Error fetching TVL for ${poolAddress}:`, err);
+                tvlStr = undefined;
+              }
+
               details.push({
                 address: poolAddress,
                 name: name as string,
                 symbol: symbol as string,
                 tokens: tokens as readonly `0x${string}`[],
                 price: priceStr,
+                tvl: tvlStr,
               });
             }
           } catch (err) {