@dubsdotapp/expo 0.2.29 → 0.2.31

package/dist/index.mjs

@@ -3797,6 +3797,401 @@ var styles9 = StyleSheet10.create({
     gap: 10
   }
 });
+
+// src/ui/game/JoinGameSheet.tsx
+import { useState as useState17, useEffect as useEffect9, useRef as useRef5, useCallback as useCallback14, useMemo as useMemo6 } from "react";
+import {
+  View as View11,
+  Text as Text11,
+  TouchableOpacity as TouchableOpacity7,
+  ActivityIndicator as ActivityIndicator6,
+  Modal as Modal2,
+  Animated as Animated3,
+  StyleSheet as StyleSheet11,
+  KeyboardAvoidingView as KeyboardAvoidingView3,
+  Platform as Platform5
+} from "react-native";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var STATUS_LABELS3 = {
+  building: "Building transaction...",
+  signing: "Approve in wallet...",
+  confirming: "Confirming...",
+  success: "Joined!"
+};
+var CUSTOM_GAME_MODE = 6;
+function JoinGameSheet({
+  visible,
+  onDismiss,
+  game,
+  ImageComponent,
+  shortName,
+  homeColor = "#3B82F6",
+  awayColor = "#EF4444",
+  onSuccess,
+  onError
+}) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const mutation = useJoinGame();
+  const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
+  const [selectedTeam, setSelectedTeam] = useState17(null);
+  const overlayOpacity = useRef5(new Animated3.Value(0)).current;
+  useEffect9(() => {
+    Animated3.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start();
+  }, [visible, overlayOpacity]);
+  useEffect9(() => {
+    if (visible) {
+      setSelectedTeam(isCustomGame ? "away" : null);
+      mutation.reset();
+    }
+  }, [visible]);
+  useEffect9(() => {
+    if (mutation.status === "success" && mutation.data) {
+      onSuccess?.(mutation.data);
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]);
+  useEffect9(() => {
+    if (mutation.status === "error" && mutation.error) {
+      onError?.(mutation.error);
+    }
+  }, [mutation.status, mutation.error]);
+  const opponents = game.opponents || [];
+  const bettors = game.bettors || [];
+  const totalPool = game.totalPool || 0;
+  const homePool = game.homePool || 0;
+  const awayPool = game.awayPool || 0;
+  const buyIn = game.buyIn;
+  const { homeOdds, awayOdds, homeBets, awayBets } = useMemo6(() => ({
+    homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : "\u2014",
+    awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : "\u2014",
+    homeBets: bettors.filter((b) => b.team === "home").length,
+    awayBets: bettors.filter((b) => b.team === "away").length
+  }), [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 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";
+  const alreadyJoined = useMemo6(() => {
+    if (!wallet.publicKey) return false;
+    const addr = wallet.publicKey.toBase58();
+    return bettors.some((b) => b.wallet === addr);
+  }, [bettors, wallet.publicKey]);
+  const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
+  const canJoin = selectedTeam !== null && !isMutating && mutation.status !== "success" && !alreadyJoined;
+  const handleJoin = useCallback14(async () => {
+    if (!selectedTeam || !wallet.publicKey) return;
+    try {
+      await mutation.execute({
+        playerWallet: wallet.publicKey.toBase58(),
+        gameId: game.gameId,
+        teamChoice: selectedTeam,
+        amount: buyIn
+      });
+    } catch {
+    }
+  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, buyIn]);
+  const statusLabel = STATUS_LABELS3[mutation.status] || "";
+  return /* @__PURE__ */ jsxs11(
+    Modal2,
+    {
+      visible,
+      animationType: "slide",
+      transparent: true,
+      onRequestClose: onDismiss,
+      children: [
+        /* @__PURE__ */ jsx13(Animated3.View, { style: [styles10.overlay, { opacity: overlayOpacity }], children: /* @__PURE__ */ jsx13(TouchableOpacity7, { style: styles10.overlayTap, activeOpacity: 1, onPress: onDismiss }) }),
+        /* @__PURE__ */ jsx13(
+          KeyboardAvoidingView3,
+          {
+            style: styles10.keyboardView,
+            behavior: Platform5.OS === "ios" ? "padding" : void 0,
+            children: /* @__PURE__ */ jsx13(View11, { style: styles10.sheetPositioner, children: /* @__PURE__ */ jsxs11(View11, { style: [styles10.sheet, { backgroundColor: t.background }], children: [
+              /* @__PURE__ */ jsx13(View11, { style: styles10.handleRow, children: /* @__PURE__ */ jsx13(View11, { style: [styles10.handle, { backgroundColor: t.textMuted }] }) }),
+              /* @__PURE__ */ jsxs11(View11, { style: styles10.header, children: [
+                /* @__PURE__ */ jsx13(Text11, { style: [styles10.headerTitle, { color: t.text }], children: "Join Game" }),
+                /* @__PURE__ */ jsx13(TouchableOpacity7, { onPress: onDismiss, activeOpacity: 0.8, children: /* @__PURE__ */ jsx13(Text11, { style: [styles10.closeButton, { color: t.textMuted }], children: "\u2715" }) })
+              ] }),
+              !isCustomGame && /* @__PURE__ */ jsxs11(View11, { style: styles10.section, children: [
+                /* @__PURE__ */ jsx13(Text11, { style: [styles10.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
+                /* @__PURE__ */ jsxs11(View11, { style: styles10.teamsRow, children: [
+                  /* @__PURE__ */ jsx13(
+                    TeamButton,
+                    {
+                      name: homeName,
+                      imageUrl: opponents[0]?.imageUrl,
+                      odds: homeOdds,
+                      bets: homeBets,
+                      color: homeColor,
+                      selected: selectedTeam === "home",
+                      onPress: () => setSelectedTeam("home"),
+                      ImageComponent,
+                      t
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    TeamButton,
+                    {
+                      name: awayName,
+                      imageUrl: opponents[1]?.imageUrl,
+                      odds: awayOdds,
+                      bets: awayBets,
+                      color: awayColor,
+                      selected: selectedTeam === "away",
+                      onPress: () => setSelectedTeam("away"),
+                      ImageComponent,
+                      t
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs11(View11, { style: [styles10.summaryCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
+                /* @__PURE__ */ jsxs11(View11, { style: styles10.summaryRow, children: [
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryLabel, { color: t.textMuted }], children: "Buy-in" }),
+                  /* @__PURE__ */ jsxs11(Text11, { style: [styles10.summaryValue, { color: t.text }], children: [
+                    buyIn,
+                    " SOL"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx13(View11, { style: [styles10.summarySep, { backgroundColor: t.border }] }),
+                /* @__PURE__ */ jsxs11(View11, { style: styles10.summaryRow, children: [
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryLabel, { color: t.textMuted }], children: "Your side" }),
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryValue, { color: t.text }], children: selectedName })
+                ] }),
+                /* @__PURE__ */ jsx13(View11, { style: [styles10.summarySep, { backgroundColor: t.border }] }),
+                /* @__PURE__ */ jsxs11(View11, { style: styles10.summaryRow, children: [
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryLabel, { color: t.textMuted }], children: "Total pool" }),
+                  /* @__PURE__ */ jsxs11(Text11, { style: [styles10.summaryValue, { color: t.text }], children: [
+                    poolAfterJoin,
+                    " SOL"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx13(View11, { style: [styles10.summarySep, { backgroundColor: t.border }] }),
+                /* @__PURE__ */ jsxs11(View11, { style: styles10.summaryRow, children: [
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryLabel, { color: t.textMuted }], children: "Potential winnings" }),
+                  /* @__PURE__ */ jsx13(Text11, { style: [styles10.summaryValue, { color: t.success }], children: potentialWinnings !== "\u2014" ? `${potentialWinnings} SOL` : "\u2014" })
+                ] })
+              ] }),
+              alreadyJoined && /* @__PURE__ */ jsx13(View11, { style: [styles10.errorBox, { backgroundColor: t.surface, borderColor: t.border }], children: /* @__PURE__ */ jsx13(Text11, { style: [styles10.errorText, { color: t.textMuted }], children: "You've already joined this game." }) }),
+              mutation.error && /* @__PURE__ */ jsx13(View11, { style: [styles10.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx13(Text11, { style: [styles10.errorText, { color: t.errorText }], children: mutation.error.message }) }),
+              /* @__PURE__ */ jsx13(
+                TouchableOpacity7,
+                {
+                  style: [
+                    styles10.ctaButton,
+                    { backgroundColor: canJoin ? t.accent : t.border }
+                  ],
+                  disabled: !canJoin,
+                  onPress: handleJoin,
+                  activeOpacity: 0.8,
+                  children: isMutating ? /* @__PURE__ */ jsxs11(View11, { style: styles10.ctaLoading, children: [
+                    /* @__PURE__ */ jsx13(ActivityIndicator6, { size: "small", color: "#FFFFFF" }),
+                    /* @__PURE__ */ jsx13(Text11, { style: styles10.ctaText, children: statusLabel })
+                  ] }) : mutation.status === "success" ? /* @__PURE__ */ jsx13(Text11, { style: styles10.ctaText, children: STATUS_LABELS3.success }) : /* @__PURE__ */ jsx13(Text11, { style: [styles10.ctaText, !canJoin && { opacity: 0.5 }], children: alreadyJoined ? "Already Joined" : selectedTeam ? `Join Game \u2014 ${buyIn} SOL` : "Pick a side to join" })
+                }
+              )
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function TeamButton({
+  name,
+  imageUrl,
+  odds,
+  bets,
+  color,
+  selected,
+  onPress,
+  ImageComponent,
+  t
+}) {
+  const [imgFailed, setImgFailed] = useState17(false);
+  const Img = ImageComponent || __require("react-native").Image;
+  const showImage = imageUrl && !imgFailed;
+  return /* @__PURE__ */ jsxs11(
+    TouchableOpacity7,
+    {
+      style: [styles10.teamOption, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + "15" : t.background }],
+      onPress,
+      activeOpacity: 0.7,
+      children: [
+        showImage ? /* @__PURE__ */ jsx13(Img, { source: { uri: imageUrl }, style: styles10.teamLogo, resizeMode: "contain", onError: () => setImgFailed(true) }) : /* @__PURE__ */ jsx13(View11, { style: [styles10.teamLogo, styles10.teamLogoPlaceholder] }),
+        /* @__PURE__ */ jsx13(Text11, { style: [styles10.teamName, { color: t.text }], numberOfLines: 1, children: name }),
+        /* @__PURE__ */ jsxs11(Text11, { style: [styles10.teamOdds, { color }], children: [
+          odds,
+          "x"
+        ] }),
+        /* @__PURE__ */ jsxs11(Text11, { style: [styles10.teamBets, { color: t.textMuted }], children: [
+          bets,
+          " ",
+          bets === 1 ? "bet" : "bets"
+        ] }),
+        selected && /* @__PURE__ */ jsx13(View11, { style: [styles10.teamBadge, { backgroundColor: color }], children: /* @__PURE__ */ jsx13(Text11, { style: styles10.teamBadgeText, children: "Selected" }) })
+      ]
+    }
+  );
+}
+var styles10 = StyleSheet11.create({
+  overlay: {
+    ...StyleSheet11.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
+  },
+  section: {
+    gap: 12,
+    paddingTop: 8
+  },
+  sectionLabel: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  teamsRow: {
+    flexDirection: "row",
+    gap: 12
+  },
+  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
+  },
+  errorBox: {
+    marginTop: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 12
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  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
+  },
+  // Team button styles
+  teamOption: {
+    flex: 1,
+    borderWidth: 2,
+    borderRadius: 16,
+    padding: 16,
+    alignItems: "center",
+    gap: 8
+  },
+  teamLogo: {
+    width: 48,
+    height: 48,
+    borderRadius: 24
+  },
+  teamLogoPlaceholder: {
+    backgroundColor: "rgba(128,128,128,0.2)"
+  },
+  teamName: {
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  teamOdds: {
+    fontSize: 20,
+    fontWeight: "800"
+  },
+  teamBets: {
+    fontSize: 12
+  },
+  teamBadge: {
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    marginTop: 4
+  },
+  teamBadgeText: {
+    color: "#FFF",
+    fontSize: 12,
+    fontWeight: "700"
+  }
+});
 export {
   AuthGate,
   ConnectWalletScreen,
@@ -3808,6 +4203,7 @@ export {
   DubsProvider,
   GamePoster,
   JoinGameButton,
+  JoinGameSheet,
   LivePoolsCard,
   MwaWalletAdapter,
   NETWORK_CONFIG,