@dubsdotapp/expo 0.5.11 → 0.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "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,366 @@
+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';
+
+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>
+
+            {/* Matchup banner */}
+            <View style={[styles.matchupBanner, { borderColor: t.border }]}>
+              <View style={styles.matchupTeam}>
+                {opponents[0]?.imageUrl ? (
+                  <Image source={{ uri: opponents[0].imageUrl }} style={styles.matchupLogo} resizeMode="contain" />
+                ) : (
+                  <View style={[styles.matchupPlaceholder, { backgroundColor: homeColor + '20' }]}>
+                    <Text style={[styles.matchupInitial, { color: homeColor }]}>{homeName.charAt(0)}</Text>
+                  </View>
+                )}
+                <Text style={[styles.matchupName, { color: t.text }]} numberOfLines={1}>{homeName}</Text>
+              </View>
+              <Text style={[styles.matchupVs, { color: t.textMuted }]}>vs</Text>
+              <View style={styles.matchupTeam}>
+                {opponents[1]?.imageUrl ? (
+                  <Image source={{ uri: opponents[1].imageUrl }} style={styles.matchupLogo} resizeMode="contain" />
+                ) : (
+                  <View style={[styles.matchupPlaceholder, { backgroundColor: awayColor + '20' }]}>
+                    <Text style={[styles.matchupInitial, { color: awayColor }]}>{awayName.charAt(0)}</Text>
+                  </View>
+                )}
+                <Text style={[styles.matchupName, { color: t.text }]} numberOfLines={1}>{awayName}</Text>
+              </View>
+            </View>
+
+            {/* Team Selection */}
+            <View style={styles.section}>
+              <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
+              <View style={styles.teamsRow}>
+                <TouchableOpacity
+                  style={[styles.teamOption, { borderColor: selectedTeam === 'home' ? homeColor : t.border, backgroundColor: selectedTeam === 'home' ? homeColor + '15' : t.background }]}
+                  onPress={() => { setSelectedTeam('home'); onTeamSelect?.('home'); }}
+                  activeOpacity={0.7}
+                >
+                  <Text style={[styles.teamLabel, { color: t.text }]}>{homeName}</Text>
+                  {selectedTeam === 'home' && (
+                    <View style={[styles.teamBadge, { backgroundColor: homeColor }]}>
+                      <Text style={styles.teamBadgeText}>Selected</Text>
+                    </View>
+                  )}
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.teamOption, { borderColor: selectedTeam === 'away' ? awayColor : t.border, backgroundColor: selectedTeam === 'away' ? awayColor + '15' : t.background }]}
+                  onPress={() => { setSelectedTeam('away'); onTeamSelect?.('away'); }}
+                  activeOpacity={0.7}
+                >
+                  <Text style={[styles.teamLabel, { color: t.text }]}>{awayName}</Text>
+                  {selectedTeam === 'away' && (
+                    <View style={[styles.teamBadge, { backgroundColor: awayColor }]}>
+                      <Text style={styles.teamBadgeText}>Selected</Text>
+                    </View>
+                  )}
+                </TouchableOpacity>
+              </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 },
+
+  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: { ...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/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';