@dubsdotapp/expo 0.5.33 → 0.5.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.33",
+  "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',

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/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) ──

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

@@ -97,9 +97,14 @@ export function JoinGameSheet({
   // 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 && oldestCredit.amountSOL >= game.buyIn;
+  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;