@dubsdotapp/expo 0.5.11 → 0.5.12

package/dist/index.mjs

@@ -6905,6 +6905,264 @@ var styles18 = StyleSheet19.create({
   emptyState: { paddingVertical: 40, alignItems: "center" },
   emptyText: { fontSize: 14, fontWeight: "600" }
 });
+
+// src/ui/game/CreateGameSheet.tsx
+import { useState as useState32, useEffect as useEffect21, useRef as useRef14, useCallback as useCallback28 } from "react";
+import {
+  View as View19,
+  Text as Text20,
+  Image as Image8,
+  TouchableOpacity as TouchableOpacity15,
+  ActivityIndicator as ActivityIndicator11,
+  Modal as Modal7,
+  Animated as Animated8,
+  StyleSheet as StyleSheet20,
+  KeyboardAvoidingView as KeyboardAvoidingView8,
+  Platform as Platform12
+} from "react-native";
+import { jsx as jsx22, jsxs as jsxs19 } from "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] = useState32(null);
+  const [wager, setWager] = useState32(0.01);
+  const [showSuccess, setShowSuccess] = useState32(false);
+  const overlayOpacity = useRef14(new Animated8.Value(0)).current;
+  const successScale = useRef14(new Animated8.Value(0)).current;
+  const successOpacity = useRef14(new Animated8.Value(0)).current;
+  useEffect21(() => {
+    Animated8.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start();
+  }, [visible]);
+  useEffect21(() => {
+    if (visible) {
+      setSelectedTeam(null);
+      setWager(0.01);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
+      mutation.reset();
+    }
+  }, [visible]);
+  useEffect21(() => {
+    if (mutation.status === "success" && mutation.data) {
+      setShowSuccess(true);
+      onSuccess?.(mutation.data);
+      onCreateSuccess?.(mutation.data);
+      Animated8.parallel([
+        Animated8.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        Animated8.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true })
+      ]).start();
+      const timer = setTimeout(() => {
+        Animated8.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]);
+  useEffect21(() => {
+    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 = useCallback28(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__ */ jsxs19(Modal7, { visible, animationType: "slide", transparent: true, onRequestClose: onDismiss, children: [
+    /* @__PURE__ */ jsx22(Animated8.View, { style: [styles19.overlay, { opacity: overlayOpacity }], children: /* @__PURE__ */ jsx22(TouchableOpacity15, { style: styles19.overlayTap, activeOpacity: 1, onPress: onDismiss }) }),
+    showSuccess && /* @__PURE__ */ jsx22(View19, { style: styles19.successOverlay, children: /* @__PURE__ */ jsxs19(Animated8.View, { style: [styles19.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }], children: [
+      /* @__PURE__ */ jsx22(Text20, { style: styles19.successEmoji, children: "\u{1F3AF}" }),
+      /* @__PURE__ */ jsx22(Text20, { style: styles19.successTitle, children: "Game Created!" }),
+      /* @__PURE__ */ jsxs19(Text20, { style: styles19.successSub, children: [
+        formatSol2(wager),
+        " SOL on ",
+        selectedTeam === "home" ? homeName : awayName
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx22(KeyboardAvoidingView8, { style: styles19.keyboardView, behavior: Platform12.OS === "ios" ? "padding" : void 0, children: /* @__PURE__ */ jsx22(View19, { style: styles19.sheetPositioner, children: /* @__PURE__ */ jsxs19(View19, { style: [styles19.sheet, { backgroundColor: t.background }], children: [
+      /* @__PURE__ */ jsx22(View19, { style: styles19.handleRow, children: /* @__PURE__ */ jsx22(View19, { style: [styles19.handle, { backgroundColor: t.textMuted }] }) }),
+      /* @__PURE__ */ jsxs19(View19, { style: styles19.header, children: [
+        /* @__PURE__ */ jsxs19(View19, { children: [
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.headerTitle, { color: t.text }], children: "Create Game" }),
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.headerSub, { color: t.textMuted }], children: timeLabel })
+        ] }),
+        /* @__PURE__ */ jsx22(TouchableOpacity15, { onPress: onDismiss, activeOpacity: 0.8, children: /* @__PURE__ */ jsx22(Text20, { style: [styles19.closeButton, { color: t.textMuted }], children: "\u2715" }) })
+      ] }),
+      /* @__PURE__ */ jsxs19(View19, { style: [styles19.matchupBanner, { borderColor: t.border }], children: [
+        /* @__PURE__ */ jsxs19(View19, { style: styles19.matchupTeam, children: [
+          opponents[0]?.imageUrl ? /* @__PURE__ */ jsx22(Image8, { source: { uri: opponents[0].imageUrl }, style: styles19.matchupLogo, resizeMode: "contain" }) : /* @__PURE__ */ jsx22(View19, { style: [styles19.matchupPlaceholder, { backgroundColor: homeColor + "20" }], children: /* @__PURE__ */ jsx22(Text20, { style: [styles19.matchupInitial, { color: homeColor }], children: homeName.charAt(0) }) }),
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.matchupName, { color: t.text }], numberOfLines: 1, children: homeName })
+        ] }),
+        /* @__PURE__ */ jsx22(Text20, { style: [styles19.matchupVs, { color: t.textMuted }], children: "vs" }),
+        /* @__PURE__ */ jsxs19(View19, { style: styles19.matchupTeam, children: [
+          opponents[1]?.imageUrl ? /* @__PURE__ */ jsx22(Image8, { source: { uri: opponents[1].imageUrl }, style: styles19.matchupLogo, resizeMode: "contain" }) : /* @__PURE__ */ jsx22(View19, { style: [styles19.matchupPlaceholder, { backgroundColor: awayColor + "20" }], children: /* @__PURE__ */ jsx22(Text20, { style: [styles19.matchupInitial, { color: awayColor }], children: awayName.charAt(0) }) }),
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.matchupName, { color: t.text }], numberOfLines: 1, children: awayName })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs19(View19, { style: styles19.section, children: [
+        /* @__PURE__ */ jsx22(Text20, { style: [styles19.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
+        /* @__PURE__ */ jsxs19(View19, { style: styles19.teamsRow, children: [
+          /* @__PURE__ */ jsxs19(
+            TouchableOpacity15,
+            {
+              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__ */ jsx22(Text20, { style: [styles19.teamLabel, { color: t.text }], children: homeName }),
+                selectedTeam === "home" && /* @__PURE__ */ jsx22(View19, { style: [styles19.teamBadge, { backgroundColor: homeColor }], children: /* @__PURE__ */ jsx22(Text20, { style: styles19.teamBadgeText, children: "Selected" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs19(
+            TouchableOpacity15,
+            {
+              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__ */ jsx22(Text20, { style: [styles19.teamLabel, { color: t.text }], children: awayName }),
+                selectedTeam === "away" && /* @__PURE__ */ jsx22(View19, { style: [styles19.teamBadge, { backgroundColor: awayColor }], children: /* @__PURE__ */ jsx22(Text20, { style: styles19.teamBadgeText, children: "Selected" }) })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs19(View19, { style: [styles19.summaryCard, { backgroundColor: t.surface, borderColor: t.border }], children: [
+        /* @__PURE__ */ jsxs19(View19, { style: styles19.summaryRow, children: [
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.summaryLabel, { color: t.textMuted }], children: "Your wager" }),
+          /* @__PURE__ */ jsxs19(Text20, { style: [styles19.summaryValue, { color: t.text }], children: [
+            formatSol2(wager),
+            " SOL"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx22(View19, { style: [styles19.summarySep, { backgroundColor: t.border }] }),
+        /* @__PURE__ */ jsxs19(View19, { style: styles19.summaryRow, children: [
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.summaryLabel, { color: t.textMuted }], children: "You're the first" }),
+          /* @__PURE__ */ jsx22(Text20, { style: [styles19.summaryValue, { color: t.success }], children: "Set the odds" })
+        ] })
+      ] }),
+      selectedTeam && /* @__PURE__ */ jsx22(
+        SolSlider,
+        {
+          value: wager,
+          min: 0.01,
+          max: maxWager,
+          step: 0.01,
+          accentColor: selectedTeam === "home" ? homeColor : awayColor,
+          onValueChange: setWager,
+          onTick: onSliderTick
+        }
+      ),
+      mutation.error && /* @__PURE__ */ jsx22(View19, { style: [styles19.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }], children: /* @__PURE__ */ jsx22(Text20, { style: [styles19.errorText, { color: t.errorText }], children: mutation.error.message }) }),
+      /* @__PURE__ */ jsx22(
+        TouchableOpacity15,
+        {
+          style: [styles19.ctaButton, { backgroundColor: canCreate ? t.accent : t.border }],
+          disabled: !canCreate,
+          onPress: handleCreate,
+          activeOpacity: 0.8,
+          children: isMutating ? /* @__PURE__ */ jsxs19(View19, { style: styles19.ctaLoading, children: [
+            /* @__PURE__ */ jsx22(ActivityIndicator11, { size: "small", color: "#FFFFFF" }),
+            /* @__PURE__ */ jsx22(Text20, { style: styles19.ctaText, children: statusLabel })
+          ] }) : mutation.status === "success" ? /* @__PURE__ */ jsx22(Text20, { style: styles19.ctaText, children: "Game Created!" }) : /* @__PURE__ */ jsx22(Text20, { style: [styles19.ctaText, !canCreate && { opacity: 0.5 }], children: selectedTeam ? `Create Game \u2014 ${formatSol2(wager)} SOL` : "Pick a side to start" })
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var styles19 = StyleSheet20.create({
+  overlay: { ...StyleSheet20.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: { ...StyleSheet20.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 }
+});
 export {
   ArcadeLeaderboardSheet,
   AuthGate,
@@ -6913,6 +7171,7 @@ export {
   ConnectWalletButton,
   ConnectWalletScreen,
   CreateCustomGameSheet,
+  CreateGameSheet,
   DEFAULT_BASE_URL,
   DEFAULT_RPC_URL,
   DubsApiError,