@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/OxyLogo.js

@@ -0,0 +1,53 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OxyLogo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const theme_1 = require("../styles/theme");
+/**
+ * SVG logo component for Oxy
+ * This component renders the Oxy logo as an SVG and uses theme colors by default
+ */
+const OxyLogo = ({ width = 24, height = 24, style, fillColor, secondaryFillColor, theme = 'light' }) => {
+    // Get colors from theme
+    const themeColors = (0, theme_1.useThemeColors)(theme);
+    // Use theme primary color if no fillColor is provided
+    const primaryColor = fillColor || themeColors.primary;
+    const innerFillColor = secondaryFillColor || themeColors.background;
+    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: width, height: height, viewBox: "0 0 294.84 174.42", style: style, children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M241.03 24.83c-3.42-9.32-9.47-19.01-19.05-22.86-6.33-2.55-13.1-2.6-19.49-.26-.52.19-2.22 1.12-2.54 1.12-.22 0-3.3-1.39-4.05-1.61-15.97-4.57-30.37 9.5-39.44 20.8-1.15 1.43-2.29 2.92-3.27 4.48-.35.28-.56-.8-.69-1.06C146.04 12.12 135.23-.4 118.95 1 106.2 2.09 97.86 12.26 96.36 24.5 89.8 16.6 81.31 9.75 71.2 7.08c-15.67-4.13-33.09-.39-45.34 10.17C-3.79 42.81-5.21 97.16 7.9 131.37c9.4 24.5 28.9 43.2 56.85 40.1 11.33-1.25 21.77-5.76 29.87-13.81.13-.03 1.58 1.62 1.9 1.91 2.63 2.38 5.97 4.23 9.43 5.07 17.29 4.17 30.59-11.83 39.99-23.82.21-.05.29.13.41.26 1.22 1.26 2.48 3.38 3.67 4.83 4.4 5.34 10.34 11.44 16.49 14.67 6.58 3.46 14.76 4.48 21.74 1.59 6.43 11.54 20.66 15.21 32.49 9.8 15.49-7.08 28.86-30.53 36.97-45.03 9.26-16.56 18.94-34.11 26.22-51.62 7.51-18.09 19.12-51.35 2.09-67.08-13.19-12.18-31.47-2.47-40.24 9.94l-4.77 6.65z", fill: primaryColor }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M241.03 24.83l4.77-6.65c8.77-12.41 27.04-22.12 40.24-9.94 17.03 15.73 5.42 48.99-2.09 67.08-7.27 17.51-16.96 35.06-26.22 51.62-8.11 14.5-21.48 37.95-36.97 45.03-11.83 5.41-26.07 1.74-32.49-9.8-6.98 2.89-15.16 1.87-21.74-1.59-6.15-3.23-12.09-9.34-16.49-14.67-1.19-1.45-2.46-3.56-3.67-4.83-.12-.13-.2-.3-.41-.26-9.4 11.99-22.7 28-39.99 23.82-3.46-.84-6.8-2.69-9.43-5.07-.32-.29-1.77-1.94-1.9-1.91-8.1 8.04-18.53 12.55-29.87 13.81-27.95 3.09-47.46-15.6-56.85-40.1C-5.21 97.16-3.79 42.81 25.86 17.24 38.11 6.68 55.52 2.94 71.2 7.07c10.11 2.67 18.6 9.52 25.16 17.42 1.5-12.24 9.84-22.4 22.59-23.5 16.29-1.4 27.1 11.12 33.56 24.44.13.26.34 1.34.69 1.06.98-1.56 2.12-3.05 3.27-4.48 9.07-11.31 23.46-25.37 39.44-20.8.75.22 3.83 1.61 4.05 1.61.32 0 2.02-.93 2.54-1.12 6.4-2.33 13.16-2.28 19.49.26 9.58 3.85 15.64 13.54 19.05 22.86zm-6.67 48c-.88-9.38-1.79-18.77-3.55-28.03s-6.28-28.62-17.53-29.63-15.8 12.97-16.25 22.08c-.74 15.27 4.07 34.76 8.66 49.33 1.38 4.37 3 10.74 6.08 14.08 2.11 2.28 5.31 4.24 8.25 5.17-7.02 9.48-14.5 19.44-18.34 30.74-2.02 5.96-3.84 17.45 2.68 21.32 9.11 5.41 18.68-5.84 23.72-12.25 5.64-7.18 10.62-15.76 15.13-23.7 7.64-13.46 15.57-27.88 22.11-41.89 6.55-14.02 15.36-34.93 14.36-50.48-.25-3.85-2.02-10.44-6.3-11.53-8.54-2.18-17.65 11.65-21.44 17.8-7.07 11.49-12.42 24.19-17.22 36.77l-.37.21zm-83.67-14.84c-.11.08-.3-.27-.36-.38-.89-1.66-1.61-4.13-2.39-5.94-3.05-7.11-6.55-15.22-10.16-22.01s-11.12-16.46-20.3-12.96-6.07 17.71-4.28 24.7c3.59 13.98 9.21 27.75 14.81 41.02-5.93 11.33-11.94 22.65-17.47 34.19-3.8 7.92-10.58 22.31-4.93 30.54 6.13 8.92 18.44-3.44 22.73-8.57l19.09-23.41.39.27c6.19 10.08 12.58 21.57 21.85 29.14 6.31 5.16 15.72 6.95 17.45-3.38 1.09-6.53-3.31-16.75-5.87-22.86-4.2-10-9.25-19.64-14.62-29.05l-.13-.52c1.51-2.98 3.38-5.75 5.03-8.65 4-7.06 7.7-14.28 11.61-21.39 4.97-9.05 14.77-23.79 13.86-34.3-.31-3.61-2.31-8.51-6.42-8.92-8.41-.84-18.76 11.28-23.48 17.35-6.12 7.86-11.53 16.49-16.43 25.15zM55 20.71c-28.18 1.93-38.49 35.65-39.8 59.2-1.68 30.16 10.02 82.97 50.53 76.2 32.13-5.37 37.37-46.47 34.97-72.86S88.19 18.44 55 20.71zm140.7 93.28c.31.07.32-.1.47-.28 1-1.16 1.69-3.21 2.78-4.4l.06-.37c-3.26-4.14-4.87-9.22-6.52-14.16-1.44-4.32-2.5-8.78-3.91-13.09-.07-.2-.12-.7-.38-.7-1.27 2.82-3.17 5.34-4.31 8.21 4.29 8.08 8.46 16.26 11.81 24.79z", fill: primaryColor }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M55 20.71c33.19-2.27 43.33 36.41 45.7 62.54s-2.84 67.49-34.97 72.86c-40.5 6.77-52.21-46.03-50.53-76.2 1.31-23.56 11.62-57.27 39.8-59.2zm.99 38.66c-4.57.62-7.12 6.56-8.21 10.46-3.47 12.39-1.15 36.95 5.85 47.99 4 6.3 10.59 7.71 14.1.13 5.48-11.82 4.06-35.72-.36-47.87-1.84-5.06-5-11.57-11.38-10.7zM150.69 57.99c4.9-8.66 10.31-17.29 16.43-25.15 4.73-6.07 15.07-18.19 23.48-17.35 4.11.41 6.1 5.31 6.42 8.92.91 10.52-8.89 25.26-13.86 34.3-3.9 7.11-7.61 14.33-11.61 21.39-1.64 2.9-3.52 5.67-5.03 8.65l.13.52c5.37 9.41 10.42 19.05 14.62 29.05 2.57 6.11 6.97 16.33 5.87 22.86-1.73 10.33-11.14 8.54-17.45 3.38-9.27-7.57-15.67-19.07-21.85-29.14l-.39-.27-19.09 23.41c-4.29 5.13-16.6 17.49-22.73 8.57-5.66-8.23 1.13-22.63 4.93-30.54 5.53-11.54 11.54-22.86 17.47-34.19-5.61-13.27-11.22-27.03-14.81-41.02-1.8-6.99-4.69-21.27 4.28-24.7s16.55 5.88 20.3 12.96 7.11 14.9 10.16 22.01c.78 1.81 1.5 4.29 2.39 5.94.06.11.25.46.36.38zM234.36 72.83l.37-.21c4.8-12.59 10.15-25.29 17.22-36.77 3.79-6.16 12.9-19.98 21.44-17.8 4.28 1.09 6.06 7.68 6.3 11.53.99 15.56-7.82 36.47-14.36 50.48-6.54 14.01-14.47 28.42-22.11 41.89-4.51 7.95-9.49 16.53-15.13 23.7-5.03 6.41-14.61 17.66-23.72 12.25-6.52-3.87-4.71-15.36-2.68-21.32 3.84-11.31 11.32-21.27 18.34-30.74-2.94-.93-6.15-2.89-8.25-5.17-3.09-3.34-4.71-9.71-6.08-14.08-4.59-14.57-9.4-34.06-8.66-49.33.44-9.11 4.77-23.11 16.25-22.08s15.83 20.68 17.53 29.63 2.67 18.65 3.55 28.03z", fill: innerFillColor }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M195.7 113.99c-3.35-8.52-7.52-16.71-11.81-24.79 1.14-2.87 3.04-5.39 4.31-8.21.25 0 .31.5.38.7 1.41 4.31 2.47 8.77 3.91 13.09 1.65 4.94 3.26 10.02 6.52 14.16l-.06.37c-1.09 1.19-1.78 3.24-2.78 4.4-.15.17-.16.35-.47.28z", fill: primaryColor }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M55.99 59.37c6.38-.87 9.53 5.65 11.38 10.7 4.42 12.14 5.84 36.05.36 47.87-3.51 7.58-10.1 6.17-14.1-.13-7-11.03-9.32-35.6-5.85-47.99 1.09-3.9 3.64-9.84 8.21-10.46z", fill: primaryColor })] }));
+};
+exports.OxyLogo = OxyLogo;
+exports.default = exports.OxyLogo;

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
+export interface OxyPayButtonProps {
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    text?: string;
+    disabled?: boolean;
+    amount: number | string;
+    currency?: string;
+    paymentItems?: PaymentItem[];
+    description?: string;
+    onPaymentResult?: (result: PaymentGatewayResult) => void;
+    /**
+     * Button background color. If not provided, uses variant ('white' or 'black').
+     */
+    color?: string;
+    /**
+     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
+     */
+    variant?: 'white' | 'black';
+}
+/**
+ * A pre-styled button for OxyPay payments that opens the Payment Gateway
+ * - Only black or white by default, but can be customized with the color prop.
+ */
+declare const OxyPayButton: React.FC<OxyPayButtonProps>;
+export default OxyPayButton;

package/src/ui/components/OxyPayButton.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const fonts_1 = require("../styles/fonts");
+const OxyLogo_1 = __importDefault(require("./OxyLogo"));
+/**
+ * A pre-styled button for OxyPay payments that opens the Payment Gateway
+ * - Only black or white by default, but can be customized with the color prop.
+ */
+const OxyPayButton = ({ style, textStyle, text = 'Pay', disabled = false, amount, currency = 'FAIR', paymentItems, description, onPaymentResult, color, variant = 'white', }) => {
+    const [buttonHeight, setButtonHeight] = (0, react_1.useState)(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';
+    // Responsive sizing
+    const logoWidth = Math.round(buttonHeight * 0.5); // 50% of button height
+    const logoHeight = Math.round(buttonHeight * 0.25); // 25% of button height
+    const fontSize = Math.round(buttonHeight * 0.35); // 35% of button height
+    const handleLayout = (e) => {
+        const h = e.nativeEvent.layout.height;
+        if (h && Math.abs(h - buttonHeight) > 1)
+            setButtonHeight(h);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor, borderColor: textColor, borderWidth: 1 }, disabled && styles.buttonDisabled, style], onPress: handlePress, disabled: disabled, activeOpacity: 0.85, onLayout: handleLayout, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.buttonContent, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: logoWidth, height: logoHeight, style: { marginRight: logoWidth * 0.12, marginTop: (fontSize - logoHeight) / 2 }, fillColor: textColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.text, { color: textColor, fontSize }, textStyle], children: text })] }) }));
+};
+// Helper to determine if a color is dark (simple luminance check)
+function isColorDark(hex) {
+    let c = hex.replace('#', '');
+    if (c.length === 3)
+        c = c.split('').map(x => x + x).join('');
+    if (c.length !== 6)
+        return false;
+    const r = Number.parseInt(c.substr(0, 2), 16);
+    const g = Number.parseInt(c.substr(2, 2), 16);
+    const b = Number.parseInt(c.substr(4, 2), 16);
+    // Perceived luminance
+    return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
+}
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        padding: 14,
+        borderRadius: 35,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        minHeight: 52,
+    },
+    buttonDisabled: {
+        opacity: 0.6,
+    },
+    buttonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    oxyLogo: {
+    // marginRight is set dynamically
+    },
+    centeredItem: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        fontFamily: fonts_1.fontFamilies.inter,
+        fontWeight: '700',
+    },
+});
+exports.default = OxyPayButton;

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

@@ -0,0 +1,37 @@
+import { type FC } from 'react';
+import type { OxyProviderProps } from '../types/navigation';
+/**
+ * OxyProvider - Universal provider for Expo apps (native + web)
+ *
+ * Provides authentication, session management, query client, and UI overlays.
+ * Does NOT wrap in SafeAreaProvider or GestureHandlerRootView — those are the
+ * consuming app's responsibility.
+ *
+ * Usage:
+ * ```tsx
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <SafeAreaProvider>
+ *       <GestureHandlerRootView style={{ flex: 1 }}>
+ *         <OxyProvider baseURL="https://api.oxy.so">
+ *           <YourApp />
+ *         </OxyProvider>
+ *       </GestureHandlerRootView>
+ *     </SafeAreaProvider>
+ *   );
+ * }
+ *
+ * function MyComponent() {
+ *   const { isAuthenticated, user, signIn, signOut } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <OxySignInButton />;
+ *   }
+ *   return <Text>Welcome, {user?.username}!</Text>;
+ * }
+ * ```
+ */
+declare const OxyProvider: FC<OxyProviderProps>;
+export default OxyProvider;

package/src/ui/components/OxyProvider.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const OxyContext_1 = require("../context/OxyContext");
+const react_query_1 = require("@tanstack/react-query");
+const FontLoader_1 = require("./FontLoader");
+const sonner_1 = require("../../lib/sonner");
+const queryClient_1 = require("../hooks/queryClient");
+const storageHelpers_1 = require("../utils/storageHelpers");
+// Initialize fonts automatically
+(0, FontLoader_1.setupFonts)();
+// Detect if running on web
+const isWeb = react_native_1.Platform.OS === 'web';
+// Conditionally import components
+let KeyboardProvider = ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+let BottomSheetRouter = null;
+let SignInModal = null;
+// KeyboardProvider only on native
+if (!isWeb) {
+    try {
+        KeyboardProvider = require('react-native-keyboard-controller').KeyboardProvider;
+    }
+    catch {
+        // KeyboardProvider not available
+    }
+}
+// BottomSheetRouter works on all platforms
+try {
+    BottomSheetRouter = require('./BottomSheetRouter').default;
+}
+catch (error) {
+    if (__DEV__) {
+        console.error('[OxyProvider] Failed to load BottomSheetRouter:', error);
+    }
+}
+// SignInModal works on all platforms
+try {
+    SignInModal = require('./SignInModal').default;
+}
+catch {
+    // SignInModal not available
+}
+if (__DEV__ && !BottomSheetRouter) {
+    console.warn('[OxyProvider] BottomSheetRouter is null — bottom sheet navigation will not work. Check that BottomSheetRouter.tsx and its dependencies are importable.');
+}
+/**
+ * OxyProvider - Universal provider for Expo apps (native + web)
+ *
+ * Provides authentication, session management, query client, and UI overlays.
+ * Does NOT wrap in SafeAreaProvider or GestureHandlerRootView — those are the
+ * consuming app's responsibility.
+ *
+ * Usage:
+ * ```tsx
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <SafeAreaProvider>
+ *       <GestureHandlerRootView style={{ flex: 1 }}>
+ *         <OxyProvider baseURL="https://api.oxy.so">
+ *           <YourApp />
+ *         </OxyProvider>
+ *       </GestureHandlerRootView>
+ *     </SafeAreaProvider>
+ *   );
+ * }
+ *
+ * function MyComponent() {
+ *   const { isAuthenticated, user, signIn, signOut } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <OxySignInButton />;
+ *   }
+ *   return <Text>Welcome, {user?.username}!</Text>;
+ * }
+ * ```
+ */
+const OxyProvider = ({ oxyServices, children, onAuthStateChange, storageKeyPrefix, baseURL, authWebUrl, authRedirectUri, queryClient: providedQueryClient, }) => {
+    // Simple storage initialization for query persistence
+    const storageRef = (0, react_1.useRef)(null);
+    const queryClientRef = (0, react_1.useRef)(null);
+    // Initialize immediately if provided via prop to avoid a null-render frame
+    const [queryClient, setQueryClient] = (0, react_1.useState)(() => {
+        if (providedQueryClient) {
+            queryClientRef.current = providedQueryClient;
+            return providedQueryClient;
+        }
+        return null;
+    });
+    (0, react_1.useEffect)(() => {
+        if (providedQueryClient) {
+            queryClientRef.current = providedQueryClient;
+            setQueryClient(providedQueryClient);
+            return;
+        }
+        // Initialize storage and create query client
+        let mounted = true;
+        (0, storageHelpers_1.createPlatformStorage)()
+            .then((storage) => {
+            if (mounted && !queryClientRef.current) {
+                storageRef.current = storage;
+                const client = (0, queryClient_1.createQueryClient)(storage);
+                queryClientRef.current = client;
+                setQueryClient(client);
+            }
+        })
+            .catch((error) => {
+            // If storage fails, create query client without persistence
+            if (mounted && !queryClientRef.current) {
+                if (__DEV__) {
+                    console.warn('[OxyProvider] Failed to initialize storage for query persistence', error);
+                }
+                const client = (0, queryClient_1.createQueryClient)(null);
+                queryClientRef.current = client;
+                setQueryClient(client);
+            }
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [providedQueryClient]);
+    // Hook React Query focus manager into app state (native) or visibility (web)
+    (0, react_1.useEffect)(() => {
+        if (isWeb) {
+            // Web: use document visibility
+            const handleVisibilityChange = () => {
+                react_query_1.focusManager.setFocused(document.visibilityState === 'visible');
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+            return () => {
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+            };
+        }
+        // Native: use AppState
+        const subscription = react_native_1.AppState.addEventListener('change', (state) => {
+            react_query_1.focusManager.setFocused(state === 'active');
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+    // Setup network status monitoring for offline detection
+    (0, react_1.useEffect)(() => {
+        let cleanup;
+        const setupNetworkMonitoring = async () => {
+            try {
+                if (isWeb) {
+                    // Web: use navigator.onLine
+                    react_query_1.onlineManager.setOnline(navigator.onLine);
+                    const handleOnline = () => react_query_1.onlineManager.setOnline(true);
+                    const handleOffline = () => react_query_1.onlineManager.setOnline(false);
+                    window.addEventListener('online', handleOnline);
+                    window.addEventListener('offline', handleOffline);
+                    cleanup = () => {
+                        window.removeEventListener('online', handleOnline);
+                        window.removeEventListener('offline', handleOffline);
+                    };
+                }
+                else {
+                    // Native: try to use NetInfo
+                    try {
+                        const NetInfo = await import('@react-native-community/netinfo');
+                        const state = await NetInfo.default.fetch();
+                        react_query_1.onlineManager.setOnline(state.isConnected ?? true);
+                        const unsubscribe = NetInfo.default.addEventListener((state) => {
+                            react_query_1.onlineManager.setOnline(state.isConnected ?? true);
+                        });
+                        cleanup = () => unsubscribe();
+                    }
+                    catch {
+                        // NetInfo not available, default to online
+                        react_query_1.onlineManager.setOnline(true);
+                    }
+                }
+            }
+            catch (error) {
+                // Default to online if detection fails
+                react_query_1.onlineManager.setOnline(true);
+            }
+        };
+        setupNetworkMonitoring();
+        return () => {
+            cleanup?.();
+        };
+    }, []);
+    // Ensure we have a valid QueryClient
+    if (!queryClient) {
+        return null;
+    }
+    // Core content: QueryClient + OxyContext + UI overlays
+    const coreContent = ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsxs)(OxyContext_1.OxyContextProvider, { oxyServices: oxyServices, baseURL: baseURL, authWebUrl: authWebUrl, authRedirectUri: authRedirectUri, storageKeyPrefix: storageKeyPrefix, onAuthStateChange: onAuthStateChange, children: [children, BottomSheetRouter && (0, jsx_runtime_1.jsx)(BottomSheetRouter, {}), SignInModal && (0, jsx_runtime_1.jsx)(SignInModal, {}), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(KeyboardProvider, { children: coreContent }));
+};
+exports.default = OxyProvider;

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

@@ -0,0 +1,64 @@
+import type React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+export interface OxySignInButtonProps {
+    /**
+     * Controls the appearance of the button
+     * @default 'default'
+     */
+    variant?: 'default' | 'outline' | 'contained';
+    /**
+     * Optional function to handle button press
+     * If not provided, the button will use the showBottomSheet method from OxyContext
+     */
+    onPress?: () => void;
+    /**
+     * Additional styles for the button container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the button text
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom button text
+     * @default 'Sign in with Oxy'
+     */
+    text?: string;
+    /**
+     * Whether to disable the button
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the button even if user is already authenticated
+     * @default false
+     */
+    showWhenAuthenticated?: boolean;
+}
+/**
+ * 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"
+ * />
+ *
+ * // Custom handler
+ * <OxySignInButton onPress={() => {
+ *   // Custom authentication flow
+ *   console.log('Custom auth flow initiated');
+ * }} />
+ * ```
+ */
+export declare const OxySignInButton: React.FC<OxySignInButtonProps>;
+export default OxySignInButton;

package/src/ui/components/OxySignInButton.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OxySignInButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const authStore_1 = require("../stores/authStore");
+const shallow_1 = require("zustand/react/shallow");
+const fonts_1 = require("../styles/fonts");
+const OxyLogo_1 = __importDefault(require("./OxyLogo"));
+const SignInModal_1 = require("./SignInModal");
+/**
+ * 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"
+ * />
+ *
+ * // Custom handler
+ * <OxySignInButton onPress={() => {
+ *   // Custom authentication flow
+ *   console.log('Custom auth flow initiated');
+ * }} />
+ * ```
+ */
+const OxySignInButton = ({ variant = 'default', onPress, style, textStyle, text = 'Sign in with Oxy', disabled = false, showWhenAuthenticated = false, }) => {
+    const { isAuthenticated, isLoading } = (0, authStore_1.useAuthStore)((0, shallow_1.useShallow)((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading })));
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    // Subscribe to modal close events
+    (0, react_1.useEffect)(() => {
+        return (0, SignInModal_1.subscribeToSignInModal)(setIsModalOpen);
+    }, []);
+    // Handle button press - opens full-screen sign-in modal with QR code and auth options
+    const handlePress = (0, react_1.useCallback)(() => {
+        if (onPress) {
+            onPress();
+            return;
+        }
+        setIsModalOpen(true);
+        // Show the full-screen sign-in modal on all platforms
+        (0, SignInModal_1.showSignInModal)();
+    }, [onPress]);
+    // Don't show the button if already authenticated (unless explicitly overridden)
+    if (isAuthenticated && !showWhenAuthenticated)
+        return null;
+    const isButtonDisabled = disabled || isLoading || isModalOpen;
+    // Determine the button style based on the variant
+    const getButtonStyle = () => {
+        switch (variant) {
+            case 'outline':
+                return [styles.buttonOutline, style];
+            case 'contained':
+                return [styles.buttonContained, style];
+            default:
+                return [styles.buttonDefault, style];
+        }
+    };
+    // Determine the text style based on the variant
+    const getTextStyle = () => {
+        switch (variant) {
+            case 'outline':
+                return [styles.textOutline, textStyle];
+            case 'contained':
+                return [styles.textContained, textStyle];
+            default:
+                return [styles.textDefault, textStyle];
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, getButtonStyle(), isButtonDisabled && styles.buttonDisabled], onPress: handlePress, disabled: isButtonDisabled, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.buttonContent, children: [(0, jsx_runtime_1.jsx)(OxyLogo_1.default, { width: 20, height: 20, fillColor: variant === 'contained' ? 'white' : '#d169e5', secondaryFillColor: variant === 'contained' ? '#d169e5' : undefined, style: isButtonDisabled ? { opacity: 0.6 } : undefined }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled], children: isLoading || isModalOpen ? 'Signing in...' : text })] }) }));
+};
+exports.OxySignInButton = OxySignInButton;
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        padding: 14,
+        borderRadius: 35,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonDefault: {
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#DDDDDD',
+        ...react_native_1.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: fonts_1.fontFamilies.interSemiBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? '600' : undefined,
+        fontSize: 16,
+        marginLeft: 10,
+    },
+    textDefault: {
+        color: '#333333',
+    },
+    textOutline: {
+        color: '#d169e5',
+    },
+    textContained: {
+        color: '#FFFFFF',
+    },
+    textDisabled: {
+        color: '#888888',
+    },
+});
+exports.default = exports.OxySignInButton;

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

@@ -0,0 +1,17 @@
+import type React from 'react';
+interface ProfileCardProps {
+    user: {
+        username: string;
+        email?: string;
+        name?: {
+            full?: string;
+        };
+        avatar?: string;
+    };
+    theme: 'light' | 'dark';
+    onEditPress?: () => void;
+    onClosePress?: () => void;
+    showCloseButton?: boolean;
+}
+declare const ProfileCard: React.FC<ProfileCardProps>;
+export default ProfileCard;