@devrongx/games 0.3.5 → 0.4.1

package/src/games/prematch-bets/PreMatchGame.tsx

@@ -4,7 +4,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence, useSpring, useTransform, useMotionValue } from "framer-motion";
-import { ChevronDown, Info, X, Play } from "lucide-react";
+import { ChevronDown, Info, X, Play, Send } from "lucide-react";
 import { IBetSummary, ILeaderboardEntry, IChallengeConfig, IUserBets, deriveParlayGroups, deriveMarketToParlay, calcDisplayReward, optionReward, calcParlayMultiplier } from "./config";
 import { OUTFIT, MARKET_ICONS, PointsIcon, SelectedCheck, AiInsightButton } from "./constants";
 import { useGamePopupStore } from "../../core/gamePopupStore";
@@ -37,10 +37,18 @@ interface PreMatchGameProps {
     leaderboardRows: ILeaderboardEntry[];
     /** Render only the markets section (no header/balance/leaderboard) — used for card preview */
     marketsOnly?: boolean;
+    /** Called when user taps Submit Bets. If provided, shows Submit button instead of Play. */
+    onSubmit?: () => Promise<void> | void;
+    /** Called when user taps "See Full Leaderboard" */
+    onViewLeaderboard?: () => void;
+    /** v1: parlays are cosmetic, shows "Coming in v2". Default = false (hides section) */
+    parlayEnabled?: boolean;
+    /** Whether a submit is in progress */
+    submitting?: boolean;
 }
 
 
-export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly }: PreMatchGameProps) => {
+export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOptionClick, onAmountSelect, betSummary, leaderboardRows, marketsOnly, onSubmit, onViewLeaderboard, parlayEnabled = false, submitting = false }: PreMatchGameProps) => {
     const { selectedCount, compoundMultiplier, totalEntry, compoundedReward, remainingBalance, riskPercent } = betSummary;
 
     const goTo = useGamePopupStore(s => s.goTo);
@@ -571,11 +579,36 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                     )}
                                 </AnimatePresence>
                             </div>
-                            {/* Right — play button stretches to match both lines, hidden until points are bet */}
+                            {/* Right — action button, hidden until points are bet */}
                             <AnimatePresence>
                                 {totalEntry > 0 && (() => {
                                     const spentPercent = totalEntry / config.startingBalance;
                                     const fillPercent = 5 + spentPercent * 95;
+
+                                    if (onSubmit) {
+                                        return (
+                                            <motion.button
+                                                onClick={onSubmit}
+                                                disabled={submitting}
+                                                className="relative rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center gap-1.5 px-3"
+                                                style={{ background: submitting ? "rgba(34,227,232,0.3)" : "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)", minWidth: 90, height: "100%" }}
+                                                initial={{ opacity: 0, width: 0 }}
+                                                animate={{ opacity: 1, width: "auto" }}
+                                                exit={{ opacity: 0, width: 0 }}
+                                                transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
+                                            >
+                                                {submitting ? (
+                                                    <span className="text-[10px] font-bold text-white/70" style={OUTFIT}>Submitting…</span>
+                                                ) : (
+                                                    <>
+                                                        <Send size={14} className="text-white" />
+                                                        <span className="text-[11px] font-bold text-white" style={OUTFIT}>Submit Bets</span>
+                                                    </>
+                                                )}
+                                            </motion.button>
+                                        );
+                                    }
+
                                     return (
                                         <motion.div
                                             className="relative w-[65px] rounded-xl overflow-hidden flex-shrink-0 flex items-center justify-center"
@@ -585,7 +618,6 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                             exit={{ opacity: 0, width: 0 }}
                                             transition={{ width: { duration: 0.4, ease: "easeOut", delay: 0.8 }, opacity: { duration: 0.3, delay: 1 } }}
                                         >
-                                            {/* Fill bar — spring-animated left to right */}
                                             <motion.div
                                                 className="absolute inset-y-0 left-0"
                                                 animate={{ width: `${fillPercent}%` }}
@@ -652,9 +684,16 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
 
                         {/* Combined Bets (Parlays) */}
                         <div className="mt-4">
-                            <p className="text-[9px] text-white/60 font-semibold uppercase tracking-wider mb-1" style={OUTFIT}>
-                                Combine for crazy multipliers
-                            </p>
+                            <div className="flex items-center gap-2 mb-1">
+                                <p className="text-[9px] text-white/60 font-semibold uppercase tracking-wider" style={OUTFIT}>
+                                    Combine for crazy multipliers
+                                </p>
+                                {!parlayEnabled && (
+                                    <span className="text-[7px] font-bold px-1.5 py-0.5 rounded-full" style={{ background: "rgba(153,69,255,0.15)", color: "#9945FF", border: "1px solid rgba(153,69,255,0.3)" }}>
+                                        Coming in v2
+                                    </span>
+                                )}
+                            </div>
                             <p className="text-[7px] text-white/30 font-medium mb-2.5" style={OUTFIT}>
                                 All must hit to win. You lose all if any one goes wrong.
                             </p>
@@ -828,6 +867,15 @@ export const PreMatchGame = ({ config, bets, onBetsChange, expandedPicker, onOpt
                                 </div>
                             ))}
                         </div>
+                        {onViewLeaderboard && leaderboardRows.length > 0 && (
+                            <button
+                                onClick={onViewLeaderboard}
+                                className="mt-2 w-full text-center text-[9px] font-semibold"
+                                style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+                            >
+                                See Full Leaderboard →
+                            </button>
+                        )}
                     </div>
 
                 </>

package/src/games/prematch-bets/PreMatchLive.tsx

@@ -0,0 +1,193 @@
+// @devrongx/games — games/prematch-bets/PreMatchLive.tsx
+// Live match view: shows challenge resolution progress + live leaderboard.
+// Pool status = CLOSED or RESOLVING.
+"use client";
+
+import { useEffect } from "react";
+import { CheckCircle2, Clock, ArrowRight, Radio } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT, MARKET_ICONS } from "./constants";
+import type { ITDPoolDetail, ITDMyEntryResponse, ITDLeaderboardEntry } from "../../pools/types";
+import { TDChallengeStatus, TDBetStatus } from "../../pools/types";
+
+interface PreMatchLiveProps {
+  config: IChallengeConfig;
+  poolId: number;
+  pool: ITDPoolDetail | null;
+  entryData: ITDMyEntryResponse | null;
+  rankings: ITDLeaderboardEntry[];
+  onRefresh: () => void;
+  onViewFullLeaderboard: () => void;
+}
+
+export function PreMatchLive({
+  config,
+  pool,
+  entryData,
+  rankings,
+  onRefresh,
+  onViewFullLeaderboard,
+}: PreMatchLiveProps) {
+  // Poll every 20s during live phase
+  useEffect(() => {
+    const id = setInterval(onRefresh, 20_000);
+    return () => clearInterval(id);
+  }, [onRefresh]);
+
+  const entry = entryData?.entry;
+  const myBets = entryData?.bets ?? [];
+
+  const challenges = pool?.challenges ?? config.markets.map((m, i) => ({
+    id: m.backendChallengeId ?? i,
+    question: m.question,
+    icon: m.icon,
+    accent_color: m.accent,
+    status: "open",
+    correct_option: null as string | null,
+    options: m.options.map((o) => ({ key: o.label.toLowerCase().replace(/\s+/g, "_"), label: o.label, odds: o.odds, entry: o.entry, risk: o.risk })),
+    category: m.category,
+    sort_order: i,
+    resolved_at: null as string | null,
+  }));
+
+  const resolvedCount = challenges.filter((c) => c.status === TDChallengeStatus.RESOLVED).length;
+  const totalCount = challenges.length;
+  const progressPct = totalCount > 0 ? Math.round((resolvedCount / totalCount) * 100) : 0;
+
+  const myRank = entry ? rankings.findIndex((r) => r.entry_id === entry.id) + 1 : null;
+  const miniRankings = rankings.slice(0, 5);
+
+  return (
+    <div className="w-full flex flex-col gap-4 px-4 pb-8">
+      {/* Live header */}
+      <div className="flex items-center gap-2 pt-5">
+        <div className="flex items-center gap-1">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#f83cc5] opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-[#f83cc5]" />
+          </span>
+          <span className="text-[11px] font-bold tracking-widest" style={{ color: "#f83cc5", fontFamily: "Barlow Condensed, sans-serif" }}>LIVE</span>
+        </div>
+        <span className="text-[14px] font-bold text-white" style={OUTFIT}>{config.matchTitle}</span>
+      </div>
+
+      {/* Balance + rank */}
+      {entry && (
+        <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
+          <div className="flex-1">
+            <p className="text-[9px] text-white/40 uppercase tracking-wide" style={OUTFIT}>Balance</p>
+            <p className="text-[18px] font-bold text-white" style={OUTFIT}>{entry.current_coins.toLocaleString()} pts</p>
+          </div>
+          {myRank !== null && myRank > 0 && (
+            <div className="text-right">
+              <p className="text-[9px] text-white/40 uppercase tracking-wide" style={OUTFIT}>Your Rank</p>
+              <p className="text-[18px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>#{myRank} <span className="text-[11px] text-white/40">of {rankings.length}</span></p>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Challenge progress */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50" style={OUTFIT}>
+            RESULTS ({resolvedCount}/{totalCount} resolved)
+          </p>
+          <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>{progressPct}%</span>
+        </div>
+        <div className="h-[5px] rounded-full mb-3" style={{ background: "rgba(255,255,255,0.06)" }}>
+          <div className="h-full rounded-full transition-all duration-700" style={{ width: `${progressPct}%`, background: "linear-gradient(90deg, #22E3E8, #9945FF)" }} />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          {challenges.map((c) => {
+            const Icon = MARKET_ICONS[c.icon] ?? MARKET_ICONS.coin;
+            const myBet = myBets.find((b) => b.challenge_id === c.id);
+            const isResolved = c.status === TDChallengeStatus.RESOLVED;
+            const won = isResolved && myBet?.status === TDBetStatus.WON;
+            const lost = isResolved && myBet?.status === TDBetStatus.LOST;
+
+            return (
+              <div
+                key={c.id}
+                className="flex items-start gap-2 px-3 py-2 rounded-lg"
+                style={{
+                  background: isResolved
+                    ? won ? "rgba(34,197,94,0.06)" : lost ? "rgba(239,68,68,0.06)" : "rgba(255,255,255,0.03)"
+                    : "rgba(255,255,255,0.03)",
+                  border: `1px solid ${isResolved ? won ? "rgba(34,197,94,0.2)" : lost ? "rgba(239,68,68,0.2)" : "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.05)"}`,
+                }}
+              >
+                {isResolved ? (
+                  won
+                    ? <CheckCircle2 size={12} style={{ color: "#22c55e", flexShrink: 0, marginTop: 1 }} />
+                    : <span className="text-[10px] flex-shrink-0 mt-0.5" style={{ color: "#ef4444" }}>✗</span>
+                ) : (
+                  <Clock size={12} style={{ color: "rgba(255,255,255,0.25)", flexShrink: 0, marginTop: 1 }} />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <p className="text-[10px] text-white/60 font-medium leading-tight" style={OUTFIT}>{c.question}</p>
+                  {myBet ? (
+                    <p className="text-[9px] mt-0.5" style={{ ...OUTFIT, color: isResolved ? won ? "#22c55e" : "#ef4444" : "rgba(255,255,255,0.4)" }}>
+                      {c.options.find((o) => o.key === myBet.selected_option)?.label ?? myBet.selected_option}
+                      {" @ "}{myBet.odds_at_bet}x — {myBet.coin_amount} pts
+                      {isResolved && won && ` → +${Math.round(myBet.actual_return ?? myBet.potential_return)} pts`}
+                      {isResolved && lost && " → Lost"}
+                    </p>
+                  ) : (
+                    <p className="text-[8px] text-white/25 mt-0.5" style={OUTFIT}>No bet placed</p>
+                  )}
+                  {isResolved && c.correct_option && (
+                    <p className="text-[8px] text-white/35 mt-0.5" style={OUTFIT}>
+                      Answer: {c.options.find((o) => o.key === c.correct_option)?.label ?? c.correct_option}
+                    </p>
+                  )}
+                  {!isResolved && <p className="text-[8px] text-white/25 mt-0.5" style={OUTFIT}>Waiting for resolution…</p>}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Live leaderboard */}
+      {miniRankings.length > 0 && (
+        <div>
+          <div className="flex items-center gap-1.5 mb-2">
+            <Radio size={10} style={{ color: "#f83cc5" }} />
+            <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50" style={OUTFIT}>LIVE LEADERBOARD</p>
+          </div>
+          <div className="flex flex-col">
+            {miniRankings.map((r) => (
+              <LeaderboardRow
+                key={r.entry_id}
+                entry={{
+                  wallet: r.partner_ext_id ?? `User #${r.user_id}`,
+                  pts: r.current_coins,
+                  payout: 0,
+                  isYou: r.entry_id === entry?.id,
+                  rank: r.rank,
+                }}
+                rank={r.rank}
+                isLast={false}
+              />
+            ))}
+          </div>
+          <button
+            onClick={onViewFullLeaderboard}
+            className="mt-2 flex items-center justify-center gap-1 w-full text-[9px] font-semibold"
+            style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+          >
+            See Full Leaderboard <ArrowRight size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/games/prematch-bets/PreMatchResults.tsx

@@ -0,0 +1,212 @@
+// @devrongx/games — games/prematch-bets/PreMatchResults.tsx
+// Final results view: rank, payout, bet breakdown, stats. Pool status = COMPLETE.
+"use client";
+
+import { useMemo } from "react";
+import { Trophy, CheckCircle2, ArrowRight, TrendingUp } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT, MARKET_ICONS } from "./constants";
+import type { ITDPoolDetail, ITDMyEntryResponse, ITDLeaderboardEntry } from "../../pools/types";
+import { TDBetStatus } from "../../pools/types";
+
+// USDC icon inline
+const UsdcIcon = ({ size = 12 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+    <circle cx="16" cy="16" r="16" fill="#2775CA" />
+    <path d="M20.5 18.2c0-2.1-1.3-2.8-3.8-3.1-1.8-.3-2.2-.7-2.2-1.5s.7-1.3 1.8-1.3c1 0 1.6.4 1.9 1.1.1.1.2.2.3.2h.7c.2 0 .3-.1.3-.3-.3-1-1-1.8-2.1-2v-1.2c0-.2-.1-.3-.3-.3h-.6c-.2 0-.3.1-.3.3v1.2c-1.5.2-2.5 1.2-2.5 2.4 0 2 1.2 2.7 3.7 3 1.7.3 2.3.8 2.3 1.6 0 1-.8 1.6-2 1.6-1.5 0-2-.6-2.2-1.4 0-.1-.2-.2-.3-.2h-.7c-.2 0-.3.1-.3.3.3 1.2 1 2 2.5 2.3v1.2c0 .2.1.3.3.3h.6c.2 0 .3-.1.3-.3v-1.2c1.6-.2 2.6-1.3 2.6-2.6z" fill="#fff" />
+  </svg>
+);
+
+interface PreMatchResultsProps {
+  config: IChallengeConfig;
+  poolId: number;
+  pool?: ITDPoolDetail;
+  entryData: ITDMyEntryResponse | null;
+  rankings: ITDLeaderboardEntry[];
+  onViewFullLeaderboard: () => void;
+}
+
+export function PreMatchResults({
+  config,
+  pool,
+  entryData,
+  rankings,
+  onViewFullLeaderboard,
+}: PreMatchResultsProps) {
+  const entry = entryData?.entry;
+  const myBets = entryData?.bets ?? [];
+  const hasPartnerPayout = pool?.currency?.partner_payout ?? false;
+
+  const myRanking = rankings.find((r) => r.entry_id === entry?.id);
+  const totalEntrants = rankings.length;
+
+  const stats = useMemo(() => {
+    const individualBets = myBets.filter((b) => b.parlay_id === null);
+    const won = individualBets.filter((b) => b.status === TDBetStatus.WON).length;
+    const lost = individualBets.filter((b) => b.status === TDBetStatus.LOST).length;
+    const totalSpent = individualBets.reduce((s, b) => s + b.coin_amount, 0);
+    const totalEarned = entry?.final_coins ?? 0;
+    return {
+      betsPlaced: individualBets.length,
+      totalChallenges: pool?.challenge_count ?? config.markets.length,
+      won,
+      lost,
+      winRate: individualBets.length > 0 ? Math.round((won / individualBets.length) * 100) : 0,
+      totalSpent,
+      totalEarned,
+      roi: totalSpent > 0 ? Math.round(((totalEarned - config.startingBalance) / totalSpent) * 100) : 0,
+    };
+  }, [myBets, entry, pool, config]);
+
+  const miniRankings = useMemo(() => {
+    const top = rankings.slice(0, 3);
+    if (!myRanking || (myRanking.rank ?? 0) <= 3) return top;
+    return [...top, myRanking];
+  }, [rankings, myRanking]);
+
+  return (
+    <div className="w-full flex flex-col gap-4 px-4 pb-8">
+      {/* Header */}
+      <div className="flex items-center gap-2 pt-5">
+        <Trophy size={18} style={{ color: "#f59e0b" }} />
+        <span className="text-[18px] font-bold text-white" style={OUTFIT}>Results</span>
+        <span className="text-[12px] text-white/40" style={OUTFIT}>— {config.matchTitle}</span>
+      </div>
+
+      {/* Rank card */}
+      {myRanking && (
+        <div
+          className="relative overflow-hidden rounded-2xl px-4 py-5 flex flex-col items-center gap-2"
+          style={{ background: "linear-gradient(135deg, rgba(34,227,232,0.08), rgba(153,69,255,0.08))", border: "1px solid rgba(34,227,232,0.15)" }}
+        >
+          <p className="text-[11px] text-white/50 uppercase tracking-widest font-semibold" style={OUTFIT}>YOUR FINAL RANK</p>
+          <div className="flex items-baseline gap-1">
+            <span className="text-[52px] font-bold leading-none" style={{ ...OUTFIT, color: "#22E3E8" }}>#{myRanking.rank}</span>
+            <span className="text-[14px] text-white/40" style={OUTFIT}>of {totalEntrants.toLocaleString()}</span>
+          </div>
+          <p className="text-[13px] font-semibold text-white" style={OUTFIT}>
+            Final Score: {(myRanking.final_coins ?? myRanking.current_coins).toLocaleString()} pts
+          </p>
+          {hasPartnerPayout && myRanking.payout_amount !== null && myRanking.payout_amount !== undefined && (
+            <div
+              className="flex items-center gap-1.5 px-4 py-2 rounded-xl mt-1"
+              style={{ background: "rgba(39,117,202,0.2)", border: "1px solid rgba(39,117,202,0.35)" }}
+            >
+              <UsdcIcon size={14} />
+              <span className="text-[14px] font-bold text-white" style={OUTFIT}>PAYOUT: ${myRanking.payout_amount.toFixed(2)} USDC</span>
+            </div>
+          )}
+          {!hasPartnerPayout && (
+            <p className="text-[10px] text-white/30" style={OUTFIT}>
+              Earned {(myRanking.final_coins ?? myRanking.current_coins).toLocaleString()} {pool?.currency?.symbol ?? "pts"}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Bet breakdown */}
+      {myBets.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>
+            YOUR BETS — {stats.won} Won, {stats.lost} Lost
+          </p>
+          <div className="flex flex-col gap-1">
+            {myBets.filter((b) => b.parlay_id === null).map((bet) => {
+              const market = config.markets.find((m) => m.backendChallengeId === bet.challenge_id);
+              const Icon = MARKET_ICONS[market?.icon ?? "coin"];
+              const won = bet.status === TDBetStatus.WON;
+              const lost = bet.status === TDBetStatus.LOST;
+
+              return (
+                <div
+                  key={bet.id}
+                  className="flex items-start gap-2 px-3 py-2 rounded-lg"
+                  style={{
+                    background: won ? "rgba(34,197,94,0.05)" : lost ? "rgba(239,68,68,0.05)" : "rgba(255,255,255,0.03)",
+                    border: `1px solid ${won ? "rgba(34,197,94,0.15)" : lost ? "rgba(239,68,68,0.15)" : "rgba(255,255,255,0.05)"}`,
+                  }}
+                >
+                  {won
+                    ? <CheckCircle2 size={11} style={{ color: "#22c55e", flexShrink: 0, marginTop: 1 }} />
+                    : lost
+                      ? <span className="text-[10px] flex-shrink-0 mt-0.5" style={{ color: "#ef4444" }}>✗</span>
+                      : Icon && <Icon size={11} style={{ color: market?.accent ?? "#22E3E8", flexShrink: 0, marginTop: 1 }} />
+                  }
+                  <div className="flex-1 min-w-0">
+                    <p className="text-[9px] text-white/60 font-medium leading-tight truncate" style={OUTFIT}>
+                      {market?.question ?? `Challenge #${bet.challenge_id}`}
+                    </p>
+                    <p className="text-[9px] mt-0.5 font-semibold" style={{ ...OUTFIT, color: won ? "#22c55e" : lost ? "#ef4444" : "rgba(255,255,255,0.5)" }}>
+                      {market?.options.find((o) => o.label.toLowerCase().replace(/\s+/g, "_") === bet.selected_option)?.label ?? bet.selected_option}
+                      {" @ "}{bet.odds_at_bet}x — {bet.coin_amount} pts
+                      {won && ` → +${Math.round(bet.actual_return ?? bet.potential_return)} pts`}
+                      {lost && " → 0 pts"}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Stats */}
+      <div>
+        <div className="flex items-center gap-1.5 mb-2">
+          <TrendingUp size={11} style={{ color: "#22E3E8" }} />
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50" style={OUTFIT}>STATS</p>
+        </div>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+          {[
+            ["Bets placed", `${stats.betsPlaced}/${stats.totalChallenges}`],
+            ["Win rate", `${stats.winRate}%`],
+            ["Points spent", stats.totalSpent.toLocaleString()],
+            ["Final score", stats.totalEarned.toLocaleString()],
+          ].map(([label, value]) => (
+            <div key={label} className="flex items-center justify-between py-0.5">
+              <span className="text-[10px] text-white/40" style={OUTFIT}>{label}</span>
+              <span className="text-[10px] font-semibold text-white" style={OUTFIT}>{value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Final leaderboard */}
+      {miniRankings.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>FINAL LEADERBOARD</p>
+          <div className="flex flex-col">
+            {miniRankings.map((r) => (
+              <LeaderboardRow
+                key={r.entry_id}
+                entry={{
+                  wallet: r.partner_ext_id ?? `User #${r.user_id}`,
+                  pts: r.final_coins ?? r.current_coins,
+                  payout: 0,
+                  isYou: r.entry_id === entry?.id,
+                  rank: r.rank,
+                }}
+                rank={r.rank}
+                isLast={false}
+              />
+            ))}
+          </div>
+          <button
+            onClick={onViewFullLeaderboard}
+            className="mt-2 flex items-center justify-center gap-1 w-full text-[9px] font-semibold"
+            style={{ ...OUTFIT, color: "rgba(34,227,232,0.6)" }}
+          >
+            See Full Leaderboard <ArrowRight size={10} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}