@dubsdotapp/expo 0.2.39 → 0.2.41

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AuthGate: () => AuthGate,
+  ClaimButton: () => ClaimButton,
   ClaimPrizeSheet: () => ClaimPrizeSheet,
   ConnectWalletScreen: () => ConnectWalletScreen,
   CreateCustomGameSheet: () => CreateCustomGameSheet,
@@ -573,11 +574,61 @@ function createSecureStoreStorage() {
 }
 
 // src/provider.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
+
+// src/ui/theme.ts
+var import_react = require("react");
+var import_react_native = require("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"
+};
+var ThemeOverrideContext = (0, import_react.createContext)({});
+var ThemeOverrideProvider = ThemeOverrideContext.Provider;
+function useDubsTheme() {
+  const scheme = (0, import_react_native.useColorScheme)();
+  const base = scheme === "light" ? light : dark;
+  const overrides = (0, import_react.useContext)(ThemeOverrideContext);
+  if (Object.keys(overrides).length === 0) return base;
+  return { ...base, ...overrides };
+}
+function mergeTheme(base, overrides) {
+  return { ...base, ...overrides };
+}
+
+// src/provider.tsx
 var import_web34 = require("@solana/web3.js");
 
 // src/managed-wallet.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_native4 = require("react-native");
 
 // src/wallet/mwa-adapter.ts
@@ -761,7 +812,7 @@ function decryptPayload(ciphertextBase58, nonceBase58, sharedSecret) {
 }
 
 // src/wallet/phantom-deeplink/deeplink-handler.ts
-var import_react_native = require("react-native");
+var import_react_native2 = require("react-native");
 var TAG = "[Dubs:DeeplinkHandler]";
 var DeeplinkHandler = class {
   constructor(redirectBase) {
@@ -778,11 +829,11 @@ var DeeplinkHandler = class {
       return;
     }
     console.log(TAG, "Starting URL listener");
-    this.subscription = import_react_native.Linking.addEventListener("url", ({ url }) => {
+    this.subscription = import_react_native2.Linking.addEventListener("url", ({ url }) => {
       console.log(TAG, "Received URL event:", url);
       this.handleUrl(url);
     });
-    import_react_native.Linking.getInitialURL().then((url) => {
+    import_react_native2.Linking.getInitialURL().then((url) => {
       if (url) {
         console.log(TAG, "Cold-start URL found:", url);
         this.handleUrl(url);
@@ -818,7 +869,7 @@ var DeeplinkHandler = class {
         reject(new Error(`Phantom deeplink timed out after ${timeoutMs / 1e3}s`));
       }, timeoutMs);
       this.pending.set(requestId, { resolve, reject, timer });
-      import_react_native.Linking.openURL(url).catch((err) => {
+      import_react_native2.Linking.openURL(url).catch((err) => {
         console.log(TAG, `Failed to open URL: ${err.message}`);
         this.pending.delete(requestId);
         clearTimeout(timer);
@@ -1188,50 +1239,6 @@ var PhantomDeeplinkAdapter = class {
 
 // src/ui/ConnectWalletScreen.tsx
 var import_react_native3 = require("react-native");
-
-// src/ui/theme.ts
-var import_react_native2 = require("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 = (0, import_react_native2.useColorScheme)();
-  return scheme === "light" ? light : dark;
-}
-function mergeTheme(base, overrides) {
-  return { ...base, ...overrides };
-}
-
-// src/ui/ConnectWalletScreen.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function ConnectWalletScreen({
   onConnect,
@@ -1384,9 +1391,9 @@ function getOrCreatePhantomAdapter(config) {
   }
   return phantomSingleton;
 }
-var DisconnectContext = (0, import_react.createContext)(null);
+var DisconnectContext = (0, import_react2.createContext)(null);
 function useDisconnect() {
-  return (0, import_react.useContext)(DisconnectContext);
+  return (0, import_react2.useContext)(DisconnectContext);
 }
 function ManagedWalletProvider({
   appName,
@@ -1400,14 +1407,14 @@ function ManagedWalletProvider({
   appUrl,
   children
 }) {
-  const [connected, setConnected] = (0, import_react.useState)(false);
-  const [connecting, setConnecting] = (0, import_react.useState)(false);
-  const [isReady, setIsReady] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
+  const [connected, setConnected] = (0, import_react2.useState)(false);
+  const [connecting, setConnecting] = (0, import_react2.useState)(false);
+  const [isReady, setIsReady] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
   const usePhantom = import_react_native4.Platform.OS === "ios" && !!redirectUri;
   console.log(TAG3, `Platform: ${import_react_native4.Platform.OS}, redirectUri: ${redirectUri ? "provided" : "not set"}, usePhantom: ${usePhantom}`);
-  const adapterRef = (0, import_react.useRef)(null);
-  const transactRef = (0, import_react.useRef)(null);
+  const adapterRef = (0, import_react2.useRef)(null);
+  const transactRef = (0, import_react2.useRef)(null);
   if (!adapterRef.current) {
     if (usePhantom) {
       adapterRef.current = getOrCreatePhantomAdapter({
@@ -1442,7 +1449,7 @@ function ManagedWalletProvider({
     }
   }
   const adapter = adapterRef.current;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     let cancelled = false;
     (async () => {
       if (usePhantom) {
@@ -1531,7 +1538,7 @@ function ManagedWalletProvider({
       cancelled = true;
     };
   }, [adapter, storage, usePhantom]);
-  const handleConnect = (0, import_react.useCallback)(async () => {
+  const handleConnect = (0, import_react2.useCallback)(async () => {
     console.log(TAG3, "handleConnect() \u2014 user tapped connect");
     setConnecting(true);
     setError(null);
@@ -1552,7 +1559,7 @@ function ManagedWalletProvider({
       setConnecting(false);
     }
   }, [adapter, storage, usePhantom]);
-  const disconnect = (0, import_react.useCallback)(async () => {
+  const disconnect = (0, import_react2.useCallback)(async () => {
     console.log(TAG3, "disconnect() \u2014 clearing all state");
     adapter.disconnect?.();
     if (usePhantom && phantomSingleton) {
@@ -1601,18 +1608,18 @@ function ManagedWalletProvider({
 }
 
 // src/ui/AuthGate.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 
 // src/hooks/useEvents.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useEvents(params) {
   const { client } = useDubs();
-  const [data, setData] = (0, import_react2.useState)(null);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
-  const [error, setError] = (0, import_react2.useState)(null);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [error, setError] = (0, import_react3.useState)(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = (0, import_react2.useCallback)(async () => {
+  const fetchData = (0, import_react3.useCallback)(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -1624,20 +1631,20 @@ function useEvents(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useGame.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useGame(gameId) {
   const { client } = useDubs();
-  const [data, setData] = (0, import_react3.useState)(null);
-  const [loading, setLoading] = (0, import_react3.useState)(!!gameId);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const fetchData = (0, import_react3.useCallback)(async () => {
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(!!gameId);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const fetchData = (0, import_react4.useCallback)(async () => {
     if (!gameId) return;
     setLoading(true);
     setError(null);
@@ -1650,21 +1657,21 @@ function useGame(gameId) {
       setLoading(false);
     }
   }, [client, gameId]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useGames.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useGames(params) {
   const { client } = useDubs();
-  const [data, setData] = (0, import_react4.useState)(null);
-  const [loading, setLoading] = (0, import_react4.useState)(true);
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [data, setData] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(true);
+  const [error, setError] = (0, import_react5.useState)(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = (0, import_react4.useCallback)(async () => {
+  const fetchData = (0, import_react5.useCallback)(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -1676,21 +1683,21 @@ function useGames(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useNetworkGames.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useNetworkGames(params) {
   const { client } = useDubs();
-  const [data, setData] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  const [error, setError] = (0, import_react5.useState)(null);
+  const [data, setData] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(true);
+  const [error, setError] = (0, import_react6.useState)(null);
   const paramKey = JSON.stringify(params ?? {});
-  const fetchData = (0, import_react5.useCallback)(async () => {
+  const fetchData = (0, import_react6.useCallback)(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -1702,14 +1709,14 @@ function useNetworkGames(params) {
       setLoading(false);
     }
   }, [client, paramKey]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 
 // src/hooks/useCreateGame.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/utils/transaction.ts
 var import_web33 = require("@solana/web3.js");
@@ -1732,15 +1739,15 @@ async function signAndSendBase64Transaction(base64Tx, wallet, connection) {
 // src/hooks/useCreateGame.ts
 function useCreateGame() {
   const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = (0, import_react6.useState)("idle");
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [data, setData] = (0, import_react6.useState)(null);
-  const reset = (0, import_react6.useCallback)(() => {
+  const [status, setStatus] = (0, import_react7.useState)("idle");
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [data, setData] = (0, import_react7.useState)(null);
+  const reset = (0, import_react7.useCallback)(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = (0, import_react6.useCallback)(async (params) => {
+  const execute = (0, import_react7.useCallback)(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
@@ -1791,18 +1798,18 @@ function useCreateGame() {
 }
 
 // src/hooks/useJoinGame.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useJoinGame() {
   const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = (0, import_react7.useState)("idle");
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [data, setData] = (0, import_react7.useState)(null);
-  const reset = (0, import_react7.useCallback)(() => {
+  const [status, setStatus] = (0, import_react8.useState)("idle");
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [data, setData] = (0, import_react8.useState)(null);
+  const reset = (0, import_react8.useCallback)(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = (0, import_react7.useCallback)(async (params) => {
+  const execute = (0, import_react8.useCallback)(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
@@ -1854,18 +1861,18 @@ function useJoinGame() {
 }
 
 // src/hooks/useClaim.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useClaim() {
   const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = (0, import_react8.useState)("idle");
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [data, setData] = (0, import_react8.useState)(null);
-  const reset = (0, import_react8.useCallback)(() => {
+  const [status, setStatus] = (0, import_react9.useState)("idle");
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [data, setData] = (0, import_react9.useState)(null);
+  const reset = (0, import_react9.useCallback)(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = (0, import_react8.useCallback)(async (params) => {
+  const execute = (0, import_react9.useCallback)(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
@@ -1925,18 +1932,18 @@ function useClaim() {
 }
 
 // src/hooks/useCreateCustomGame.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useCreateCustomGame() {
   const { client, wallet, connection } = useDubs();
-  const [status, setStatus] = (0, import_react9.useState)("idle");
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [data, setData] = (0, import_react9.useState)(null);
-  const reset = (0, import_react9.useCallback)(() => {
+  const [status, setStatus] = (0, import_react10.useState)("idle");
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [data, setData] = (0, import_react10.useState)(null);
+  const reset = (0, import_react10.useCallback)(() => {
     setStatus("idle");
     setError(null);
     setData(null);
   }, []);
-  const execute = (0, import_react9.useCallback)(async (params) => {
+  const execute = (0, import_react10.useCallback)(async (params) => {
     setStatus("building");
     setError(null);
     setData(null);
@@ -1988,18 +1995,18 @@ function useCreateCustomGame() {
 }
 
 // src/hooks/useHasClaimed.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useHasClaimed(gameId) {
   const { client, wallet } = useDubs();
-  const [hasClaimed, setHasClaimed] = (0, import_react10.useState)(false);
-  const [amountClaimed, setAmountClaimed] = (0, import_react10.useState)(null);
-  const [claimSignature, setClaimSignature] = (0, import_react10.useState)(null);
-  const [isResolved, setIsResolved] = (0, import_react10.useState)(false);
-  const [loading, setLoading] = (0, import_react10.useState)(false);
-  const [error, setError] = (0, import_react10.useState)(null);
-  const [trigger, setTrigger] = (0, import_react10.useState)(0);
+  const [hasClaimed, setHasClaimed] = (0, import_react11.useState)(false);
+  const [amountClaimed, setAmountClaimed] = (0, import_react11.useState)(null);
+  const [claimSignature, setClaimSignature] = (0, import_react11.useState)(null);
+  const [isResolved, setIsResolved] = (0, import_react11.useState)(false);
+  const [loading, setLoading] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [trigger, setTrigger] = (0, import_react11.useState)(0);
   const refetch = () => setTrigger((t) => t + 1);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!gameId || !wallet.publicKey) {
       setHasClaimed(false);
       setAmountClaimed(null);
@@ -2039,12 +2046,12 @@ function useHasClaimed(gameId) {
 }
 
 // src/hooks/useAuth.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_bs583 = __toESM(require("bs58"));
 
 // src/auth-context.ts
-var import_react11 = require("react");
-var AuthContext = (0, import_react11.createContext)(null);
+var import_react12 = require("react");
+var AuthContext = (0, import_react12.createContext)(null);
 
 // src/utils/device.ts
 var import_react_native5 = require("react-native");
@@ -2095,14 +2102,14 @@ async function getDeviceInfo() {
 
 // src/hooks/useAuth.ts
 function useAuth() {
-  const sharedAuth = (0, import_react12.useContext)(AuthContext);
+  const sharedAuth = (0, import_react13.useContext)(AuthContext);
   const { client, wallet } = useDubs();
-  const [status, setStatus] = (0, import_react12.useState)("idle");
-  const [user, setUser] = (0, import_react12.useState)(null);
-  const [token, setToken] = (0, import_react12.useState)(null);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const pendingAuth = (0, import_react12.useRef)(null);
-  const reset = (0, import_react12.useCallback)(() => {
+  const [status, setStatus] = (0, import_react13.useState)("idle");
+  const [user, setUser] = (0, import_react13.useState)(null);
+  const [token, setToken] = (0, import_react13.useState)(null);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const pendingAuth = (0, import_react13.useRef)(null);
+  const reset = (0, import_react13.useCallback)(() => {
     setStatus("idle");
     setUser(null);
     setToken(null);
@@ -2110,7 +2117,7 @@ function useAuth() {
     pendingAuth.current = null;
     client.setToken(null);
   }, [client]);
-  const authenticate = (0, import_react12.useCallback)(async () => {
+  const authenticate = (0, import_react13.useCallback)(async () => {
     try {
       if (!wallet.publicKey) {
         throw new Error("Wallet not connected");
@@ -2143,7 +2150,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client, wallet]);
-  const register = (0, import_react12.useCallback)(async (username, referralCode, avatarUrl) => {
+  const register = (0, import_react13.useCallback)(async (username, referralCode, avatarUrl) => {
     try {
       const pending = pendingAuth.current;
       if (!pending) {
@@ -2170,7 +2177,7 @@ function useAuth() {
       setStatus("error");
     }
   }, [client]);
-  const logout = (0, import_react12.useCallback)(async () => {
+  const logout = (0, import_react13.useCallback)(async () => {
     try {
       await client.logout();
     } catch {
@@ -2181,7 +2188,7 @@ function useAuth() {
     setError(null);
     pendingAuth.current = null;
   }, [client]);
-  const restoreSession = (0, import_react12.useCallback)(async (savedToken) => {
+  const restoreSession = (0, import_react13.useCallback)(async (savedToken) => {
     try {
       client.setToken(savedToken);
       const me = await client.getMe();
@@ -2240,9 +2247,9 @@ function AuthGate({
 }) {
   const { client } = useDubs();
   const auth = useAuth();
-  const [phase, setPhase] = (0, import_react13.useState)("init");
-  const [registrationPhase, setRegistrationPhase] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
+  const [phase, setPhase] = (0, import_react14.useState)("init");
+  const [registrationPhase, setRegistrationPhase] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -2268,18 +2275,18 @@ function AuthGate({
       cancelled = true;
     };
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (auth.status === "needsRegistration") setRegistrationPhase(true);
   }, [auth.status]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (auth.token) onSaveToken(auth.token);
   }, [auth.token]);
-  const retry = (0, import_react13.useCallback)(() => {
+  const retry = (0, import_react14.useCallback)(() => {
     setRegistrationPhase(false);
     auth.reset();
     auth.authenticate();
   }, [auth]);
-  const handleRegister = (0, import_react13.useCallback)(
+  const handleRegister = (0, import_react14.useCallback)(
     (username, referralCode, avatarUrl) => {
       auth.register(username, referralCode, avatarUrl);
     },
@@ -2358,7 +2365,7 @@ function DefaultErrorScreen({ error, onRetry, appName, accentColor }) {
 function StepIndicator({ currentStep }) {
   const t = useDubsTheme();
   const steps = [0, 1, 2, 3];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react13.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: s.stepRow, children: steps.map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react14.default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_native6.View,
@@ -2382,19 +2389,19 @@ function DefaultRegistrationScreen({
 }) {
   const t = useDubsTheme();
   const accent = accentColor || t.accent;
-  const [step, setStep] = (0, import_react13.useState)(0);
-  const [avatarSeed, setAvatarSeed] = (0, import_react13.useState)(generateSeed);
-  const [avatarStyle, setAvatarStyle] = (0, import_react13.useState)("adventurer");
-  const [showStyles, setShowStyles] = (0, import_react13.useState)(false);
-  const [username, setUsername] = (0, import_react13.useState)("");
-  const [referralCode, setReferralCode] = (0, import_react13.useState)("");
-  const [checking, setChecking] = (0, import_react13.useState)(false);
-  const [availability, setAvailability] = (0, import_react13.useState)(null);
-  const debounceRef = (0, import_react13.useRef)(null);
-  const fadeAnim = (0, import_react13.useRef)(new import_react_native6.Animated.Value(1)).current;
-  const slideAnim = (0, import_react13.useRef)(new import_react_native6.Animated.Value(0)).current;
+  const [step, setStep] = (0, import_react14.useState)(0);
+  const [avatarSeed, setAvatarSeed] = (0, import_react14.useState)(generateSeed);
+  const [avatarStyle, setAvatarStyle] = (0, import_react14.useState)("adventurer");
+  const [showStyles, setShowStyles] = (0, import_react14.useState)(false);
+  const [username, setUsername] = (0, import_react14.useState)("");
+  const [referralCode, setReferralCode] = (0, import_react14.useState)("");
+  const [checking, setChecking] = (0, import_react14.useState)(false);
+  const [availability, setAvailability] = (0, import_react14.useState)(null);
+  const debounceRef = (0, import_react14.useRef)(null);
+  const fadeAnim = (0, import_react14.useRef)(new import_react_native6.Animated.Value(1)).current;
+  const slideAnim = (0, import_react14.useRef)(new import_react_native6.Animated.Value(0)).current;
   const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const trimmed = username.trim();
     if (trimmed.length < 3) {
@@ -2417,7 +2424,7 @@ function DefaultRegistrationScreen({
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, [username, client]);
-  const animateToStep = (0, import_react13.useCallback)((newStep) => {
+  const animateToStep = (0, import_react14.useCallback)((newStep) => {
     const dir = newStep > step ? 1 : -1;
     import_react_native6.Keyboard.dismiss();
     import_react_native6.Animated.parallel([
@@ -2716,7 +2723,7 @@ var s = import_react_native6.StyleSheet.create({
 
 // src/provider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var DubsContext = (0, import_react14.createContext)(null);
+var DubsContext = (0, import_react15.createContext)(null);
 function DubsProvider({
   apiKey,
   children,
@@ -2738,11 +2745,11 @@ function DubsProvider({
   const baseUrl = baseUrlOverride || config.baseUrl;
   const rpcUrl = rpcUrlOverride || config.rpcUrl;
   const cluster = config.cluster;
-  const client = (0, import_react14.useMemo)(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
-  const connection = (0, import_react14.useMemo)(() => new import_web34.Connection(rpcUrl, { commitment: "confirmed" }), [rpcUrl]);
-  const storage = (0, import_react14.useMemo)(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
-  const [uiConfig, setUiConfig] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const client = (0, import_react15.useMemo)(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const connection = (0, import_react15.useMemo)(() => new import_web34.Connection(rpcUrl, { commitment: "confirmed" }), [rpcUrl]);
+  const storage = (0, import_react15.useMemo)(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
+  const [uiConfig, setUiConfig] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     client.getAppConfig().then((config2) => {
       console.log("[DubsProvider] UI config loaded:", JSON.stringify(config2));
       setUiConfig(config2);
@@ -2752,8 +2759,12 @@ function DubsProvider({
     });
   }, [client]);
   if (uiConfig === null) return null;
+  const themeOverrides = {};
+  if (uiConfig.accentColor) {
+    themeOverrides.accent = uiConfig.accentColor;
+  }
   if (externalWallet) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeOverrideProvider, { value: themeOverrides, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ExternalWalletProvider,
       {
         client,
@@ -2770,9 +2781,9 @@ function DubsProvider({
         uiConfig,
         children
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeOverrideProvider, { value: themeOverrides, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ManagedWalletProvider,
     {
       appName: uiConfig.appName || appName,
@@ -2802,7 +2813,7 @@ function DubsProvider({
         }
       )
     }
-  );
+  ) });
 }
 function ManagedInner({
   client,
@@ -2819,11 +2830,11 @@ function ManagedInner({
   children
 }) {
   const managedDisconnect = useDisconnect();
-  const disconnect = (0, import_react14.useCallback)(async () => {
+  const disconnect = (0, import_react15.useCallback)(async () => {
     client.setToken(null);
     await managedDisconnect?.();
   }, [client, managedDisconnect]);
-  const value = (0, import_react14.useMemo)(
+  const value = (0, import_react15.useMemo)(
     () => ({ client, wallet, connection, appName, network, disconnect, uiConfig }),
     [client, wallet, connection, appName, network, disconnect, uiConfig]
   );
@@ -2859,13 +2870,13 @@ function ExternalWalletProvider({
   uiConfig,
   children
 }) {
-  const disconnect = (0, import_react14.useCallback)(async () => {
+  const disconnect = (0, import_react15.useCallback)(async () => {
     client.setToken(null);
     await storage.deleteItem(STORAGE_KEYS.JWT_TOKEN).catch(() => {
     });
     await wallet.disconnect?.();
   }, [client, storage, wallet]);
-  const value = (0, import_react14.useMemo)(
+  const value = (0, import_react15.useMemo)(
     () => ({ client, wallet, connection, appName, network, disconnect, uiConfig }),
     [client, wallet, connection, appName, network, disconnect, uiConfig]
   );
@@ -2890,19 +2901,19 @@ function ExternalWalletProvider({
   ) });
 }
 function useDubs() {
-  const ctx = (0, import_react14.useContext)(DubsContext);
+  const ctx = (0, import_react15.useContext)(DubsContext);
   if (!ctx) {
     throw new Error("useDubs must be used within a <DubsProvider>");
   }
   return ctx;
 }
 function useAppConfig() {
-  const ctx = (0, import_react14.useContext)(DubsContext);
+  const ctx = (0, import_react15.useContext)(DubsContext);
   return ctx?.uiConfig || {};
 }
 
 // src/ui/UserProfileCard.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_native7 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function truncateAddress(address, chars = 4) {
@@ -2922,7 +2933,7 @@ function UserProfileCard({
   memberSince
 }) {
   const t = useDubsTheme();
-  const imageUri = (0, import_react15.useMemo)(
+  const imageUri = (0, import_react16.useMemo)(
     () => avatarUrl || `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
     [avatarUrl, walletAddress]
   );
@@ -3115,7 +3126,7 @@ var styles3 = import_react_native8.StyleSheet.create({
 });
 
 // src/ui/game/GamePoster.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_native9 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function computeCountdown(lockTimestamp) {
@@ -3165,7 +3176,7 @@ function GamePoster({ game, ImageComponent }) {
   ] });
 }
 function TeamLogoInternal({ url, size, Img }) {
-  const [failed, setFailed] = (0, import_react16.useState)(false);
+  const [failed, setFailed] = (0, import_react17.useState)(false);
   if (!url || failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles4.logoPlaceholder, { width: size, height: size, borderRadius: size / 2 }] });
   }
@@ -3266,7 +3277,7 @@ var styles4 = import_react_native9.StyleSheet.create({
 });
 
 // src/ui/game/LivePoolsCard.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_native10 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function LivePoolsCard({
@@ -3282,7 +3293,7 @@ function LivePoolsCard({
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
   const totalPool = game.totalPool || 0;
-  const { homePercent, awayPercent, homeOdds, awayOdds } = (0, import_react17.useMemo)(() => {
+  const { homePercent, awayPercent, homeOdds, awayOdds } = (0, import_react18.useMemo)(() => {
     return {
       homePercent: totalPool > 0 ? homePool / totalPool * 100 : 50,
       awayPercent: totalPool > 0 ? awayPool / totalPool * 100 : 50,
@@ -3345,7 +3356,7 @@ var styles5 = import_react_native10.StyleSheet.create({
 });
 
 // src/ui/game/PickWinnerCard.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_native11 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function PickWinnerCard({
@@ -3363,7 +3374,7 @@ function PickWinnerCard({
   const totalPool = game.totalPool || 0;
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
-  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react18.useMemo)(() => ({
+  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react19.useMemo)(() => ({
     homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
     awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014",
     homeBets: bettors.filter((b) => b.team === "home").length,
@@ -3416,7 +3427,7 @@ function TeamOption({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react18.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react19.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showImage = imageUrl && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -3457,7 +3468,7 @@ var styles6 = import_react_native11.StyleSheet.create({
 });
 
 // src/ui/game/PlayersCard.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_native12 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function truncateWallet(addr, chars) {
@@ -3506,7 +3517,7 @@ function BettorRow({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react19.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react20.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showAvatar = bettor.avatar && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: [styles7.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }], children: [
@@ -3533,7 +3544,7 @@ var styles7 = import_react_native12.StyleSheet.create({
 });
 
 // src/ui/game/JoinGameButton.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_native13 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var STATUS_LABELS = {
@@ -3544,7 +3555,7 @@ var STATUS_LABELS = {
 };
 function JoinGameButton({ game, walletAddress, selectedTeam, status, onJoin }) {
   const t = useDubsTheme();
-  const alreadyJoined = (0, import_react20.useMemo)(() => {
+  const alreadyJoined = (0, import_react21.useMemo)(() => {
     if (!walletAddress) return false;
     return (game.bettors || []).some((b) => b.wallet === walletAddress);
   }, [game.bettors, walletAddress]);
@@ -3562,7 +3573,7 @@ function JoinGameButton({ game, walletAddress, selectedTeam, status, onJoin }) {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_native13.TouchableOpacity,
       {
-        style: [styles8.button, { backgroundColor: selectedTeam ? "#22D3EE" : t.border }],
+        style: [styles8.button, { backgroundColor: selectedTeam ? t.accent : t.border }],
         disabled: !selectedTeam || isJoining,
         onPress: onJoin,
         activeOpacity: 0.8,
@@ -3585,7 +3596,7 @@ var styles8 = import_react_native13.StyleSheet.create({
 });
 
 // src/ui/game/CreateCustomGameSheet.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_native14 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var STATUS_LABELS2 = {
@@ -3610,18 +3621,18 @@ function CreateCustomGameSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useCreateCustomGame();
-  const [selectedAmount, setSelectedAmount] = (0, import_react21.useState)(null);
-  const [customAmount, setCustomAmount] = (0, import_react21.useState)("");
-  const [isCustom, setIsCustom] = (0, import_react21.useState)(false);
-  const overlayOpacity = (0, import_react21.useRef)(new import_react_native14.Animated.Value(0)).current;
-  (0, import_react21.useEffect)(() => {
+  const [selectedAmount, setSelectedAmount] = (0, import_react22.useState)(null);
+  const [customAmount, setCustomAmount] = (0, import_react22.useState)("");
+  const [isCustom, setIsCustom] = (0, import_react22.useState)(false);
+  const overlayOpacity = (0, import_react22.useRef)(new import_react_native14.Animated.Value(0)).current;
+  (0, import_react22.useEffect)(() => {
     import_react_native14.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (visible) {
       setSelectedAmount(defaultAmount ?? null);
       setCustomAmount("");
@@ -3629,7 +3640,7 @@ function CreateCustomGameSheet({
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       onSuccess?.(mutation.data);
       const timer = setTimeout(() => {
@@ -3638,23 +3649,23 @@ function CreateCustomGameSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
   }, [mutation.status, mutation.error]);
-  const handlePresetSelect = (0, import_react21.useCallback)((amount) => {
+  const handlePresetSelect = (0, import_react22.useCallback)((amount) => {
     setSelectedAmount(amount);
     setIsCustom(false);
     setCustomAmount("");
     onAmountChange?.(amount);
   }, [onAmountChange]);
-  const handleCustomSelect = (0, import_react21.useCallback)(() => {
+  const handleCustomSelect = (0, import_react22.useCallback)(() => {
     setIsCustom(true);
     setSelectedAmount(null);
     onAmountChange?.(null);
   }, [onAmountChange]);
-  const handleCustomAmountChange = (0, import_react21.useCallback)((text) => {
+  const handleCustomAmountChange = (0, import_react22.useCallback)((text) => {
     const cleaned = text.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1");
     setCustomAmount(cleaned);
     const parsed = parseFloat(cleaned);
@@ -3668,7 +3679,7 @@ function CreateCustomGameSheet({
   const winnerTakes = pot * (1 - fee / 100);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canCreate = effectiveAmount !== null && effectiveAmount > 0 && !isMutating && mutation.status !== "success";
-  const handleCreate = (0, import_react21.useCallback)(async () => {
+  const handleCreate = (0, import_react22.useCallback)(async () => {
     if (!effectiveAmount || !wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -3937,7 +3948,7 @@ var styles9 = import_react_native14.StyleSheet.create({
 });
 
 // src/ui/game/JoinGameSheet.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_native15 = require("react-native");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var STATUS_LABELS3 = {
@@ -3962,22 +3973,22 @@ function JoinGameSheet({
   const { wallet } = useDubs();
   const mutation = useJoinGame();
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
-  const [selectedTeam, setSelectedTeam] = (0, import_react22.useState)(null);
-  const overlayOpacity = (0, import_react22.useRef)(new import_react_native15.Animated.Value(0)).current;
-  (0, import_react22.useEffect)(() => {
+  const [selectedTeam, setSelectedTeam] = (0, import_react23.useState)(null);
+  const overlayOpacity = (0, import_react23.useRef)(new import_react_native15.Animated.Value(0)).current;
+  (0, import_react23.useEffect)(() => {
     import_react_native15.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (visible) {
       setSelectedTeam(isCustomGame ? "away" : null);
       mutation.reset();
     }
   }, [visible]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       onSuccess?.(mutation.data);
       const timer = setTimeout(() => {
@@ -3986,7 +3997,7 @@ function JoinGameSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
@@ -3997,7 +4008,7 @@ function JoinGameSheet({
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
   const buyIn = game.buyIn;
-  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react22.useMemo)(() => ({
+  const { homeOdds, awayOdds, homeBets, awayBets } = (0, import_react23.useMemo)(() => ({
     homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
     awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014",
     homeBets: bettors.filter((b) => b.team === "home").length,
@@ -4009,14 +4020,14 @@ function JoinGameSheet({
   const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
   const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
   const selectedName = selectedTeam === "home" ? homeName : selectedTeam === "away" ? awayName : "\u2014";
-  const alreadyJoined = (0, import_react22.useMemo)(() => {
+  const alreadyJoined = (0, import_react23.useMemo)(() => {
     if (!wallet.publicKey) return false;
     const addr = wallet.publicKey.toBase58();
     return bettors.some((b) => b.wallet === addr);
   }, [bettors, wallet.publicKey]);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canJoin = selectedTeam !== null && !isMutating && mutation.status !== "success" && !alreadyJoined;
-  const handleJoin = (0, import_react22.useCallback)(async () => {
+  const handleJoin = (0, import_react23.useCallback)(async () => {
     if (!selectedTeam || !wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -4145,7 +4156,7 @@ function TeamButton({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = (0, import_react22.useState)(false);
+  const [imgFailed, setImgFailed] = (0, import_react23.useState)(false);
   const Img = ImageComponent || require("react-native").Image;
   const showImage = imageUrl && !imgFailed;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -4322,7 +4333,7 @@ var styles10 = import_react_native15.StyleSheet.create({
 });
 
 // src/ui/game/ClaimPrizeSheet.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_native16 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var STATUS_LABELS4 = {
@@ -4343,18 +4354,18 @@ function ClaimPrizeSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useClaim();
-  const overlayOpacity = (0, import_react23.useRef)(new import_react_native16.Animated.Value(0)).current;
-  const celebrationScale = (0, import_react23.useRef)(new import_react_native16.Animated.Value(0)).current;
-  const celebrationOpacity = (0, import_react23.useRef)(new import_react_native16.Animated.Value(0)).current;
-  const [showCelebration, setShowCelebration] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const overlayOpacity = (0, import_react24.useRef)(new import_react_native16.Animated.Value(0)).current;
+  const celebrationScale = (0, import_react24.useRef)(new import_react_native16.Animated.Value(0)).current;
+  const celebrationOpacity = (0, import_react24.useRef)(new import_react_native16.Animated.Value(0)).current;
+  const [showCelebration, setShowCelebration] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     import_react_native16.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
       duration: 250,
       useNativeDriver: true
     }).start();
   }, [visible, overlayOpacity]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (visible) {
       mutation.reset();
       setShowCelebration(false);
@@ -4362,7 +4373,7 @@ function ClaimPrizeSheet({
       celebrationOpacity.setValue(0);
     }
   }, [visible]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
       setShowCelebration(true);
       import_react_native16.Animated.parallel([
@@ -4385,14 +4396,14 @@ function ClaimPrizeSheet({
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (mutation.status === "error" && mutation.error) {
       onError?.(mutation.error);
     }
   }, [mutation.status, mutation.error]);
   const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
   const canClaim = !isMutating && mutation.status !== "success" && !!wallet.publicKey;
-  const handleClaim = (0, import_react23.useCallback)(async () => {
+  const handleClaim = (0, import_react24.useCallback)(async () => {
     if (!wallet.publicKey) return;
     try {
       await mutation.execute({
@@ -4476,7 +4487,7 @@ function ClaimPrizeSheet({
                 {
                   style: [
                     styles11.ctaButton,
-                    { backgroundColor: canClaim ? t.success : t.border }
+                    { backgroundColor: canClaim ? t.accent : t.border }
                   ],
                   disabled: !canClaim,
                   onPress: handleClaim,
@@ -4623,9 +4634,113 @@ var styles11 = import_react_native16.StyleSheet.create({
     fontSize: 13
   }
 });
+
+// src/ui/game/ClaimButton.tsx
+var import_react25 = require("react");
+var import_react_native17 = require("react-native");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ClaimButton({ gameId, style, onSuccess, onError }) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const game = useGame(gameId);
+  const claimStatus = useHasClaimed(gameId);
+  const [sheetVisible, setSheetVisible] = (0, import_react25.useState)(false);
+  const walletAddress = wallet.publicKey?.toBase58() ?? null;
+  const myBet = (0, import_react25.useMemo)(() => {
+    if (!walletAddress || !game.data?.bettors) return null;
+    return game.data.bettors.find((b) => b.wallet === walletAddress) ?? null;
+  }, [walletAddress, game.data?.bettors]);
+  const isResolved = game.data?.isResolved ?? false;
+  const isRefund = isResolved && game.data?.winnerSide === null;
+  const isWinner = isResolved && myBet != null && myBet.team === game.data?.winnerSide;
+  const isEligible = myBet != null && isResolved && (isWinner || isRefund);
+  const prizeAmount = isRefund ? myBet?.amount ?? 0 : game.data?.totalPool ?? 0;
+  const handleSuccess = (0, import_react25.useCallback)(
+    (result) => {
+      claimStatus.refetch();
+      onSuccess?.(result);
+    },
+    [claimStatus.refetch, onSuccess]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  if (game.loading || claimStatus.loading || !game.data || !walletAddress || !isEligible) {
+    return null;
+  }
+  const label = isRefund ? "Refund" : "Prize";
+  if (claimStatus.hasClaimed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native17.TouchableOpacity,
+      {
+        style: [styles12.badge, { borderColor: t.accent }, style],
+        activeOpacity: 1,
+        disabled: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native17.Text, { style: [styles12.badgeText, { color: t.accent }], children: [
+          label,
+          " Claimed!"
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native17.TouchableOpacity,
+      {
+        style: [styles12.button, { backgroundColor: t.accent }, style],
+        activeOpacity: 0.8,
+        onPress: () => setSheetVisible(true),
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native17.Text, { style: styles12.buttonText, children: [
+          "Claim ",
+          label,
+          " \u2014 ",
+          prizeAmount,
+          " SOL"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ClaimPrizeSheet,
+      {
+        visible: sheetVisible,
+        onDismiss: () => setSheetVisible(false),
+        gameId,
+        prizeAmount,
+        isRefund,
+        onSuccess: handleSuccess,
+        onError
+      }
+    )
+  ] });
+}
+var styles12 = import_react_native17.StyleSheet.create({
+  button: {
+    height: 52,
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  badge: {
+    height: 52,
+    borderRadius: 14,
+    borderWidth: 2,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20
+  },
+  badgeText: {
+    fontSize: 16,
+    fontWeight: "700"
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuthGate,
+  ClaimButton,
   ClaimPrizeSheet,
   ConnectWalletScreen,
   CreateCustomGameSheet,