@oxy.so/services 8.3.0 → 9.0.0

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

@@ -98,9 +98,12 @@ export const authChooserStyles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // Longhands: Bloom's web `Button` (`SubtleLink`) is a raw DOM <button>,
+  // where `paddingVertical` is no CSS property and is silently dropped.
   footerLink: {
     alignSelf: 'center',
-    paddingVertical: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
     marginTop: 12,
   },
   linkText: {

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
+import { View, Animated, TouchableOpacity, Linking } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
@@ -8,6 +8,7 @@ import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';
 import { createPaymentStyles } from './paymentStyles';
 import { toast } from '@oxy.so/bloom/toast';
+import { copyText } from '../../utils/clipboard';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
 import { useI18n } from '../../hooks/useI18n';
 
@@ -43,8 +44,9 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
     const { fadeAnim, slideAnim, scaleAnim } = animations;
 
     const handleCopyAddress = () => {
-        Clipboard.setString(faircoinAddress);
-        toast(t('payment.details.addressCopied'));
+        copyText(faircoinAddress)
+            .then(() => toast(t('payment.details.addressCopied')))
+            .catch(() => toast.error(t('appInfo.toasts.copyFailed')));
     };
 
     const handleOpenFairWallet = () => {

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -15,11 +15,12 @@
 
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
 import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
 import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import type { AccountDialogController } from '@oxy.so/core/session';
@@ -32,6 +33,8 @@ const QR_FOREGROUND = '#000000';
 const QR_SIZE = 112;
 const PLATE_PADDING = 8;
 const PLATE_SIZE = QR_SIZE + PLATE_PADDING * 2;
+/** The spinner while a code is on its way: React Native's `large` indicator size. */
+const SPINNER_SIZE = 36;
 
 export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | null }> = ({ controller }) => {
   const theme = useTheme();
@@ -70,7 +73,7 @@ export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | n
   } else if (live && signIn.qrPayload && signIn.progress !== 'confirming-identity') {
     plate = <QRCode value={signIn.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />;
   } else if (live || expired || (signIn.inline && signIn.phase === 'completed')) {
-    plate = <ActivityIndicator size="large" color={QR_FOREGROUND} />;
+    plate = <SpinnerIcon size={SPINNER_SIZE} color={QR_FOREGROUND} />;
   } else {
     // Failed for a reason renewing will not fix by itself, or superseded and
     // then withdrawn: one press for a new code.

package/src/ui/components/signIn/OxyAccountPicker.tsx

@@ -23,8 +23,8 @@ import { Pressable, View } from 'react-native-css/components';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
 import { RiCheckLine } from '@oxy.so/bloom/icons/RiCheckLine';
-import { RiLoader4Line } from '@oxy.so/bloom/icons/RiLoader4Line';
 import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core/session';
@@ -134,24 +134,25 @@ export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
                     ) : null}
                   </View>
                   <View className="flex-row items-center gap-[8px] shrink-0">
-                    <View style={{ width: AVATAR_SIZE, height: AVATAR_SIZE }}>
-                      <Avatar
-                        source={context.avatarUrl ?? undefined}
-                        variant="thumb"
-                        name={context.displayName}
-                        size={AVATAR_SIZE}
-                      />
-                      {current ? (
+                    {/* The current account: Avatar's own verified slot (bottom-right,
+                        above the image), holding the accent check badge. */}
+                    <Avatar
+                      source={context.avatarUrl ?? undefined}
+                      variant="thumb"
+                      name={context.displayName}
+                      size={AVATAR_SIZE}
+                      verified={current}
+                      verifiedIcon={
                         <View
-                          className="absolute -bottom-[2px] -right-[2px] items-center justify-center rounded-full border-2 border-background"
+                          className="items-center justify-center rounded-full border-2 border-background"
                           style={{ width: 18, height: 18, backgroundColor: accent }}
                         >
                           <RiCheckLine size="xs" fill="#ffffff" />
                         </View>
-                      ) : null}
-                    </View>
+                      }
+                    />
                     {activating ? (
-                      <RiLoader4Line size="sm" fill={accent} />
+                      <SpinnerIcon size={20} color={accent} />
                     ) : (
                       <RiArrowRightSLine size="sm" fill={theme.colors.textSecondary} />
                     )}

package/src/ui/components/signIn/OxyAuthScreen.tsx

@@ -17,8 +17,9 @@
  */
 
 import type React from 'react';
-import { ActivityIndicator, Linking, Text as RNText } from 'react-native';
+import { Linking, Text as RNText } from 'react-native';
 import { View } from 'react-native-css/components';
+import { Loading } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { useI18n } from '../../hooks/useI18n';
@@ -97,16 +98,12 @@ export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.Re
   );
 };
 
-/**
- * The screen while there is nothing to show yet. React Native's own indicator:
- * `@oxy.so/bloom/loading` can tree-shake to `undefined` in a rolldown-vite
- * production bundle when co-imported with `@oxy.so/bloom/button`.
- */
+/** The screen while there is nothing to show yet: Bloom's spinner, named for assistive technology. */
 export const OxyAuthLoading: React.FC = () => {
-  const theme = useTheme();
+  const { t } = useI18n();
   return (
     <View className="min-h-[300px] items-center justify-center">
-      <ActivityIndicator size="large" color={theme.colors.primary} />
+      <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
     </View>
   );
 };

package/src/ui/components/signIn/OxyAuthenticatorPanel.tsx

@@ -13,9 +13,9 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { Clipboard, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
-import { Button } from '@oxy.so/bloom/button';
+import { CodeBlock } from '@oxy.so/bloom/code';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
@@ -25,6 +25,7 @@ import { useOxy } from '../../context/OxyContext';
 import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { queryKeys } from '../../hooks/queries/queryKeys';
 import { useI18n } from '../../hooks/useI18n';
+import { copyText } from '../../utils/clipboard';
 import { SubtleLink } from '../authChooser/primitives';
 import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
@@ -33,6 +34,7 @@ import {
   AccountFlowCodeField,
   AccountFlowErrorLine,
   AccountFlowNote,
+  AccountFlowProgress,
   describeSignInError,
 } from './accountFlowParts';
 
@@ -46,7 +48,8 @@ type Step =
   | { name: 'enroll'; enrollment: TotpEnrollResponse }
   | { name: 'regenerate' }
   | { name: 'disable' }
-  | { name: 'codes'; codes: string[] };
+  /** `enrolling`: the last step of turning it on, rather than new codes for one that is on. */
+  | { name: 'codes'; codes: string[]; enrolling: boolean };
 
 export interface OxyAuthenticatorPanelProps {
   /** The person is done here (after saving backup codes, or turning it off). */
@@ -92,34 +95,36 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
   };
 
   const back = { label: t('common.cancel'), onPress: () => setStep({ name: 'status' }) };
+  // Turning it on is two steps: scan and confirm, then save the backup codes.
+  const enrolSteps = [t('signInSecurity.totp.title'), t('signInSecurity.totp.backupTitle')];
+
+  const copyCodes = async (codes: string) => {
+    try {
+      await copyText(codes);
+    } catch (reason) {
+      toast.error(t('appInfo.toasts.copyFailed'));
+      // Rethrown so the copy button keeps its copy glyph: nothing was copied.
+      throw reason;
+    }
+    toast.success(t('signInSecurity.totp.copied'));
+  };
 
   switch (step.name) {
     case 'codes':
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signInSecurity.totp.backupTitle')} description={t('signInSecurity.totp.backupDescription')} />
-          <View style={[styles.codes, { borderColor: theme.colors.border }]} testID="totp-backup-codes">
-            {step.codes.map((backupCode) => (
-              <Text key={backupCode} style={[styles.code, { color: theme.colors.text }]}>
-                {backupCode}
-              </Text>
-            ))}
-          </View>
-          <Button
-            appearance="outline"
-            tone="neutral"
-            size="lg"
-            fullWidth
-            onPress={() => {
-              Promise.resolve()
-                .then(() => Clipboard.setString(step.codes.join('\n')))
-                .then(() => toast.success(t('signInSecurity.totp.copied')))
-                .catch(() => undefined);
-            }}
-            testID="totp-copy-codes"
-          >
-            {t('signInSecurity.totp.copy')}
-          </Button>
+          {step.enrolling ? <AccountFlowProgress steps={enrolSteps} current={1} testID="totp-progress" /> : null}
+          {/* One code per line, with the block's own copy button (it shows a
+              check once the codes are on the clipboard). */}
+          <CodeBlock
+            code={step.codes.join('\n')}
+            filename={t('signInSecurity.totp.remaining', { count: step.codes.length })}
+            lineNumbers={false}
+            labels={{ copy: t('signInSecurity.totp.copy'), copied: t('signInSecurity.totp.copied') }}
+            onCopy={copyCodes}
+            testID="totp-backup-codes"
+          />
           <AccountFlowAction
             label={t('signInSecurity.totp.savedThem')}
             onPress={() => {
@@ -146,10 +151,11 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
             const codes = await oxyServices.auth.totp.confirm(code.trim(), reauth);
             refresh();
             toast.success(t('signInSecurity.totp.enabled'));
-            setStep({ name: 'codes', codes });
+            setStep({ name: 'codes', codes, enrolling: true });
           }}
           secondary={back}
         >
+          <AccountFlowProgress steps={enrolSteps} current={0} testID="totp-progress" />
           <View style={styles.plateRow}>
             <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="totp-qr">
               <QRCode value={enrollment.otpauthUri} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
@@ -184,7 +190,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           onSubmit={async (reauth) => {
             const codes = await oxyServices.auth.totp.regenerateBackupCodes(reauth);
             refresh();
-            setStep({ name: 'codes', codes });
+            setStep({ name: 'codes', codes, enrolling: false });
           }}
           secondary={back}
         />
@@ -229,7 +235,6 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
               />
               <SubtleLink
                 label={t('signInSecurity.totp.disable')}
-                theme={theme}
                 onPress={() => setStep({ name: 'disable' })}
                 testID="totp-disable"
               />
@@ -270,21 +275,4 @@ const styles = StyleSheet.create({
     letterSpacing: 1,
     textAlign: 'center',
   },
-  codes: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-    padding: 16,
-    borderRadius: 16,
-    borderWidth: StyleSheet.hairlineWidth,
-    justifyContent: 'center',
-  },
-  code: {
-    width: '45%',
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '600',
-    letterSpacing: 1,
-    textAlign: 'center',
-  },
 });

package/src/ui/components/signIn/OxyDeleteAccountPanel.tsx

@@ -12,12 +12,13 @@
 
 import type React from 'react';
 import { useState } from 'react';
+import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useOxy } from '../../context/OxyContext';
 import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
 import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
-import { AccountFlowField, AccountFlowNote } from './accountFlowParts';
+import { AccountFlowField, AccountFlowNotice } from './accountFlowParts';
 
 export interface OxyDeleteAccountPanelProps {
   /** The account is gone and this origin signed out of it. */
@@ -45,7 +46,8 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
   if (keyed) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.keyless.keyed')} />
+        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} />
+        <AccountFlowNotice testID="delete-account-keyed">{t('deleteAccount.keyless.keyed')}</AccountFlowNotice>
       </OxyAuthScreen>
     );
   }
@@ -65,6 +67,16 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
       validate={() => (confirmText.trim() === username ? null : t('deleteAccount.confirmLabel', { username }))}
       onSubmit={async (proof) => {
         if (!proof.emailCode) throw new Error(t('reauth.errors.invalid'));
+        // The last word before it is gone: the proof is ready, and nothing has
+        // been sent yet. Cancelling keeps the screen as it is, code and all.
+        const confirmed = await surfaces.confirm({
+          title: t('deleteAccount.title'),
+          description: t('deleteAccount.warning'),
+          confirmLabel: t('deleteAccount.confirm'),
+          cancelLabel: t('common.cancel'),
+          destructive: true,
+        });
+        if (!confirmed) return;
         await oxyServices.users.deleteMe(confirmText.trim(), {
           reauth: {
             emailCode: proof.emailCode,
@@ -77,7 +89,9 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
       }}
       secondary={onCancel ? { label: t('common.cancel'), onPress: onCancel } : undefined}
     >
-      <AccountFlowNote>{t('deleteAccount.warning')}</AccountFlowNote>
+      <AccountFlowNotice type="warning" testID="delete-account-warning">
+        {t('deleteAccount.warning')}
+      </AccountFlowNotice>
       <AccountFlowField
         label={t('deleteAccount.confirmLabel', { username })}
         value={confirmText}

package/src/ui/components/signIn/OxyLinkCommonsPanel.tsx

@@ -13,9 +13,10 @@
 
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
+import { Loading } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { deriveIdentityLinkCode } from '@oxy.so/core/crypto';
@@ -203,7 +204,7 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
           <View style={styles.plateRow}>
-            <ActivityIndicator size="large" color={theme.colors.primary} />
+            <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />
           </View>
         </OxyAuthScreen>
       );

package/src/ui/components/signIn/OxyPasswordPanel.tsx

@@ -7,11 +7,10 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Field } from '@oxy.so/bloom/field';
 import { Switch } from '@oxy.so/bloom/switch';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
-import { Text } from '@oxy.so/bloom/typography';
 import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '@oxy.so/contracts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../../context/OxyContext';
@@ -30,7 +29,6 @@ export interface OxyPasswordPanelProps {
 }
 
 export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCancel }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices, user } = useOxy();
   const queryClient = useQueryClient();
@@ -94,10 +92,11 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
         autoFocus={false}
         testID="password-repeat"
       />
-      <View style={styles.row}>
-        <Text style={[styles.label, { color: theme.colors.text }]}>{t('signInSecurity.password.signOutOthers')}</Text>
+      {/* The field names the switch ("Sign out everywhere else, switch, off")
+          and, on web, its label toggles it. One row: label, then the switch. */}
+      <Field label={t('signInSecurity.password.signOutOthers')} style={styles.row}>
         <Switch value={signOutOthers} onValueChange={setSignOutOthers} testID="password-sign-out-others" />
-      </View>
+      </Field>
     </ReauthStep>
   );
 };
@@ -109,9 +108,4 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     gap: 12,
   },
-  label: {
-    flex: 1,
-    fontSize: 16,
-    lineHeight: 24,
-  },
 });

package/src/ui/components/signIn/OxySignInPanel.tsx

@@ -60,7 +60,7 @@ import {
   AccountFlowAction,
   AccountFlowCodeField,
   AccountFlowField,
-  AccountFlowNote,
+  AccountFlowNotice,
   BACKUP_CODE_LENGTH,
   describeSignInError,
   errorCode,
@@ -440,7 +440,14 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     );
   }
 
-  const shownError = rateLimitSeconds > 0 ? t('signin.errors.rateLimited', { seconds: rateLimitSeconds }) : error;
+  // A 429 is not something the person typed wrong: it is a wait, counted down
+  // in a notice above the action it holds back, never the field's error.
+  const rateLimitNotice =
+    rateLimitSeconds > 0 ? (
+      <AccountFlowNotice type="warning" testID="signin-rate-limit">
+        {t('signin.errors.rateLimited', { seconds: rateLimitSeconds })}
+      </AccountFlowNotice>
+    ) : null;
   const clearError = () => {
     if (error) setError(null);
   };
@@ -464,7 +471,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onComplete={submitCode}
-            error={shownError}
+            error={error}
             disabled={blocked}
             length={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH : EMAIL_CODE_LENGTH}
             type={longCode ? 'alphanumeric' : 'numeric'}
@@ -474,7 +481,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           />
           <SubtleLink
             label={longCode ? t('signin.checkEmail.codeDigitsOnly') : t('signin.checkEmail.codeHasLetters')}
-            theme={theme}
             onPress={() => {
               setLongCode(!longCode);
               setCode('');
@@ -483,7 +489,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             disabled={pending}
             testID="signin-code-letters"
           />
-          {notice ? <AccountFlowNote testID="signin-notice">{notice}</AccountFlowNote> : null}
+          {notice ? <AccountFlowNotice testID="signin-notice">{notice}</AccountFlowNotice> : null}
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={() => submitCode(code)}
@@ -498,21 +505,18 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                   ? t('signin.checkEmail.resendIn', { seconds: resendSeconds })
                   : t('signin.checkEmail.resend')
               }
-              theme={theme}
               onPress={() => startEmail(request.identifier)}
               disabled={blocked || resendSeconds > 0}
               testID="signin-resend"
             />
             <SubtleLink
               label={t('signin.checkEmail.usePassword')}
-              theme={theme}
               onPress={() => toPassword(request.identifier)}
               disabled={pending}
               testID="signin-use-password"
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -535,12 +539,13 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onSubmit={submitPassword}
-            error={shownError}
+            error={error}
             disabled={blocked}
             autoComplete="current-password"
             secureTextEntry
             testID="signin-password"
           />
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={submitPassword}
@@ -551,14 +556,12 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           <View style={styles.links}>
             <SubtleLink
               label={t('signin.password.forgot')}
-              theme={theme}
               onPress={() => startEmail(request.identifier)}
               disabled={blocked}
               testID="signin-password-forgot"
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -584,13 +587,14 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onComplete={submitSecondFactor}
-            error={shownError}
+            error={error}
             disabled={blocked}
             length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
             type={useBackupCode ? 'alphanumeric' : 'numeric'}
             groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
             testID="signin-second-factor"
           />
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={() => submitSecondFactor(secondFactorCode)}
@@ -601,7 +605,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           <View style={styles.links}>
             <SubtleLink
               label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
-              theme={theme}
               onPress={() => {
                 setUseBackupCode(!useBackupCode);
                 setSecondFactorCode('');
@@ -612,7 +615,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -675,7 +677,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                 clearError();
               }}
               onSubmit={submitIdentifier}
-              error={shownError}
+              error={error}
               disabled={blocked}
               placeholder={t('signin.identifier.placeholder')}
               autoComplete="username"
@@ -694,6 +696,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                 {t('signin.createAccount')}
               </RNText>
             </Text>
+            {rateLimitNotice}
             <AccountFlowAction
               label={t('signin.actions.continue')}
               onPress={submitIdentifier}

package/src/ui/components/signIn/OxySignUpPanel.tsx

@@ -14,7 +14,6 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { Linking, Platform } from 'react-native';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
 import { SIGN_IN_ERROR_CODES, emailAddressSchema, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
@@ -29,6 +28,7 @@ import {
   AccountFlowAction,
   AccountFlowField,
   AccountFlowNote,
+  AccountFlowProgress,
   EmailCodeStep,
   describeSignInError,
   errorCode,
@@ -61,7 +61,6 @@ interface SavedSignUpFlow {
 const SIGN_UP_FLOW_KEY = 'signup';
 
 export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSignIn, host = 'page' }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices, handleWebSession, accountDialogController } = useOxy();
   const snapshot = useAccountDialogSnapshot(accountDialogController);
@@ -149,6 +148,12 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
       .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
   };
 
+  // username → email → code, drawn as one segmented bar under each header.
+  const progressSteps = [t('signup.username.label'), t('signup.email.label'), t('emailCode.title')];
+  const progress = (current: number) => (
+    <AccountFlowProgress steps={progressSteps} current={current} testID="signup-progress" />
+  );
+
   switch (step.name) {
     case 'code':
       return (
@@ -158,12 +163,14 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
           onConfirmed={createAccount}
           onResend={() => sendCode(email)}
           back={{ label: t('emailCode.changeEmail'), onPress: () => setStep({ name: 'email' }) }}
+          progress={progress(2)}
         />
       );
     case 'email':
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          {progress(1)}
           <AccountFlowField
             label={t('signup.email.label')}
             value={email}
@@ -181,7 +188,7 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
           />
           <AccountFlowNote>{t('signup.laterNote')}</AccountFlowNote>
           <AccountFlowAction label={t('signin.actions.continue')} onPress={submitEmail} pending={pending} testID="signup-email-continue" />
-          <SubtleLink label={t('signin.actions.back')} theme={theme} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
+          <SubtleLink label={t('signin.actions.back')} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );
@@ -189,6 +196,7 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signup.title')} description={t('signup.subtitle')} />
+          {progress(0)}
           <AccountFlowField
             label={t('signup.username.label')}
             value={username}
@@ -204,8 +212,8 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
             testID="signup-username"
           />
           <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
-          <SubtleLink label={t('signup.createInCommons')} theme={theme} onPress={createInCommons} testID="signup-commons-instead" />
-          <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <SubtleLink label={t('signup.createInCommons')} onPress={createInCommons} testID="signup-commons-instead" />
+          <SubtleLink label={t('signup.backToSignInLink')} onPress={onSignIn} testID="back-to-sign-in" />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );