@oxyhq/services 6.9.46 → 6.10.2

package/src/ui/screens/HelpSupportScreen.tsx

@@ -6,7 +6,7 @@ import {
     Linking,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header } from '../components';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -43,7 +43,6 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     }, [navigate, t]);
 
     const handleReportBug = useMemo(() => () => {
-        // TODO: Consider implementing a dedicated bug report form instead of just email
         Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
             toast.error(t('help.reportError') || 'Failed to open email client');
         });
@@ -85,7 +84,7 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
                 {/* Resources */}
                 <SettingsListGroup title={t('help.resources') || 'Resources'}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color="#8E8E93" />}
+                        icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
                         title={t('help.documentation.title') || 'Documentation'}
                         description={t('help.documentation.subtitle') || 'User guides and tutorials'}
                         onPress={() => {

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header, LoadingState, EmptyState } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -11,8 +11,7 @@ import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Dialog, useDialogControl } from '@oxyhq/bloom';
 
 interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
 
@@ -26,8 +25,8 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
-    const deleteLast15Prompt = usePromptControl();
-    const clearAllPrompt = usePromptControl();
+    const deleteLast15Dialog = useDialogControl();
+    const clearAllDialog = useDialogControl();
 
     const getStorage = async () => {
         const isRN = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
@@ -100,14 +99,14 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
                         icon={<SettingsIcon name="clock-outline" color={themeColors.iconStorage} />}
                         title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
                         description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
-                        onPress={() => deleteLast15Prompt.open()}
+                        onPress={() => deleteLast15Dialog.open()}
                         disabled={isDeleting || history.length === 0}
                     />
                     <SettingsListItem
                         icon={<SettingsIcon name="delete-outline" color={themeColors.iconSharing} />}
                         title={t('history.clearAll.title') || 'Clear All History'}
                         description={t('history.clearAll.subtitle') || 'Remove all history entries'}
-                        onPress={() => clearAllPrompt.open()}
+                        onPress={() => clearAllDialog.open()}
                         disabled={isDeleting || history.length === 0}
                     />
                 </SettingsListGroup>
@@ -124,8 +123,24 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
                     ))}
                 </SettingsListGroup>
             </ScrollView>
-            <Prompt.Basic control={deleteLast15Prompt} title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'} description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'} onConfirm={handleDeleteLast15Minutes} confirmButtonCta={t('common.actions.delete') || 'Delete'} confirmButtonColor="negative" />
-            <Prompt.Basic control={clearAllPrompt} title={t('history.clearAll.title') || 'Clear All History'} description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'} onConfirm={handleClearAll} confirmButtonCta={t('history.clearAll.title') || 'Clear All'} confirmButtonColor="negative" />
+            <Dialog
+                control={deleteLast15Dialog}
+                title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
+                description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'}
+                actions={[
+                    { label: t('common.actions.delete') || 'Delete', color: 'destructive', onPress: handleDeleteLast15Minutes },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={clearAllDialog}
+                title={t('history.clearAll.title') || 'Clear All History'}
+                description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'}
+                actions={[
+                    { label: t('history.clearAll.title') || 'Clear All', color: 'destructive', onPress: handleClearAll },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
         </View>
     );
 };

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -11,13 +11,12 @@ import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { SUPPORTED_LANGUAGES } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
 
 interface LanguageSelectorScreenProps extends BaseScreenProps { }
 
@@ -188,7 +187,6 @@ const styles = StyleSheet.create({
     bigTitle: {
         fontSize: 34,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontFamily: fontFamilies.interBold,
         lineHeight: 40,
         marginBottom: 8,
         letterSpacing: -0.5,

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -6,7 +6,7 @@ import {
     Linking,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header, LoadingState } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -155,13 +155,13 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                         onPress={handleOpenPolicy('contentModeration')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="heart" color="#FF2D55" />}
+                        icon={<SettingsIcon name="heart" color={bloomTheme.colors.error} />}
                         title={t('legal.childSafety.title') || 'Child Safety Policy'}
                         description={t('legal.childSafety.subtitle') || 'Protecting minors on our platform'}
                         onPress={handleOpenPolicy('childSafety')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="cookie" color="#8E8E93" />}
+                        icon={<SettingsIcon name="cookie" color={bloomTheme.colors.textTertiary} />}
                         title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
                         description={t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies'}
                         onPress={handleOpenPolicy('cookie')}

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -153,7 +153,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         }
     }, [currentStep, progressAnim, animateTransition]);
 
-    // Pay handler - TODO: Replace with actual payment API
+    // Pay handler — placeholder for payment integration
     const handlePay = useCallback(() => {
         setIsPaying(true);
         setTimeout(() => {
@@ -198,7 +198,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         );
     }
 
-    // FairCoin address - TODO: Replace with dynamic address from backend
+    // FairCoin address placeholder — replaced when integration is wired up.
     const faircoinAddress = 'f1abc1234FAIRCOINADDRESS';
     const { width: windowWidth } = useWindowDimensions();
     const isMobile = windowWidth < 600;

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -12,10 +12,7 @@ import {
     Dimensions,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
 import { useI18n } from '../hooks/useI18n';
@@ -86,8 +83,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const bloomTheme = useTheme();
 
     // Prompt controls
-    const cancelSubscriptionPrompt = usePromptControl();
-    const unsubscribeFeaturePrompt = usePromptControl();
+    const cancelSubscriptionDialog = useDialogControl();
+    const unsubscribeFeatureDialog = useDialogControl();
 
     // Extract commonly used colors for readability
     const textColor = bloomTheme.colors.text;
@@ -98,10 +95,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     const successColor = bloomTheme.colors.success;
     const dangerColor = bloomTheme.colors.error;
     const isDarkTheme = bloomTheme.isDark;
-    const warningColor = '#FF9500';
+    const warningColor = bloomTheme.colors.warning;
 
-    // TODO: Replace mock data with actual API integration
-    // Should fetch plans from oxyServices.getSubscriptionPlans() and individual features from oxyServices.getIndividualFeatures()
     // Oxy+ subscription plans
     const mockPlans: SubscriptionPlan[] = [
         {
@@ -417,8 +412,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
     };
 
     const confirmCancelSubscription = useCallback(() => {
-        cancelSubscriptionPrompt.open();
-    }, [cancelSubscriptionPrompt]);
+        cancelSubscriptionDialog.open();
+    }, [cancelSubscriptionDialog]);
 
     const handleCancelSubscription = useCallback(async () => {
         try {
@@ -504,8 +499,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
     const confirmFeatureUnsubscribe = useCallback((featureId: string) => {
         setPendingUnsubscribeFeatureId(featureId);
-        unsubscribeFeaturePrompt.open();
-    }, [unsubscribeFeaturePrompt]);
+        unsubscribeFeatureDialog.open();
+    }, [unsubscribeFeatureDialog]);
 
     const handleFeatureUnsubscribe = useCallback(async () => {
         if (!pendingUnsubscribeFeatureId) return;
@@ -551,7 +546,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 </TouchableOpacity>
                 <View style={styles.headerTitleContainer}>
                     <Text style={[styles.headerTitle, { color: textColor }]}>{t('premium.title') || 'Oxy+ Subscriptions'}</Text>
-                    <Text style={[styles.currentAppText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Text style={[styles.currentAppText, { color: bloomTheme.colors.textSecondary }]}>
                         {t('premium.forApp', { app: getAppDisplayName(currentAppPackage) }) || `for ${getAppDisplayName(currentAppPackage)}`}
                     </Text>
                 </View>
@@ -594,7 +589,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         </View>
                     </View>
 
-                    <Text style={[styles.subscriptionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Text style={[styles.subscriptionDetail, { color: bloomTheme.colors.textSecondary }]}>
                         {t('premium.current.renewsOn', { date: new Date(subscription.currentPeriodEnd).toLocaleDateString() }) || `Renews on ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`}
                     </Text>
 
@@ -648,7 +643,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 >
                     <Text style={[
                         styles.billingOptionText,
-                        { color: billingInterval === 'month' ? '#FFFFFF' : textColor }
+                        { color: billingInterval === 'month' ? bloomTheme.colors.negativeForeground : textColor }
                     ]}>
                         {t('premium.billing.monthly') || 'Monthly'}
                     </Text>
@@ -663,7 +658,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 >
                     <Text style={[
                         styles.billingOptionText,
-                        { color: billingInterval === 'year' ? '#FFFFFF' : textColor }
+                        { color: billingInterval === 'year' ? bloomTheme.colors.negativeForeground : textColor }
                     ]}>
                         {t('premium.billing.yearly') || 'Yearly'}
                     </Text>
@@ -737,10 +732,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.planHeader}>
                     <Text style={[styles.planName, { color: textColor }]}>{plan.name}</Text>
-                    <Text style={[styles.planDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Text style={[styles.planDescription, { color: bloomTheme.colors.textSecondary }]}>
                         {plan.description}
                     </Text>
-                    <Text style={[styles.planAppScope, { color: isDarkTheme ? '#888888' : '#999999' }]}>
+                    <Text style={[styles.planAppScope, { color: bloomTheme.colors.textTertiary }]}>
                         {getAppScopeText()}
                     </Text>
                     {!availability.available && (
@@ -754,7 +749,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     <Text style={[styles.planPrice, { color: textColor }]}>
                         {pricing.formatted}
                     </Text>
-                    <Text style={[styles.planInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Text style={[styles.planInterval, { color: bloomTheme.colors.textSecondary }]}>
                         {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                     </Text>
                 </View>
@@ -773,8 +768,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <Text style={styles.currentPlanText}>{t('premium.plan.current') || 'Current Plan'}</Text>
                     </View>
                 ) : !availability.available ? (
-                    <View style={[styles.unavailablePlanButton, { backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0' }]}>
-                        <Text style={[styles.unavailablePlanText, { color: isDarkTheme ? '#888888' : '#999999' }]}>
+                    <View style={[styles.unavailablePlanButton, { backgroundColor: bloomTheme.colors.border }]}>
+                        <Text style={[styles.unavailablePlanText, { color: bloomTheme.colors.textTertiary }]}>
                             {t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
                         </Text>
                     </View>
@@ -788,11 +783,11 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         disabled={processingPayment}
                     >
                         {processingPayment ? (
-                            <ActivityIndicator color="#FFFFFF" size="small" />
+                            <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
                         ) : (
                             <Text style={[
                                 styles.selectPlanText,
-                                { color: plan.isPopular ? '#FFFFFF' : textColor }
+                                { color: plan.isPopular ? bloomTheme.colors.negativeForeground : textColor }
                             ]}>
                                 {t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
                             </Text>
@@ -847,11 +842,11 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
         const getCategoryColor = (category: string) => {
             switch (category) {
-                case 'analytics': return '#FF9500';
-                case 'customization': return '#5856D6';
-                case 'content': return '#30D158';
-                case 'networking': return '#007AFF';
-                case 'productivity': return '#FF3B30';
+                case 'analytics': return bloomTheme.colors.warning;
+                case 'customization': return bloomTheme.colors.secondary;
+                case 'content': return bloomTheme.colors.success;
+                case 'networking': return bloomTheme.colors.info;
+                case 'productivity': return bloomTheme.colors.error;
                 default: return primaryColor;
             }
         };
@@ -901,10 +896,10 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 </View>
                             )}
                         </View>
-                        <Text style={[styles.featureDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.featureDescription, { color: bloomTheme.colors.textSecondary }]}>
                             {feature.description}
                         </Text>
-                        <Text style={[styles.appScopeText, { color: isDarkTheme ? '#888888' : '#999999' }]}>
+                        <Text style={[styles.appScopeText, { color: bloomTheme.colors.textTertiary }]}>
                             {getAppScopeText()}
                         </Text>
                     </View>
@@ -915,7 +910,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <Text style={[styles.featurePrice, { color: textColor }]}>
                             {pricing.formatted}
                         </Text>
-                        <Text style={[styles.featureInterval, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.featureInterval, { color: bloomTheme.colors.textSecondary }]}>
                             {t('premium.plan.perInterval', { interval: pricing.interval }) || `per ${pricing.interval}`}
                         </Text>
                     </View>
@@ -923,13 +918,13 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isIncludedInCurrentPlan ? (
                     <View style={[styles.includedInPlanButton, { backgroundColor: primaryColor }]}>
-                        <Ionicons name="checkmark-circle" size={16} color="#FFFFFF" />
+                        <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.negativeForeground} />
                         <Text style={styles.includedInPlanText}>{t('premium.feature.includedInPlan') || 'Included in your plan'}</Text>
                     </View>
                 ) : isSubscribed ? (
                     <View style={styles.featureActions}>
                         <View style={[styles.subscribedButton, { backgroundColor: successColor }]}>
-                            <Ionicons name="checkmark" size={16} color="#FFFFFF" />
+                            <Ionicons name="checkmark" size={16} color={bloomTheme.colors.negativeForeground} />
                             <Text style={styles.subscribedText}>{t('premium.feature.subscribed') || 'Subscribed'}</Text>
                         </View>
                         <TouchableOpacity
@@ -946,14 +941,14 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         disabled={processingPayment}
                     >
                         {processingPayment ? (
-                            <ActivityIndicator color="#FFFFFF" size="small" />
+                            <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
                         ) : (
                             <Text style={styles.subscribeFeatureText}>{t('premium.actions.subscribe') || 'Subscribe'}</Text>
                         )}
                     </TouchableOpacity>
                 ) : (
-                    <View style={[styles.unavailableButton, { backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0' }]}>
-                        <Text style={[styles.unavailableText, { color: isDarkTheme ? '#888888' : '#999999' }]}>
+                    <View style={[styles.unavailableButton, { backgroundColor: bloomTheme.colors.border }]}>
+                        <Text style={[styles.unavailableText, { color: bloomTheme.colors.textTertiary }]}>
                             Only available in subscription plans
                         </Text>
                     </View>
@@ -968,7 +963,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         return (
             <View style={styles.section}>
                 <Text style={[styles.sectionTitle, { color: textColor }]}>Individual Features</Text>
-                <Text style={[styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                <Text style={[styles.sectionSubtitle, { color: bloomTheme.colors.textSecondary }]}>
                     Subscribe to specific features you need. Some features are included in subscription plans.
                 </Text>
 
@@ -998,7 +993,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         const testApps = ['mention', 'oxy-social', 'oxy-workspace', 'oxy-creator'];
 
         return (
-            <View style={[styles.appSwitcher, { backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0', borderColor }]}>
+            <View style={[styles.appSwitcher, { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor }]}>
                 <Text style={[styles.appSwitcherTitle, { color: textColor }]}>
                     🧪 Test App Context (Dev Only)
                 </Text>
@@ -1020,7 +1015,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             >
                                 <Text style={[
                                     styles.appSwitcherButtonText,
-                                    { color: currentAppPackage === app ? '#FFFFFF' : textColor }
+                                    { color: currentAppPackage === app ? bloomTheme.colors.negativeForeground : textColor }
                                 ]}>
                                     {app}
                                 </Text>
@@ -1052,7 +1047,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 {!subscription && (
                     <View style={styles.section}>
                         <Text style={[styles.sectionTitle, { color: textColor }]}>{t('premium.choosePlan') || 'Choose Your Plan'}</Text>
-                        <Text style={[styles.sectionSubtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[styles.sectionSubtitle, { color: bloomTheme.colors.textSecondary }]}>
                             {t('premium.choosePlanSubtitle') || 'Unlock premium features and take your experience to the next level'}
                         </Text>
                     </View>
@@ -1083,7 +1078,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             <Ionicons name="flash" size={24} color={primaryColor} />
                             <View style={styles.benefitContent}>
                                 <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.performance.title') || 'Enhanced Performance'}</Text>
-                                <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
                                     {t('premium.benefits.performance.desc') || 'Faster processing and priority access to our servers'}
                                 </Text>
                             </View>
@@ -1093,7 +1088,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             <Ionicons name="shield-checkmark" size={24} color={successColor} />
                             <View style={styles.benefitContent}>
                                 <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.security.title') || 'Advanced Security'}</Text>
-                                <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
                                     {t('premium.benefits.security.desc') || 'Enhanced encryption and security features'}
                                 </Text>
                             </View>
@@ -1103,7 +1098,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             <Ionicons name="headset" size={24} color={warningColor} />
                             <View style={styles.benefitContent}>
                                 <Text style={[styles.benefitTitle, { color: textColor }]}>{t('premium.benefits.support.title') || 'Priority Support'}</Text>
-                                <Text style={[styles.benefitDescription, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text style={[styles.benefitDescription, { color: bloomTheme.colors.textSecondary }]}>
                                     {t('premium.benefits.support.desc') || 'Get help faster with our premium support team'}
                                 </Text>
                             </View>
@@ -1113,21 +1108,23 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.bottomSpacing} />
             </ScrollView>
-            <Prompt.Basic
-                control={cancelSubscriptionPrompt}
+            <Dialog
+                control={cancelSubscriptionDialog}
                 title={t('premium.confirms.cancelSubTitle') || 'Cancel Subscription'}
                 description={t('premium.confirms.cancelSub') || 'Are you sure you want to cancel your subscription? You will lose access to premium features at the end of your current billing period.'}
-                onConfirm={handleCancelSubscription}
-                confirmButtonCta={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('premium.actions.cancelSubBtn') || 'Cancel Subscription', color: 'destructive', onPress: handleCancelSubscription },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={unsubscribeFeaturePrompt}
+            <Dialog
+                control={unsubscribeFeatureDialog}
                 title={t('premium.confirms.unsubscribeFeatureTitle') || 'Unsubscribe from Feature'}
                 description={pendingUnsubscribeFeature ? (t('premium.confirms.unsubscribeFeature', { name: pendingUnsubscribeFeature.name }) ?? `Are you sure you want to unsubscribe from ${pendingUnsubscribeFeature.name}?`) : ''}
-                onConfirm={handleFeatureUnsubscribe}
-                confirmButtonCta={t('premium.actions.unsubscribe') || 'Unsubscribe'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('premium.actions.unsubscribe') || 'Unsubscribe', color: 'destructive', onPress: handleFeatureUnsubscribe },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
@@ -1152,7 +1149,6 @@ const styles = StyleSheet.create({
     headerTitle: {
         fontSize: 20,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     headerTitleContainer: {
         flex: 1,
@@ -1175,7 +1171,6 @@ const styles = StyleSheet.create({
     sectionTitle: {
         fontSize: 24,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         marginBottom: 8,
     },
     sectionSubtitle: {

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -7,7 +7,7 @@ import {
     TouchableOpacity,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header, Avatar, LoadingState, EmptyState } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
@@ -15,6 +15,7 @@ import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useSettingToggles } from '../hooks/useSettingToggle';
 import type { BlockedUser, RestrictedUser } from '@oxyhq/core';
+import { getAccountDisplayName } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 
 interface PrivacySettings {
@@ -67,7 +68,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     goBack,
 }) => {
     const { oxyServices, user } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     const [isLoading, setIsLoading] = useState(true);
     const [blockedUsers, setBlockedUsers] = useState<BlockedUser[]>([]);
     const [restrictedUsers, setRestrictedUsers] = useState<RestrictedUser[]>([]);
@@ -167,35 +168,36 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
         }
     }, [oxyServices, t]);
 
-    // Helper to extract user info from blocked/restricted objects
+    // Helper to extract user info from blocked/restricted objects.
+    // Display names go through the canonical helper so the fallback chain is
+    // identical across every UI surface (name → username → publicKey → "Unnamed").
     const extractUserInfo = useCallback((
         item: BlockedUser | RestrictedUser,
         idField: 'blockedId' | 'restrictedId'
     ) => {
         let userIdField: string | { _id: string; username?: string; avatar?: string };
-        let username: string;
+        let userShape: { username?: string };
         let avatar: string | undefined;
 
         if (idField === 'blockedId' && 'blockedId' in item) {
             userIdField = item.blockedId;
-            username = typeof item.blockedId === 'string'
-                ? (item.username || 'Unknown')
-                : (item.blockedId.username || 'Unknown');
+            userShape = typeof item.blockedId === 'string'
+                ? { username: item.username }
+                : { username: item.blockedId.username };
             avatar = typeof item.blockedId === 'string' ? item.avatar : item.blockedId.avatar;
         } else if (idField === 'restrictedId' && 'restrictedId' in item) {
             userIdField = item.restrictedId;
-            username = typeof item.restrictedId === 'string'
-                ? (item.username || 'Unknown')
-                : (item.restrictedId.username || 'Unknown');
+            userShape = typeof item.restrictedId === 'string'
+                ? { username: item.username }
+                : { username: item.restrictedId.username };
             avatar = typeof item.restrictedId === 'string' ? item.avatar : item.restrictedId.avatar;
         } else {
-            // Fallback (should not happen)
-            return { userId: '', username: 'Unknown', avatar: undefined };
+            return { userId: '', displayName: getAccountDisplayName(null, locale), avatar: undefined };
         }
 
         const userId = typeof userIdField === 'string' ? userIdField : userIdField._id;
-        return { userId, username, avatar };
-    }, []);
+        return { userId, displayName: getAccountDisplayName(userShape, locale), avatar };
+    }, [locale]);
 
     const bloomTheme = useTheme();
 
@@ -330,13 +332,13 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         />
                     ) : (
                         blockedUsers.map((blocked) => {
-                            const { userId, username, avatar } = extractUserInfo(blocked, 'blockedId');
+                            const { userId, displayName, avatar } = extractUserInfo(blocked, 'blockedId');
                             const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
                             return (
                                 <SettingsListItem
                                     key={userId}
-                                    icon={<Avatar uri={avatarUri} name={username} size={20} />}
-                                    title={username}
+                                    icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                    title={displayName}
                                     rightElement={
                                         <TouchableOpacity onPress={() => handleUnblock(userId)} style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}>
                                             <Text style={[styles.actionButtonText, { color: bloomTheme.colors.error }]}>{t('privacySettings.unblock') || 'Unblock'}</Text>
@@ -359,13 +361,13 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                         />
                     ) : (
                         restrictedUsers.map((restricted) => {
-                            const { userId, username, avatar } = extractUserInfo(restricted, 'restrictedId');
+                            const { userId, displayName, avatar } = extractUserInfo(restricted, 'restrictedId');
                             const avatarUri = avatar && oxyServices ? oxyServices.getFileDownloadUrl(avatar, 'thumb') : undefined;
                             return (
                                 <SettingsListItem
                                     key={userId}
-                                    icon={<Avatar uri={avatarUri} name={username} size={20} />}
-                                    title={username}
+                                    icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                    title={displayName}
                                     description={t('privacySettings.restrictedDescription') || 'Limited interactions'}
                                     rightElement={
                                         <TouchableOpacity onPress={() => handleUnrestrict(userId)} style={[styles.actionButton, { backgroundColor: bloomTheme.colors.backgroundSecondary }]}>

package/src/ui/screens/ProfileScreen.tsx

@@ -185,7 +185,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     if (error) {
         return (
             <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-                <View style={styles.errorHeader}>
+                <View style={[styles.errorHeader, { borderBottomColor: bloomTheme.colors.border }]}>
                     {goBack && (
                         <TouchableOpacity onPress={goBack} style={styles.backButton}>
                             <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
@@ -410,7 +410,6 @@ const createStyles = () => StyleSheet.create({
         paddingHorizontal: 16,
         paddingVertical: 12,
         borderBottomWidth: 1,
-        borderBottomColor: '#E0E0E0',
     },
     backButton: {
         padding: 8,

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -7,7 +7,7 @@ import {
     ScrollView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header, LoadingState, EmptyState } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -53,7 +53,7 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
     const normalizedColorScheme = normalizeColorScheme(colorScheme);
     const themeColors = Colors[normalizedColorScheme];
     const tabActiveColor = themeColors.iconSecurity;
-    const tabInactiveColor = bloomTheme.isDark ? '#888888' : '#666666';
+    const tabInactiveColor = bloomTheme.colors.textTertiary;
 
     // Load saved items and collections from API
     useEffect(() => {