@oxyhq/services 6.9.45 → 6.9.46

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,

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -9,7 +9,7 @@ import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
 import { Colors } from '../../constants/theme';
-import { GroupedSection } from '../GroupedSection';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface FileViewerProps {
     file: FileMetadata;
@@ -105,53 +105,53 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     }, [imageDimensions, containerWidth]);
 
     const fileDetailItems = useMemo(() => {
-        const items = [
+        const items: Array<{ id: string; iconName: string; iconColor: string; title: string; description: string }> = [
             {
                 id: 'filename',
-                icon: 'file-document',
+                iconName: 'file-document',
                 iconColor: constantColors.iconSecurity,
                 title: 'File Name',
-                subtitle: file.filename,
+                description: file.filename,
             },
             {
                 id: 'size',
-                icon: 'server',
+                iconName: 'server',
                 iconColor: constantColors.iconStorage,
                 title: 'Size',
-                subtitle: formatFileSize(file.length),
+                description: formatFileSize(file.length),
             },
             {
                 id: 'type',
-                icon: 'code-tags',
+                iconName: 'code-tags',
                 iconColor: constantColors.iconData,
                 title: 'Type',
-                subtitle: file.contentType,
+                description: file.contentType,
             },
             {
                 id: 'uploaded',
-                icon: 'clock',
+                iconName: 'clock',
                 iconColor: constantColors.iconPersonalInfo,
                 title: 'Uploaded',
-                subtitle: new Date(file.uploadDate).toLocaleString(),
+                description: new Date(file.uploadDate).toLocaleString(),
             },
         ];
 
         if (file.metadata?.description) {
             items.push({
                 id: 'description',
-                icon: 'text',
+                iconName: 'text',
                 iconColor: constantColors.iconData,
                 title: 'Description',
-                subtitle: file.metadata.description,
+                description: file.metadata.description,
             });
         }
 
         items.push({
             id: 'fileId',
-            icon: 'key',
+            iconName: 'key',
             iconColor: constantColors.iconSecurity,
             title: 'File ID',
-            subtitle: file.id,
+            description: file.id,
         });
 
         return items;
@@ -366,7 +366,17 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 {showFileDetailsInViewer && (
                     <>
                         <View style={fileManagementStyles.fileDetailsSectionContent}>
-                            <GroupedSection items={fileDetailItems} />
+                            <SettingsListGroup>
+                                {fileDetailItems.map((item) => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<MaterialCommunityIcons name={item.iconName} size={20} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.description}
+                                        showChevron={false}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
 
                         {isOwner && (

package/src/ui/components/index.ts

@@ -1,14 +1,9 @@
 // Re-export all reusable UI components
 export { default as ProfileCard } from './ProfileCard';
-export { default as Section } from './Section';
-export { default as SectionTitle } from './SectionTitle';
-export { default as GroupedItem } from './GroupedItem';
-export { default as GroupedSection } from './GroupedSection';
 export { default as QuickActions } from './QuickActions';
 export { default as Header, getHeaderHeight } from './Header';
 export { default as LoadingState } from './LoadingState';
 export { default as EmptyState } from './EmptyState';
-export { default as SettingRow } from './SettingRow';
 export { SettingsIcon } from './SettingsIcon';
 
 // Re-export existing components

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
 import TextField from '../TextField';
 import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
@@ -200,24 +200,21 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                 )}
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.back'),
-                        onPress: onBack,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('payment.actions.continue'),
-                        onPress: onNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                        disabled: paymentMethod === 'card' && !isCardValid,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('payment.actions.back')}
+                </Button>
+                <Button
+                    variant="primary"
+                    onPress={onNext}
+                    size="small"
+                    icon={<Ionicons name="arrow-forward" size={16} />}
+                    iconPosition="right"
+                    disabled={paymentMethod === 'card' && !isCardValid}
+                >
+                    {t('payment.actions.continue')}
+                </Button>
+            </View>
         </Animated.View>
     );
 };

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
-import { GroupedSection } from '../index';
-import GroupedPillButtons from '../internal/GroupedPillButtons';
+import { Ionicons } from '@expo/vector-icons';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Button } from '@oxyhq/bloom/button';
 import { FAIRWalletIcon } from '../icon';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentMethod, PaymentColors, PaymentStepAnimations } from './types';
@@ -49,42 +50,39 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             <View style={styles.section}>
                 <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
 
-                <GroupedSection
-                    items={availablePaymentMethods.map(method => ({
-                        id: method.key,
-                        icon: method.key === 'faircoin' ? undefined : method.icon,
-                        iconColor: method.key === 'card' ? '#007AFF' :
+                <SettingsListGroup>
+                    {availablePaymentMethods.map(method => {
+                        const iconColor = method.key === 'card' ? '#007AFF' :
                             method.key === 'oxy' ? '#32D74B' :
-                                method.key === 'faircoin' ? '#9ffb50' : colors.primary,
-                        title: t(`payment.methods.${method.key}.label`),
-                        subtitle: t(`payment.methods.${method.key}.description`),
-                        onPress: () => onSelectMethod(method.key),
-                        selected: selectedMethod === method.key,
-                        showChevron: false,
-                        customIcon: method.key === 'faircoin' ? (
-                            <FAIRWalletIcon size={20} />
-                        ) : undefined,
-                    }))}
-                />
+                                method.key === 'faircoin' ? '#9ffb50' : colors.primary;
+                        const iconElement = method.key === 'faircoin'
+                            ? <FAIRWalletIcon size={20} />
+                            : <Ionicons name={method.icon} size={20} color={iconColor} />;
+                        return (
+                            <SettingsListItem
+                                key={method.key}
+                                icon={iconElement}
+                                title={t(`payment.methods.${method.key}.label`)}
+                                description={t(`payment.methods.${method.key}.description`)}
+                                onPress={() => onSelectMethod(method.key)}
+                                showChevron={false}
+                                rightElement={selectedMethod === method.key ? (
+                                    <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
+                                ) : undefined}
+                            />
+                        );
+                    })}
+                </SettingsListGroup>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('payment.actions.back'),
-                        onPress: onBack,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('payment.actions.continue'),
-                        onPress: onNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('payment.actions.back')}
+                </Button>
+                <Button variant="primary" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                    {t('payment.actions.continue')}
+                </Button>
+            </View>
         </Animated.View>
     );
 };