@dubsdotapp/expo 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.6",
+  "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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import {
   View,
   Text,
+  Image,
   TouchableOpacity,
   ActivityIndicator,
   Modal,
@@ -15,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;
@@ -32,6 +34,12 @@ export interface JoinGameSheetProps {
   onError?: (error: Error) => void;
   /** Called when the user taps a team card (useful for sound/haptics) */
   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;
 }
@@ -45,6 +53,16 @@ const STATUS_LABELS: Record<string, string> = {
 
 const CUSTOM_GAME_MODE = 6;
 
+function formatSol(n: number): string {
+  // Remove trailing zeros: 0.06000000 → 0.06, 1.00000 → 1
+  return parseFloat(n.toFixed(9)).toString();
+}
+
+function toPng(url: string | null | undefined): string | null {
+  if (!url) return null;
+  return url.replace('/svg?', '/png?');
+}
+
 export function JoinGameSheet({
   visible,
   onDismiss,
@@ -56,6 +74,9 @@ export function JoinGameSheet({
   onSuccess,
   onError,
   onTeamSelect,
+  onJoinSuccess,
+  onSliderTick,
+  maxWager = 5,
   isPoolModeEnabled = false,
 }: JoinGameSheetProps) {
   const t = useDubsTheme();
@@ -64,11 +85,13 @@ export function JoinGameSheet({
 
   const isCustomGame = game.gameMode === CUSTOM_GAME_MODE;
 
-  // 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);
+  const [wager, setWager] = useState(game.buyIn);
+  const [showSuccess, setShowSuccess] = useState(false);
 
   const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const successScale = useRef(new Animated.Value(0)).current;
+  const successOpacity = useRef(new Animated.Value(0)).current;
 
   // Animate overlay on visibility change
   useEffect(() => {
@@ -83,17 +106,32 @@ export function JoinGameSheet({
   useEffect(() => {
     if (visible) {
       setSelectedTeam(isPoolModeEnabled ? 'home' : isCustomGame ? 'away' : null);
+      setWager(game.buyIn);
+      setShowSuccess(false);
+      successScale.setValue(0);
+      successOpacity.setValue(0);
       mutation.reset();
     }
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Auto-dismiss on success
+  // Handle success with animation
   useEffect(() => {
     if (mutation.status === 'success' && mutation.data) {
+      setShowSuccess(true);
       onSuccess?.(mutation.data);
+      onJoinSuccess?.(mutation.data);
+
+      // Animate success
+      Animated.parallel([
+        Animated.spring(successScale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true }),
+        Animated.timing(successOpacity, { toValue: 1, duration: 300, useNativeDriver: true }),
+      ]).start();
+
       const timer = setTimeout(() => {
-        onDismiss();
-      }, 1500);
+        Animated.timing(successOpacity, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+          onDismiss();
+        });
+      }, 2500);
       return () => clearTimeout(timer);
     }
   }, [mutation.status, mutation.data]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -114,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 !== '—' ? (parseFloat(selectedOdds) * buyIn).toFixed(4) : '—';
+  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');
@@ -146,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] || '';
 
@@ -166,6 +208,19 @@ export function JoinGameSheet({
         <TouchableOpacity style={styles.overlayTap} activeOpacity={1} onPress={onDismiss} />
       </Animated.View>
 
+      {/* Success overlay */}
+      {showSuccess && (
+        <View style={styles.successOverlay}>
+          <Animated.View style={[styles.successContent, { opacity: successOpacity, transform: [{ scale: successScale }] }]}>
+            <Text style={styles.successEmoji}>🎉</Text>
+            <Text style={styles.successTitle}>You're in!</Text>
+            <Text style={styles.successSub}>
+              {formatSol(buyIn)} SOL on {selectedName}
+            </Text>
+          </Animated.View>
+        </View>
+      )}
+
       <KeyboardAvoidingView
         style={styles.keyboardView}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
@@ -185,6 +240,34 @@ export function JoinGameSheet({
               </TouchableOpacity>
             </View>
 
+            {/* Bettors row */}
+            {bettors.length > 0 && (
+              <View style={styles.bettorsSection}>
+                <Text style={[styles.bettorsLabel, { color: t.textMuted }]}>
+                  {bettors.length} {bettors.length === 1 ? 'player' : 'players'} in this game
+                </Text>
+                <View style={styles.bettorsRow}>
+                  {bettors.slice(0, 6).map((b, i) => {
+                    const pngUrl = toPng(b.avatar);
+                    return (
+                      <View key={b.wallet} style={[styles.bettorCircle, { backgroundColor: ['#EF4444','#3B82F6','#22C55E','#F59E0B','#A855F7','#EC4899'][i % 6] }]}>
+                        {pngUrl ? (
+                          <Image source={{ uri: pngUrl }} style={styles.bettorImg} />
+                        ) : (
+                          <Text style={styles.bettorInitial}>{(b.username ?? b.wallet).charAt(0).toUpperCase()}</Text>
+                        )}
+                      </View>
+                    );
+                  })}
+                  {bettors.length > 6 && (
+                    <View style={[styles.bettorCircle, { backgroundColor: '#2C2C2E' }]}>
+                      <Text style={styles.bettorOverflow}>+{bettors.length - 6}</Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            )}
+
             {/* Team Selection — hidden in pool mode and custom games */}
             {!isCustomGame && !isPoolModeEnabled && (
               <View style={styles.section}>
@@ -216,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 }]}>{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 ? (
@@ -232,7 +330,7 @@ export function JoinGameSheet({
                   <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>
+                    <Text style={[styles.summaryValue, { color: t.success }]}>{formatSol(totalPool)} SOL</Text>
                   </View>
                 </>
               ) : (
@@ -244,7 +342,7 @@ export function JoinGameSheet({
                   <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>
+                    <Text style={[styles.summaryValue, { color: t.text }]}>{formatSol(poolAfterJoin)} SOL</Text>
                   </View>
                   <View style={[styles.summarySep, { backgroundColor: t.border }]} />
                   <View style={styles.summaryRow}>
@@ -293,9 +391,9 @@ export function JoinGameSheet({
                   {alreadyJoined
                     ? 'Already Joined'
                     : isPoolModeEnabled
-                      ? `Join Pool \u2014 ${buyIn} SOL`
+                      ? `Join Pool \u2014 ${formatSol(wager)} SOL`
                       : selectedTeam
-                        ? `Join Game \u2014 ${buyIn} SOL`
+                        ? `Join Game \u2014 ${formatSol(wager)} SOL`
                         : 'Pick a side to join'}
                 </Text>
               )}
@@ -389,6 +487,70 @@ const styles = StyleSheet.create({
     fontSize: 20,
     padding: 4,
   },
+
+  // Bettors row
+  bettorsSection: {
+    paddingBottom: 12,
+    gap: 8,
+  },
+  bettorsLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  bettorsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  bettorCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  bettorImg: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+  },
+  bettorInitial: {
+    color: '#FFF',
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  bettorOverflow: {
+    color: '#8E8E93',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+
+  // Success overlay
+  successOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.85)',
+  },
+  successContent: {
+    alignItems: 'center',
+    gap: 12,
+  },
+  successEmoji: {
+    fontSize: 64,
+  },
+  successTitle: {
+    color: '#FFFFFF',
+    fontSize: 28,
+    fontWeight: '900',
+  },
+  successSub: {
+    color: '#8E8E93',
+    fontSize: 16,
+  },
+
   section: {
     gap: 12,
     paddingTop: 8,
@@ -401,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';