@oxyhq/services 6.9.24 → 6.9.26

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -7,25 +7,18 @@ import {
     TouchableOpacity,
     StyleSheet,
     Modal,
-    ActivityIndicator,
     KeyboardAvoidingView,
     Platform,
 } from 'react-native';
 import OxyIcon from '../icon/OxyIcon';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Loading } from '@oxyhq/bloom/loading';
 
 interface DeleteAccountModalProps {
     visible: boolean;
     username: string;
     onClose: () => void;
     onDelete: (password: string) => Promise<void>;
-    colors: {
-        background: string;
-        text: string;
-        secondaryText: string;
-        border: string;
-        danger: string;
-        inputBackground: string;
-    };
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
@@ -34,9 +27,9 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
     username,
     onClose,
     onDelete,
-    colors,
     t,
 }) => {
+    const theme = useTheme();
     const [password, setPassword] = useState('');
     const [confirmUsername, setConfirmUsername] = useState('');
     const [isDeleting, setIsDeleting] = useState(false);
@@ -81,41 +74,41 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                 style={styles.overlay}
             >
                 <TouchableOpacity
-                    style={styles.backdrop}
+                    style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}
                     activeOpacity={1}
                     onPress={handleClose}
                 />
-                <View style={[styles.modal, { backgroundColor: colors.background }]}>
+                <View style={[styles.modal, { backgroundColor: theme.colors.background }]}>
                     <View style={styles.header}>
-                        <OxyIcon name="alert" size={32} color={colors.danger} />
-                        <Text style={[styles.title, { color: colors.danger }]}>
+                        <OxyIcon name="alert" size={32} color={theme.colors.error} />
+                        <Text style={[styles.title, { color: theme.colors.error }]}>
                             {t('deleteAccount.title') || 'Delete Account'}
                         </Text>
                     </View>
 
-                    <Text style={[styles.warning, { color: colors.text }]}>
+                    <Text style={[styles.warning, { color: theme.colors.text }]}>
                         {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
                     </Text>
 
                     {error && (
-                        <View style={[styles.errorContainer, { backgroundColor: `${colors.danger}20` }]}>
-                            <Text style={[styles.errorText, { color: colors.danger }]}>
+                        <View style={[styles.errorContainer, { backgroundColor: `${theme.colors.error}20` }]}>
+                            <Text style={[styles.errorText, { color: theme.colors.error }]}>
                                 {error}
                             </Text>
                         </View>
                     )}
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
                             {t('deleteAccount.passwordLabel') || 'Enter your password'}
                         </Text>
-                        <View style={[styles.inputContainer, { borderColor: colors.border, backgroundColor: colors.inputBackground }]}>
+                        <View style={[styles.inputContainer, { borderColor: theme.colors.border, backgroundColor: theme.colors.background }]}>
                             <TextInput
-                                style={[styles.input, { color: colors.text }]}
+                                style={[styles.input, { color: theme.colors.text }]}
                                 value={password}
                                 onChangeText={setPassword}
                                 placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
-                                placeholderTextColor={colors.secondaryText}
+                                placeholderTextColor={theme.colors.textSecondary}
                                 secureTextEntry={!showPassword}
                                 autoCapitalize="none"
                                 editable={!isDeleting}
@@ -127,14 +120,14 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                                 <OxyIcon
                                     name={showPassword ? 'eye-off' : 'eye'}
                                     size={20}
-                                    color={colors.secondaryText}
+                                    color={theme.colors.textSecondary}
                                 />
                             </TouchableOpacity>
                         </View>
                     </View>
 
                     <View style={styles.inputGroup}>
-                        <Text style={[styles.label, { color: colors.secondaryText }]}>
+                        <Text style={[styles.label, { color: theme.colors.textSecondary }]}>
                             {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
                         </Text>
                         <TextInput
@@ -142,15 +135,15 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                                 styles.input,
                                 styles.confirmInput,
                                 {
-                                    borderColor: confirmUsername === username ? '#34C759' : colors.border,
-                                    backgroundColor: colors.inputBackground,
-                                    color: colors.text,
+                                    borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                                    backgroundColor: theme.colors.background,
+                                    color: theme.colors.text,
                                 },
                             ]}
                             value={confirmUsername}
                             onChangeText={setConfirmUsername}
                             placeholder={username}
-                            placeholderTextColor={colors.secondaryText}
+                            placeholderTextColor={theme.colors.textSecondary}
                             autoCapitalize="none"
                             autoCorrect={false}
                             editable={!isDeleting}
@@ -159,11 +152,11 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
                     <View style={styles.buttons}>
                         <TouchableOpacity
-                            style={[styles.button, styles.cancelButton, { borderColor: colors.border }]}
+                            style={[styles.button, styles.cancelButton, { borderColor: theme.colors.border }]}
                             onPress={handleClose}
                             disabled={isDeleting}
                         >
-                            <Text style={[styles.buttonText, { color: colors.text }]}>
+                            <Text style={[styles.buttonText, { color: theme.colors.text }]}>
                                 {t('common.cancel') || 'Cancel'}
                             </Text>
                         </TouchableOpacity>
@@ -172,15 +165,15 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                             style={[
                                 styles.button,
                                 styles.deleteButton,
-                                { backgroundColor: isValid ? colors.danger : `${colors.danger}50` },
+                                { backgroundColor: isValid ? theme.colors.error : `${theme.colors.error}50` },
                             ]}
                             onPress={handleDelete}
                             disabled={!isValid || isDeleting}
                         >
                             {isDeleting ? (
-                                <ActivityIndicator color="#fff" size="small" />
+                                <Loading size="small" />
                             ) : (
-                                <Text style={styles.deleteButtonText}>
+                                <Text style={[styles.deleteButtonText, { color: theme.colors.card }]}>
                                     {t('deleteAccount.confirm') || 'Delete Forever'}
                                 </Text>
                             )}
@@ -200,7 +193,6 @@ const styles = StyleSheet.create({
     },
     backdrop: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
     modal: {
         width: '90%',
@@ -288,7 +280,6 @@ const styles = StyleSheet.create({
     deleteButtonText: {
         fontSize: 16,
         fontWeight: '600',
-        color: '#fff',
     },
 });
 

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

@@ -34,12 +34,12 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     errorText: {
         fontSize: 18,
-        color: 'red',
+        color: colors.error ?? '#EF4444',
         marginBottom: 24,
     },
     // Summary card styles
     summaryCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -131,7 +131,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Card payment styles
     cardPaymentCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -200,7 +200,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Oxy Pay styles
     oxyPayCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -247,7 +247,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // FairCoin styles
     faircoinCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,
@@ -358,7 +358,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     // Success styles
     successCard: {
-        backgroundColor: '#fff',
+        backgroundColor: colors.card ?? colors.background ?? '#fff',
         borderRadius: 16,
         padding: 24,
         marginBottom: 24,

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

@@ -41,5 +41,7 @@ export interface PaymentColors {
     secondaryText: string;
     border: string;
     success?: string;
+    error?: string;
     background?: string;
+    card?: string;
 }

package/src/ui/constants/theme.ts

@@ -1,6 +1,7 @@
 /**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ * Below are the colors that are used in the app.
+ * These are kept as a compatibility layer — prefer using bloom's useTheme() / useThemeColor()
+ * directly in new code. Existing screens still reference Colors.light / Colors.dark.
  */
 
 import { Platform } from 'react-native';

package/src/ui/hooks/useAuth.ts

@@ -110,7 +110,10 @@ export function useAuth(): UseAuthReturn {
     // Check if we're on the identity provider itself
     // Only the IdP has local login forms - other apps are client apps
     const authWebUrl = oxyServices.config?.authWebUrl;
-    const idpHostname = authWebUrl ? new URL(authWebUrl).hostname : 'auth.oxy.so';
+    let idpHostname = 'auth.oxy.so';
+    if (authWebUrl) {
+      try { idpHostname = new URL(authWebUrl).hostname; } catch { /* malformed URL, use default */ }
+    }
     const isIdentityProvider = isWebBrowser() &&
       window.location.hostname === idpHostname;
 

package/src/ui/hooks/useWebSSO.ts

@@ -54,7 +54,10 @@ function isWebBrowser(): boolean {
 function isIdentityProvider(authWebUrl?: string): boolean {
   if (!isWebBrowser()) return false;
   const hostname = window.location.hostname;
-  const idpHostname = authWebUrl ? new URL(authWebUrl).hostname : 'auth.oxy.so';
+  let idpHostname = 'auth.oxy.so';
+  if (authWebUrl) {
+    try { idpHostname = new URL(authWebUrl).hostname; } catch { /* malformed URL, use default */ }
+  }
   return hostname === idpHostname;
 }
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -698,14 +698,6 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     username={user.username || ''}
                     onClose={() => setShowDeleteModal(false)}
                     onDelete={handleConfirmDelete}
-                    colors={{
-                        background: themeStyles.backgroundColor,
-                        text: themeStyles.textColor,
-                        secondaryText: themeStyles.isDarkTheme ? '#888888' : '#666666',
-                        border: themeStyles.borderColor,
-                        danger: '#FF3B30',
-                        inputBackground: themeStyles.isDarkTheme ? '#333333' : '#F5F5F5',
-                    }}
                     t={t}
                 />
             )}

package/src/ui/styles/authStyles.ts

@@ -203,7 +203,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     width: '100%',
   },
   modernButtonText: {
-    color: '#FFFFFF',
+    color: colors.background,
     fontSize: 16,
     fontWeight: '600',
     letterSpacing: 0.5,
@@ -244,7 +244,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
   },
   modernUserAvatar: {
     borderWidth: 4,
-    borderColor: 'rgba(209, 105, 229, 0.2)',
+    borderColor: `${colors.primary}33`,
   },
   statusIndicator: {
     position: 'absolute',
@@ -254,7 +254,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     height: 20,
     borderRadius: 10,
     borderWidth: 3,
-    borderColor: '#FFFFFF',
+    borderColor: colors.background,
   },
   modernUserDisplayName: {
     fontFamily: fontFamilies.interBold,

package/src/ui/styles/theme.ts

@@ -1,6 +1,11 @@
 import { Platform, StyleSheet, type TextStyle } from 'react-native';
+import { useTheme as useBloomThemeHook, type ThemeColors as BloomThemeColors } from '@oxyhq/bloom';
 import { fontFamilies } from './fonts';
 
+/**
+ * ThemeColors used by services style files.
+ * Maps to bloom's ThemeColors, with a few convenience aliases.
+ */
 export interface ThemeColors {
   text: string;
   background: string;
@@ -24,7 +29,26 @@ export interface Theme {
   };
 }
 
-const lightColors: ThemeColors = {
+/**
+ * Adapts bloom's ThemeColors into the services ThemeColors shape.
+ */
+function bloomColorsToThemeColors(bloomColors: BloomThemeColors): ThemeColors {
+  return {
+    text: bloomColors.text,
+    background: bloomColors.background,
+    inputBackground: bloomColors.backgroundSecondary,
+    placeholder: bloomColors.textTertiary,
+    primary: bloomColors.primary,
+    border: bloomColors.border,
+    error: bloomColors.error,
+    success: bloomColors.success,
+    warning: bloomColors.warning,
+    secondaryText: bloomColors.textSecondary,
+  };
+}
+
+/** Fallback colors when bloom context is not available */
+const fallbackLight: ThemeColors = {
   text: '#000000',
   background: '#FFFFFF',
   inputBackground: '#F5F5F5',
@@ -37,7 +61,7 @@ const lightColors: ThemeColors = {
   secondaryText: '#666666',
 };
 
-const darkColors: ThemeColors = {
+const fallbackDark: ThemeColors = {
   text: '#FFFFFF',
   background: '#000000',
   inputBackground: '#333333',
@@ -50,11 +74,11 @@ const darkColors: ThemeColors = {
   secondaryText: '#BBBBBB',
 };
 
-const createTheme = (isDark: boolean): Theme => {
-  const colors = isDark ? darkColors : lightColors;
-  
+const createTheme = (isDark: boolean, colors?: ThemeColors): Theme => {
+  const themeColors = colors ?? (isDark ? fallbackDark : fallbackLight);
+
   return {
-    colors,
+    colors: themeColors,
     fonts: {
       title: {
         fontFamily: fontFamilies.interBold,
@@ -69,7 +93,7 @@ const createTheme = (isDark: boolean): Theme => {
         fontFamily: fontFamilies.interSemiBold,
         fontSize: 16,
         fontWeight: '600',
-        color: '#FFFFFF',
+        color: themeColors.background,
       },
       label: {
         fontSize: 14,
@@ -84,8 +108,18 @@ export const getTheme = (theme: 'light' | 'dark'): Theme => {
   return createTheme(theme === 'dark');
 };
 
+/**
+ * Returns theme colors from bloom when available, with fallback to local colors.
+ * Prefer this hook for new code — it reads from bloom's ThemeProvider.
+ */
 export const useThemeColors = (theme: 'light' | 'dark'): ThemeColors => {
-  return getTheme(theme).colors;
+  try {
+    const bloomTheme = useBloomThemeHook();
+    return bloomColorsToThemeColors(bloomTheme.colors);
+  } catch {
+    // Bloom provider not available, fall back to local colors
+    return getTheme(theme).colors;
+  }
 };
 
 // Common styles that can be reused across components
@@ -122,10 +156,10 @@ export const createCommonStyles = (theme: 'light' | 'dark') => {
       fontFamily: fontFamilies.interSemiBold,
       fontSize: 16,
       fontWeight: '600',
-      color: '#FFFFFF',
+      color: colors.background,
     },
     errorContainer: {
-      backgroundColor: '#FFEBEE',
+      backgroundColor: `${colors.error}18`,
       padding: 12,
       borderRadius: 35,
       marginBottom: 16,