@dubsdotapp/expo 0.1.3 → 0.2.1

package/src/provider.tsx

@@ -1,35 +1,271 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import { Connection } from '@solana/web3.js';
 import { DubsClient } from './client';
-import { DEFAULT_RPC_URL } from './constants';
+import { NETWORK_CONFIG } from './constants';
+import type { DubsNetwork } from './constants';
 import type { WalletAdapter } from './wallet/types';
+import type { TokenStorage } from './storage';
+import { createSecureStoreStorage, STORAGE_KEYS } from './storage';
+import { ManagedWalletProvider, useDisconnect } from './managed-wallet';
+import { AuthGate } from './ui/AuthGate';
+import type { RegistrationScreenProps } from './ui/AuthGate';
+import type { ConnectWalletScreenProps } from './ui/ConnectWalletScreen';
+import type { AuthStatus, UiConfig } from './types';
+
+// ── Context ──
 
 export interface DubsContextValue {
   client: DubsClient;
   wallet: WalletAdapter;
   connection: Connection;
+  appName: string;
+  network: DubsNetwork;
+  disconnect: () => Promise<void>;
 }
 
 const DubsContext = createContext<DubsContextValue | null>(null);
 
+// ── Props ──
+
 export interface DubsProviderProps {
   apiKey: string;
+  children: React.ReactNode;
+  appName?: string;
+  network?: DubsNetwork;
+  /** Escape hatch: bring your own wallet adapter. Disables managed MWA. */
+  wallet?: WalletAdapter;
+  /** Escape hatch: custom token persistence. Defaults to expo-secure-store. */
+  tokenStorage?: TokenStorage;
+  /** Escape hatch: override base URL (takes precedence over network). */
   baseUrl?: string;
+  /** Escape hatch: override RPC URL (takes precedence over network). */
   rpcUrl?: string;
+  /** Custom connect screen, or false to hide it entirely (headless mode). */
+  renderConnectScreen?: ((props: ConnectWalletScreenProps) => React.ReactNode) | false;
+  /** Custom loading screen shown during auth. */
+  renderLoading?: (status: AuthStatus) => React.ReactNode;
+  /** Custom error screen shown on auth failure. */
+  renderError?: (error: Error, retry: () => void) => React.ReactNode;
+  /** Custom registration screen. */
+  renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  /** Set to false to skip AuthGate and connect screen (headless/BYOA mode). Default: true. */
+  managed?: boolean;
+}
+
+// ── Provider ──
+
+export function DubsProvider({
+  apiKey,
+  children,
+  appName = 'Dubs',
+  network = 'mainnet-beta',
+  wallet: externalWallet,
+  tokenStorage,
+  baseUrl: baseUrlOverride,
+  rpcUrl: rpcUrlOverride,
+  renderConnectScreen,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  managed = true,
+}: DubsProviderProps) {
+  // Resolve network config — explicit props override network defaults
+  const config = NETWORK_CONFIG[network];
+  const baseUrl = baseUrlOverride || config.baseUrl;
+  const rpcUrl = rpcUrlOverride || config.rpcUrl;
+  const cluster = config.cluster;
+
+  // Create stable instances
+  const client = useMemo(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const connection = useMemo(() => new Connection(rpcUrl, { commitment: 'confirmed' }), [rpcUrl]);
+  const storage = useMemo(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
+
+  // Fetch developer UI config on mount (silent fail = default theme)
+  const [uiConfig, setUiConfig] = useState<UiConfig>({});
+  useEffect(() => {
+    client.getAppConfig().then(setUiConfig).catch(() => {});
+  }, [client]);
+
+  // ── Path A: External wallet provided (BYOA) ──
+  if (externalWallet) {
+    return (
+      <ExternalWalletProvider
+        client={client}
+        connection={connection}
+        wallet={externalWallet}
+        appName={uiConfig.appName || appName}
+        network={network}
+        storage={storage}
+        managed={managed}
+        renderLoading={renderLoading}
+        renderError={renderError}
+        renderRegistration={renderRegistration}
+        accentColor={uiConfig.accentColor}
+      >
+        {children}
+      </ExternalWalletProvider>
+    );
+  }
+
+  // ── Path B: Managed MWA wallet ──
+  return (
+    <ManagedWalletProvider
+      appName={uiConfig.appName || appName}
+      cluster={cluster}
+      storage={storage}
+      renderConnectScreen={renderConnectScreen}
+      accentColor={uiConfig.accentColor}
+      appIcon={uiConfig.appIcon}
+      tagline={uiConfig.tagline}
+    >
+      {(adapter) => (
+        <ManagedInner
+          client={client}
+          connection={connection}
+          wallet={adapter}
+          appName={uiConfig.appName || appName}
+          network={network}
+          storage={storage}
+          renderLoading={renderLoading}
+          renderError={renderError}
+          renderRegistration={renderRegistration}
+          accentColor={uiConfig.accentColor}
+        >
+          {children}
+        </ManagedInner>
+      )}
+    </ManagedWalletProvider>
+  );
+}
+
+// ── ManagedInner: context + AuthGate for managed wallet path ──
+
+function ManagedInner({
+  client,
+  connection,
+  wallet,
+  appName,
+  network,
+  storage,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  accentColor,
+  children,
+}: {
+  client: DubsClient;
+  connection: Connection;
   wallet: WalletAdapter;
+  appName: string;
+  network: DubsNetwork;
+  storage: TokenStorage;
+  renderLoading?: (status: AuthStatus) => React.ReactNode;
+  renderError?: (error: Error, retry: () => void) => React.ReactNode;
+  renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  accentColor?: string;
   children: React.ReactNode;
+}) {
+  const managedDisconnect = useDisconnect();
+
+  const disconnect = useCallback(async () => {
+    // Clear client JWT
+    client.setToken(null);
+    // Delegate to managed wallet (clears adapter + storage)
+    await managedDisconnect?.();
+  }, [client, managedDisconnect]);
+
+  const value = useMemo<DubsContextValue>(
+    () => ({ client, wallet, connection, appName, network, disconnect }),
+    [client, wallet, connection, appName, network, disconnect],
+  );
+
+  return (
+    <DubsContext.Provider value={value}>
+      <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={renderLoading}
+        renderError={renderError}
+        renderRegistration={renderRegistration}
+        appName={appName}
+        accentColor={accentColor}
+      >
+        {children}
+      </AuthGate>
+    </DubsContext.Provider>
+  );
 }
 
-export function DubsProvider({ apiKey, baseUrl, rpcUrl, wallet, children }: DubsProviderProps) {
-  const value = useMemo<DubsContextValue>(() => {
-    const client = new DubsClient({ apiKey, baseUrl });
-    const connection = new Connection(rpcUrl || DEFAULT_RPC_URL, { commitment: 'confirmed' });
-    return { client, wallet, connection };
-  }, [apiKey, baseUrl, rpcUrl, wallet]);
+// ── ExternalWalletProvider: for BYOA path ──
+
+function ExternalWalletProvider({
+  client,
+  connection,
+  wallet,
+  appName,
+  network,
+  storage,
+  managed,
+  renderLoading,
+  renderError,
+  renderRegistration,
+  accentColor,
+  children,
+}: {
+  client: DubsClient;
+  connection: Connection;
+  wallet: WalletAdapter;
+  appName: string;
+  network: DubsNetwork;
+  storage: TokenStorage;
+  managed: boolean;
+  renderLoading?: (status: AuthStatus) => React.ReactNode;
+  renderError?: (error: Error, retry: () => void) => React.ReactNode;
+  renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  accentColor?: string;
+  children: React.ReactNode;
+}) {
+  const disconnect = useCallback(async () => {
+    client.setToken(null);
+    await storage.deleteItem(STORAGE_KEYS.JWT_TOKEN).catch(() => {});
+    await wallet.disconnect?.();
+  }, [client, storage, wallet]);
+
+  const value = useMemo<DubsContextValue>(
+    () => ({ client, wallet, connection, appName, network, disconnect }),
+    [client, wallet, connection, appName, network, disconnect],
+  );
 
-  return <DubsContext.Provider value={value}>{children}</DubsContext.Provider>;
+  if (!managed) {
+    // Headless mode — just context, no AuthGate
+    return <DubsContext.Provider value={value}>{children}</DubsContext.Provider>;
+  }
+
+  return (
+    <DubsContext.Provider value={value}>
+      <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={renderLoading}
+        renderError={renderError}
+        renderRegistration={renderRegistration}
+        appName={appName}
+        accentColor={accentColor}
+      >
+        {children}
+      </AuthGate>
+    </DubsContext.Provider>
+  );
 }
 
+// ── Hook ──
+
 export function useDubs(): DubsContextValue {
   const ctx = useContext(DubsContext);
   if (!ctx) {

package/src/storage.ts

@@ -0,0 +1,57 @@
+export interface TokenStorage {
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string): Promise<void>;
+  deleteItem(key: string): Promise<void>;
+}
+
+export const STORAGE_KEYS = {
+  MWA_AUTH_TOKEN: 'dubs_mwa_auth_token',
+  JWT_TOKEN: 'dubs_jwt_token',
+} as const;
+
+/**
+ * Creates a TokenStorage backed by expo-secure-store.
+ * Lazy-imports the module so it's only required at runtime when actually used.
+ * Throws a clear error if expo-secure-store is not installed.
+ */
+export function createSecureStoreStorage(): TokenStorage {
+  // Use `any` to avoid requiring expo-secure-store types at build time.
+  // The module is lazy-imported at runtime only when this storage is actually used.
+  let SecureStore: any = null;
+
+  function getStore(): {
+    getItemAsync: (key: string) => Promise<string | null>;
+    setItemAsync: (key: string, value: string) => Promise<void>;
+    deleteItemAsync: (key: string) => Promise<void>;
+  } {
+    if (!SecureStore) {
+      try {
+        // Use require() to keep the import opaque to TypeScript's DTS generation.
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        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 — ' +
+          'or pass a custom tokenStorage prop to <DubsProvider>.',
+        );
+      }
+    }
+    return SecureStore;
+  }
+
+  return {
+    async getItem(key: string): Promise<string | null> {
+      const store = getStore();
+      return store.getItemAsync(key);
+    },
+    async setItem(key: string, value: string): Promise<void> {
+      const store = getStore();
+      await store.setItemAsync(key, value);
+    },
+    async deleteItem(key: string): Promise<void> {
+      const store = getStore();
+      await store.deleteItemAsync(key);
+    },
+  };
+}

package/src/types.ts

@@ -159,6 +159,14 @@ export interface GameMedia {
   thumbnail: string | null;
 }
 
+export interface Bettor {
+  wallet: string;
+  username: string | null;
+  avatar: string | null;
+  team: 'home' | 'away' | 'draw';
+  amount: number;
+}
+
 export interface GameDetail {
   gameId: string;
   gameAddress: string;
@@ -168,15 +176,14 @@ export interface GameDetail {
   isLocked: boolean;
   isResolved: boolean;
   status: string;
+  league: string | null;
   lockTimestamp: number | null;
-  homePlayers: string[];
-  awayPlayers: string[];
-  drawPlayers: string[];
+  opponents: GameListOpponent[];
+  bettors: Bettor[];
   homePool: number;
   awayPool: number;
   drawPool: number;
   totalPool: number;
-  sportsEvent: Record<string, unknown> | null;
   media: GameMedia;
   createdAt: string;
   updatedAt: string;
@@ -216,6 +223,7 @@ export interface GetGamesParams {
 
 export interface GetNetworkGamesParams {
   league?: string;
+  exclude_wallet?: string;
   limit?: number;
   offset?: number;
 }
@@ -339,3 +347,38 @@ export interface MutationResult<TParams, TResult> {
   data: TResult | null;
   reset: () => void;
 }
+
+// ── Live Scores ──
+
+export interface LiveScoreCompetitor {
+  name: string;
+  homeAway: 'home' | 'away';
+  score: number;
+  logo: string | null;
+  abbreviation: string;
+}
+
+export interface LiveScore {
+  status: string;
+  period: number | null;
+  displayClock: string | null;
+  detail: string | null;
+  shortDetail: string | null;
+  competitors: LiveScoreCompetitor[];
+  ufcData?: {
+    currentRound: number;
+    totalRounds: number;
+    clock: string;
+    fightState: string;
+    statusDetail: string;
+  };
+}
+
+// ── UI Config (developer branding) ──
+
+export interface UiConfig {
+  accentColor?: string;
+  appIcon?: string;
+  appName?: string;
+  tagline?: string;
+}

package/src/ui/AuthGate.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react-native';
 import { useAuth } from '../hooks';
 import { useDubs } from '../provider';
+import { AuthContext } from '../auth-context';
 import { useDubsTheme } from './theme';
 import type { AuthStatus } from '../types';
 import type { DubsClient } from '../client';
@@ -55,6 +56,8 @@ export interface AuthGateProps {
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
   appName?: string;
+  /** Override accent color for registration screens (from developer UI config) */
+  accentColor?: string;
 }
 
 // ── AuthGate Component ──
@@ -67,6 +70,7 @@ export function AuthGate({
   renderError,
   renderRegistration,
   appName = 'Dubs',
+  accentColor,
 }: AuthGateProps) {
   const { client } = useDubs();
   const auth = useAuth();
@@ -125,7 +129,9 @@ export function AuthGate({
     return <DefaultLoadingScreen status="authenticating" appName={appName} />;
   }
 
-  if (auth.status === 'authenticated') return <>{children}</>;
+  if (auth.status === 'authenticated') {
+    return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
+  }
 
   if (registrationPhase) {
     const isRegistering = auth.status === 'registering';
@@ -140,6 +146,7 @@ export function AuthGate({
         error={regError}
         client={client}
         appName={appName}
+        accentColor={accentColor}
       />
     );
   }
@@ -253,8 +260,10 @@ function DefaultRegistrationScreen({
   error,
   client,
   appName,
-}: RegistrationScreenProps & { appName: string }) {
+  accentColor,
+}: RegistrationScreenProps & { appName: string; accentColor?: string }) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
 
   // ── Shared state ──
   const [step, setStep] = useState(0);
@@ -322,7 +331,7 @@ function DefaultRegistrationScreen({
         <StepIndicator currentStep={0} />
 
         <View style={s.avatarCenter}>
-          <View style={[s.avatarFrame, { borderColor: t.accent }]}>
+          <View style={[s.avatarFrame, { borderColor: accent }]}>
             <Image source={{ uri: avatarUrl }} style={s.avatarLarge} />
             <View style={[s.checkBadge, { backgroundColor: t.success }]}>
               <Text style={s.checkBadgeText}>&#10003;</Text>
@@ -339,11 +348,11 @@ function DefaultRegistrationScreen({
             <Text style={[s.outlineBtnText, { color: t.text }]}>&#8635;  Shuffle</Text>
           </TouchableOpacity>
           <TouchableOpacity
-            style={[s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + '15' }]}
+            style={[s.outlineBtn, { borderColor: accent, backgroundColor: accent + '15' }]}
             onPress={() => setShowStyles(!showStyles)}
             activeOpacity={0.7}
           >
-            <Text style={[s.outlineBtnText, { color: t.accent }]}>&#9786;  Customize</Text>
+            <Text style={[s.outlineBtnText, { color: accent }]}>&#9786;  Customize</Text>
           </TouchableOpacity>
         </View>
 
@@ -353,7 +362,7 @@ function DefaultRegistrationScreen({
               <TouchableOpacity
                 key={st}
                 onPress={() => setAvatarStyle(st)}
-                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }]}
+                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }]}
               >
                 <Image source={{ uri: getAvatarUrl(st, avatarSeed, 80) }} style={s.styleThumb} />
               </TouchableOpacity>
@@ -364,7 +373,7 @@ function DefaultRegistrationScreen({
 
       <View style={s.bottomRow}>
         <TouchableOpacity
-          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1 }]}
+          style={[s.primaryBtn, { backgroundColor: accent, flex: 1 }]}
           onPress={() => animateToStep(1)}
           activeOpacity={0.8}
         >
@@ -388,7 +397,7 @@ function DefaultRegistrationScreen({
         <StepIndicator currentStep={1} />
 
         <View style={s.avatarCenter}>
-          <View style={[s.avatarFrameSmall, { borderColor: t.accent }]}>
+          <View style={[s.avatarFrameSmall, { borderColor: accent }]}>
             <Image source={{ uri: avatarUrl }} style={s.avatarSmall} />
             <View style={[s.checkBadgeSm, { backgroundColor: t.success }]}>
               <Text style={s.checkBadgeTextSm}>&#10003;</Text>
@@ -401,7 +410,7 @@ function DefaultRegistrationScreen({
             Username <Text style={{ color: t.errorText }}>*</Text>
           </Text>
           <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}
@@ -431,7 +440,7 @@ function DefaultRegistrationScreen({
           <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
         </TouchableOpacity>
         <TouchableOpacity
-          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}
@@ -503,7 +512,7 @@ function DefaultRegistrationScreen({
           <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
         </TouchableOpacity>
         <TouchableOpacity
-          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}

package/src/ui/ConnectWalletScreen.tsx

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   StyleSheet,
+  Image,
 } from 'react-native';
 import { useDubsTheme } from './theme';
 
@@ -17,6 +18,12 @@ export interface ConnectWalletScreenProps {
   error?: string | null;
   /** App name shown in the header. Defaults to "Dubs" */
   appName?: string;
+  /** Override accent color (e.g. from developer UI config) */
+  accentColor?: string;
+  /** URL to app icon — renders as Image instead of the default letter circle */
+  appIcon?: string;
+  /** Override subtitle text below app name */
+  tagline?: string;
 }
 
 export function ConnectWalletScreen({
@@ -24,20 +31,33 @@ export function ConnectWalletScreen({
   connecting = false,
   error = null,
   appName = 'Dubs',
+  accentColor,
+  appIcon,
+  tagline,
 }: ConnectWalletScreenProps) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
 
   return (
     <View style={[styles.container, { backgroundColor: t.background }]}>
       <View style={styles.content}>
         {/* Branding */}
         <View style={styles.brandingSection}>
-          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
-            <Text style={styles.logoText}>D</Text>
-          </View>
+          {appIcon ? (
+            <Image
+              source={{ uri: appIcon }}
+              style={styles.logoImage}
+            />
+          ) : (
+            <View style={[styles.logoCircle, { backgroundColor: accent }]}>
+              <Text style={styles.logoText}>
+                {appName.charAt(0).toUpperCase()}
+              </Text>
+            </View>
+          )}
           <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
           <Text style={[styles.subtitle, { color: t.textMuted }]}>
-            Connect your Solana wallet to get started
+            {tagline || 'Connect your Solana wallet to get started'}
           </Text>
         </View>
 
@@ -55,7 +75,7 @@ export function ConnectWalletScreen({
           ) : null}
 
           <TouchableOpacity
-            style={[styles.connectButton, { backgroundColor: t.accent }]}
+            style={[styles.connectButton, { backgroundColor: accent }]}
             onPress={onConnect}
             disabled={connecting}
             activeOpacity={0.8}
@@ -100,6 +120,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 8,
   },
+  logoImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+    marginBottom: 8,
+  },
   logoText: {
     fontSize: 36,
     fontWeight: '800',