@dubsdotapp/expo 0.4.2 → 0.5.1

package/package.json

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

package/src/hooks/useArcadeBridge.ts

@@ -90,10 +90,6 @@ 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);
 
@@ -138,13 +134,12 @@ export function useArcadeBridge({
         return; // non-JSON postMessages from the game's own code — ignore
       }
 
-      // 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;
+      // Only process messages from our bridge protocol
+      if (data.dubsArcade !== PROTOCOL_VERSION) return;
 
       switch (data.type) {
         case 'TAP_PLAY': {
-          if (canPlayRef.current) {
+          if (canPlay) {
             triggerPlay();
           }
           return;
@@ -186,7 +181,7 @@ export function useArcadeBridge({
           return;
       }
     },
-    [triggerPlay, submitScore, onScoreSubmitted, onError],
+    [canPlay, triggerPlay, submitScore, onScoreSubmitted, onError],
   );
 
   return { webviewRef, handleMessage, triggerPlay, lastResult, bridgeLoading };

package/src/index.ts

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+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" */
+  label?: string;
+  /** Additional style applied to the outer container */
+  style?: ViewStyle;
+  /** Additional style applied to the button itself */
+  buttonStyle?: ViewStyle;
+}
+
+/**
+ * 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.
+ *
+ * Use with `renderConnectScreen` on DubsProvider to embed the button
+ * inside your own custom onboarding or home screen:
+ *
+ * ```tsx
+ * <DubsProvider
+ *   renderConnectScreen={({ onConnect, connecting, error }) => (
+ *     <MyScreen>
+ *       <ConnectWalletButton onConnect={onConnect} connecting={connecting} error={error} />
+ *     </MyScreen>
+ *   )}
+ * >
+ * ```
+ */
+export function ConnectWalletButton({
+  onConnect,
+  connecting = false,
+  error = null,
+  accentColor,
+  label = 'Connect Wallet',
+  style,
+  buttonStyle,
+}: ConnectWalletButtonProps) {
+  const t = useDubsTheme();
+  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}
+
+      <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>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 56,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: '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',
+  },
+});

package/src/ui/index.ts

@@ -2,6 +2,8 @@ export { AuthGate } from './AuthGate';
 export type { AuthGateProps, RegistrationScreenProps } from './AuthGate';
 export { ConnectWalletScreen } from './ConnectWalletScreen';
 export type { ConnectWalletScreenProps } from './ConnectWalletScreen';
+export { ConnectWalletButton } from './ConnectWalletButton';
+export type { ConnectWalletButtonProps } from './ConnectWalletButton';
 export { UserProfileCard } from './UserProfileCard';
 export type { UserProfileCardProps } from './UserProfileCard';
 export { SettingsSheet } from './SettingsSheet';