@dubsdotapp/expo 0.5.7 → 0.5.8

package/package.json

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

package/src/index.ts

@@ -134,7 +134,8 @@ export { AuthGate, ConnectWalletScreen, ConnectWalletButton, UserProfileCard, Se
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, ConnectWalletButtonProps, AuthGateConnectWalletProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet } from './ui';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './ui';
+export type { SolSliderProps } from './ui';
 export type {
   GamePosterProps,
   LivePoolsCardProps,

package/src/ui/game/JoinGameSheet.tsx

@@ -16,6 +16,7 @@ import { useDubs } from '../../provider';
 import { useJoinGame } from '../../hooks/useJoinGame';
 import type { JoinGameMutationResult } from '../../hooks/useJoinGame';
 import type { GameDetail } from '../../types';
+import { SolSlider } from './SolSlider';
 
 export interface JoinGameSheetProps {
   visible: boolean;
@@ -35,6 +36,10 @@ export interface JoinGameSheetProps {
   onTeamSelect?: (team: 'home' | 'away') => void;
   /** Called when the join succeeds (useful for success sound/animation) */
   onJoinSuccess?: (result: JoinGameMutationResult) => void;
+  /** Called on each slider tick (useful for haptics/sound) */
+  onSliderTick?: (value: number) => void;
+  /** Max wager in SOL (default 5) */
+  maxWager?: number;
   /** Pool mode: hides team selection, auto-assigns team, shows "Join Pool" labels */
   isPoolModeEnabled?: boolean;
 }
@@ -70,6 +75,8 @@ export function JoinGameSheet({
   onError,
   onTeamSelect,
   onJoinSuccess,
+  onSliderTick,
+  maxWager = 5,
   isPoolModeEnabled = false,
 }: JoinGameSheetProps) {
   const t = useDubsTheme();
@@ -79,6 +86,7 @@ export function JoinGameSheet({
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
   const [selectedTeam, setSelectedTeam] = useState<'home' | 'away' | null>(null);
+  const [wager, setWager] = useState(game.buyIn);
   const [showSuccess, setShowSuccess] = useState(false);
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
@@ -98,6 +106,7 @@ export function JoinGameSheet({
   useEffect(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? 'home' : isCustomGame ? 'away' : null);
+      setWager(game.buyIn);
       setShowSuccess(false);
       successScale.setValue(0);
       successOpacity.setValue(0);
@@ -143,16 +152,20 @@ export function JoinGameSheet({
   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 + wager;
+
+  const { homeOdds, awayOdds, homeBets, awayBets } = useMemo(() => {
+    const newPool = totalPool + wager;
+    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,
+    };
+  }, [totalPool, homePool, awayPool, bettors, wager, selectedTeam]);
 
-  const poolAfterJoin = totalPool + buyIn;
   const selectedOdds = selectedTeam === 'home' ? homeOdds : selectedTeam === 'away' ? awayOdds : '—';
-  const potentialWinnings = selectedOdds !== '—' ? formatSol(parseFloat(selectedOdds) * buyIn) : '—';
+  const potentialWinnings = selectedOdds !== '—' ? formatSol(parseFloat(selectedOdds) * wager) : '—';
 
   const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
   const awayName = shortName ? shortName(opponents[1]?.name) : (opponents[1]?.name || 'Away');
@@ -175,12 +188,12 @@ export function JoinGameSheet({
         playerWallet: wallet.publicKey.toBase58(),
         gameId: game.gameId,
         teamChoice: selectedTeam,
-        amount: buyIn,
+        amount: wager,
       });
     } catch {
       // Error is already captured in mutation state
     }
-  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, buyIn]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedTeam, wallet.publicKey, mutation.execute, game.gameId, wager]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const statusLabel = STATUS_LABELS[mutation.status] || '';
 
@@ -286,11 +299,26 @@ 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}
+                />
+              </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 }]}>{formatSol(buyIn)} SOL</Text>
+                <Text style={[styles.summaryLabel, { color: t.textMuted }]}>Your wager</Text>
+                <Text style={[styles.summaryValue, { color: t.text }]}>{formatSol(wager)} SOL</Text>
               </View>
               <View style={[styles.summarySep, { backgroundColor: t.border }]} />
               {isPoolModeEnabled ? (
@@ -363,9 +391,9 @@ export function JoinGameSheet({
                   {alreadyJoined
                     ? 'Already Joined'
                     : isPoolModeEnabled
-                      ? `Join Pool \u2014 ${formatSol(buyIn)} SOL`
+                      ? `Join Pool \u2014 ${formatSol(wager)} SOL`
                       : selectedTeam
-                        ? `Join Game \u2014 ${formatSol(buyIn)} SOL`
+                        ? `Join Game \u2014 ${formatSol(wager)} SOL`
                         : 'Pick a side to join'}
                 </Text>
               )}
@@ -535,8 +563,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 12,
   },
+  sliderSection: {
+    marginTop: 16,
+  },
   summaryCard: {
-    marginTop: 20,
+    marginTop: 12,
     borderRadius: 16,
     borderWidth: 1,
     overflow: 'hidden',

package/src/ui/game/SolSlider.tsx

@@ -0,0 +1,259 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  PanResponder,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { useDubsTheme } from '../theme';
+
+const THUMB_SIZE = 32;
+const TRACK_HEIGHT = 6;
+const TICK_INTERVAL = 0.01; // haptic every 0.01 SOL
+
+export interface SolSliderProps {
+  /** Current value in SOL */
+  value: number;
+  /** Min SOL (default 0.01) */
+  min?: number;
+  /** Max SOL (default 5) */
+  max?: number;
+  /** Step size in SOL (default 0.01) */
+  step?: number;
+  /** Accent color for filled track + thumb glow */
+  accentColor?: string;
+  /** Called on every drag frame */
+  onValueChange: (value: number) => void;
+  /** Called when user lifts finger */
+  onSlidingComplete?: (value: number) => void;
+  /** Called on each tick for haptics/sound */
+  onTick?: (value: number) => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export function SolSlider({
+  value,
+  min = 0.01,
+  max = 5,
+  step = 0.01,
+  accentColor,
+  onValueChange,
+  onSlidingComplete,
+  onTick,
+  disabled = false,
+}: SolSliderProps) {
+  const t = useDubsTheme();
+  const accent = accentColor || t.accent;
+  const trackRef = useRef<View>(null);
+  const trackWidth = useRef(0);
+  const lastTickValue = useRef(value);
+
+  const clamp = (v: number) => {
+    const stepped = Math.round(v / step) * step;
+    return Math.max(min, Math.min(max, parseFloat(stepped.toFixed(4))));
+  };
+
+  const valueToPosition = (v: number) => {
+    const ratio = (v - min) / (max - min);
+    return ratio * trackWidth.current;
+  };
+
+  const positionToValue = (x: number) => {
+    const ratio = Math.max(0, Math.min(1, x / trackWidth.current));
+    return clamp(min + ratio * (max - min));
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (_, gestureState) => {
+        lastTickValue.current = value;
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        // Calculate position relative to track
+        const touchX = gestureState.moveX;
+        trackRef.current?.measureInWindow((trackX) => {
+          const relX = touchX - trackX;
+          const newVal = positionToValue(relX);
+
+          // Fire tick if we crossed a tick boundary
+          const tickDelta = Math.abs(newVal - lastTickValue.current);
+          if (tickDelta >= TICK_INTERVAL) {
+            lastTickValue.current = newVal;
+            onTick?.(newVal);
+          }
+
+          onValueChange(newVal);
+        });
+      },
+      onPanResponderRelease: () => {
+        onSlidingComplete?.(value);
+      },
+    })
+  ).current;
+
+  const ratio = (value - min) / (max - min);
+  const filledWidth = `${ratio * 100}%`;
+
+  // Snap points for visual markers
+  const markers = [min, max * 0.25, max * 0.5, max * 0.75, max];
+
+  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}
+        style={styles.trackContainer}
+        onLayout={(e) => { trackWidth.current = e.nativeEvent.layout.width; }}
+        {...panResponder.panHandlers}
+      >
+        {/* Background track */}
+        <View style={[styles.track, { backgroundColor: '#2C2C2E' }]}>
+          {/* Filled track */}
+          <View style={[styles.trackFilled, { width: filledWidth as any, backgroundColor: accent }]} />
+        </View>
+
+        {/* Tick markers */}
+        <View style={styles.markerRow}>
+          {markers.map((m, i) => {
+            const mRatio = (m - min) / (max - min);
+            return (
+              <View
+                key={i}
+                style={[
+                  styles.marker,
+                  {
+                    left: `${mRatio * 100}%`,
+                    backgroundColor: value >= m ? accent : '#3A3A3C',
+                  },
+                ]}
+              />
+            );
+          })}
+        </View>
+
+        {/* Thumb */}
+        <View
+          style={[
+            styles.thumb,
+            {
+              left: filledWidth as any,
+              backgroundColor: accent,
+              shadowColor: accent,
+            },
+          ]}
+        >
+          <View style={styles.thumbInner} />
+        </View>
+      </View>
+
+      {/* Min/Max labels */}
+      <View style={styles.rangeRow}>
+        <Text style={styles.rangeText}>{min}</Text>
+        <Text style={styles.rangeText}>{max} SOL</Text>
+      </View>
+    </View>
+  );
+}
+
+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,
+  },
+  trackContainer: {
+    height: THUMB_SIZE + 16,
+    justifyContent: 'center',
+    paddingHorizontal: THUMB_SIZE / 2,
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: 'hidden',
+  },
+  trackFilled: {
+    height: '100%',
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  markerRow: {
+    position: 'absolute',
+    left: THUMB_SIZE / 2,
+    right: THUMB_SIZE / 2,
+    height: TRACK_HEIGHT,
+    top: (THUMB_SIZE + 16 - TRACK_HEIGHT) / 2,
+  },
+  marker: {
+    position: 'absolute',
+    width: 3,
+    height: 12,
+    borderRadius: 1.5,
+    top: -3,
+    marginLeft: -1.5,
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    top: 8,
+    marginLeft: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...Platform.select({
+      ios: {
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.6,
+        shadowRadius: 10,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  thumbInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: '#FFFFFF',
+  },
+  rangeRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: THUMB_SIZE / 2,
+    marginTop: 4,
+  },
+  rangeText: {
+    color: '#5A5A5E',
+    fontSize: 11,
+    fontWeight: '600',
+  },
+});

package/src/ui/game/index.ts

@@ -20,3 +20,5 @@ export { EnterArcadePoolSheet } from './EnterArcadePoolSheet';
 export type { EnterArcadePoolSheetProps } from './EnterArcadePoolSheet';
 export { ArcadeLeaderboardSheet } from './ArcadeLeaderboardSheet';
 export type { ArcadeLeaderboardSheetProps } from './ArcadeLeaderboardSheet';
+export { SolSlider } from './SolSlider';
+export type { SolSliderProps } from './SolSlider';

package/src/ui/index.ts

@@ -14,7 +14,7 @@ export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets
-export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet } from './game';
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton, CreateCustomGameSheet, JoinGameSheet, ClaimPrizeSheet, ClaimButton, EnterArcadePoolSheet, ArcadeLeaderboardSheet, SolSlider } from './game';
 export type {
   GamePosterProps,
   LivePoolsCardProps,
@@ -27,4 +27,5 @@ export type {
   ClaimButtonProps,
   EnterArcadePoolSheetProps,
   ArcadeLeaderboardSheetProps,
+  SolSliderProps,
 } from './game';