@dubsdotapp/expo 0.5.11 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/index.ts

@@ -134,7 +134,7 @@ export { AuthGate, ConnectWalletScreen, ConnectWalletButton, UserProfileCard, Se
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, ConnectWalletButtonProps, AuthGateConnectWalletProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './ui';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, CreateGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './ui';
 export type { SolSliderProps } from './ui';
 export type {
   GamePosterProps,
@@ -143,6 +143,7 @@ export type {
   PlayersCardProps,
   JoinGameButtonProps,
   CreateCustomGameSheetProps,
+  CreateGameSheetProps,
   JoinGameSheetProps,
   ClaimPrizeSheetProps,
   ClaimButtonProps,

package/src/ui/game/CreateGameSheet.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ActivityIndicator,
+  Modal,
+  Animated,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { useDubsTheme } from '../theme';
+import { useDubs } from '../../provider';
+import { useCreateGame } from '../../hooks/useCreateGame';
+import type { CreateGameMutationResult } from '../../hooks/useCreateGame';
+import type { UnifiedEvent } from '../../types';
+import { SolSlider } from './SolSlider';
+import { TeamButton } from './TeamButton';
+
+export interface CreateGameSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  event: UnifiedEvent;
+  /** Override team colors */
+  homeColor?: string;
+  awayColor?: string;
+  /** Callbacks */
+  onSuccess?: (result: CreateGameMutationResult) => void;
+  onError?: (error: Error) => void;
+  /** Called when the user taps a team card */
+  onTeamSelect?: (team: 'home' | 'away') => void;
+  /** Called on success (for sound/animation) */
+  onCreateSuccess?: (result: CreateGameMutationResult) => void;
+  /** Called on each slider tick */
+  onSliderTick?: (value: number) => void;
+  /** Max wager in SOL */
+  maxWager?: number;
+  /** Custom short-name function for team labels */
+  shortName?: (name: string | null) => string;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  building: 'Building transaction...',
+  signing: 'Approve in wallet...',
+  confirming: 'Confirming...',
+  success: 'Game Created!',
+};
+
+function formatSol(n: number): string {
+  return parseFloat(n.toFixed(9)).toString();
+}
+
+function toPng(url: string | null | undefined): string | null {
+  if (!url) return null;
+  return url.replace('/svg?', '/png?');
+}
+
+export function CreateGameSheet({
+  visible,
+  onDismiss,
+  event,
+  homeColor = '#3B82F6',
+  awayColor = '#EF4444',
+  onSuccess,
+  onError,
+  onTeamSelect,
+  onCreateSuccess,
+  onSliderTick,
+  maxWager = 1,
+  shortName,
+}: CreateGameSheetProps) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const mutation = useCreateGame();
+
+  const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
+  const [wager, setWager] = useState(0.01);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const successScale = useRef(new Animated.Value(0)).current;
+  const successOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible) {
+      setSelectedTeam(null);
+      setWager(0.01);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
+      mutation.reset();
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle success
+  useEffect(() => {
+    if (mutation.status === 'success' && mutation.data) {
+      setShowSuccess(true);
+      onSuccess?.(mutation.data);
+      onCreateSuccess?.(mutation.data);
+
+      Animated.parallel([
+        Animated.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        Animated.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true }),
+      ]).start();
+
+      const timer = setTimeout(() => {
+        Animated.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (mutation.status === 'error' && mutation.error) {
+      onError?.(mutation.error);
+    }
+  }, [mutation.status, mutation.error]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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 = useCallback(async () => {
+    if (!selectedTeam || !wallet.publicKey) return;
+
+    try {
+      await mutation.execute({
+        id: event.id,
+        playerWallet: wallet.publicKey.toBase58(),
+        teamChoice: selectedTeam,
+        wagerAmount: wager,
+      });
+    } catch {
+      // Error captured in mutation state
+    }
+  }, [selectedTeam, wallet.publicKey, mutation.execute, event.id, wager]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const statusLabel = STATUS_LABELS[mutation.status] || '';
+
+  // Countdown
+  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 (
+    <Modal visible={visible} animationType="slide" transparent onRequestClose={onDismiss}>
+      <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+        <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
+      </Animated.View>
+
+      {/* Success overlay */}
+      {showSuccess && (
+        <View style={styles.successOverlay}>
+          <Animated.View style={[styles.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }]}>
+            <Text style={styles.successEmoji}>🎯</Text>
+            <Text style={styles.successTitle}>Game Created!</Text>
+            <Text style={styles.successSub}>
+              {formatSol(wager)} SOL on {selectedTeam === 'home' ? homeName : awayName}
+            </Text>
+          </Animated.View>
+        </View>
+      )}
+
+      <KeyboardAvoidingView style={styles.keyboardView} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <View style={styles.sheetPositioner}>
+          <View style={[styles.sheet, { backgroundColor: t.background }]}>
+            {/* Drag handle */}
+            <View style={styles.handleRow}>
+              <View style={[styles.handle, { backgroundColor: t.textMuted }]} />
+            </View>
+
+            {/* Header */}
+            <View style={styles.header}>
+              <View>
+                <Text style={[styles.headerTitle, { color: t.text }]}>Create Game</Text>
+                <Text style={[styles.headerSub, { color: t.textMuted }]}>{timeLabel}</Text>
+              </View>
+              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
+                <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Team Selection */}
+            <View style={styles.section}>
+              <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
+              <View style={styles.teamsRow}>
+                <TeamButton
+                  name={homeName}
+                  imageUrl={opponents[0]?.imageUrl}
+                  odds="—"
+                  bets={0}
+                  color={homeColor}
+                  selected={selectedTeam === 'home'}
+                  onPress={() => { setSelectedTeam('home'); onTeamSelect?.('home'); }}
+                  t={t}
+                />
+                <TeamButton
+                  name={awayName}
+                  imageUrl={opponents[1]?.imageUrl}
+                  odds="—"
+                  bets={0}
+                  color={awayColor}
+                  selected={selectedTeam === 'away'}
+                  onPress={() => { setSelectedTeam('away'); onTeamSelect?.('away'); }}
+                  t={t}
+                />
+              </View>
+            </View>
+
+            {/* Summary */}
+            <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Your wager</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{formatSol(wager)} SOL</Text>
+              </View>
+              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>You're the first</Text>
+                <Text style={[styles.summaryValue, { color: t.success }]}>Set the odds</Text>
+              </View>
+            </View>
+
+            {/* SOL Slider */}
+            {selectedTeam && (
+              <SolSlider
+                value={wager}
+                min={0.01}
+                max={maxWager}
+                step={0.01}
+                accentColor={selectedTeam === 'home' ? homeColor : awayColor}
+                onValueChange={setWager}
+                onTick={onSliderTick}
+              />
+            )}
+
+            {/* Error */}
+            {mutation.error && (
+              <View style={[styles.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
+                <Text style={[styles.errorText, { color: t.errorText }]}>{mutation.error.message}</Text>
+              </View>
+            )}
+
+            {/* CTA */}
+            <TouchableOpacity
+              style={[styles.ctaButton, { backgroundColor: canCreate ? t.accent : t.border }]}
+              disabled={!canCreate}
+              onPress={handleCreate}
+              activeOpacity={0.8}
+            >
+              {isMutating ? (
+                <View style={styles.ctaLoading}>
+                  <ActivityIndicator size="small" color="#FFFFFF" />
+                  <Text style={styles.ctaText}>{statusLabel}</Text>
+                </View>
+              ) : mutation.status === 'success' ? (
+                <Text style={styles.ctaText}>Game Created!</Text>
+              ) : (
+                <Text style={[styles.ctaText, !canCreate && { opacity: 0.5 }]}>
+                  {selectedTeam
+                    ? `Create Game \u2014 ${formatSol(wager)} SOL`
+                    : 'Pick a side to start'}
+                </Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: { ...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 },
+
+  section: { gap: 10, paddingTop: 12 },
+  sectionLabel: { fontSize: 14, fontWeight: '600' },
+  teamsRow: { flexDirection: 'row', gap: 12 },
+
+  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: { ...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 },
+});

package/src/ui/game/JoinGameSheet.tsx

@@ -17,6 +17,7 @@ import { useJoinGame } from '../../hooks/useJoinGame';
 import type { JoinGameMutationResult } from '../../hooks/useJoinGame';
 import type { GameDetail } from '../../types';
 import { SolSlider } from './SolSlider';
+import { TeamButton } from './TeamButton';
 
 export interface JoinGameSheetProps {
   visible: boolean;
@@ -412,41 +413,6 @@ export function JoinGameSheet({
   );
 }
 
-// ── TeamButton (internal, for sports/esports games) ──
-
-function TeamButton({
-  name, imageUrl, odds, bets, color, selected, onPress, ImageComponent, t,
-}: {
-  name: string; imageUrl?: string | null; odds: string; bets: number;
-  color: string; selected: boolean; onPress: () => void;
-  ImageComponent?: React.ComponentType<any>; t: any;
-}) {
-  const [imgFailed, setImgFailed] = useState(false);
-  const Img = ImageComponent || require('react-native').Image;
-  const showImage = imageUrl && !imgFailed;
-
-  return (
-    <TouchableOpacity
-      style={[styles.teamOption, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + '15' : t.background }]}
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      {showImage ? (
-        <Img source={{ uri: imageUrl }} style={styles.teamLogo} resizeMode="contain" onError={() => setImgFailed(true)} />
-      ) : (
-        <View style={[styles.teamLogo, styles.teamLogoPlaceholder]} />
-      )}
-      <Text style={[styles.teamName, { color: t.text }]} numberOfLines={1}>{name}</Text>
-      <Text style={[styles.teamOdds, { color }]}>{odds}x</Text>
-      <Text style={[styles.teamBets, { color: t.textMuted }]}>{bets} {bets === 1 ? 'bet' : 'bets'}</Text>
-      {selected && (
-        <View style={[styles.teamBadge, { backgroundColor: color }]}>
-          <Text style={styles.teamBadgeText}>Selected</Text>
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
 
 const styles = StyleSheet.create({
   overlay: {
@@ -642,43 +608,4 @@ const styles = StyleSheet.create({
     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',
-  },
 });

package/src/ui/game/TeamButton.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+export interface TeamButtonProps {
+  name: string;
+  imageUrl?: string | null;
+  odds: string;
+  bets: number;
+  color: string;
+  selected: boolean;
+  onPress: () => void;
+  ImageComponent?: React.ComponentType<any>;
+  t: any;
+}
+
+export function TeamButton({
+  name, imageUrl, odds, bets, color, selected, onPress, ImageComponent, t,
+}: TeamButtonProps) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const Img = ImageComponent || require('react-native').Image;
+  const showImage = imageUrl && !imgFailed;
+
+  return (
+    <TouchableOpacity
+      style={[styles.teamOption, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + '15' : t.background }]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      {showImage ? (
+        <Img source={{ uri: imageUrl }} style={styles.teamLogo} resizeMode="contain" onError={() => setImgFailed(true)} />
+      ) : (
+        <View style={[styles.teamLogo, styles.teamLogoPlaceholder]} />
+      )}
+      <Text style={[styles.teamName, { color: t.text }]} numberOfLines={1}>{name}</Text>
+      <Text style={[styles.teamOdds, { color }]}>{odds}x</Text>
+      <Text style={[styles.teamBets, { color: t.textMuted }]}>{bets} {bets === 1 ? 'bet' : 'bets'}</Text>
+      {selected && (
+        <View style={[styles.teamBadge, { backgroundColor: color }]}>
+          <Text style={styles.teamBadgeText}>Selected</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  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',
+  },
+});

package/src/ui/game/index.ts

@@ -22,3 +22,5 @@ export { ArcadeLeaderboardSheet } from './ArcadeLeaderboardSheet';
 export type { ArcadeLeaderboardSheetProps } from './ArcadeLeaderboardSheet';
 export { SolSlider } from './SolSlider';
 export type { SolSliderProps } from './SolSlider';
+export { CreateGameSheet } from './CreateGameSheet';
+export type { CreateGameSheetProps } from './CreateGameSheet';

package/src/ui/index.ts

@@ -14,7 +14,7 @@ export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './game';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, CreateGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './game';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -28,4 +28,5 @@ export type {
   EnterArcadePoolSheetProps,
   ArcadeLeaderboardSheetProps,
   SolSliderProps,
+  CreateGameSheetProps,
 } from './game';