@dubsdotapp/expo 0.5.32 → 0.5.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.32",
+  "version": "0.5.34",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/client.ts

@@ -200,6 +200,37 @@ export class DubsClient {
   }
 
   async createGame(params: CreateGameParams): Promise<CreateGameResult> {
+    // Sponsored path: spend an active streak credit instead of paying
+    // rent + buy-in. Server picks oldest FIFO credit, returns the
+    // partial-signed compound tx + promoCode so confirmGame can mark
+    // the credit as used after the on-chain confirm.
+    if (params.useCredit) {
+      const res = await this.request<{
+        success: true;
+        gameId: string;
+        gameAddress: string;
+        transaction: string;
+        lockTimestamp: number;
+        event: UnifiedEvent;
+        promoCode: string;
+        sponsorWallet?: string;
+        wagerAmount: number;
+      }>('POST', '/games/create-sponsored', {
+        id: params.id,
+        teamChoice: params.teamChoice,
+      });
+      return {
+        gameId: res.gameId,
+        gameAddress: res.gameAddress,
+        transaction: res.transaction,
+        lockTimestamp: res.lockTimestamp,
+        event: res.event,
+        promoCode: res.promoCode,
+        sponsorWallet: res.sponsorWallet,
+        wagerAmount: res.wagerAmount,
+      };
+    }
+
     const res = await this.request<{ success: true } & CreateGameResult>(
       'POST',
       '/games/create',
@@ -215,6 +246,31 @@ export class DubsClient {
   }
 
   async joinGame(params: JoinGameParams): Promise<JoinGameResult> {
+    // Sponsored path: spend an active streak credit instead of buy-in.
+    // Server picks the user's oldest active credit (FIFO); we just flag
+    // the intent. Result includes promoCode for the confirm step to
+    // mark as used.
+    if (params.useCredit) {
+      const res = await this.request<{
+        success: true;
+        gameId: string;
+        transaction: string;
+        gameAddress: string;
+        promoCode: string;
+        sponsorWallet?: string;
+      }>('POST', '/games/join-sponsored', {
+        gameId: params.gameId,
+        teamChoice: params.teamChoice,
+      });
+      return {
+        gameId: res.gameId,
+        transaction: res.transaction,
+        gameAddress: res.gameAddress,
+        promoCode: res.promoCode,
+        sponsorWallet: res.sponsorWallet,
+      };
+    }
+
     const res = await this.request<{ success: true } & JoinGameResult>(
       'POST',
       '/games/join',

package/src/hooks/useCreateGame.ts

@@ -58,14 +58,21 @@ export function useCreateGame() {
       // 3. Confirm with backend (server handles on-chain verification)
       setStatus('confirming');
       console.log('[useCreateGame] Step 3: Confirming with backend...');
+      // For sponsored creates, the server forces wager to the credit
+      // amount — use that, not whatever was in params, so the saved
+      // game record is consistent with the on-chain bet.
+      const wagerAmount = createResult.wagerAmount ?? params.wagerAmount;
       const confirmResult = await client.confirmGame({
         gameId: createResult.gameId,
         playerWallet: params.playerWallet,
         signature,
         teamChoice: params.teamChoice,
-        wagerAmount: params.wagerAmount,
+        wagerAmount,
         role: 'creator',
         gameAddress: createResult.gameAddress,
+        // Echo the credit code through so the server marks it as used
+        // after the on-chain confirm succeeds.
+        promoCode: createResult.promoCode,
       });
       console.log('[useCreateGame] Step 3 done.');
 
@@ -94,14 +101,14 @@ export function useCreateGame() {
           params.teamChoice === 'away' ? teamNickname(away) :
           'Draw';
 
-        const message = `I just placed a ${params.wagerAmount} SOL bet on ${teamLabel} - Join me!`;
+        const message = `I just placed a ${wagerAmount} SOL bet on ${teamLabel} - Join me!`;
         const gameInvite = {
           gameId: createResult.gameId,
           gameAddress: createResult.gameAddress,
           title: event?.title,
           league: event?.league,
           gameType: 'sports',
-          buyIn: params.wagerAmount,
+          buyIn: wagerAmount,
           status: 'waiting',
           homeTeam: home,
           awayTeam: away,

package/src/hooks/useJoinGame.ts

@@ -53,6 +53,9 @@ export function useJoinGame() {
         wagerAmount: params.amount,
         role: 'joiner' as const,
         gameAddress: joinResult.gameAddress,
+        // Pass through when this was a sponsored join — server marks
+        // the credit as used after the on-chain confirm succeeds.
+        promoCode: joinResult.promoCode,
       };
       console.log('[useJoinGame] Step 3: Confirming with backend...', confirmParams);
       const confirmResult = await client.confirmGame(confirmParams);

package/src/types.ts

@@ -95,6 +95,14 @@ export interface CreateGameParams {
   playerWallet: string;
   teamChoice: 'home' | 'away' | 'draw';
   wagerAmount: number;
+  /**
+   * When true, fund create+join with one of the user's active 0.01 SOL
+   * streak credits instead of paying rent + buy-in from their own
+   * wallet. SDK picks the oldest credit (FIFO). Treasury covers rent
+   * + buy-in; player only signs to consent. Buy-in is forced to the
+   * credit amount.
+   */
+  useCredit?: boolean;
 }
 
 export interface CreateGameResult {
@@ -103,6 +111,11 @@ export interface CreateGameResult {
   transaction: string;
   lockTimestamp: number;
   event: UnifiedEvent;
+  /** Set when sponsored — echoed back to confirmGame for mark-as-used. */
+  promoCode?: string;
+  sponsorWallet?: string;
+  /** Server-confirmed wager amount (== credit amount when sponsored). */
+  wagerAmount?: number;
 }
 
 // ── Custom Game (game_mode=6) ──
@@ -130,12 +143,26 @@ export interface JoinGameParams {
   gameId: string;
   teamChoice: 'home' | 'away' | 'draw';
   amount: number;
+  /**
+   * When true, spend one of the user's active 0.01 SOL streak credits
+   * instead of paying buy-in from the player's own wallet. The SDK
+   * picks the oldest credit (FIFO). The treasury covers buy-in + tx
+   * fee; the player only signs to consent. No-op if the user has no
+   * active credits — call useCredits() to check before enabling.
+   */
+  useCredit?: boolean;
 }
 
 export interface JoinGameResult {
   gameId: string;
   transaction: string;
   gameAddress: string;
+  /**
+   * Set when this join was sponsored. The mutation hook echoes this
+   * back to confirmGame so the server can mark the credit as used.
+   */
+  promoCode?: string;
+  sponsorWallet?: string;
 }
 
 // ── Confirm Game ──
@@ -148,6 +175,8 @@ export interface ConfirmGameParams {
   wagerAmount?: number;
   role?: 'creator' | 'joiner';
   gameAddress?: string;
+  /** Echoed back from a sponsored joinGame so the server marks the credit as used. */
+  promoCode?: string;
 }
 
 export interface ConfirmGameResult {

package/src/ui/game/CreateGameSheet.tsx

@@ -15,6 +15,7 @@ import { useDubsTheme } from '../theme';
 import { useDubs } from '../../provider';
 import { useCreateGame } from '../../hooks/useCreateGame';
 import type { CreateGameMutationResult } from '../../hooks/useCreateGame';
+import { useCredits } from '../../hooks/useCredits';
 import type { UnifiedEvent } from '../../types';
 import { SolSlider } from './SolSlider';
 import { TeamButton } from './TeamButton';
@@ -74,10 +75,19 @@ export function CreateGameSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useCreateGame();
+  const { credits, refetch: refetchCredits } = useCredits();
 
   const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
   const [wager, setWager] = useState(0.01);
   const [showSuccess, setShowSuccess] = useState(false);
+  const [useCredit, setUseCredit] = useState(false);
+
+  const oldestCredit = credits.length > 0 ? credits[0] : null;
+  // Compare in lamports to avoid float drift between credit.amountSOL and
+  // the slider's wager value. The on-chain instruction requires exact
+  // match anyway — if either side has a sub-lamport rounding error we'd
+  // get a confusing on-chain failure instead of a clean toggle gate.
+  const canUseCredit = !!oldestCredit; // Any 0.01 SOL credit covers the 0.01 SOL minimum buy-in
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
   const successScale = useRef(new Animated.Value(0)).current;
@@ -144,12 +154,17 @@ export function CreateGameSheet({
         id: event.id,
         playerWallet: wallet.publicKey.toBase58(),
         teamChoice: selectedTeam,
-        wagerAmount: wager,
+        // When sponsoring, the on-chain instruction forces buy-in to
+        // the credit's amount; pass that so client-side wager state
+        // matches what gets recorded.
+        wagerAmount: useCredit && oldestCredit ? oldestCredit.amountSOL : wager,
+        useCredit: useCredit && canUseCredit ? true : undefined,
       });
+      if (useCredit) refetchCredits();
     } catch {
       // Error captured in mutation state
     }
-  }, [selectedTeam, wallet.publicKey, mutation.execute, event.id, wager]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedTeam, wallet.publicKey, mutation.execute, event.id, wager, useCredit, oldestCredit, canUseCredit, refetchCredits]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const statusLabel = STATUS_LABELS[mutation.status] || '';
 
@@ -239,8 +254,31 @@ export function CreateGameSheet({
               </View>
             </View>
 
-            {/* SOL Slider */}
-            {selectedTeam && (
+            {/* Credit toggle — only when user has at least one credit */}
+            {selectedTeam && canUseCredit && oldestCredit && (
+              <TouchableOpacity
+                style={[styles.creditRow, { backgroundColor: useCredit ? '#22C55E18' : t.surface, borderColor: useCredit ? '#22C55E' : t.border }]}
+                activeOpacity={0.8}
+                onPress={() => setUseCredit(v => !v)}
+              >
+                <View style={styles.creditRowText}>
+                  <Text style={[styles.creditTitle, { color: useCredit ? '#22C55E' : t.text }]}>
+                    🎁 Use my {formatSol(oldestCredit.amountSOL)} SOL credit
+                  </Text>
+                  <Text style={[styles.creditSub, { color: t.textMuted }]}>
+                    {useCredit
+                      ? 'Treasury covers rent + buy-in'
+                      : `${credits.length} credit${credits.length === 1 ? '' : 's'} from your streak`}
+                  </Text>
+                </View>
+                <View style={[styles.creditCheckbox, useCredit && { backgroundColor: '#22C55E', borderColor: '#22C55E' }]}>
+                  {useCredit && <Text style={styles.creditCheck}>✓</Text>}
+                </View>
+              </TouchableOpacity>
+            )}
+
+            {/* SOL Slider — hidden when sponsoring (wager locked to credit) */}
+            {selectedTeam && !useCredit && (
               <SolSlider
                 value={wager}
                 min={0.01}
@@ -318,6 +356,13 @@ const styles = StyleSheet.create({
   ctaText: { color: '#FFFFFF', fontSize: 16, fontWeight: '700' },
   ctaLoading: { flexDirection: 'row', alignItems: 'center', gap: 10 },
 
+  creditRow: { flexDirection: 'row', alignItems: 'center', gap: 12, marginTop: 12, padding: 12, borderRadius: 12, borderWidth: 1.5 },
+  creditRowText: { flex: 1, gap: 2 },
+  creditTitle: { fontSize: 14, fontWeight: '700' },
+  creditSub: { fontSize: 12, fontWeight: '500' },
+  creditCheckbox: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: '#3A3A3C', alignItems: 'center', justifyContent: 'center' },
+  creditCheck: { color: '#FFFFFF', fontSize: 14, fontWeight: '900' },
+
   successOverlay: { ...StyleSheet.absoluteFillObject, zIndex: 100, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.85)' },
   successContent: { alignItems: 'center', gap: 12 },
   successEmoji: { fontSize: 64 },

package/src/ui/game/JoinGameSheet.tsx

@@ -15,6 +15,7 @@ import { useDubsTheme } from '../theme';
 import { useDubs } from '../../provider';
 import { useJoinGame } from '../../hooks/useJoinGame';
 import type { JoinGameMutationResult } from '../../hooks/useJoinGame';
+import { useCredits } from '../../hooks/useCredits';
 import type { GameDetail } from '../../types';
 import { SolSlider } from './SolSlider';
 import { TeamButton } from './TeamButton';
@@ -85,12 +86,25 @@ export function JoinGameSheet({
   const t = useDubsTheme();
   const { wallet } = useDubs();
   const mutation = useJoinGame();
+  const { credits, refetch: refetchCredits } = useCredits();
 
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
   const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | 'draw' | null>(null);
   const [wager, setWager] = useState(game.buyIn);
   const [showSuccess, setShowSuccess] = useState(false);
+  // "Use my streak credit" toggle. Only meaningful when the user has at
+  // least one active credit AND the credit's amount covers buy-in. The
+  // sponsored on-chain instruction transfers exactly the credit amount,
+  // so when this is on we lock wager to the credit value.
+  //
+  // Compare in lamports to dodge float drift between credit.amountSOL
+  // (server-rounded to 5dp) and game.buyIn — a 0.01 SOL credit must
+  // visibly cover a 0.01 SOL buy-in, which `>=` on raw floats can miss.
+  const [useCredit, setUseCredit] = useState(false);
+  const oldestCredit = credits.length > 0 ? credits[0] : null;
+  const canUseCredit = !!oldestCredit
+    && Math.round(oldestCredit.amountSOL * 1e9) >= Math.round(game.buyIn * 1e9);
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
   const successScale = useRef(new Animated.Value(0)).current;
@@ -213,12 +227,18 @@ export function JoinGameSheet({
         playerWallet: wallet.publicKey.toBase58(),
         gameId: game.gameId,
         teamChoice: selectedTeam,
-        amount: wager,
+        // When useCredit is on, the on-chain instruction transfers
+        // exactly the credit's amount; pass that as the wager.
+        amount: useCredit && oldestCredit ? oldestCredit.amountSOL : wager,
+        useCredit: useCredit && canUseCredit ? true : undefined,
       });
+      // The credit was just spent — refresh the list so the toggle
+      // disappears (or rolls to the next FIFO credit).
+      if (useCredit) refetchCredits();
     } catch {
       // Error is already captured in mutation state
     }
-  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, wager]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, wager, useCredit, oldestCredit, canUseCredit, refetchCredits]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const statusLabel = STATUS_LABELS[mutation.status] || '';
 
@@ -430,8 +450,31 @@ export function JoinGameSheet({
               )}
             </View>
 
-            {/* SOL Slider — sits right below summary card */}
-            {selectedTeam && !isPoolModeEnabled && !alreadyJoined && (
+            {/* Credit toggle — only when user has a credit ≥ buy-in */}
+            {selectedTeam && !alreadyJoined && canUseCredit && oldestCredit && (
+              <TouchableOpacity
+                style={[styles.creditRow, { backgroundColor: useCredit ? '#22C55E18' : t.surface, borderColor: useCredit ? '#22C55E' : t.border }]}
+                activeOpacity={0.8}
+                onPress={() => setUseCredit(v => !v)}
+              >
+                <View style={styles.creditRowText}>
+                  <Text style={[styles.creditTitle, { color: useCredit ? '#22C55E' : t.text }]}>
+                    🎁 Use my {formatSol(oldestCredit.amountSOL)} SOL credit
+                  </Text>
+                  <Text style={[styles.creditSub, { color: t.textMuted }]}>
+                    {useCredit
+                      ? 'Treasury covers this bet — wager locked to credit amount'
+                      : `${credits.length} credit${credits.length === 1 ? '' : 's'} available from your streak`}
+                  </Text>
+                </View>
+                <View style={[styles.creditCheckbox, useCredit && { backgroundColor: '#22C55E', borderColor: '#22C55E' }]}>
+                  {useCredit && <Text style={styles.creditCheck}>✓</Text>}
+                </View>
+              </TouchableOpacity>
+            )}
+
+            {/* SOL Slider — hidden when sponsoring with a credit */}
+            {selectedTeam && !isPoolModeEnabled && !alreadyJoined && !useCredit && (
               <SolSlider
                 value={wager}
                 min={game.buyIn}
@@ -804,4 +847,39 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 10,
   },
+  creditRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginTop: 12,
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1.5,
+  },
+  creditRowText: {
+    flex: 1,
+    gap: 2,
+  },
+  creditTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  creditSub: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  creditCheckbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    borderWidth: 2,
+    borderColor: '#3A3A3C',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  creditCheck: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '900',
+  },
 });