@dubsdotapp/expo 0.5.5 → 0.5.7

package/package.json

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

package/src/ui/game/JoinGameSheet.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import {
   View,
   Text,
+  Image,
   TouchableOpacity,
   ActivityIndicator,
   Modal,
@@ -30,6 +31,10 @@ export interface JoinGameSheetProps {
   /** Callbacks */
   onSuccess?: (result: JoinGameMutationResult) => void;
   onError?: (error: Error) => void;
+  /** Called when the user taps a team card (useful for sound/haptics) */
+  onTeamSelect?: (team: 'home' | 'away') => void;
+  /** Called when the join succeeds (useful for success sound/animation) */
+  onJoinSuccess?: (result: JoinGameMutationResult) => void;
   /** Pool mode: hides team selection, auto-assigns team, shows "Join Pool" labels */
   isPoolModeEnabled?: boolean;
 }
@@ -43,6 +48,16 @@ const STATUS_LABELS: Record<string, string> = {
 
 const CUSTOM_GAME_MODE = 6;
 
+function formatSol(n: number): string {
+  // Remove trailing zeros: 0.06000000 → 0.06, 1.00000 → 1
+  return parseFloat(n.toFixed(9)).toString();
+}
+
+function toPng(url: string | null | undefined): string | null {
+  if (!url) return null;
+  return url.replace('/svg?', '/png?');
+}
+
 export function JoinGameSheet({
   visible,
   onDismiss,
@@ -53,6 +68,8 @@ export function JoinGameSheet({
   awayColor = '#EF4444',
   onSuccess,
   onError,
+  onTeamSelect,
+  onJoinSuccess,
   isPoolModeEnabled = false,
 }: JoinGameSheetProps) {
   const t = useDubsTheme();
@@ -61,11 +78,12 @@ export function JoinGameSheet({
 
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
-  // Pool mode and custom games auto-assign team — no team selection needed.
-  // For sports/esports games the user picks a team.
   const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
+  const [showSuccess, setShowSuccess] = useState(false);
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const successScale = useRef(new Animated.Value(0)).current;
+  const successOpacity = useRef(new Animated.Value(0)).current;
 
   // Animate overlay on visibility change
   useEffect(() => {
@@ -80,17 +98,31 @@ export function JoinGameSheet({
   useEffect(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? 'home' : isCustomGame ? 'away' : null);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
       mutation.reset();
     }
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Auto-dismiss on success
+  // Handle success with animation
   useEffect(() => {
     if (mutation.status === 'success' && mutation.data) {
+      setShowSuccess(true);
       onSuccess?.(mutation.data);
+      onJoinSuccess?.(mutation.data);
+
+      // Animate success
+      Animated.parallel([
+        Animated.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        Animated.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true }),
+      ]).start();
+
       const timer = setTimeout(() => {
-        onDismiss();
-      }, 1500);
+        Animated.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -120,7 +152,7 @@ export function JoinGameSheet({
 
   const poolAfterJoin = totalPool + buyIn;
   const selectedOdds = selectedTeam === 'home' ? homeOdds : selectedTeam === 'away' ? awayOdds : '—';
-  const potentialWinnings = selectedOdds !== '—' ? (parseFloat(selectedOdds) * buyIn).toFixed(4) : '—';
+  const potentialWinnings = selectedOdds !== '—' ? formatSol(parseFloat(selectedOdds) * buyIn) : '—';
 
   const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
   const awayName = shortName ? shortName(opponents[1]?.name) : (opponents[1]?.name || 'Away');
@@ -163,6 +195,19 @@ export function JoinGameSheet({
         <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
       </Animated.View>
 
+      {/* Success overlay */}
+      {showSuccess && (
+        <View style={styles.successOverlay}>
+          <Animated.View style={[styles.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }]}>
+            <Text style={styles.successEmoji}>🎉</Text>
+            <Text style={styles.successTitle}>You're in!</Text>
+            <Text style={styles.successSub}>
+              {formatSol(buyIn)} SOL on {selectedName}
+            </Text>
+          </Animated.View>
+        </View>
+      )}
+
       <KeyboardAvoidingView
         style={styles.keyboardView}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
@@ -182,6 +227,34 @@ export function JoinGameSheet({
               </TouchableOpacity>
             </View>
 
+            {/* Bettors row */}
+            {bettors.length > 0 && (
+              <View style={styles.bettorsSection}>
+                <Text style={[styles.bettorsLabel, { color: t.textMuted }]}>
+                  {bettors.length} {bettors.length === 1 ? 'player' : 'players'} in this game
+                </Text>
+                <View style={styles.bettorsRow}>
+                  {bettors.slice(0, 6).map((b, i) => {
+                    const pngUrl = toPng(b.avatar);
+                    return (
+                      <View key={b.wallet} style={[styles.bettorCircle, { backgroundColor: ['#EF4444','#3B82F6','#22C55E','#F59E0B','#A855F7','#EC4899'][i % 6] }]}>
+                        {pngUrl ? (
+                          <Image source={{ uri: pngUrl }} style={styles.bettorImg} />
+                        ) : (
+                          <Text style={styles.bettorInitial}>{(b.username ?? b.wallet).charAt(0).toUpperCase()}</Text>
+                        )}
+                      </View>
+                    );
+                  })}
+                  {bettors.length > 6 && (
+                    <View style={[styles.bettorCircle, { backgroundColor: '#2C2C2E' }]}>
+                      <Text style={styles.bettorOverflow}>+{bettors.length - 6}</Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            )}
+
             {/* Team Selection — hidden in pool mode and custom games */}
             {!isCustomGame && !isPoolModeEnabled && (
               <View style={styles.section}>
@@ -194,7 +267,7 @@ export function JoinGameSheet({
                     bets={homeBets}
                     color={homeColor}
                     selected={selectedTeam === 'home'}
-                    onPress={() => setSelectedTeam('home')}
+                    onPress={() => { setSelectedTeam('home'); onTeamSelect?.('home'); }}
                     ImageComponent={ImageComponent}
                     t={t}
                   />
@@ -205,7 +278,7 @@ export function JoinGameSheet({
                     bets={awayBets}
                     color={awayColor}
                     selected={selectedTeam === 'away'}
-                    onPress={() => setSelectedTeam('away')}
+                    onPress={() => { setSelectedTeam('away'); onTeamSelect?.('away'); }}
                     ImageComponent={ImageComponent}
                     t={t}
                   />
@@ -217,7 +290,7 @@ export function JoinGameSheet({
             <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
               <View style={styles.summaryRow}>
                 <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Buy-in</Text>
-                <Text style={[styles.summaryValue, { color: t.text }]}>{buyIn} SOL</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{formatSol(buyIn)} SOL</Text>
               </View>
               <View style={[styles.summarySep, { backgroundColor: t.border }]} />
               {isPoolModeEnabled ? (
@@ -229,7 +302,7 @@ export function JoinGameSheet({
                   <View style={[styles.summarySep, { backgroundColor: t.border }]} />
                   <View style={styles.summaryRow}>
                     <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Current pot</Text>
-                    <Text style={[styles.summaryValue, { color: t.success }]}>{totalPool} SOL</Text>
+                    <Text style={[styles.summaryValue, { color: t.success }]}>{formatSol(totalPool)} SOL</Text>
                   </View>
                 </>
               ) : (
@@ -241,7 +314,7 @@ export function JoinGameSheet({
                   <View style={[styles.summarySep, { backgroundColor: t.border }]} />
                   <View style={styles.summaryRow}>
                     <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Total pool</Text>
-                    <Text style={[styles.summaryValue, { color: t.text }]}>{poolAfterJoin} SOL</Text>
+                    <Text style={[styles.summaryValue, { color: t.text }]}>{formatSol(poolAfterJoin)} SOL</Text>
                   </View>
                   <View style={[styles.summarySep, { backgroundColor: t.border }]} />
                   <View style={styles.summaryRow}>
@@ -290,9 +363,9 @@ export function JoinGameSheet({
                   {alreadyJoined
                     ? 'Already Joined'
                     : isPoolModeEnabled
-                      ? `Join Pool \u2014 ${buyIn} SOL`
+                      ? `Join Pool \u2014 ${formatSol(buyIn)} SOL`
                       : selectedTeam
-                        ? `Join Game \u2014 ${buyIn} SOL`
+                        ? `Join Game \u2014 ${formatSol(buyIn)} SOL`
                         : 'Pick a side to join'}
                 </Text>
               )}
@@ -386,6 +459,70 @@ const styles = StyleSheet.create({
     fontSize: 20,
     padding: 4,
   },
+
+  // Bettors row
+  bettorsSection: {
+    paddingBottom: 12,
+    gap: 8,
+  },
+  bettorsLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  bettorsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  bettorCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  bettorImg: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+  },
+  bettorInitial: {
+    color: '#FFF',
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  bettorOverflow: {
+    color: '#8E8E93',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+
+  // Success overlay
+  successOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.85)',
+  },
+  successContent: {
+    alignItems: 'center',
+    gap: 12,
+  },
+  successEmoji: {
+    fontSize: 64,
+  },
+  successTitle: {
+    color: '#FFFFFF',
+    fontSize: 28,
+    fontWeight: '900',
+  },
+  successSub: {
+    color: '#8E8E93',
+    fontSize: 16,
+  },
+
   section: {
     gap: 12,
     paddingTop: 8,