@dubsdotapp/expo 0.1.3 → 0.2.1

package/dist/index.mjs

@@ -1,6 +1,25 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/constants.ts
 var DEFAULT_BASE_URL = "https://dubs-server-prod-9c91d3f01199.herokuapp.com/api/developer/v1";
 var DEFAULT_RPC_URL = "https://api.mainnet-beta.solana.com";
+var NETWORK_CONFIG = {
+  "mainnet-beta": {
+    baseUrl: DEFAULT_BASE_URL,
+    rpcUrl: DEFAULT_RPC_URL,
+    cluster: "mainnet-beta"
+  },
+  devnet: {
+    baseUrl: "https://dubs-server-dev-55d1fba09a97.herokuapp.com/api/developer/v1",
+    rpcUrl: "https://api.devnet.solana.com",
+    cluster: "devnet"
+  }
+};
 
 // src/errors.ts
 var DubsApiError = class extends Error {
@@ -134,12 +153,20 @@ var DubsClient = class {
     if (this._token) {
       headers["Authorization"] = `Bearer ${this._token}`;
     }
+    console.log(`[DubsClient] ${method} ${url}`, body ? JSON.stringify(body).slice(0, 200) : "");
     const res = await fetch(url, {
       method,
       headers,
       body: body ? JSON.stringify(body) : void 0
     });
-    const json = await res.json();
+    const text = await res.text();
+    console.log(`[DubsClient] ${method} ${path} \u2192 ${res.status}`, text.slice(0, 300));
+    let json;
+    try {
+      json = JSON.parse(text);
+    } catch {
+      throw new DubsApiError("parse_error", `Invalid JSON response: ${text.slice(0, 100)}`, res.status);
+    }
     if (!json.success) {
       const err = json.error;
       if (typeof err === "object" && err !== null) {
@@ -259,6 +286,13 @@ var DubsClient = class {
     );
     return res.game;
   }
+  async getLiveScore(gameId) {
+    const res = await this.request(
+      "GET",
+      `/games/${encodeURIComponent(gameId)}/live-score`
+    );
+    return res.liveScore;
+  }
   async getGames(params) {
     const qs = new URLSearchParams();
     if (params?.wallet) qs.set("wallet", params.wallet);
@@ -276,6 +310,7 @@ var DubsClient = class {
   async getNetworkGames(params) {
     const qs = new URLSearchParams();
     if (params?.league) qs.set("league", params.league);
+    if (params?.exclude_wallet) qs.set("exclude_wallet", params.exclude_wallet);
     if (params?.limit != null) qs.set("limit", String(params.limit));
     if (params?.offset != null) qs.set("offset", String(params.offset));
     const query = qs.toString();
@@ -382,29 +417,56 @@ var DubsClient = class {
   getErrorCodesLocal() {
     return { ...SOLANA_PROGRAM_ERRORS };
   }
+  // ── App Config ──
+  /** Fetch the app's UI customization config (accent color, icon, tagline) */
+  async getAppConfig() {
+    const res = await this.request("GET", "/apps/config");
+    return res.uiConfig || {};
+  }
 };
 
-// src/provider.tsx
-import { createContext, useContext, useMemo } from "react";
-import { Connection } from "@solana/web3.js";
-import { jsx } from "react/jsx-runtime";
-var DubsContext = createContext(null);
-function DubsProvider({ apiKey, baseUrl, rpcUrl, wallet, children }) {
-  const value = useMemo(() => {
-    const client = new DubsClient({ apiKey, baseUrl });
-    const connection = new Connection(rpcUrl || DEFAULT_RPC_URL, { commitment: "confirmed" });
-    return { client, wallet, connection };
-  }, [apiKey, baseUrl, rpcUrl, wallet]);
-  return /* @__PURE__ */ jsx(DubsContext.Provider, { value, children });
-}
-function useDubs() {
-  const ctx = useContext(DubsContext);
-  if (!ctx) {
-    throw new Error("useDubs must be used within a <DubsProvider>");
+// src/storage.ts
+var STORAGE_KEYS = {
+  MWA_AUTH_TOKEN: "dubs_mwa_auth_token",
+  JWT_TOKEN: "dubs_jwt_token"
+};
+function createSecureStoreStorage() {
+  let SecureStore = null;
+  function getStore() {
+    if (!SecureStore) {
+      try {
+        SecureStore = __require("expo-secure-store");
+      } catch {
+        throw new Error(
+          "@dubsdotapp/expo: expo-secure-store is required for default token storage. Install it with: npx expo install expo-secure-store \u2014 or pass a custom tokenStorage prop to <DubsProvider>."
+        );
+      }
+    }
+    return SecureStore;
   }
-  return ctx;
+  return {
+    async getItem(key) {
+      const store = getStore();
+      return store.getItemAsync(key);
+    },
+    async setItem(key, value) {
+      const store = getStore();
+      await store.setItemAsync(key, value);
+    },
+    async deleteItem(key) {
+      const store = getStore();
+      await store.deleteItemAsync(key);
+    }
+  };
 }
 
+// src/provider.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo, useCallback as useCallback11, useState as useState11, useEffect as useEffect7 } from "react";
+import { Connection } from "@solana/web3.js";
+
+// src/managed-wallet.tsx
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from "react";
+
 // src/wallet/mwa-adapter.ts
 import { PublicKey } from "@solana/web3.js";
 function toPublicKey(address) {
@@ -428,6 +490,12 @@ var MwaWalletAdapter = class {
   get connected() {
     return this._connected;
   }
+  get authToken() {
+    return this._authToken;
+  }
+  setAuthToken(token) {
+    this._authToken = token;
+  }
   /**
    * Connect to a mobile wallet. Call this before any signing.
    */
@@ -491,26 +559,328 @@ var MwaWalletAdapter = class {
       return result[0];
     });
     if (signature instanceof Uint8Array) {
-      const bs582 = await import("@solana/web3.js").then(() => {
-        return new PublicKey(signature).toBase58();
-      }).catch(() => {
-        return Buffer.from(signature).toString("base64");
-      });
-      return bs582;
+      return new PublicKey(signature).toBase58();
     }
     return String(signature);
   }
 };
 
+// src/ui/ConnectWalletScreen.tsx
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  Image
+} from "react-native";
+
+// src/ui/theme.ts
+import { useColorScheme } from "react-native";
+var dark = {
+  background: "#08080D",
+  surface: "#111118",
+  surfaceActive: "#7C3AED",
+  border: "#1A1A24",
+  text: "#FFFFFF",
+  textSecondary: "#E0E0EE",
+  textMuted: "#666666",
+  textDim: "#555555",
+  accent: "#7C3AED",
+  success: "#22C55E",
+  live: "#EF4444",
+  errorText: "#F87171",
+  errorBg: "#1A0A0A",
+  errorBorder: "#3A1515"
+};
+var light = {
+  background: "#FFFFFF",
+  surface: "#F0F0F5",
+  surfaceActive: "#7C3AED",
+  border: "#E0E0E8",
+  text: "#111118",
+  textSecondary: "#333333",
+  textMuted: "#888888",
+  textDim: "#999999",
+  accent: "#7C3AED",
+  success: "#16A34A",
+  live: "#DC2626",
+  errorText: "#DC2626",
+  errorBg: "#FEF2F2",
+  errorBorder: "#FECACA"
+};
+function useDubsTheme() {
+  const scheme = useColorScheme();
+  return scheme === "light" ? light : dark;
+}
+function mergeTheme(base, overrides) {
+  return { ...base, ...overrides };
+}
+
+// src/ui/ConnectWalletScreen.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConnectWalletScreen({
+  onConnect,
+  connecting = false,
+  error = null,
+  appName = "Dubs",
+  accentColor,
+  appIcon,
+  tagline
+}) {
+  const t = useDubsTheme();
+  const accent = accentColor || t.accent;
+  return /* @__PURE__ */ jsx(View, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.brandingSection, children: [
+      appIcon ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          source: { uri: appIcon },
+          style: styles.logoImage
+        }
+      ) : /* @__PURE__ */ jsx(View, { style: [styles.logoCircle, { backgroundColor: accent }], children: /* @__PURE__ */ jsx(Text, { style: styles.logoText, children: appName.charAt(0).toUpperCase() }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.appName, { color: t.text }], children: appName }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, { color: t.textMuted }], children: tagline || "Connect your Solana wallet to get started" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.actionSection, children: [
+      error ? /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles.errorBox,
+            { backgroundColor: t.errorBg, borderColor: t.errorBorder }
+          ],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.errorText, { color: t.errorText }], children: error })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          style: [styles.connectButton, { backgroundColor: accent }],
+          onPress: onConnect,
+          disabled: connecting,
+          activeOpacity: 0.8,
+          children: connecting ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.connectButtonText, children: "Connect Wallet" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
+    ] })
+  ] }) });
+}
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  content: {
+    flex: 1,
+    justifyContent: "space-between",
+    paddingHorizontal: 32,
+    paddingTop: 120,
+    paddingBottom: 80
+  },
+  brandingSection: {
+    alignItems: "center",
+    gap: 12
+  },
+  logoCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  logoImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+    marginBottom: 8
+  },
+  logoText: {
+    fontSize: 36,
+    fontWeight: "800",
+    color: "#FFFFFF"
+  },
+  appName: {
+    fontSize: 32,
+    fontWeight: "800"
+  },
+  subtitle: {
+    fontSize: 16,
+    textAlign: "center",
+    lineHeight: 22
+  },
+  actionSection: {
+    gap: 16
+  },
+  errorBox: {
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: "center"
+  },
+  connectButton: {
+    height: 56,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  connectButtonText: {
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontWeight: "700"
+  },
+  hint: {
+    fontSize: 13,
+    textAlign: "center"
+  }
+});
+
+// src/managed-wallet.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var DisconnectContext = createContext(null);
+function useDisconnect() {
+  return useContext(DisconnectContext);
+}
+function ManagedWalletProvider({
+  appName,
+  cluster,
+  storage,
+  renderConnectScreen,
+  accentColor,
+  appIcon,
+  tagline,
+  children
+}) {
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState(null);
+  const adapterRef = useRef(null);
+  const transactRef = useRef(null);
+  if (!adapterRef.current) {
+    adapterRef.current = new MwaWalletAdapter({
+      transact: (...args) => {
+        if (!transactRef.current) {
+          throw new Error(
+            "@dubsdotapp/expo: @solana-mobile/mobile-wallet-adapter-protocol-web3js is required. Install it with: npm install @solana-mobile/mobile-wallet-adapter-protocol-web3js"
+          );
+        }
+        return transactRef.current(...args);
+      },
+      appIdentity: { name: appName },
+      cluster,
+      onAuthTokenChange: (token) => {
+        if (token) {
+          storage.setItem(STORAGE_KEYS.MWA_AUTH_TOKEN, token).catch(() => {
+          });
+        } else {
+          storage.deleteItem(STORAGE_KEYS.MWA_AUTH_TOKEN).catch(() => {
+          });
+        }
+      }
+    });
+  }
+  const adapter = adapterRef.current;
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const mwa = await import("@solana-mobile/mobile-wallet-adapter-protocol-web3js");
+        if (cancelled) return;
+        transactRef.current = mwa.transact;
+      } catch {
+      }
+      try {
+        const savedToken = await storage.getItem(STORAGE_KEYS.MWA_AUTH_TOKEN);
+        if (savedToken && !cancelled) {
+          adapter.setAuthToken(savedToken);
+          await adapter.connect();
+          if (!cancelled) setConnected(true);
+        }
+      } catch {
+      } finally {
+        if (!cancelled) setIsReady(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter, storage]);
+  const handleConnect = useCallback(async () => {
+    setConnecting(true);
+    setError(null);
+    try {
+      await adapter.connect();
+      setConnected(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Connection failed";
+      setError(message);
+    } finally {
+      setConnecting(false);
+    }
+  }, [adapter]);
+  const disconnect = useCallback(async () => {
+    adapter.disconnect();
+    await storage.deleteItem(STORAGE_KEYS.MWA_AUTH_TOKEN).catch(() => {
+    });
+    await storage.deleteItem(STORAGE_KEYS.JWT_TOKEN).catch(() => {
+    });
+    setConnected(false);
+  }, [adapter, storage]);
+  if (!isReady) return null;
+  if (!connected) {
+    if (renderConnectScreen === false) {
+      return null;
+    }
+    const connectProps = {
+      onConnect: handleConnect,
+      connecting,
+      error,
+      appName,
+      accentColor,
+      appIcon,
+      tagline
+    };
+    if (renderConnectScreen) {
+      return /* @__PURE__ */ jsx2(Fragment, { children: renderConnectScreen(connectProps) });
+    }
+    return /* @__PURE__ */ jsx2(ConnectWalletScreen, { ...connectProps });
+  }
+  return /* @__PURE__ */ jsx2(DisconnectContext.Provider, { value: disconnect, children: children(adapter) });
+}
+
+// src/ui/AuthGate.tsx
+import React2, { useState as useState10, useEffect as useEffect6, useRef as useRef3, useCallback as useCallback10 } from "react";
+import {
+  View as View2,
+  Text as Text2,
+  TextInput,
+  TouchableOpacity as TouchableOpacity2,
+  ActivityIndicator as ActivityIndicator2,
+  StyleSheet as StyleSheet2,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Image as Image2,
+  Animated,
+  ScrollView
+} from "react-native";
+
 // src/hooks/useEvents.ts
-import { useState, useEffect, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 function useEvents(params) {
   const { client } = useDubs();
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [data, setData] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = useCallback(async () => {
+  const fetchData = useCallback2(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -522,20 +892,20 @@ function useEvents(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  useEffect(() => {
+  useEffect2(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useGame.ts
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
 function useGame(gameId) {
   const { client } = useDubs();
-  const [data, setData] = useState2(null);
-  const [loading, setLoading] = useState2(!!gameId);
-  const [error, setError] = useState2(null);
-  const fetchData = useCallback2(async () => {
+  const [data, setData] = useState3(null);
+  const [loading, setLoading] = useState3(!!gameId);
+  const [error, setError] = useState3(null);
+  const fetchData = useCallback3(async () => {
     if (!gameId) return;
     setLoading(true);
     setError(null);
@@ -548,21 +918,21 @@ function useGame(gameId) {
       setLoading(false);
     }
   }, [client, gameId]);
-  useEffect2(() => {
+  useEffect3(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useGames.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 function useGames(params) {
   const { client } = useDubs();
-  const [data, setData] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3(null);
+  const [data, setData] = useState4(null);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = useCallback3(async () => {
+  const fetchData = useCallback4(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -574,21 +944,21 @@ function useGames(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useNetworkGames.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 function useNetworkGames(params) {
   const { client } = useDubs();
-  const [data, setData] = useState4(null);
-  const [loading, setLoading] = useState4(true);
-  const [error, setError] = useState4(null);
+  const [data, setData] = useState5(null);
+  const [loading, setLoading] = useState5(true);
+  const [error, setError] = useState5(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = useCallback4(async () => {
+  const fetchData = useCallback5(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -600,78 +970,59 @@ function useNetworkGames(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useCreateGame.ts
-import { useState as useState5, useCallback as useCallback5 } from "react";
+import { useState as useState6, useCallback as useCallback6 } from "react";
 
 // src/utils/transaction.ts
 import { Transaction as Transaction2 } from "@solana/web3.js";
-async function signAndSendBase64Transaction(base64Tx, wallet, connection) {
+async function signAndSendBase64Transaction(base64Tx, wallet) {
   if (!wallet.publicKey) throw new Error("Wallet not connected");
-  const txBuffer = Buffer.from(base64Tx, "base64");
-  const transaction = Transaction2.from(txBuffer);
+  const binaryStr = atob(base64Tx);
+  const bytes = new Uint8Array(binaryStr.length);
+  for (let i = 0; i < binaryStr.length; i++) {
+    bytes[i] = binaryStr.charCodeAt(i);
+  }
+  const transaction = Transaction2.from(bytes);
   if (wallet.signAndSendTransaction) {
     return wallet.signAndSendTransaction(transaction);
   }
-  const signed = await wallet.signTransaction(transaction);
-  const signature = await connection.sendRawTransaction(signed.serialize(), {
-    skipPreflight: true
-  });
-  return signature;
-}
-async function pollTransactionConfirmation(signature, connection, commitment = "confirmed", timeout = 6e4, interval = 1500) {
-  const start = Date.now();
-  const confirmationOrder = ["processed", "confirmed", "finalized"];
-  const targetIndex = confirmationOrder.indexOf(commitment);
-  while (Date.now() - start < timeout) {
-    const statuses = await connection.getSignatureStatuses([signature]);
-    const status = statuses?.value?.[0];
-    if (status?.err) {
-      throw new Error(`Transaction failed: ${JSON.stringify(status.err)}`);
-    }
-    if (status?.confirmationStatus) {
-      const currentIndex = confirmationOrder.indexOf(status.confirmationStatus);
-      if (currentIndex >= targetIndex) {
-        return;
-      }
-    }
-    await new Promise((resolve) => setTimeout(resolve, interval));
-  }
-  throw new Error(`Transaction confirmation timeout after ${timeout}ms`);
+  throw new Error("Wallet does not support signAndSendTransaction");
 }
 
 // src/hooks/useCreateGame.ts
 function useCreateGame() {
-  const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = useState5("idle");
-  const [error, setError] = useState5(null);
-  const [data, setData] = useState5(null);
-  const reset = useCallback5(() => {
+  const { client, wallet } = useDubs();
+  const [status, setStatus] = useState6("idle");
+  const [error, setError] = useState6(null);
+  const [data, setData] = useState6(null);
+  const reset = useCallback6(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = useCallback5(async (params) => {
+  const execute = useCallback6(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
     try {
+      console.log("[useCreateGame] Step 1: Building transaction...");
       const createResult = await client.createGame(params);
+      console.log("[useCreateGame] Step 1 done:", { gameId: createResult.gameId, gameAddress: createResult.gameAddress });
       setStatus("signing");
+      console.log("[useCreateGame] Step 2: Signing and sending...");
       const signature = await signAndSendBase64Transaction(
         createResult.transaction,
-        wallet,
-        connection
+        wallet
       );
+      console.log("[useCreateGame] Step 2 done. Signature:", signature);
       setStatus("confirming");
-      await pollTransactionConfirmation(signature, connection);
-      setStatus("saving");
-      const explorerUrl = `https://solscan.io/tx/${signature}`;
+      console.log("[useCreateGame] Step 3: Confirming with backend...");
       await client.confirmGame({
         gameId: createResult.gameId,
         playerWallet: params.playerWallet,
@@ -681,6 +1032,8 @@ function useCreateGame() {
         role: "creator",
         gameAddress: createResult.gameAddress
       });
+      console.log("[useCreateGame] Step 3 done.");
+      const explorerUrl = `https://solscan.io/tx/${signature}`;
       const result = {
         gameId: createResult.gameId,
         gameAddress: createResult.gameAddress,
@@ -689,46 +1042,48 @@ function useCreateGame() {
       };
       setData(result);
       setStatus("success");
+      console.log("[useCreateGame] Complete!");
       return result;
     } catch (err) {
+      console.error("[useCreateGame] FAILED:", err);
       const error2 = err instanceof Error ? err : new Error(String(err));
       setError(error2);
       setStatus("error");
       throw error2;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
   return { execute, status, error, data, reset };
 }
 
 // src/hooks/useJoinGame.ts
-import { useState as useState6, useCallback as useCallback6 } from "react";
+import { useState as useState7, useCallback as useCallback7 } from "react";
 function useJoinGame() {
-  const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = useState6("idle");
-  const [error, setError] = useState6(null);
-  const [data, setData] = useState6(null);
-  const reset = useCallback6(() => {
+  const { client, wallet } = useDubs();
+  const [status, setStatus] = useState7("idle");
+  const [error, setError] = useState7(null);
+  const [data, setData] = useState7(null);
+  const reset = useCallback7(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = useCallback6(async (params) => {
+  const execute = useCallback7(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
     try {
+      console.log("[useJoinGame] Step 1: Building transaction...", { gameId: params.gameId, playerWallet: params.playerWallet, teamChoice: params.teamChoice, amount: params.amount });
       const joinResult = await client.joinGame(params);
+      console.log("[useJoinGame] Step 1 done:", { gameId: joinResult.gameId, gameAddress: joinResult.gameAddress, hasTx: !!joinResult.transaction });
       setStatus("signing");
+      console.log("[useJoinGame] Step 2: Signing and sending transaction...");
       const signature = await signAndSendBase64Transaction(
         joinResult.transaction,
-        wallet,
-        connection
+        wallet
       );
+      console.log("[useJoinGame] Step 2 done. Signature:", signature);
       setStatus("confirming");
-      await pollTransactionConfirmation(signature, connection);
-      setStatus("saving");
-      const explorerUrl = `https://solscan.io/tx/${signature}`;
-      await client.confirmGame({
+      const confirmParams = {
         gameId: params.gameId,
         playerWallet: params.playerWallet,
         signature,
@@ -736,7 +1091,11 @@ function useJoinGame() {
         wagerAmount: params.amount,
         role: "joiner",
         gameAddress: joinResult.gameAddress
-      });
+      };
+      console.log("[useJoinGame] Step 3: Confirming with backend...", confirmParams);
+      await client.confirmGame(confirmParams);
+      console.log("[useJoinGame] Step 3 done. Backend confirmed.");
+      const explorerUrl = `https://solscan.io/tx/${signature}`;
       const result = {
         gameId: params.gameId,
         gameAddress: joinResult.gameAddress,
@@ -745,43 +1104,46 @@ function useJoinGame() {
       };
       setData(result);
       setStatus("success");
+      console.log("[useJoinGame] Complete!");
       return result;
     } catch (err) {
+      console.error("[useJoinGame] FAILED at status:", status, err);
       const error2 = err instanceof Error ? err : new Error(String(err));
       setError(error2);
       setStatus("error");
       throw error2;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
   return { execute, status, error, data, reset };
 }
 
 // src/hooks/useClaim.ts
-import { useState as useState7, useCallback as useCallback7 } from "react";
+import { useState as useState8, useCallback as useCallback8 } from "react";
 function useClaim() {
-  const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = useState7("idle");
-  const [error, setError] = useState7(null);
-  const [data, setData] = useState7(null);
-  const reset = useCallback7(() => {
+  const { client, wallet } = useDubs();
+  const [status, setStatus] = useState8("idle");
+  const [error, setError] = useState8(null);
+  const [data, setData] = useState8(null);
+  const reset = useCallback8(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = useCallback7(async (params) => {
+  const execute = useCallback8(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
     try {
+      console.log("[useClaim] Step 1: Building claim transaction...");
       const claimResult = await client.buildClaimTransaction(params);
+      console.log("[useClaim] Step 1 done.");
       setStatus("signing");
+      console.log("[useClaim] Step 2: Signing and sending...");
       const signature = await signAndSendBase64Transaction(
         claimResult.transaction,
-        wallet,
-        connection
+        wallet
       );
-      setStatus("confirming");
-      await pollTransactionConfirmation(signature, connection);
+      console.log("[useClaim] Step 2 done. Signature:", signature);
       const explorerUrl = `https://solscan.io/tx/${signature}`;
       const result = {
         gameId: params.gameId,
@@ -790,28 +1152,37 @@ function useClaim() {
       };
       setData(result);
       setStatus("success");
+      console.log("[useClaim] Complete!");
       return result;
     } catch (err) {
+      console.error("[useClaim] FAILED:", err);
       const error2 = err instanceof Error ? err : new Error(String(err));
       setError(error2);
       setStatus("error");
       throw error2;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
   return { execute, status, error, data, reset };
 }
 
 // src/hooks/useAuth.ts
-import { useState as useState8, useCallback as useCallback8, useRef } from "react";
+import { useState as useState9, useCallback as useCallback9, useRef as useRef2, useContext as useContext2 } from "react";
 import bs58 from "bs58";
+
+// src/auth-context.ts
+import { createContext as createContext2 } from "react";
+var AuthContext = createContext2(null);
+
+// src/hooks/useAuth.ts
 function useAuth() {
+  const sharedAuth = useContext2(AuthContext);
   const { client, wallet } = useDubs();
-  const [status, setStatus] = useState8("idle");
-  const [user, setUser] = useState8(null);
-  const [token, setToken] = useState8(null);
-  const [error, setError] = useState8(null);
-  const pendingAuth = useRef(null);
-  const reset = useCallback8(() => {
+  const [status, setStatus] = useState9("idle");
+  const [user, setUser] = useState9(null);
+  const [token, setToken] = useState9(null);
+  const [error, setError] = useState9(null);
+  const pendingAuth = useRef2(null);
+  const reset = useCallback9(() => {
     setStatus("idle");
     setUser(null);
     setToken(null);
@@ -819,7 +1190,7 @@ function useAuth() {
     pendingAuth.current = null;
     client.setToken(null);
   }, [client]);
-  const authenticate = useCallback8(async () => {
+  const authenticate = useCallback9(async () => {
     try {
       if (!wallet.publicKey) {
         throw new Error("Wallet not connected");
@@ -850,7 +1221,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client, wallet]);
-  const register = useCallback8(async (username, referralCode, avatarUrl) => {
+  const register = useCallback9(async (username, referralCode, avatarUrl) => {
     try {
       const pending = pendingAuth.current;
       if (!pending) {
@@ -867,7 +1238,8 @@ function useAuth() {
         avatarUrl
       });
       pendingAuth.current = null;
-      setUser(result.user);
+      const user2 = avatarUrl && !result.user.avatar ? { ...result.user, avatar: avatarUrl } : result.user;
+      setUser(user2);
       setToken(result.token);
       setStatus("authenticated");
     } catch (err) {
@@ -875,7 +1247,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client]);
-  const logout = useCallback8(async () => {
+  const logout = useCallback9(async () => {
     try {
       await client.logout();
     } catch {
@@ -886,7 +1258,7 @@ function useAuth() {
     setError(null);
     pendingAuth.current = null;
   }, [client]);
-  const restoreSession = useCallback8(async (savedToken) => {
+  const restoreSession = useCallback9(async (savedToken) => {
     try {
       client.setToken(savedToken);
       const me = await client.getMe();
@@ -902,6 +1274,7 @@ function useAuth() {
       return false;
     }
   }, [client]);
+  if (sharedAuth) return sharedAuth;
   return {
     status,
     user,
@@ -917,63 +1290,7 @@ function useAuth() {
 }
 
 // src/ui/AuthGate.tsx
-import React2, { useState as useState9, useEffect as useEffect5, useRef as useRef2, useCallback as useCallback9 } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  Image,
-  Animated,
-  ScrollView
-} from "react-native";
-
-// src/ui/theme.ts
-import { useColorScheme } from "react-native";
-var dark = {
-  background: "#08080D",
-  surface: "#111118",
-  surfaceActive: "#7C3AED",
-  border: "#1A1A24",
-  text: "#FFFFFF",
-  textSecondary: "#E0E0EE",
-  textMuted: "#666666",
-  textDim: "#555555",
-  accent: "#7C3AED",
-  success: "#22C55E",
-  live: "#EF4444",
-  errorText: "#F87171",
-  errorBg: "#1A0A0A",
-  errorBorder: "#3A1515"
-};
-var light = {
-  background: "#FFFFFF",
-  surface: "#F0F0F5",
-  surfaceActive: "#7C3AED",
-  border: "#E0E0E8",
-  text: "#111118",
-  textSecondary: "#333333",
-  textMuted: "#888888",
-  textDim: "#999999",
-  accent: "#7C3AED",
-  success: "#16A34A",
-  live: "#DC2626",
-  errorText: "#DC2626",
-  errorBg: "#FEF2F2",
-  errorBorder: "#FECACA"
-};
-function useDubsTheme() {
-  const scheme = useColorScheme();
-  return scheme === "light" ? light : dark;
-}
-
-// src/ui/AuthGate.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DICEBEAR_STYLES = [
   "adventurer",
   "avataaars",
@@ -995,13 +1312,14 @@ function AuthGate({
   renderLoading,
   renderError,
   renderRegistration,
-  appName = "Dubs"
+  appName = "Dubs",
+  accentColor
 }) {
   const { client } = useDubs();
   const auth = useAuth();
-  const [phase, setPhase] = useState9("init");
-  const [registrationPhase, setRegistrationPhase] = useState9(false);
-  useEffect5(() => {
+  const [phase, setPhase] = useState10("init");
+  const [registrationPhase, setRegistrationPhase] = useState10(false);
+  useEffect6(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -1027,51 +1345,54 @@ function AuthGate({
       cancelled = true;
     };
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (auth.status === "needsRegistration") setRegistrationPhase(true);
   }, [auth.status]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (auth.token) onSaveToken(auth.token);
   }, [auth.token]);
-  const retry = useCallback9(() => {
+  const retry = useCallback10(() => {
     setRegistrationPhase(false);
     auth.reset();
     auth.authenticate();
   }, [auth]);
-  const handleRegister = useCallback9(
+  const handleRegister = useCallback10(
     (username, referralCode, avatarUrl) => {
       auth.register(username, referralCode, avatarUrl);
     },
     [auth]
   );
   if (phase === "init") {
-    if (renderLoading) return /* @__PURE__ */ jsx2(Fragment, { children: renderLoading("authenticating") });
-    return /* @__PURE__ */ jsx2(DefaultLoadingScreen, { status: "authenticating", appName });
+    if (renderLoading) return /* @__PURE__ */ jsx3(Fragment2, { children: renderLoading("authenticating") });
+    return /* @__PURE__ */ jsx3(DefaultLoadingScreen, { status: "authenticating", appName });
+  }
+  if (auth.status === "authenticated") {
+    return /* @__PURE__ */ jsx3(AuthContext.Provider, { value: auth, children });
   }
-  if (auth.status === "authenticated") return /* @__PURE__ */ jsx2(Fragment, { children });
   if (registrationPhase) {
     const isRegistering = auth.status === "registering";
     const regError = auth.status === "error" ? auth.error : null;
     if (renderRegistration) {
-      return /* @__PURE__ */ jsx2(Fragment, { children: renderRegistration({ onRegister: handleRegister, registering: isRegistering, error: regError, client }) });
+      return /* @__PURE__ */ jsx3(Fragment2, { children: renderRegistration({ onRegister: handleRegister, registering: isRegistering, error: regError, client }) });
     }
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       DefaultRegistrationScreen,
       {
         onRegister: handleRegister,
         registering: isRegistering,
         error: regError,
         client,
-        appName
+        appName,
+        accentColor
       }
     );
   }
   if (auth.status === "error" && auth.error) {
-    if (renderError) return /* @__PURE__ */ jsx2(Fragment, { children: renderError(auth.error, retry) });
-    return /* @__PURE__ */ jsx2(DefaultErrorScreen, { error: auth.error, onRetry: retry, appName });
+    if (renderError) return /* @__PURE__ */ jsx3(Fragment2, { children: renderError(auth.error, retry) });
+    return /* @__PURE__ */ jsx3(DefaultErrorScreen, { error: auth.error, onRetry: retry, appName });
   }
-  if (renderLoading) return /* @__PURE__ */ jsx2(Fragment, { children: renderLoading(auth.status) });
-  return /* @__PURE__ */ jsx2(DefaultLoadingScreen, { status: auth.status, appName });
+  if (renderLoading) return /* @__PURE__ */ jsx3(Fragment2, { children: renderLoading(auth.status) });
+  return /* @__PURE__ */ jsx3(DefaultLoadingScreen, { status: auth.status, appName });
 }
 function DefaultLoadingScreen({ status, appName }) {
   const t = useDubsTheme();
@@ -1085,43 +1406,43 @@ function DefaultLoadingScreen({ status, appName }) {
     authenticated: "Ready!",
     error: "Something went wrong"
   };
-  return /* @__PURE__ */ jsx2(View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: s.centerContent, children: [
-    /* @__PURE__ */ jsxs(View, { style: s.brandingSection, children: [
-      /* @__PURE__ */ jsx2(View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx2(Text, { style: s.logoText, children: "D" }) }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.appNameText, { color: t.text }], children: appName })
+  return /* @__PURE__ */ jsx3(View2, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs2(View2, { style: s.centerContent, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: s.brandingSection, children: [
+      /* @__PURE__ */ jsx3(View2, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx3(Text2, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ jsx3(Text2, { style: [s.appNameText, { color: t.text }], children: appName })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: s.loadingSection, children: [
-      /* @__PURE__ */ jsx2(ActivityIndicator, { size: "large", color: t.accent }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.statusText, { color: t.textMuted }], children: statusText[status] || "Loading..." })
+    /* @__PURE__ */ jsxs2(View2, { style: s.loadingSection, children: [
+      /* @__PURE__ */ jsx3(ActivityIndicator2, { size: "large", color: t.accent }),
+      /* @__PURE__ */ jsx3(Text2, { style: [s.statusText, { color: t.textMuted }], children: statusText[status] || "Loading..." })
     ] })
   ] }) });
 }
 function DefaultErrorScreen({ error, onRetry, appName }) {
   const t = useDubsTheme();
-  return /* @__PURE__ */ jsx2(View, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: s.spreadContent, children: [
-    /* @__PURE__ */ jsxs(View, { style: s.brandingSection, children: [
-      /* @__PURE__ */ jsx2(View, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx2(Text, { style: s.logoText, children: "D" }) }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.appNameText, { color: t.text }], children: appName })
+  return /* @__PURE__ */ jsx3(View2, { style: [s.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs2(View2, { style: s.spreadContent, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: s.brandingSection, children: [
+      /* @__PURE__ */ jsx3(View2, { style: [s.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx3(Text2, { style: s.logoText, children: "D" }) }),
+      /* @__PURE__ */ jsx3(Text2, { style: [s.appNameText, { color: t.text }], children: appName })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: { gap: 16 }, children: [
-      /* @__PURE__ */ jsx2(View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx2(Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }),
-      /* @__PURE__ */ jsx2(TouchableOpacity, { style: [s.primaryBtn, { backgroundColor: t.accent }], onPress: onRetry, activeOpacity: 0.8, children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Try Again" }) })
+    /* @__PURE__ */ jsxs2(View2, { style: { gap: 16 }, children: [
+      /* @__PURE__ */ jsx3(View2, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx3(Text2, { style: [s.errorText, { color: t.errorText }], children: error.message }) }),
+      /* @__PURE__ */ jsx3(TouchableOpacity2, { style: [s.primaryBtn, { backgroundColor: t.accent }], onPress: onRetry, activeOpacity: 0.8, children: /* @__PURE__ */ jsx3(Text2, { style: s.primaryBtnText, children: "Try Again" }) })
     ] })
   ] }) });
 }
 function StepIndicator({ currentStep }) {
   const t = useDubsTheme();
   const steps = [0, 1, 2, 3];
-  return /* @__PURE__ */ jsx2(View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ jsx2(View, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
-    /* @__PURE__ */ jsx2(
-      View,
+  return /* @__PURE__ */ jsx3(View2, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx3(View2, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
+    /* @__PURE__ */ jsx3(
+      View2,
       {
         style: [
           s.stepCircle,
           i < currentStep ? { backgroundColor: t.success } : i === currentStep ? { backgroundColor: t.accent } : { backgroundColor: "transparent", borderWidth: 2, borderColor: t.border }
         ],
-        children: i < currentStep ? /* @__PURE__ */ jsx2(Text, { style: s.stepCheck, children: "\u2713" }) : /* @__PURE__ */ jsx2(Text, { style: [s.stepNum, { color: i === currentStep ? "#FFF" : t.textMuted }], children: i + 1 })
+        children: i < currentStep ? /* @__PURE__ */ jsx3(Text2, { style: s.stepCheck, children: "\u2713" }) : /* @__PURE__ */ jsx3(Text2, { style: [s.stepNum, { color: i === currentStep ? "#FFF" : t.textMuted }], children: i + 1 })
       }
     )
   ] }, i)) });
@@ -1131,22 +1452,24 @@ function DefaultRegistrationScreen({
   registering,
   error,
   client,
-  appName
+  appName,
+  accentColor
 }) {
   const t = useDubsTheme();
-  const [step, setStep] = useState9(0);
-  const [avatarSeed, setAvatarSeed] = useState9(generateSeed);
-  const [avatarStyle, setAvatarStyle] = useState9("adventurer");
-  const [showStyles, setShowStyles] = useState9(false);
-  const [username, setUsername] = useState9("");
-  const [referralCode, setReferralCode] = useState9("");
-  const [checking, setChecking] = useState9(false);
-  const [availability, setAvailability] = useState9(null);
-  const debounceRef = useRef2(null);
-  const fadeAnim = useRef2(new Animated.Value(1)).current;
-  const slideAnim = useRef2(new Animated.Value(0)).current;
+  const accent = accentColor || t.accent;
+  const [step, setStep] = useState10(0);
+  const [avatarSeed, setAvatarSeed] = useState10(generateSeed);
+  const [avatarStyle, setAvatarStyle] = useState10("adventurer");
+  const [showStyles, setShowStyles] = useState10(false);
+  const [username, setUsername] = useState10("");
+  const [referralCode, setReferralCode] = useState10("");
+  const [checking, setChecking] = useState10(false);
+  const [availability, setAvailability] = useState10(null);
+  const debounceRef = useRef3(null);
+  const fadeAnim = useRef3(new Animated.Value(1)).current;
+  const slideAnim = useRef3(new Animated.Value(0)).current;
   const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
-  useEffect5(() => {
+  useEffect6(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const trimmed = username.trim();
     if (trimmed.length < 3) {
@@ -1169,7 +1492,7 @@ function DefaultRegistrationScreen({
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, [username, client]);
-  const animateToStep = useCallback9((newStep) => {
+  const animateToStep = useCallback10((newStep) => {
     const dir = newStep > step ? 1 : -1;
     Keyboard.dismiss();
     Animated.parallel([
@@ -1189,76 +1512,76 @@ function DefaultRegistrationScreen({
     Keyboard.dismiss();
     onRegister(username.trim(), referralCode.trim() || void 0, avatarUrl);
   };
-  const renderAvatarStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
-    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
-      /* @__PURE__ */ jsx2(Text, { style: [s.title, { color: t.text }], children: "Choose Your Avatar" }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "Pick a look that represents you" }),
-      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 0 }),
-      /* @__PURE__ */ jsx2(View, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs(View, { style: [s.avatarFrame, { borderColor: t.accent }], children: [
-        /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.avatarLarge }),
-        /* @__PURE__ */ jsx2(View, { style: [s.checkBadge, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx2(Text, { style: s.checkBadgeText, children: "\u2713" }) })
+  const renderAvatarStep = () => /* @__PURE__ */ jsxs2(View2, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsx3(Text2, { style: [s.title, { color: t.text }], children: "Choose Your Avatar" }),
+      /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted }], children: "Pick a look that represents you" }),
+      /* @__PURE__ */ jsx3(StepIndicator, { currentStep: 0 }),
+      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrame, { borderColor: accent }], children: [
+        /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.avatarLarge }),
+        /* @__PURE__ */ jsx3(View2, { style: [s.checkBadge, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx3(Text2, { style: s.checkBadgeText, children: "\u2713" }) })
       ] }) }),
-      /* @__PURE__ */ jsxs(View, { style: s.avatarActions, children: [
-        /* @__PURE__ */ jsx2(
-          TouchableOpacity,
+      /* @__PURE__ */ jsxs2(View2, { style: s.avatarActions, children: [
+        /* @__PURE__ */ jsx3(
+          TouchableOpacity2,
           {
             style: [s.outlineBtn, { borderColor: t.border }],
             onPress: () => setAvatarSeed(generateSeed()),
             activeOpacity: 0.7,
-            children: /* @__PURE__ */ jsx2(Text, { style: [s.outlineBtnText, { color: t.text }], children: "\u21BB  Shuffle" })
+            children: /* @__PURE__ */ jsx3(Text2, { style: [s.outlineBtnText, { color: t.text }], children: "\u21BB  Shuffle" })
           }
         ),
-        /* @__PURE__ */ jsx2(
-          TouchableOpacity,
+        /* @__PURE__ */ jsx3(
+          TouchableOpacity2,
           {
-            style: [s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + "15" }],
+            style: [s.outlineBtn, { borderColor: accent, backgroundColor: accent + "15" }],
             onPress: () => setShowStyles(!showStyles),
             activeOpacity: 0.7,
-            children: /* @__PURE__ */ jsx2(Text, { style: [s.outlineBtnText, { color: t.accent }], children: "\u263A  Customize" })
+            children: /* @__PURE__ */ jsx3(Text2, { style: [s.outlineBtnText, { color: accent }], children: "\u263A  Customize" })
           }
         )
       ] }),
-      showStyles && /* @__PURE__ */ jsx2(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+      showStyles && /* @__PURE__ */ jsx3(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: s.styleScroll, children: DICEBEAR_STYLES.map((st) => /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
           onPress: () => setAvatarStyle(st),
-          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }],
-          children: /* @__PURE__ */ jsx2(Image, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
+          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
+          children: /* @__PURE__ */ jsx3(Image2, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
         },
         st
       )) })
     ] }),
-    /* @__PURE__ */ jsx2(View, { style: s.bottomRow, children: /* @__PURE__ */ jsx2(
-      TouchableOpacity,
+    /* @__PURE__ */ jsx3(View2, { style: s.bottomRow, children: /* @__PURE__ */ jsx3(
+      TouchableOpacity2,
       {
-        style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1 }],
+        style: [s.primaryBtn, { backgroundColor: accent, flex: 1 }],
         onPress: () => animateToStep(1),
         activeOpacity: 0.8,
-        children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+        children: /* @__PURE__ */ jsx3(Text2, { style: s.primaryBtnText, children: "Continue  \u203A" })
       }
     ) })
   ] });
-  const renderUsernameStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
-    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
-      /* @__PURE__ */ jsxs(View, { style: s.headerRow, children: [
-        /* @__PURE__ */ jsx2(TouchableOpacity, { onPress: () => animateToStep(0), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx2(Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
-        /* @__PURE__ */ jsx2(Text, { style: [s.titleInline, { color: t.text }], children: "Pick a Username" })
+  const renderUsernameStep = () => /* @__PURE__ */ jsxs2(View2, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsxs2(View2, { style: s.headerRow, children: [
+        /* @__PURE__ */ jsx3(TouchableOpacity2, { onPress: () => animateToStep(0), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx3(Text2, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ jsx3(Text2, { style: [s.titleInline, { color: t.text }], children: "Pick a Username" })
       ] }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "This is how others will see you" }),
-      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 1 }),
-      /* @__PURE__ */ jsx2(View, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs(View, { style: [s.avatarFrameSmall, { borderColor: t.accent }], children: [
-        /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.avatarSmall }),
-        /* @__PURE__ */ jsx2(View, { style: [s.checkBadgeSm, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx2(Text, { style: s.checkBadgeTextSm, children: "\u2713" }) })
+      /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted }], children: "This is how others will see you" }),
+      /* @__PURE__ */ jsx3(StepIndicator, { currentStep: 1 }),
+      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrameSmall, { borderColor: accent }], children: [
+        /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.avatarSmall }),
+        /* @__PURE__ */ jsx3(View2, { style: [s.checkBadgeSm, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx3(Text2, { style: s.checkBadgeTextSm, children: "\u2713" }) })
       ] }) }),
-      /* @__PURE__ */ jsxs(View, { style: s.inputGroup, children: [
-        /* @__PURE__ */ jsxs(Text, { style: [s.inputLabel, { color: t.text }], children: [
+      /* @__PURE__ */ jsxs2(View2, { style: s.inputGroup, children: [
+        /* @__PURE__ */ jsxs2(Text2, { style: [s.inputLabel, { color: t.text }], children: [
           "Username ",
-          /* @__PURE__ */ jsx2(Text, { style: { color: t.errorText }, children: "*" })
+          /* @__PURE__ */ jsx3(Text2, { style: { color: t.errorText }, children: "*" })
         ] }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           TextInput,
           {
-            style: [s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }],
+            style: [s.input, { backgroundColor: t.surface, color: t.text, borderColor: accent }],
             placeholder: "Enter username",
             placeholderTextColor: t.textDim,
             value: username,
@@ -1268,62 +1591,62 @@ function DefaultRegistrationScreen({
             autoFocus: true
           }
         ),
-        checking ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: t.textDim }], children: "Checking..." }) : availability ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: availability.available ? t.success : t.errorText }], children: availability.available ? "\u2713 Available!" : availability.reason || "Username taken" }) : username.trim().length > 0 && username.trim().length < 3 ? /* @__PURE__ */ jsx2(Text, { style: [s.hint, { color: t.textDim }], children: "At least 3 characters" }) : null
+        checking ? /* @__PURE__ */ jsx3(Text2, { style: [s.hint, { color: t.textDim }], children: "Checking..." }) : availability ? /* @__PURE__ */ jsx3(Text2, { style: [s.hint, { color: availability.available ? t.success : t.errorText }], children: availability.available ? "\u2713 Available!" : availability.reason || "Username taken" }) : username.trim().length > 0 && username.trim().length < 3 ? /* @__PURE__ */ jsx3(Text2, { style: [s.hint, { color: t.textDim }], children: "At least 3 characters" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: s.bottomRow, children: [
-      /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+    /* @__PURE__ */ jsxs2(View2, { style: s.bottomRow, children: [
+      /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
           style: [s.secondaryBtn, { borderColor: t.border }],
           onPress: () => animateToStep(0),
           activeOpacity: 0.7,
-          children: /* @__PURE__ */ jsx2(Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+          children: /* @__PURE__ */ jsx3(Text2, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
         }
       ),
-      /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+      /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
-          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }],
+          style: [s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }],
           onPress: () => animateToStep(2),
           disabled: !canContinueUsername,
           activeOpacity: 0.8,
-          children: /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Continue  \u203A" })
+          children: /* @__PURE__ */ jsx3(Text2, { style: s.primaryBtnText, children: "Continue  \u203A" })
         }
       )
     ] })
   ] });
-  const renderReferralStep = () => /* @__PURE__ */ jsxs(View, { style: s.stepContainer, children: [
-    /* @__PURE__ */ jsxs(View, { style: s.stepTop, children: [
-      /* @__PURE__ */ jsxs(View, { style: s.headerRow, children: [
-        /* @__PURE__ */ jsx2(TouchableOpacity, { onPress: () => animateToStep(1), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx2(Text, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
-        /* @__PURE__ */ jsx2(Text, { style: [s.titleInline, { color: t.text }], children: "Almost There!" })
+  const renderReferralStep = () => /* @__PURE__ */ jsxs2(View2, { style: s.stepContainer, children: [
+    /* @__PURE__ */ jsxs2(View2, { style: s.stepTop, children: [
+      /* @__PURE__ */ jsxs2(View2, { style: s.headerRow, children: [
+        /* @__PURE__ */ jsx3(TouchableOpacity2, { onPress: () => animateToStep(1), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, children: /* @__PURE__ */ jsx3(Text2, { style: [s.backChevron, { color: t.text }], children: "\u2039" }) }),
+        /* @__PURE__ */ jsx3(Text2, { style: [s.titleInline, { color: t.text }], children: "Almost There!" })
       ] }),
-      /* @__PURE__ */ jsx2(Text, { style: [s.subtitle, { color: t.textMuted }], children: "Got a referral code? (optional)" }),
-      /* @__PURE__ */ jsx2(StepIndicator, { currentStep: 2 }),
-      /* @__PURE__ */ jsxs(View, { style: [s.profileCard, { borderColor: t.border }], children: [
-        /* @__PURE__ */ jsx2(Text, { style: [s.profileLabel, { color: t.textMuted }], children: "Your Profile" }),
-        /* @__PURE__ */ jsxs(View, { style: s.profileRow, children: [
-          /* @__PURE__ */ jsx2(Image, { source: { uri: avatarUrl }, style: s.profileAvatar }),
-          /* @__PURE__ */ jsxs(View, { style: { gap: 4 }, children: [
-            /* @__PURE__ */ jsxs(Text, { style: [s.profileUsername, { color: t.text }], children: [
+      /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted }], children: "Got a referral code? (optional)" }),
+      /* @__PURE__ */ jsx3(StepIndicator, { currentStep: 2 }),
+      /* @__PURE__ */ jsxs2(View2, { style: [s.profileCard, { borderColor: t.border }], children: [
+        /* @__PURE__ */ jsx3(Text2, { style: [s.profileLabel, { color: t.textMuted }], children: "Your Profile" }),
+        /* @__PURE__ */ jsxs2(View2, { style: s.profileRow, children: [
+          /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.profileAvatar }),
+          /* @__PURE__ */ jsxs2(View2, { style: { gap: 4 }, children: [
+            /* @__PURE__ */ jsxs2(Text2, { style: [s.profileUsername, { color: t.text }], children: [
               "@",
               username
             ] }),
-            /* @__PURE__ */ jsxs(Text, { style: [s.profileReady, { color: t.success }], children: [
+            /* @__PURE__ */ jsxs2(Text2, { style: [s.profileReady, { color: t.success }], children: [
               "\u2713",
               " Ready to go!"
             ] })
           ] })
         ] })
       ] }),
-      error ? /* @__PURE__ */ jsx2(View, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx2(Text, { style: [s.errorText, { color: t.errorText }], children: error.message }) }) : null,
-      /* @__PURE__ */ jsxs(View, { style: s.inputGroup, children: [
-        /* @__PURE__ */ jsxs(Text, { style: [s.inputLabel, { color: t.text }], children: [
+      error ? /* @__PURE__ */ jsx3(View2, { style: [s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx3(Text2, { style: [s.errorText, { color: t.errorText }], children: error.message }) }) : null,
+      /* @__PURE__ */ jsxs2(View2, { style: s.inputGroup, children: [
+        /* @__PURE__ */ jsxs2(Text2, { style: [s.inputLabel, { color: t.text }], children: [
           "Referral Code ",
-          /* @__PURE__ */ jsx2(Text, { style: { color: t.textMuted }, children: "(optional)" })
+          /* @__PURE__ */ jsx3(Text2, { style: { color: t.textMuted }, children: "(optional)" })
         ] }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           TextInput,
           {
             style: [s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.border }],
@@ -1336,31 +1659,31 @@ function DefaultRegistrationScreen({
             editable: !registering
           }
         ),
-        /* @__PURE__ */ jsxs(Text, { style: [s.hint, { color: t.textMuted }], children: [
+        /* @__PURE__ */ jsxs2(Text2, { style: [s.hint, { color: t.textMuted }], children: [
           "\u{1F381}",
           " If a friend invited you, enter their code to give them credit!"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: s.bottomRow, children: [
-      /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+    /* @__PURE__ */ jsxs2(View2, { style: s.bottomRow, children: [
+      /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
           style: [s.secondaryBtn, { borderColor: t.border }],
           onPress: () => animateToStep(1),
           disabled: registering,
           activeOpacity: 0.7,
-          children: /* @__PURE__ */ jsx2(Text, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
+          children: /* @__PURE__ */ jsx3(Text2, { style: [s.secondaryBtnText, { color: t.text }], children: "\u2039  Back" })
         }
       ),
-      /* @__PURE__ */ jsx2(
-        TouchableOpacity,
+      /* @__PURE__ */ jsx3(
+        TouchableOpacity2,
         {
-          style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: registering ? 0.7 : 1 }],
+          style: [s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: registering ? 0.7 : 1 }],
           onPress: handleSubmit,
           disabled: registering,
           activeOpacity: 0.8,
-          children: registering ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx2(Text, { style: s.primaryBtnText, children: "Create Account" })
+          children: registering ? /* @__PURE__ */ jsx3(ActivityIndicator2, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx3(Text2, { style: s.primaryBtnText, children: "Create Account" })
         }
       )
     ] })
@@ -1377,18 +1700,18 @@ function DefaultRegistrationScreen({
         return null;
     }
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     KeyboardAvoidingView,
     {
       style: [s.container, { backgroundColor: t.background }],
       behavior: Platform.OS === "ios" ? "padding" : void 0,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         ScrollView,
         {
           contentContainerStyle: { flexGrow: 1 },
           keyboardShouldPersistTaps: "handled",
           bounces: false,
-          children: /* @__PURE__ */ jsx2(
+          children: /* @__PURE__ */ jsx3(
             Animated.View,
             {
               style: [
@@ -1403,7 +1726,7 @@ function DefaultRegistrationScreen({
     }
   );
 }
-var s = StyleSheet.create({
+var s = StyleSheet2.create({
   container: { flex: 1 },
   // Loading / Error
   centerContent: { flex: 1, justifyContent: "center", alignItems: "center", paddingHorizontal: 32, gap: 48 },
@@ -1466,125 +1789,179 @@ var s = StyleSheet.create({
   secondaryBtnText: { fontSize: 16, fontWeight: "600" }
 });
 
-// src/ui/ConnectWalletScreen.tsx
-import {
-  View as View2,
-  Text as Text2,
-  TouchableOpacity as TouchableOpacity2,
-  ActivityIndicator as ActivityIndicator2,
-  StyleSheet as StyleSheet2
-} from "react-native";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ConnectWalletScreen({
-  onConnect,
-  connecting = false,
-  error = null,
-  appName = "Dubs"
+// src/provider.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DubsContext = createContext3(null);
+function DubsProvider({
+  apiKey,
+  children,
+  appName = "Dubs",
+  network = "mainnet-beta",
+  wallet: externalWallet,
+  tokenStorage,
+  baseUrl: baseUrlOverride,
+  rpcUrl: rpcUrlOverride,
+  renderConnectScreen,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  managed = true
 }) {
-  const t = useDubsTheme();
-  return /* @__PURE__ */ jsx3(View2, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs2(View2, { style: styles.content, children: [
-    /* @__PURE__ */ jsxs2(View2, { style: styles.brandingSection, children: [
-      /* @__PURE__ */ jsx3(View2, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx3(Text2, { style: styles.logoText, children: "D" }) }),
-      /* @__PURE__ */ jsx3(Text2, { style: [styles.appName, { color: t.text }], children: appName }),
-      /* @__PURE__ */ jsx3(Text2, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
-    ] }),
-    /* @__PURE__ */ jsxs2(View2, { style: styles.actionSection, children: [
-      error ? /* @__PURE__ */ jsx3(
-        View2,
-        {
-          style: [
-            styles.errorBox,
-            { backgroundColor: t.errorBg, borderColor: t.errorBorder }
-          ],
-          children: /* @__PURE__ */ jsx3(Text2, { style: [styles.errorText, { color: t.errorText }], children: error })
-        }
-      ) : null,
-      /* @__PURE__ */ jsx3(
-        TouchableOpacity2,
+  const config = NETWORK_CONFIG[network];
+  const baseUrl = baseUrlOverride || config.baseUrl;
+  const rpcUrl = rpcUrlOverride || config.rpcUrl;
+  const cluster = config.cluster;
+  const client = useMemo(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const connection = useMemo(() => new Connection(rpcUrl, { commitment: "confirmed" }), [rpcUrl]);
+  const storage = useMemo(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
+  const [uiConfig, setUiConfig] = useState11({});
+  useEffect7(() => {
+    client.getAppConfig().then(setUiConfig).catch(() => {
+    });
+  }, [client]);
+  if (externalWallet) {
+    return /* @__PURE__ */ jsx4(
+      ExternalWalletProvider,
+      {
+        client,
+        connection,
+        wallet: externalWallet,
+        appName: uiConfig.appName || appName,
+        network,
+        storage,
+        managed,
+        renderLoading,
+        renderError,
+        renderRegistration,
+        accentColor: uiConfig.accentColor,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    ManagedWalletProvider,
+    {
+      appName: uiConfig.appName || appName,
+      cluster,
+      storage,
+      renderConnectScreen,
+      accentColor: uiConfig.accentColor,
+      appIcon: uiConfig.appIcon,
+      tagline: uiConfig.tagline,
+      children: (adapter) => /* @__PURE__ */ jsx4(
+        ManagedInner,
         {
-          style: [styles.connectButton, { backgroundColor: t.accent }],
-          onPress: onConnect,
-          disabled: connecting,
-          activeOpacity: 0.8,
-          children: connecting ? /* @__PURE__ */ jsx3(ActivityIndicator2, { color: "#FFFFFF", size: "small" }) : /* @__PURE__ */ jsx3(Text2, { style: styles.connectButtonText, children: "Connect Wallet" })
+          client,
+          connection,
+          wallet: adapter,
+          appName: uiConfig.appName || appName,
+          network,
+          storage,
+          renderLoading,
+          renderError,
+          renderRegistration,
+          accentColor: uiConfig.accentColor,
+          children
         }
-      ),
-      /* @__PURE__ */ jsx3(Text2, { style: [styles.hint, { color: t.textDim }], children: "Phantom, Solflare, or any Solana wallet" })
-    ] })
-  ] }) });
+      )
+    }
+  );
 }
-var styles = StyleSheet2.create({
-  container: {
-    flex: 1,
-    justifyContent: "center"
-  },
-  content: {
-    flex: 1,
-    justifyContent: "space-between",
-    paddingHorizontal: 32,
-    paddingTop: 120,
-    paddingBottom: 80
-  },
-  brandingSection: {
-    alignItems: "center",
-    gap: 12
-  },
-  logoCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    marginBottom: 8
-  },
-  logoText: {
-    fontSize: 36,
-    fontWeight: "800",
-    color: "#FFFFFF"
-  },
-  appName: {
-    fontSize: 32,
-    fontWeight: "800"
-  },
-  subtitle: {
-    fontSize: 16,
-    textAlign: "center",
-    lineHeight: 22
-  },
-  actionSection: {
-    gap: 16
-  },
-  errorBox: {
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: "center"
-  },
-  connectButton: {
-    height: 56,
-    borderRadius: 16,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  connectButtonText: {
-    color: "#FFFFFF",
-    fontSize: 18,
-    fontWeight: "700"
-  },
-  hint: {
-    fontSize: 13,
-    textAlign: "center"
+function ManagedInner({
+  client,
+  connection,
+  wallet,
+  appName,
+  network,
+  storage,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  accentColor,
+  children
+}) {
+  const managedDisconnect = useDisconnect();
+  const disconnect = useCallback11(async () => {
+    client.setToken(null);
+    await managedDisconnect?.();
+  }, [client, managedDisconnect]);
+  const value = useMemo(
+    () => ({ client, wallet, connection, appName, network, disconnect }),
+    [client, wallet, connection, appName, network, disconnect]
+  );
+  return /* @__PURE__ */ jsx4(DubsContext.Provider, { value, children: /* @__PURE__ */ jsx4(
+    AuthGate,
+    {
+      onSaveToken: (token) => {
+        if (token) return storage.setItem(STORAGE_KEYS.JWT_TOKEN, token);
+        return storage.deleteItem(STORAGE_KEYS.JWT_TOKEN);
+      },
+      onLoadToken: () => storage.getItem(STORAGE_KEYS.JWT_TOKEN),
+      renderLoading,
+      renderError,
+      renderRegistration,
+      appName,
+      accentColor,
+      children
+    }
+  ) });
+}
+function ExternalWalletProvider({
+  client,
+  connection,
+  wallet,
+  appName,
+  network,
+  storage,
+  managed,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  accentColor,
+  children
+}) {
+  const disconnect = useCallback11(async () => {
+    client.setToken(null);
+    await storage.deleteItem(STORAGE_KEYS.JWT_TOKEN).catch(() => {
+    });
+    await wallet.disconnect?.();
+  }, [client, storage, wallet]);
+  const value = useMemo(
+    () => ({ client, wallet, connection, appName, network, disconnect }),
+    [client, wallet, connection, appName, network, disconnect]
+  );
+  if (!managed) {
+    return /* @__PURE__ */ jsx4(DubsContext.Provider, { value, children });
   }
-});
+  return /* @__PURE__ */ jsx4(DubsContext.Provider, { value, children: /* @__PURE__ */ jsx4(
+    AuthGate,
+    {
+      onSaveToken: (token) => {
+        if (token) return storage.setItem(STORAGE_KEYS.JWT_TOKEN, token);
+        return storage.deleteItem(STORAGE_KEYS.JWT_TOKEN);
+      },
+      onLoadToken: () => storage.getItem(STORAGE_KEYS.JWT_TOKEN),
+      renderLoading,
+      renderError,
+      renderRegistration,
+      appName,
+      accentColor,
+      children
+    }
+  ) });
+}
+function useDubs() {
+  const ctx = useContext3(DubsContext);
+  if (!ctx) {
+    throw new Error("useDubs must be used within a <DubsProvider>");
+  }
+  return ctx;
+}
 
 // src/ui/UserProfileCard.tsx
 import { useMemo as useMemo2 } from "react";
-import { View as View3, Text as Text3, Image as Image2, StyleSheet as StyleSheet3 } from "react-native";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { View as View3, Text as Text3, Image as Image3, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function truncateAddress(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1607,11 +1984,11 @@ function UserProfileCard({
     [avatarUrl, walletAddress]
   );
   return /* @__PURE__ */ jsxs3(View3, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
-    /* @__PURE__ */ jsx4(Image2, { source: { uri: imageUri }, style: styles2.avatar }),
+    /* @__PURE__ */ jsx5(Image3, { source: { uri: imageUri }, style: styles2.avatar }),
     /* @__PURE__ */ jsxs3(View3, { style: styles2.info, children: [
-      username ? /* @__PURE__ */ jsx4(Text3, { style: [styles2.username, { color: t.text }], children: username }) : null,
-      /* @__PURE__ */ jsx4(Text3, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
-      memberSince ? /* @__PURE__ */ jsx4(Text3, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
+      username ? /* @__PURE__ */ jsx5(Text3, { style: [styles2.username, { color: t.text }], children: username }) : null,
+      /* @__PURE__ */ jsx5(Text3, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
+      memberSince ? /* @__PURE__ */ jsx5(Text3, { style: [styles2.memberSince, { color: t.textDim }], children: formatMemberSince(memberSince) }) : null
     ] })
   ] });
 }
@@ -1657,7 +2034,7 @@ import {
   ActivityIndicator as ActivityIndicator3,
   StyleSheet as StyleSheet4
 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function truncateAddress2(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
@@ -1680,7 +2057,7 @@ function SettingsSheet({
       style: [styles3.container, { backgroundColor: t.background }],
       contentContainerStyle: styles3.content,
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           UserProfileCard,
           {
             walletAddress,
@@ -1698,15 +2075,15 @@ function SettingsSheet({
               activeOpacity: 0.7,
               children: [
                 /* @__PURE__ */ jsxs4(View4, { style: styles3.actionRowLeft, children: [
-                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
-                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
+                  /* @__PURE__ */ jsx6(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Wallet Address" }),
+                  /* @__PURE__ */ jsx6(Text4, { style: [styles3.actionValue, { color: t.textMuted }], children: truncateAddress2(walletAddress) })
                 ] }),
-                /* @__PURE__ */ jsx5(Text4, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
+                /* @__PURE__ */ jsx6(Text4, { style: [styles3.copyLabel, { color: t.accent }], children: "Copy" })
               ]
             }
           ) : null,
-          onSupport ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            onCopyAddress ? /* @__PURE__ */ jsx5(View4, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
+          onSupport ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            onCopyAddress ? /* @__PURE__ */ jsx6(View4, { style: [styles3.separator, { backgroundColor: t.border }] }) : null,
             /* @__PURE__ */ jsxs4(
               TouchableOpacity3,
               {
@@ -1714,21 +2091,21 @@ function SettingsSheet({
                 onPress: onSupport,
                 activeOpacity: 0.7,
                 children: [
-                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
-                  /* @__PURE__ */ jsx5(Text4, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
+                  /* @__PURE__ */ jsx6(Text4, { style: [styles3.actionLabel, { color: t.text }], children: "Help & Support" }),
+                  /* @__PURE__ */ jsx6(Text4, { style: [styles3.chevron, { color: t.textMuted }], children: "\u203A" })
                 ]
               }
             )
           ] }) : null
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           TouchableOpacity3,
           {
             style: [styles3.logoutButton, { borderColor: t.live }],
             onPress: onLogout,
             disabled: loggingOut,
             activeOpacity: 0.7,
-            children: loggingOut ? /* @__PURE__ */ jsx5(ActivityIndicator3, { color: t.live, size: "small" }) : /* @__PURE__ */ jsx5(Text4, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
+            children: loggingOut ? /* @__PURE__ */ jsx6(ActivityIndicator3, { color: t.live, size: "small" }) : /* @__PURE__ */ jsx6(Text4, { style: [styles3.logoutText, { color: t.live }], children: "Log Out" })
           }
         ),
         appVersion ? /* @__PURE__ */ jsxs4(Text4, { style: [styles3.version, { color: t.textDim }], children: [
@@ -1800,6 +2177,476 @@ var styles3 = StyleSheet4.create({
     textAlign: "center"
   }
 });
+
+// src/ui/game/GamePoster.tsx
+import { useState as useState12 } from "react";
+import { StyleSheet as StyleSheet5, View as View5, Text as Text5 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function computeCountdown(lockTimestamp) {
+  if (!lockTimestamp) return "";
+  const ts = typeof lockTimestamp === "string" ? parseInt(lockTimestamp) : lockTimestamp;
+  const diff = ts * 1e3 - Date.now();
+  if (diff <= 0) return "LIVE";
+  const days = Math.floor(diff / 864e5);
+  const hours = Math.floor(diff % 864e5 / 36e5);
+  const mins = Math.floor(diff % 36e5 / 6e4);
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${mins}m`;
+  return `${mins}m`;
+}
+function GamePoster({ game, ImageComponent }) {
+  const t = useDubsTheme();
+  const Img = ImageComponent || __require("react-native").Image;
+  const opponents = game.opponents || [];
+  const home = opponents[0];
+  const away = opponents[1];
+  const countdown = computeCountdown(game.lockTimestamp);
+  const isLive = countdown === "LIVE";
+  return /* @__PURE__ */ jsxs5(View5, { style: styles4.container, children: [
+    game.media?.poster ? /* @__PURE__ */ jsx7(
+      Img,
+      {
+        source: { uri: game.media.poster },
+        style: styles4.image,
+        resizeMode: "cover"
+      }
+    ) : /* @__PURE__ */ jsx7(View5, { style: [styles4.image, { backgroundColor: t.surface }], children: /* @__PURE__ */ jsxs5(View5, { style: styles4.fallback, children: [
+      /* @__PURE__ */ jsx7(TeamLogoInternal, { url: home?.imageUrl, size: 56, Img }),
+      /* @__PURE__ */ jsx7(Text5, { style: styles4.vs, children: "VS" }),
+      /* @__PURE__ */ jsx7(TeamLogoInternal, { url: away?.imageUrl, size: 56, Img })
+    ] }) }),
+    /* @__PURE__ */ jsx7(View5, { style: styles4.overlay }),
+    /* @__PURE__ */ jsxs5(View5, { style: styles4.teamNames, children: [
+      /* @__PURE__ */ jsx7(Text5, { style: styles4.teamNameText, numberOfLines: 1, children: home?.name || "Home" }),
+      /* @__PURE__ */ jsx7(Text5, { style: styles4.teamNameVs, children: "vs" }),
+      /* @__PURE__ */ jsx7(Text5, { style: styles4.teamNameText, numberOfLines: 1, children: away?.name || "Away" })
+    ] }),
+    countdown ? /* @__PURE__ */ jsx7(View5, { style: styles4.countdownPill, children: /* @__PURE__ */ jsx7(Text5, { style: [styles4.countdownText, isLive && styles4.countdownLive], children: countdown }) }) : null,
+    /* @__PURE__ */ jsx7(View5, { style: styles4.poolPill, children: /* @__PURE__ */ jsxs5(Text5, { style: styles4.poolText, children: [
+      game.totalPool || 0,
+      " SOL"
+    ] }) })
+  ] });
+}
+function TeamLogoInternal({ url, size, Img }) {
+  const [failed, setFailed] = useState12(false);
+  if (!url || failed) {
+    return /* @__PURE__ */ jsx7(View5, { style: [styles4.logoPlaceholder, { width: size, height: size, borderRadius: size / 2 }] });
+  }
+  return /* @__PURE__ */ jsx7(
+    Img,
+    {
+      source: { uri: url },
+      style: { width: size, height: size, borderRadius: size / 2 },
+      resizeMode: "contain",
+      onError: () => setFailed(true)
+    }
+  );
+}
+var styles4 = StyleSheet5.create({
+  container: {
+    height: 200,
+    borderRadius: 16,
+    overflow: "hidden",
+    position: "relative"
+  },
+  image: {
+    ...StyleSheet5.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  overlay: {
+    ...StyleSheet5.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.35)"
+  },
+  fallback: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 24,
+    zIndex: 2
+  },
+  vs: {
+    color: "#FFF",
+    fontSize: 24,
+    fontWeight: "900",
+    zIndex: 2
+  },
+  logoPlaceholder: {
+    backgroundColor: "rgba(255,255,255,0.15)",
+    zIndex: 2
+  },
+  teamNames: {
+    position: "absolute",
+    top: 12,
+    left: 12,
+    right: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  teamNameText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "700",
+    maxWidth: "40%"
+  },
+  teamNameVs: {
+    color: "rgba(255,255,255,0.6)",
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  countdownPill: {
+    position: "absolute",
+    bottom: 12,
+    left: 12,
+    backgroundColor: "rgba(0,0,0,0.65)",
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5
+  },
+  countdownText: {
+    color: "#FFF",
+    fontSize: 13,
+    fontWeight: "700"
+  },
+  countdownLive: {
+    color: "#EF4444"
+  },
+  poolPill: {
+    position: "absolute",
+    bottom: 12,
+    right: 12,
+    backgroundColor: "#7C3AED",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 5
+  },
+  poolText: {
+    color: "#FFF",
+    fontSize: 13,
+    fontWeight: "800"
+  }
+});
+
+// src/ui/game/LivePoolsCard.tsx
+import { useMemo as useMemo3 } from "react";
+import { StyleSheet as StyleSheet6, View as View6, Text as Text6 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function LivePoolsCard({
+  game,
+  shortName,
+  homeColor = "#3B82F6",
+  awayColor = "#EF4444"
+}) {
+  const t = useDubsTheme();
+  const opponents = game.opponents || [];
+  const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
+  const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
+  const homePool = game.homePool || 0;
+  const awayPool = game.awayPool || 0;
+  const totalPool = game.totalPool || 0;
+  const { homePercent, awayPercent, homeOdds, awayOdds } = useMemo3(() => {
+    return {
+      homePercent: totalPool > 0 ? homePool / totalPool * 100 : 50,
+      awayPercent: totalPool > 0 ? awayPool / totalPool * 100 : 50,
+      homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
+      awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014"
+    };
+  }, [homePool, awayPool, totalPool]);
+  return /* @__PURE__ */ jsxs6(View6, { style: [styles5.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
+    /* @__PURE__ */ jsx8(Text6, { style: [styles5.title, { color: t.text }], children: "Live Pools" }),
+    /* @__PURE__ */ jsxs6(Text6, { style: [styles5.total, { color: t.accent }], children: [
+      totalPool,
+      " SOL total"
+    ] }),
+    /* @__PURE__ */ jsxs6(View6, { style: styles5.bars, children: [
+      /* @__PURE__ */ jsx8(PoolBar, { name: homeName, amount: homePool, percent: homePercent, color: homeColor, t }),
+      /* @__PURE__ */ jsx8(PoolBar, { name: awayName, amount: awayPool, percent: awayPercent, color: awayColor, t })
+    ] }),
+    /* @__PURE__ */ jsxs6(View6, { style: styles5.oddsRow, children: [
+      /* @__PURE__ */ jsxs6(Text6, { style: [styles5.oddsText, { color: t.textMuted }], children: [
+        homeName,
+        ": ",
+        /* @__PURE__ */ jsxs6(Text6, { style: { color: t.text, fontWeight: "700" }, children: [
+          homeOdds,
+          "x"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6(Text6, { style: [styles5.oddsText, { color: t.textMuted }], children: [
+        awayName,
+        ": ",
+        /* @__PURE__ */ jsxs6(Text6, { style: { color: t.text, fontWeight: "700" }, children: [
+          awayOdds,
+          "x"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function PoolBar({ name, amount, percent, color, t }) {
+  return /* @__PURE__ */ jsxs6(View6, { style: styles5.barRow, children: [
+    /* @__PURE__ */ jsx8(Text6, { style: [styles5.barLabel, { color: t.textSecondary }], numberOfLines: 1, children: name }),
+    /* @__PURE__ */ jsx8(View6, { style: [styles5.barTrack, { backgroundColor: t.border }], children: /* @__PURE__ */ jsx8(View6, { style: [styles5.barFill, { width: `${Math.max(percent, 2)}%`, backgroundColor: color }] }) }),
+    /* @__PURE__ */ jsxs6(Text6, { style: [styles5.barAmount, { color: t.text }], children: [
+      amount,
+      " SOL"
+    ] })
+  ] });
+}
+var styles5 = StyleSheet6.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: "700", marginBottom: 4 },
+  total: { fontSize: 14, fontWeight: "600", marginBottom: 14 },
+  bars: { gap: 10 },
+  barRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+  barLabel: { width: 80, fontSize: 13, fontWeight: "600" },
+  barTrack: { flex: 1, height: 10, borderRadius: 5, overflow: "hidden" },
+  barFill: { height: "100%", borderRadius: 5 },
+  barAmount: { width: 70, textAlign: "right", fontSize: 13, fontWeight: "700" },
+  oddsRow: { flexDirection: "row", justifyContent: "space-between", marginTop: 12 },
+  oddsText: { fontSize: 12 }
+});
+
+// src/ui/game/PickWinnerCard.tsx
+import { useState as useState13, useMemo as useMemo4 } from "react";
+import { StyleSheet as StyleSheet7, View as View7, Text as Text7, TouchableOpacity as TouchableOpacity4 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function PickWinnerCard({
+  game,
+  selectedTeam,
+  onSelect,
+  shortName,
+  homeColor = "#3B82F6",
+  awayColor = "#EF4444",
+  ImageComponent
+}) {
+  const t = useDubsTheme();
+  const opponents = game.opponents || [];
+  const bettors = game.bettors || [];
+  const totalPool = game.totalPool || 0;
+  const homePool = game.homePool || 0;
+  const awayPool = game.awayPool || 0;
+  const { homeOdds, awayOdds, homeBets, awayBets } = useMemo4(() => ({
+    homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
+    awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014",
+    homeBets: bettors.filter((b) => b.team === "home").length,
+    awayBets: bettors.filter((b) => b.team === "away").length
+  }), [totalPool, homePool, awayPool, bettors]);
+  const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
+  const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles6.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
+    /* @__PURE__ */ jsx9(Text7, { style: [styles6.title, { color: t.text }], children: "Pick Your Winner" }),
+    /* @__PURE__ */ jsxs7(View7, { style: styles6.row, children: [
+      /* @__PURE__ */ jsx9(
+        TeamOption,
+        {
+          name: homeName,
+          imageUrl: opponents[0]?.imageUrl,
+          odds: homeOdds,
+          bets: homeBets,
+          color: homeColor,
+          selected: selectedTeam === "home",
+          onPress: () => onSelect("home"),
+          ImageComponent,
+          t
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        TeamOption,
+        {
+          name: awayName,
+          imageUrl: opponents[1]?.imageUrl,
+          odds: awayOdds,
+          bets: awayBets,
+          color: awayColor,
+          selected: selectedTeam === "away",
+          onPress: () => onSelect("away"),
+          ImageComponent,
+          t
+        }
+      )
+    ] })
+  ] });
+}
+function TeamOption({
+  name,
+  imageUrl,
+  odds,
+  bets,
+  color,
+  selected,
+  onPress,
+  ImageComponent,
+  t
+}) {
+  const [imgFailed, setImgFailed] = useState13(false);
+  const Img = ImageComponent || __require("react-native").Image;
+  const showImage = imageUrl && !imgFailed;
+  return /* @__PURE__ */ jsxs7(
+    TouchableOpacity4,
+    {
+      style: [styles6.option, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + "15" : t.background }],
+      onPress,
+      activeOpacity: 0.7,
+      children: [
+        showImage ? /* @__PURE__ */ jsx9(Img, { source: { uri: imageUrl }, style: styles6.logo, resizeMode: "contain", onError: () => setImgFailed(true) }) : /* @__PURE__ */ jsx9(View7, { style: [styles6.logo, styles6.logoPlaceholder] }),
+        /* @__PURE__ */ jsx9(Text7, { style: [styles6.name, { color: t.text }], numberOfLines: 1, children: name }),
+        /* @__PURE__ */ jsxs7(Text7, { style: [styles6.odds, { color }], children: [
+          odds,
+          "x"
+        ] }),
+        /* @__PURE__ */ jsxs7(Text7, { style: [styles6.bets, { color: t.textMuted }], children: [
+          bets,
+          " ",
+          bets === 1 ? "bet" : "bets"
+        ] }),
+        selected && /* @__PURE__ */ jsx9(View7, { style: [styles6.badge, { backgroundColor: color }], children: /* @__PURE__ */ jsx9(Text7, { style: styles6.badgeText, children: "Selected" }) })
+      ]
+    }
+  );
+}
+var styles6 = StyleSheet7.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: "700", marginBottom: 12 },
+  row: { flexDirection: "row", gap: 12 },
+  option: { flex: 1, borderWidth: 2, borderRadius: 16, padding: 16, alignItems: "center", gap: 8 },
+  logo: { width: 48, height: 48, borderRadius: 24 },
+  logoPlaceholder: { backgroundColor: "rgba(128,128,128,0.2)" },
+  name: { fontSize: 15, fontWeight: "700" },
+  odds: { fontSize: 20, fontWeight: "800" },
+  bets: { fontSize: 12 },
+  badge: { borderRadius: 8, paddingHorizontal: 12, paddingVertical: 4, marginTop: 4 },
+  badgeText: { color: "#FFF", fontSize: 12, fontWeight: "700" }
+});
+
+// src/ui/game/PlayersCard.tsx
+import { useState as useState14 } from "react";
+import { StyleSheet as StyleSheet8, View as View8, Text as Text8 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function truncateWallet(addr, chars) {
+  if (addr.length <= chars * 2 + 3) return addr;
+  return `${addr.slice(0, chars)}...${addr.slice(-chars)}`;
+}
+function PlayersCard({
+  game,
+  truncateChars = 4,
+  homeColor = "#3B82F6",
+  awayColor = "#EF4444",
+  drawColor = "#A855F7",
+  ImageComponent
+}) {
+  const t = useDubsTheme();
+  const bettors = game.bettors || [];
+  const dotColor = (team) => {
+    if (team === "home") return homeColor;
+    if (team === "away") return awayColor;
+    return drawColor;
+  };
+  return /* @__PURE__ */ jsxs8(View8, { style: [styles7.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
+    /* @__PURE__ */ jsxs8(Text8, { style: [styles7.title, { color: t.text }], children: [
+      "Players",
+      bettors.length > 0 ? ` (${bettors.length})` : ""
+    ] }),
+    bettors.length === 0 ? /* @__PURE__ */ jsx10(Text8, { style: [styles7.empty, { color: t.textMuted }], children: "No players yet \u2014 be the first!" }) : bettors.map((b, i) => /* @__PURE__ */ jsx10(
+      BettorRow,
+      {
+        bettor: b,
+        dotColor: dotColor(b.team),
+        truncateChars,
+        isFirst: i === 0,
+        ImageComponent,
+        t
+      },
+      `${b.wallet}-${i}`
+    ))
+  ] });
+}
+function BettorRow({
+  bettor,
+  dotColor,
+  truncateChars,
+  isFirst,
+  ImageComponent,
+  t
+}) {
+  const [imgFailed, setImgFailed] = useState14(false);
+  const Img = ImageComponent || __require("react-native").Image;
+  const showAvatar = bettor.avatar && !imgFailed;
+  return /* @__PURE__ */ jsxs8(View8, { style: [styles7.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }], children: [
+    /* @__PURE__ */ jsx10(View8, { style: [styles7.dot, { backgroundColor: dotColor }] }),
+    showAvatar ? /* @__PURE__ */ jsx10(Img, { source: { uri: bettor.avatar }, style: styles7.avatar, resizeMode: "cover", onError: () => setImgFailed(true) }) : /* @__PURE__ */ jsx10(View8, { style: [styles7.avatar, styles7.avatarPlaceholder] }),
+    /* @__PURE__ */ jsx10(View8, { style: styles7.nameCol, children: /* @__PURE__ */ jsx10(Text8, { style: [styles7.username, { color: t.text }], numberOfLines: 1, children: bettor.username || truncateWallet(bettor.wallet, truncateChars) }) }),
+    /* @__PURE__ */ jsxs8(Text8, { style: [styles7.amount, { color: t.textSecondary }], children: [
+      bettor.amount,
+      " SOL"
+    ] })
+  ] });
+}
+var styles7 = StyleSheet8.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: "700", marginBottom: 12 },
+  empty: { fontSize: 14, textAlign: "center", paddingVertical: 16 },
+  row: { flexDirection: "row", alignItems: "center", paddingVertical: 10, gap: 10 },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  avatar: { width: 28, height: 28, borderRadius: 14 },
+  avatarPlaceholder: { backgroundColor: "rgba(128,128,128,0.2)" },
+  nameCol: { flex: 1 },
+  username: { fontSize: 14, fontWeight: "600" },
+  amount: { fontSize: 13, fontWeight: "700" }
+});
+
+// src/ui/game/JoinGameButton.tsx
+import { useMemo as useMemo5 } from "react";
+import { StyleSheet as StyleSheet9, View as View9, Text as Text9, TouchableOpacity as TouchableOpacity5, ActivityIndicator as ActivityIndicator4 } from "react-native";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  building: "Building transaction...",
+  signing: "Approve in wallet...",
+  confirming: "Confirming on-chain...",
+  saving: "Saving..."
+};
+function JoinGameButton({ game, walletAddress, selectedTeam, status, onJoin }) {
+  const t = useDubsTheme();
+  const alreadyJoined = useMemo5(() => {
+    if (!walletAddress) return false;
+    return (game.bettors || []).some((b) => b.wallet === walletAddress);
+  }, [game.bettors, walletAddress]);
+  if (alreadyJoined || game.isLocked || game.isResolved) return null;
+  const isJoining = status !== "idle" && status !== "success" && status !== "error";
+  const statusLabel = STATUS_LABELS[status] || "";
+  return /* @__PURE__ */ jsxs9(View9, { style: [styles8.bar, { backgroundColor: t.background, borderTopColor: t.border }], children: [
+    /* @__PURE__ */ jsxs9(View9, { style: styles8.buyInRow, children: [
+      /* @__PURE__ */ jsx11(Text9, { style: [styles8.buyInLabel, { color: t.textMuted }], children: "Buy-in" }),
+      /* @__PURE__ */ jsxs9(Text9, { style: [styles8.buyInValue, { color: t.text }], children: [
+        game.buyIn,
+        " SOL"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11(
+      TouchableOpacity5,
+      {
+        style: [styles8.button, { backgroundColor: selectedTeam ? "#22D3EE" : t.border }],
+        disabled: !selectedTeam || isJoining,
+        onPress: onJoin,
+        activeOpacity: 0.8,
+        children: isJoining ? /* @__PURE__ */ jsxs9(View9, { style: styles8.joiningRow, children: [
+          /* @__PURE__ */ jsx11(ActivityIndicator4, { size: "small", color: "#000" }),
+          /* @__PURE__ */ jsx11(Text9, { style: styles8.buttonText, children: statusLabel })
+        ] }) : /* @__PURE__ */ jsx11(Text9, { style: [styles8.buttonText, !selectedTeam && { color: t.textMuted }], children: selectedTeam ? `Join Bet \u2014 ${game.buyIn} SOL` : "Pick a team to bet" })
+      }
+    )
+  ] });
+}
+var styles8 = StyleSheet9.create({
+  bar: { position: "absolute", bottom: 0, left: 0, right: 0, paddingHorizontal: 16, paddingTop: 12, paddingBottom: 36, borderTopWidth: 1 },
+  buyInRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 10 },
+  buyInLabel: { fontSize: 13 },
+  buyInValue: { fontSize: 15, fontWeight: "800" },
+  button: { borderRadius: 14, paddingVertical: 16, alignItems: "center" },
+  buttonText: { color: "#000", fontSize: 16, fontWeight: "800" },
+  joiningRow: { flexDirection: "row", alignItems: "center", gap: 10 }
+});
 export {
   AuthGate,
   ConnectWalletScreen,
@@ -1808,12 +2655,20 @@ export {
   DubsApiError,
   DubsClient,
   DubsProvider,
+  GamePoster,
+  JoinGameButton,
+  LivePoolsCard,
   MwaWalletAdapter,
+  NETWORK_CONFIG,
+  PickWinnerCard,
+  PlayersCard,
   SOLANA_PROGRAM_ERRORS,
+  STORAGE_KEYS,
   SettingsSheet,
   UserProfileCard,
+  createSecureStoreStorage,
+  mergeTheme,
   parseSolanaError,
-  pollTransactionConfirmation,
   signAndSendBase64Transaction,
   useAuth,
   useClaim,