@oxyhq/services 22.13.0 → 23.0.0

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

@@ -1,40 +1,33 @@
 /**
- * The ACTIVE REQUEST surface (`qr` view) — the route Oxy chose, plus honest
- * progress (issue #691, Phase 5).
+ * The ACTIVE REQUEST surface (`qr` view) as the account dialog drives it —
+ * `AccountDialogController`'s device flow bound to the shared, presentational
+ * {@link OxySignInRequestSurface} (issue #691, Phase 5).
  *
- * The user already performed their one action. From here the surface only
- * REPORTS: the route-appropriate primary visual (`RequestPrimarySurface`), the
- * status line derived from the controller's real signals
- * (`signInProgressLabel`), and nothing else at the same weight. Alternatives
- * stay behind "Having trouble?" until `signIn.routeFailed` says the chosen route
- * could not be carried out — the controller never silently cascades, so
- * revealing them is this view's decision and this view's alone.
+ * This module owns WIRING only. Every pixel comes from the shared surface, which
+ * the auth.oxy.so IdP mounts from its own OAuth-bound request; there is one
+ * implementation of the request presentation, not two. What lives here is what
+ * only the account dialog knows:
  *
- * Two surfaces take over when there is no working primary route to report on:
- *  - a FAILED request, whose reason is toasted by the container (never inline),
- *    leaves "Try again" as the primary action with the alternatives revealed;
- *  - a native device with NO Commons installed, where a same-device QR would be
- *    a dead end. There, "Get Commons" is the genuine primary route — not a
- *    fallback — so it renders as the one primary action and the QR handoff moves
- *    behind the disclosure ("I have Commons on another device").
+ *  - which of the controller's facts map onto the surface's props;
+ *  - which alternatives are genuine ones for the CURRENT presentation (the
+ *    passkey ceremony is pointless once the request is already being confirmed,
+ *    and a QR link is redundant while the QR itself is the primary visual);
+ *  - the one piece of local intent the controller has no opinion on: leaving the
+ *    acquisition surface via "I have Commons on another device".
+ *
+ * Failures are NOT rendered here. The container toasts them at the point they
+ * arrive (owner mandate: no error renders inline inside the dialog); this view
+ * only reports that the request failed, so the surface can offer "Try again".
  */
 
 import type React from 'react';
 import { useState } from 'react';
-import { View } from 'react-native';
-import { Button } from '@oxyhq/bloom/button';
-import { Text } from '@oxyhq/bloom/typography';
 import type { AccountDialogSnapshot } from '@oxyhq/core';
-import TroubleDisclosure, { type TroubleAction } from './TroubleDisclosure';
-import { SubtleLink } from './primitives';
-import { GetCommonsPrompt, RequestPrimarySurface } from './requestSurfaces';
-import { signInProgressLabel } from './signInProgress';
-import { authChooserStyles as styles } from './styles';
-import type { SignInAlternatives, Theme, Translate } from './types';
+import OxySignInRequestSurface from '../OxySignInRequestSurface';
+import type { OxySignInSurfaceAction, SignInAlternatives, Translate } from './types';
 
 interface SignInRequestViewProps {
   snapshot: AccountDialogSnapshot;
-  theme: Theme;
   t: Translate;
   /** Restart the request after a failure. */
   onRetry: () => void;
@@ -43,7 +36,6 @@ interface SignInRequestViewProps {
 
 const SignInRequestView: React.FC<SignInRequestViewProps> = ({
   snapshot,
-  theme,
   t,
   onRetry,
   alternatives,
@@ -53,10 +45,15 @@ const SignInRequestView: React.FC<SignInRequestViewProps> = ({
   // an explicit user choice to leave the acquisition surface, never inferred.
   const [qrRequested, setQrRequested] = useState(false);
 
+  const failed = signIn.phase === 'error';
+  // A same-device QR is a dead end without Commons, so the acquisition surface
+  // leads — until the user explicitly asks for the QR anyway.
+  const acquiring = !failed && commonsAvailability === 'unavailable' && !qrRequested;
+
   // A ceremony is pointless once the request is already being confirmed, and a
   // ceremony FAILURE is toasted by the container — this link never renders an
   // error of its own (owner mandate).
-  const passkeyAction: TroubleAction[] =
+  const passkeyAction: OxySignInSurfaceAction[] =
     alternatives.passkeyAvailable && signIn.phase !== 'authorized' && signIn.phase !== 'completed'
       ? [
           {
@@ -70,93 +67,63 @@ const SignInRequestView: React.FC<SignInRequestViewProps> = ({
         ]
       : [];
 
-  const signUpLink = (
-    // Account CREATION is not an authentication method, and on web this surface
-    // is the FIRST one a signed-out user sees (the entry auto-starts straight
-    // through it) — so the way in for someone with no Oxy ID stays visible as a
-    // subordinate link rather than hiding behind a troubleshooting affordance.
-    <SubtleLink
-      label={t('signin.createAccountLink')}
-      theme={theme}
-      onPress={alternatives.onCreateAccount}
-      testID="create-account-link"
-    />
-  );
-
-  if (signIn.phase === 'error') {
-    return (
-      <View style={styles.centeredBlock}>
-        <Button variant="primary" onPress={onRetry} style={styles.primaryButton}>
-          {t('common.actions.tryAgain')}
-        </Button>
-        {signUpLink}
-        <TroubleDisclosure actions={passkeyAction} revealed theme={theme} t={t} />
-      </View>
-    );
-  }
-
-  if (commonsAvailability === 'unavailable' && !qrRequested) {
-    return (
-      <View style={styles.centeredBlock}>
-        <GetCommonsPrompt theme={theme} t={t} onGetCommons={alternatives.onGetCommons} />
-        {signUpLink}
-        <TroubleDisclosure
-          actions={[
+  const troubleActions = ((): OxySignInSurfaceAction[] => {
+    // Nothing about the chosen route is actionable any more — only the
+    // authentication alternatives are.
+    if (failed) return passkeyAction;
+    if (acquiring) {
+      return [
+        {
+          key: 'show-qr-anyway-link',
+          label: t('accountSwitcher.showQrAnyway'),
+          onPress: () => setQrRequested(true),
+        },
+        ...passkeyAction,
+      ];
+    }
+    return [
+      // Redundant while the QR already IS the primary surface.
+      ...(signIn.route === 'qr'
+        ? []
+        : [
             {
-              key: 'show-qr-anyway-link',
-              label: t('accountSwitcher.showQrAnyway'),
-              onPress: () => setQrRequested(true),
+              key: 'scan-qr-link',
+              label: t('accountSwitcher.scanQr'),
+              onPress: alternatives.onShowQr,
             },
-            ...passkeyAction,
-          ]}
-          revealed={false}
-          theme={theme}
-          t={t}
-        />
-      </View>
-    );
-  }
-
-  const status = signInProgressLabel(signIn.progress, signIn.route, t);
-  const troubleActions: TroubleAction[] = [
-    // Redundant while the QR already IS the primary surface.
-    ...(signIn.route === 'qr'
-      ? []
-      : [
-          {
-            key: 'scan-qr-link',
-            label: t('accountSwitcher.scanQr'),
-            onPress: alternatives.onShowQr,
-          },
-        ]),
-    ...passkeyAction,
-    {
-      key: 'get-commons-link',
-      label: t('accountSwitcher.getCommons'),
-      onPress: alternatives.onGetCommons,
-    },
-  ];
+          ]),
+      ...passkeyAction,
+      {
+        key: 'get-commons-link',
+        label: t('accountSwitcher.getCommons'),
+        onPress: alternatives.onGetCommons,
+      },
+    ];
+  })();
 
   return (
-    <View style={styles.centeredBlock}>
-      <RequestPrimarySurface signIn={signIn} theme={theme} t={t} />
-      {status ? (
-        <Text
-          style={[styles.mutedText, { color: theme.colors.textSecondary }]}
-          accessibilityLiveRegion="polite"
-          testID="signin-progress"
-        >
-          {status}
-        </Text>
-      ) : null}
-      {signUpLink}
-      <TroubleDisclosure
-        actions={troubleActions}
-        revealed={signIn.routeFailed}
-        theme={theme}
-        t={t}
-      />
-    </View>
+    <OxySignInRequestSurface
+      route={signIn.route}
+      progress={signIn.progress}
+      qrPayload={signIn.qrPayload}
+      routeFailed={signIn.routeFailed}
+      failed={failed}
+      onRetry={onRetry}
+      onAcquireCommons={acquiring ? alternatives.onGetCommons : undefined}
+      subordinate={[
+        // Account CREATION is not an authentication method, and on web this
+        // surface is the FIRST one a signed-out user sees (the entry auto-starts
+        // straight through it) — so the way in for someone with no Oxy ID stays
+        // visible as a subordinate link rather than hiding behind a
+        // troubleshooting affordance.
+        {
+          key: 'create-account-link',
+          label: t('signin.createAccountLink'),
+          onPress: alternatives.onCreateAccount,
+        },
+      ]}
+      alternatives={troubleActions}
+    />
   );
 };
 

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

@@ -23,19 +23,11 @@ import { View } from 'react-native';
 import { Collapsible } from '@oxyhq/bloom/collapsible';
 import { SubtleLink } from './primitives';
 import { authChooserStyles as styles } from './styles';
-import type { Theme, Translate } from './types';
-
-/** One alternative route out of the current surface. Always a subordinate link. */
-export interface TroubleAction {
-  /** Stable identity for the list, and the action's `testID`. */
-  key: string;
-  label: string;
-  onPress: () => void;
-  disabled?: boolean;
-}
+import type { OxySignInSurfaceAction, Theme, Translate } from './types';
 
 interface TroubleDisclosureProps {
-  actions: TroubleAction[];
+  /** The alternative routes out of the current surface. Always subordinate links. */
+  actions: readonly OxySignInSurfaceAction[];
   /**
    * `true` when the primary route could not be carried out (`signIn.routeFailed`)
    * or the surface has no working primary at all (a failed request). The

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

@@ -7,7 +7,7 @@
 import type React from 'react';
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Text } from '@oxyhq/bloom/typography';
 import { BloomColorScope } from '@oxyhq/bloom/theme';

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

@@ -14,12 +14,12 @@
 
 import type React from 'react';
 import { View } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+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 { SignInFlowState } from '@oxyhq/core';
+import type { CommonsDeliveryRoute, SignInProgress } from '@oxyhq/core';
 import { authChooserStyles as styles } from './styles';
 import type { Theme, Translate } from './types';
 
@@ -88,26 +88,30 @@ export const GetCommonsPrompt: React.FC<{
  *
  * 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 controller facts — there is no local timeline.
+ * 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<{
-  signIn: SignInFlowState;
+  route: CommonsDeliveryRoute | null;
+  progress: SignInProgress;
+  qrPayload: string | null;
   theme: Theme;
   t: Translate;
-}> = ({ signIn, theme, t }) => {
-  if (signIn.progress === 'identity-confirmed') {
+}> = ({ route, progress, qrPayload, theme, t }) => {
+  if (progress === 'identity-confirmed') {
     return <RouteGlyph name="check-circle" color={theme.colors.success} />;
   }
-  if (signIn.progress === 'confirming-identity') {
+  if (progress === 'confirming-identity') {
     return <PreparingSurface />;
   }
-  if (signIn.route === 'qr' && signIn.qrPayload) {
-    return <QrPlate payload={signIn.qrPayload} theme={theme} t={t} />;
+  if (route === 'qr' && qrPayload) {
+    return <QrPlate payload={qrPayload} theme={theme} t={t} />;
   }
-  if (signIn.route === 'await-push') {
+  if (route === 'await-push') {
     return <RouteGlyph name="cellphone-message" color={theme.colors.primary} />;
   }
-  if (signIn.route === 'open-commons') {
+  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

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

@@ -13,6 +13,25 @@ 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;

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,41 +1,41 @@
-import type React from 'react';
-import type { Animated } from 'react-native';
-import type { Ionicons } from '@expo/vector-icons';
-import type { ThemeColors } from '@oxyhq/bloom/theme';
+import type Ionicons from "@expo/vector-icons/Ionicons";
+import type { ThemeColors } from "@oxyhq/bloom/theme";
+import type React from "react";
+import type { Animated } from "react-native";
 
 export type PaymentItem = {
-    type: 'product' | 'subscription' | 'service' | 'fee' | string;
-    name: string;
-    description?: string;
-    quantity?: number;
-    period?: string;
-    price: number;
-    currency?: string;
+	type: "product" | "subscription" | "service" | "fee" | string;
+	name: string;
+	description?: string;
+	quantity?: number;
+	period?: string;
+	price: number;
+	currency?: string;
 };
 
 export interface PaymentGatewayResult {
-    success: boolean;
-    details?: Record<string, string | number | boolean | null>;
-    error?: string;
+	success: boolean;
+	details?: Record<string, string | number | boolean | null>;
+	error?: string;
 }
 
 export interface CardDetails {
-    number: string;
-    expiry: string;
-    cvv: string;
+	number: string;
+	expiry: string;
+	cvv: string;
 }
 
 export interface PaymentMethod {
-    key: string;
-    label: string;
-    icon: React.ComponentProps<typeof Ionicons>['name'];
-    description: string;
+	key: string;
+	label: string;
+	icon: React.ComponentProps<typeof Ionicons>["name"];
+	description: string;
 }
 
 export interface PaymentStepAnimations {
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    scaleAnim: Animated.Value;
+	fadeAnim: Animated.Value;
+	slideAnim: Animated.Value;
+	scaleAnim: Animated.Value;
 }
 
 /**

package/src/ui/components/styles/shadow.tsx

@@ -48,8 +48,8 @@ function v2Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowSty
       return {};
     }
 
-    let height;
-    let radius;
+    let height: number;
+    let radius: number;
     switch (elevation) {
       case 1:
         height = 0.5;