@dubsdotapp/expo 0.5.10 → 0.5.12

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   ConnectWalletButton: () => ConnectWalletButton,
   ConnectWalletScreen: () => ConnectWalletScreen,
   CreateCustomGameSheet: () => CreateCustomGameSheet,
+  CreateGameSheet: () => CreateGameSheet,
   DEFAULT_BASE_URL: () => DEFAULT_BASE_URL,
   DEFAULT_RPC_URL: () => DEFAULT_RPC_URL,
   DubsApiError: () => DubsApiError,
@@ -5669,9 +5670,9 @@ function JoinGameSheet({
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native20.Text, { style: styles14.successEmoji, children: "\u{1F389}" }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native20.Text, { style: styles14.successTitle, children: "You're in!" }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native20.Text, { style: styles14.successSub, children: [
-            formatSol(buyIn),
+            formatSol(wager),
             " SOL on ",
-            selectedName
+            selectedTeam === "home" ? homeName : awayName
           ] })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -6879,6 +6880,253 @@ var styles18 = import_react_native24.StyleSheet.create({
   emptyState: { paddingVertical: 40, alignItems: "center" },
   emptyText: { fontSize: 14, fontWeight: "600" }
 });
+
+// src/ui/game/CreateGameSheet.tsx
+var import_react39 = require("react");
+var import_react_native25 = require("react-native");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var STATUS_LABELS6 = {
+  building: "Building transaction...",
+  signing: "Approve in wallet...",
+  confirming: "Confirming...",
+  success: "Game Created!"
+};
+function formatSol2(n) {
+  return parseFloat(n.toFixed(9)).toString();
+}
+function CreateGameSheet({
+  visible,
+  onDismiss,
+  event,
+  homeColor = "#3B82F6",
+  awayColor = "#EF4444",
+  onSuccess,
+  onError,
+  onTeamSelect,
+  onCreateSuccess,
+  onSliderTick,
+  maxWager = 1,
+  shortName
+}) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const mutation = useCreateGame();
+  const [selectedTeam, setSelectedTeam] = (0, import_react39.useState)(null);
+  const [wager, setWager] = (0, import_react39.useState)(0.01);
+  const [showSuccess, setShowSuccess] = (0, import_react39.useState)(false);
+  const overlayOpacity = (0, import_react39.useRef)(new import_react_native25.Animated.Value(0)).current;
+  const successScale = (0, import_react39.useRef)(new import_react_native25.Animated.Value(0)).current;
+  const successOpacity = (0, import_react39.useRef)(new import_react_native25.Animated.Value(0)).current;
+  (0, import_react39.useEffect)(() => {
+    import_react_native25.Animated.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start();
+  }, [visible]);
+  (0, import_react39.useEffect)(() => {
+    if (visible) {
+      setSelectedTeam(null);
+      setWager(0.01);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
+      mutation.reset();
+    }
+  }, [visible]);
+  (0, import_react39.useEffect)(() => {
+    if (mutation.status === "success" && mutation.data) {
+      setShowSuccess(true);
+      onSuccess?.(mutation.data);
+      onCreateSuccess?.(mutation.data);
+      import_react_native25.Animated.parallel([
+        import_react_native25.Animated.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        import_react_native25.Animated.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true })
+      ]).start();
+      const timer = setTimeout(() => {
+        import_react_native25.Animated.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]);
+  (0, import_react39.useEffect)(() => {
+    if (mutation.status === "error" && mutation.error) {
+      onError?.(mutation.error);
+    }
+  }, [mutation.status, mutation.error]);
+  const opponents = event.opponents || [];
+  const homeName = shortName ? shortName(opponents[0]?.name) : opponents[0]?.name || "Home";
+  const awayName = shortName ? shortName(opponents[1]?.name) : opponents[1]?.name || "Away";
+  const isMutating = mutation.status !== "idle" && mutation.status !== "success" && mutation.status !== "error";
+  const canCreate = selectedTeam !== null && !isMutating && mutation.status !== "success";
+  const handleCreate = (0, import_react39.useCallback)(async () => {
+    if (!selectedTeam || !wallet.publicKey) return;
+    try {
+      await mutation.execute({
+        id: event.id,
+        playerWallet: wallet.publicKey.toBase58(),
+        teamChoice: selectedTeam,
+        wagerAmount: wager
+      });
+    } catch {
+    }
+  }, [selectedTeam, wallet.publicKey, mutation.execute, event.id, wager]);
+  const statusLabel = STATUS_LABELS6[mutation.status] || "";
+  const startTime = event.startTime ? new Date(event.startTime) : null;
+  const timeLabel = startTime ? startTime.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) + " at " + startTime.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }) : "TBD";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.Modal, { visible, animationType: "slide", transparent: true, onRequestClose: onDismiss, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Animated.View, { style: [styles19.overlay, { opacity: overlayOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.TouchableOpacity, { style: styles19.overlayTap, activeOpacity: 1, onPress: onDismiss }) }),
+    showSuccess && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: styles19.successOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.Animated.View, { style: [styles19.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.successEmoji, children: "\u{1F3AF}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.successTitle, children: "Game Created!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.Text, { style: styles19.successSub, children: [
+        formatSol2(wager),
+        " SOL on ",
+        selectedTeam === "home" ? homeName : awayName
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.KeyboardAvoidingView, { style: styles19.keyboardView, behavior: import_react_native25.Platform.OS === "ios" ? "padding" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: styles19.sheetPositioner, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: [styles19.sheet, { backgroundColor: t.background }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: styles19.handleRow, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.handle, { backgroundColor: t.textMuted }] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.headerTitle, { color: t.text }], children: "Create Game" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.headerSub, { color: t.textMuted }], children: timeLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.TouchableOpacity, { onPress: onDismiss, activeOpacity: 0.8, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.closeButton, { color: t.textMuted }], children: "\u2715" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: [styles19.matchupBanner, { borderColor: t.border }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.matchupTeam, children: [
+          opponents[0]?.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Image, { source: { uri: opponents[0].imageUrl }, style: styles19.matchupLogo, resizeMode: "contain" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.matchupPlaceholder, { backgroundColor: homeColor + "20" }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.matchupInitial, { color: homeColor }], children: homeName.charAt(0) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.matchupName, { color: t.text }], numberOfLines: 1, children: homeName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.matchupVs, { color: t.textMuted }], children: "vs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.matchupTeam, children: [
+          opponents[1]?.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Image, { source: { uri: opponents[1].imageUrl }, style: styles19.matchupLogo, resizeMode: "contain" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.matchupPlaceholder, { backgroundColor: awayColor + "20" }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.matchupInitial, { color: awayColor }], children: awayName.charAt(0) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.matchupName, { color: t.text }], numberOfLines: 1, children: awayName })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.section, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.teamsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            import_react_native25.TouchableOpacity,
+            {
+              style: [styles19.teamOption, { borderColor: selectedTeam === "home" ? homeColor : t.border, backgroundColor: selectedTeam === "home" ? homeColor + "15" : t.background }],
+              onPress: () => {
+                setSelectedTeam("home");
+                onTeamSelect?.("home");
+              },
+              activeOpacity: 0.7,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.teamLabel, { color: t.text }], children: homeName }),
+                selectedTeam === "home" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.teamBadge, { backgroundColor: homeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.teamBadgeText, children: "Selected" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            import_react_native25.TouchableOpacity,
+            {
+              style: [styles19.teamOption, { borderColor: selectedTeam === "away" ? awayColor : t.border, backgroundColor: selectedTeam === "away" ? awayColor + "15" : t.background }],
+              onPress: () => {
+                setSelectedTeam("away");
+                onTeamSelect?.("away");
+              },
+              activeOpacity: 0.7,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.teamLabel, { color: t.text }], children: awayName }),
+                selectedTeam === "away" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.teamBadge, { backgroundColor: awayColor }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.teamBadgeText, children: "Selected" }) })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: [styles19.summaryCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.summaryRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.summaryLabel, { color: t.textMuted }], children: "Your wager" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.Text, { style: [styles19.summaryValue, { color: t.text }], children: [
+            formatSol2(wager),
+            " SOL"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.summarySep, { backgroundColor: t.border }] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.summaryRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.summaryLabel, { color: t.textMuted }], children: "You're the first" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.summaryValue, { color: t.success }], children: "Set the odds" })
+        ] })
+      ] }),
+      selectedTeam && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        SolSlider,
+        {
+          value: wager,
+          min: 0.01,
+          max: maxWager,
+          step: 0.01,
+          accentColor: selectedTeam === "home" ? homeColor : awayColor,
+          onValueChange: setWager,
+          onTick: onSliderTick
+        }
+      ),
+      mutation.error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.View, { style: [styles19.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.errorText, { color: t.errorText }], children: mutation.error.message }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_react_native25.TouchableOpacity,
+        {
+          style: [styles19.ctaButton, { backgroundColor: canCreate ? t.accent : t.border }],
+          disabled: !canCreate,
+          onPress: handleCreate,
+          activeOpacity: 0.8,
+          children: isMutating ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: styles19.ctaLoading, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.ctaText, children: statusLabel })
+          ] }) : mutation.status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: styles19.ctaText, children: "Game Created!" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native25.Text, { style: [styles19.ctaText, !canCreate && { opacity: 0.5 }], children: selectedTeam ? `Create Game \u2014 ${formatSol2(wager)} SOL` : "Pick a side to start" })
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var styles19 = import_react_native25.StyleSheet.create({
+  overlay: { ...import_react_native25.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: "flex-start", justifyContent: "space-between", paddingVertical: 8 },
+  headerTitle: { fontSize: 20, fontWeight: "700" },
+  headerSub: { fontSize: 13, marginTop: 2 },
+  closeButton: { fontSize: 20, padding: 4 },
+  matchupBanner: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, borderBottomWidth: 1, gap: 16 },
+  matchupTeam: { flex: 1, alignItems: "center", gap: 6 },
+  matchupLogo: { width: 40, height: 40 },
+  matchupPlaceholder: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center" },
+  matchupInitial: { fontSize: 18, fontWeight: "800" },
+  matchupName: { fontSize: 13, fontWeight: "600", textAlign: "center" },
+  matchupVs: { fontSize: 13, fontWeight: "600" },
+  section: { gap: 10, paddingTop: 12 },
+  sectionLabel: { fontSize: 14, fontWeight: "600" },
+  teamsRow: { flexDirection: "row", gap: 10 },
+  teamOption: { flex: 1, borderWidth: 2, borderRadius: 14, paddingVertical: 14, alignItems: "center", gap: 6 },
+  teamLabel: { fontSize: 15, fontWeight: "700" },
+  teamBadge: { borderRadius: 8, paddingHorizontal: 10, paddingVertical: 3 },
+  teamBadgeText: { color: "#FFF", fontSize: 11, fontWeight: "700" },
+  summaryCard: { marginTop: 12, borderRadius: 14, borderWidth: 1, overflow: "hidden" },
+  summaryRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12 },
+  summaryLabel: { fontSize: 14 },
+  summaryValue: { fontSize: 15, fontWeight: "700" },
+  summarySep: { height: 1, marginHorizontal: 16 },
+  errorBox: { marginTop: 12, borderRadius: 12, borderWidth: 1, padding: 12 },
+  errorText: { fontSize: 13, fontWeight: "500" },
+  ctaButton: { marginTop: 16, height: 54, borderRadius: 14, justifyContent: "center", alignItems: "center" },
+  ctaText: { color: "#FFFFFF", fontSize: 16, fontWeight: "700" },
+  ctaLoading: { flexDirection: "row", alignItems: "center", gap: 10 },
+  successOverlay: { ...import_react_native25.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 }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArcadeLeaderboardSheet,
@@ -6888,6 +7136,7 @@ var styles18 = import_react_native24.StyleSheet.create({
   ConnectWalletButton,
   ConnectWalletScreen,
   CreateCustomGameSheet,
+  CreateGameSheet,
   DEFAULT_BASE_URL,
   DEFAULT_RPC_URL,
   DubsApiError,