@dubsdotapp/expo 0.2.29 → 0.2.30

package/package.json

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

package/src/client.ts

@@ -215,6 +215,7 @@ export class DubsClient {
       gameAddress: res.gameAddress,
       transaction: res.transaction,
       lockTimestamp: res.lockTimestamp,
+      externalGameId: res.externalGameId ?? null,
     };
   }
 
@@ -267,6 +268,7 @@ export class DubsClient {
     const qs = new URLSearchParams();
     if (params?.wallet) qs.set('wallet', params.wallet);
     if (params?.status) qs.set('status', params.status);
+    if (params?.externalGameId) qs.set('externalGameId', params.externalGameId);
     if (params?.limit != null) qs.set('limit', String(params.limit));
     if (params?.offset != null) qs.set('offset', String(params.offset));
     const query = qs.toString();

package/src/hooks/useCreateCustomGame.ts

@@ -9,6 +9,7 @@ export interface CreateCustomGameMutationResult {
   signature: string;
   explorerUrl: string;
   buyIn: number;
+  externalGameId?: string | null;
 }
 
 export function useCreateCustomGame() {
@@ -65,6 +66,7 @@ export function useCreateCustomGame() {
         signature,
         explorerUrl,
         buyIn: params.wagerAmount,
+        externalGameId: createResult.externalGameId ?? null,
       };
 
       setData(result);

package/src/index.ts

@@ -95,7 +95,7 @@ export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsT
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet } from './ui';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet } from './ui';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -103,6 +103,7 @@ export type {
   PlayersCardProps,
   JoinGameButtonProps,
   CreateCustomGameSheetProps,
+  JoinGameSheetProps,
 } from './ui';
 
 // Utils

package/src/types.ts

@@ -114,6 +114,7 @@ export interface CreateCustomGameParams {
   title?: string;
   maxPlayers?: number;
   metadata?: Record<string, unknown>;
+  externalGameId?: string;
 }
 
 export interface CreateCustomGameResult {
@@ -121,6 +122,7 @@ export interface CreateCustomGameResult {
   gameAddress: string;
   transaction: string;
   lockTimestamp: number;
+  externalGameId?: string | null;
 }
 
 // ── Join Game ──
@@ -203,6 +205,7 @@ export interface GameDetail {
   drawPool: number;
   totalPool: number;
   media: GameMedia;
+  externalGameId?: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -226,6 +229,7 @@ export interface GameListItem {
   league: string | null;
   lockTimestamp: number | null;
   createdAt: string;
+  externalGameId?: string | null;
   opponents: GameListOpponent[];
   media: GameMedia;
 }
@@ -233,6 +237,7 @@ export interface GameListItem {
 export interface GetGamesParams {
   wallet?: string;
   status?: 'open' | 'locked' | 'resolved';
+  externalGameId?: string;
   limit?: number;
   offset?: number;
 }

package/src/ui/game/CreateCustomGameSheet.tsx

@@ -25,6 +25,7 @@ export interface CreateCustomGameSheetProps {
   presetAmounts?: number[];
   defaultAmount?: number;
   metadata?: Record<string, unknown>;
+  externalGameId?: string;
   onAmountChange?: (amount: number | null) => void;
   onSuccess?: (result: CreateCustomGameMutationResult) => void;
   onError?: (error: Error) => void;
@@ -46,6 +47,7 @@ export function CreateCustomGameSheet({
   presetAmounts = [0.01, 0.1, 0.5, 1],
   defaultAmount = 0.01,
   metadata,
+  externalGameId,
   onAmountChange,
   onSuccess,
   onError,
@@ -139,11 +141,12 @@ export function CreateCustomGameSheet({
         title,
         maxPlayers,
         metadata,
+        externalGameId,
       });
     } catch {
       // Error is already captured in mutation state
     }
-  }, [effectiveAmount, wallet.publicKey, mutation.execute, title, maxPlayers, metadata]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [effectiveAmount, wallet.publicKey, mutation.execute, title, maxPlayers, metadata, externalGameId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const statusLabel = STATUS_LABELS[mutation.status] || '';
 

package/src/ui/game/JoinGameSheet.tsx

@@ -0,0 +1,470 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  Modal,
+  Animated,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { useDubsTheme } from '../theme';
+import { useDubs } from '../../provider';
+import { useJoinGame } from '../../hooks/useJoinGame';
+import type { JoinGameMutationResult } from '../../hooks/useJoinGame';
+import type { GameDetail } from '../../types';
+
+export interface JoinGameSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  game: GameDetail;
+  /** Optional Image component (expo-image, etc.) for team logos */
+  ImageComponent?: React.ComponentType<any>;
+  /** Custom short-name function for team labels */
+  shortName?: (name: string | null) => string;
+  /** Override team colors (default blue/red) */
+  homeColor?: string;
+  awayColor?: string;
+  /** Callbacks */
+  onSuccess?: (result: JoinGameMutationResult) => void;
+  onError?: (error: Error) => void;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  building: 'Building transaction...',
+  signing: 'Approve in wallet...',
+  confirming: 'Confirming...',
+  success: 'Joined!',
+};
+
+const CUSTOM_GAME_MODE = 6;
+
+export function JoinGameSheet({
+  visible,
+  onDismiss,
+  game,
+  ImageComponent,
+  shortName,
+  homeColor = '#3B82F6',
+  awayColor = '#EF4444',
+  onSuccess,
+  onError,
+}: JoinGameSheetProps) {
+  const t = useDubsTheme();
+  const { wallet } = useDubs();
+  const mutation = useJoinGame();
+
+  const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
+
+  // For custom games the joiner is always away — no team selection needed.
+  // For sports/esports games the user picks a team.
+  const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+
+  // Animate overlay on visibility change
+  useEffect(() => {
+    Animated.timing(overlayOpacity, {
+      toValue: visible ? 1 : 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, overlayOpacity]);
+
+  // Reset state when sheet opens
+  useEffect(() => {
+    if (visible) {
+      setSelectedTeam(isCustomGame ? 'away' : null);
+      mutation.reset();
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Auto-dismiss on success
+  useEffect(() => {
+    if (mutation.status === 'success' && mutation.data) {
+      onSuccess?.(mutation.data);
+      const timer = setTimeout(() => {
+        onDismiss();
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Report errors
+  useEffect(() => {
+    if (mutation.status === 'error' && mutation.error) {
+      onError?.(mutation.error);
+    }
+  }, [mutation.status, mutation.error]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // --- Derived values ---
+
+  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 } = useMemo(() => ({
+    homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : '—',
+    awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : '—',
+    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 : '—';
+  const potentialWinnings = selectedOdds !== '—' ? (parseFloat(selectedOdds) * buyIn).toFixed(4) : '—';
+
+  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 : '—';
+
+  const alreadyJoined = useMemo(() => {
+    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 = useCallback(async () => {
+    if (!selectedTeam || !wallet.publicKey) return;
+
+    try {
+      await mutation.execute({
+        playerWallet: wallet.publicKey.toBase58(),
+        gameId: game.gameId,
+        teamChoice: selectedTeam,
+        amount: buyIn,
+      });
+    } catch {
+      // Error is already captured in mutation state
+    }
+  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, buyIn]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const statusLabel = STATUS_LABELS[mutation.status] || '';
+
+  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>
+
+      <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}>
+              <Text style={[styles.headerTitle, { color: t.text }]}>Join Game</Text>
+              <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
+                <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Team Selection — only for non-custom (sports/esports) games */}
+            {!isCustomGame && (
+              <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={homeOdds}
+                    bets={homeBets}
+                    color={homeColor}
+                    selected={selectedTeam === 'home'}
+                    onPress={() => setSelectedTeam('home')}
+                    ImageComponent={ImageComponent}
+                    t={t}
+                  />
+                  <TeamButton
+                    name={awayName}
+                    imageUrl={opponents[1]?.imageUrl}
+                    odds={awayOdds}
+                    bets={awayBets}
+                    color={awayColor}
+                    selected={selectedTeam === 'away'}
+                    onPress={() => setSelectedTeam('away')}
+                    ImageComponent={ImageComponent}
+                    t={t}
+                  />
+                </View>
+              </View>
+            )}
+
+            {/* Summary Card */}
+            <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Buy-in</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{buyIn} SOL</Text>
+              </View>
+              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Your side</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{selectedName}</Text>
+              </View>
+              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Total pool</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{poolAfterJoin} SOL</Text>
+              </View>
+              <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+              <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Potential winnings</Text>
+                <Text style={[styles.summaryValue, { color: t.success }]}>
+                  {potentialWinnings !== '—' ? `${potentialWinnings} SOL` : '—'}
+                </Text>
+              </View>
+            </View>
+
+            {/* Already Joined Notice */}
+            {alreadyJoined && (
+              <View style={[styles.errorBox, { backgroundColor: t.surface, borderColor: t.border }]}>
+                <Text style={[styles.errorText, { color: t.textMuted }]}>You've already joined this game.</Text>
+              </View>
+            )}
+
+            {/* Error Display */}
+            {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 Button */}
+            <TouchableOpacity
+              style={[
+                styles.ctaButton,
+                { backgroundColor: canJoin ? t.accent : t.border },
+              ]}
+              disabled={!canJoin}
+              onPress={handleJoin}
+              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}>{STATUS_LABELS.success}</Text>
+              ) : (
+                <Text style={[styles.ctaText, !canJoin && { opacity: 0.5 }]}>
+                  {alreadyJoined
+                    ? 'Already Joined'
+                    : selectedTeam
+                      ? `Join Game \u2014 ${buyIn} SOL`
+                      : 'Pick a side to join'}
+                </Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+// ── 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: {
+    ...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: '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',
+  },
+});

package/src/ui/game/index.ts

@@ -10,3 +10,5 @@ export { JoinGameButton } from './JoinGameButton';
 export type { JoinGameButtonProps } from './JoinGameButton';
 export { CreateCustomGameSheet } from './CreateCustomGameSheet';
 export type { CreateCustomGameSheetProps } from './CreateCustomGameSheet';
+export { JoinGameSheet } from './JoinGameSheet';
+export type { JoinGameSheetProps } from './JoinGameSheet';

package/src/ui/index.ts

@@ -10,7 +10,7 @@ export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet } from './game';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet } from './game';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -18,4 +18,5 @@ export type {
   PlayersCardProps,
   JoinGameButtonProps,
   CreateCustomGameSheetProps,
+  JoinGameSheetProps,
 } from './game';