@dubsdotapp/expo 0.5.8 → 0.5.10

package/package.json

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

package/src/ui/game/JoinGameSheet.tsx

@@ -169,14 +169,15 @@ export function JoinGameSheet({
 
   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 myBet = useMemo(() => {
+    if (!wallet.publicKey) return null;
     const addr = wallet.publicKey.toBase58();
-    return bettors.some(b => b.wallet === addr);
+    return bettors.find(b => b.wallet === addr) ?? null;
   }, [bettors, wallet.publicKey]);
 
+  const alreadyJoined = myBet !== null;
+
   const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
   const canJoin = selectedTeam !== null && !isMutating && mutation.status !== 'success' && !alreadyJoined;
 
@@ -269,7 +270,7 @@ export function JoinGameSheet({
             )}
 
             {/* Team Selection — hidden in pool mode and custom games */}
-            {!isCustomGame && !isPoolModeEnabled && (
+            {!isCustomGame && !isPoolModeEnabled && !alreadyJoined && (
               <View style={styles.section}>
                 <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
                 <View style={styles.teamsRow}>
@@ -299,18 +300,16 @@ export function JoinGameSheet({
               </View>
             )}
 
-            {/* SOL Slider */}
-            {selectedTeam && !isPoolModeEnabled && (
-              <View style={styles.sliderSection}>
-                <SolSlider
-                  value={wager}
-                  min={game.buyIn}
-                  max={maxWager}
-                  step={0.01}
-                  accentColor={selectedTeam === 'home' ? homeColor : awayColor}
-                  onValueChange={setWager}
-                  onTick={onSliderTick}
-                />
+            {/* 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>
+                <Text style={[styles.myBetTeam, { color: t.text }]}>
+                  {myBet.team === 'home' ? homeName : awayName}
+                </Text>
+                <Text style={[styles.myBetAmount, { color: t.textMuted }]}>
+                  {formatSol(myBet.amount)} SOL
+                </Text>
               </View>
             )}
 
@@ -335,11 +334,6 @@ export function JoinGameSheet({
                 </>
               ) : (
                 <>
-                  <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 }]}>{formatSol(poolAfterJoin)} SOL</Text>
@@ -355,6 +349,19 @@ export function JoinGameSheet({
               )}
             </View>
 
+            {/* SOL Slider — sits right below summary card */}
+            {selectedTeam && !isPoolModeEnabled && !alreadyJoined && (
+              <SolSlider
+                value={wager}
+                min={game.buyIn}
+                max={maxWager}
+                step={0.01}
+                accentColor={selectedTeam === 'home' ? homeColor : awayColor}
+                onValueChange={setWager}
+                onTick={onSliderTick}
+              />
+            )}
+
             {/* Already Joined Notice */}
             {alreadyJoined && (
               <View style={[styles.errorBox, { backgroundColor: t.surface, borderColor: t.border }]}>
@@ -563,11 +570,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 12,
   },
-  sliderSection: {
-    marginTop: 16,
-  },
   summaryCard: {
-    marginTop: 12,
+    marginTop: 20,
     borderRadius: 16,
     borderWidth: 1,
     overflow: 'hidden',
@@ -590,6 +594,27 @@ const styles = StyleSheet.create({
     height: 1,
     marginHorizontal: 16,
   },
+  myBetCard: {
+    marginTop: 16,
+    borderRadius: 14,
+    borderWidth: 1.5,
+    padding: 16,
+    alignItems: 'center',
+    gap: 4,
+  },
+  myBetLabel: {
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 1.5,
+  },
+  myBetTeam: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  myBetAmount: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
   errorBox: {
     marginTop: 16,
     borderRadius: 12,

package/src/ui/game/SolSlider.tsx

@@ -104,14 +104,6 @@ export function SolSlider({
 
   return (
     <View style={styles.container}>
-      {/* Value display */}
-      <View style={styles.valueRow}>
-        <Text style={[styles.valueText, { color: accent }]}>
-          {parseFloat(value.toFixed(4))}
-        </Text>
-        <Text style={[styles.solLabel, { color: accent }]}>SOL</Text>
-      </View>
-
       {/* Track */}
       <View
         ref={trackRef}
@@ -170,25 +162,7 @@ export function SolSlider({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-  },
-  valueRow: {
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    justifyContent: 'center',
-    marginBottom: 16,
-    gap: 4,
-  },
-  valueText: {
-    fontSize: 36,
-    fontWeight: '900',
-    letterSpacing: -1,
-    fontVariant: ['tabular-nums'],
-  },
-  solLabel: {
-    fontSize: 16,
-    fontWeight: '700',
-    opacity: 0.6,
+    paddingVertical: 4,
   },
   trackContainer: {
     height: THUMB_SIZE + 16,