@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/components/OxyPayButton.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useState } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type LayoutChangeEvent } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../styles/fonts';
 import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import OxyLogo from './OxyLogo';
@@ -42,13 +43,14 @@ const OxyPayButton: React.FC<OxyPayButtonProps> = ({
     color,
     variant = 'white',
 }) => {
+    const theme = useTheme();
     const [buttonHeight, setButtonHeight] = useState<number>(52);
     const handlePress = () => {
         console.warn('OxyPayButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
     };
     // Determine background and text color
-    const backgroundColor = color || (variant === 'black' ? '#111' : '#fff');
-    const textColor = variant === 'black' || (color && isColorDark(color)) ? '#fff' : '#1b1f0a';
+    const backgroundColor = color || (variant === 'black' ? theme.colors.text : theme.colors.background);
+    const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
     // Responsive sizing
     const logoWidth = Math.round(buttonHeight * 0.5); // 50% of button height
     const logoHeight = Math.round(buttonHeight * 0.25); // 25% of button height
@@ -120,4 +122,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default OxyPayButton; 
+export default OxyPayButton;

package/src/ui/components/OxyProvider.tsx

@@ -19,7 +19,7 @@ const isWeb = Platform.OS === 'web';
 // The .then() extracts + casts the default export so that `lazy()` sees
 // `Promise<{ default: ComponentType }>` instead of the full module namespace.
 const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
-    import('./BottomSheetRouter.js').then(
+    import('./BottomSheetRouter').then(
         (mod) => ({ default: mod.default as unknown as ComponentType }),
         (error) => {
             if (__DEV__) {
@@ -31,7 +31,7 @@ const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
 );
 
 const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
-    import('./SignInModal.js').then(
+    import('./SignInModal').then(
         (mod) => ({ default: mod.default as unknown as ComponentType }),
         () => ({ default: (() => null) as FC }),
     ),
@@ -83,12 +83,13 @@ const OxyProvider: FC<OxyProviderProps> = ({
     colorPreset,
 }) => {
 
-    // Dynamic KeyboardProvider for native (avoids require() for ESM compatibility)
+    // Dynamic KeyboardProvider for native (avoids require() for ESM compatibility).
+    // Literal-string import: Hermes/Metro require static strings in production
+    // bundles, not variable expressions or webpackIgnore comments.
     const [KBProvider, setKBProvider] = useState<FC<{ children: ReactNode }> | null>(null);
     useEffect(() => {
         if (isWeb) return;
-        const moduleName = 'react-native-keyboard-controller';
-        import(/* webpackIgnore: true */ moduleName)
+        import('react-native-keyboard-controller')
             .then((mod) => setKBProvider(() => mod.KeyboardProvider))
             .catch(() => { /* KeyboardProvider not available */ });
     }, []);

package/src/ui/components/OxySignInButton.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../styles/fonts';
 import OxyLogo from './OxyLogo';
 import { showSignInModal, subscribeToSignInModal } from './SignInModal';
@@ -51,26 +52,25 @@ export interface OxySignInButtonProps {
 
 /**
  * A pre-styled button component for signing in with Oxy identity
- * 
+ *
  * This component opens the Oxy Auth flow which allows users to authenticate
  * using their Oxy Accounts identity (via QR code or deep link).
- * 
+ *
  * @example
  * ```tsx
  * // Basic usage
  * <OxySignInButton />
- * 
+ *
  * // Custom styling
- * <OxySignInButton 
- *   variant="contained" 
- *   style={{ marginTop: 20 }} 
- *   text="Login with Oxy" 
+ * <OxySignInButton
+ *   variant="contained"
+ *   style={{ marginTop: 20 }}
+ *   text="Login with Oxy"
  * />
- * 
+ *
  * // Custom handler
  * <OxySignInButton onPress={() => {
  *   // Custom authentication flow
- *   console.log('Custom auth flow initiated');
  * }} />
  * ```
  */
@@ -83,6 +83,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     disabled = false,
     showWhenAuthenticated = false,
 }) => {
+    const theme = useTheme();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
@@ -105,6 +106,66 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
         showSignInModal();
     }, [onPress]);
 
+    const themedStyles = useMemo(() => StyleSheet.create({
+        button: {
+            padding: 14,
+            borderRadius: 35,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        buttonDefault: {
+            backgroundColor: '#FFFFFF',
+            borderWidth: 1,
+            borderColor: theme.colors.borderLight,
+            ...Platform.select({
+                web: {
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                },
+                default: {
+                    shadowColor: '#000000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                }
+            }),
+        },
+        buttonOutline: {
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: theme.colors.primary,
+        },
+        buttonContained: {
+            backgroundColor: theme.colors.primary,
+        },
+        buttonDisabled: {
+            opacity: 0.6,
+        },
+        buttonContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        text: {
+            fontFamily: fontFamilies.interSemiBold,
+            fontWeight: Platform.OS === 'web' ? '600' : undefined,
+            fontSize: 16,
+            marginLeft: 10,
+        },
+        textDefault: {
+            color: theme.colors.text,
+        },
+        textOutline: {
+            color: theme.colors.primary,
+        },
+        textContained: {
+            color: '#FFFFFF',
+        },
+        textDisabled: {
+            color: theme.colors.textTertiary,
+        },
+    }), [theme]);
+
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
@@ -114,11 +175,11 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     const getButtonStyle = () => {
         switch (variant) {
             case 'outline':
-                return [styles.buttonOutline, style];
+                return [themedStyles.buttonOutline, style];
             case 'contained':
-                return [styles.buttonContained, style];
+                return [themedStyles.buttonContained, style];
             default:
-                return [styles.buttonDefault, style];
+                return [themedStyles.buttonDefault, style];
         }
     };
 
@@ -126,29 +187,29 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     const getTextStyle = () => {
         switch (variant) {
             case 'outline':
-                return [styles.textOutline, textStyle];
+                return [themedStyles.textOutline, textStyle];
             case 'contained':
-                return [styles.textContained, textStyle];
+                return [themedStyles.textContained, textStyle];
             default:
-                return [styles.textDefault, textStyle];
+                return [themedStyles.textDefault, textStyle];
         }
     };
 
     return (
         <TouchableOpacity
-            style={[styles.button, getButtonStyle(), isButtonDisabled && styles.buttonDisabled]}
+            style={[themedStyles.button, getButtonStyle(), isButtonDisabled && themedStyles.buttonDisabled]}
             onPress={handlePress}
             disabled={isButtonDisabled}
         >
-            <View style={styles.buttonContent}>
+            <View style={themedStyles.buttonContent}>
                 <OxyLogo
                     variant="icon"
                     size={20}
-                    fillColor={variant === 'contained' ? 'white' : '#d269e6'}
-                    innerFillColor={variant === 'contained' ? '#d269e6' : undefined}
+                    fillColor={variant === 'contained' ? 'white' : theme.colors.primary}
+                    innerFillColor={variant === 'contained' ? theme.colors.primary : undefined}
                     style={isButtonDisabled ? { opacity: 0.6 } : undefined}
                 />
-                <Text style={[styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled]}>
+                <Text style={[themedStyles.text, getTextStyle(), isButtonDisabled && themedStyles.textDisabled]}>
                     {isLoading || isModalOpen ? 'Signing in...' : text}
                 </Text>
             </View>
@@ -156,64 +217,4 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
-    button: {
-        padding: 14,
-        borderRadius: 35,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    buttonDefault: {
-        backgroundColor: '#FFFFFF',
-        borderWidth: 1,
-        borderColor: '#DDDDDD',
-        ...Platform.select({
-            web: {
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            },
-            default: {
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.1,
-                shadowRadius: 4,
-                elevation: 2,
-            }
-        }),
-    },
-    buttonOutline: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
-        borderColor: '#d169e5',
-    },
-    buttonContained: {
-        backgroundColor: '#d169e5',
-    },
-    buttonDisabled: {
-        opacity: 0.6,
-    },
-    buttonContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    text: {
-        fontFamily: fontFamilies.interSemiBold,
-        fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontSize: 16,
-        marginLeft: 10,
-    },
-    textDefault: {
-        color: '#333333',
-    },
-    textOutline: {
-        color: '#d169e5',
-    },
-    textContained: {
-        color: '#FFFFFF',
-    },
-    textDisabled: {
-        color: '#888888',
-    },
-});
-
 export default OxySignInButton;

package/src/ui/components/SignInModal.tsx

@@ -19,6 +19,7 @@ import {
     Dimensions,
     Platform,
     Linking,
+    useWindowDimensions,
 } from 'react-native';
 import Animated, {
     useSharedValue,
@@ -32,6 +33,7 @@ import QRCode from 'react-native-qrcode-svg';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Loading } from '@oxyhq/bloom/loading';
+import { BottomSheet, type BottomSheetRef } from '@oxyhq/bloom/bottom-sheet';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
 import { createDebugLogger } from '@oxyhq/core';
@@ -84,8 +86,11 @@ export const subscribeToSignInModal = (listener: (visible: boolean) => void): ((
     return () => visibilityListeners.delete(listener);
 };
 
+type ModalView = 'main' | 'qr';
+
 const SignInModal: React.FC = () => {
     const [visible, setVisible] = useState(false);
+    const [view, setView] = useState<ModalView>('main');
     const [authSession, setAuthSession] = useState<AuthSession | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -93,11 +98,14 @@ const SignInModal: React.FC = () => {
 
     const insets = useSafeAreaInsets();
     const theme = useTheme();
+    const { width: windowWidth } = useWindowDimensions();
+    const isWide = windowWidth >= 768;
     const { oxyServices, switchSession } = useOxy();
 
     const socketRef = useRef<Socket | null>(null);
     const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
     const isProcessingRef = useRef(false);
+    const sheetRef = useRef<BottomSheetRef>(null);
 
     // Animation values
     const opacity = useSharedValue(0);
@@ -117,12 +125,15 @@ const SignInModal: React.FC = () => {
         if (visible) {
             opacity.value = withTiming(1, { duration: 250 });
             scale.value = withTiming(1, { duration: 250 });
+            setView('main');
             generateAuthSession();
+            if (!isWide) sheetRef.current?.present();
         } else {
             opacity.value = withTiming(0, { duration: 200 });
             scale.value = withTiming(0.9, { duration: 200 });
+            if (!isWide) sheetRef.current?.dismiss();
         }
-    }, [visible]);
+    }, [visible, isWide]);
 
     const backdropStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -138,6 +149,16 @@ const SignInModal: React.FC = () => {
         if (isProcessingRef.current) return;
         isProcessingRef.current = true;
 
+        // Dismiss the in-app browser (if any) so the user returns to the app.
+        if (Platform.OS !== 'web') {
+            try {
+                const WebBrowser = await import('expo-web-browser');
+                WebBrowser.dismissBrowser();
+            } catch {
+                /* expo-web-browser not available */
+            }
+        }
+
         try {
             if (switchSession) {
                 await switchSession(sessionId);
@@ -169,6 +190,11 @@ const SignInModal: React.FC = () => {
 
     // Connect to socket for real-time updates
     const connectSocket = useCallback((sessionToken: string) => {
+        // Disconnect any pre-existing socket to avoid duplicates on re-renders.
+        if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+        }
         const baseURL = oxyServices.getBaseURL();
 
         const socket = io(`${baseURL}/auth-session`, {
@@ -318,8 +344,17 @@ const SignInModal: React.FC = () => {
                 `width=${width},height=${height},left=${left},top=${top},popup=1`
             );
         } else {
-            // Open in browser on native
-            Linking.openURL(webUrl.toString());
+            // Open in in-app browser on native via expo-web-browser. Falls back
+            // to system browser if expo-web-browser is not available.
+            try {
+                const WebBrowser = await import('expo-web-browser');
+                await WebBrowser.openBrowserAsync(webUrl.toString(), {
+                    presentationStyle: WebBrowser.WebBrowserPresentationStyle.PAGE_SHEET,
+                    dismissButtonStyle: 'close',
+                });
+            } catch {
+                Linking.openURL(webUrl.toString());
+            }
         }
     }, [authSession, oxyServices]);
 
@@ -342,30 +377,24 @@ const SignInModal: React.FC = () => {
         };
     }, [cleanup]);
 
-    if (!visible) return null;
-
-    return (
-        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={handleClose}>
-            <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
-                <TouchableOpacity style={StyleSheet.absoluteFill} onPress={handleClose} activeOpacity={1} />
-
-                <Animated.View style={[styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }]}>
-                    {/* Close button */}
-                    <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
-                        <Text style={styles.closeButtonText}>×</Text>
-                    </TouchableOpacity>
-
-                    {/* Header */}
-                    <View style={styles.header}>
-                        <OxyLogo variant="icon" size={56} />
-                        <Text className="text-foreground" style={styles.title}>Sign in with Oxy</Text>
-                        <Text className="text-muted-foreground" style={styles.subtitle}>
-                            Scan with Oxy Accounts app or use the button below
-                        </Text>
-                    </View>
-
-                    {isLoading ? (
+    if (!visible && isWide) return null;
+
+    const innerContent = (
+        <>
+            {!isWide && view === 'qr' ? (
+                <TouchableOpacity style={styles.backButton} onPress={() => setView('main')} accessibilityLabel="Back">
+                    <Text style={styles.backButtonText}>‹</Text>
+                </TouchableOpacity>
+            ) : null}
+            {isWide ? (
+                <TouchableOpacity style={styles.closeButton} onPress={handleClose} accessibilityLabel="Close">
+                    <Text style={styles.closeButtonText}>×</Text>
+                </TouchableOpacity>
+            ) : null}
+
+            {isLoading ? (
                         <View style={styles.loadingContainer}>
+                            <OxyLogo variant="icon" size={56} />
                             <Loading size="large" />
                             <Text className="text-muted-foreground" style={styles.loadingText}>
                                 Preparing sign in...
@@ -373,12 +402,20 @@ const SignInModal: React.FC = () => {
                         </View>
                     ) : error ? (
                         <View style={styles.errorContainer}>
+                            <OxyLogo variant="icon" size={56} />
                             <Text className="text-destructive" style={styles.errorText}>{error}</Text>
                             <Button onPress={handleRefresh}>Try Again</Button>
                         </View>
-                    ) : (
+                    ) : isWide ? (
                         <>
-                            {/* QR Code */}
+                            <View style={styles.header}>
+                                <OxyLogo variant="icon" size={56} />
+                                <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
+                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                                    Scan with Oxy Accounts app or use the button below
+                                </Text>
+                            </View>
+
                             <View style={[styles.qrContainer, { backgroundColor: 'white' }]}>
                                 {authSession ? (
                                     <QRCode
@@ -392,14 +429,12 @@ const SignInModal: React.FC = () => {
                                 )}
                             </View>
 
-                            {/* Divider */}
                             <View style={styles.dividerContainer}>
-                                <View style={[styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }]} />
-                                <Text style={[styles.dividerText, { color: 'rgba(255,255,255,0.7)' }]}>or</Text>
-                                <View style={[styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }]} />
+                                <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                                <Text style={[styles.dividerText, { color: theme.colors.textTertiary }]}>or</Text>
+                                <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
                             </View>
 
-                            {/* Open Auth Popup Button */}
                             <Button
                                 onPress={handleOpenAuthPopup}
                                 icon={<OxyLogo variant="icon" size={20} fillColor={theme.colors.card} />}
@@ -407,17 +442,94 @@ const SignInModal: React.FC = () => {
                                 Open Oxy Auth
                             </Button>
 
-                            {/* Status */}
                             {isWaiting && (
                                 <View style={styles.statusContainer}>
                                     <Loading size="small" />
-                                    <Text style={styles.statusText}>
-                                        Waiting for authorization...
+                                    <Text style={[styles.statusText, { color: theme.colors.textSecondary }]}>
+                                        Waiting for authorization…
+                                    </Text>
+                                </View>
+                            )}
+                        </>
+                    ) : view === 'main' ? (
+                        <>
+                            <View style={styles.header}>
+                                <OxyLogo variant="icon" size={56} />
+                                <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
+                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                                    One account for the whole Oxy ecosystem. Continue to authorize this device.
+                                </Text>
+                            </View>
+
+                            <View style={styles.actions}>
+                                <Button
+                                    onPress={handleOpenAuthPopup}
+                                    icon={<OxyLogo variant="icon" size={20} fillColor={theme.colors.card} />}
+                                >
+                                    Continue with Oxy
+                                </Button>
+
+                                <Button variant="ghost" onPress={() => setView('qr')}>
+                                    Scan QR code instead
+                                </Button>
+                            </View>
+                        </>
+                    ) : (
+                        <>
+                            <View style={styles.header}>
+                                <Text style={[styles.title, { color: theme.colors.text }]}>Scan QR</Text>
+                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                                    Open the Oxy Accounts app on another device and scan this code.
+                                </Text>
+                            </View>
+
+                            <View style={[styles.qrContainer, { backgroundColor: 'white' }]}>
+                                {authSession ? (
+                                    <QRCode
+                                        value={getQRData()}
+                                        size={220}
+                                        backgroundColor="white"
+                                        color="black"
+                                    />
+                                ) : (
+                                    <Loading size="large" />
+                                )}
+                            </View>
+
+                            {isWaiting && (
+                                <View style={styles.statusContainer}>
+                                    <Loading size="small" />
+                                    <Text style={[styles.statusText, { color: theme.colors.textSecondary }]}>
+                                        Waiting for authorization…
                                     </Text>
                                 </View>
                             )}
                         </>
                     )}
+        </>
+    );
+
+    if (!isWide) {
+        return (
+            <BottomSheet
+                ref={sheetRef}
+                onDismiss={handleClose}
+                enablePanDownToClose
+            >
+                <View style={[styles.sheetContent, { paddingBottom: insets.bottom + 24 }]}>
+                    {innerContent}
+                </View>
+            </BottomSheet>
+        );
+    }
+
+    return (
+        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={handleClose}>
+            <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
+                <TouchableOpacity style={StyleSheet.absoluteFill} onPress={handleClose} activeOpacity={1} />
+
+                <Animated.View style={[styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }]}>
+                    {innerContent}
                 </Animated.View>
             </Animated.View>
         </Modal>
@@ -454,19 +566,51 @@ const styles = StyleSheet.create({
         fontWeight: '300',
         lineHeight: 32,
     },
+    backButton: {
+        position: 'absolute',
+        top: 16,
+        left: 16,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 10,
+    },
+    backButtonText: {
+        color: 'white',
+        fontSize: 32,
+        fontWeight: '300',
+        lineHeight: 32,
+        marginRight: 2,
+    },
+    actions: {
+        width: '100%',
+        gap: 12,
+    },
+    sheetContent: {
+        paddingHorizontal: 24,
+        paddingTop: 48,
+        paddingBottom: 32,
+        alignItems: 'center',
+        gap: 24,
+        width: '100%',
+    },
     header: {
         alignItems: 'center',
-        marginBottom: 32,
+        gap: 8,
     },
     title: {
-        fontSize: 28,
-        fontWeight: 'bold',
-        marginTop: 16,
+        fontSize: 24,
+        fontWeight: '700',
+        marginTop: 8,
     },
     subtitle: {
-        fontSize: 15,
-        marginTop: 8,
+        fontSize: 14,
         textAlign: 'center',
+        lineHeight: 20,
+        maxWidth: 320,
     },
     qrContainer: {
         padding: 20,