@dubsdotapp/expo 0.5.15 → 0.5.17

package/dist/index.js

@@ -87,6 +87,7 @@ __export(index_exports, {
   useJoinGame: () => useJoinGame,
   useNetworkGames: () => useNetworkGames,
   usePushNotifications: () => usePushNotifications,
+  useShorts: () => useShorts,
   useUFCFightCard: () => useUFCFightCard,
   useUFCFighterDetail: () => useUFCFighterDetail
 });
@@ -732,7 +733,7 @@ function createSecureStoreStorage() {
 }
 
 // src/provider.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/ui/theme.ts
 var import_react = require("react");
@@ -1790,7 +1791,7 @@ function ManagedWalletProvider({
 }
 
 // src/ui/AuthGate.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
 
 // src/hooks/useEvents.ts
@@ -2508,25 +2509,51 @@ function useHighlights(league, limit = 8) {
   return { data, loading, error, refetch: fetchData };
 }
 
-// src/hooks/usePushNotifications.ts
+// src/hooks/useShorts.ts
 var import_react17 = require("react");
+function useShorts(league = "NBA", limit = 20) {
+  const { client } = useDubs();
+  const [data, setData] = (0, import_react17.useState)(null);
+  const [loading, setLoading] = (0, import_react17.useState)(true);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const fetchData = (0, import_react17.useCallback)(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams({ league, limit: String(limit) });
+      const res = await client.request("GET", `/shorts?${qs.toString()}`);
+      setData(res.videos || []);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, league, limit]);
+  (0, import_react17.useEffect)(() => {
+    fetchData();
+  }, [fetchData]);
+  return { data, loading, error, refetch: fetchData };
+}
+
+// src/hooks/usePushNotifications.ts
+var import_react18 = require("react");
 var import_react_native6 = require("react-native");
 function usePushNotifications() {
   const { client, appName, pushEnabled } = useDubs();
-  const channelId = (0, import_react17.useMemo)(() => appName.toLowerCase().replace(/[^a-z0-9-]/g, ""), [appName]);
-  const [hasPermission, setHasPermission] = (0, import_react17.useState)(false);
-  const [pushToken, setPushToken] = (0, import_react17.useState)(null);
-  const [loading, setLoading] = (0, import_react17.useState)(false);
-  const [error, setError] = (0, import_react17.useState)(null);
-  const registering = (0, import_react17.useRef)(false);
-  const getNotificationsModule = (0, import_react17.useCallback)(() => {
+  const channelId = (0, import_react18.useMemo)(() => appName.toLowerCase().replace(/[^a-z0-9-]/g, ""), [appName]);
+  const [hasPermission, setHasPermission] = (0, import_react18.useState)(false);
+  const [pushToken, setPushToken] = (0, import_react18.useState)(null);
+  const [loading, setLoading] = (0, import_react18.useState)(false);
+  const [error, setError] = (0, import_react18.useState)(null);
+  const registering = (0, import_react18.useRef)(false);
+  const getNotificationsModule = (0, import_react18.useCallback)(() => {
     try {
       return require("expo-notifications");
     } catch {
       return null;
     }
   }, []);
-  const getDeviceName = (0, import_react17.useCallback)(() => {
+  const getDeviceName = (0, import_react18.useCallback)(() => {
     try {
       const Device = require("expo-device");
       return Device.deviceName || null;
@@ -2534,7 +2561,7 @@ function usePushNotifications() {
       return null;
     }
   }, []);
-  const setupAndroidChannels = (0, import_react17.useCallback)((Notifications) => {
+  const setupAndroidChannels = (0, import_react18.useCallback)((Notifications) => {
     if (import_react_native6.Platform.OS === "android") {
       Notifications.setNotificationChannelAsync(channelId || "default", {
         name: appName || "Default",
@@ -2544,7 +2571,7 @@ function usePushNotifications() {
       });
     }
   }, [channelId, appName]);
-  const registerTokenWithServer = (0, import_react17.useCallback)(async (token) => {
+  const registerTokenWithServer = (0, import_react18.useCallback)(async (token) => {
     const deviceName = getDeviceName();
     await client.registerPushToken({
       token,
@@ -2552,7 +2579,7 @@ function usePushNotifications() {
       deviceName: deviceName || void 0
     });
   }, [client, getDeviceName]);
-  const register = (0, import_react17.useCallback)(async () => {
+  const register = (0, import_react18.useCallback)(async () => {
     if (!pushEnabled) return false;
     if (registering.current) return false;
     registering.current = true;
@@ -2593,7 +2620,7 @@ function usePushNotifications() {
       return false;
     }
   }, [getNotificationsModule, registerTokenWithServer, setupAndroidChannels]);
-  const unregister = (0, import_react17.useCallback)(async () => {
+  const unregister = (0, import_react18.useCallback)(async () => {
     if (!pushToken) return;
     try {
       await client.unregisterPushToken(pushToken);
@@ -2602,7 +2629,7 @@ function usePushNotifications() {
       console.error("[usePushNotifications] Unregister error:", err);
     }
   }, [client, pushToken]);
-  const restoreIfGranted = (0, import_react17.useCallback)(async () => {
+  const restoreIfGranted = (0, import_react18.useCallback)(async () => {
     if (!pushEnabled) return;
     try {
       const Notifications = getNotificationsModule();
@@ -2620,8 +2647,8 @@ function usePushNotifications() {
       console.log("[usePushNotifications] Restore skipped:", err instanceof Error ? err.message : err);
     }
   }, [getNotificationsModule, registerTokenWithServer, setupAndroidChannels]);
-  const didMount = (0, import_react17.useRef)(false);
-  (0, import_react17.useEffect)(() => {
+  const didMount = (0, import_react18.useRef)(false);
+  (0, import_react18.useEffect)(() => {
     if (didMount.current) return;
     didMount.current = true;
     const Notifications = getNotificationsModule();
@@ -2651,13 +2678,13 @@ function usePushNotifications() {
 }
 
 // src/hooks/useArcadePools.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useArcadePools(gameSlug) {
   const { client } = useDubs();
-  const [pools, setPools] = (0, import_react18.useState)([]);
-  const [loading, setLoading] = (0, import_react18.useState)(false);
-  const [error, setError] = (0, import_react18.useState)(null);
-  const fetch2 = (0, import_react18.useCallback)(async () => {
+  const [pools, setPools] = (0, import_react19.useState)([]);
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [error, setError] = (0, import_react19.useState)(null);
+  const fetch2 = (0, import_react19.useCallback)(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -2669,22 +2696,22 @@ function useArcadePools(gameSlug) {
       setLoading(false);
     }
   }, [client, gameSlug]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     fetch2();
   }, [fetch2]);
   return { pools, loading, error, refetch: fetch2 };
 }
 
 // src/hooks/useArcadePool.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useArcadePool(poolId) {
   const { client } = useDubs();
-  const [pool, setPool] = (0, import_react19.useState)(null);
-  const [stats, setStats] = (0, import_react19.useState)(null);
-  const [leaderboard, setLeaderboard] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  const [error, setError] = (0, import_react19.useState)(null);
-  const fetch2 = (0, import_react19.useCallback)(async () => {
+  const [pool, setPool] = (0, import_react20.useState)(null);
+  const [stats, setStats] = (0, import_react20.useState)(null);
+  const [leaderboard, setLeaderboard] = (0, import_react20.useState)([]);
+  const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [error, setError] = (0, import_react20.useState)(null);
+  const fetch2 = (0, import_react20.useCallback)(async () => {
     if (!poolId) return;
     setLoading(true);
     setError(null);
@@ -2702,22 +2729,22 @@ function useArcadePool(poolId) {
       setLoading(false);
     }
   }, [client, poolId]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     fetch2();
   }, [fetch2]);
   return { pool, stats, leaderboard, loading, error, refetch: fetch2 };
 }
 
 // src/hooks/useArcadeGame.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useArcadeGame(poolId, maxLives = 3) {
   const { client } = useDubs();
   const { user } = useAuth();
-  const [entry, setEntry] = (0, import_react20.useState)(null);
-  const [loading, setLoading] = (0, import_react20.useState)(false);
-  const [error, setError] = (0, import_react20.useState)(null);
+  const [entry, setEntry] = (0, import_react21.useState)(null);
+  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
   const walletAddress = user?.walletAddress || "";
-  const refreshEntry = (0, import_react20.useCallback)(async () => {
+  const refreshEntry = (0, import_react21.useCallback)(async () => {
     if (!poolId || !walletAddress) return;
     setLoading(true);
     setError(null);
@@ -2734,7 +2761,7 @@ function useArcadeGame(poolId, maxLives = 3) {
       setLoading(false);
     }
   }, [client, poolId, walletAddress]);
-  const startAttempt = (0, import_react20.useCallback)(async () => {
+  const startAttempt = (0, import_react21.useCallback)(async () => {
     if (!poolId || !walletAddress) throw new Error("Not ready");
     setError(null);
     try {
@@ -2746,7 +2773,7 @@ function useArcadeGame(poolId, maxLives = 3) {
       throw e;
     }
   }, [client, poolId, walletAddress]);
-  const submitScore = (0, import_react20.useCallback)(async (sessionToken, score, durationMs) => {
+  const submitScore = (0, import_react21.useCallback)(async (sessionToken, score, durationMs) => {
     if (!poolId || !walletAddress) throw new Error("Not ready");
     setError(null);
     try {
@@ -2783,19 +2810,19 @@ function useArcadeGame(poolId, maxLives = 3) {
 }
 
 // src/hooks/useEnterArcadePool.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useEnterArcadePool() {
   const { client, wallet, connection } = useDubs();
   const { user } = useAuth();
-  const [status, setStatus] = (0, import_react21.useState)("idle");
-  const [error, setError] = (0, import_react21.useState)(null);
-  const [data, setData] = (0, import_react21.useState)(null);
-  const reset = (0, import_react21.useCallback)(() => {
+  const [status, setStatus] = (0, import_react22.useState)("idle");
+  const [error, setError] = (0, import_react22.useState)(null);
+  const [data, setData] = (0, import_react22.useState)(null);
+  const reset = (0, import_react22.useCallback)(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = (0, import_react21.useCallback)(async (poolId) => {
+  const execute = (0, import_react22.useCallback)(async (poolId) => {
     if (!wallet.publicKey) throw new Error("Wallet not connected");
     const walletAddress = wallet.publicKey.toBase58();
     setStatus("building");
@@ -2843,7 +2870,7 @@ function useEnterArcadePool() {
 }
 
 // src/hooks/useArcadeCountdown.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 function formatCountdown(ms) {
   if (ms <= 0) return "Ended";
   const s2 = Math.floor(ms / 1e3);
@@ -2856,9 +2883,9 @@ function formatCountdown(ms) {
   return `${s2}s`;
 }
 function useArcadeCountdown(nextResolution) {
-  const [now, setNow] = (0, import_react22.useState)(Date.now());
-  const intervalRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const [now, setNow] = (0, import_react23.useState)(Date.now());
+  const intervalRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (!nextResolution) return;
     intervalRef.current = setInterval(() => setNow(Date.now()), 1e3);
     return () => {
@@ -2887,7 +2914,7 @@ function useArcadeCountdown(nextResolution) {
 }
 
 // src/hooks/useArcadeBridge.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var PROTOCOL_VERSION = "1.0";
 function useArcadeBridge({
   canPlay,
@@ -2897,14 +2924,14 @@ function useArcadeBridge({
   onScoreSubmitted,
   onError
 }) {
-  const webviewRef = (0, import_react23.useRef)(null);
-  const sessionTokenRef = (0, import_react23.useRef)(null);
-  const gameStartTimeRef = (0, import_react23.useRef)(0);
-  const canPlayRef = (0, import_react23.useRef)(canPlay);
+  const webviewRef = (0, import_react24.useRef)(null);
+  const sessionTokenRef = (0, import_react24.useRef)(null);
+  const gameStartTimeRef = (0, import_react24.useRef)(0);
+  const canPlayRef = (0, import_react24.useRef)(canPlay);
   canPlayRef.current = canPlay;
-  const [lastResult, setLastResult] = (0, import_react23.useState)(null);
-  const [bridgeLoading, setBridgeLoading] = (0, import_react23.useState)(false);
-  const injectSession = (0, import_react23.useCallback)((token, attemptNumber) => {
+  const [lastResult, setLastResult] = (0, import_react24.useState)(null);
+  const [bridgeLoading, setBridgeLoading] = (0, import_react24.useState)(false);
+  const injectSession = (0, import_react24.useCallback)((token, attemptNumber) => {
     webviewRef.current?.injectJavaScript(`
       window.ARCADE_SESSION_TOKEN = ${JSON.stringify(token)};
       window.ARCADE_ATTEMPT_NUMBER = ${attemptNumber};
@@ -2913,7 +2940,7 @@ function useArcadeBridge({
       true;
     `);
   }, []);
-  const triggerPlay = (0, import_react23.useCallback)(async () => {
+  const triggerPlay = (0, import_react24.useCallback)(async () => {
     if (!canPlay) return;
     setBridgeLoading(true);
     try {
@@ -2930,7 +2957,7 @@ function useArcadeBridge({
       setBridgeLoading(false);
     }
   }, [canPlay, startAttempt, injectSession, onPlayStarted, onError]);
-  const handleMessage = (0, import_react23.useCallback)(
+  const handleMessage = (0, import_react24.useCallback)(
     async (event) => {
       let data;
       try {
@@ -3136,11 +3163,11 @@ function AuthGate({
 }) {
   const { client, pushEnabled } = useDubs();
   const auth = useAuth();
-  const [phase, setPhase] = (0, import_react24.useState)("init");
-  const [registrationPhase, setRegistrationPhase] = (0, import_react24.useState)(false);
-  const [showPushSetup, setShowPushSetup] = (0, import_react24.useState)(false);
-  const [isRestoredSession, setIsRestoredSession] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [phase, setPhase] = (0, import_react25.useState)("init");
+  const [registrationPhase, setRegistrationPhase] = (0, import_react25.useState)(false);
+  const [showPushSetup, setShowPushSetup] = (0, import_react25.useState)(false);
+  const [isRestoredSession, setIsRestoredSession] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -3167,23 +3194,23 @@ function AuthGate({
       cancelled = true;
     };
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (auth.status === "needsRegistration") setRegistrationPhase(true);
   }, [auth.status]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (pushEnabled && auth.status === "authenticated" && registrationPhase && !isRestoredSession) {
       setShowPushSetup(true);
     }
   }, [pushEnabled, auth.status, registrationPhase, isRestoredSession]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (auth.token) onSaveToken(auth.token);
   }, [auth.token]);
-  const retry = (0, import_react24.useCallback)(() => {
+  const retry = (0, import_react25.useCallback)(() => {
     setRegistrationPhase(false);
     auth.reset();
     auth.authenticate();
   }, [auth]);
-  const handleRegister = (0, import_react24.useCallback)(
+  const handleRegister = (0, import_react25.useCallback)(
     (username, referralCode, avatarUrl) => {
       auth.register(username, referralCode, avatarUrl);
     },
@@ -3283,7 +3310,7 @@ function DefaultErrorScreen({ error, onRetry, appName, accentColor }) {
 function StepIndicator({ currentStep }) {
   const t = useDubsTheme();
   const steps = [0, 1, 2, 3];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native8.View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react24.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native8.View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react25.default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native8.View, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_native8.View,
@@ -3307,20 +3334,20 @@ function DefaultRegistrationScreen({
 }) {
   const t = useDubsTheme();
   const accent = accentColor || t.accent;
-  const [step, setStep] = (0, import_react24.useState)(0);
-  const [avatarSeed, setAvatarSeed] = (0, import_react24.useState)(generateSeed);
-  const [avatarStyle, setAvatarStyle] = (0, import_react24.useState)("adventurer");
-  const [avatarBg, setAvatarBg] = (0, import_react24.useState)("1a1a2e");
-  const [showStyles, setShowStyles] = (0, import_react24.useState)(false);
-  const [username, setUsername] = (0, import_react24.useState)("");
-  const [referralCode, setReferralCode] = (0, import_react24.useState)("");
-  const [checking, setChecking] = (0, import_react24.useState)(false);
-  const [availability, setAvailability] = (0, import_react24.useState)(null);
-  const debounceRef = (0, import_react24.useRef)(null);
-  const fadeAnim = (0, import_react24.useRef)(new import_react_native8.Animated.Value(1)).current;
-  const slideAnim = (0, import_react24.useRef)(new import_react_native8.Animated.Value(0)).current;
+  const [step, setStep] = (0, import_react25.useState)(0);
+  const [avatarSeed, setAvatarSeed] = (0, import_react25.useState)(generateSeed);
+  const [avatarStyle, setAvatarStyle] = (0, import_react25.useState)("adventurer");
+  const [avatarBg, setAvatarBg] = (0, import_react25.useState)("1a1a2e");
+  const [showStyles, setShowStyles] = (0, import_react25.useState)(false);
+  const [username, setUsername] = (0, import_react25.useState)("");
+  const [referralCode, setReferralCode] = (0, import_react25.useState)("");
+  const [checking, setChecking] = (0, import_react25.useState)(false);
+  const [availability, setAvailability] = (0, import_react25.useState)(null);
+  const debounceRef = (0, import_react25.useRef)(null);
+  const fadeAnim = (0, import_react25.useRef)(new import_react_native8.Animated.Value(1)).current;
+  const slideAnim = (0, import_react25.useRef)(new import_react_native8.Animated.Value(0)).current;
   const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed, avatarBg);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const trimmed = username.trim();
     if (trimmed.length < 3) {
@@ -3343,7 +3370,7 @@ function DefaultRegistrationScreen({
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, [username, client]);
-  const animateToStep = (0, import_react24.useCallback)((newStep) => {
+  const animateToStep = (0, import_react25.useCallback)((newStep) => {
     const dir = newStep > step ? 1 : -1;
     import_react_native8.Keyboard.dismiss();
     import_react_native8.Animated.parallel([
@@ -3582,8 +3609,8 @@ function DefaultRegistrationScreen({
 }
 function PushTokenRestorer() {
   const push = usePushNotifications();
-  const restored = (0, import_react24.useRef)(false);
-  (0, import_react24.useEffect)(() => {
+  const restored = (0, import_react25.useRef)(false);
+  (0, import_react25.useEffect)(() => {
     if (restored.current) return;
     restored.current = true;
     push.restoreIfGranted();
@@ -3598,9 +3625,9 @@ function PushSetupScreen({
   const t = useDubsTheme();
   const accent = accentColor || t.accent;
   const push = usePushNotifications();
-  const fadeAnim = (0, import_react24.useRef)(new import_react_native8.Animated.Value(0)).current;
-  const slideAnim = (0, import_react24.useRef)(new import_react_native8.Animated.Value(30)).current;
-  (0, import_react24.useEffect)(() => {
+  const fadeAnim = (0, import_react25.useRef)(new import_react_native8.Animated.Value(0)).current;
+  const slideAnim = (0, import_react25.useRef)(new import_react_native8.Animated.Value(30)).current;
+  (0, import_react25.useEffect)(() => {
     import_react_native8.Animated.parallel([
       import_react_native8.Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
       import_react_native8.Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: true })
@@ -3736,7 +3763,7 @@ var s = import_react_native8.StyleSheet.create({
 
 // src/provider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var DubsContext = (0, import_react25.createContext)(null);
+var DubsContext = (0, import_react26.createContext)(null);
 function DubsProvider({
   apiKey,
   children,
@@ -3758,11 +3785,11 @@ function DubsProvider({
   const config = NETWORK_CONFIG[network];
   const baseUrl = baseUrlOverride || config.baseUrl;
   const rpcUrl = rpcUrlOverride || config.rpcUrl;
-  const client = (0, import_react25.useMemo)(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
-  const storage = (0, import_react25.useMemo)(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
-  const [uiConfig, setUiConfig] = (0, import_react25.useState)(null);
-  const [resolvedNetwork, setResolvedNetwork] = (0, import_react25.useState)(network);
-  (0, import_react25.useEffect)(() => {
+  const client = (0, import_react26.useMemo)(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const storage = (0, import_react26.useMemo)(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
+  const [uiConfig, setUiConfig] = (0, import_react26.useState)(null);
+  const [resolvedNetwork, setResolvedNetwork] = (0, import_react26.useState)(network);
+  (0, import_react26.useEffect)(() => {
     client.getAppConfig().then((cfg) => {
       console.log("[DubsProvider] UI config loaded:", JSON.stringify(cfg));
       setUiConfig(cfg);
@@ -3778,7 +3805,7 @@ function DubsProvider({
   const resolvedConfig = NETWORK_CONFIG[resolvedNetwork];
   const resolvedRpcUrl = rpcUrlOverride || resolvedConfig.rpcUrl;
   const cluster = resolvedConfig.cluster;
-  const connection = (0, import_react25.useMemo)(() => new import_web34.Connection(resolvedRpcUrl, { commitment: "confirmed" }), [resolvedRpcUrl]);
+  const connection = (0, import_react26.useMemo)(() => new import_web34.Connection(resolvedRpcUrl, { commitment: "confirmed" }), [resolvedRpcUrl]);
   if (uiConfig === null) return null;
   const themeOverrides = {};
   if (uiConfig.accentColor) {
@@ -3854,11 +3881,11 @@ function ManagedInner({
   children
 }) {
   const managedDisconnect = useDisconnect();
-  const disconnect = (0, import_react25.useCallback)(async () => {
+  const disconnect = (0, import_react26.useCallback)(async () => {
     client.setToken(null);
     await managedDisconnect?.();
   }, [client, managedDisconnect]);
-  const value = (0, import_react25.useMemo)(
+  const value = (0, import_react26.useMemo)(
     () => ({ client, wallet, connection, appName, network, disconnect, uiConfig, pushEnabled }),
     [client, wallet, connection, appName, network, disconnect, uiConfig, pushEnabled]
   );
@@ -3895,13 +3922,13 @@ function ExternalWalletProvider({
   pushEnabled,
   children
 }) {
-  const disconnect = (0, import_react25.useCallback)(async () => {
+  const disconnect = (0, import_react26.useCallback)(async () => {
     client.setToken(null);
     await storage.deleteItem(STORAGE_KEYS.JWT_TOKEN).catch(() => {
     });
     await wallet.disconnect?.();
   }, [client, storage, wallet]);
-  const value = (0, import_react25.useMemo)(
+  const value = (0, import_react26.useMemo)(
     () => ({ client, wallet, connection, appName, network, disconnect, uiConfig, pushEnabled }),
     [client, wallet, connection, appName, network, disconnect, uiConfig, pushEnabled]
   );
@@ -3926,14 +3953,14 @@ function ExternalWalletProvider({
   ) });
 }
 function useDubs() {
-  const ctx = (0, import_react25.useContext)(DubsContext);
+  const ctx = (0, import_react26.useContext)(DubsContext);
   if (!ctx) {
     throw new Error("useDubs must be used within a <DubsProvider>");
   }
   return ctx;
 }
 function useAppConfig() {
-  const ctx = (0, import_react25.useContext)(DubsContext);
+  const ctx = (0, import_react26.useContext)(DubsContext);
   return ctx?.uiConfig || {};
 }
 
@@ -3991,7 +4018,7 @@ var styles3 = import_react_native9.StyleSheet.create({
 });
 
 // src/ui/UserProfileCard.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_native10 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function truncateAddress(address, chars = 4) {
@@ -4011,7 +4038,7 @@ function UserProfileCard({
   memberSince
 }) {
   const t = useDubsTheme();
-  const imageUri = (0, import_react26.useMemo)(
+  const imageUri = (0, import_react27.useMemo)(
     () => ensurePngAvatar(avatarUrl) || `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
     [avatarUrl, walletAddress]
   );
@@ -4204,7 +4231,7 @@ var styles5 = import_react_native11.StyleSheet.create({
 });
 
 // src/ui/UserProfileSheet.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_native12 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function truncateAddress3(address, chars = 4) {
@@ -4222,31 +4249,31 @@ function UserProfileSheet({
   const { client } = useDubs();
   const { refreshUser } = useAuth();
   const push = usePushNotifications();
-  const overlayOpacity = (0, import_react27.useRef)(new import_react_native12.Animated.Value(0)).current;
-  const parsed = (0, import_react27.useMemo)(() => parseAvatarUrl(user.avatar), [user.avatar]);
-  const [avatarStyle, setAvatarStyle] = (0, import_react27.useState)(parsed.style);
-  const [avatarSeed, setAvatarSeed] = (0, import_react27.useState)(parsed.seed);
-  const [bgColor, setBgColor] = (0, import_react27.useState)(parsed.bg);
-  const [saving, setSaving] = (0, import_react27.useState)(false);
-  const [error, setError] = (0, import_react27.useState)(null);
-  (0, import_react27.useEffect)(() => {
+  const overlayOpacity = (0, import_react28.useRef)(new import_react_native12.Animated.Value(0)).current;
+  const parsed = (0, import_react28.useMemo)(() => parseAvatarUrl(user.avatar), [user.avatar]);
+  const [avatarStyle, setAvatarStyle] = (0, import_react28.useState)(parsed.style);
+  const [avatarSeed, setAvatarSeed] = (0, import_react28.useState)(parsed.seed);
+  const [bgColor, setBgColor] = (0, import_react28.useState)(parsed.bg);
+  const [saving, setSaving] = (0, import_react28.useState)(false);
+  const [error, setError] = (0, import_react28.useState)(null);
+  (0, import_react28.useEffect)(() => {
     const p = parseAvatarUrl(user.avatar);
     setAvatarStyle(p.style);
     setAvatarSeed(p.seed);
     setBgColor(p.bg);
   }, [user.avatar]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     import_react_native12.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (visible) setError(null);
   }, [visible]);
   const currentAvatarUrl = getAvatarUrl(avatarStyle, avatarSeed, bgColor);
-  const saveAvatar = (0, import_react27.useCallback)(async (newUrl) => {
+  const saveAvatar = (0, import_react28.useCallback)(async (newUrl) => {
     setSaving(true);
     setError(null);
     try {
@@ -4259,16 +4286,16 @@ function UserProfileSheet({
       setSaving(false);
     }
   }, [client, refreshUser, onAvatarUpdated]);
-  const handleStyleChange = (0, import_react27.useCallback)((style) => {
+  const handleStyleChange = (0, import_react28.useCallback)((style) => {
     setAvatarStyle(style);
     saveAvatar(getAvatarUrl(style, avatarSeed, bgColor));
   }, [avatarSeed, bgColor, saveAvatar]);
-  const handleShuffle = (0, import_react27.useCallback)(() => {
+  const handleShuffle = (0, import_react28.useCallback)(() => {
     const newSeed = generateSeed();
     setAvatarSeed(newSeed);
     saveAvatar(getAvatarUrl(avatarStyle, newSeed, bgColor));
   }, [avatarStyle, bgColor, saveAvatar]);
-  const handleBgChange = (0, import_react27.useCallback)((color) => {
+  const handleBgChange = (0, import_react28.useCallback)((color) => {
     setBgColor(color);
     saveAvatar(getAvatarUrl(avatarStyle, avatarSeed, color));
   }, [avatarStyle, avatarSeed, saveAvatar]);
@@ -4548,7 +4575,7 @@ var styles6 = import_react_native12.StyleSheet.create({
 });
 
 // src/ui/game/GamePoster.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native13 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function computeCountdown(lockTimestamp) {
@@ -4598,7 +4625,7 @@ function GamePoster({ game, ImageComponent }) {
   ] });
 }
 function TeamLogoInternal({ url, size, Img }) {
-  const [failed, setFailed] = (0, import_react28.useState)(false);
+  const [failed, setFailed] = (0, import_react29.useState)(false);
   if (!url || failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: [styles7.logoPlaceholder, { width: size, height: size, borderRadius: size / 2 }] });
   }
@@ -4699,7 +4726,7 @@ var styles7 = import_react_native13.StyleSheet.create({
 });
 
 // src/ui/game/LivePoolsCard.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_native14 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function LivePoolsCard({
@@ -4715,7 +4742,7 @@ function LivePoolsCard({
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
   const totalPool = game.totalPool || 0;
-  const { homePercent, awayPercent, homeOdds, awayOdds } = (0, import_react29.useMemo)(() => {
+  const { homePercent, awayPercent, homeOdds, awayOdds } = (0, import_react30.useMemo)(() => {
     return {
       homePercent: totalPool > 0 ? homePool / totalPool * 100 : 50,
       awayPercent: totalPool > 0 ? awayPool / totalPool * 100 : 50,
@@ -4778,7 +4805,7 @@ var styles8 = import_react_native14.StyleSheet.create({
 });
 
 // src/ui/game/PickWinnerCard.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_native15 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function PickWinnerCard({
@@ -4796,7 +4823,7 @@ function PickWinnerCard({
   const totalPool = game.totalPool || 0;
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
-  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react30.useMemo)(() => ({
+  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react31.useMemo)(() => ({
     homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
     awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014",
     homeBets: bettors.filter((b) => b.team === "home").length,
@@ -4849,7 +4876,7 @@ function TeamOption({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react30.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react31.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showImage = imageUrl && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -4890,7 +4917,7 @@ var styles9 = import_react_native15.StyleSheet.create({
 });
 
 // src/ui/game/PlayersCard.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_native16 = require("react-native");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function truncateWallet(addr, chars) {
@@ -4939,7 +4966,7 @@ function BettorRow({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react31.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react32.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showAvatar = bettor.avatar && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native16.View, { style: [styles10.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }], children: [
@@ -4966,7 +4993,7 @@ var styles10 = import_react_native16.StyleSheet.create({
 });
 
 // src/ui/game/JoinGameButton.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_native17 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var STATUS_LABELS = {
@@ -4977,7 +5004,7 @@ var STATUS_LABELS = {
 };
 function JoinGameButton({ game, walletAddress, selectedTeam, status, onJoin }) {
   const t = useDubsTheme();
-  const alreadyJoined = (0, import_react32.useMemo)(() => {
+  const alreadyJoined = (0, import_react33.useMemo)(() => {
     if (!walletAddress) return false;
     return (game.bettors || []).some((b) => b.wallet === walletAddress);
   }, [game.bettors, walletAddress]);
@@ -5018,7 +5045,7 @@ var styles11 = import_react_native17.StyleSheet.create({
 });
 
 // src/ui/game/CreateCustomGameSheet.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_native18 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var STATUS_LABELS2 = {
@@ -5044,18 +5071,18 @@ function CreateCustomGameSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useCreateCustomGame();
-  const [selectedAmount, setSelectedAmount] = (0, import_react33.useState)(null);
-  const [customAmount, setCustomAmount] = (0, import_react33.useState)("");
-  const [isCustom, setIsCustom] = (0, import_react33.useState)(false);
-  const overlayOpacity = (0, import_react33.useRef)(new import_react_native18.Animated.Value(0)).current;
-  (0, import_react33.useEffect)(() => {
+  const [selectedAmount, setSelectedAmount] = (0, import_react34.useState)(null);
+  const [customAmount, setCustomAmount] = (0, import_react34.useState)("");
+  const [isCustom, setIsCustom] = (0, import_react34.useState)(false);
+  const overlayOpacity = (0, import_react34.useRef)(new import_react_native18.Animated.Value(0)).current;
+  (0, import_react34.useEffect)(() => {
     import_react_native18.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (visible) {
       setSelectedAmount(defaultAmount ?? null);
       setCustomAmount("");
@@ -5063,7 +5090,7 @@ function CreateCustomGameSheet({
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       onSuccess?.(mutation.data);
       const timer = setTimeout(() => {
@@ -5072,23 +5099,23 @@ function CreateCustomGameSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
   }, [mutation.status, mutation.error]);
-  const handlePresetSelect = (0, import_react33.useCallback)((amount) => {
+  const handlePresetSelect = (0, import_react34.useCallback)((amount) => {
     setSelectedAmount(amount);
     setIsCustom(false);
     setCustomAmount("");
     onAmountChange?.(amount);
   }, [onAmountChange]);
-  const handleCustomSelect = (0, import_react33.useCallback)(() => {
+  const handleCustomSelect = (0, import_react34.useCallback)(() => {
     setIsCustom(true);
     setSelectedAmount(null);
     onAmountChange?.(null);
   }, [onAmountChange]);
-  const handleCustomAmountChange = (0, import_react33.useCallback)((text) => {
+  const handleCustomAmountChange = (0, import_react34.useCallback)((text) => {
     const cleaned = text.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1");
     setCustomAmount(cleaned);
     const parsed = parseFloat(cleaned);
@@ -5103,7 +5130,7 @@ function CreateCustomGameSheet({
   const winnerTakes = pot * (1 - fee / 100);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canCreate = finalAmount !== null && finalAmount > 0 && !isMutating && mutation.status !== "success";
-  const handleCreate = (0, import_react33.useCallback)(async () => {
+  const handleCreate = (0, import_react34.useCallback)(async () => {
     if (!finalAmount || !wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -5372,11 +5399,11 @@ var styles12 = import_react_native18.StyleSheet.create({
 });
 
 // src/ui/game/JoinGameSheet.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_native21 = require("react-native");
 
 // src/ui/game/SolSlider.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_native19 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var THUMB_SIZE = 32;
@@ -5395,9 +5422,9 @@ function SolSlider({
 }) {
   const t = useDubsTheme();
   const accent = accentColor || t.accent;
-  const trackRef = (0, import_react34.useRef)(null);
-  const trackWidth = (0, import_react34.useRef)(0);
-  const lastTickValue = (0, import_react34.useRef)(value);
+  const trackRef = (0, import_react35.useRef)(null);
+  const trackWidth = (0, import_react35.useRef)(0);
+  const lastTickValue = (0, import_react35.useRef)(value);
   const clamp = (v) => {
     const stepped = Math.round(v / step) * step;
     return Math.max(min, Math.min(max, parseFloat(stepped.toFixed(4))));
@@ -5410,7 +5437,7 @@ function SolSlider({
     const ratio2 = Math.max(0, Math.min(1, x / trackWidth.current));
     return clamp(min + ratio2 * (max - min));
   };
-  const panResponder = (0, import_react34.useRef)(
+  const panResponder = (0, import_react35.useRef)(
     import_react_native19.PanResponder.create({
       onStartShouldSetPanResponder: () => !disabled,
       onMoveShouldSetPanResponder: () => !disabled,
@@ -5565,7 +5592,7 @@ var styles13 = import_react_native19.StyleSheet.create({
 });
 
 // src/ui/game/TeamButton.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_native20 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function TeamButton({
@@ -5579,7 +5606,7 @@ function TeamButton({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react35.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react36.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showImage = imageUrl && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -5683,20 +5710,20 @@ function JoinGameSheet({
   const { wallet } = useDubs();
   const mutation = useJoinGame();
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
-  const [selectedTeam, setSelectedTeam] = (0, import_react36.useState)(null);
-  const [wager, setWager] = (0, import_react36.useState)(game.buyIn);
-  const [showSuccess, setShowSuccess] = (0, import_react36.useState)(false);
-  const overlayOpacity = (0, import_react36.useRef)(new import_react_native21.Animated.Value(0)).current;
-  const successScale = (0, import_react36.useRef)(new import_react_native21.Animated.Value(0)).current;
-  const successOpacity = (0, import_react36.useRef)(new import_react_native21.Animated.Value(0)).current;
-  (0, import_react36.useEffect)(() => {
+  const [selectedTeam, setSelectedTeam] = (0, import_react37.useState)(null);
+  const [wager, setWager] = (0, import_react37.useState)(game.buyIn);
+  const [showSuccess, setShowSuccess] = (0, import_react37.useState)(false);
+  const overlayOpacity = (0, import_react37.useRef)(new import_react_native21.Animated.Value(0)).current;
+  const successScale = (0, import_react37.useRef)(new import_react_native21.Animated.Value(0)).current;
+  const successOpacity = (0, import_react37.useRef)(new import_react_native21.Animated.Value(0)).current;
+  (0, import_react37.useEffect)(() => {
     import_react_native21.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? "home" : isCustomGame ? "away" : null);
       setWager(game.buyIn);
@@ -5706,7 +5733,7 @@ function JoinGameSheet({
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       setShowSuccess(true);
       onSuccess?.(mutation.data);
@@ -5723,7 +5750,7 @@ function JoinGameSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
@@ -5738,7 +5765,7 @@ function JoinGameSheet({
   const drawBettors = bettors.filter((b) => b.team === "draw");
   const hasDrawOption = drawPool > 0 || drawBettors.length > 0 || game.league && ["English Premier League", "EPL", "MLS", "La Liga", "Serie A", "Bundesliga", "Ligue 1"].some((l) => (game.league || "").includes(l));
   const poolAfterJoin = totalPool + wager;
-  const { homeOdds, awayOdds, drawOdds, homeBets, awayBets, drawBets } = (0, import_react36.useMemo)(() => {
+  const { homeOdds, awayOdds, drawOdds, homeBets, awayBets, drawBets } = (0, import_react37.useMemo)(() => {
     const homeBetsCount = bettors.filter((b) => b.team === "home").length;
     const awayBetsCount = bettors.filter((b) => b.team === "away").length;
     const drawBetsCount = bettors.filter((b) => b.team === "draw").length;
@@ -5759,7 +5786,7 @@ function JoinGameSheet({
   const potentialWinnings = selectedOdds !== "\u2014" ? formatSol(parseFloat(selectedOdds) * wager) : "\u2014";
   const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
   const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
-  const myBet = (0, import_react36.useMemo)(() => {
+  const myBet = (0, import_react37.useMemo)(() => {
     if (!wallet.publicKey) return null;
     const addr = wallet.publicKey.toBase58();
     return bettors.find((b) => b.wallet === addr) ?? null;
@@ -5767,7 +5794,7 @@ function JoinGameSheet({
   const alreadyJoined = myBet !== null;
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canJoin = selectedTeam !== null && !isMutating && mutation.status !== "success" && !alreadyJoined;
-  const handleJoin = (0, import_react36.useCallback)(async () => {
+  const handleJoin = (0, import_react37.useCallback)(async () => {
     if (!selectedTeam || !wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -5827,13 +5854,15 @@ function JoinGameSheet({
                   ] }) })
                 ] })
               ] }),
-              !isCustomGame && !isPoolModeEnabled && !alreadyJoined && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.section, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.teamsRow, children: [
+              !isCustomGame && !isPoolModeEnabled && !alreadyJoined && (hasDrawOption ? (
+                /* ── 3-way layout: Home / VS / Away / OR / Draw ── */
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.section, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Who will win?" }),
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    TeamButton,
+                    PickRow,
                     {
                       name: homeName,
+                      subtitle: "Home Team",
                       imageUrl: opponents[0]?.imageUrl,
                       odds: homeOdds,
                       bets: homeBets,
@@ -5847,10 +5876,16 @@ function JoinGameSheet({
                       t
                     }
                   ),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.dividerRow, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [styles15.dividerLine, { backgroundColor: t.border }] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.dividerText, { color: t.textMuted }], children: "VS" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [styles15.dividerLine, { backgroundColor: t.border }] })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    TeamButton,
+                    PickRow,
                     {
                       name: awayName,
+                      subtitle: "Away Team",
                       imageUrl: opponents[1]?.imageUrl,
                       odds: awayOdds,
                       bets: awayBets,
@@ -5863,24 +5898,71 @@ function JoinGameSheet({
                       ImageComponent,
                       t
                     }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.dividerRow, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [styles15.dividerLine, { backgroundColor: t.border }] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.dividerText, { color: t.textMuted }], children: "OR" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [styles15.dividerLine, { backgroundColor: t.border }] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    PickRow,
+                    {
+                      name: "Draw",
+                      subtitle: "Match ends in a tie",
+                      odds: drawOdds,
+                      bets: drawBets,
+                      color: drawColor,
+                      selected: selectedTeam === "draw",
+                      onPress: () => {
+                        setSelectedTeam("draw");
+                        onTeamSelect?.("draw");
+                      },
+                      t
+                    }
                   )
-                ] }),
-                hasDrawOption && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: styles15.drawRow, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  TeamButton,
-                  {
-                    name: "Draw",
-                    odds: drawOdds,
-                    bets: drawBets,
-                    color: drawColor,
-                    selected: selectedTeam === "draw",
-                    onPress: () => {
-                      setSelectedTeam("draw");
-                      onTeamSelect?.("draw");
-                    },
-                    t
-                  }
-                ) })
-              ] }),
+                ] })
+              ) : (
+                /* ── 2-way layout: side by side ── */
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.section, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: styles15.teamsRow, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      TeamButton,
+                      {
+                        name: homeName,
+                        imageUrl: opponents[0]?.imageUrl,
+                        odds: homeOdds,
+                        bets: homeBets,
+                        color: homeColor,
+                        selected: selectedTeam === "home",
+                        onPress: () => {
+                          setSelectedTeam("home");
+                          onTeamSelect?.("home");
+                        },
+                        ImageComponent,
+                        t
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      TeamButton,
+                      {
+                        name: awayName,
+                        imageUrl: opponents[1]?.imageUrl,
+                        odds: awayOdds,
+                        bets: awayBets,
+                        color: awayColor,
+                        selected: selectedTeam === "away",
+                        onPress: () => {
+                          setSelectedTeam("away");
+                          onTeamSelect?.("away");
+                        },
+                        ImageComponent,
+                        t
+                      }
+                    )
+                  ] })
+                ] })
+              )),
               alreadyJoined && myBet && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: [styles15.myBetCard, { backgroundColor: (myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor) + "15", borderColor: myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor }], children: [
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.myBetLabel, { color: myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor }], children: "YOUR BET" }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [styles15.myBetTeam, { color: t.text }], children: myBet.team === "home" ? homeName : myBet.team === "away" ? awayName : "Draw" }),
@@ -5963,6 +6045,100 @@ function JoinGameSheet({
     }
   );
 }
+function PickRow({
+  name,
+  subtitle,
+  imageUrl,
+  odds,
+  bets,
+  color,
+  selected,
+  onPress,
+  ImageComponent,
+  t
+}) {
+  const [imgFailed, setImgFailed] = (0, import_react37.useState)(false);
+  const Img = ImageComponent || require("react-native").Image;
+  const showImage = imageUrl && !imgFailed;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_react_native21.TouchableOpacity,
+    {
+      style: [pickStyles.row, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + "12" : t.background }],
+      onPress,
+      activeOpacity: 0.7,
+      children: [
+        showImage ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Img, { source: { uri: imageUrl }, style: pickStyles.logo, resizeMode: "contain", onError: () => setImgFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [pickStyles.logoPlaceholder, { backgroundColor: color + "20" }], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [pickStyles.logoEmoji, { color }], children: name === "Draw" ? "\u{1F91D}" : name.charAt(0) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: pickStyles.info, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [pickStyles.name, { color: t.text }], children: name }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [pickStyles.subtitle, { color: t.textMuted }], children: subtitle })
+        ] }),
+        odds !== "\u2014" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.Text, { style: [pickStyles.odds, { color }], children: [
+          odds,
+          "x"
+        ] }),
+        bets > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: [pickStyles.bets, { color: t.textMuted }], children: bets }),
+        selected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: [pickStyles.check, { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.Text, { style: pickStyles.checkText, children: "\u2713" }) })
+      ]
+    }
+  );
+}
+var pickStyles = import_react_native21.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1.5,
+    borderRadius: 14,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    gap: 12
+  },
+  logo: {
+    width: 36,
+    height: 36,
+    borderRadius: 18
+  },
+  logoPlaceholder: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  logoEmoji: {
+    fontSize: 16,
+    fontWeight: "800"
+  },
+  info: {
+    flex: 1
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  subtitle: {
+    fontSize: 12,
+    marginTop: 1
+  },
+  odds: {
+    fontSize: 16,
+    fontWeight: "800"
+  },
+  bets: {
+    fontSize: 12
+  },
+  check: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkText: {
+    color: "#FFF",
+    fontSize: 13,
+    fontWeight: "800"
+  }
+});
 var styles15 = import_react_native21.StyleSheet.create({
   overlay: {
     ...import_react_native21.StyleSheet.absoluteFillObject,
@@ -6085,6 +6261,20 @@ var styles15 = import_react_native21.StyleSheet.create({
   drawRow: {
     marginTop: 8
   },
+  dividerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginVertical: 6
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1
+  },
+  dividerText: {
+    fontSize: 12,
+    fontWeight: "700"
+  },
   summaryCard: {
     marginTop: 20,
     borderRadius: 16,
@@ -6160,7 +6350,7 @@ var styles15 = import_react_native21.StyleSheet.create({
 });
 
 // src/ui/game/ClaimPrizeSheet.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_react_native22 = require("react-native");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var STATUS_LABELS4 = {
@@ -6181,18 +6371,18 @@ function ClaimPrizeSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useClaim();
-  const overlayOpacity = (0, import_react37.useRef)(new import_react_native22.Animated.Value(0)).current;
-  const celebrationScale = (0, import_react37.useRef)(new import_react_native22.Animated.Value(0)).current;
-  const celebrationOpacity = (0, import_react37.useRef)(new import_react_native22.Animated.Value(0)).current;
-  const [showCelebration, setShowCelebration] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const overlayOpacity = (0, import_react38.useRef)(new import_react_native22.Animated.Value(0)).current;
+  const celebrationScale = (0, import_react38.useRef)(new import_react_native22.Animated.Value(0)).current;
+  const celebrationOpacity = (0, import_react38.useRef)(new import_react_native22.Animated.Value(0)).current;
+  const [showCelebration, setShowCelebration] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     import_react_native22.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (visible) {
       mutation.reset();
       setShowCelebration(false);
@@ -6200,7 +6390,7 @@ function ClaimPrizeSheet({
       celebrationOpacity.setValue(0);
     }
   }, [visible]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       setShowCelebration(true);
       import_react_native22.Animated.parallel([
@@ -6223,14 +6413,14 @@ function ClaimPrizeSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
   }, [mutation.status, mutation.error]);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canClaim = !isMutating && mutation.status !== "success" && !!wallet.publicKey;
-  const handleClaim = (0, import_react37.useCallback)(async () => {
+  const handleClaim = (0, import_react38.useCallback)(async () => {
     if (!wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -6463,7 +6653,7 @@ var styles16 = import_react_native22.StyleSheet.create({
 });
 
 // src/ui/game/ClaimButton.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_native23 = require("react-native");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function ClaimButton({ gameId, style, onSuccess, onError }) {
@@ -6471,9 +6661,9 @@ function ClaimButton({ gameId, style, onSuccess, onError }) {
   const { wallet } = useDubs();
   const game = useGame(gameId);
   const claimStatus = useHasClaimed(gameId);
-  const [sheetVisible, setSheetVisible] = (0, import_react38.useState)(false);
+  const [sheetVisible, setSheetVisible] = (0, import_react39.useState)(false);
   const walletAddress = wallet.publicKey?.toBase58() ?? null;
-  const myBet = (0, import_react38.useMemo)(() => {
+  const myBet = (0, import_react39.useMemo)(() => {
     if (!walletAddress || !game.data?.bettors) return null;
     return game.data.bettors.find((b) => b.wallet === walletAddress) ?? null;
   }, [walletAddress, game.data?.bettors]);
@@ -6482,7 +6672,7 @@ function ClaimButton({ gameId, style, onSuccess, onError }) {
   const isWinner = isResolved && myBet != null && myBet.team === game.data?.winnerSide;
   const isEligible = myBet != null && isResolved && (isWinner || isRefund);
   const prizeAmount = isRefund ? myBet?.amount ?? 0 : game.data?.totalPool ?? 0;
-  const handleSuccess = (0, import_react38.useCallback)(
+  const handleSuccess = (0, import_react39.useCallback)(
     (result) => {
       claimStatus.refetch();
       onSuccess?.(result);
@@ -6569,7 +6759,7 @@ var styles17 = import_react_native23.StyleSheet.create({
 });
 
 // src/ui/game/EnterArcadePoolSheet.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_native24 = require("react-native");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var STATUS_LABELS5 = {
@@ -6590,20 +6780,20 @@ function EnterArcadePoolSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useEnterArcadePool();
-  const overlayOpacity = (0, import_react39.useRef)(new import_react_native24.Animated.Value(0)).current;
-  (0, import_react39.useEffect)(() => {
+  const overlayOpacity = (0, import_react40.useRef)(new import_react_native24.Animated.Value(0)).current;
+  (0, import_react40.useEffect)(() => {
     import_react_native24.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (visible) {
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       onSuccess?.(mutation.data);
       const timer = setTimeout(() => {
@@ -6612,7 +6802,7 @@ function EnterArcadePoolSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
@@ -6624,7 +6814,7 @@ function EnterArcadePoolSheet({
   const potSol = (pool.buy_in_lamports * Number(totalBuyIns) / 1e9).toFixed(4);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canJoin = !isMutating && mutation.status !== "success";
-  const handleJoin = (0, import_react39.useCallback)(async () => {
+  const handleJoin = (0, import_react40.useCallback)(async () => {
     if (!wallet.publicKey) return;
     try {
       await mutation.execute(pool.id);
@@ -6775,7 +6965,7 @@ var styles18 = import_react_native24.StyleSheet.create({
 });
 
 // src/ui/game/ArcadeLeaderboardSheet.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_react_native25 = require("react-native");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function RankLabel({ index }) {
@@ -6792,15 +6982,15 @@ function ArcadeLeaderboardSheet({
 }) {
   const t = useDubsTheme();
   const { pool, leaderboard, stats, loading, refetch } = useArcadePool(poolId);
-  const overlayOpacity = (0, import_react40.useRef)(new import_react_native25.Animated.Value(0)).current;
-  (0, import_react40.useEffect)(() => {
+  const overlayOpacity = (0, import_react41.useRef)(new import_react_native25.Animated.Value(0)).current;
+  (0, import_react41.useEffect)(() => {
     import_react_native25.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (visible) refetch();
   }, [visible]);
   const renderItem = ({ item, index }) => {
@@ -6947,7 +7137,7 @@ var styles19 = import_react_native25.StyleSheet.create({
 });
 
 // src/ui/game/CreateGameSheet.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_react_native26 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var STATUS_LABELS6 = {
@@ -6976,20 +7166,20 @@ function CreateGameSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useCreateGame();
-  const [selectedTeam, setSelectedTeam] = (0, import_react41.useState)(null);
-  const [wager, setWager] = (0, import_react41.useState)(0.01);
-  const [showSuccess, setShowSuccess] = (0, import_react41.useState)(false);
-  const overlayOpacity = (0, import_react41.useRef)(new import_react_native26.Animated.Value(0)).current;
-  const successScale = (0, import_react41.useRef)(new import_react_native26.Animated.Value(0)).current;
-  const successOpacity = (0, import_react41.useRef)(new import_react_native26.Animated.Value(0)).current;
-  (0, import_react41.useEffect)(() => {
+  const [selectedTeam, setSelectedTeam] = (0, import_react42.useState)(null);
+  const [wager, setWager] = (0, import_react42.useState)(0.01);
+  const [showSuccess, setShowSuccess] = (0, import_react42.useState)(false);
+  const overlayOpacity = (0, import_react42.useRef)(new import_react_native26.Animated.Value(0)).current;
+  const successScale = (0, import_react42.useRef)(new import_react_native26.Animated.Value(0)).current;
+  const successOpacity = (0, import_react42.useRef)(new import_react_native26.Animated.Value(0)).current;
+  (0, import_react42.useEffect)(() => {
     import_react_native26.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (visible) {
       setSelectedTeam(null);
       setWager(0.01);
@@ -6999,7 +7189,7 @@ function CreateGameSheet({
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       setShowSuccess(true);
       onSuccess?.(mutation.data);
@@ -7016,7 +7206,7 @@ function CreateGameSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
@@ -7026,7 +7216,7 @@ function CreateGameSheet({
   const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canCreate = selectedTeam !== null && !isMutating && mutation.status !== "success";
-  const handleCreate = (0, import_react41.useCallback)(async () => {
+  const handleCreate = (0, import_react42.useCallback)(async () => {
     if (!selectedTeam || !wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -7231,6 +7421,7 @@ var styles20 = import_react_native26.StyleSheet.create({
   useJoinGame,
   useNetworkGames,
   usePushNotifications,
+  useShorts,
   useUFCFightCard,
   useUFCFighterDetail
 });