@dubsdotapp/expo 0.4.1 → 0.5.0

package/package.json

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

package/src/hooks/useArcadeBridge.ts

@@ -138,8 +138,9 @@ 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': {

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, 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

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { useAuth } from '../hooks/useAuth';
+import { useDubsTheme } from './theme';
+
+export interface ConnectWalletButtonProps {
+  /** Button label. Defaults to "Connect Wallet" */
+  label?: string;
+  /** 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;
+}
+
+/**
+ * ConnectWalletButton
+ *
+ * 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.
+ *
+ * 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({
+  label = 'Connect Wallet',
+  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;
+
+  const handlePress = () => {
+    onPress?.();
+    authenticate();
+  };
+
+  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({
+  btn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  label: {
+    fontWeight: '800',
+    letterSpacing: -0.2,
+  },
+});

package/src/ui/index.ts

@@ -1,7 +1,9 @@
 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';
+export type { ConnectWalletButtonProps } from './ConnectWalletButton';
 export { UserProfileCard } from './UserProfileCard';
 export type { UserProfileCardProps } from './UserProfileCard';
 export { SettingsSheet } from './SettingsSheet';