@dubsdotapp/expo 0.2.31 → 0.2.33

package/package.json

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

package/src/client.ts

@@ -15,6 +15,8 @@ import type {
   ConfirmGameResult,
   BuildClaimParams,
   BuildClaimResult,
+  ConfirmClaimParams,
+  ConfirmClaimResult,
   GameDetail,
   GameListItem,
   GetGamesParams,
@@ -245,6 +247,20 @@ export class DubsClient {
     };
   }
 
+  async confirmClaim(gameId: string, params: ConfirmClaimParams): Promise<ConfirmClaimResult> {
+    const res = await this.request<{ success: true } & ConfirmClaimResult>(
+      'POST',
+      `/games/${encodeURIComponent(gameId)}/claim/confirm`,
+      params,
+    );
+    return {
+      gameId: res.gameId,
+      signature: res.signature,
+      explorerUrl: res.explorerUrl,
+      message: res.message,
+    };
+  }
+
   // ── Game Queries ──
 
   async getGame(gameId: string): Promise<GameDetail> {

package/src/hooks/useClaim.ts

@@ -21,7 +21,7 @@ export function useClaim() {
     setData(null);
   }, []);
 
-  const execute = useCallback(async (params: BuildClaimParams): Promise<ClaimMutationResult> => {
+  const execute = useCallback(async (params: BuildClaimParams & { amountClaimed?: number }): Promise<ClaimMutationResult> => {
     setStatus('building');
     setError(null);
     setData(null);
@@ -42,12 +42,20 @@ export function useClaim() {
       );
       console.log('[useClaim] Step 2 done. Signature:', signature);
 
-      // Claims don't need backend confirmation — the on-chain tx is the claim
-      const explorerUrl = `https://solscan.io/tx/${signature}`;
+      // 3. Confirm claim with backend (records signature + amount in DB)
+      setStatus('confirming');
+      console.log('[useClaim] Step 3: Confirming claim...');
+      const confirmResult = await client.confirmClaim(params.gameId, {
+        playerWallet: params.playerWallet,
+        signature,
+        amountClaimed: params.amountClaimed,
+      });
+      console.log('[useClaim] Step 3 done.');
+
       const result: ClaimMutationResult = {
         gameId: params.gameId,
         signature,
-        explorerUrl,
+        explorerUrl: confirmResult.explorerUrl,
       };
 
       setData(result);

package/src/index.ts

@@ -31,6 +31,8 @@ export type {
   ConfirmGameResult,
   BuildClaimParams,
   BuildClaimResult,
+  ConfirmClaimParams,
+  ConfirmClaimResult,
   Bettor,
   GameDetail,
   GameMedia,
@@ -95,7 +97,7 @@ export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsT
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet } from './ui';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet } from './ui';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -104,6 +106,7 @@ export type {
   JoinGameButtonProps,
   CreateCustomGameSheetProps,
   JoinGameSheetProps,
+  ClaimPrizeSheetProps,
 } from './ui';
 
 // Utils

package/src/types.ts

@@ -170,6 +170,21 @@ export interface BuildClaimResult {
   message: string;
 }
 
+// ── Confirm Claim ──
+
+export interface ConfirmClaimParams {
+  playerWallet: string;
+  signature: string;
+  amountClaimed?: number;
+}
+
+export interface ConfirmClaimResult {
+  gameId: string;
+  signature: string;
+  explorerUrl: string;
+  message: string;
+}
+
 // ── Game Detail (returned by /games/:gameId) ──
 
 export interface GameMedia {

package/src/ui/game/ClaimPrizeSheet.tsx

@@ -0,0 +1,367 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  Modal,
+  Animated,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { useDubsTheme } from '../theme';
+import { useDubs } from '../../provider';
+import { useClaim } from '../../hooks/useClaim';
+import type { ClaimMutationResult } from '../../hooks/useClaim';
+
+export interface ClaimPrizeSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  gameId: string;
+  /** Prize amount in SOL */
+  prizeAmount: number;
+  /** Callbacks */
+  onSuccess?: (result: ClaimMutationResult) => void;
+  onError?: (error: Error) => void;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  building: 'Building transaction...',
+  signing: 'Approve in wallet...',
+  confirming: 'Confirming...',
+  success: 'Claimed!',
+};
+
+export function ClaimPrizeSheet({
+  visible,
+  onDismiss,
+  gameId,
+  prizeAmount,
+  onSuccess,
+  onError,
+}: ClaimPrizeSheetProps) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const mutation = useClaim();
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const celebrationScale = useRef(new Animated.Value(0)).current;
+  const celebrationOpacity = useRef(new Animated.Value(0)).current;
+  const [showCelebration, setShowCelebration] = useState(false);
+
+  // Animate overlay on visibility change
+  useEffect(() => {
+    Animated.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, overlayOpacity]);
+
+  // Reset state when sheet opens
+  useEffect(() => {
+    if (visible) {
+      mutation.reset();
+      setShowCelebration(false);
+      celebrationScale.setValue(0);
+      celebrationOpacity.setValue(0);
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Celebration animation + auto-dismiss on success
+  useEffect(() => {
+    if (mutation.status === 'success' && mutation.data) {
+      setShowCelebration(true);
+
+      Animated.parallel([
+        Animated.spring(celebrationScale, {
+          toValue: 1,
+          tension: 50,
+          friction: 6,
+          useNativeDriver: true,
+        }),
+        Animated.timing(celebrationOpacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      onSuccess?.(mutation.data);
+
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Report errors
+  useEffect(() => {
+    if (mutation.status === 'error' && mutation.error) {
+      onError?.(mutation.error);
+    }
+  }, [mutation.status, mutation.error]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
+  const canClaim = !isMutating && mutation.status !== 'success' && !!wallet.publicKey;
+
+  const handleClaim = useCallback(async () => {
+    if (!wallet.publicKey) return;
+
+    try {
+      await mutation.execute({
+        playerWallet: wallet.publicKey.toBase58(),
+        gameId,
+        amountClaimed: prizeAmount,
+      });
+    } catch {
+      // Error is already captured in mutation state
+    }
+  }, [wallet.publicKey, mutation.execute, gameId, prizeAmount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const statusLabel = STATUS_LABELS[mutation.status] || '';
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent
+      onRequestClose={onDismiss}
+    >
+      <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+        <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
+      </Animated.View>
+
+      <KeyboardAvoidingView
+        style={styles.keyboardView}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <View style={styles.sheetPositioner}>
+          <View style={[styles.sheet, { backgroundColor: t.background }]}>
+            {/* Drag handle */}
+            <View style={styles.handleRow}>
+              <View style={[styles.handle, { backgroundColor: t.textMuted }]} />
+            </View>
+
+            {/* Header */}
+            <View style={styles.header}>
+              <Text style={[styles.headerTitle, { color: t.text }]}>
+                {showCelebration ? 'Prize Claimed!' : 'Claim Prize'}
+              </Text>
+              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
+                <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Celebration */}
+            {showCelebration && (
+              <Animated.View
+                style={[
+                  styles.celebrationContainer,
+                  {
+                    opacity: celebrationOpacity,
+                    transform: [{ scale: celebrationScale }],
+                  },
+                ]}
+              >
+                <Text style={styles.celebrationEmoji}>{'🏆'}</Text>
+                <Text style={[styles.celebrationText, { color: t.success }]}>
+                  +{prizeAmount} SOL
+                </Text>
+                <Text style={[styles.celebrationSubtext, { color: t.textMuted }]}>
+                  Winnings sent to your wallet
+                </Text>
+              </Animated.View>
+            )}
+
+            {/* Summary Card */}
+            {!showCelebration && (
+              <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
+                <View style={styles.summaryRow}>
+                  <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Prize</Text>
+                  <Text style={[styles.summaryValue, { color: t.success }]}>
+                    {prizeAmount} SOL
+                  </Text>
+                </View>
+                <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+                <View style={styles.summaryRow}>
+                  <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Game</Text>
+                  <Text
+                    style={[styles.summaryValue, { color: t.text }]}
+                    numberOfLines={1}
+                  >
+                    {gameId.slice(0, 8)}...{gameId.slice(-4)}
+                  </Text>
+                </View>
+              </View>
+            )}
+
+            {/* Error Display */}
+            {mutation.error && (
+              <View style={[styles.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
+                <Text style={[styles.errorText, { color: t.errorText }]}>{mutation.error.message}</Text>
+              </View>
+            )}
+
+            {/* CTA Button */}
+            {!showCelebration && (
+              <TouchableOpacity
+                style={[
+                  styles.ctaButton,
+                  { backgroundColor: canClaim ? t.success : t.border },
+                ]}
+                disabled={!canClaim}
+                onPress={handleClaim}
+                activeOpacity={0.8}
+              >
+                {isMutating ? (
+                  <View style={styles.ctaLoading}>
+                    <ActivityIndicator size="small" color="#FFFFFF" />
+                    <Text style={styles.ctaText}>{statusLabel}</Text>
+                  </View>
+                ) : (
+                  <Text style={[styles.ctaText, !canClaim && { opacity: 0.5 }]}>
+                    Claim Prize — {prizeAmount} SOL
+                  </Text>
+                )}
+              </TouchableOpacity>
+            )}
+
+            {/* Explorer link on success */}
+            {mutation.data?.explorerUrl && (
+              <Text style={[styles.explorerHint, { color: t.textMuted }]}>
+                View on Solscan
+              </Text>
+            )}
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  overlayTap: {
+    flex: 1,
+  },
+  keyboardView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheetPositioner: {
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+  },
+  handleRow: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.4,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  closeButton: {
+    fontSize: 20,
+    padding: 4,
+  },
+  // Celebration
+  celebrationContainer: {
+    alignItems: 'center',
+    paddingVertical: 32,
+    gap: 8,
+  },
+  celebrationEmoji: {
+    fontSize: 64,
+  },
+  celebrationText: {
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  celebrationSubtext: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+  // Summary
+  summaryCard: {
+    marginTop: 20,
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  summaryLabel: {
+    fontSize: 14,
+  },
+  summaryValue: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  summarySep: {
+    height: 1,
+    marginHorizontal: 16,
+  },
+  // Error
+  errorBox: {
+    marginTop: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 12,
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  // CTA
+  ctaButton: {
+    marginTop: 20,
+    height: 56,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ctaText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  ctaLoading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  explorerHint: {
+    textAlign: 'center',
+    marginTop: 12,
+    fontSize: 13,
+  },
+});

package/src/ui/game/index.ts

@@ -12,3 +12,5 @@ export { CreateCustomGameSheet } from './CreateCustomGameSheet';
 export type { CreateCustomGameSheetProps } from './CreateCustomGameSheet';
 export { JoinGameSheet } from './JoinGameSheet';
 export type { JoinGameSheetProps } from './JoinGameSheet';
+export { ClaimPrizeSheet } from './ClaimPrizeSheet';
+export type { ClaimPrizeSheetProps } from './ClaimPrizeSheet';

package/src/ui/index.ts

@@ -10,7 +10,7 @@ export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet } from './game';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet } from './game';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -19,4 +19,5 @@ export type {
   JoinGameButtonProps,
   CreateCustomGameSheetProps,
   JoinGameSheetProps,
+  ClaimPrizeSheetProps,
 } from './game';