@oxyhq/services 5.5.8 → 5.6.0

package/src/ui/components/OxyProvider.tsx

@@ -4,15 +4,13 @@ import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-cont
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { OxyProviderProps } from '../navigation/types';
 import { OxyContextProvider, useOxy } from '../context/OxyContext';
-import { Provider } from 'react-redux';
-import { store } from '../store';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
 
 // Import bottom sheet components directly - no longer a peer dependency
-import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from './bottomSheet';
-import type { BottomSheetModalRef } from './bottomSheet';
+import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import type { BottomSheetModalMethods as BottomSheetModalRef } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 // Initialize fonts automatically
 setupFonts();
@@ -32,34 +30,15 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         onAuthStateChange,
         storageKeyPrefix,
         showInternalToaster = true,
-        store: externalStore,
-        skipReduxProvider = false,
         ...bottomSheetProps
     } = props;
 
     // Create internal bottom sheet ref
     const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
-    // Determine which store to use
-    const storeToUse = externalStore || store;
-
-    // Helper function to wrap content with Redux Provider if needed
-    const wrapWithReduxProvider = (content: React.ReactNode) => {
-        if (skipReduxProvider) {
-            // App manages Redux Provider externally
-            return content;
-        }
-
-        return (
-            <Provider store={storeToUse}>
-                {content}
-            </Provider>
-        );
-    };
-
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
-        return wrapWithReduxProvider(
+        return (
             <OxyContextProvider
                 oxyServices={oxyServices}
                 storageKeyPrefix={storageKeyPrefix}
@@ -71,7 +50,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     }
 
     // Otherwise, provide both the context and the bottom sheet UI
-    return wrapWithReduxProvider(
+    return (
         <OxyContextProvider
             oxyServices={oxyServices}
             storageKeyPrefix={storageKeyPrefix}
@@ -118,166 +97,115 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
 }) => {
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModalRef>(null);
-
-    // Create a ref to store the navigation function from OxyRouter
     const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
-
-    // Track content height for dynamic sizing
-    const [contentHeight, setContentHeight] = useState<number>(0);
-    const [containerWidth, setContainerWidth] = useState<number>(800); // Track actual container width
-    const screenHeight = Dimensions.get('window').height;
-
-    // Set up effect to sync the internal ref with our modal ref
+    // Remove contentHeight, containerWidth, and snap point state/logic
+    // Animation values - keep for content fade/slide
+    const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
+    const slideAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 0 : 50)).current;
     useEffect(() => {
         if (bottomSheetRef && modalRef.current) {
-            // We need to expose certain methods to the internal ref
             const methodsToExpose = ['snapToIndex', 'snapToPosition', 'close', 'expand', 'collapse', 'present', 'dismiss'];
-
             methodsToExpose.forEach((method) => {
                 if (modalRef.current && typeof modalRef.current[method as keyof typeof modalRef.current] === 'function') {
-                    // Properly forward methods from modalRef to bottomSheetRef
-                    // @ts-ignore - We're doing a runtime compatibility layer
+                    // @ts-ignore
                     bottomSheetRef.current = bottomSheetRef.current || {};
-                    // @ts-ignore - Dynamic method assignment
+                    // @ts-ignore
                     bottomSheetRef.current[method] = (...args: any[]) => {
-                        // @ts-ignore - Dynamic method call
+                        // @ts-ignore
                         return modalRef.current?.[method]?.(...args);
                     };
                 }
             });
-
             // Add a method to navigate between screens
-            // @ts-ignore - Adding custom method
+            // @ts-ignore
             bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
-                console.log(`Navigation requested: ${screenName}`, props);
-
-                // Try direct navigation function first (most reliable)
                 if (navigationRef.current) {
-                    console.log('Using direct navigation function');
                     navigationRef.current(screenName, props);
                     return;
                 }
-
-                // Fallback to event-based navigation
                 if (typeof document !== 'undefined') {
-                    // For web - use a custom event
-                    console.log('Using web event navigation');
                     const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
                     document.dispatchEvent(event);
                 } else {
-                    // For React Native - use the global variable approach
-                    console.log('Using React Native global navigation');
                     (globalThis as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
         }
     }, [bottomSheetRef, modalRef]);
-
-    // Use percentage-based snap points for better cross-platform compatibility
-    const [snapPoints, setSnapPoints] = useState<(string | number)[]>(['60%', '90%']);
-
-    // Animation values - we'll use these for content animations
-    // Start with opacity 1 on Android to avoid visibility issues
-    const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
-    const slideAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 0 : 50)).current;
-
-    // Track keyboard status
+    // Keyboard handling (unchanged)
     const [keyboardVisible, setKeyboardVisible] = useState(false);
     const insets = useSafeAreaInsets();
-
-    // Handle keyboard events - memoized to prevent re-registration
     useEffect(() => {
         const keyboardWillShowListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
-            (event: KeyboardEvent) => {
+            () => {
                 setKeyboardVisible(true);
-                // Ensure the bottom sheet remains visible when keyboard opens
-                // by adjusting to the highest snap point
                 if (modalRef.current) {
-                    // Use requestAnimationFrame to avoid conflicts
                     requestAnimationFrame(() => {
-                        modalRef.current?.snapToIndex(1);
+                        modalRef.current?.expand?.();
                     });
                 }
             }
         );
-
         const keyboardWillHideListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
             () => {
                 setKeyboardVisible(false);
             }
         );
-
-        // Cleanup listeners
         return () => {
             keyboardWillShowListener.remove();
             keyboardWillHideListener.remove();
         };
-    }, []); // Remove keyboardVisible dependency to prevent re-registration
-
+    }, []);
     // Present the modal when component mounts, but only if autoPresent is true
     useEffect(() => {
-        // Add expand method that handles presentation and animations
         if (bottomSheetRef && modalRef.current) {
-            // Override expand to handle initial presentation
-            // @ts-ignore - Dynamic method assignment
+            // @ts-ignore
             bottomSheetRef.current.expand = () => {
-                // Only present if not already presented
                 modalRef.current?.present();
-
-                // Start content animations after presenting
                 Animated.parallel([
                     Animated.timing(fadeAnim, {
                         toValue: 1,
                         duration: 300,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+                        useNativeDriver: Platform.OS === 'ios',
                     }),
                     Animated.spring(slideAnim, {
                         toValue: 0,
                         friction: 8,
                         tension: 40,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+                        useNativeDriver: Platform.OS === 'ios',
                     }),
                 ]).start();
             };
         }
-
-        // Auto-present if the autoPresent prop is true
         if (autoPresent && modalRef.current) {
-            // Small delay to allow everything to initialize
             const timer = setTimeout(() => {
                 modalRef.current?.present();
-
-                // Start content animations after presenting
                 Animated.parallel([
                     Animated.timing(fadeAnim, {
                         toValue: 1,
                         duration: 300,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+                        useNativeDriver: Platform.OS === 'ios',
                     }),
                     Animated.spring(slideAnim, {
                         toValue: 0,
                         friction: 8,
                         tension: 40,
-                        useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+                        useNativeDriver: Platform.OS === 'ios',
                     }),
                 ]).start();
             }, 100);
-
             return () => clearTimeout(timer);
         }
     }, [bottomSheetRef, modalRef, fadeAnim, slideAnim, autoPresent]);
-
-    // Close the bottom sheet with animation
+    // Close the bottom sheet with animation (unchanged)
     const handleClose = useCallback(() => {
-        // Animate content out
         Animated.timing(fadeAnim, {
             toValue: 0,
-            duration: Platform.OS === 'android' ? 100 : 200, // Faster on Android
-            useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+            duration: Platform.OS === 'android' ? 100 : 200,
+            useNativeDriver: Platform.OS === 'ios',
         }).start(() => {
-            // Dismiss the sheet
             modalRef.current?.dismiss();
             if (onClose) {
                 setTimeout(() => {
@@ -286,33 +214,21 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             }
         });
     }, [onClose, fadeAnim]);
-
-    // Handle authentication success from the bottom sheet screens
+    // Handle authentication success (unchanged)
     const handleAuthenticated = useCallback((user: any) => {
-        // Stop any ongoing animations that might interfere with dismissal
         fadeAnim.stopAnimation();
         slideAnim.stopAnimation();
-
-        // Call the prop callback if provided
         if (onAuthenticated) {
             onAuthenticated(user);
         }
-
-        // Automatically dismiss the bottom sheet after successful authentication
-        // Use direct dismissal for immediate closure
         modalRef.current?.dismiss();
-
-        // Call onClose callback if provided
         if (onClose) {
             setTimeout(() => {
                 onClose();
             }, 100);
         }
     }, [onAuthenticated, onClose, fadeAnim, slideAnim]);
-
-    // Remove handle animation to prevent conflicts with bottom sheet animations
-
-    // Handle backdrop rendering
+    // Backdrop rendering (unchanged)
     const renderBackdrop = useCallback(
         (props: BottomSheetBackdropProps) => (
             <BottomSheetBackdrop
@@ -324,93 +240,25 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         ),
         []
     );
-
-    // Memoize background style based on theme to prevent recalculation on every render
+    // Memoize background style
     const backgroundStyle = useMemo(() => {
         const baseColor = customStyles.backgroundColor || (theme === 'light' ? '#FFFFFF' : '#121212');
         return {
             backgroundColor: baseColor,
-            // Make sure there's no transparency
             opacity: 1,
-            // Additional Android-specific styles
             ...Platform.select({
-                android: {
-                    elevation: 24,
-                }
+                android: { elevation: 24 },
             })
         };
     }, [customStyles.backgroundColor, theme]);
-
-    // Method to adjust snap points from Router - memoized with stable dependencies
-    const adjustSnapPoints = useCallback((points: string[]) => {
-        setSnapPoints(prevSnapPoints => {
-            // Ensure snap points are high enough when keyboard is visible
-            if (keyboardVisible) {
-                // If keyboard is visible, make sure we use higher snap points
-                // to ensure the sheet content remains visible
-                const highestPoint = points[points.length - 1];
-                const newSnapPoints = [highestPoint, highestPoint];
-                // Only update if actually different
-                if (JSON.stringify(prevSnapPoints) !== JSON.stringify(newSnapPoints)) {
-                    return newSnapPoints;
-                }
-                return prevSnapPoints;
-            } else {
-                // If we have content height, use it as a constraint
-                if (contentHeight > 0) {
-                    // Calculate content height as percentage of screen (plus some padding)
-                    // Clamp to ensure we don't exceed 90% to leave space for UI elements
-                    const contentHeightPercent = Math.min(Math.ceil((contentHeight) / screenHeight * 100), 90);
-                    const contentHeightPercentStr = `${contentHeightPercent}%`;
-                    // Use content height for first snap point if it's taller than the default
-                    const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercentStr : points[0];
-                    const newSnapPoints = [firstPoint, points[1] || '90%'];
-                    // Only update if actually different
-                    if (JSON.stringify(prevSnapPoints) !== JSON.stringify(newSnapPoints)) {
-                        return newSnapPoints;
-                    }
-                    return prevSnapPoints;
-                } else {
-                    // Only update if actually different
-                    if (JSON.stringify(prevSnapPoints) !== JSON.stringify(points)) {
-                        return points;
-                    }
-                    return prevSnapPoints;
-                }
-            }
-        });
-    }, [keyboardVisible, contentHeight, screenHeight]);
-
-    // Handle content layout changes to measure height and width - prevent rerender loops
-    const handleContentLayout = useCallback((event: any) => {
-        const { height: layoutHeight, width: layoutWidth } = event.nativeEvent.layout;
-
-        // Only update if values actually changed to prevent unnecessary rerenders
-        setContentHeight(prevHeight => {
-            if (Math.abs(prevHeight - layoutHeight) > 5) { // 5px threshold to prevent minor fluctuations
-                return layoutHeight;
-            }
-            return prevHeight;
-        });
-
-        setContainerWidth(prevWidth => {
-            if (Math.abs(prevWidth - layoutWidth) > 5) { // 5px threshold to prevent minor fluctuations
-                return layoutWidth;
-            }
-            return prevWidth;
-        });
-    }, []); // Remove dependencies that cause rerender loops
-
-    // Handle sheet index changes - simplified to prevent unnecessary rerenders
-    const handleSheetChanges = useCallback((index: number) => {
-        // Sheet change handling can be added here if needed
-    }, []);
-
+    // Handle sheet index changes (unchanged)
+    const handleSheetChanges = useCallback((index: number) => { }, []);
+    // Modernized BottomSheetModal usage
     return (
         <BottomSheetModal
             ref={modalRef}
             index={0}
-            snapPoints={snapPoints}
+            enableDynamicSizing={true}
             enablePanDownToClose
             backdropComponent={renderBackdrop}
             backgroundStyle={[
@@ -427,16 +275,17 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             }}
             onChange={handleSheetChanges}
             style={styles.bottomSheetContainer}
-            // Adding additional props to improve layout behavior
             keyboardBehavior="interactive"
             keyboardBlurBehavior="restore"
             android_keyboardInputMode="adjustResize"
-            enableOverDrag={true}
+            enableOverDrag={false}
             enableContentPanningGesture={true}
             enableHandlePanningGesture={true}
             overDragResistanceFactor={2.5}
             enableBlurKeyboardOnGesture={true}
-            // Log sheet animations for debugging
+            detached
+            // Uncomment below to use a sticky footer
+            // footerComponent={<YourFooterComponent />}
             onAnimate={(fromIndex: number, toIndex: number) => {
                 console.log(`Animating from index ${fromIndex} to ${toIndex}`);
             }}
@@ -444,23 +293,15 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             <BottomSheetScrollView
                 style={[
                     styles.contentContainer,
-                    // Override padding if provided in customStyles
-                    customStyles.contentPadding !== undefined && { padding: customStyles.contentPadding },
                 ]}
-                onLayout={handleContentLayout}
             >
                 <View style={styles.centeredContentWrapper}>
                     <Animated.View
                         style={[
                             styles.animatedContent,
-                            // Apply animations - conditionally for Android
                             Platform.OS === 'android' ?
-                                {
-                                    opacity: 1,  // No fade animation on Android
-                                } : {
-                                    opacity: fadeAnim,
-                                    transform: [{ translateY: slideAnim }]
-                                }
+                                { opacity: 1 } :
+                                { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
                         ]}
                     >
                         <OxyRouter
@@ -469,14 +310,12 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                             onClose={handleClose}
                             onAuthenticated={handleAuthenticated}
                             theme={theme}
-                            adjustSnapPoints={adjustSnapPoints}
                             navigationRef={navigationRef}
-                            containerWidth={containerWidth}
+                            containerWidth={800} // static, since dynamic sizing is used
                         />
                     </Animated.View>
                 </View>
             </BottomSheetScrollView>
-            {/* Internal toaster - only show if showInternalToaster is true */}
             {showInternalToaster && (
                 <View style={styles.toasterContainer}>
                     <Toaster position="top-center" swipeToDismissDirection="left" />
@@ -521,7 +360,6 @@ const styles = StyleSheet.create({
         position: 'relative',
         backgroundColor: 'transparent',
         ...Platform.select({
-
             android: {
                 height: '100%',
                 width: '100%',

package/src/ui/components/OxySignInButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, ViewStyle, TextStyle, StyleProp, Platform } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
-import { fontFamilies, shadows } from '../styles';
+import { fontFamilies } from '../styles/fonts';
 
 export interface OxySignInButtonProps {
     /**
@@ -168,7 +168,18 @@ const styles = StyleSheet.create({
         backgroundColor: '#FFFFFF',
         borderWidth: 1,
         borderColor: '#DDDDDD',
-        ...shadows.button,
+        ...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',

package/src/ui/components/icon/FAIRWalletIcon.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { G, Path } from 'react-native-svg';
+
+interface FAIRWalletIconProps {
+    size?: number;
+    style?: any;
+}
+
+const FAIRWalletIcon: React.FC<FAIRWalletIconProps> = ({ size = 28, style }) => {
+    const containerSize = size + 18;
+    return (
+        <View
+            style={[
+                styles.circle,
+                { width: containerSize, height: containerSize, borderRadius: containerSize / 2 },
+                style,
+            ]}
+        >
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+                <Svg
+                    viewBox="0 0 157.26 85.66"
+                    width={containerSize * 0.8}
+                    height={containerSize * 0.8}
+                    preserveAspectRatio="xMidYMid meet"
+                >
+                    <G data-name="Layer 2">
+                        <G data-name="Layer 1">
+                            <Path d="M10.25,20.81a20.49,20.49,0,0,1,28,7.5L53.6,54.92a20.49,20.49,0,0,1-7.5,28h0a20.49,20.49,0,0,1-28-7.5L2.75,48.8a20.49,20.49,0,0,1,7.5-28Z" fill="rgb(159, 251, 80)" />
+                            <Path d="M74.38,2.75a20.49,20.49,0,0,0-28,7.5L20.6,54.92a20.5,20.5,0,0,0,7.5,28h0a20.5,20.5,0,0,0,28-7.5L81.88,30.74a20.48,20.48,0,0,0-7.5-28Z" fill="rgb(159, 251, 80)" />
+                            <Path d="M127.87,2.75a20.49,20.49,0,0,0-28,7.5L74.09,54.92a20.49,20.49,0,0,0,7.5,28h0a20.49,20.49,0,0,0,28-7.5l25.79-44.67a20.49,20.49,0,0,0-7.5-28Z" fill="rgb(255, 255, 255)" />
+                            <Path d="M121.84,67.51a17.71,17.71,0,1,1,17.71,17.71,17.71,17.71,0,0,1-17.71-17.71Z" fill="rgb(255, 255, 255)" />
+                        </G>
+                    </G>
+                </Svg>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    circle: {
+        backgroundColor: '#1b1f0a',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default FAIRWalletIcon; 

package/src/ui/components/icon/index.ts

@@ -1,2 +1,3 @@
 export { default as OxyIcon } from './OxyIcon';
+export { default as FAIRWalletIcon } from './FAIRWalletIcon';
 export type { IconProps } from './OxyIcon';

package/src/ui/components/index.ts

@@ -13,3 +13,4 @@ export { FontLoader, setupFonts } from './FontLoader';
 export { default as OxyLogo } from './OxyLogo';
 export { default as OxyProvider } from './OxyProvider';
 export { default as OxySignInButton } from './OxySignInButton';
+export { default as OxyPayButton } from './OxyPayButton';

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 interface ButtonConfig {
@@ -32,13 +32,17 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             gap: 6,
             minWidth: 70,
             borderWidth: 1,
-            shadowOffset: {
-                width: 0,
-                height: 2,
-            },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 2,
+            ...Platform.select({
+                web: {
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                },
+                default: {
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                }
+            }),
         };
 
         // Determine border radius based on position