@oxyhq/services 6.9.45 → 6.10.1

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,16 +1,17 @@
 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 { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
+import { toast } from '@oxyhq/bloom';
+import { Header, LoadingState, EmptyState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 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; }
 
@@ -24,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';
@@ -93,20 +94,53 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
             <ScrollView style={styles.content}>
-                <Section title={t('history.actions') || 'Actions'} isFirst={true}>
-                    <GroupedSection items={[
-                        { id: 'delete-last-15', icon: 'clock-outline', iconColor: themeColors.iconStorage, title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes', subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries', onPress: () => deleteLast15Prompt.open(), disabled: isDeleting || history.length === 0 },
-                        { id: 'clear-all', icon: 'delete-outline', iconColor: themeColors.iconSharing, title: t('history.clearAll.title') || 'Clear All History', subtitle: t('history.clearAll.subtitle') || 'Remove all history entries', onPress: () => clearAllPrompt.open(), disabled: isDeleting || history.length === 0 },
-                    ]} />
-                </Section>
-                <Section title={t('history.recent') || 'Recent History'}>
+                <SettingsListGroup title={t('history.actions') || 'Actions'}>
+                    <SettingsListItem
+                        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={() => 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={() => clearAllDialog.open()}
+                        disabled={isDeleting || history.length === 0}
+                    />
+                </SettingsListGroup>
+                <SettingsListGroup title={t('history.recent') || 'Recent History'}>
                     {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
                      : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
-                     : <GroupedSection items={history.map(item => ({ id: item.id, icon: item.type === 'search' ? 'search' : 'globe', iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo, title: item.query, subtitle: formatTime(item.timestamp) }))} />}
-                </Section>
+                     : history.map(item => (
+                        <SettingsListItem
+                            key={item.id}
+                            icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo} />}
+                            title={item.query}
+                            description={formatTime(item.timestamp)}
+                        />
+                    ))}
+                </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,12 +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 { Header, GroupedSection } from '../components';
+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 { }
 
@@ -98,18 +98,17 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             return {
                 id: language.id,
                 title: language.name,
-                subtitle: language.nativeName,
-                customIcon: (
+                description: language.nativeName,
+                icon: (
                     <View style={[styles.languageFlag, { backgroundColor: `${language.color}15` }]}>
                         <Text style={styles.flagEmoji}>{language.flag}</Text>
                     </View>
                 ),
-                iconColor: language.color,
-                selected: isSelected,
                 onPress: () => handleLanguageSelect(language.id),
-                customContent: isSelected ? (
+                rightElement: isSelected ? (
                     <Ionicons name="checkmark-circle" size={24} color={bloomTheme.colors.primary} />
                 ) : undefined,
+                showChevron: false,
             };
         }),
         [currentLanguage, handleLanguageSelect, bloomTheme]
@@ -150,7 +149,19 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                     <View style={[styles.materialCard, {
                         backgroundColor: bloomTheme.colors.card,
                     }]}>
-                        <GroupedSection items={languageItems} />
+                        <SettingsListGroup>
+                            {languageItems.map(item => (
+                                <SettingsListItem
+                                    key={item.id}
+                                    icon={item.icon}
+                                    title={item.title}
+                                    description={item.description}
+                                    onPress={item.onPress}
+                                    rightElement={item.rightElement}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             </ScrollView>
@@ -176,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,8 +6,10 @@ import {
     Linking,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState } from '../components';
+import { toast } from '@oxyhq/bloom';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -121,69 +123,50 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <Section title={t('legal.policies') || 'Policies & Guidelines'}  isFirst={true}>
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'privacy-policy',
-                                icon: 'shield-check',
-                                iconColor: themeColors.iconPersonalInfo,
-                                title: t('legal.privacyPolicy.title') || 'Privacy Policy',
-                                subtitle: t('legal.privacyPolicy.subtitle') || 'How we handle your data',
-                                onPress: handleOpenPolicy('privacy'),
-                            },
-                            {
-                                id: 'terms-of-service',
-                                icon: 'file-document',
-                                iconColor: themeColors.iconSecurity,
-                                title: t('legal.termsOfService.title') || 'Terms of Service',
-                                subtitle: t('legal.termsOfService.subtitle') || 'Terms and conditions of use',
-                                onPress: handleOpenPolicy('terms'),
-                            },
-                            {
-                                id: 'community-guidelines',
-                                icon: 'account-group',
-                                iconColor: themeColors.iconData,
-                                title: t('legal.communityGuidelines.title') || 'Community Guidelines',
-                                subtitle: t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community',
-                                onPress: handleOpenPolicy('community'),
-                            },
-                            {
-                                id: 'data-retention',
-                                icon: 'clock',
-                                iconColor: themeColors.iconStorage,
-                                title: t('legal.dataRetention.title') || 'Data Retention Policy',
-                                subtitle: t('legal.dataRetention.subtitle') || 'How long we keep your data',
-                                onPress: handleOpenPolicy('dataRetention'),
-                            },
-                            {
-                                id: 'content-moderation',
-                                icon: 'eye',
-                                iconColor: themeColors.iconSharing,
-                                title: t('legal.contentModeration.title') || 'Content Moderation Policy',
-                                subtitle: t('legal.contentModeration.subtitle') || 'How we moderate content',
-                                onPress: handleOpenPolicy('contentModeration'),
-                            },
-                            {
-                                id: 'child-safety',
-                                icon: 'heart',
-                                iconColor: '#FF2D55',
-                                title: t('legal.childSafety.title') || 'Child Safety Policy',
-                                subtitle: t('legal.childSafety.subtitle') || 'Protecting minors on our platform',
-                                onPress: handleOpenPolicy('childSafety'),
-                            },
-                            {
-                                id: 'cookie-policy',
-                                icon: 'cookie',
-                                iconColor: '#8E8E93',
-                                title: t('legal.cookiePolicy.title') || 'Cookie Policy',
-                                subtitle: t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies',
-                                onPress: handleOpenPolicy('cookie'),
-                            },
-                        ]}
-                        
+                <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="shield-check" color={themeColors.iconPersonalInfo} />}
+                        title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
+                        description={t('legal.privacyPolicy.subtitle') || 'How we handle your data'}
+                        onPress={handleOpenPolicy('privacy')}
                     />
-                </Section>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="file-document" color={themeColors.iconSecurity} />}
+                        title={t('legal.termsOfService.title') || 'Terms of Service'}
+                        description={t('legal.termsOfService.subtitle') || 'Terms and conditions of use'}
+                        onPress={handleOpenPolicy('terms')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconData} />}
+                        title={t('legal.communityGuidelines.title') || 'Community Guidelines'}
+                        description={t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community'}
+                        onPress={handleOpenPolicy('community')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="clock" color={themeColors.iconStorage} />}
+                        title={t('legal.dataRetention.title') || 'Data Retention Policy'}
+                        description={t('legal.dataRetention.subtitle') || 'How long we keep your data'}
+                        onPress={handleOpenPolicy('dataRetention')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="eye" color={themeColors.iconSharing} />}
+                        title={t('legal.contentModeration.title') || 'Content Moderation Policy'}
+                        description={t('legal.contentModeration.subtitle') || 'How we moderate content'}
+                        onPress={handleOpenPolicy('contentModeration')}
+                    />
+                    <SettingsListItem
+                        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={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')}
+                    />
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -11,7 +11,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
+import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
 
@@ -152,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(() => {
@@ -184,22 +185,20 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         return (
             <View style={styles.errorContainer}>
                 <Text style={styles.errorText}>{t('payment.errors.invalidAmount')}</Text>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('payment.actions.close'),
-                            onPress: handleClose,
-                            icon: 'close',
-                            variant: 'primary',
-                        },
-                    ]}
-                    colors={colors}
-                />
+                <Button
+                    variant="primary"
+                    onPress={handleClose}
+                    size="small"
+                    icon={<Ionicons name="close" size={16} />}
+                    iconPosition="right"
+                >
+                    {t('payment.actions.close')}
+                </Button>
             </View>
         );
     }
 
-    // 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;