@oxyhq/services 6.9.33 → 6.9.34

package/src/ui/screens/karma/KarmaCenterScreen.tsx

@@ -14,8 +14,10 @@ import type { BaseScreenProps } from '../../types/navigation';
 import { fontFamilies } from '../../styles/fonts';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../../hooks/useColorScheme';
+import { Colors } from '../../constants/theme';
+import { normalizeColorScheme } from '../../utils/themeUtils';
 import { darkenColor } from '../../utils/colorUtils';
 import { useOxy } from '../../context/OxyContext';
 
@@ -32,19 +34,21 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
-    const dangerColor = themeStyles.dangerColor || '#D32F2F';
-    const mutedTextColor = themeStyles.isDarkTheme ? '#BBBBBB' : '#888888';
+    const dangerColor = bloomTheme.colors.error || '#D32F2F';
+    const mutedTextColor = bloomTheme.isDark ? '#BBBBBB' : '#888888';
 
     // Icon colors from theme
-    const iconLeaderboard = themeStyles.colors.iconPayments;
-    const iconRules = themeStyles.colors.iconSecurity;
-    const iconAbout = themeStyles.colors.iconPayments;
-    const iconRewards = themeStyles.colors.iconStorage;
-    const iconFAQ = themeStyles.colors.iconPersonalInfo;
+    const iconLeaderboard = themeColors.iconPayments;
+    const iconRules = themeColors.iconSecurity;
+    const iconAbout = themeColors.iconPayments;
+    const iconRewards = themeColors.iconStorage;
+    const iconFAQ = themeColors.iconPersonalInfo;
 
     useEffect(() => {
         if (!user) return;
@@ -66,26 +70,26 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
 
     if (!isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-                <Text style={[styles.message, { color: themeStyles.textColor }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
+            <View style={styles.container} className="bg-background">
+                <Text style={[styles.message, { color: bloomTheme.colors.text }]}>{t('common.status.notSignedIn') || 'Not signed in'}</Text>
             </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
+            <View style={[styles.container, { justifyContent: 'center' }]} className="bg-background">
                 <ActivityIndicator size="large" color={primaryColor} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
                     <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
-                    <Text style={[styles.karmaLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                    <Text style={[styles.karmaLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
                         {t('karma.center.balance') || 'Karma Balance'}
                     </Text>
                     <View style={styles.actionContainer}>
@@ -128,24 +132,24 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                         {t('karma.center.info') || 'Karma can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'}
                     </Text>
                 </View>
-                <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
+                <Text style={[styles.sectionTitle, { color: bloomTheme.colors.text }]}>
                     {t('karma.center.history') || 'Karma History'}
                 </Text>
                 <View style={styles.historyContainer}>
                     {karmaHistory.length === 0 ? (
-                        <Text style={{ color: themeStyles.textColor, textAlign: 'center', marginTop: 16 }}>
+                        <Text style={{ color: bloomTheme.colors.text, textAlign: 'center', marginTop: 16 }}>
                             {t('karma.center.noHistory') || 'No karma history yet.'}
                         </Text>
                     ) : (
                         karmaHistory.map((entry: any) => (
-                            <View key={entry.id} style={[styles.historyItem, { borderColor: themeStyles.borderColor }]}>
+                            <View key={entry.id} style={[styles.historyItem, { borderColor: bloomTheme.colors.border }]}>
                                 <Text style={[styles.historyPoints, { color: entry.points > 0 ? primaryColor : dangerColor }]}>
                                     {entry.points > 0 ? '+' : ''}{entry.points}
                                 </Text>
-                                <Text style={[styles.historyDesc, { color: themeStyles.textColor }]}>
+                                <Text style={[styles.historyDesc, { color: bloomTheme.colors.text }]}>
                                     {entry.reason || (t('karma.center.noDescription') || 'No description')}
                                 </Text>
-                                <Text style={[styles.historyDate, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                                <Text style={[styles.historyDate, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
                                     {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
                                 </Text>
                             </View>

package/src/ui/screens/karma/KarmaFAQScreen.tsx

@@ -4,8 +4,8 @@ import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
 import { Header, GroupedItem } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { normalizeTheme, normalizeColorScheme } from '../../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { normalizeColorScheme } from '../../utils/themeUtils';
 import { useColorScheme } from '../../hooks/useColorScheme';
 import { Colors } from '../../constants/theme';
 
@@ -26,17 +26,10 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const [search, setSearch] = useState('');
 
     // Memoize theme-related calculations to prevent unnecessary recalculations
-    const normalizedTheme = normalizeTheme(theme);
-    const baseThemeStyles = useThemeStyles(normalizedTheme);
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
     const normalizedColorScheme = normalizeColorScheme(colorScheme);
     const colors = Colors[normalizedColorScheme];
-    const themeStyles = useMemo(() => ({
-        ...baseThemeStyles,
-        primaryColor: '#d169e5',
-        inputBg: baseThemeStyles.isDarkTheme ? '#23232b' : '#f2f2f7',
-        inputBorder: baseThemeStyles.borderColor,
-    }), [baseThemeStyles]);
 
     // Memoize filtered FAQs to prevent filtering on every render
     const faqs = useMemo(() => FAQ_KEYS.map(key => ({
@@ -61,7 +54,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }, []);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('karma.faq.title') || 'Karma FAQ'}
                 subtitle={t('karma.faq.subtitle') || 'Frequently asked questions about karma'}
@@ -77,9 +70,9 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 <View style={[styles.searchContainer, { backgroundColor: colors.card }]}>
                     <Ionicons name="search" size={22} color={colors.icon} />
                     <TextInput
-                        style={[styles.searchInput, { color: themeStyles.textColor }]}
+                        style={[styles.searchInput, { color: bloomTheme.colors.text }]}
                         placeholder={t('karma.faq.search') || 'Search FAQ...'}
-                        placeholderTextColor={themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'}
+                        placeholderTextColor={bloomTheme.isDark ? '#BBBBBB' : '#888888'}
                         value={search}
                         onChangeText={setSearch}
                         returnKeyType="search"
@@ -114,7 +107,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                                     />
                                     {isExpanded && (
                                         <View style={[styles.answerContainer, { backgroundColor: colors.card }, isLast && styles.lastAnswerContainer]}>
-                                            <Text style={[styles.answer, { color: themeStyles.textColor }]}>
+                                            <Text style={[styles.answer, { color: bloomTheme.colors.text }]}>
                                                 {faq.a}
                                             </Text>
                                         </View>

package/src/ui/screens/karma/KarmaLeaderboardScreen.tsx

@@ -5,9 +5,7 @@ import type { BaseScreenProps } from '../../types/navigation';
 import Avatar from '../../components/Avatar';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { normalizeTheme } from '../../utils/themeUtils';
-import { useColorScheme } from '../../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../../context/OxyContext';
 
 const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
@@ -18,9 +16,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const colorScheme = useColorScheme();
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const bloomTheme = useTheme();
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
@@ -34,7 +30,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
     }, [oxyServices]);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('karma.leaderboard.title') || 'Karma Leaderboard'}
                 subtitle={t('karma.leaderboard.subtitle') || 'Top contributors in the community'}
@@ -49,7 +45,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {leaderboard.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: themeStyles.textColor }]}>{t('karma.leaderboard.empty') || 'No leaderboard data.'}</Text>
+                        <Text style={[styles.placeholder, { color: bloomTheme.colors.text }]}>{t('karma.leaderboard.empty') || 'No leaderboard data.'}</Text>
                     ) : (
                         leaderboard.map((entry, idx) => (
                             <TouchableOpacity
@@ -60,7 +56,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
                             >
                                 <Text style={[styles.rank, { color: primaryColor }]}>{idx + 1}</Text>
                                 <Avatar name={entry.username || 'User'} size={40}  style={styles.avatar} />
-                                <Text style={[styles.username, { color: themeStyles.textColor }]}>{entry.username || entry.userId}</Text>
+                                <Text style={[styles.username, { color: bloomTheme.colors.text }]}>{entry.username || entry.userId}</Text>
                                 <Text style={[styles.karma, { color: primaryColor }]}>{entry.total}</Text>
                             </TouchableOpacity>
                         ))

package/src/ui/screens/karma/KarmaRewardsScreen.tsx

@@ -5,8 +5,8 @@ import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { normalizeTheme, normalizeColorScheme } from '../../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { normalizeColorScheme } from '../../utils/themeUtils';
 import { useColorScheme } from '../../hooks/useColorScheme';
 import { Colors } from '../../constants/theme';
 import { useOxy } from '../../context/OxyContext';
@@ -31,15 +31,13 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const [karmaTotal, setKarmaTotal] = useState<number>(0);
     const [isLoading, setIsLoading] = useState(true);
 
-    const normalizedTheme = normalizeTheme(theme);
-    const baseThemeStyles = useThemeStyles(normalizedTheme);
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
     const normalizedColorScheme = normalizeColorScheme(colorScheme);
     const colors = Colors[normalizedColorScheme];
     const themeStyles = useMemo(() => ({
-        ...baseThemeStyles,
         primaryColor: '#d169e5',
-    }), [baseThemeStyles]);
+    }), []);
 
     useEffect(() => {
         if (!user || !isAuthenticated) {
@@ -322,10 +320,10 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     )}
                 </View>
 
-                <Text style={[styles.achievementName, { color: themeStyles.textColor, opacity: isLocked ? 0.5 : 1 }]}>
+                <Text style={[styles.achievementName, { color: bloomTheme.colors.text, opacity: isLocked ? 0.5 : 1 }]}>
                     {achievement.name}
                 </Text>
-                <Text style={[styles.achievementDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888', opacity: isLocked ? 0.5 : 1 }]}>
+                <Text style={[styles.achievementDescription, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888', opacity: isLocked ? 0.5 : 1 }]}>
                     {achievement.description}
                 </Text>
             </View>
@@ -334,7 +332,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     if (!isAuthenticated) {
         return (
-            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <View style={styles.container} className="bg-background">
                 <Header
                     title={t('karma.rewards.title') || 'Karma Rewards'}
                     subtitle={t('karma.rewards.subtitle') || 'Unlock special features and recognition'}
@@ -342,7 +340,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     elevation="subtle"
                 />
                 <View style={styles.centerContent}>
-                    <Text style={[styles.message, { color: themeStyles.textColor }]}>
+                    <Text style={[styles.message, { color: bloomTheme.colors.text }]}>
                         {t('common.status.notSignedIn') || 'Not signed in'}
                     </Text>
                 </View>
@@ -351,7 +349,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('karma.rewards.title') || 'Karma Rewards'}
                 subtitle={t('karma.rewards.subtitle') || 'Unlock special features and recognition'}
@@ -369,7 +367,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                             <Text style={[styles.currentKarma, { color: themeStyles.primaryColor }]}>
                                 {karmaTotal}
                             </Text>
-                            <Text style={[styles.karmaLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                            <Text style={[styles.karmaLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
                                 {t('karma.center.balance') || 'Karma Points'}
                             </Text>
                         </View>
@@ -377,13 +375,13 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                             <Text style={[styles.achievementCount, { color: themeStyles.primaryColor }]}>
                                 {unlockedAchievements.length}
                             </Text>
-                            <Text style={[styles.achievementCountLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                            <Text style={[styles.achievementCountLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
                                 {t('karma.achievements.unlocked') || 'Achievements'}
                             </Text>
                         </View>
                     </View>
                     <View style={styles.progressBarContainer}>
-                        <View style={[styles.progressBar, { backgroundColor: themeStyles.borderColor }]}>
+                        <View style={[styles.progressBar, { backgroundColor: bloomTheme.colors.border }]}>
                             <View
                                 style={[
                                     styles.progressBarFill,
@@ -394,7 +392,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                                 ]}
                             />
                         </View>
-                        <Text style={[styles.progressText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#888888' }]}>
+                        <Text style={[styles.progressText, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
                             {unlockedAchievements.length} / {achievements.length}
                         </Text>
                     </View>
@@ -403,7 +401,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 {/* Unlocked Achievements */}
                 {unlockedAchievements.length > 0 && (
                     <>
-                        <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
+                        <Text style={[styles.sectionTitle, { color: bloomTheme.colors.text }]}>
                             {t('karma.achievements.unlocked') || 'Unlocked Achievements'}
                         </Text>
                         <View style={styles.achievementsGrid}>
@@ -415,7 +413,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 {/* Locked Achievements */}
                 {lockedAchievements.length > 0 && (
                     <>
-                        <Text style={[styles.sectionTitle, { color: themeStyles.textColor }]}>
+                        <Text style={[styles.sectionTitle, { color: bloomTheme.colors.text }]}>
                             {t('karma.achievements.locked') || 'Locked Achievements'}
                         </Text>
                         <View style={styles.achievementsGrid}>

package/src/ui/screens/karma/KarmaRulesScreen.tsx

@@ -4,9 +4,7 @@ import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-nat
 import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { normalizeTheme } from '../../utils/themeUtils';
-import { useColorScheme } from '../../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../../context/OxyContext';
 
 const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
@@ -17,9 +15,7 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const colorScheme = useColorScheme();
-    const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const bloomTheme = useTheme();
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
@@ -33,7 +29,7 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }, [oxyServices]);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('karma.rules.title') || 'Karma Rules'}
                 subtitle={t('karma.rules.subtitle') || 'How to earn karma points'}
@@ -48,11 +44,11 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {rules.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: themeStyles.textColor }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
+                        <Text style={[styles.placeholder, { color: bloomTheme.colors.text }]}>{t('karma.rules.empty') || 'No rules found.'}</Text>
                     ) : (
                         rules.map((rule, idx) => (
                             <View key={rule.id || idx} style={styles.ruleRow}>
-                                <Text style={[styles.ruleDesc, { color: themeStyles.textColor }]}>{rule.description}</Text>
+                                <Text style={[styles.ruleDesc, { color: bloomTheme.colors.text }]}>{rule.description}</Text>
                             </View>
                         ))
                     )}