@dubsdotapp/expo 0.5.5 → 0.5.7

package/dist/index.mjs

@@ -5324,6 +5324,7 @@ import { useState as useState28, useEffect as useEffect17, useRef as useRef9, us
 import {
   View as View14,
   Text as Text14,
+  Image as Image6,
   TouchableOpacity as TouchableOpacity10,
   ActivityIndicator as ActivityIndicator8,
   Modal as Modal3,
@@ -5340,6 +5341,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,
@@ -5350,6 +5358,8 @@ function JoinGameSheet({
   awayColor = "#EF4444",
   onSuccess,
   onError,
+  onTeamSelect,
+  onJoinSuccess,
   isPoolModeEnabled = false
 }) {
   const t = useDubsTheme();
@@ -5357,7 +5367,10 @@ function JoinGameSheet({
   const mutation = useJoinGame();
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
   const [selectedTeam, setSelectedTeam] = useState28(null);
+  const [showSuccess, setShowSuccess] = useState28(false);
   const overlayOpacity = useRef9(new Animated4.Value(0)).current;
+  const successScale = useRef9(new Animated4.Value(0)).current;
+  const successOpacity = useRef9(new Animated4.Value(0)).current;
   useEffect17(() => {
     Animated4.timing(overlayOpacity, {
       toValue: visible ? 1 : 0,
@@ -5368,15 +5381,26 @@ function JoinGameSheet({
   useEffect17(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? "home" : isCustomGame ? "away" : null);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
       mutation.reset();
     }
   }, [visible]);
   useEffect17(() => {
     if (mutation.status === "success" && mutation.data) {
+      setShowSuccess(true);
       onSuccess?.(mutation.data);
+      onJoinSuccess?.(mutation.data);
+      Animated4.parallel([
+        Animated4.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        Animated4.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true })
+      ]).start();
       const timer = setTimeout(() => {
-        onDismiss();
-      }, 1500);
+        Animated4.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]);
@@ -5399,7 +5423,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";
@@ -5432,6 +5456,15 @@ function JoinGameSheet({
       onRequestClose: onDismiss,
       children: [
         /* @__PURE__ */ jsx16(Animated4.View, { style: [styles13.overlay, { opacity: overlayOpacity }], children: /* @__PURE__ */ jsx16(TouchableOpacity10, { style: styles13.overlayTap, activeOpacity: 1, onPress: onDismiss }) }),
+        showSuccess && /* @__PURE__ */ jsx16(View14, { style: styles13.successOverlay, children: /* @__PURE__ */ jsxs13(Animated4.View, { style: [styles13.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }], children: [
+          /* @__PURE__ */ jsx16(Text14, { style: styles13.successEmoji, children: "\u{1F389}" }),
+          /* @__PURE__ */ jsx16(Text14, { style: styles13.successTitle, children: "You're in!" }),
+          /* @__PURE__ */ jsxs13(Text14, { style: styles13.successSub, children: [
+            formatSol(buyIn),
+            " SOL on ",
+            selectedName
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx16(
           KeyboardAvoidingView4,
           {
@@ -5443,6 +5476,24 @@ function JoinGameSheet({
                 /* @__PURE__ */ jsx16(Text14, { style: [styles13.headerTitle, { color: t.text }], children: isPoolModeEnabled ? "Join Pool" : "Join Game" }),
                 /* @__PURE__ */ jsx16(TouchableOpacity10, { onPress: onDismiss, activeOpacity: 0.8, children: /* @__PURE__ */ jsx16(Text14, { style: [styles13.closeButton, { color: t.textMuted }], children: "\u2715" }) })
               ] }),
+              bettors.length > 0 && /* @__PURE__ */ jsxs13(View14, { style: styles13.bettorsSection, children: [
+                /* @__PURE__ */ jsxs13(Text14, { style: [styles13.bettorsLabel, { color: t.textMuted }], children: [
+                  bettors.length,
+                  " ",
+                  bettors.length === 1 ? "player" : "players",
+                  " in this game"
+                ] }),
+                /* @__PURE__ */ jsxs13(View14, { style: styles13.bettorsRow, children: [
+                  bettors.slice(0, 6).map((b, i) => {
+                    const pngUrl = toPng(b.avatar);
+                    return /* @__PURE__ */ jsx16(View14, { style: [styles13.bettorCircle, { backgroundColor: ["#EF4444", "#3B82F6", "#22C55E", "#F59E0B", "#A855F7", "#EC4899"][i % 6] }], children: pngUrl ? /* @__PURE__ */ jsx16(Image6, { source: { uri: pngUrl }, style: styles13.bettorImg }) : /* @__PURE__ */ jsx16(Text14, { style: styles13.bettorInitial, children: (b.username ?? b.wallet).charAt(0).toUpperCase() }) }, b.wallet);
+                  }),
+                  bettors.length > 6 && /* @__PURE__ */ jsx16(View14, { style: [styles13.bettorCircle, { backgroundColor: "#2C2C2E" }], children: /* @__PURE__ */ jsxs13(Text14, { style: styles13.bettorOverflow, children: [
+                    "+",
+                    bettors.length - 6
+                  ] }) })
+                ] })
+              ] }),
               !isCustomGame && !isPoolModeEnabled && /* @__PURE__ */ jsxs13(View14, { style: styles13.section, children: [
                 /* @__PURE__ */ jsx16(Text14, { style: [styles13.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
                 /* @__PURE__ */ jsxs13(View14, { style: styles13.teamsRow, children: [
@@ -5455,7 +5506,10 @@ function JoinGameSheet({
                       bets: homeBets,
                       color: homeColor,
                       selected: selectedTeam === "home",
-                      onPress: () => setSelectedTeam("home"),
+                      onPress: () => {
+                        setSelectedTeam("home");
+                        onTeamSelect?.("home");
+                      },
                       ImageComponent,
                       t
                     }
@@ -5469,7 +5523,10 @@ function JoinGameSheet({
                       bets: awayBets,
                       color: awayColor,
                       selected: selectedTeam === "away",
-                      onPress: () => setSelectedTeam("away"),
+                      onPress: () => {
+                        setSelectedTeam("away");
+                        onTeamSelect?.("away");
+                      },
                       ImageComponent,
                       t
                     }
@@ -5480,7 +5537,7 @@ function JoinGameSheet({
                 /* @__PURE__ */ jsxs13(View14, { style: styles13.summaryRow, children: [
                   /* @__PURE__ */ jsx16(Text14, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Buy-in" }),
                   /* @__PURE__ */ jsxs13(Text14, { style: [styles13.summaryValue, { color: t.text }], children: [
-                    buyIn,
+                    formatSol(buyIn),
                     " SOL"
                   ] })
                 ] }),
@@ -5494,7 +5551,7 @@ function JoinGameSheet({
                   /* @__PURE__ */ jsxs13(View14, { style: styles13.summaryRow, children: [
                     /* @__PURE__ */ jsx16(Text14, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Current pot" }),
                     /* @__PURE__ */ jsxs13(Text14, { style: [styles13.summaryValue, { color: t.success }], children: [
-                      totalPool,
+                      formatSol(totalPool),
                       " SOL"
                     ] })
                   ] })
@@ -5507,7 +5564,7 @@ function JoinGameSheet({
                   /* @__PURE__ */ jsxs13(View14, { style: styles13.summaryRow, children: [
                     /* @__PURE__ */ jsx16(Text14, { style: [styles13.summaryLabel, { color: t.textMuted }], children: "Total pool" }),
                     /* @__PURE__ */ jsxs13(Text14, { style: [styles13.summaryValue, { color: t.text }], children: [
-                      poolAfterJoin,
+                      formatSol(poolAfterJoin),
                       " SOL"
                     ] })
                   ] }),
@@ -5533,7 +5590,7 @@ function JoinGameSheet({
                   children: isMutating ? /* @__PURE__ */ jsxs13(View14, { style: styles13.ctaLoading, children: [
                     /* @__PURE__ */ jsx16(ActivityIndicator8, { size: "small", color: "#FFFFFF" }),
                     /* @__PURE__ */ jsx16(Text14, { style: styles13.ctaText, children: statusLabel })
-                  ] }) : mutation.status === "success" ? /* @__PURE__ */ jsx16(Text14, { style: styles13.ctaText, children: isPoolModeEnabled ? "Joined!" : STATUS_LABELS3.success }) : /* @__PURE__ */ jsx16(Text14, { 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__ */ jsx16(Text14, { style: styles13.ctaText, children: isPoolModeEnabled ? "Joined!" : STATUS_LABELS3.success }) : /* @__PURE__ */ jsx16(Text14, { 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" })
                 }
               )
             ] }) })
@@ -5626,6 +5683,67 @@ var styles13 = StyleSheet14.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: {
+    ...StyleSheet14.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
@@ -6376,7 +6494,7 @@ import {
   StyleSheet as StyleSheet18,
   KeyboardAvoidingView as KeyboardAvoidingView7,
   Platform as Platform10,
-  Image as Image6,
+  Image as Image7,
   FlatList
 } from "react-native";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -6417,7 +6535,7 @@ function ArcadeLeaderboardSheet({
         ],
         children: [
           /* @__PURE__ */ jsx20(View17, { style: styles17.rankCol, children: /* @__PURE__ */ jsx20(RankLabel, { index }) }),
-          item.avatar ? /* @__PURE__ */ jsx20(Image6, { source: { uri: ensurePngAvatar(item.avatar) }, style: styles17.avatar }) : /* @__PURE__ */ jsx20(View17, { style: [styles17.avatar, { backgroundColor: t.border }] }),
+          item.avatar ? /* @__PURE__ */ jsx20(Image7, { source: { uri: ensurePngAvatar(item.avatar) }, style: styles17.avatar }) : /* @__PURE__ */ jsx20(View17, { style: [styles17.avatar, { backgroundColor: t.border }] }),
           /* @__PURE__ */ jsxs17(View17, { style: styles17.nameCol, children: [
             /* @__PURE__ */ jsx20(Text18, { style: [styles17.name, { color: t.text }], numberOfLines: 1, children: item.username || `${item.wallet_address.slice(0, 4)}...${item.wallet_address.slice(-4)}` }),
             /* @__PURE__ */ jsxs17(Text18, { style: [styles17.lives, { color: t.textMuted }], children: [