@oxyhq/services 5.21.6 → 5.22.0

package/src/ui/components/FontLoader.tsx

@@ -4,25 +4,25 @@ import { Platform } from 'react-native';
 import * as Font from 'expo-font';
 
 /**
- * Get the Phudu font sources for both native and web environments 
+ * Get the Inter font sources for both native and web environments
  * This is specifically designed to work when distributed as an npm package
  */
-const getPhuduFonts = () => {
+const getInterFonts = () => {
     try {
         // For both development and when used as a package
         // Load all static font weights
         return {
-            'Phudu-Light': require('../../assets/fonts/Phudu/Phudu-Light.ttf'),
-            'Phudu-Regular': require('../../assets/fonts/Phudu/Phudu-Regular.ttf'),
-            'Phudu-Medium': require('../../assets/fonts/Phudu/Phudu-Medium.ttf'),
-            'Phudu-SemiBold': require('../../assets/fonts/Phudu/Phudu-SemiBold.ttf'),
-            'Phudu-Bold': require('../../assets/fonts/Phudu/Phudu-Bold.ttf'),
-            'Phudu-ExtraBold': require('../../assets/fonts/Phudu/Phudu-ExtraBold.ttf'),
-            'Phudu-Black': require('../../assets/fonts/Phudu/Phudu-Black.ttf'),
+            'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
+            'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
+            'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
+            'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
+            'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
+            'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
+            'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
         };
     } catch (error) {
         if (__DEV__) {
-        console.warn('Failed to load Phudu fonts:', error);
+        console.warn('Failed to load Inter fonts:', error);
         }
         return null;
     }
@@ -44,14 +44,14 @@ export const FontLoader = ({
         const loadFonts = async () => {
             try {
                 // Get all the font weights
-                const phuduFonts = getPhuduFonts();
+                const interFonts = getInterFonts();
 
-                if (!phuduFonts) {
-                    throw new Error('Phudu font files not found');
+                if (!interFonts) {
+                    throw new Error('Inter font files not found');
                 }
 
-                // Load all the static Phudu fonts with their respective weights
-                await Font.loadAsync(phuduFonts);
+                // Load all the static Inter fonts with their respective weights
+                await Font.loadAsync(interFonts);
 
                 setFontState('loaded');
             } catch (error) {
@@ -82,10 +82,10 @@ export const FontLoader = ({
  */
 export const setupFonts = async () => {
     try {
-        const phuduFonts = getPhuduFonts();
+        const interFonts = getInterFonts();
 
-        if (!phuduFonts) {
-            throw new Error('Phudu font files not found');
+        if (!interFonts) {
+            throw new Error('Inter font files not found');
         }
 
         if (Platform.OS === 'web') {
@@ -97,44 +97,44 @@ export const setupFonts = async () => {
                 // Define @font-face rules for each font weight
                 const fontFaceRules = `
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-Light']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-Light']}) format('truetype');
                         font-weight: 300;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-Regular']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-Regular']}) format('truetype');
                         font-weight: 400;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-Medium']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-Medium']}) format('truetype');
                         font-weight: 500;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-SemiBold']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-SemiBold']}) format('truetype');
                         font-weight: 600;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-Bold']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-Bold']}) format('truetype');
                         font-weight: 700;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-ExtraBold']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
                         font-weight: 800;
                         font-style: normal;
                     }
                     @font-face {
-                        font-family: 'Phudu';
-                        src: url(${phuduFonts['Phudu-Black']}) format('truetype');
+                        font-family: 'Inter';
+                        src: url(${interFonts['Inter-Black']}) format('truetype');
                         font-weight: 900;
                         font-style: normal;
                     }
@@ -143,12 +143,12 @@ export const setupFonts = async () => {
                 style.textContent = fontFaceRules;
                 document.head.appendChild(style);
                 if (__DEV__) {
-                console.info('All Phudu web fonts have been dynamically loaded');
+                console.info('All Inter web fonts have been dynamically loaded');
                 }
             }
         } else {
             // Attempt to load the fonts anyway (this works if the consumer has linked the assets)
-            await Font.loadAsync(phuduFonts);
+            await Font.loadAsync(interFonts);
         }
 
         return true;

package/src/ui/components/Header.tsx

@@ -417,14 +417,14 @@ const styles = StyleSheet.create({
     titleDefault: {
         fontSize: 18,
         fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 22,
     },
     titleLarge: {
         fontSize: 28,
         fontWeight: '800',
-        fontFamily: fontFamilies.phuduExtraBold,
+        fontFamily: fontFamilies.interExtraBold,
         letterSpacing: -1,
         lineHeight: 34,
         marginBottom: 3,
@@ -432,7 +432,7 @@ const styles = StyleSheet.create({
     titleMinimal: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
         letterSpacing: -0.3,
         lineHeight: 20,
     },
@@ -486,7 +486,7 @@ const styles = StyleSheet.create({
     actionText: {
         fontSize: 14,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
         letterSpacing: -0.2,
     },
     loadingContainer: {

package/src/ui/components/OxyPayButton.tsx

@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     text: {
-        fontFamily: fontFamilies.phudu,
+        fontFamily: fontFamilies.inter,
         fontWeight: '700',
     },
 });

package/src/ui/components/OxySignInButton.tsx

@@ -2,6 +2,7 @@ import type React from 'react';
 import { useState } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useAuth } from '../hooks/useAuth';
+import { fontFamilies } from '../styles/fonts';
 import OxyLogo from './OxyLogo';
 
 export interface OxySignInButtonProps {
@@ -198,7 +199,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
     text: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-SemiBold',
+        fontFamily: fontFamilies.interSemiBold,
         fontWeight: Platform.OS === 'web' ? '600' : undefined,
         fontSize: 16,
         marginLeft: 10,

package/src/ui/components/ProfileCard.tsx

@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
     userName: {
         fontSize: 22,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         marginBottom: 4,
     },
     userEmail: {

package/src/ui/components/SectionTitle.tsx

@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
     sectionTitle: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
 });
 

package/src/ui/components/StepBasedScreen.tsx

@@ -10,6 +10,7 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import { useThemeColors, createAuthStyles } from '../styles';
+import { fontFamilies } from '../styles/fonts';
 import type { BaseScreenProps, StepController } from '../types/navigation';
 import type { RouteName } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
@@ -139,7 +140,7 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             marginBottom: 24,
         },
         modernTitle: {
-            fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+            fontFamily: fontFamilies.interBold,
             fontWeight: Platform.OS === 'web' ? 'bold' as const : undefined,
             fontSize: 42,
             lineHeight: 50.4, // 42 * 1.2

package/src/ui/components/feedback/feedbackStyles.ts

@@ -1,5 +1,6 @@
 import { StyleSheet, Platform, Dimensions } from 'react-native';
 import { screenContentStyle } from '../../constants/spacing';
+import { fontFamilies } from '../../styles/fonts';
 import type { FeedbackColors } from './types';
 
 export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.create({
@@ -25,7 +26,7 @@ export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.creat
         marginBottom: 24,
     },
     stepTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         fontSize: 42,
         lineHeight: 48,

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from 'react';
+import { TouchableOpacity, Animated, Easing } from 'react-native';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+interface AnimatedButtonProps {
+  isSelected: boolean;
+  onPress: () => void;
+  icon: string;
+  primaryColor: string;
+  textColor: string;
+  style: any;
+}
+
+/**
+ * Animated button component for smooth selection transitions
+ * Used in file management views for view mode toggles
+ */
+export const AnimatedButton: React.FC<AnimatedButtonProps> = ({
+  isSelected,
+  onPress,
+  icon,
+  primaryColor,
+  textColor,
+  style,
+}) => {
+  const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: isSelected ? 1 : 0,
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [isSelected, animatedValue]);
+
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['transparent', primaryColor],
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+      <Animated.View style={[style, { backgroundColor }]}>
+        <Animated.View>
+          <MaterialCommunityIcons
+            name={icon as any}
+            size={16}
+            color={isSelected ? '#FFFFFF' : textColor}
+          />
+        </Animated.View>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};

package/src/ui/components/fileManagement/styles.ts

@@ -50,14 +50,14 @@ export const fileManagementStyles = StyleSheet.create({
     headerTitle: {
         fontSize: 22,
         fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 28,
     },
     headerSubtitle: {
         fontSize: 13,
         fontWeight: '500',
-        fontFamily: fontFamilies.phuduMedium,
+        fontFamily: fontFamilies.interMedium,
         marginTop: 2,
         letterSpacing: 0.2,
     },
@@ -133,7 +133,7 @@ export const fileManagementStyles = StyleSheet.create({
     searchInput: {
         flex: 1,
         fontSize: 16,
-        fontFamily: fontFamilies.phudu,
+        fontFamily: fontFamilies.inter,
         lineHeight: 20,
     },
     searchClearButton: {
@@ -159,14 +159,14 @@ export const fileManagementStyles = StyleSheet.create({
     statValue: {
         fontSize: 20,
         fontWeight: '800',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 24,
     },
     statLabel: {
         fontSize: 12,
         fontWeight: '500',
-        fontFamily: fontFamilies.phuduMedium,
+        fontFamily: fontFamilies.interMedium,
         marginTop: 2,
         letterSpacing: 0.2,
     },
@@ -322,7 +322,7 @@ export const fileManagementStyles = StyleSheet.create({
     emptyStateTitle: {
         fontSize: 24,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         marginTop: 16,
         marginBottom: 8,
     },
@@ -362,7 +362,7 @@ export const fileManagementStyles = StyleSheet.create({
     modalTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
     modalPlaceholder: {
         width: 40,
@@ -383,7 +383,7 @@ export const fileManagementStyles = StyleSheet.create({
     fileDetailName: {
         fontSize: 20,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         textAlign: 'center',
         marginBottom: 24,
     },
@@ -442,7 +442,7 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewTitle: {
         fontSize: 20,
         fontWeight: '700',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
     },
     uploadPreviewList: {
         flex: 1,
@@ -476,12 +476,12 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewName: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
         marginBottom: 4,
     },
     uploadPreviewMeta: {
         fontSize: 13,
-        fontFamily: fontFamilies.phudu,
+        fontFamily: fontFamilies.inter,
     },
     uploadPreviewRemove: {
         padding: 4,
@@ -498,7 +498,7 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewStatsText: {
         fontSize: 15,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
     uploadPreviewActions: {
         flexDirection: 'row',
@@ -515,7 +515,7 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewCancelText: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
     uploadPreviewConfirmButton: {
         flex: 2,
@@ -530,7 +530,7 @@ export const fileManagementStyles = StyleSheet.create({
         color: '#FFFFFF',
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
     fileViewerContainer: {
         flex: 1,
@@ -570,7 +570,7 @@ export const fileManagementStyles = StyleSheet.create({
     fileViewerTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
         marginBottom: 2,
     },
     fileViewerSubtitle: {
@@ -661,7 +661,7 @@ export const fileManagementStyles = StyleSheet.create({
     unsupportedFileTitle: {
         fontSize: 24,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         marginTop: 16,
         marginBottom: 8,
         textAlign: 'center',
@@ -719,7 +719,7 @@ export const fileManagementStyles = StyleSheet.create({
     fileDetailsSectionTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
         flex: 1,
     },
     fileDetailsSectionHeader: {

package/src/ui/components/payment/paymentStyles.ts

@@ -24,7 +24,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         fontWeight: '600',
         color: colors.text,
         marginBottom: 12,
-        fontFamily: fontFamilies.phuduSemiBold,
+        fontFamily: fontFamilies.interSemiBold,
     },
     errorContainer: {
         flex: 1,
@@ -54,7 +54,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         marginBottom: 8,
     },
     summaryCardMainTitle: {
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         fontWeight: 'bold',
         fontSize: 28,
         color: colors.text,
@@ -95,7 +95,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         color: colors.text,
         textAlign: 'center',
         marginBottom: 8,
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
     },
     summaryCardAmountDescription: {
         fontSize: 14,
@@ -146,7 +146,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         marginBottom: 8,
     },
     cardPaymentMainTitle: {
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         fontWeight: 'bold',
         fontSize: 28,
         color: colors.text,
@@ -215,7 +215,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         marginBottom: 8,
     },
     oxyPayMainTitle: {
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         fontWeight: 'bold',
         fontSize: 28,
         color: colors.text,
@@ -262,7 +262,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         marginBottom: 8,
     },
     faircoinMainTitle: {
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         fontWeight: 'bold',
         fontSize: 28,
         color: '#1b1f0a',
@@ -373,7 +373,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         marginBottom: 8,
     },
     successMainTitle: {
-        fontFamily: fontFamilies.phuduBold,
+        fontFamily: fontFamilies.interBold,
         fontWeight: 'bold',
         fontSize: 28,
         color: colors.success || '#4BB543',