@oxy.so/services 1.0.0

package/src/ui/screens/fileManagement/shared.ts

@@ -0,0 +1,88 @@
+import type { RNFileDescriptor } from '@oxy.so/core';
+import { getErrorMessage as getOxyErrorMessage } from '@oxy.so/core';
+
+// Lazy load expo-document-picker (optional dependency).
+// This allows the screen to work even if expo-document-picker is not installed.
+let DocumentPicker: typeof import('expo-document-picker') | null = null;
+export const loadDocumentPicker = async () => {
+    if (DocumentPicker) return DocumentPicker;
+    try {
+        DocumentPicker = await import('expo-document-picker');
+        return DocumentPicker;
+    } catch (error) {
+        throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
+    }
+};
+
+/**
+ * Extract error message from unknown error type.
+ * Delegates to the canonical `getErrorMessage` in `@oxy.so/core` and returns
+ * `undefined` for empty results (so callers can fall back to a translated
+ * message via `||`).
+ */
+export const getErrorMessage = (error: unknown): string | undefined => {
+    if (error == null) return undefined;
+    const message = getOxyErrorMessage(error, '');
+    return message ? message : undefined;
+};
+
+/**
+ * A picker-produced file ready to upload. On web this is a real `File`
+ * (carrying an optional `uri` for preview). On native, it's an
+ * {@link RNFileDescriptor} — passed straight to FormData by `assetUpload`.
+ */
+export type UploadCandidate = (File & { uri?: string }) | RNFileDescriptor;
+
+/** Returns the display name for either a web File or an RN descriptor. */
+export const candidateName = (candidate: UploadCandidate, fallback: string): string =>
+    (candidate.name && typeof candidate.name === 'string' ? candidate.name : fallback);
+
+/** Returns the byte size for either a web File or an RN descriptor (0 if unknown). */
+export const candidateSize = (candidate: UploadCandidate): number => {
+    const size = (candidate as { size?: number }).size;
+    return typeof size === 'number' && Number.isFinite(size) ? size : 0;
+};
+
+/** Returns the mime type for either a web File or an RN descriptor. */
+export const candidateType = (candidate: UploadCandidate): string => {
+    const value = (candidate as { type?: string }).type;
+    return typeof value === 'string' && value.length > 0 ? value : 'application/octet-stream';
+};
+
+/** Returns the preview URI for an upload candidate, if available. */
+export const candidateUri = (candidate: UploadCandidate): string | undefined => {
+    const uri = (candidate as { uri?: string }).uri;
+    return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+};
+
+/** A processed file ready for review in the upload preview modal. */
+export interface PendingUploadFile {
+    /** Stable row identity for React keys and removal — survives reorder/filter. */
+    id: string;
+    file: UploadCandidate;
+    preview?: string;
+    size: number;
+    name: string;
+    type: string;
+}
+
+const createPendingUploadId = (): string =>
+    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+/** Mint a {@link PendingUploadFile} row from a validated upload candidate. */
+export const createPendingUploadFile = (
+    file: UploadCandidate,
+    preview: string | undefined,
+    size: number,
+    name: string,
+    type: string,
+): PendingUploadFile => ({
+    id: createPendingUploadId(),
+    file,
+    preview,
+    size,
+    name,
+    type,
+});

package/src/ui/screens/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Explicit screen entry point.
+ *
+ * Most applications should open these through the surface API. Applications
+ * that intentionally embed a screen import it from this subpath, accepting the
+ * corresponding screen module in their own bundle. Screens must never be
+ * re-exported by the package root or `./ui`: doing so defeats the lazy surface
+ * registry for every consumer.
+ */
+export { default as ProfileScreen } from './ProfileScreen';
+export { default as ManageAccountScreen } from './ManageAccountScreen';
+export { default as NotificationsScreen } from './NotificationsScreen';
+export { default as PreferencesScreen } from './PreferencesScreen';
+export { default as ConnectedAppsScreen } from './ConnectedAppsScreen';
+export { default as CreateAccountScreen } from './CreateAccountScreen';
+export { default as AccountMembersScreen } from './AccountMembersScreen';
+export { default as AccountSettingsScreen } from './AccountSettingsScreen';

package/src/ui/screens/linkFormat.ts

@@ -0,0 +1,37 @@
+/**
+ * Pure link-display helpers for the profile "links" editor. Kept out of the
+ * screen component so the string-coercion guard can be unit-tested without
+ * rendering the whole React Native screen.
+ */
+
+/** Strip the protocol and any trailing slash from a link URL for display. */
+export const getLinkTitle = (url: string): string =>
+    url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+
+/** Human-readable description for a link URL. */
+export const getLinkDescription = (url: string): string => `Link to ${url}`;
+
+export interface LinkListItem {
+    id: string;
+    url: string;
+    title: string;
+    description: string;
+}
+
+/**
+ * Build editable list items from a raw links array. The array can come from
+ * legacy or untrusted profile data whose elements are not guaranteed to be
+ * strings, so each entry is coerced with `String(item ?? '')` before formatting
+ * — a non-string element must never crash the editor.
+ */
+export function linksToListItems(links: readonly unknown[]): LinkListItem[] {
+    return links.map((item, i) => {
+        const url = String(item ?? '');
+        return {
+            id: `link-${i}`,
+            url,
+            title: getLinkTitle(url),
+            description: getLinkDescription(url),
+        };
+    });
+}

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

@@ -0,0 +1,70 @@
+import type React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { H4, Text } from '@oxy.so/bloom/typography';
+import { IconCircle } from '@oxy.so/bloom/icon-circle';
+import { BenefitList, BenefitRow } from '@oxy.so/bloom/benefit-list';
+import * as Icons from '@oxy.so/bloom/icons';
+import type { BaseScreenProps } from '../../types/navigation';
+import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
+
+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="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">
+                        {t('trust.about.intro') || 'Oxy Trust is a recognition of your positive actions in the Oxy Ecosystem. Reputation cannot be sent or received directly, only earned by contributing to the community.'}
+                    </Text>
+                </View>
+
+                <H4 className="text-sectionTitle font-sectionTitle text-text-secondary mb-space-12">
+                    {t('trust.about.how.title') || 'How to Earn Reputation'}
+                </H4>
+                <BenefitList
+                    className="mb-space-24"
+                    accessibilityLabel={t('trust.about.how.title') || 'How to Earn Reputation'}
+                >
+                    <BenefitRow
+                        icon={<Icons.UserCircle_Stroke2_Corner0_Rounded size="sm" style={{ color: iconColor }} />}
+                        label={t('trust.about.how.help') || 'Helping other users'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.Flag_Stroke2_Corner0_Rounded size="sm" style={{ color: iconColor }} />}
+                        label={t('trust.about.how.report') || 'Reporting bugs'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.PencilLine_Stroke2_Corner0_Rounded size="sm" style={{ color: iconColor }} />}
+                        label={t('trust.about.how.contribute') || 'Contributing content'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.Calendar_Stroke2_Corner0_Rounded size="sm" style={{ color: iconColor }} />}
+                        label={t('trust.about.how.participate') || 'Participating in events'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.Sparkle_Stroke2_Corner0_Rounded size="sm" style={{ color: iconColor }} />}
+                        label={t('trust.about.how.other') || 'Other positive actions'}
+                    />
+                </BenefitList>
+
+                <H4 className="text-sectionTitle font-sectionTitle text-text-secondary mb-space-12">
+                    {t('trust.about.why.title') || 'Why Oxy Trust?'}
+                </H4>
+                <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>
+            </View>
+    );
+};
+
+export default TrustAboutScreen;

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

@@ -0,0 +1,253 @@
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ReputationTransaction, TrustTier } from '@oxy.so/contracts';
+import Ionicons from '../../icons/Ionicons';
+import { Chip } from '@oxy.so/bloom/chip';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { H1, Text } from '@oxy.so/bloom/typography';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import type { BaseScreenProps } from '../../types/navigation';
+import { SettingsIcon } from '../../components/SettingsIcon';
+import { Loading } from '@oxy.so/bloom/loading';
+import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
+import { useOxy } from '../../context/OxyContext';
+import { trustTierLabel } from '@oxy.so/core';
+
+const TrustCenterScreen: React.FC<BaseScreenProps> = ({
+    navigate,
+}) => {
+    // Reputation/trust is the ACTIVE account's standing (the org/project/bot
+    // when switched, else the personal user).
+    const { user, oxyServices, isAuthenticated } = useOxy();
+    const { t, locale } = useI18n();
+    const [reputationTotal, setReputationTotal] = useState<number | null>(null);
+    const [trustTier, setTrustTier] = useState<TrustTier | null>(null);
+    const [transactions, setTransactions] = useState<ReputationTransaction[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const bloomTheme = useTheme();
+    const primaryColor = bloomTheme.colors.primary;
+
+    useEffect(() => {
+        if (!user) return;
+        setIsLoading(true);
+        setError(null);
+        Promise.all([
+            oxyServices.getMyReputationBalance(),
+            oxyServices.getReputationTransactions(user.id, 20, 0),
+        ])
+            .then(([balance, txns]) => {
+                setReputationTotal(balance.total);
+                setTrustTier(balance.trustTier);
+                setTransactions(Array.isArray(txns) ? txns : []);
+            })
+            .catch((err: unknown) => {
+                setError(
+                    (err instanceof Error ? err.message : null) ||
+                        (t('trust.center.loadError') || 'Failed to load reputation data'),
+                );
+            })
+            .finally(() => setIsLoading(false));
+    }, [user, oxyServices, t]);
+
+    const resolvedTrustTierLabel = useMemo(
+        () => (trustTier ? trustTierLabel(locale, trustTier) : null),
+        [trustTier, locale],
+    );
+
+    const title = t('trust.center.title') || 'Trust Center';
+    useSurfaceHeader({ title });
+
+    if (!isAuthenticated) {
+        return (
+                <View className="items-center py-space-40">
+                    <Text className="text-text font-medium text-base">
+                        {t('common.status.notSignedIn') || 'Not signed in'}
+                    </Text>
+                </View>
+        );
+    }
+
+    if (isLoading) {
+        return (
+                <View className="items-center py-space-40">
+                    <Loading size="large" color={primaryColor} />
+                </View>
+        );
+    }
+
+    return (
+            <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>
+                    <Text className="text-text-tertiary text-base mt-space-2 mb-space-12">
+                        {t('trust.center.balance') || 'Reputation Balance'}
+                    </Text>
+                    {resolvedTrustTierLabel ? (
+                        <Chip
+                            variant="subtle"
+                            color="primary"
+                            startIcon={
+                                <Ionicons
+                                    name="shield-checkmark-outline"
+                                    size={14}
+                                    color={primaryColor}
+                                />
+                            }
+                        >
+                            {resolvedTrustTierLabel}
+                        </Chip>
+                    ) : null}
+                    <Text
+                        className="text-text-tertiary text-sm text-center mt-space-16"
+                        style={styles.infoText}
+                    >
+                        {t('trust.center.info') ||
+                            'Reputation can only be earned by positive actions in the Oxy Ecosystem. It cannot be sent or received directly.'}
+                    </Text>
+                </View>
+
+                {/* Trust actions */}
+                <SettingsListGroup
+                    title={t('trust.center.actions.title') || 'Explore'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="trophy"
+                                color={bloomTheme.colors.warning}
+                            />
+                        }
+                        title={t('trust.center.actions.leaderboard') || 'Leaderboard'}
+                        onPress={() => navigate?.('TrustLeaderboard')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="file-document"
+                                color={bloomTheme.colors.info}
+                            />
+                        }
+                        title={t('trust.center.actions.rules') || 'Rules'}
+                        onPress={() => navigate?.('TrustRules')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="gift"
+                                color={bloomTheme.colors.success}
+                            />
+                        }
+                        title={t('trust.center.actions.rewards') || 'Rewards'}
+                        onPress={() => navigate?.('TrustRewards')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="star"
+                                color={bloomTheme.colors.primary}
+                            />
+                        }
+                        title={t('trust.center.actions.about') || 'About'}
+                        onPress={() => navigate?.('AboutTrust')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="help-circle"
+                                color={bloomTheme.colors.secondary}
+                            />
+                        }
+                        title={t('trust.center.actions.faq') || 'FAQ'}
+                        onPress={() => navigate?.('TrustFAQ')}
+                    />
+                </SettingsListGroup>
+
+                {/* Reputation history */}
+                <SettingsListGroup
+                    title={t('trust.center.history') || 'Reputation History'}
+                >
+                    {transactions.length === 0 ? (
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="history"
+                                    color={bloomTheme.colors.textTertiary}
+                                />
+                            }
+                            title={
+                                t('trust.center.noHistory') || 'No reputation history yet.'
+                            }
+                            showChevron={false}
+                            disabled
+                        />
+                    ) : (
+                        transactions.map((entry) => (
+                            <SettingsListItem
+                                key={entry.id}
+                                icon={
+                                    <SettingsIcon
+                                        name={
+                                            entry.points > 0
+                                                ? 'plus-circle'
+                                                : 'minus-circle'
+                                        }
+                                        color={
+                                            entry.points > 0
+                                                ? bloomTheme.colors.success
+                                                : bloomTheme.colors.error
+                                        }
+                                    />
+                                }
+                                title={
+                                    entry.reason ||
+                                    entry.actionType ||
+                                    (t('trust.center.noDescription') || 'No description')
+                                }
+                                description={
+                                    `${entry.category}${
+                                        entry.createdAt
+                                            ? ` · ${new Date(entry.createdAt).toLocaleString()}`
+                                            : ''
+                                    }`
+                                }
+                                rightElement={
+                                    <Chip
+                                        variant="subtle"
+                                        size="small"
+                                        color={entry.points > 0 ? 'success' : 'error'}
+                                    >
+                                        {`${entry.points > 0 ? '+' : ''}${entry.points}`}
+                                    </Chip>
+                                }
+                                showChevron={false}
+                            />
+                        ))
+                    )}
+                </SettingsListGroup>
+
+                {error ? (
+                    <Text
+                        className="text-sm text-center mt-space-16"
+                        style={{ color: bloomTheme.colors.error }}
+                    >
+                        {error}
+                    </Text>
+                ) : null}
+            </View>
+    );
+};
+
+// 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({
+    infoText: {
+        maxWidth: 320,
+    },
+});
+
+export default TrustCenterScreen;

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

@@ -0,0 +1,101 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { View } from 'react-native';
+import type { BaseScreenProps } from '../../types/navigation';
+import { useSurfaceHeader } from '../../hooks/useSurfaceHeader';
+import { Search } from '@oxy.so/bloom/search';
+import {
+    Accordion,
+    AccordionItem,
+    AccordionTrigger,
+    AccordionContent,
+} from '@oxy.so/bloom/accordion';
+import { Text } from '@oxy.so/bloom/typography';
+import { useI18n } from '../../hooks/useI18n';
+
+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) + 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> = () => {
+    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);
+
+    const faqs = useMemo(() => FAQ_KEYS.map(key => ({
+        id: key,
+        q: t(`trust.faq.items.${key}.q`) || '',
+        a: t(`trust.faq.items.${key}.a`) || '',
+    })), [t]);
+
+    const filteredFaqs = useMemo(() => {
+        if (!search.trim()) return faqs;
+        const searchLower = search.toLowerCase();
+        return faqs.filter(faq =>
+            faq.q.toLowerCase().includes(searchLower) ||
+            faq.a.toLowerCase().includes(searchLower)
+        );
+    }, [search, faqs]);
+
+    const handleAccordionChange = useCallback(
+        (value: string | string[] | undefined) => {
+            setExpanded(Array.isArray(value) ? value[0] : value);
+        },
+        [],
+    );
+
+    return (
+        <>
+            <View className="px-screen-margin pt-space-20 pb-space-12">
+                <Search
+                    label={t('trust.faq.search') || 'Search FAQ...'}
+                    value={search}
+                    onChangeText={setSearch}
+                    onClearText={() => setSearch('')}
+                    accessibilityLabel="Search Trust FAQ"
+                />
+            </View>
+
+            <View className="px-screen-margin">
+                {filteredFaqs.length === 0 ? (
+                    <Text className="text-text-secondary text-center p-space-40">
+                        {t('trust.faq.noResults', { query: search }) ||
+                            `No FAQ items found matching "${search}"`}
+                    </Text>
+                ) : (
+                    <Accordion
+                        type="single"
+                        value={expanded}
+                        onValueChange={handleAccordionChange}
+                    >
+                        {filteredFaqs.map(faq => (
+                            <AccordionItem key={faq.id} value={faq.id}>
+                                <AccordionTrigger>
+                                    {faq.q}
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                    <Text className="font-sans text-body text-text-secondary">
+                                        {faq.a}
+                                    </Text>
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                )}
+            </View>
+        </>
+    );
+};
+
+export default React.memo(TrustFAQScreen);