@devrongx/games 0.3.5 → 0.4.0

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

@@ -0,0 +1,192 @@
+// @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";
+
+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 === "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 === "resolved";
+            const won = isResolved && myBet?.status === "won";
+            const lost = isResolved && myBet?.status === "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,211 @@
+// @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";
+
+// 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 === "won").length;
+    const lost = individualBets.filter((b) => b.status === "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 === "won";
+              const lost = bet.status === "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>
+  );
+}

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

@@ -0,0 +1,183 @@
+// @devrongx/games — games/prematch-bets/PreMatchSubmitted.tsx
+// Shows after bets are submitted, while the pool is still OPEN (match hasn't started).
+"use client";
+
+import { useState, useEffect } from "react";
+import { CheckCircle2, Clock, ArrowRight, Edit2 } from "lucide-react";
+import { IChallengeConfig } from "./config";
+import { LeaderboardRow } from "./LeaderboardRow";
+import { OUTFIT, MARKET_ICONS } from "./constants";
+import type { ITDMyEntryResponse, ITDLeaderboardEntry } from "../../pools/types";
+
+// Countdown hook
+function useCountdown(targetIso: string): string {
+  const [text, setText] = useState("");
+  useEffect(() => {
+    if (!targetIso) return;
+    const tick = () => {
+      const diff = new Date(targetIso).getTime() - Date.now();
+      if (diff <= 0) { setText("LIVE NOW"); return; }
+      const d = Math.floor(diff / 86400000);
+      const h = Math.floor((diff % 86400000) / 3600000);
+      const m = Math.floor((diff % 3600000) / 60000);
+      const s = Math.floor((diff % 60000) / 1000);
+      if (d > 0) setText(`${d}d ${h}h ${m}m`);
+      else if (h > 0) setText(`${h}h ${m}m ${s}s`);
+      else setText(`${m}m ${s}s`);
+    };
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [targetIso]);
+  return text;
+}
+
+interface PreMatchSubmittedProps {
+  config: IChallengeConfig;
+  poolId: number;
+  entryData: ITDMyEntryResponse | null;
+  rankings: ITDLeaderboardEntry[];
+  onAdjust: () => void;
+  onViewLeaderboard: () => void;
+}
+
+export function PreMatchSubmitted({
+  config,
+  entryData,
+  rankings,
+  onAdjust,
+  onViewLeaderboard,
+}: PreMatchSubmittedProps) {
+  const countdown = useCountdown(config.matchStartTime);
+  const entry = entryData?.entry;
+  const bets = entryData?.bets ?? [];
+
+  // Only show individual (non-parlay) bets
+  const individualBets = bets.filter((b) => b.parlay_id === null);
+
+  const totalSpent = individualBets.reduce((s, b) => s + b.coin_amount, 0);
+  const totalPotential = individualBets.reduce((s, b) => s + b.potential_return, 0);
+
+  // Mini leaderboard (top 3)
+  const miniRankings = rankings.slice(0, 5);
+
+  return (
+    <div className="w-full flex flex-col gap-4 px-4 pb-8">
+      {/* Success header */}
+      <div className="flex flex-col items-center gap-2 pt-6 pb-4">
+        <div className="flex items-center justify-center w-12 h-12 rounded-full" style={{ background: "rgba(34,197,94,0.15)" }}>
+          <CheckCircle2 size={24} style={{ color: "#22c55e" }} />
+        </div>
+        <p className="text-[18px] font-bold text-white text-center" style={OUTFIT}>Bets Submitted!</p>
+        {countdown && (
+          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full" style={{ background: "rgba(255,255,255,0.06)" }}>
+            <Clock size={11} style={{ color: "rgba(255,255,255,0.5)" }} />
+            <span className="text-[11px] text-white/60" style={OUTFIT}>Match starts in <span className="text-white font-bold">{countdown}</span></span>
+          </div>
+        )}
+      </div>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Your bets */}
+      {individualBets.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>
+            YOUR BETS ({individualBets.length} markets)
+          </p>
+          <div className="flex flex-col gap-1.5">
+            {individualBets.map((bet, i) => {
+              const market = config.markets.find((m) => m.backendChallengeId === bet.challenge_id);
+              const Icon = MARKET_ICONS[market?.icon ?? "coin"];
+              return (
+                <div
+                  key={bet.id}
+                  className="flex items-center gap-2 px-3 py-2 rounded-lg"
+                  style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}
+                >
+                  {Icon && <Icon size={11} style={{ color: market?.accent ?? "#22E3E8", flexShrink: 0 }} />}
+                  <span className="flex-1 text-[10px] text-white/70 font-medium truncate" style={OUTFIT}>
+                    {market?.question ?? `Challenge #${bet.challenge_id}`}
+                  </span>
+                  <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>
+                    {bet.odds_at_bet}x
+                  </span>
+                  <span className="text-[9px] text-white/50" style={OUTFIT}>—</span>
+                  <span className="text-[9px] font-semibold text-white" style={OUTFIT}>{bet.coin_amount} pts</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Summary */}
+      {entry && (
+        <div className="flex flex-col gap-1">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-1" style={OUTFIT}>Summary</p>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Points spent</span>
+            <span className="text-[11px] font-semibold text-white" style={OUTFIT}>{totalSpent} / {config.startingBalance.toLocaleString()}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Points remaining</span>
+            <span className="text-[11px] font-semibold text-white" style={OUTFIT}>{entry.current_coins.toLocaleString()}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-white/50" style={OUTFIT}>Max potential</span>
+            <span className="text-[11px] font-bold" style={{ ...OUTFIT, color: "#22E3E8" }}>{Math.round(totalPotential + entry.current_coins).toLocaleString()}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Adjust bets button */}
+      <button
+        onClick={onAdjust}
+        className="flex items-center justify-center gap-1.5 w-full py-2.5 rounded-xl"
+        style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)" }}
+      >
+        <Edit2 size={12} style={{ color: "rgba(255,255,255,0.5)" }} />
+        <span className="text-[11px] font-semibold text-white/60" style={OUTFIT}>Adjust Bets</span>
+      </button>
+
+      <div className="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
+
+      {/* Mini leaderboard */}
+      {miniRankings.length > 0 && (
+        <div>
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-white/50 mb-2" style={OUTFIT}>Leaderboard</p>
+          <div className="flex items-center gap-2 px-3 mb-1">
+            <span className="w-[28px] text-right text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>#</span>
+            <span className="flex-1 text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>Player</span>
+            <span className="w-[52px] text-right text-[8px] text-white/30 uppercase tracking-wide" style={OUTFIT}>Pts</span>
+          </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: false,
+                  rank: r.rank,
+                }}
+                rank={r.rank}
+                isLast={false}
+              />
+            ))}
+          </div>
+          <button
+            onClick={onViewLeaderboard}
+            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/config.ts

@@ -20,6 +20,7 @@ export interface IChallengeMarket {
     icon: string;
     accent: string;
     category: string;   // "toss" | "match" | "csk_innings" | "rcb_innings" | "match_level"
+    backendChallengeId?: number;  // Maps to challenges.id in the TD DB — required for API bet placement
     options: IChallengeOption[];
     userBet?: IBetEntry; // Present when API returns a logged-in user's saved bet for this market
 }

package/src/index.ts

@@ -12,3 +12,19 @@ export type { IChallengeConfig, IChallengeMarket, IChallengeOption, IChallengeTe
 // Matches — TD match calendar, data fetching, and types
 export { configureTDClient, fetchTDMatches, useTDMatches, MatchCalendar } from "./matches";
 export type { ITDClientConfig, ITDMatch, ITDTeam, ITDPlayer, ITDVenue, ITDTournament, ITDStage, ITDMatchesResponse, ITDMatchesParams, UseTDMatchesResult } from "./matches";
+
+// Pools — real API data layer
+export {
+  useTDPools, useTDPool, useTDPoolEntry, useTDLeaderboard,
+  joinTDPool, placeTDBets,
+  fetchTDPools, fetchTDPoolDetail, fetchTDLeaderboard, fetchTDMyEntry,
+  buildPMBConfig,
+} from "./pools";
+export type {
+  ITDPool, ITDPoolDetail, ITDChallenge, ITDChallengeOption, ITDCurrency,
+  ITDPMBConfig, ITDPoolContentConfig, ITDPayoutTier,
+  ITDLeaderboardEntry, ITDLeaderboardResponse,
+  ITDPoolEntryRecord, ITDPoolBet, ITDPoolParlay, ITDMyEntryResponse,
+  ITDBetInput,
+  UseTDPoolsResult, UseTDPoolResult, UseTDPoolEntryResult, UseTDLeaderboardResult, UseTDLeaderboardOptions,
+} from "./pools";