ETag 304 for polling APIs, fix false new market alerts

- /api/markets: server-side ETag with MD5 hash, returns 304 when data
  unchanged — eliminates ~1-3MB JSON parse per poll on mobile WebViews
- /api/smart-money: same ETag/304 mechanism for all response types
- Client fetchData/fetchSmartMoney: send If-None-Match, skip JSON parse
  on 304 — reduces sustained memory pressure that crashed Binance Wallet
- Fix false new market alerts: old markets cycling open→closed→open were
  misdetected as new; now requires createdAt after session start time
- Move language setting above auto-refresh in Settings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: AmazingAng

src/app/api/markets/route.ts

@@ -1,32 +1,59 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { readMarketsFromDb } from "@/lib/sync";
 import { getDb } from "@/lib/db";
 import { apiError } from "@/lib/apiError";
+import { createHash } from "crypto";
 
 export const dynamic = "force-dynamic";
 
-export async function GET() {
+let cachedBody: string | null = null;
+let cachedEtag: string | null = null;
+let cacheTs = 0;
+const CACHE_TTL = 10_000; // 10s — matches Cache-Control max-age
+
+export async function GET(request: NextRequest) {
   try {
-    const { mapped, unmapped } = readMarketsFromDb();
-
-    // Get last successful sync time
-    let lastSync: string | null = null;
-    try {
-      const db = getDb();
-      const row = db
-        .prepare(
-          `SELECT finished_at FROM sync_log WHERE status = 'ok' ORDER BY id DESC LIMIT 1`
-        )
-        .get() as { finished_at: string } | undefined;
-      if (row) lastSync = row.finished_at;
-    } catch {
-      // ignore
+    const now = Date.now();
+
+    // Rebuild cached response body if stale
+    if (!cachedBody || now - cacheTs > CACHE_TTL) {
+      const { mapped, unmapped } = readMarketsFromDb();
+
+      let lastSync: string | null = null;
+      try {
+        const db = getDb();
+        const row = db
+          .prepare(
+            `SELECT finished_at FROM sync_log WHERE status = 'ok' ORDER BY id DESC LIMIT 1`
+          )
+          .get() as { finished_at: string } | undefined;
+        if (row) lastSync = row.finished_at;
+      } catch {
+        // ignore
+      }
+
+      cachedBody = JSON.stringify({ mapped, unmapped, lastSync });
+      cachedEtag = `"${createHash("md5").update(cachedBody).digest("hex").slice(0, 16)}"`;
+      cacheTs = now;
+    }
+
+    // Return 304 if client already has this version
+    const ifNoneMatch = request.headers.get("if-none-match");
+    if (ifNoneMatch && ifNoneMatch === cachedEtag) {
+      return new NextResponse(null, {
+        status: 304,
+        headers: { ETag: cachedEtag! },
+      });
     }
 
-    return NextResponse.json(
-      { mapped, unmapped, lastSync },
-      { headers: { "Cache-Control": "public, max-age=10, stale-while-revalidate=30" } }
-    );
+    return new NextResponse(cachedBody, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=10, stale-while-revalidate=30",
+        ETag: cachedEtag!,
+      },
+    });
   } catch (err) {
     return apiError("markets", "Error reading from DB", 500, err);
   }

src/app/api/smart-money/route.ts

@@ -1,10 +1,11 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { getDb } from "@/lib/db";
 import { fetchMarketTrades } from "@/lib/smartMoney";
 import type { SmartWallet, WhaleTrade } from "@/types";
 import { SingleCache } from "@/lib/apiCache";
 import { apiError } from "@/lib/apiError";
 import { aggregateFlowByCategory, type CategoryFlow } from "@/lib/flowAnalysis";
+import { createHash } from "crypto";
 
 interface LeaderboardRow {
   address: string;
@@ -36,6 +37,31 @@ const tradeCache = new SingleCache<{ whaleTrades: WhaleTrade[]; smartTrades: Wha
 const flowCache = new SingleCache<CategoryFlow[]>(120_000); // 2 min cache
 let bgFetchInProgress = false;
 
+// ETag cache per response key
+const etagCache = new Map<string, { body: string; etag: string; ts: number }>();
+const ETAG_TTL = 10_000;
+
+function cachedJsonResponse(key: string, data: unknown, request: NextRequest): NextResponse {
+  const now = Date.now();
+  let entry = etagCache.get(key);
+  if (!entry || now - entry.ts > ETAG_TTL) {
+    const body = JSON.stringify(data);
+    const etag = `"${createHash("md5").update(body).digest("hex").slice(0, 16)}"`;
+    entry = { body, etag, ts: now };
+    etagCache.set(key, entry);
+  }
+
+  const ifNoneMatch = request.headers.get("if-none-match");
+  if (ifNoneMatch && ifNoneMatch === entry.etag) {
+    return new NextResponse(null, { status: 304, headers: { ETag: entry.etag } });
+  }
+
+  return new NextResponse(entry.body, {
+    status: 200,
+    headers: { "Content-Type": "application/json", ETag: entry.etag },
+  });
+}
+
 function mapApiTrade(
   t: Awaited<ReturnType<typeof fetchMarketTrades>>[number],
   smartAddresses: Set<string>,
@@ -153,7 +179,7 @@ function readTradesFromDb(
   };
 }
 
-export async function GET(request: Request) {
+export async function GET(request: NextRequest) {
   try {
     const db = getDb();
     const { searchParams } = new URL(request.url);
@@ -165,7 +191,7 @@ export async function GET(request: Request) {
         flows = aggregateFlowByCategory(db, 24);
         flowCache.set(flows);
       }
-      return NextResponse.json({ flows });
+      return cachedJsonResponse("flow", { flows }, request);
     }
 
     const period = searchParams.get("period") || "all";
@@ -210,7 +236,7 @@ export async function GET(request: Request) {
     // Fast path: only leaderboard data needed (period toggle)
     const leaderboardOnly = searchParams.get("leaderboardOnly") === "1";
     if (leaderboardOnly) {
-      return NextResponse.json({ leaderboard });
+      return cachedJsonResponse(`lb-${timePeriod}`, { leaderboard }, request);
     }
 
     // Build smart wallet address set from ALL tracked wallets (PnL >= $100k)
@@ -272,12 +298,14 @@ export async function GET(request: Request) {
       .prepare(`SELECT MAX(updated_at) as last_sync FROM smart_wallets`)
       .get() as { last_sync: string | null } | undefined;
 
-    return NextResponse.json({
+    const responseData = {
       leaderboard,
       recentTrades: whaleTrades,
       smartTrades,
       lastSync: walletMeta?.last_sync || null,
-    });
+    };
+
+    return cachedJsonResponse(`sm-${timePeriod}`, responseData, request);
   } catch (err) {
     return apiError("smart-money", "Failed to fetch smart money data", 500, err);
   }

src/app/page.tsx

@@ -392,38 +392,38 @@ export default function Home() {
   const seenSignalIds = useRef<Set<string>>(new Set());
   const seenMarketIds = useRef<Set<string>>(new Set());
   const isFirstLoad = useRef(true);
+  const sessionStartTime = useRef(Date.now());
   const lbCacheRef = useRef<Record<string, import("@/types").SmartWallet[]>>({});
 
-  // Quick fingerprint to detect if market data actually changed
-  const dataFingerprintRef = useRef("");
-  const marketFingerprint = (arr: ProcessedMarket[]) => {
-    // count + first/last ID + sum of probs (fast, no allocation)
-    if (arr.length === 0) return "0";
-    let probSum = 0;
-    for (let i = 0; i < arr.length; i++) probSum += (arr[i].prob ?? 0);
-    return `${arr.length}:${arr[0].id}:${arr[arr.length - 1].id}:${probSum.toFixed(2)}`;
-  };
+  // ETag for /api/markets — skip JSON parse when data unchanged (saves ~1-3MB per poll on mobile)
+  const marketsEtagRef = useRef<string | null>(null);
 
   const fetchData = useCallback(async (signal?: AbortSignal) => {
     const { setMapped, setUnmapped, setLoading, setDataMode, setLastSyncTime, setSignals, setNewMarkets, setLastRefresh } = useMarketStore.getState();
     setLoading(true);
     setNewMarkets([]);
     try {
-      const res = await fetch("/api/markets", { signal });
+      const headers: HeadersInit = {};
+      if (marketsEtagRef.current) headers["If-None-Match"] = marketsEtagRef.current;
+      const res = await fetch("/api/markets", { signal, headers });
+
+      // 304 Not Modified — data unchanged, skip parse entirely
+      if (res.status === 304) {
+        setLoading(false);
+        setLastRefresh(new Date().toLocaleTimeString());
+        return;
+      }
+
       if (!res.ok) throw new Error("API error");
+      const etag = res.headers.get("etag");
+      if (etag) marketsEtagRef.current = etag;
       const data = await res.json();
       const m: ProcessedMarket[] = data.mapped || [];
       const u: ProcessedMarket[] = data.unmapped || [];
 
       if (m.length > 0 || u.length > 0) {
-        // Skip store update if data hasn't changed — avoids re-render + GeoJSON rebuild
-        const fp = marketFingerprint(m) + "|" + marketFingerprint(u);
-        const changed = fp !== dataFingerprintRef.current;
-        dataFingerprintRef.current = fp;
-        if (changed) {
-          setMapped(m);
-          setUnmapped(u);
-        }
+        setMapped(m);
+        setUnmapped(u);
         setDataMode("live");
         setRefreshError(false);
         if (data.lastSync) setLastSyncTime(data.lastSync);
@@ -444,11 +444,16 @@ export default function Home() {
           for (const item of all) seenMarketIds.current.add(item.id);
           isFirstLoad.current = false;
         } else {
-          const fresh = all.filter(
-            (item) => !seenMarketIds.current.has(item.id)
-          );
+          // Only treat as "new" if: 1) not seen before AND 2) created after session start
+          // This prevents old markets that re-enter the active set from triggering alerts
+          const fresh = all.filter((item) => {
+            if (seenMarketIds.current.has(item.id)) return false;
+            seenMarketIds.current.add(item.id);
+            if (!item.createdAt) return false;
+            const created = new Date(item.createdAt).getTime();
+            return created > sessionStartTime.current;
+          });
           if (fresh.length > 0) {
-            for (const item of fresh) seenMarketIds.current.add(item.id);
             setNewMarkets(fresh);
           }
         }
@@ -469,6 +474,7 @@ export default function Home() {
     setLoading(false);
   }, []);
 
+  const smartMoneyEtagRef = useRef<string | null>(null);
   const fetchSmartMoney = useCallback(async (periodOrSignal?: LeaderboardPeriod | AbortSignal, leaderboardOnly?: boolean) => {
     // Support being called from useVisibilityPolling (signal) or directly (period)
     let period: LeaderboardPeriod | undefined;
@@ -482,8 +488,13 @@ export default function Home() {
       const sm = useSmartMoneyStore.getState();
       const p = period ?? sm.leaderboardPeriod;
       const params = `period=${p}${leaderboardOnly ? "&leaderboardOnly=1" : ""}`;
-      const res = await fetch(`/api/smart-money?${params}`, { signal });
+      const headers: HeadersInit = {};
+      if (!leaderboardOnly && smartMoneyEtagRef.current) headers["If-None-Match"] = smartMoneyEtagRef.current;
+      const res = await fetch(`/api/smart-money?${params}`, { signal, headers });
+      if (res.status === 304) return; // data unchanged
       if (!res.ok) return;
+      const etag = res.headers.get("etag");
+      if (etag && !leaderboardOnly) smartMoneyEtagRef.current = etag;
       const data = await res.json();
       const lb = data.leaderboard || [];
       lbCacheRef.current[p] = lb;

src/components/SettingsModal.tsx

@@ -272,6 +272,22 @@ function GeneralTab({
         </div>
       </div>
 
+      {/* Language */}
+      <div className="settings-section">
+        <span className="section-label">{t("settings.language")}</span>
+        <div className="settings-pill-bar">
+          {(["en", "zh"] as Locale[]).map((l) => (
+            <button
+              key={l}
+              onClick={() => setLocale(l)}
+              className={`settings-pill${locale === l ? " active" : ""}`}
+            >
+              {l === "en" ? "English" : "中文"}
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* Auto-refresh */}
       <div className="settings-section">
         <span className="section-label">{t("settings.autoRefresh")}</span>
@@ -327,22 +343,6 @@ function GeneralTab({
         <span className="section-label">{t("settings.theme")}</span>
         <div className="settings-info-value">{t("settings.themeDark")}</div>
       </div>
-
-      {/* Language */}
-      <div className="settings-section">
-        <span className="section-label">{t("settings.language")}</span>
-        <div className="settings-pill-bar">
-          {(["en", "zh"] as Locale[]).map((l) => (
-            <button
-              key={l}
-              onClick={() => setLocale(l)}
-              className={`settings-pill${locale === l ? " active" : ""}`}
-            >
-              {l === "en" ? "English" : "中文"}
-            </button>
-          ))}
-        </div>
-      </div>
     </div>
   );
 }