@dubsdotapp/expo 0.2.44 → 0.2.46

package/package.json

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

package/src/client.ts

@@ -36,6 +36,7 @@ import type {
   LiveScore,
   UiConfig,
   UFCEvent,
+  UFCFighterDetail,
 } from './types';
 
 export interface DubsClientConfig {
@@ -156,6 +157,14 @@ export class DubsClient {
     return res.events;
   }
 
+  async getUFCFighterDetail(athleteId: string): Promise<UFCFighterDetail> {
+    const res = await this.request<{ success: true; fighter: UFCFighterDetail }>(
+      'GET',
+      `/ufc/fighters/${encodeURIComponent(athleteId)}`,
+    );
+    return res.fighter;
+  }
+
   // ── Game Lifecycle ──
 
   async validateEvent(id: string): Promise<ValidateEventResult> {

package/src/hooks/index.ts

@@ -15,3 +15,4 @@ export type { ClaimStatus } from './useHasClaimed';
 export { useAuth } from './useAuth';
 export type { UseAuthResult } from './useAuth';
 export { useUFCFightCard } from './useUFCFightCard';
+export { useUFCFighterDetail } from './useUFCFighterDetail';

package/src/hooks/useUFCFighterDetail.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useDubs } from '../provider';
+import type { UFCFighterDetail, QueryResult } from '../types';
+
+export function useUFCFighterDetail(athleteId: string | null): QueryResult<UFCFighterDetail> {
+  const { client } = useDubs();
+  const [data, setData] = useState<UFCFighterDetail | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    if (!athleteId) {
+      setData(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.getUFCFighterDetail(athleteId);
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, athleteId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}

package/src/index.ts

@@ -60,6 +60,7 @@ export type {
   LiveScoreCompetitor,
   UiConfig,
   UFCFighter,
+  UFCFighterDetail,
   UFCData,
   UFCFight,
   UFCEvent,
@@ -89,6 +90,7 @@ export {
   useHasClaimed,
   useAuth,
   useUFCFightCard,
+  useUFCFighterDetail,
 } from './hooks';
 export type {
   CreateGameMutationResult,

package/src/types.ts

@@ -419,12 +419,44 @@ export interface LiveScore {
 
 export interface UFCFighter {
   name: string;
-  imageUrl: string | null;
+  athleteId: string | null;
+  headshotUrl: string | null;
+  flagUrl: string | null;
+  country: string | null;
   abbreviation: string;
   record: string | null;
   winner: boolean;
 }
 
+export interface UFCFighterDetail {
+  athleteId: string;
+  firstName: string | null;
+  lastName: string | null;
+  fullName: string | null;
+  nickname: string | null;
+  shortName: string | null;
+  height: string | null;
+  heightInches: number | null;
+  weight: string | null;
+  weightLbs: number | null;
+  reach: string | null;
+  reachInches: number | null;
+  age: number | null;
+  dateOfBirth: string | null;
+  stance: string | null;
+  weightClass: string | null;
+  citizenship: string | null;
+  citizenshipAbbreviation: string | null;
+  gym: string | null;
+  gymCountry: string | null;
+  active: boolean;
+  headshotUrl: string | null;
+  flagUrl: string | null;
+  stanceImageUrl: string | null;
+  espnUrl: string | null;
+  slug: string | null;
+}
+
 export interface UFCData {
   currentRound: number;
   totalRounds: number;

package/src/ui/game/CreateCustomGameSheet.tsx

@@ -28,6 +28,8 @@ export interface CreateCustomGameSheetProps {
   onAmountChange?: (amount: number | null) => void;
   onSuccess?: (result: CreateCustomGameMutationResult) => void;
   onError?: (error: Error) => void;
+  /** Pool mode: hides buy-in selection, uses defaultAmount, auto-assigns team, shows "Create Pool" labels */
+  isPoolModeEnabled?: boolean;
 }
 
 const STATUS_LABELS: Record<string, string> = {
@@ -49,6 +51,7 @@ export function CreateCustomGameSheet({
   onAmountChange,
   onSuccess,
   onError,
+  isPoolModeEnabled = false,
 }: CreateCustomGameSheetProps) {
   const t = useDubsTheme();
   const { wallet } = useDubs();
@@ -122,20 +125,24 @@ export function CreateCustomGameSheet({
 
   const effectiveAmount = selectedAmount;
   const playerCount = maxPlayers || 2;
-  const pot = effectiveAmount ? effectiveAmount * playerCount : 0;
+
+  // In pool mode, always use defaultAmount
+  const finalAmount = isPoolModeEnabled ? (defaultAmount ?? 0.1) : effectiveAmount;
+
+  const pot = finalAmount ? finalAmount * playerCount : 0;
   const winnerTakes = pot * (1 - fee / 100);
 
   const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
-  const canCreate = effectiveAmount !== null && effectiveAmount > 0 && !isMutating && mutation.status !== 'success';
+  const canCreate = finalAmount !== null && finalAmount > 0 && !isMutating && mutation.status !== 'success';
 
   const handleCreate = useCallback(async () => {
-    if (!effectiveAmount || !wallet.publicKey) return;
+    if (!finalAmount || !wallet.publicKey) return;
 
     try {
       await mutation.execute({
         playerWallet: wallet.publicKey.toBase58(),
         teamChoice: 'home',
-        wagerAmount: effectiveAmount,
+        wagerAmount: finalAmount,
         title,
         maxPlayers,
         metadata,
@@ -143,7 +150,7 @@ export function CreateCustomGameSheet({
     } catch {
       // Error is already captured in mutation state
     }
-  }, [effectiveAmount, wallet.publicKey, mutation.execute, title, maxPlayers, metadata]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [finalAmount, wallet.publicKey, mutation.execute, title, maxPlayers, metadata]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const statusLabel = STATUS_LABELS[mutation.status] || '';
 
@@ -173,84 +180,86 @@ export function CreateCustomGameSheet({
 
             {/* Header */}
             <View style={styles.header}>
-              <Text style={[styles.headerTitle, { color: t.text }]}>New Game</Text>
+              <Text style={[styles.headerTitle, { color: t.text }]}>{isPoolModeEnabled ? 'Create Pool' : 'New Game'}</Text>
               <TouchableOpacity onPress={onDismiss} activeOpacity={0.8}>
                 <Text style={[styles.closeButton, { color: t.textMuted }]}>{'\u2715'}</Text>
               </TouchableOpacity>
             </View>
 
-            {/* Buy-In Section */}
-            <View style={styles.section}>
-              <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Buy-In Amount</Text>
-              <View style={styles.chipsRow}>
-                {presetAmounts.map((amount) => {
-                  const active = !isCustom && selectedAmount === amount;
-                  return (
-                    <TouchableOpacity
-                      key={amount}
-                      style={[
-                        styles.chip,
-                        { borderColor: active ? t.accent : t.border },
-                        active && { backgroundColor: t.accent },
-                      ]}
-                      onPress={() => handlePresetSelect(amount)}
-                      activeOpacity={0.8}
-                    >
-                      <Text style={[styles.chipText, { color: active ? '#FFFFFF' : t.text }]}>
-                        {amount} SOL
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-                <TouchableOpacity
-                  style={[
-                    styles.chip,
-                    { borderColor: isCustom ? t.accent : t.border },
-                    isCustom && { backgroundColor: t.accent },
-                  ]}
-                  onPress={handleCustomSelect}
-                  activeOpacity={0.8}
-                >
-                  <Text style={[styles.chipText, { color: isCustom ? '#FFFFFF' : t.text }]}>
-                    Custom
-                  </Text>
-                </TouchableOpacity>
-              </View>
+            {/* Buy-In Section — hidden in pool mode (uses defaultAmount) */}
+            {!isPoolModeEnabled && (
+              <View style={styles.section}>
+                <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Buy-In Amount</Text>
+                <View style={styles.chipsRow}>
+                  {presetAmounts.map((amount) => {
+                    const active = !isCustom && selectedAmount === amount;
+                    return (
+                      <TouchableOpacity
+                        key={amount}
+                        style={[
+                          styles.chip,
+                          { borderColor: active ? t.accent : t.border },
+                          active && { backgroundColor: t.accent },
+                        ]}
+                        onPress={() => handlePresetSelect(amount)}
+                        activeOpacity={0.8}
+                      >
+                        <Text style={[styles.chipText, { color: active ? '#FFFFFF' : t.text }]}>
+                          {amount} SOL
+                        </Text>
+                      </TouchableOpacity>
+                    );
+                  })}
+                  <TouchableOpacity
+                    style={[
+                      styles.chip,
+                      { borderColor: isCustom ? t.accent : t.border },
+                      isCustom && { backgroundColor: t.accent },
+                    ]}
+                    onPress={handleCustomSelect}
+                    activeOpacity={0.8}
+                  >
+                    <Text style={[styles.chipText, { color: isCustom ? '#FFFFFF' : t.text }]}>
+                      Custom
+                    </Text>
+                  </TouchableOpacity>
+                </View>
 
-              {isCustom && (
-                <TextInput
-                  style={[styles.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }]}
-                  placeholder="Enter amount in SOL"
-                  placeholderTextColor={t.textDim}
-                  keyboardType="decimal-pad"
-                  value={customAmount}
-                  onChangeText={handleCustomAmountChange}
-                  autoFocus
-                />
-              )}
-            </View>
+                {isCustom && (
+                  <TextInput
+                    style={[styles.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }]}
+                    placeholder="Enter amount in SOL"
+                    placeholderTextColor={t.textDim}
+                    keyboardType="decimal-pad"
+                    value={customAmount}
+                    onChangeText={handleCustomAmountChange}
+                    autoFocus
+                  />
+                )}
+              </View>
+            )}
 
             {/* Summary Card */}
             <View style={[styles.summaryCard, { backgroundColor: t.surface, borderColor: t.border }]}>
               <View style={styles.summaryRow}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Your buy-in</Text>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Buy-in</Text>
                 <Text style={[styles.summaryValue, { color: t.text }]}>
-                  {effectiveAmount ? `${effectiveAmount} SOL` : '—'}
+                  {finalAmount ? `${finalAmount} SOL` : '—'}
                 </Text>
               </View>
               <View style={[styles.summarySep, { backgroundColor: t.border }]} />
               <View style={styles.summaryRow}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Players</Text>
-                <Text style={[styles.summaryValue, { color: t.text }]}>{playersLabel}</Text>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>{isPoolModeEnabled ? 'Max players' : 'Players'}</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{isPoolModeEnabled ? playerCount : playersLabel}</Text>
               </View>
               <View style={[styles.summarySep, { backgroundColor: t.border }]} />
               <View style={styles.summaryRow}>
-                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Winner Takes</Text>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>{isPoolModeEnabled ? 'Max pot' : 'Winner Takes'}</Text>
                 <View style={styles.winnerCol}>
                   <Text style={[styles.summaryValue, { color: t.success }]}>
-                    {effectiveAmount ? `${winnerTakes.toFixed(4)} SOL` : '—'}
+                    {finalAmount ? `${(finalAmount * playerCount * (1 - fee / 100)).toFixed(4)} SOL` : '—'}
                   </Text>
-                  {effectiveAmount ? (
+                  {finalAmount ? (
                     <Text style={[styles.feeNote, { color: t.textDim }]}>{fee}% platform fee</Text>
                   ) : null}
                 </View>
@@ -280,10 +289,12 @@ export function CreateCustomGameSheet({
                   <Text style={styles.ctaText}>{statusLabel}</Text>
                 </View>
               ) : mutation.status === 'success' ? (
-                <Text style={styles.ctaText}>{STATUS_LABELS.success}</Text>
+                <Text style={styles.ctaText}>{isPoolModeEnabled ? 'Pool Created!' : STATUS_LABELS.success}</Text>
               ) : (
                 <Text style={[styles.ctaText, !canCreate && { opacity: 0.5 }]}>
-                  {effectiveAmount ? `Create Game \u2014 ${effectiveAmount} SOL` : 'Select buy-in amount'}
+                  {isPoolModeEnabled
+                    ? `Create Pool \u2014 ${finalAmount} SOL`
+                    : effectiveAmount ? `Create Game \u2014 ${effectiveAmount} SOL` : 'Select buy-in amount'}
                 </Text>
               )}
             </TouchableOpacity>

package/src/ui/game/JoinGameSheet.tsx

@@ -30,6 +30,8 @@ export interface JoinGameSheetProps {
   /** Callbacks */
   onSuccess?: (result: JoinGameMutationResult) => void;
   onError?: (error: Error) => void;
+  /** Pool mode: hides team selection, auto-assigns team, shows "Join Pool" labels */
+  isPoolModeEnabled?: boolean;
 }
 
 const STATUS_LABELS: Record<string, string> = {
@@ -51,6 +53,7 @@ export function JoinGameSheet({
   awayColor = '#EF4444',
   onSuccess,
   onError,
+  isPoolModeEnabled = false,
 }: JoinGameSheetProps) {
   const t = useDubsTheme();
   const { wallet } = useDubs();
@@ -58,7 +61,7 @@ export function JoinGameSheet({
 
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
-  // For custom games the joiner is always away — no team selection needed.
+  // Pool mode and custom games auto-assign team — no team selection needed.
   // For sports/esports games the user picks a team.
   const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
 
@@ -76,7 +79,7 @@ export function JoinGameSheet({
   // Reset state when sheet opens
   useEffect(() => {
     if (visible) {
-      setSelectedTeam(isCustomGame ? 'away' : null);
+      setSelectedTeam(isPoolModeEnabled ? 'home' : isCustomGame ? 'away' : null);
       mutation.reset();
     }
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -173,14 +176,14 @@ export function JoinGameSheet({
 
             {/* Header */}
             <View style={styles.header}>
-              <Text style={[styles.headerTitle, { color: t.text }]}>Join Game</Text>
+              <Text style={[styles.headerTitle, { color: t.text }]}>{isPoolModeEnabled ? 'Join Pool' : '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 && (
+            {/* Team Selection — hidden in pool mode and custom games */}
+            {!isCustomGame && !isPoolModeEnabled && (
               <View style={styles.section}>
                 <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
                 <View style={styles.teamsRow}>
@@ -217,28 +220,44 @@ export function JoinGameSheet({
                 <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>
+              {isPoolModeEnabled ? (
+                <>
+                  <View style={styles.summaryRow}>
+                    <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Players in</Text>
+                    <Text style={[styles.summaryValue, { color: t.text }]}>{bettors.length}</Text>
+                  </View>
+                  <View style={[styles.summarySep, { backgroundColor: t.border }]} />
+                  <View style={styles.summaryRow}>
+                    <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Current pot</Text>
+                    <Text style={[styles.summaryValue, { color: t.success }]}>{totalPool} SOL</Text>
+                  </View>
+                </>
+              ) : (
+                <>
+                  <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>
+                <Text style={[styles.errorText, { color: t.textMuted }]}>{isPoolModeEnabled ? "You've already joined this pool." : "You've already joined this game."}</Text>
               </View>
             )}
 
@@ -265,14 +284,16 @@ export function JoinGameSheet({
                   <Text style={styles.ctaText}>{statusLabel}</Text>
                 </View>
               ) : mutation.status === 'success' ? (
-                <Text style={styles.ctaText}>{STATUS_LABELS.success}</Text>
+                <Text style={styles.ctaText}>{isPoolModeEnabled ? 'Joined!' : 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'}
+                    : isPoolModeEnabled
+                      ? `Join Pool \u2014 ${buyIn} SOL`
+                      : selectedTeam
+                        ? `Join Game \u2014 ${buyIn} SOL`
+                        : 'Pick a side to join'}
                 </Text>
               )}
             </TouchableOpacity>