@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/screens/trust/TrustAboutScreen.tsx

@@ -1,32 +1,26 @@
 import type React from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H4, Text } from '@oxyhq/bloom/typography';
 import { IconCircle } from '@oxyhq/bloom/icon-circle';
 import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
 import * as Icons from '@oxyhq/bloom/icons';
 import type { BaseScreenProps } from '../../types/navigation';
-import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
 
-const TrustAboutScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
+const TrustAboutScreen: React.FC<BaseScreenProps> = () => {
     const { t } = useI18n();
     const bloomTheme = useTheme();
     const iconColor = bloomTheme.colors.primary;
 
+    useSurfaceHeader({
+        title: t('trust.about.title') || 'About Oxy Trust',
+        subtitle: t('trust.about.subtitle') || 'Learn about the reputation system',
+    });
+
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('trust.about.title') || 'About Oxy Trust'}
-                subtitle={t('trust.about.subtitle') || 'Learn about the reputation system'}
-                onBack={goBack}
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1 px-screen-margin"
-                showsVerticalScrollIndicator={false}
-                contentContainerClassName="pb-space-32"
-            >
+            <View className="px-screen-margin pt-space-16 pb-space-32">
                 <View className="items-center py-space-24 gap-space-12">
                     <IconCircle icon={Icons.ShieldCheck_Stroke2_Corner0_Rounded} />
                     <Text className="font-sans text-body text-text-secondary text-center">
@@ -69,8 +63,7 @@ const TrustAboutScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                 <Text className="font-sans text-body text-text-secondary">
                     {t('trust.about.why.text') || 'Your reputation and trust tier unlock special features and recognition in the Oxy Ecosystem. The more you contribute, the more you earn!'}
                 </Text>
-            </ScrollView>
-        </View>
+            </View>
     );
 };
 

package/src/ui/screens/trust/TrustCenterScreen.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import type { ReputationTransaction, TrustTier } from '@oxyhq/core';
 import { Ionicons } from '@expo/vector-icons';
 import { Chip } from '@oxyhq/bloom/chip';
@@ -8,16 +8,14 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { H1, Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import type { BaseScreenProps } from '../../types/navigation';
-import Header from '../../components/Header';
 import { SettingsIcon } from '../../components/SettingsIcon';
 import { Loading } from '@oxyhq/bloom/loading';
 import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
 import { useOxy } from '../../context/OxyContext';
 import { getTrustTierLabel } from './trustTier';
 
 const TrustCenterScreen: React.FC<BaseScreenProps> = ({
-    onClose,
-    goBack,
     navigate,
 }) => {
     // Reputation/trust is the ACTIVE account's standing (the org/project/bot
@@ -61,38 +59,28 @@ const TrustCenterScreen: React.FC<BaseScreenProps> = ({
     );
 
     const title = t('trust.center.title') || 'Trust Center';
+    useSurfaceHeader({ title });
 
     if (!isAuthenticated) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header title={title} onBack={goBack || onClose} elevation="subtle" />
-                <View style={styles.center}>
+                <View className="items-center py-space-40">
                     <Text className="text-text font-medium text-base">
                         {t('common.status.notSignedIn') || 'Not signed in'}
                     </Text>
                 </View>
-            </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header title={title} onBack={goBack || onClose} elevation="subtle" />
-                <View style={styles.center}>
+                <View className="items-center py-space-40">
                     <Loading size="large" color={primaryColor} />
                 </View>
-            </View>
         );
     }
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header title={title} onBack={goBack || onClose} elevation="subtle" />
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pb-space-24"
-            >
+            <View className="px-screen-margin pt-space-16 pb-space-24">
                 {/* Balance hero card */}
                 <View className="items-center bg-fill-secondary rounded-radius-20 px-space-20 py-space-24 mb-space-16">
                     <H1 style={{ color: primaryColor }}>{reputationTotal ?? 0}</H1>
@@ -250,20 +238,13 @@ const TrustCenterScreen: React.FC<BaseScreenProps> = ({
                         {error}
                     </Text>
                 ) : null}
-            </ScrollView>
-        </View>
+            </View>
     );
 };
 
-// Layout-only styles: flex centering for the empty/loading branches and the
-// info caption's measured max width. No color, spacing, radius, or typography
-// roles live here — those use Bloom token classes.
+// Layout-only styles: the info caption's measured max width. No color, spacing,
+// radius, or typography roles live here — those use Bloom token classes.
 const styles = StyleSheet.create({
-    center: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
     infoText: {
         maxWidth: 320,
     },

package/src/ui/screens/trust/TrustFAQScreen.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import Header from '../../components/Header';
-import { SearchInput } from '@oxyhq/bloom/search-input';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
+import { Search } from '@oxyhq/bloom/search';
 import {
     Accordion,
     AccordionItem,
@@ -18,13 +18,18 @@ const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const
  * TrustFAQScreen
  *
  * Frequently asked questions about Oxy Trust, rendered with the shared Bloom
- * Accordion (single-expand) + SearchInput. Styling is centralized Bloom token
+ * Accordion (single-expand) + Search. Styling is centralized Bloom token
  * classes; the Bloom Accordion owns its own expand/collapse animation, so no
  * `LayoutAnimation` is used here.
  */
-const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
+const TrustFAQScreen: React.FC<BaseScreenProps> = () => {
     const { t } = useI18n();
 
+    useSurfaceHeader({
+        title: t('trust.faq.title') || 'Trust FAQ',
+        subtitle: t('trust.faq.subtitle') || 'Frequently asked questions about Oxy Trust',
+    });
+
     const [search, setSearch] = useState('');
     const [expanded, setExpanded] = useState<string | undefined>(undefined);
 
@@ -51,17 +56,9 @@ const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
     );
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('trust.faq.title') || 'Trust FAQ'}
-                subtitle={t('trust.faq.subtitle') || 'Frequently asked questions about Oxy Trust'}
-                subtitleVariant="muted"
-                onBack={goBack}
-                elevation="subtle"
-            />
-
+        <>
             <View className="px-screen-margin pt-space-20 pb-space-12">
-                <SearchInput
+                <Search
                     label={t('trust.faq.search') || 'Search FAQ...'}
                     value={search}
                     onChangeText={setSearch}
@@ -70,7 +67,7 @@ const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                 />
             </View>
 
-            <ScrollView className="flex-1 px-screen-margin" showsVerticalScrollIndicator={false}>
+            <View className="px-screen-margin">
                 {filteredFaqs.length === 0 ? (
                     <Text className="text-text-secondary text-center p-space-40">
                         {t('trust.faq.noResults', { query: search }) ||
@@ -96,8 +93,8 @@ const TrustFAQScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                         ))}
                     </Accordion>
                 )}
-            </ScrollView>
-        </View>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/trust/TrustLeaderboardScreen.tsx

@@ -16,8 +16,8 @@ import { Button } from '@oxyhq/bloom/button';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../../types/navigation';
 import { Avatar } from '@oxyhq/bloom/avatar';
-import Header from '../../components/Header';
 import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
 import { useOxy } from '../../context/OxyContext';
 import { getTrustTierLabel } from './trustTier';
 
@@ -27,7 +27,7 @@ const ERROR_ICON_SIZE = 48;
 /** Ranks within the podium (1–3) get a highlighted row surface. */
 const PODIUM_RANK = 3;
 
-const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate }) => {
+const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
     const { oxyServices, user: currentUser } = useOxy();
     const { t, locale } = useI18n();
     const bloomTheme = useTheme();
@@ -61,6 +61,7 @@ const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate })
 
     const title = t('trust.leaderboard.title') || 'Trust Leaderboard';
     const subtitle = t('trust.leaderboard.subtitle') || 'Top contributors in the community';
+    useSurfaceHeader({ title, subtitle });
 
     const handleEntryPress = useCallback(
         (entry: ReputationLeaderboardEntry) => {
@@ -130,7 +131,6 @@ const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate })
     if (isLoading) {
         return (
             <View className="flex-1 bg-bg">
-                <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
                 <View style={styles.center}>
                     <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
                 </View>
@@ -141,7 +141,6 @@ const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate })
     if (error) {
         return (
             <View className="flex-1 bg-bg">
-                <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
                 <View style={styles.center} className="px-space-32 gap-space-16">
                     <Ionicons name="alert-circle" size={ERROR_ICON_SIZE} color={bloomTheme.colors.error} />
                     <Text className="text-text-secondary text-base text-center">
@@ -157,7 +156,6 @@ const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, navigate })
 
     return (
         <View className="flex-1 bg-bg">
-            <Header title={title} subtitle={subtitle} onBack={goBack} elevation="subtle" />
             <FlatList
                 data={leaderboard}
                 renderItem={renderEntry}

package/src/ui/screens/trust/TrustRewardsScreen.tsx

@@ -1,8 +1,8 @@
 import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import Header from '../../components/Header';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
 import { Ionicons } from '@expo/vector-icons';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H1, H4, H5, Text } from '@oxyhq/bloom/typography';
@@ -75,11 +75,16 @@ const RARITY_DARKEN = 0.4;
 const ACCENT_LIGHTEN = 0.1;
 const LOCKED_OPACITY = 0.5;
 
-const TrustRewardsScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
+const TrustRewardsScreen: React.FC<BaseScreenProps> = () => {
     const { t } = useI18n();
     // Reputation/trust is the ACTIVE account's standing (the org/project/bot
     // when switched, else the personal user).
     const { user, oxyServices, isAuthenticated } = useOxy();
+
+    useSurfaceHeader({
+        title: t('trust.rewards.title') || 'Trust Rewards',
+        subtitle: t('trust.rewards.subtitle') || 'Unlock special features and recognition',
+    });
     const [reputationTotal, setReputationTotal] = useState<number>(0);
     const [, setIsLoading] = useState(true);
 
@@ -360,19 +365,11 @@ const TrustRewardsScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
 
     if (!isAuthenticated) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('trust.rewards.title') || 'Trust Rewards'}
-                    subtitle={t('trust.rewards.subtitle') || 'Unlock special features and recognition'}
-                    onBack={goBack}
-                    elevation="subtle"
-                />
-                <View className="flex-1 items-center justify-center px-screen-margin">
+                <View className="items-center justify-center px-screen-margin py-space-40">
                     <Text className="text-text text-base text-center">
                         {t('common.status.notSignedIn') || 'Not signed in'}
                     </Text>
                 </View>
-            </View>
         );
     }
 
@@ -381,18 +378,7 @@ const TrustRewardsScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
         : 0;
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('trust.rewards.title') || 'Trust Rewards'}
-                subtitle={t('trust.rewards.subtitle') || 'Unlock special features and recognition'}
-                onBack={goBack}
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pt-space-20 pb-space-40"
-                showsVerticalScrollIndicator={false}
-            >
+            <View className="px-screen-margin pt-space-20 pb-space-40">
                 {/* Stats Header */}
                 <View className="bg-fill rounded-radius-20 p-space-20 mb-space-24">
                     <View className="flex-row justify-between items-center mb-space-16">
@@ -458,8 +444,7 @@ const TrustRewardsScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                         </View>
                     </>
                 )}
-            </ScrollView>
-        </View>
+            </View>
     );
 };
 

package/src/ui/screens/trust/TrustRulesScreen.tsx

@@ -1,12 +1,12 @@
 import type React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text } from 'react-native';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Chip } from '@oxyhq/bloom/chip';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { ReputationRule, ReputationCategory } from '@oxyhq/core';
 import type { BaseScreenProps } from '../../types/navigation';
-import Header from '../../components/Header';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
 import { Loading } from '@oxyhq/bloom/loading';
 import { useI18n } from '../../hooks/useI18n';
 import { useOxy } from '../../context/OxyContext';
@@ -22,9 +22,14 @@ const CATEGORY_ORDER: ReputationCategory[] = [
     'other',
 ];
 
-const TrustRulesScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
+const TrustRulesScreen: React.FC<BaseScreenProps> = () => {
     const { oxyServices } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({
+        title: t('trust.rules.title') || 'Trust Rules',
+        subtitle: t('trust.rules.subtitle') || 'How to earn reputation',
+    });
     const bloomTheme = useTheme();
 
     const [rules, setRules] = useState<ReputationRule[]>([]);
@@ -61,13 +66,7 @@ const TrustRulesScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
     }, [rules]);
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('trust.rules.title') || 'Trust Rules'}
-                subtitle={t('trust.rules.subtitle') || 'How to earn reputation'}
-                onBack={goBack}
-                elevation="subtle"
-            />
+        <>
             {isLoading ? (
                 <Loading size="large" color={bloomTheme.colors.primary} />
             ) : error ? (
@@ -79,7 +78,6 @@ const TrustRulesScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                     {t('trust.rules.empty') || 'No rules found.'}
                 </Text>
             ) : (
-                <ScrollView className="flex-1">
                     <View className="px-screen-margin pb-space-24 pt-space-12">
                         {groupedRules.map(({ category, items }) => (
                             <SettingsListGroup
@@ -106,9 +104,8 @@ const TrustRulesScreen: React.FC<BaseScreenProps> = ({ goBack }) => {
                             </SettingsListGroup>
                         ))}
                     </View>
-                </ScrollView>
             )}
-        </View>
+        </>
     );
 };
 

package/src/ui/types/navigation.ts

@@ -15,6 +15,14 @@ export interface BaseScreenProps {
     goBack?: () => void;
     onClose?: () => void;
     onAuthenticated?: (payload?: unknown) => void;
+    /**
+     * Dismiss THIS surface, resolving the `present()` promise that opened it
+     * with `result`. Injected by the surface host (the P1 surface stack). Picker
+     * and crop screens use it to hand a typed result back to the awaiting
+     * `surfaces.present(...)` call instead of an untyped `onSelect`/`onConfirm`
+     * callback prop.
+     */
+    dismiss?: (result?: unknown) => void;
     
     // Theme props
     theme?: 'light' | 'dark' | string;