@dubsdotapp/expo 0.5.6 → 0.5.7

package/dist/index.d.mts

@@ -1378,10 +1378,12 @@ interface JoinGameSheetProps {
     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;
 }
-declare function JoinGameSheet({ visible, onDismiss, game, ImageComponent, shortName, homeColor, awayColor, onSuccess, onError, onTeamSelect, isPoolModeEnabled, }: JoinGameSheetProps): react_jsx_runtime.JSX.Element;
+declare function JoinGameSheet({ visible, onDismiss, game, ImageComponent, shortName, homeColor, awayColor, onSuccess, onError, onTeamSelect, onJoinSuccess, isPoolModeEnabled, }: JoinGameSheetProps): react_jsx_runtime.JSX.Element;
 
 interface ClaimPrizeSheetProps {
     visible: boolean;

package/dist/index.d.ts

@@ -1378,10 +1378,12 @@ interface JoinGameSheetProps {
     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;
 }
-declare function JoinGameSheet({ visible, onDismiss, game, ImageComponent, shortName, homeColor, awayColor, onSuccess, onError, onTeamSelect, isPoolModeEnabled, }: JoinGameSheetProps): react_jsx_runtime.JSX.Element;
+declare function JoinGameSheet({ visible, onDismiss, game, ImageComponent, shortName, homeColor, awayColor, onSuccess, onError, onTeamSelect, onJoinSuccess, isPoolModeEnabled, }: JoinGameSheetProps): react_jsx_runtime.JSX.Element;
 
 interface ClaimPrizeSheetProps {
     visible: boolean;

package/dist/index.js

@@ -5351,6 +5351,13 @@ var STATUS_LABELS3 = {
   success: "Joined!"
 };
 var CUSTOM_GAME_MODE = 6;
+function formatSol(n) {
+  return parseFloat(n.toFixed(9)).toString();
+}
+function toPng(url) {
+  if (!url) return null;
+  return url.replace("/svg?", "/png?");
+}
 function JoinGameSheet({
   visible,
   onDismiss,
@@ -5362,6 +5369,7 @@ function JoinGameSheet({
   onSuccess,
   onError,
   onTeamSelect,
+  onJoinSuccess,
   isPoolModeEnabled = false
 }) {
   const t = useDubsTheme();
@@ -5369,7 +5377,10 @@ function JoinGameSheet({
   const mutation = useJoinGame();
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
   const [selectedTeam, setSelectedTeam] = (0, import_react33.useState)(null);
+  const [showSuccess, setShowSuccess] = (0, import_react33.useState)(false);
   const overlayOpacity = (0, import_react33.useRef)(new import_react_native19.Animated.Value(0)).current;
+  const successScale = (0, import_react33.useRef)(new import_react_native19.Animated.Value(0)).current;
+  const successOpacity = (0, import_react33.useRef)(new import_react_native19.Animated.Value(0)).current;
   (0, import_react33.useEffect)(() => {
     import_react_native19.Animated.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
@@ -5380,15 +5391,26 @@ function JoinGameSheet({
   (0, import_react33.useEffect)(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? "home" : isCustomGame ? "away" : null);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
       mutation.reset();
     }
   }, [visible]);
   (0, import_react33.useEffect)(() => {
     if (mutation.status === "success" && mutation.data) {
+      setShowSuccess(true);
       onSuccess?.(mutation.data);
+      onJoinSuccess?.(mutation.data);
+      import_react_native19.Animated.parallel([
+        import_react_native19.Animated.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        import_react_native19.Animated.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true })
+      ]).start();
       const timer = setTimeout(() => {
-        onDismiss();
-      }, 1500);
+        import_react_native19.Animated.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
@@ -5411,7 +5433,7 @@ function JoinGameSheet({
   }), [totalPool, homePool, awayPool, bettors]);
   const poolAfterJoin = totalPool + buyIn;
   const selectedOdds = selectedTeam === "home" ? homeOdds : selectedTeam === "away" ? awayOdds : "\u2014";
-  const potentialWinnings = selectedOdds !== "\u2014" ? (parseFloat(selectedOdds) * buyIn).toFixed(4) : "\u2014";
+  const potentialWinnings = selectedOdds !== "\u2014" ? formatSol(parseFloat(selectedOdds) * buyIn) : "\u2014";
   const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
   const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
   const selectedName = selectedTeam === "home" ? homeName : selectedTeam === "away" ? awayName : "\u2014";
@@ -5444,6 +5466,15 @@ function JoinGameSheet({
       onRequestClose: onDismiss,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Animated.View, { style: [styles13.overlay, { opacity: overlayOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.TouchableOpacity, { style: styles13.overlayTap, activeOpacity: 1, onPress: onDismiss }) }),
+        showSuccess && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.View, { style: styles13.successOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Animated.View, { style: [styles13.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.successEmoji, children: "\u{1F389}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.successTitle, children: "You're in!" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: styles13.successSub, children: [
+            formatSol(buyIn),
+            " SOL on ",
+            selectedName
+          ] })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_react_native19.KeyboardAvoidingView,
           {
@@ -5455,6 +5486,24 @@ function JoinGameSheet({
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.headerTitle, { color: t.text }], children: isPoolModeEnabled ? "Join Pool" : "Join Game" }),
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.TouchableOpacity, { onPress: onDismiss, activeOpacity: 0.8, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.closeButton, { color: t.textMuted }], children: "\u2715" }) })
               ] }),
+              bettors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.bettorsSection, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: [styles13.bettorsLabel, { color: t.textMuted }], children: [
+                  bettors.length,
+                  " ",
+                  bettors.length === 1 ? "player" : "players",
+                  " in this game"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.bettorsRow, children: [
+                  bettors.slice(0, 6).map((b, i) => {
+                    const pngUrl = toPng(b.avatar);
+                    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.View, { style: [styles13.bettorCircle, { backgroundColor: ["#EF4444", "#3B82F6", "#22C55E", "#F59E0B", "#A855F7", "#EC4899"][i % 6] }], children: pngUrl ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Image, { source: { uri: pngUrl }, style: styles13.bettorImg }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.bettorInitial, children: (b.username ?? b.wallet).charAt(0).toUpperCase() }) }, b.wallet);
+                  }),
+                  bettors.length > 6 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.View, { style: [styles13.bettorCircle, { backgroundColor: "#2C2C2E" }], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: styles13.bettorOverflow, children: [
+                    "+",
+                    bettors.length - 6
+                  ] }) })
+                ] })
+              ] }),
               !isCustomGame && !isPoolModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.section, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.teamsRow, children: [
@@ -5498,7 +5547,7 @@ function JoinGameSheet({
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.summaryRow, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Buy-in" }),
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: [styles13.summaryValue, { color: t.text }], children: [
-                    buyIn,
+                    formatSol(buyIn),
                     " SOL"
                   ] })
                 ] }),
@@ -5512,7 +5561,7 @@ function JoinGameSheet({
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.summaryRow, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Current pot" }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: [styles13.summaryValue, { color: t.success }], children: [
-                      totalPool,
+                      formatSol(totalPool),
                       " SOL"
                     ] })
                   ] })
@@ -5525,7 +5574,7 @@ function JoinGameSheet({
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.summaryRow, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Total pool" }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.Text, { style: [styles13.summaryValue, { color: t.text }], children: [
-                      poolAfterJoin,
+                      formatSol(poolAfterJoin),
                       " SOL"
                     ] })
                   ] }),
@@ -5551,7 +5600,7 @@ function JoinGameSheet({
                   children: isMutating ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native19.View, { style: styles13.ctaLoading, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.ctaText, children: statusLabel })
-                  ] }) : mutation.status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.ctaText, children: isPoolModeEnabled ? "Joined!" : STATUS_LABELS3.success }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.ctaText, !canJoin && { opacity: 0.5 }], children: alreadyJoined ? "Already Joined" : isPoolModeEnabled ? `Join Pool \u2014 ${buyIn} SOL` : selectedTeam ? `Join Game \u2014 ${buyIn} SOL` : "Pick a side to join" })
+                  ] }) : mutation.status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: styles13.ctaText, children: isPoolModeEnabled ? "Joined!" : STATUS_LABELS3.success }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native19.Text, { style: [styles13.ctaText, !canJoin && { opacity: 0.5 }], children: alreadyJoined ? "Already Joined" : isPoolModeEnabled ? `Join Pool \u2014 ${formatSol(buyIn)} SOL` : selectedTeam ? `Join Game \u2014 ${formatSol(buyIn)} SOL` : "Pick a side to join" })
                 }
               )
             ] }) })
@@ -5644,6 +5693,67 @@ var styles13 = import_react_native19.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: {
+    ...import_react_native19.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