@dubsdotapp/expo 0.5.4 → 0.5.6

package/package.json

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

package/src/hooks/useArcadeBridge.ts

@@ -94,6 +94,10 @@ export function useArcadeBridge({
   const sessionTokenRef = useRef<string | null>(null);
   const gameStartTimeRef = useRef<number>(0);
 
+  // Keep canPlay in a ref so TAP_PLAY handler always sees the latest value
+  const canPlayRef = useRef(canPlay);
+  canPlayRef.current = canPlay;
+
   const [lastResult, setLastResult] = useState<SubmitScoreResult | null>(null);
   const [bridgeLoading, setBridgeLoading] = useState(false);
 
@@ -139,12 +143,13 @@ export function useArcadeBridge({
         return; // non-JSON postMessages from the game's own code — ignore
       }
 
-      // Only process messages from our bridge protocol
-      if (data.dubsArcade !== PROTOCOL_VERSION) return;
+      // If dubsArcade version is present it must match — if absent, accept anyway
+      // (backward-compat: old game builds don't include the envelope yet)
+      if (data.dubsArcade !== undefined && data.dubsArcade !== PROTOCOL_VERSION) return;
 
       switch (data.type) {
         case 'TAP_PLAY': {
-          if (canPlay) {
+          if (canPlayRef.current) {
             triggerPlay();
           }
           return;
@@ -186,7 +191,7 @@ export function useArcadeBridge({
           return;
       }
     },
-    [canPlay, triggerPlay, submitScore, onScoreSubmitted, onError],
+    [triggerPlay, submitScore, onScoreSubmitted, onError],
   );
 
   return { webviewRef, handleMessage, triggerPlay, lastResult, bridgeLoading };

package/src/index.ts

@@ -131,7 +131,7 @@ export type {
 
 // UI
 export { AuthGate, ConnectWalletScreen, ConnectWalletButton, UserProfileCard, SettingsSheet, UserProfileSheet, useDubsTheme, mergeTheme } from './ui';
-export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, ConnectWalletButtonProps, UserProfileCardProps, SettingsSheetProps, UserProfileSheetProps, DubsTheme } from './ui';
+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';

package/src/ui/AuthGate.tsx

@@ -31,6 +31,15 @@ export interface RegistrationScreenProps {
   client: DubsClient;
 }
 
+export interface ConnectWalletScreenProps {
+  /** Call this to trigger the wallet connection flow */
+  onConnect: () => void;
+  /** True while the wallet is connecting/signing */
+  connecting: boolean;
+  /** Error from a failed connection attempt */
+  error: Error | null;
+}
+
 export interface AuthGateProps {
   children: React.ReactNode;
   onSaveToken: (token: string | null) => void | Promise<void>;
@@ -38,6 +47,12 @@ export interface AuthGateProps {
   renderLoading?: (status: AuthStatus) => React.ReactNode;
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  /**
+   * Render your own connect-wallet screen.
+   * Receives { onConnect, connecting, error }.
+   * If omitted, the default ConnectWalletScreen is shown.
+   */
+  renderConnectWallet?: (props: ConnectWalletScreenProps) => React.ReactNode;
   appName?: string;
   /** Override accent color for registration screens (from developer UI config) */
   accentColor?: string;
@@ -52,6 +67,7 @@ export function AuthGate({
   renderLoading,
   renderError,
   renderRegistration,
+  renderConnectWallet,
   appName = 'Dubs',
   accentColor,
 }: AuthGateProps) {
@@ -162,6 +178,17 @@ export function AuthGate({
     return <DefaultErrorScreen error={auth.error} onRetry={retry} appName={appName} accentColor={accentColor} />;
   }
 
+  // idle = waiting for user to connect — show connect wallet screen
+  if (auth.status === 'idle') {
+    const connectProps: ConnectWalletScreenProps = {
+      onConnect: auth.authenticate,
+      connecting: false,
+      error: null,
+    };
+    if (renderConnectWallet) return <>{renderConnectWallet(connectProps)}</>;
+    // Fall through to default loading (existing behaviour if no renderConnectWallet)
+  }
+
   if (renderLoading) return <>{renderLoading(auth.status)}</>;
   return <DefaultLoadingScreen status={auth.status} appName={appName} accentColor={accentColor} />;
 }

package/src/ui/ConnectWalletButton.tsx

@@ -1,112 +1,107 @@
 import React from 'react';
 import {
-  Text,
   TouchableOpacity,
+  Text,
   ActivityIndicator,
   StyleSheet,
   View,
-  type ViewStyle,
 } from 'react-native';
+import { useAuth } from '../hooks/useAuth';
 import { useDubsTheme } from './theme';
 
 export interface ConnectWalletButtonProps {
-  /** Called when the user taps the button */
-  onConnect: () => void | Promise<void>;
-  /** Show a loading spinner while connecting */
-  connecting?: boolean;
-  /** Error message to display below the button */
-  error?: string | null;
-  /** Override accent color (e.g. from developer UI config) */
-  accentColor?: string;
-  /** Override button label. Defaults to "Connect Wallet" */
+  /** Button label. Defaults to "Connect Wallet" */
   label?: string;
-  /** Additional style applied to the outer container */
-  style?: ViewStyle;
-  /** Additional style applied to the button itself */
-  buttonStyle?: ViewStyle;
+  /** Override accent/background color */
+  accentColor?: string;
+  /** Override text color. Defaults to #000 */
+  textColor?: string;
+  /** Override border radius */
+  borderRadius?: number;
+  /** Override padding vertical */
+  paddingVertical?: number;
+  /** Override font size */
+  fontSize?: number;
+  /** Full width. Defaults to true */
+  fullWidth?: boolean;
+  /** Called after authenticate() is triggered (not after it completes) */
+  onPress?: () => void;
 }
 
 /**
- * Drop-in wallet connect button that triggers the same MWA / Phantom
- * connection flow as ConnectWalletScreen, but renders as a single button
- * instead of a full-screen layout.
+ * ConnectWalletButton
  *
- * Use with `renderConnectScreen` on DubsProvider to embed the button
- * inside your own custom onboarding or home screen:
+ * A minimal, customisable button that fires useAuth().authenticate().
+ * Use this when you want to own the connect-wallet screen UI (e.g. inside
+ * your own onboarding) but still hand off the wallet picker, signing, and
+ * registration flow to the SDK.
  *
- * ```tsx
- * <DubsProvider
- *   renderConnectScreen={({ onConnect, connecting, error }) => (
- *     <MyScreen>
- *       <ConnectWalletButton onConnect={onConnect} connecting={connecting} error={error} />
- *     </MyScreen>
- *   )}
- * >
- * ```
+ * The SDK will handle everything after this tap:
+ *   wallet picker → sign message → (registration/avatar if new user) → authenticated
+ *
+ * Example:
+ *   <ConnectWalletButton
+ *     label="Let's go"
+ *     accentColor="#22C55E"
+ *     textColor="#000"
+ *   />
  */
 export function ConnectWalletButton({
-  onConnect,
-  connecting = false,
-  error = null,
-  accentColor,
   label = 'Connect Wallet',
-  style,
-  buttonStyle,
+  accentColor,
+  textColor = '#000000',
+  borderRadius = 16,
+  paddingVertical = 16,
+  fontSize = 17,
+  fullWidth = true,
+  onPress,
 }: ConnectWalletButtonProps) {
   const t = useDubsTheme();
+  const { authenticate, status } = useAuth();
+
+  const connecting = status === 'authenticating' || status === 'signing' || status === 'verifying';
   const accent = accentColor || t.accent;
 
-  return (
-    <View style={style}>
-      {error ? (
-        <View
-          style={[
-            styles.errorBox,
-            { backgroundColor: t.errorBg, borderColor: t.errorBorder },
-          ]}
-        >
-          <Text style={[styles.errorText, { color: t.errorText }]}>{error}</Text>
-        </View>
-      ) : null}
+  const handlePress = () => {
+    onPress?.();
+    authenticate();
+  };
 
-      <TouchableOpacity
-        style={[styles.button, { backgroundColor: accent }, buttonStyle]}
-        onPress={onConnect}
-        disabled={connecting}
-        activeOpacity={0.8}
-      >
-        {connecting ? (
-          <ActivityIndicator color="#FFFFFF" size="small" />
-        ) : (
-          <Text style={styles.buttonText}>{label}</Text>
-        )}
-      </TouchableOpacity>
-    </View>
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={connecting}
+      activeOpacity={0.85}
+      style={[
+        styles.btn,
+        {
+          backgroundColor: accent,
+          borderRadius,
+          paddingVertical,
+          width: fullWidth ? '100%' : undefined,
+          opacity: connecting ? 0.8 : 1,
+        },
+      ]}
+    >
+      {connecting ? (
+        <ActivityIndicator color={textColor} size="small" />
+      ) : (
+        <Text style={[styles.label, { color: textColor, fontSize }]}>
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
-  button: {
-    height: 56,
-    borderRadius: 16,
-    justifyContent: 'center',
+  btn: {
     alignItems: 'center',
+    justifyContent: 'center',
     paddingHorizontal: 24,
   },
-  buttonText: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  errorBox: {
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    marginBottom: 12,
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: 'center',
+  label: {
+    fontWeight: '800',
+    letterSpacing: -0.2,
   },
 });

package/src/ui/game/EnterArcadePoolSheet.tsx

@@ -82,9 +82,10 @@ export function EnterArcadePoolSheet({
   }, [mutation.status, mutation.error]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const buyInSol = (pool.buy_in_lamports / 1_000_000_000).toFixed(4);
-  const totalPlayers = stats?.total_entries ?? pool.total_entries ?? 0;
+  const totalPlayers = stats?.total_entries ?? 0;
+  const totalBuyIns = pool.total_entries ?? totalPlayers;
   const topScore = stats?.top_score ?? 0;
-  const potSol = ((pool.buy_in_lamports * Number(totalPlayers)) / 1_000_000_000).toFixed(4);
+  const potSol = ((pool.buy_in_lamports * Number(totalBuyIns)) / 1_000_000_000).toFixed(4);
 
   const isMutating = mutation.status !== 'idle' && mutation.status !== 'success' && mutation.status !== 'error';
   const canJoin = !isMutating && mutation.status !== 'success';

package/src/ui/game/JoinGameSheet.tsx

@@ -30,6 +30,8 @@ export interface JoinGameSheetProps {
   /** Callbacks */
   onSuccess?: (result: JoinGameMutationResult) => void;
   onError?: (error: Error) => void;
+  /** Called when the user taps a team card (useful for sound/haptics) */
+  onTeamSelect?: (team: 'home' | 'away') => void;
   /** Pool mode: hides team selection, auto-assigns team, shows "Join Pool" labels */
   isPoolModeEnabled?: boolean;
 }
@@ -53,6 +55,7 @@ export function JoinGameSheet({
   awayColor = '#EF4444',
   onSuccess,
   onError,
+  onTeamSelect,
   isPoolModeEnabled = false,
 }: JoinGameSheetProps) {
   const t = useDubsTheme();
@@ -194,7 +197,7 @@ export function JoinGameSheet({
                     bets={homeBets}
                     color={homeColor}
                     selected={selectedTeam === 'home'}
-                    onPress={() => setSelectedTeam('home')}
+                    onPress={() => { setSelectedTeam('home'); onTeamSelect?.('home'); }}
                     ImageComponent={ImageComponent}
                     t={t}
                   />
@@ -205,7 +208,7 @@ export function JoinGameSheet({
                     bets={awayBets}
                     color={awayColor}
                     selected={selectedTeam === 'away'}
-                    onPress={() => setSelectedTeam('away')}
+                    onPress={() => { setSelectedTeam('away'); onTeamSelect?.('away'); }}
                     ImageComponent={ImageComponent}
                     t={t}
                   />

package/src/ui/index.ts

@@ -1,5 +1,5 @@
 export { AuthGate } from './AuthGate';
-export type { AuthGateProps, RegistrationScreenProps } from './AuthGate';
+export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps as AuthGateConnectWalletProps } from './AuthGate';
 export { ConnectWalletScreen } from './ConnectWalletScreen';
 export type { ConnectWalletScreenProps } from './ConnectWalletScreen';
 export { ConnectWalletButton } from './ConnectWalletButton';