@dubsdotapp/expo 0.1.3 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -28,7 +28,13 @@
   "peerDependencies": {
     "@solana/web3.js": "^1.90.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "expo-secure-store": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-secure-store": {
+      "optional": true
+    }
   },
   "optionalDependencies": {
     "@solana-mobile/mobile-wallet-adapter-protocol-web3js": "^2.0.0"

package/src/auth-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import type { UseAuthResult } from './hooks/useAuth';
+
+/**
+ * Shared auth context provided by AuthGate.
+ * When useAuth() is called inside an AuthGate, it reads from this context
+ * so all components share the same auth state.
+ */
+export const AuthContext = createContext<UseAuthResult | null>(null);

package/src/client.ts

@@ -29,6 +29,8 @@ import type {
   DubsPublicUser,
   DubsAppUser,
   CheckUsernameResult,
+  LiveScore,
+  UiConfig,
 } from './types';
 
 export interface DubsClientConfig {
@@ -69,13 +71,23 @@ export class DubsClient {
       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) : undefined,
     });
 
-    const json = await res.json();
+    const text = await res.text();
+    console.log(`[DubsClient] ${method} ${path} → ${res.status}`, text.slice(0, 300));
+
+    let json: any;
+    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;
@@ -211,6 +223,14 @@ export class DubsClient {
     return res.game;
   }
 
+  async getLiveScore(gameId: string): Promise<LiveScore | null> {
+    const res = await this.request<{ success: true; liveScore: LiveScore | null }>(
+      'GET',
+      `/games/${encodeURIComponent(gameId)}/live-score`,
+    );
+    return res.liveScore;
+  }
+
   async getGames(params?: GetGamesParams): Promise<GameListItem[]> {
     const qs = new URLSearchParams();
     if (params?.wallet) qs.set('wallet', params.wallet);
@@ -230,6 +250,7 @@ export class DubsClient {
   async getNetworkGames(params?: GetNetworkGamesParams): Promise<{ games: GameListItem[]; pagination: Pagination }> {
     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();
@@ -352,4 +373,12 @@ export class DubsClient {
   getErrorCodesLocal(): Record<number, SolanaErrorCode> {
     return { ...SOLANA_PROGRAM_ERRORS };
   }
+
+  // ── App Config ──
+
+  /** Fetch the app's UI customization config (accent color, icon, tagline) */
+  async getAppConfig(): Promise<UiConfig> {
+    const res = await this.request<{ uiConfig: UiConfig }>('GET', '/apps/config');
+    return res.uiConfig || {};
+  }
 }

package/src/constants.ts

@@ -1,3 +1,18 @@
 export const DEFAULT_BASE_URL = 'https://dubs-server-prod-9c91d3f01199.herokuapp.com/api/developer/v1';
 
 export const DEFAULT_RPC_URL = 'https://api.mainnet-beta.solana.com';
+
+export type DubsNetwork = 'devnet' | 'mainnet-beta';
+
+export const NETWORK_CONFIG: Record<DubsNetwork, { baseUrl: string; rpcUrl: string; cluster: string }> = {
+  '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',
+  },
+};

package/src/hooks/useAuth.ts

@@ -1,6 +1,7 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useContext } from 'react';
 import bs58 from 'bs58';
 import { useDubs } from '../provider';
+import { AuthContext } from '../auth-context';
 import type { AuthStatus, DubsUser } from '../types';
 
 export interface UseAuthResult {
@@ -42,6 +43,9 @@ export interface UseAuthResult {
 }
 
 export function useAuth(): UseAuthResult {
+  // If inside AuthGate, return the shared auth state
+  const sharedAuth = useContext(AuthContext);
+
   const { client, wallet } = useDubs();
   const [status, setStatus] = useState<AuthStatus>('idle');
   const [user, setUser] = useState<DubsUser | null>(null);
@@ -127,7 +131,11 @@ export function useAuth(): UseAuthResult {
       });
 
       pendingAuth.current = null;
-      setUser(result.user);
+      // Use the chosen avatar locally if the backend didn't store it
+      const user = avatarUrl && !result.user.avatar
+        ? { ...result.user, avatar: avatarUrl }
+        : result.user;
+      setUser(user);
       setToken(result.token);
       setStatus('authenticated');
     } catch (err) {
@@ -166,6 +174,9 @@ export function useAuth(): UseAuthResult {
     }
   }, [client]);
 
+  // If shared context exists (inside AuthGate), prefer it over local state
+  if (sharedAuth) return sharedAuth;
+
   return {
     status,
     user,

package/src/hooks/useClaim.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { useDubs } from '../provider';
-import { signAndSendBase64Transaction, pollTransactionConfirmation } from '../utils/transaction';
+import { signAndSendBase64Transaction } from '../utils/transaction';
 import type { BuildClaimParams, MutationStatus } from '../types';
 
 export interface ClaimMutationResult {
@@ -10,7 +10,7 @@ export interface ClaimMutationResult {
 }
 
 export function useClaim() {
-  const { client, wallet, connection } = useDubs();
+  const { client, wallet } = useDubs();
   const [status, setStatus] = useState<MutationStatus>('idle');
   const [error, setError] = useState<Error | null>(null);
   const [data, setData] = useState<ClaimMutationResult | null>(null);
@@ -28,20 +28,20 @@ export function useClaim() {
 
     try {
       // 1. Build unsigned claim transaction
+      console.log('[useClaim] Step 1: Building claim transaction...');
       const claimResult = await client.buildClaimTransaction(params);
+      console.log('[useClaim] Step 1 done.');
 
-      // 2. Sign transaction
+      // 2. Sign and send transaction
       setStatus('signing');
+      console.log('[useClaim] Step 2: Signing and sending...');
       const signature = await signAndSendBase64Transaction(
         claimResult.transaction,
         wallet,
-        connection,
       );
+      console.log('[useClaim] Step 2 done. Signature:', signature);
 
-      // 3. Poll for confirmation (no backend confirm step for claims)
-      setStatus('confirming');
-      await pollTransactionConfirmation(signature, connection);
-
+      // Claims don't need backend confirmation — the on-chain tx is the claim
       const explorerUrl = `https://solscan.io/tx/${signature}`;
       const result: ClaimMutationResult = {
         gameId: params.gameId,
@@ -51,14 +51,16 @@ export function useClaim() {
 
       setData(result);
       setStatus('success');
+      console.log('[useClaim] Complete!');
       return result;
     } catch (err) {
+      console.error('[useClaim] FAILED:', err);
       const error = err instanceof Error ? err : new Error(String(err));
       setError(error);
       setStatus('error');
       throw error;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
 
   return { execute, status, error, data, reset };
 }

package/src/hooks/useCreateGame.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useDubs } from '../provider';
-import { signAndSendBase64Transaction, pollTransactionConfirmation } from '../utils/transaction';
-import type { CreateGameParams, ConfirmGameResult, MutationStatus } from '../types';
+import { signAndSendBase64Transaction } from '../utils/transaction';
+import type { CreateGameParams, MutationStatus } from '../types';
 
 export interface CreateGameMutationResult {
   gameId: string;
@@ -11,7 +11,7 @@ export interface CreateGameMutationResult {
 }
 
 export function useCreateGame() {
-  const { client, wallet, connection } = useDubs();
+  const { client, wallet } = useDubs();
   const [status, setStatus] = useState<MutationStatus>('idle');
   const [error, setError] = useState<Error | null>(null);
   const [data, setData] = useState<CreateGameMutationResult | null>(null);
@@ -29,23 +29,22 @@ export function useCreateGame() {
 
     try {
       // 1. Build unsigned transaction
+      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 });
 
-      // 2. Sign transaction
+      // 2. Sign and send transaction
       setStatus('signing');
+      console.log('[useCreateGame] Step 2: Signing and sending...');
       const signature = await signAndSendBase64Transaction(
         createResult.transaction,
         wallet,
-        connection,
       );
+      console.log('[useCreateGame] Step 2 done. Signature:', signature);
 
-      // 3. Poll for confirmation
+      // 3. Confirm with backend (server handles on-chain verification)
       setStatus('confirming');
-      await pollTransactionConfirmation(signature, connection);
-
-      // 4. Confirm with backend
-      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,
@@ -55,7 +54,9 @@ export function useCreateGame() {
         role: 'creator',
         gameAddress: createResult.gameAddress,
       });
+      console.log('[useCreateGame] Step 3 done.');
 
+      const explorerUrl = `https://solscan.io/tx/${signature}`;
       const result: CreateGameMutationResult = {
         gameId: createResult.gameId,
         gameAddress: createResult.gameAddress,
@@ -65,14 +66,16 @@ export function useCreateGame() {
 
       setData(result);
       setStatus('success');
+      console.log('[useCreateGame] Complete!');
       return result;
     } catch (err) {
+      console.error('[useCreateGame] FAILED:', err);
       const error = err instanceof Error ? err : new Error(String(err));
       setError(error);
       setStatus('error');
       throw error;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
 
   return { execute, status, error, data, reset };
 }

package/src/hooks/useJoinGame.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { useDubs } from '../provider';
-import { signAndSendBase64Transaction, pollTransactionConfirmation } from '../utils/transaction';
+import { signAndSendBase64Transaction } from '../utils/transaction';
 import type { JoinGameParams, MutationStatus } from '../types';
 
 export interface JoinGameMutationResult {
@@ -11,7 +11,7 @@ export interface JoinGameMutationResult {
 }
 
 export function useJoinGame() {
-  const { client, wallet, connection } = useDubs();
+  const { client, wallet } = useDubs();
   const [status, setStatus] = useState<MutationStatus>('idle');
   const [error, setError] = useState<Error | null>(null);
   const [data, setData] = useState<JoinGameMutationResult | null>(null);
@@ -29,33 +29,35 @@ export function useJoinGame() {
 
     try {
       // 1. Build unsigned transaction
+      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 });
 
-      // 2. Sign transaction
+      // 2. Sign and send transaction
       setStatus('signing');
+      console.log('[useJoinGame] Step 2: Signing and sending transaction...');
       const signature = await signAndSendBase64Transaction(
         joinResult.transaction,
         wallet,
-        connection,
       );
+      console.log('[useJoinGame] Step 2 done. Signature:', signature);
 
-      // 3. Poll for confirmation
+      // 3. Confirm with backend (server handles on-chain verification)
       setStatus('confirming');
-      await pollTransactionConfirmation(signature, connection);
-
-      // 4. Confirm with backend
-      setStatus('saving');
-      const explorerUrl = `https://solscan.io/tx/${signature}`;
-      await client.confirmGame({
+      const confirmParams = {
         gameId: params.gameId,
         playerWallet: params.playerWallet,
         signature,
         teamChoice: params.teamChoice,
         wagerAmount: params.amount,
-        role: 'joiner',
+        role: 'joiner' as const,
         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: JoinGameMutationResult = {
         gameId: params.gameId,
         gameAddress: joinResult.gameAddress,
@@ -65,14 +67,16 @@ export function useJoinGame() {
 
       setData(result);
       setStatus('success');
+      console.log('[useJoinGame] Complete!');
       return result;
     } catch (err) {
+      console.error('[useJoinGame] FAILED at status:', status, err);
       const error = err instanceof Error ? err : new Error(String(err));
       setError(error);
       setStatus('error');
       throw error;
     }
-  }, [client, wallet, connection]);
+  }, [client, wallet]);
 
   return { execute, status, error, data, reset };
 }

package/src/index.ts

@@ -2,7 +2,12 @@
 export { DubsClient } from './client';
 export type { DubsClientConfig } from './client';
 export { DubsApiError, parseSolanaError, SOLANA_PROGRAM_ERRORS } from './errors';
-export { DEFAULT_BASE_URL, DEFAULT_RPC_URL } from './constants';
+export { DEFAULT_BASE_URL, DEFAULT_RPC_URL, NETWORK_CONFIG } from './constants';
+export type { DubsNetwork } from './constants';
+
+// Storage
+export { createSecureStoreStorage, STORAGE_KEYS } from './storage';
+export type { TokenStorage } from './storage';
 
 // Types
 export type {
@@ -24,6 +29,7 @@ export type {
   ConfirmGameResult,
   BuildClaimParams,
   BuildClaimResult,
+  Bettor,
   GameDetail,
   GameMedia,
   GameListItem,
@@ -46,6 +52,9 @@ export type {
   RegisterResult,
   CheckUsernameResult,
   AuthStatus,
+  LiveScore,
+  LiveScoreCompetitor,
+  UiConfig,
 } from './types';
 
 // Provider
@@ -76,8 +85,18 @@ export type {
 } from './hooks';
 
 // UI
-export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsTheme } from './ui';
+export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsTheme, mergeTheme } from './ui';
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
 
+// Game widgets
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton } from './ui';
+export type {
+  GamePosterProps,
+  LivePoolsCardProps,
+  PickWinnerCardProps,
+  PlayersCardProps,
+  JoinGameButtonProps,
+} from './ui';
+
 // Utils
-export { signAndSendBase64Transaction, pollTransactionConfirmation } from './utils/transaction';
+export { signAndSendBase64Transaction } from './utils/transaction';

package/src/managed-wallet.tsx

@@ -0,0 +1,158 @@
+import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { MwaWalletAdapter } from './wallet/mwa-adapter';
+import { ConnectWalletScreen } from './ui/ConnectWalletScreen';
+import type { ConnectWalletScreenProps } from './ui/ConnectWalletScreen';
+import type { TokenStorage } from './storage';
+import { STORAGE_KEYS } from './storage';
+
+// ── Disconnect Context (internal) ──
+
+type DisconnectFn = () => Promise<void>;
+
+export const DisconnectContext = createContext<DisconnectFn | null>(null);
+
+export function useDisconnect(): DisconnectFn | null {
+  return useContext(DisconnectContext);
+}
+
+// ── Props ──
+
+interface ManagedWalletProviderProps {
+  appName: string;
+  cluster: string;
+  storage: TokenStorage;
+  renderConnectScreen?: ((props: ConnectWalletScreenProps) => React.ReactNode) | false;
+  /** Developer UI config overrides for the connect screen */
+  accentColor?: string;
+  appIcon?: string;
+  tagline?: string;
+  children: (adapter: MwaWalletAdapter) => React.ReactNode;
+}
+
+// ── Component ──
+
+export function ManagedWalletProvider({
+  appName,
+  cluster,
+  storage,
+  renderConnectScreen,
+  accentColor,
+  appIcon,
+  tagline,
+  children,
+}: ManagedWalletProviderProps) {
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const adapterRef = useRef<MwaWalletAdapter | null>(null);
+  const transactRef = useRef<any>(null);
+
+  // Lazily create adapter
+  if (!adapterRef.current) {
+    adapterRef.current = new MwaWalletAdapter({
+      transact: (...args: any[]) => {
+        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;
+
+  // Dynamic-import transact on mount
+  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 {
+        // MWA not installed — transact calls will throw a clear error
+      }
+
+      // Attempt silent reconnect from saved token
+      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 {
+        // Token expired or wallet unavailable — user will tap Connect manually
+      } 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]);
+
+  // Show nothing until we've attempted silent reconnect
+  if (!isReady) return null;
+
+  // Not connected — show connect screen
+  if (!connected) {
+    if (renderConnectScreen === false) {
+      // Headless mode — render nothing
+      return null;
+    }
+    const connectProps: ConnectWalletScreenProps = {
+      onConnect: handleConnect,
+      connecting,
+      error,
+      appName,
+      accentColor,
+      appIcon,
+      tagline,
+    };
+    if (renderConnectScreen) {
+      return <>{renderConnectScreen(connectProps)}</>;
+    }
+    return <ConnectWalletScreen {...connectProps} />;
+  }
+
+  // Connected — render children with adapter + disconnect
+  return (
+    <DisconnectContext.Provider value={disconnect}>
+      {children(adapter)}
+    </DisconnectContext.Provider>
+  );
+}