@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/fileManagement/hooks/useFileUploadState.ts

@@ -1,9 +1,15 @@
 import type React from 'react';
 import { useCallback, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { toast } from '@oxyhq/bloom';
 import type { AssetUploadInput, FileMetadata } from '@oxyhq/core';
-import { useFileStore } from '../../../stores/fileStore';
 import type { useUploadFile } from '../../../hooks/mutations/useAccountMutations';
+import { queryKeys } from '../../../hooks/queries/queryKeys';
+import {
+    prependFileToCache,
+    removeFileFromCache,
+    replaceFileInCache,
+} from '../../../hooks/queries/useFileQueries';
 import { convertDocumentPickerAssetToFile, formatFileSize } from '../../../utils/fileManagement';
 import {
     createPendingUploadFile,
@@ -17,6 +23,15 @@ import {
     loadDocumentPicker,
 } from '../shared';
 
+/** Aggregate progress across a multi-file upload. */
+export interface FileUploadAggregateProgress {
+    current: number;
+    total: number;
+}
+
+/** Minimum time the "Uploading…" indicator stays visible (anti-flash). */
+const MIN_BANNER_MS = 600;
+
 function revokePreviewUrl(preview: string | undefined): void {
     if (preview?.startsWith('blob:')) {
         URL.revokeObjectURL(preview);
@@ -47,7 +62,6 @@ export interface UseFileUploadStateParams {
     onClose?: () => void;
     selectedIds: Set<string>;
     setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
-    loadFiles: (mode?: 'initial' | 'refresh' | 'silent' | 'more') => Promise<void> | void;
     t: (key: string, vars?: Record<string, string | number>) => string;
 }
 
@@ -56,6 +70,10 @@ export interface UseFileUploadStateResult {
     isPickingDocument: boolean;
     pendingFiles: PendingUploadFile[];
     showUploadPreview: boolean;
+    /** Whether an upload is in flight (drives the "Uploading…" banner). */
+    uploading: boolean;
+    /** Aggregate progress across the current upload, or null. */
+    uploadProgress: FileUploadAggregateProgress | null;
     handleFileUpload: () => Promise<void>;
     handleConfirmUpload: () => Promise<void>;
     handleCancelUpload: () => void;
@@ -80,25 +98,23 @@ export const useFileUploadState = ({
     onClose,
     selectedIds,
     setSelectedIds,
-    loadFiles,
     t,
 }: UseFileUploadStateParams): UseFileUploadStateResult => {
     const [isPickingDocument, setIsPickingDocument] = useState(false);
     const [pendingFiles, setPendingFiles] = useState<PendingUploadFile[]>([]);
     const [showUploadPreview, setShowUploadPreview] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState<FileUploadAggregateProgress | null>(null);
 
+    const queryClient = useQueryClient();
     const uploadStartRef = useRef<number | null>(null);
-    const MIN_BANNER_MS = 600;
-
-    const storeSetUploading = useFileStore(s => s.setUploading);
-    const storeSetUploadProgress = useFileStore(s => s.setUploadProgress);
 
     const endUpload = useCallback(() => {
         const started = uploadStartRef.current;
         const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
         const remaining = elapsed < MIN_BANNER_MS ? MIN_BANNER_MS - elapsed : 0;
         setTimeout(() => {
-            useFileStore.getState().setUploading(false);
+            setUploading(false);
             uploadStartRef.current = null;
         }, remaining);
     }, []);
@@ -108,7 +124,7 @@ export const useFileUploadState = ({
         if (!targetUserId) return []; // Guard clause to ensure userId is defined
         const uploadedFiles: FileMetadata[] = [];
         try {
-            storeSetUploadProgress({ current: 0, total: selectedFiles.length });
+            setUploadProgress({ current: 0, total: selectedFiles.length });
             const maxSize = 50 * 1024 * 1024; // 50MB
             const oversizedFiles = selectedFiles.filter(file => candidateSize(file) > maxSize);
             if (oversizedFiles.length > 0) {
@@ -120,20 +136,16 @@ export const useFileUploadState = ({
             let failureCount = 0;
             const errors: string[] = [];
             for (let i = 0; i < selectedFiles.length; i++) {
-                storeSetUploadProgress({ current: i + 1, total: selectedFiles.length });
+                setUploadProgress({ current: i + 1, total: selectedFiles.length });
                 const raw = selectedFiles[i];
                 const fileName = candidateName(raw, `file-${i + 1}`);
                 const fileSize = candidateSize(raw);
                 const fileType = candidateType(raw);
-                const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`; // Unique ID per file
+                const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).slice(2, 11)}`; // Unique ID per file
 
                 try {
                     // Validate file before upload
                     if (!raw || !fileName || fileSize <= 0) {
-                        const errorMsg = `Invalid file: ${fileName}`;
-                        if (__DEV__) {
-                            console.error('Upload validation failed:', { file: raw, error: errorMsg });
-                        }
                         failureCount++;
                         errors.push(`${fileName}: Invalid file (missing name or size)`);
                         continue;
@@ -158,7 +170,7 @@ export const useFileUploadState = ({
                         metadata: optimisticMetadata,
                         variants: [],
                     };
-                    useFileStore.getState().addFile(optimisticFile, { prepend: true });
+                    prependFileToCache(queryClient, targetUserId, optimisticFile);
 
                     // Use the mutation hook with authentication handling
                     const result = await uploadFileMutation.mutateAsync({
@@ -179,41 +191,26 @@ export const useFileUploadState = ({
                             metadata: f.metadata || {},
                             variants: f.variants || [],
                         };
-                        // Remove optimistic then add real
-                        useFileStore.getState().removeFile(optimisticId);
-                        useFileStore.getState().addFile(merged, { prepend: true });
+                        // Swap the optimistic temp entry for the persisted record.
+                        replaceFileInCache(queryClient, targetUserId, optimisticId, merged);
                         uploadedFiles.push(merged);
                         successCount++;
                     } else {
                         // Upload succeeded but the API returned no file payload,
                         // so we cannot build a real entry. Drop the optimistic
                         // placeholder instead of stranding a `temp-…` id (which
-                        // would leak into asset URLs); the scheduled silent
-                        // reconcile below re-fetches the persisted record.
-                        useFileStore.getState().removeFile(optimisticId);
-                        if (__DEV__) {
-                            console.warn('Upload completed but no file data returned:', { fileName, result });
-                        }
+                        // would leak into asset URLs); the reconcile invalidation
+                        // below re-fetches the persisted record.
+                        removeFileFromCache(queryClient, targetUserId, optimisticId);
                         // Still count as success if upload didn't throw
                         successCount++;
                     }
                 } catch (error: unknown) {
                     failureCount++;
                     const errorMessage = getErrorMessage(error) || 'Upload failed';
-                    const fullError = `${fileName}: ${errorMessage}`;
-                    errors.push(fullError);
-                    if (__DEV__) {
-                        console.error('File upload failed:', {
-                            fileName,
-                            fileSize,
-                            fileType,
-                            error: errorMessage,
-                            stack: (error instanceof Error) ? error.stack : undefined
-                        });
-                    }
-
+                    errors.push(`${fileName}: ${errorMessage}`);
                     // Remove optimistic file on error (use the same optimisticId from above)
-                    useFileStore.getState().removeFile(optimisticId);
+                    removeFileFromCache(queryClient, targetUserId, optimisticId);
                 }
             }
 
@@ -228,12 +225,15 @@ export const useFileUploadState = ({
                     : '';
                 toast.error(`${t('fileManagement.toasts.uploadFailed', { count: failureCount })}${errorDetails}`);
             }
-            // Silent background refresh to ensure metadata/variants updated
-            setTimeout(() => { loadFiles('silent'); }, 1200);
+            // Reconcile against the server (picks up generated variants / metadata)
+            // — replaces the old silent-reload timer.
+            if (successCount > 0) {
+                queryClient.invalidateQueries({ queryKey: queryKeys.files.list(targetUserId) });
+            }
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
         } finally {
-            storeSetUploadProgress(null);
+            setUploadProgress(null);
         }
         return uploadedFiles;
     };
@@ -245,35 +245,23 @@ export const useFileUploadState = ({
         for (const file of selectedFiles) {
             // Validate file has required properties
             if (!file) {
-                if (__DEV__) {
-                    console.error('Invalid file: file is null or undefined');
-                }
                 toast.error(t('fileManagement.toasts.invalidFileMissing'));
                 continue;
             }
 
             const name = candidateName(file, '');
             if (!name) {
-                if (__DEV__) {
-                    console.error('Invalid file: missing or invalid name property', file);
-                }
                 toast.error(t('fileManagement.toasts.invalidFileName'));
                 continue;
             }
 
             const size = (file as { size?: number }).size;
             if (size === undefined || size === null || Number.isNaN(size)) {
-                if (__DEV__) {
-                    console.error('Invalid file: missing or invalid size property', file);
-                }
                 toast.error(t('fileManagement.toasts.invalidFileSize', { name }));
                 continue;
             }
 
             if (size <= 0) {
-                if (__DEV__) {
-                    console.error('Invalid file: file size is zero or negative', file);
-                }
                 toast.error(t('fileManagement.toasts.fileEmpty', { name }));
                 continue;
             }
@@ -303,11 +291,8 @@ export const useFileUploadState = ({
                             (typeof Blob !== 'undefined' && file instanceof Blob)) {
                             preview = URL.createObjectURL(file as Blob);
                         }
-                    } catch (error: unknown) {
-                        if (__DEV__) {
-                            console.warn('Failed to create preview URL:', error);
-                        }
-                        // Preview is optional, continue without it
+                    } catch {
+                        // Preview is optional — continue without it.
                     }
                 }
             }
@@ -330,23 +315,23 @@ export const useFileUploadState = ({
 
         setShowUploadPreview(false);
         uploadStartRef.current = Date.now();
-        storeSetUploading(true);
-        storeSetUploadProgress(null);
+        setUploading(true);
+        setUploadProgress(null);
 
         try {
             const filesToUpload = pendingFiles.map(pf => pf.file);
-            storeSetUploadProgress({ current: 0, total: filesToUpload.length });
+            setUploadProgress({ current: 0, total: filesToUpload.length });
             const uploadedFiles = await processFileUploads(filesToUpload);
 
             // Cleanup preview URLs
-            pendingFiles.forEach(pf => {
+            for (const pf of pendingFiles) {
                 revokePreviewUrl(pf.preview);
-            });
+            }
             setPendingFiles([]);
 
             // If in selectMode, automatically select the uploaded file(s)
             if (selectMode && uploadedFiles.length > 0) {
-                // Wait a bit for the file store to update and ensure file is available
+                // Defer one tick so the query cache has settled before selecting.
                 setTimeout(() => {
                     const fileToSelect = uploadedFiles[0];
                     if (!multiSelect && fileToSelect) {
@@ -359,11 +344,11 @@ export const useFileUploadState = ({
                         }
                     } else if (multiSelect) {
                         // Multi-select mode - add all uploaded files to selection
-                        uploadedFiles.forEach(file => {
+                        for (const file of uploadedFiles) {
                             if (!selectedIds.has(file.id)) {
                                 setSelectedIds(prev => new Set(prev).add(file.id));
                             }
-                        });
+                        }
                     }
                 }, 500);
             }
@@ -377,9 +362,9 @@ export const useFileUploadState = ({
 
     const handleCancelUpload = () => {
         // Cleanup preview URLs
-        pendingFiles.forEach(pf => {
+        for (const pf of pendingFiles) {
             revokePreviewUrl(pf.preview);
-        });
+        }
         setPendingFiles([]);
         setShowUploadPreview(false);
     };
@@ -487,9 +472,6 @@ export const useFileUploadState = ({
                 toast.error(t('fileManagement.toasts.noFilesProcessed'));
             }
         } catch (error: unknown) {
-            if (__DEV__) {
-                console.error('File upload error:', error);
-            }
             if (getErrorMessage(error)?.includes('expo-document-picker') || getErrorMessage(error)?.includes('Different document picking in progress')) {
                 if (getErrorMessage(error)?.includes('Different document picking in progress')) {
                     toast.error(t('fileManagement.toasts.waitForSelection'));
@@ -509,6 +491,8 @@ export const useFileUploadState = ({
         isPickingDocument,
         pendingFiles,
         showUploadPreview,
+        uploading,
+        uploadProgress,
         handleFileUpload,
         handleConfirmUpload,
         handleCancelUpload,

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>
     );
 };