@dubsdotapp/expo 0.5.14 → 0.5.16

package/package.json

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

package/src/hooks/index.ts

@@ -16,6 +16,10 @@ export { useAuth } from './useAuth';
 export type { UseAuthResult } from './useAuth';
 export { useUFCFightCard } from './useUFCFightCard';
 export { useUFCFighterDetail } from './useUFCFighterDetail';
+export { useHighlights } from './useHighlights';
+export type { HighlightVideo } from './useHighlights';
+export { useShorts } from './useShorts';
+export type { ShortVideo } from './useShorts';
 export { usePushNotifications } from './usePushNotifications';
 export type { PushNotificationStatus } from './usePushNotifications';
 export { useArcadePools } from './useArcadePools';

package/src/hooks/useHighlights.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useDubs } from '../provider';
+import type { QueryResult } from '../types';
+
+export interface HighlightVideo {
+  videoId: string;
+  title: string;
+  channelTitle: string;
+  thumbnail: string;
+  publishedAt: string;
+}
+
+export function useHighlights(league?: string, limit: number = 8): QueryResult<HighlightVideo[]> {
+  const { client } = useDubs();
+  const [data, setData] = useState<HighlightVideo[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams();
+      if (league) qs.set('league', league);
+      qs.set('limit', String(limit));
+      const res = await (client as any).request('GET', `/highlights?${qs.toString()}`);
+      setData(res.videos || []);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, league, limit]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}

package/src/hooks/useShorts.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useDubs } from '../provider';
+import type { QueryResult } from '../types';
+
+export interface ShortVideo {
+  videoId: string;
+  title: string;
+  channelTitle: string;
+  thumbnail: string;
+  publishedAt: string;
+}
+
+export function useShorts(league: string = 'NBA', limit: number = 20): QueryResult<ShortVideo[]> {
+  const { client } = useDubs();
+  const [data, setData] = useState<ShortVideo[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams({ league, limit: String(limit) });
+      const res = await (client as any).request('GET', `/shorts?${qs.toString()}`);
+      setData(res.videos || []);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, league, limit]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+}

package/src/index.ts

@@ -127,8 +127,12 @@ export type {
   ArcadeCountdown,
   UseArcadeBridgeOptions,
   UseArcadeBridgeResult,
+  HighlightVideo,
+  ShortVideo,
 } from './hooks';
 
+export { useHighlights, useShorts } from './hooks';
+
 // UI
 export { AuthGate, ConnectWalletScreen, ConnectWalletButton, UserProfileCard, SettingsSheet, UserProfileSheet, useDubsTheme, mergeTheme } from './ui';
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, ConnectWalletButtonProps, AuthGateConnectWalletProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';

package/src/ui/game/JoinGameSheet.tsx

@@ -27,9 +27,10 @@ export interface JoinGameSheetProps {
   ImageComponent?: React.ComponentType<any>;
   /** Custom short-name function for team labels */
   shortName?: (name: string | null) => string;
-  /** Override team colors (default blue/red) */
+  /** Override team colors (default blue/red/green) */
   homeColor?: string;
   awayColor?: string;
+  drawColor?: string;
   /** Callbacks */
   onSuccess?: (result: JoinGameMutationResult) => void;
   onError?: (error: Error) => void;
@@ -72,6 +73,7 @@ export function JoinGameSheet({
   shortName,
   homeColor = '#3B82F6',
   awayColor = '#EF4444',
+  drawColor = '#F59E0B',
   onSuccess,
   onError,
   onTeamSelect,
@@ -151,21 +153,35 @@ export function JoinGameSheet({
   const totalPool = game.totalPool || 0;
   const homePool = game.homePool || 0;
   const awayPool = game.awayPool || 0;
+  const drawPool = game.drawPool || 0;
   const buyIn = game.buyIn;
 
+  // Show draw option if any bettor is on draw, or if the league supports it
+  const drawBettors = bettors.filter(b => b.team === 'draw');
+  const hasDrawOption = drawPool > 0 || drawBettors.length > 0 ||
+    (game.league && ['English Premier League', 'EPL', 'MLS', 'La Liga', 'Serie A', 'Bundesliga', 'Ligue 1'].some(l => (game.league || '').includes(l)));
+
   const poolAfterJoin = totalPool + wager;
 
-  const { homeOdds, awayOdds, homeBets, awayBets } = useMemo(() => {
+  const { homeOdds, awayOdds, drawOdds, homeBets, awayBets, drawBets } = useMemo(() => {
+    const homeBetsCount = bettors.filter(b => b.team === 'home').length;
+    const awayBetsCount = bettors.filter(b => b.team === 'away').length;
+    const drawBetsCount = bettors.filter(b => b.team === 'draw').length;
     const newPool = totalPool + wager;
+    const newHome = homePool + (selectedTeam === 'home' ? wager : 0);
+    const newAway = awayPool + (selectedTeam === 'away' ? wager : 0);
+    const newDraw = drawPool + (selectedTeam === 'draw' ? wager : 0);
     return {
-      homeOdds: homePool > 0 ? (newPool / (homePool + (selectedTeam === 'home' ? wager : 0))).toFixed(2) : '—',
-      awayOdds: awayPool > 0 ? (newPool / (awayPool + (selectedTeam === 'away' ? wager : 0))).toFixed(2) : '—',
-      homeBets: bettors.filter(b => b.team === 'home').length,
-      awayBets: bettors.filter(b => b.team === 'away').length,
+      homeOdds: newHome > 0 ? (newPool / newHome).toFixed(2) : '—',
+      awayOdds: newAway > 0 ? (newPool / newAway).toFixed(2) : '—',
+      drawOdds: newDraw > 0 ? (newPool / newDraw).toFixed(2) : '—',
+      homeBets: homeBetsCount,
+      awayBets: awayBetsCount,
+      drawBets: drawBetsCount,
     };
-  }, [totalPool, homePool, awayPool, bettors, wager, selectedTeam]);
+  }, [totalPool, homePool, awayPool, drawPool, bettors, wager, selectedTeam]);
 
-  const selectedOdds = selectedTeam === 'home' ? homeOdds : selectedTeam === 'away' ? awayOdds : '—';
+  const selectedOdds = selectedTeam === 'home' ? homeOdds : selectedTeam === 'away' ? awayOdds : selectedTeam === 'draw' ? drawOdds : '—';
   const potentialWinnings = selectedOdds !== '—' ? formatSol(parseFloat(selectedOdds) * wager) : '—';
 
   const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
@@ -298,15 +314,28 @@ export function JoinGameSheet({
                     t={t}
                   />
                 </View>
+                {hasDrawOption && (
+                  <View style={styles.drawRow}>
+                    <TeamButton
+                      name="Draw"
+                      odds={drawOdds}
+                      bets={drawBets}
+                      color={drawColor}
+                      selected={selectedTeam === 'draw'}
+                      onPress={() => { setSelectedTeam('draw' as any); onTeamSelect?.('draw' as any); }}
+                      t={t}
+                    />
+                  </View>
+                )}
               </View>
             )}
 
             {/* Already joined — show which side */}
             {alreadyJoined && myBet && (
-              <View style={[styles.myBetCard, { backgroundColor: (myBet.team === 'home' ? homeColor : awayColor) + '15', borderColor: myBet.team === 'home' ? homeColor : awayColor }]}>
-                <Text style={[styles.myBetLabel, { color: myBet.team === 'home' ? homeColor : awayColor }]}>YOUR BET</Text>
+              <View style={[styles.myBetCard, { backgroundColor: (myBet.team === 'home' ? homeColor : myBet.team === 'away' ? awayColor : drawColor) + '15', borderColor: myBet.team === 'home' ? homeColor : myBet.team === 'away' ? awayColor : drawColor }]}>
+                <Text style={[styles.myBetLabel, { color: myBet.team === 'home' ? homeColor : myBet.team === 'away' ? awayColor : drawColor }]}>YOUR BET</Text>
                 <Text style={[styles.myBetTeam, { color: t.text }]}>
-                  {myBet.team === 'home' ? homeName : awayName}
+                  {myBet.team === 'home' ? homeName : myBet.team === 'away' ? awayName : 'Draw'}
                 </Text>
                 <Text style={[styles.myBetAmount, { color: t.textMuted }]}>
                   {formatSol(myBet.amount)} SOL
@@ -536,6 +565,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 12,
   },
+  drawRow: {
+    marginTop: 8,
+  },
   summaryCard: {
     marginTop: 20,
     borderRadius: 16,