@dubsdotapp/expo 0.5.12 → 0.5.14

package/package.json

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

package/src/ui/game/CreateGameSheet.tsx

@@ -17,6 +17,7 @@ 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;
@@ -198,59 +199,30 @@ export function CreateGameSheet({
               </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 }]}
+                <TeamButton
+                  name={homeName}
+                  imageUrl={opponents[0]?.imageUrl}
+                  odds="—"
+                  bets={0}
+                  color={homeColor}
+                  selected={selectedTeam === 'home'}
                   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 }]}
+                  t={t}
+                />
+                <TeamButton
+                  name={awayName}
+                  imageUrl={opponents[1]?.imageUrl}
+                  odds="—"
+                  bets={0}
+                  color={awayColor}
+                  selected={selectedTeam === 'away'}
                   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>
+                  t={t}
+                />
               </View>
             </View>
 
@@ -329,21 +301,9 @@ const styles = StyleSheet.create({
   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' },
+  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 },

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>
+      {odds !== '—' && <Text style={[styles.teamOdds, { color }]}>{odds}x</Text>}
+      {bets > 0 && <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',
+  },
+});