[Optimization]: Performance, Security & UX Improvements

[Eli5DeFi]

Summary

Targeted optimization pass across the Voidborne StoryEngine codebase covering backend performance, a security fix, a silent bug, UX improvements, and code quality cleanup.

---

🚨 Critical Fixes

1. DB Connection Pool Leak (3 routes)

Files: betting/trending, betting/recent, betting/platform-stats

// BEFORE (creates new pool on every serverless invocation)
const prisma = new PrismaClient()
// ...
} finally { await prisma.() }

// AFTER (shared singleton — stable connections)
import { prisma } from '@voidborne/database'

Impact: Under load this was exhausting Supabase's 25-connection free tier. Now uses the shared singleton.

2. SQL Injection — platform-stats route

// BEFORE (user-derived string interpolated into raw SQL)
prisma.$queryRawUnsafe(`... AND b."createdAt" >= '${timeframeCutoff}'`)

// AFTER (parameterized)
prisma.$queryRaw`... AND b."createdAt" >= ${new Date(timeframeCutoff)}`

3. walletAddress vs userId Mismatch

File: betting/place/route.ts

The frontend sent walletAddress but the route extracted userId — silent failure. Route now accepts walletAddress, upserts the user, and resolves userId correctly.

---

⚡ Performance

4. Add Caching to /api/betting/pools/[poolId]

Most-hit endpoint had zero caching. Now:

• Open pools: 15s in-memory + CDN (s-maxage=15, stale-while-revalidate=30)
• Closed/resolved: 5 min CDN (s-maxage=300, stale-while-revalidate=600)
• X-Cache: HIT/MISS header for observability

5. Weekly Champions: JS Aggregation → DB GROUP BY

getWeeklyChampions was loading ALL winning bets from the last 7 days into Node memory, running Map reduce, then doing an N+1 user fetch.

Now: single $queryRaw JOIN+GROUP BY — one round-trip, zero JS aggregation.

---

🎨 Frontend / UX

6. Hero.tsx — Remove CLS Flash

Was using useState(mounted) + if (!mounted) return null on a component with no hydration-sensitive state. This caused layout shift on first paint.

7. Navbar — <a> → Next.js <Link>

All nav items used raw <a href> which triggers full page reloads. Replaced with <Link> for SPA client-side routing.

8. Scroll Handler — Passive + Memoized

Added { passive: true } to the scroll listener (frees main thread during scroll) and wrapped in useCallback to avoid re-creation on re-renders.

9. BettingInterface — ARIA Labels

Added aria-label and aria-describedby to the bet amount input for accessibility.

---

🧹 Code Quality

10. Replace console.* with logger Utility — 37 API routes

The logger util already existed but wasn't used. Now console.error/warn/log across all 37 API route files has been replaced. In production (removeConsole is already in next.config.js), this also reduces bundle size.

11. next.config.js

• Added @tanstack/react-query to optimizePackageImports (tree-shaking)
• Added optimisticClientCache: true for faster perceived link navigation

---

Metrics (Before → After)

Metric	Before	After
Pool detail API (open, repeat req)	DB hit every req	Cached 15s (CDN+memory)
Weekly champions query	N bets rows in memory + N+1 user fetch	1 SQL query
Supabase connections (serverless)	New pool per invocation (leak)	Shared singleton
Hero LCP	Flash → paint (CLS)	Direct paint (no flash)
Nav click	Full page reload	SPA navigation
First Load JS shared	88.6 kB	88.6 kB (no regression)
TypeScript errors	0	0
Build	✅	✅

---

Testing

• pnpm type-check — 0 errors
• pnpm build — exits 0, all routes compiled
• Lighthouse score (manual, needs deploy)
• Mobile responsiveness check
• End-to-end bet placement flow

Impact

• Cost: Fewer DB connections → won't exhaust Supabase free tier
• Speed: Pool detail endpoint served from cache on repeat requests
• Security: SQL injection surface eliminated
• UX: No more CLS flash on hero, SPA nav everywhere, accessible bet input
• Reliability: Bet placement no longer silently fails for new wallet users

Do NOT merge without manual QA on the betting flow.