@dubsdotapp/expo 0.5.31 → 0.5.33

package/package.json

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

package/src/client.ts

@@ -215,6 +215,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/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/index.ts

@@ -124,6 +124,7 @@ export {
   useJackpot,
   useJackpotHistory,
   useEnterJackpot,
+  useCredits,
 } from './hooks';
 export type {
   CreateGameMutationResult,
@@ -145,6 +146,7 @@ export type {
   UseJackpotResult,
   UseJackpotHistoryResult,
   EnterJackpotMutationResult,
+  UseCreditsResult,
 } from './hooks';
 
 export { useHighlights, useShorts } from './hooks';

package/src/types.ts

@@ -130,12 +130,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 +162,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/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,20 @@ 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.
+  const [useCredit, setUseCredit] = useState(false);
+  const oldestCredit = credits.length > 0 ? credits[0] : null;
+  const canUseCredit = !!oldestCredit && oldestCredit.amountSOL >= game.buyIn;
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
   const successScale = useRef(new Animated.Value(0)).current;
@@ -213,12 +222,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 +445,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 +842,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',
+  },
 });