@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/SignInModal.js

@@ -0,0 +1,428 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToSignInModal = exports.isSignInModalVisible = exports.hideSignInModal = exports.showSignInModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const socket_io_client_1 = __importDefault(require("socket.io-client"));
+const react_native_qrcode_svg_1 = __importDefault(require("react-native-qrcode-svg"));
+const useThemeColors_1 = require("../hooks/useThemeColors");
+const OxyContext_1 = require("../context/OxyContext");
+const OxyLogo_1 = __importDefault(require("./OxyLogo"));
+const core_1 = require("@oxyhq/core");
+const debug = (0, core_1.createDebugLogger)('SignInModal');
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+// Auth session expiration (5 minutes)
+const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
+// Polling interval (fallback if socket fails)
+const POLLING_INTERVAL_MS = 3000;
+// Store for modal visibility with subscription support
+let modalVisible = false;
+let setModalVisibleCallback = null;
+const visibilityListeners = new Set();
+const showSignInModal = () => {
+    modalVisible = true;
+    setModalVisibleCallback?.(true);
+    for (const listener of visibilityListeners)
+        listener(true);
+};
+exports.showSignInModal = showSignInModal;
+const hideSignInModal = () => {
+    modalVisible = false;
+    setModalVisibleCallback?.(false);
+    for (const listener of visibilityListeners)
+        listener(false);
+};
+exports.hideSignInModal = hideSignInModal;
+const isSignInModalVisible = () => modalVisible;
+exports.isSignInModalVisible = isSignInModalVisible;
+/** Subscribe to modal visibility changes */
+const subscribeToSignInModal = (listener) => {
+    visibilityListeners.add(listener);
+    return () => visibilityListeners.delete(listener);
+};
+exports.subscribeToSignInModal = subscribeToSignInModal;
+const SignInModal = () => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [authSession, setAuthSession] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isWaiting, setIsWaiting] = (0, react_1.useState)(false);
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const colors = (0, useThemeColors_1.useThemeColors)();
+    const { oxyServices, switchSession } = (0, OxyContext_1.useOxy)();
+    const socketRef = (0, react_1.useRef)(null);
+    const pollingIntervalRef = (0, react_1.useRef)(null);
+    const isProcessingRef = (0, react_1.useRef)(false);
+    // Animation values
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(0);
+    const scale = (0, react_native_reanimated_1.useSharedValue)(0.9);
+    // Register callback
+    (0, react_1.useEffect)(() => {
+        setModalVisibleCallback = setVisible;
+        return () => {
+            setModalVisibleCallback = null;
+        };
+    }, []);
+    // Animate in/out
+    // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and scale are Reanimated SharedValues (stable refs) that should not be listed as dependencies
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 250 });
+            scale.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 250 });
+            generateAuthSession();
+        }
+        else {
+            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 200 });
+            scale.value = (0, react_native_reanimated_1.withTiming)(0.9, { duration: 200 });
+        }
+    }, [visible]);
+    const backdropStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: opacity.value,
+    }));
+    const contentStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }],
+    }));
+    // Handle successful authorization
+    const handleAuthSuccess = (0, react_1.useCallback)(async (sessionId) => {
+        if (isProcessingRef.current)
+            return;
+        isProcessingRef.current = true;
+        try {
+            if (switchSession) {
+                await switchSession(sessionId);
+            }
+            else {
+                await oxyServices.getTokenBySession(sessionId);
+            }
+            (0, exports.hideSignInModal)();
+        }
+        catch (err) {
+            debug.error('Error completing auth:', err);
+            setError('Authorization successful but failed to complete sign in. Please try again.');
+            isProcessingRef.current = false;
+        }
+    }, [oxyServices, switchSession]);
+    // Cleanup socket and polling
+    const cleanup = (0, react_1.useCallback)(() => {
+        setIsWaiting(false);
+        if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+        }
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+    }, []);
+    // Connect to socket for real-time updates
+    const connectSocket = (0, react_1.useCallback)((sessionToken) => {
+        const baseURL = oxyServices.getBaseURL();
+        const socket = (0, socket_io_client_1.default)(`${baseURL}/auth-session`, {
+            transports: ['websocket', 'polling'],
+            reconnection: true,
+            reconnectionAttempts: 3,
+            reconnectionDelay: 1000,
+        });
+        socketRef.current = socket;
+        socket.on('connect', () => {
+            debug.log('Auth socket connected');
+            socket.emit('join', sessionToken);
+        });
+        socket.on('auth_update', (payload) => {
+            debug.log('Auth update received:', payload);
+            if (payload.status === 'authorized' && payload.sessionId) {
+                cleanup();
+                handleAuthSuccess(payload.sessionId);
+            }
+            else if (payload.status === 'cancelled') {
+                cleanup();
+                setError('Authorization was denied.');
+            }
+            else if (payload.status === 'expired') {
+                cleanup();
+                setError('Session expired. Please try again.');
+            }
+        });
+        socket.on('connect_error', (err) => {
+            debug.log('Socket connection error, falling back to polling:', (err instanceof Error ? err.message : null));
+            socket.disconnect();
+            startPolling(sessionToken);
+        });
+    }, [oxyServices, handleAuthSuccess, cleanup]);
+    // Start polling for authorization (fallback)
+    const startPolling = (0, react_1.useCallback)((sessionToken) => {
+        pollingIntervalRef.current = setInterval(async () => {
+            if (isProcessingRef.current)
+                return;
+            try {
+                const response = await oxyServices.makeRequest('GET', `/auth/session/status/${sessionToken}`, undefined, { cache: false });
+                if (response.authorized && response.sessionId) {
+                    cleanup();
+                    handleAuthSuccess(response.sessionId);
+                }
+                else if (response.status === 'cancelled') {
+                    cleanup();
+                    setError('Authorization was denied.');
+                }
+                else if (response.status === 'expired') {
+                    cleanup();
+                    setError('Session expired. Please try again.');
+                }
+            }
+            catch (err) {
+                debug.log('Auth polling error:', err);
+            }
+        }, POLLING_INTERVAL_MS);
+    }, [oxyServices, handleAuthSuccess, cleanup]);
+    // Generate a new auth session
+    const generateAuthSession = (0, react_1.useCallback)(async () => {
+        setIsLoading(true);
+        setError(null);
+        isProcessingRef.current = false;
+        try {
+            const sessionToken = generateSessionToken();
+            const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
+            await oxyServices.makeRequest('POST', '/auth/session/create', {
+                sessionToken,
+                expiresAt,
+                appId: react_native_1.Platform.OS,
+            }, { cache: false });
+            setAuthSession({ sessionToken, expiresAt });
+            setIsWaiting(true);
+            connectSocket(sessionToken);
+        }
+        catch (err) {
+            setError((err instanceof Error ? err.message : null) || 'Failed to create auth session');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [oxyServices, connectSocket]);
+    // Generate a random session token
+    const generateSessionToken = () => {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < 32; i++) {
+            result += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        return result;
+    };
+    // Build the QR code data
+    const getQRData = () => {
+        if (!authSession)
+            return '';
+        return `oxyauth://${authSession.sessionToken}`;
+    };
+    // Open Oxy Auth popup
+    const handleOpenAuthPopup = (0, react_1.useCallback)(async () => {
+        if (!authSession)
+            return;
+        const baseURL = oxyServices.getBaseURL();
+        // Resolve auth web URL
+        let authWebUrl = oxyServices.config?.authWebUrl;
+        if (!authWebUrl) {
+            try {
+                const url = new URL(baseURL);
+                if (url.port === '3001') {
+                    url.port = '3000';
+                    authWebUrl = url.origin;
+                }
+                else if (url.hostname.startsWith('api.')) {
+                    url.hostname = `auth.${url.hostname.slice(4)}`;
+                    authWebUrl = url.origin;
+                }
+            }
+            catch {
+                authWebUrl = 'https://auth.oxy.so';
+            }
+        }
+        authWebUrl = authWebUrl || 'https://auth.oxy.so';
+        const webUrl = new URL('/authorize', authWebUrl);
+        webUrl.searchParams.set('token', authSession.sessionToken);
+        if (react_native_1.Platform.OS === 'web') {
+            // Open popup window on web
+            const width = 500;
+            const height = 650;
+            const screenWidth = window.screen?.width ?? width;
+            const screenHeight = window.screen?.height ?? height;
+            const left = (screenWidth - width) / 2;
+            const top = (screenHeight - height) / 2;
+            window.open(webUrl.toString(), 'oxy-auth-popup', `width=${width},height=${height},left=${left},top=${top},popup=1`);
+        }
+        else {
+            // Open in browser on native
+            react_native_1.Linking.openURL(webUrl.toString());
+        }
+    }, [authSession, oxyServices]);
+    // Refresh session
+    const handleRefresh = (0, react_1.useCallback)(() => {
+        cleanup();
+        generateAuthSession();
+    }, [generateAuthSession, cleanup]);
+    // Handle close
+    const handleClose = (0, react_1.useCallback)(() => {
+        cleanup();
+        (0, exports.hideSignInModal)();
+    }, [cleanup]);
+    // Clean up on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            cleanup();
+        };
+    }, [cleanup]);
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: handleClose, children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [styles.backdrop, backdropStyle], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: react_native_1.StyleSheet.absoluteFill, onPress: handleClose, activeOpacity: 1 }), (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: handleClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.closeButtonText, children: "\u00D7" }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: 56, height: 56 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: colors.text }], children: "Sign in with Oxy" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.subtitle, { color: colors.secondaryText }], children: "Scan with Oxy Accounts app or use the button below" })] }), isLoading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: colors.tint }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.loadingText, { color: colors.secondaryText }], children: "Preparing sign in..." })] })) : error ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.errorContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, { color: '#EA4335' }], children: error }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: colors.tint }], onPress: handleRefresh, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Try Again" }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.qrContainer, { backgroundColor: 'white' }], children: authSession ? ((0, jsx_runtime_1.jsx)(react_native_qrcode_svg_1.default, { value: getQRData(), size: 200, backgroundColor: "white", color: "black" })) : ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: "#d169e5" })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.dividerContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.dividerText, { color: 'rgba(255,255,255,0.7)' }], children: "or" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor: '#d169e5' }], onPress: handleOpenAuthPopup, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: 20, height: 20, fillColor: "white", style: styles.buttonIcon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Open Oxy Auth" })] }), isWaiting && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statusContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "white" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statusText, children: "Waiting for authorization..." })] }))] }))] })] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    content: {
+        width: '100%',
+        maxWidth: 400,
+        alignItems: 'center',
+        paddingHorizontal: 24,
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 10,
+    },
+    closeButtonText: {
+        color: 'white',
+        fontSize: 28,
+        fontWeight: '300',
+        lineHeight: 32,
+    },
+    header: {
+        alignItems: 'center',
+        marginBottom: 32,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        marginTop: 16,
+        color: 'white',
+    },
+    subtitle: {
+        fontSize: 15,
+        marginTop: 8,
+        textAlign: 'center',
+        color: 'rgba(255, 255, 255, 0.7)',
+    },
+    qrContainer: {
+        padding: 20,
+        borderRadius: 16,
+    },
+    dividerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 24,
+        width: '100%',
+    },
+    divider: {
+        flex: 1,
+        height: 1,
+    },
+    dividerText: {
+        marginHorizontal: 16,
+        fontSize: 14,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        borderRadius: 12,
+        width: '100%',
+    },
+    buttonIcon: {
+        marginRight: 10,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    statusContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 24,
+    },
+    statusText: {
+        marginLeft: 8,
+        fontSize: 14,
+        color: 'rgba(255, 255, 255, 0.7)',
+    },
+    loadingContainer: {
+        alignItems: 'center',
+        paddingVertical: 40,
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 14,
+    },
+    errorContainer: {
+        alignItems: 'center',
+        paddingVertical: 20,
+        width: '100%',
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+exports.default = SignInModal;

package/src/ui/components/StepBasedScreen.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+import type { RouteName } from '../types/navigation';
+export interface StepConfig {
+    id: string;
+    component: React.ComponentType<any>;
+    props?: Record<string, unknown>;
+    canProceed?: (stepData?: unknown) => boolean;
+    onEnter?: () => void;
+    onExit?: () => void;
+}
+export interface StepBasedScreenProps extends Omit<BaseScreenProps, 'navigate'> {
+    steps: StepConfig[];
+    initialStep?: number;
+    showProgressIndicator?: boolean;
+    enableAnimations?: boolean;
+    onStepChange?: (currentStep: number, totalSteps: number) => void;
+    onComplete?: (stepData: unknown[]) => void;
+    stepData?: unknown[];
+    navigate: (screen: RouteName, props?: Record<string, unknown>) => void;
+    oxyServices: any;
+    getNavigationProps?: () => Record<string, unknown>;
+}
+declare const StepBasedScreen: React.FC<StepBasedScreenProps>;
+export default StepBasedScreen;