fix: resolve QueryProvider and SocketProvider client/server boundary …

src/app/components/PriceFeedCard.tsx

@@ -108,6 +108,7 @@ function formatTime(iso: string): string {
 const PriceFeedCard: React.FC<PriceFeedCardProps> = ({
   refreshInterval = 30_000,
   enableWebSocket = true,
+  assetId,
 }) => {
   const mounted = useMounted();
   const [data, setData] = useState<PriceFeedData | null>(null);
@@ -123,7 +124,6 @@ const PriceFeedCard: React.FC<PriceFeedCardProps> = ({
   // Granular context subscriptions — each hook only re-renders this component
   // when its specific slice changes, not on every unrelated socket event.
   const { isConnected, error: wsError } = useSocketConnection();
-  const { lastUpdate: wsUpdate } = useSocketData();
 
   const isPageVisible = usePageVisibility();
 

src/app/components/client/LivePrices.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import React, { useEffect, useState, memo } from 'react'
-import { useSocket } from '../../hooks/useSocket'
+import React, { memo } from "react"
+import { useAssetPrice } from "../../hooks/useAssetPrice"
+import { useSocketConnection } from "../providers/SocketProvider"
 
 const CHART_HISTORY_LIMIT = 150;
 
@@ -50,18 +51,19 @@ function LivePrices({ initialData }: any) {
 
   return (
     <div>
-      <h2>Live Prices</h2>
-      <div className={`text-xs mb-2 ${isConnected ? 'text-green-400' : 'text-yellow-400'}`}>
-        {isConnected ? 'WebSocket Connected' : 'WebSocket Disconnected'}
+      <h2 className="text-sm font-bold mb-2">Live Prices</h2>
+      <div className={`text-xs mb-2 ${isConnected ? "text-green-400" : "text-yellow-400"}`}>
+        {isConnected ? "WebSocket Connected" : "WebSocket Disconnected"}
       </div>
       {error && <div className="text-red-400 text-xs mb-2">Error: {error}</div>}
-      {data?.map((p: PriceData) => (
-        <div key={p.symbol}>
-          {p.symbol}: {p.price}
-        </div>
-      ))}
+
+      <div className="space-y-1">
+        {initialAssets.map((id: string) => (
+          <PriceRow key={id} assetId={id} />
+        ))}
+      </div>
     </div>
   )
 }
 
-export default memo(LivePrices);
+export default memo(LivePrices)

src/app/components/providers/QueryProvider.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { QueryClientProvider } from '@tanstack/react-query'
 import { queryClient } from '../../lib/queryClient'
 

src/app/globals.css

@@ -3,6 +3,8 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --font-geist-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-geist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /* Dark theme — class applied by next-themes */

src/app/hooks/useAssetPrice.ts

@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useSocketActions, useSocketData } from "../components/providers/SocketProvider"
+
+interface AssetPrice {
+  price?: number
+  timestamp?: number
+}
+
+/**
+ * Subscribe to a single asset and expose a localized price state.
+ * This hook only updates its internal state when the incoming WS tick
+ * targets `assetId`, avoiding re-renders when unrelated assets change.
+ */
+export function useAssetPrice(assetId: string): AssetPrice {
+  const { subscribeToAsset, unsubscribeFromAsset } = useSocketActions()
+  const { lastUpdate } = useSocketData()
+
+  const [state, setState] = useState<AssetPrice>({ price: undefined, timestamp: undefined })
+
+  // Subscribe once on mount, and unsubscribe on unmount.
+  useEffect(() => {
+    subscribeToAsset(assetId)
+    return () => {
+      unsubscribeFromAsset(assetId)
+    }
+  }, [assetId, subscribeToAsset, unsubscribeFromAsset])
+
+  // Update local state only when the global `lastUpdate` refers to our asset.
+  useEffect(() => {
+    if (!lastUpdate) return
+    if (lastUpdate.assetPair === assetId) {
+      setState({ price: lastUpdate.price, timestamp: lastUpdate.timestamp })
+    }
+  }, [assetId, lastUpdate])
+
+  return state
+}

src/app/layout.tsx

@@ -1,6 +1,5 @@
 import "@/config/env";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "./components/ThemeProvider";
 import { ProgressBarProvider } from "./components/TopLoadingBar";
@@ -10,20 +9,6 @@ import { QueryProvider } from "./components/providers/QueryProvider";
 import Script from "next/script";
 import { SvgSprite } from "@/components/icons";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-  display: "swap",
-  weight: ["400", "700"]
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-  display: "swap",
-  weight: ["400", "700"]
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",