@oxyhq/services 22.12.4 → 22.12.7

package/src/ui/components/authChooser/requestSurfaces.tsx

@@ -0,0 +1,120 @@
+/**
+ * The PRIMARY visual of an active "Sign in with Oxy" request — one surface per
+ * route, chosen by {@link RequestPrimarySurface} from the controller's own facts.
+ *
+ * Each is a leading visual and nothing else: the status sentence underneath is
+ * owned by `signInProgressLabel`, and the alternatives by `TroubleDisclosure`.
+ * That separation is what keeps exactly one primary action on screen (issue
+ * #691) — a surface here can never grow a competing button.
+ *
+ * Anti-phishing: the QR plate encodes `signIn.qrPayload` and renders NOTHING
+ * derived from it. Application identity, origin, and scopes are resolved
+ * server-side by the approver (Commons), never read out of the payload here.
+ */
+
+import type React from 'react';
+import { View } from 'react-native';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxyhq/bloom/button';
+import { Loading } from '@oxyhq/bloom/loading';
+import { Text } from '@oxyhq/bloom/typography';
+import type { CommonsDeliveryRoute, SignInProgress } from '@oxyhq/core';
+import { authChooserStyles as styles } from './styles';
+import type { Theme, Translate } from './types';
+
+/** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 196;
+/** The leading route glyph, sized to sit where the QR plate otherwise would. */
+const ROUTE_GLYPH_SIZE = 44;
+
+/** The indeterminate leading visual: the request exists but has nothing to show yet. */
+export const PreparingSurface: React.FC = () => <Loading variant="spinner" size="large" />;
+
+/** The leading glyph for a route whose surface is elsewhere (the phone, Commons). */
+export const RouteGlyph: React.FC<{
+  name: keyof typeof MaterialCommunityIcons.glyphMap;
+  color: string;
+}> = ({ name, color }) => (
+  <MaterialCommunityIcons name={name} size={ROUTE_GLYPH_SIZE} color={color} />
+);
+
+/** The cross-device handoff: a headline over the fixed-contrast QR plate. */
+export const QrPlate: React.FC<{ payload: string; theme: Theme; t: Translate }> = ({
+  payload,
+  theme,
+  t,
+}) => (
+  <>
+    <Text style={[styles.qrHeadline, { color: theme.colors.text }]}>
+      {t('accountSwitcher.qrHeadline')}
+    </Text>
+    <View style={styles.qrPlate}>
+      <QRCode value={payload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+    </View>
+  </>
+);
+
+/**
+ * The acquisition surface. For someone with no Commons at all this is the
+ * GENUINE primary route, not a fallback — a same-device QR they would have to
+ * scan with the very screen showing it is a dead end — so it renders as the
+ * surface's one primary action.
+ */
+export const GetCommonsPrompt: React.FC<{
+  theme: Theme;
+  t: Translate;
+  onGetCommons: () => void;
+}> = ({ theme, t, onGetCommons }) => (
+  <>
+    <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
+      {t('accountSwitcher.commonsNotInstalled')}
+    </Text>
+    <Button
+      variant="primary"
+      onPress={onGetCommons}
+      style={styles.primaryButton}
+      testID="get-commons-button"
+    >
+      {t('accountSwitcher.getCommons')}
+    </Button>
+  </>
+);
+
+/**
+ * The one primary visual for the request's current state.
+ *
+ * Ordered most-terminal-first, so a late-arriving route can never pull the
+ * surface back from "confirming" to a QR the user has already scanned. Every
+ * branch reads only the facts it is handed — there is no local timeline, and no
+ * dependency on WHICH kind of request produced them (the account dialog's device
+ * flow and the IdP's OAuth-bound lane both resolve the same three).
+ */
+export const RequestPrimarySurface: React.FC<{
+  route: CommonsDeliveryRoute | null;
+  progress: SignInProgress;
+  qrPayload: string | null;
+  theme: Theme;
+  t: Translate;
+}> = ({ route, progress, qrPayload, theme, t }) => {
+  if (progress === 'identity-confirmed') {
+    return <RouteGlyph name="check-circle" color={theme.colors.success} />;
+  }
+  if (progress === 'confirming-identity') {
+    return <PreparingSurface />;
+  }
+  if (route === 'qr' && qrPayload) {
+    return <QrPlate payload={qrPayload} theme={theme} t={t} />;
+  }
+  if (route === 'await-push') {
+    return <RouteGlyph name="cellphone-message" color={theme.colors.primary} />;
+  }
+  if (route === 'open-commons') {
+    return <RouteGlyph name="open-in-app" color={theme.colors.primary} />;
+  }
+  // No route resolved yet (or a route with no payload to render): the request is
+  // being prepared. Honest, and the only state that is not route-specific.
+  return <PreparingSurface />;
+};

package/src/ui/components/authChooser/signInProgress.ts

@@ -0,0 +1,54 @@
+/**
+ * The sign-in status line's copy (issue #691, Phase 5).
+ *
+ * One responsibility: map the controller's DERIVED `signIn.progress` — plus the
+ * chosen route, which only disambiguates the generic waiting step — onto a
+ * sentence. Pure and total, with no clock and no state of its own: the line can
+ * therefore only advance when the controller observed a real signal, never on a
+ * timer and never optimistically.
+ *
+ * The ladder the user sees:
+ *
+ *     Preparing request
+ *     Check Commons on your phone
+ *     Opened in Commons
+ *     Confirming identity
+ *     Identity confirmed
+ */
+
+import type { CommonsDeliveryRoute, SignInProgress } from '@oxyhq/core';
+import type { Translate } from './types';
+
+/**
+ * The status sentence for the active request, or `null` when there is nothing
+ * honest to say (no live request, or a terminal error — which is toasted, never
+ * rendered inline).
+ */
+export function signInProgressLabel(
+  progress: SignInProgress,
+  route: CommonsDeliveryRoute | null,
+  t: Translate,
+): string | null {
+  switch (progress) {
+    case 'idle':
+      return null;
+    case 'preparing':
+      return t('accountSwitcher.progress.preparing');
+    case 'awaiting-approval':
+      // The only step whose copy depends on the route: waiting means something
+      // different when the user is holding a QR than when Commons was opened
+      // for them. `await-push` never reaches here — a chosen push route is
+      // itself a confirmed dispatch, so it derives to `delivered-to-commons`.
+      if (route === 'qr') return t('accountSwitcher.progress.scanWithCommons');
+      if (route === 'open-commons') return t('accountSwitcher.progress.continueInCommons');
+      return t('accountSwitcher.progress.awaitingApproval');
+    case 'delivered-to-commons':
+      return t('accountSwitcher.progress.checkCommons');
+    case 'opened-in-commons':
+      return t('accountSwitcher.progress.openedInCommons');
+    case 'confirming-identity':
+      return t('accountSwitcher.progress.confirming');
+    case 'identity-confirmed':
+      return t('accountSwitcher.progress.confirmed');
+  }
+}

package/src/ui/components/{oxyAuthChooserStyles.ts → authChooser/styles.ts}

@@ -7,6 +7,10 @@ const QR_PLATE_BG = '#FFFFFF';
  * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialogScreen`
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
+ *
+ * Only what NativeWind cannot express lives here: the animated collapse, the
+ * fixed-contrast QR plate, per-account accent rings, and the small subordinate
+ * text-link rhythm every view's fallback affordances share.
  */
 export const authChooserStyles = StyleSheet.create({
   rows: {
@@ -192,4 +196,18 @@ export const authChooserStyles = StyleSheet.create({
     borderRadius: 16,
     backgroundColor: QR_PLATE_BG,
   },
+  /**
+   * The revealed "Having trouble?" alternatives — a tight stack of subordinate
+   * text links. They share `footerLink`'s rhythm, so the stack itself only has
+   * to stop them drifting apart.
+   */
+  troubleActions: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  /** The disclosure trigger, aligned with the subordinate links it reveals. */
+  troubleTrigger: {
+    alignSelf: 'center',
+    marginTop: 12,
+  },
 });

package/src/ui/components/authChooser/types.ts

@@ -0,0 +1,120 @@
+/**
+ * Shared types + per-account color resolution for the auth chooser's views.
+ *
+ * One responsibility: the vocabulary every view module in this folder speaks
+ * (theme/translate aliases, the container-supplied action bundles, and the
+ * account accent). No JSX, no state, no I/O — so a view can import it without
+ * dragging any other view in.
+ */
+
+import { APP_COLOR_NAMES, APP_COLOR_PRESETS, type AppColorName, type useTheme } from '@oxyhq/bloom/theme';
+import type { useI18n } from '../../hooks/useI18n';
+
+export type Theme = ReturnType<typeof useTheme>;
+export type Translate = ReturnType<typeof useI18n>['t'];
+
+/**
+ * One SUBORDINATE action on a sign-in surface — an alternative revealed behind
+ * "Having trouble?", or a non-competing link under the primary.
+ *
+ * Never a primary button: a sign-in surface presents exactly ONE of those (issue
+ * #691), and keeping every other affordance on this single shape is what stops
+ * one of them quietly growing into a co-equal button again.
+ *
+ * Part of the public SDK surface — `OxySignInRequestSurface` takes these.
+ */
+export interface OxySignInSurfaceAction {
+  /** Stable identity for the list, and the action's `testID`. */
+  key: string;
+  /** Already-localized label. The host resolves its own copy. */
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+/** The account-row actions the container wires for the switcher + menu views. */
+export interface OxyAuthChooserHandlers {
+  onSwitch: (accountId: string) => void;
+  onAdd: () => void;
+  onManage: () => void;
+  /**
+   * Change the current account's photo — opens the avatar-change flow. Because
+   * the account menu lives in the AccountDialog surface, this MORPHS that surface
+   * into `ChangeAvatar` (via `openAvatarPicker` → `openWithinOrPresent`), the same
+   * flow ManageAccount's avatar uses; it never stacks a new dialog.
+   */
+  onEditAvatar: () => void;
+}
+
+/** Used/total storage bytes for the "Oxy storage" block, or `null` when unknown. */
+export interface AccountStorageModel {
+  usedBytes: number;
+  limitBytes: number;
+}
+
+/** The account-menu row actions the container wires (deep-links / sheets / sign-out). */
+export interface AccountsMenuActions {
+  onOpenSettings: () => void;
+  onOpenData: () => void;
+  onManageStorage: () => void;
+  onUpgradeStorage: () => void;
+  onHelp: () => void;
+  onPrivacy: () => void;
+  onTerms: () => void;
+  onSignOut: () => void;
+}
+
+/**
+ * Where a WebAuthn ceremony can run from the current origin.
+ *
+ * A credential minted for `oxy.so` can only be ASSERTED there (or a loopback
+ * dev host) — a hard, browser-enforced RP-ID boundary, not feature detection.
+ * `'direct'` = a first-party Oxy web origin, the ceremony runs here.
+ * `'hub'`    = any other web origin; it runs in the auth.oxy.so popup instead.
+ * `'none'`   = native, where Commons owns identity.
+ */
+export type PasskeyMode = 'direct' | 'hub' | 'none';
+
+/**
+ * Everything that is NOT the sign-in surface's one primary action.
+ *
+ * The container wires these once; each view decides which of them are genuine
+ * alternatives to ITS primary surface and hands those to `TroubleDisclosure`
+ * (issue #691: fallbacks stay hidden until the user asks or the primary route
+ * fails). A view never renders one of these as a button.
+ */
+export interface SignInAlternatives {
+  /** Whether a WebAuthn ceremony is reachable from this origin at all. */
+  passkeyAvailable: boolean;
+  /**
+   * `true` while a DIRECT ceremony is in flight. The hub-popup variant reports
+   * its progress through `snapshot.signIn` instead, so it never sets this.
+   */
+  passkeyPending: boolean;
+  onSignInWithPasskey: () => void;
+  /** Fall back to the cross-device QR handoff (restarts the request). */
+  onShowQr: () => void;
+  /** Open the Commons store listing / landing page for this platform. */
+  onGetCommons: () => void;
+  /** Enter the account-creation view. */
+  onCreateAccount: () => void;
+}
+
+/**
+ * Resolve an account's stored color (a named Bloom preset, e.g. `'purple'`) to
+ * a concrete brand hex for the row accent. Falls back to the theme primary when
+ * the account has no color or the value is not a recognized preset, so the accent
+ * renders in EVERY consumer regardless of NativeWind availability.
+ */
+export function resolveAccentHex(color: string | null, fallback: string): string {
+  const preset = toPreset(color);
+  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
+}
+
+/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
+export function toPreset(color: string | null): AppColorName | undefined {
+  if (!color) return undefined;
+  return (APP_COLOR_NAMES as readonly string[]).includes(color)
+    ? (color as AppColorName)
+    : undefined;
+}

package/src/ui/components/authChooser/useUsernameAvailability.ts

@@ -0,0 +1,60 @@
+/**
+ * Debounced username-availability check over the existing SDK method.
+ *
+ * One responsibility: turn keystrokes into an `idle | checking | available |
+ * taken` verdict without racing. A sequence guard drops superseded responses,
+ * and a NETWORK failure resets the (now stale) verdict and toasts — it never
+ * paints an inline error inside the dialog (owner mandate).
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { toast } from '@oxyhq/bloom';
+import type { OxyServices } from '@oxyhq/core';
+import type { Translate } from './types';
+
+export type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken';
+
+/** Keystrokes settle for this long before a check is issued. */
+const DEBOUNCE_MS = 400;
+/** Shorter than this and there is nothing worth asking the server about. */
+const MIN_USERNAME_LENGTH = 3;
+
+export function useUsernameAvailability(
+  oxyServices: OxyServices,
+  t: Translate,
+): {
+  status: UsernameStatus;
+  check: (value: string) => void;
+} {
+  const [status, setStatus] = useState<UsernameStatus>('idle');
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const requestSeqRef = useRef(0);
+
+  const check = useCallback(
+    (value: string) => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      const seq = ++requestSeqRef.current;
+      if (!value || value.length < MIN_USERNAME_LENGTH) {
+        setStatus('idle');
+        return;
+      }
+      setStatus('checking');
+      timerRef.current = setTimeout(() => {
+        void oxyServices
+          .checkUsernameAvailability(value)
+          .then((result) => {
+            if (seq !== requestSeqRef.current) return; // superseded by a newer check
+            setStatus(result.available ? 'available' : 'taken');
+          })
+          .catch(() => {
+            if (seq !== requestSeqRef.current) return;
+            setStatus('idle');
+            toast.error(t('accounts.create.username.checkFailed'));
+          });
+      }, DEBOUNCE_MS);
+    },
+    [oxyServices, t],
+  );
+
+  return { status, check };
+}

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useEffect, useRef } from 'react';
 import { TouchableOpacity, Animated, Easing } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 
 interface AnimatedButtonProps {
   isSelected: boolean;

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { View, Text } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image, StyleSheet } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Button } from '@oxyhq/bloom/button';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated, ActivityIndicator } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import type { PaymentColors, PaymentStepAnimations } from './types';

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
 import { View, Text, Animated } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Button } from '@oxyhq/bloom/button';
 import { createPaymentStyles } from './paymentStyles';

package/src/ui/components/payment/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { Animated } from 'react-native';
-import type { Ionicons } from '@expo/vector-icons';
+import type Ionicons from '@expo/vector-icons/Ionicons';
 import type { ThemeColors } from '@oxyhq/bloom/theme';
 
 export type PaymentItem = {