@oxy.so/services 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -155,7 +155,7 @@
   },
   "dependencies": {
     "@expo/config-plugins": "57.0.9",
-    "@oxy.so/contracts": "^2.0.0",
+    "@oxy.so/contracts": "^2.2.0",
     "@simplewebauthn/browser": "^13.3.0",
     "color": "^4.2.3"
   },
@@ -164,7 +164,7 @@
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/core": "1.16.0",
+    "@oxy.so/core": "1.18.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^12.0.1",
     "@react-native/babel-preset": "^0.86.2",
@@ -216,7 +216,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxy.so/bloom": "^4.26.0",
-    "@oxy.so/core": "^1.16.0",
+    "@oxy.so/core": "^1.18.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": ">=11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",

package/src/index.ts

@@ -368,6 +368,17 @@ export { OxySignUpPanel } from './ui/components/signIn/OxySignUpPanel';
 export type { OxySignUpPanelProps } from './ui/components/signIn/OxySignUpPanel';
 export { OxyAccountPicker } from './ui/components/signIn/OxyAccountPicker';
 export type { OxyAccountPickerProps } from './ui/components/signIn/OxyAccountPicker';
+// auth.oxy.so's account pages (ADR 0029 D3): a passkey account is created,
+// recovered through its recovery email, deleted with its passkey, and linked
+// to Commons there.
+export { OxyCreateAccountPanel } from './ui/components/signIn/OxyCreateAccountPanel';
+export type { OxyCreateAccountPanelProps } from './ui/components/signIn/OxyCreateAccountPanel';
+export { OxyRecoverAccountPanel } from './ui/components/signIn/OxyRecoverAccountPanel';
+export type { OxyRecoverAccountPanelProps } from './ui/components/signIn/OxyRecoverAccountPanel';
+export { OxyDeleteAccountPanel } from './ui/components/signIn/OxyDeleteAccountPanel';
+export type { OxyDeleteAccountPanelProps } from './ui/components/signIn/OxyDeleteAccountPanel';
+export { OxyLinkCommonsPanel } from './ui/components/signIn/OxyLinkCommonsPanel';
+export type { OxyLinkCommonsPanelProps } from './ui/components/signIn/OxyLinkCommonsPanel';
 export {
   OxyAuthScreen,
   OxyAuthScreenHeader,

package/src/ui/components/OxyAuthChooser.tsx

@@ -38,7 +38,7 @@ import { Linking, Platform } from 'react-native';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { AUTH_WEB_ORIGIN, getNormalizedUserHandle, type OxyAuthScreen, type User } from '@oxy.so/core';
+import { getNormalizedUserHandle, type OxyAuthScreen, type User } from '@oxy.so/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../context/OxyContext';
 import { useDeviceSwitcher } from '../hooks/useDeviceSwitcher';
@@ -419,7 +419,6 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
       onSignOut: () => {
         void handleSignOut();
       },
-      onOpenIdentity: passkeyMode === 'hub' ? () => openUrl(`${AUTH_WEB_ORIGIN}/identity`) : undefined,
       customItems: (consumerHooks?.menuItems ?? []).map((item) => ({
         ...item,
         onPress: () => {
@@ -428,7 +427,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
         },
       })),
     };
-  }, [consumerHooks, onComplete, showBottomSheet, handleSignOut, openExternal, passkeyMode]);
+  }, [consumerHooks, onComplete, showBottomSheet, handleSignOut, openExternal]);
 
   if (!controller) {
     return null;

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

@@ -504,13 +504,6 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
           title={t('accountMenu.settings')}
           onPress={menu.onOpenSettings}
         />
-        {menu.onOpenIdentity ? (
-          <SettingsListItem
-            icon={<MenuIcon name="shield-account-outline" theme={theme} />}
-            title={t('accountMenu.identity')}
-            onPress={menu.onOpenIdentity}
-          />
-        ) : null}
         <SettingsListItem
           icon={<MenuIcon name="help-circle-outline" theme={theme} />}
           title={t('accountMenu.help')}

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

@@ -95,11 +95,6 @@ export interface AccountsMenuActions {
   onPrivacy: () => void;
   onTerms: () => void;
   onSignOut: () => void;
-  /**
-   * Open the person's identity at auth.oxy.so/identity (recovery phrase,
-   * recovery, account deletion). Web only — `undefined` hides the row.
-   */
-  onOpenIdentity?: () => void;
   customItems: readonly {
     key: string;
     label: string;

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

@@ -0,0 +1,207 @@
+/**
+ * Creating an Oxy account on the web (ADR 0029 D3), auth.oxy.so's `/signup`:
+ *
+ *   username → recovery email → the code sent to it → passkey → signed in
+ *
+ * A web account is a username, a passkey and a recovery email — no password, no
+ * phrase, no key. The email is confirmed before the account exists, and is
+ * used only to get back in (`OxyRecoverAccountPanel`). Commons stays the way to
+ * hold your own key: the first step says so, and linking Commons later makes
+ * the account self-custodied and deletes the email.
+ *
+ * Only on auth.oxy.so: the passkey belongs to that origin (RP ID `oxy.so`,
+ * asserted only there), and an app's dialog opens this page in a window
+ * (`OxySignUpPanel`'s `onCreateOnWeb`).
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { Linking, Platform } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { DeviceManager } from '@oxy.so/core';
+import { emailAddressSchema } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { runPasskeyRegisterSignIn } from '../../context/passkeyFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isPasskeySupported, runRegistrationCeremony } from '../../../webauthn/passkeyClient';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  EmailCodeStep,
+  describeAccountFlowError,
+  isTicketExpired,
+} from './accountFlowParts';
+
+type Step =
+  | { name: 'username' }
+  | { name: 'email' }
+  | { name: 'code'; verificationId: string }
+  | { name: 'passkey'; emailTicket: string };
+
+export interface OxyCreateAccountPanelProps {
+  /** The account exists and this origin is signed in as it. */
+  onSignedIn: () => void;
+  /** "Already have an account? Sign in". */
+  onSignIn: () => void;
+}
+
+export const OxyCreateAccountPanel: React.FC<OxyCreateAccountPanelProps> = ({ onSignedIn, onSignIn }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices, handleWebSession } = useOxy();
+  const [step, setStep] = useState<Step>({ name: 'username' });
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = (work: () => Promise<void>) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    work()
+      .catch((reason: unknown) => {
+        if (isTicketExpired(reason)) setStep({ name: 'email' });
+        setError(describeAccountFlowError(reason, t));
+      })
+      .finally(() => setPending(false));
+  };
+
+  const submitUsername = () => {
+    const handle = username.trim();
+    if (!handle) {
+      setError(t('signup.username.required'));
+      return;
+    }
+    run(async () => {
+      const { available } = await oxyServices.checkUsernameAvailability(handle);
+      if (!available) throw new Error(t('signup.username.taken'));
+      setStep({ name: 'email' });
+    });
+  };
+
+  const sendCode = async (address: string) => {
+    const { verificationId } = await oxyServices.startEmailVerification({ purpose: 'signup', email: address });
+    setStep({ name: 'code', verificationId });
+  };
+
+  const submitEmail = () => {
+    const parsed = emailAddressSchema.safeParse(email);
+    if (!parsed.success) {
+      setError(t('signup.email.invalid'));
+      return;
+    }
+    setEmail(parsed.data);
+    run(() => sendCode(parsed.data));
+  };
+
+  // The ceremony opens the browser's passkey prompt, so it starts from the press.
+  const createPasskey = (emailTicket: string) =>
+    run(() =>
+      runPasskeyRegisterSignIn({
+        isSupported: isPasskeySupported,
+        getRegisterOptions: () => oxyServices.webauthnRegisterOptions({ username: username.trim() }),
+        runCeremony: runRegistrationCeremony,
+        registerVerify: (response) =>
+          oxyServices.webauthnRegisterVerify(response, {
+            username: username.trim(),
+            email,
+            emailTicket,
+            deviceFingerprint: JSON.stringify(DeviceManager.getDeviceFingerprint()),
+          }),
+        commit: async (session) => {
+          await handleWebSession(session);
+          onSignedIn();
+        },
+      }),
+    );
+
+  const getCommons = () => {
+    Promise.resolve()
+      .then(() => Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)))
+      .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+  };
+
+  switch (step.name) {
+    case 'code':
+      return (
+        <EmailCodeStep
+          description={t('emailCode.sentTo', { email })}
+          verificationId={step.verificationId}
+          onConfirmed={({ ticket }) => {
+            setError(null);
+            setStep({ name: 'passkey', emailTicket: ticket });
+          }}
+          onResend={() => sendCode(email)}
+          back={{ label: t('emailCode.changeEmail'), onPress: () => setStep({ name: 'email' }) }}
+        />
+      );
+    case 'passkey':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.passkey.title')} description={t('signup.passkey.subtitle')} />
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction
+            label={t('signup.passkey.action')}
+            onPress={() => createPasskey(step.emailTicket)}
+            pending={pending}
+            testID="signup-create-passkey"
+          />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    case 'email':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          <AccountFlowField
+            label={t('signup.email.label')}
+            value={email}
+            onChange={(value) => {
+              setEmail(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitEmail}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.email.placeholder')}
+            autoComplete="email"
+            keyboardType="email-address"
+            testID="signup-email"
+          />
+          <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" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.title')} description={t('signup.webSubtitle')} />
+          <AccountFlowField
+            label={t('signup.username.label')}
+            value={username}
+            onChange={(value) => {
+              setUsername(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitUsername}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.username.placeholder')}
+            autoComplete="username"
+            testID="signup-username"
+          />
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
+          <SubtleLink label={t('signup.commonsInstead')} theme={theme} onPress={getCommons} testID="signup-commons-instead" />
+          <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+  }
+};

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

@@ -0,0 +1,106 @@
+/**
+ * Deleting a passkey account (ADR 0029 D3), auth.oxy.so's `/delete-account`.
+ *
+ * A passkey account has no key to sign its deletion with, so the person types
+ * the username and asserts one of the account's passkeys — on auth.oxy.so, the
+ * one origin that asserts them — over a challenge the API minted for the
+ * account. An account with a Commons key is deleted in Commons, with its key.
+ * The page must be signed in as the account; the host renders sign-in first.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+import { isPasskeySupported, runAuthenticationCeremony } from '../../../webauthn/passkeyClient';
+import { PASSKEY_UNSUPPORTED_MESSAGE } from '../../context/passkeyFlow';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  AccountFlowNote,
+  describeAccountFlowError,
+} from './accountFlowParts';
+
+export interface OxyDeleteAccountPanelProps {
+  /** The account is gone and this origin signed out of it. */
+  onDeleted?: () => void;
+}
+
+export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ onDeleted }) => {
+  const { t } = useI18n();
+  const { user, oxyServices, logout } = useOxy();
+  const [confirmText, setConfirmText] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [deleted, setDeleted] = useState(false);
+
+  if (deleted) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('deleteAccount.passkey.done')} description={t('deleteAccount.passkey.closeWindow')} />
+      </OxyAuthScreen>
+    );
+  }
+
+  const username = user?.username ?? '';
+  if (user?.publicKey) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.passkey.commons')} />
+      </OxyAuthScreen>
+    );
+  }
+
+  // The ceremony opens the browser's passkey prompt, so it starts from the press.
+  const remove = () => {
+    if (pending) return;
+    if (confirmText.trim() !== username) {
+      setError(t('deleteAccount.confirmLabel', { username }));
+      return;
+    }
+    setError(null);
+    setPending(true);
+    (async () => {
+      if (!isPasskeySupported()) throw new Error(PASSKEY_UNSUPPORTED_MESSAGE);
+      const options = await oxyServices.getAccountDeletionOptions();
+      const assertion = await runAuthenticationCeremony(options);
+      await oxyServices.deleteAccountWithPasskey(confirmText.trim(), assertion);
+      await logout().catch(() => undefined);
+      setDeleted(true);
+      onDeleted?.();
+    })()
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('deleteAccount.title')} description={t('deleteAccount.passkey.subtitle', { username })} />
+      <AccountFlowNote>{t('deleteAccount.warning')}</AccountFlowNote>
+      <AccountFlowField
+        label={t('deleteAccount.confirmLabel', { username })}
+        value={confirmText}
+        onChange={(value) => {
+          setConfirmText(value);
+          if (error) setError(null);
+        }}
+        onSubmit={remove}
+        error={null}
+        disabled={pending}
+        placeholder={username}
+        autoComplete="off"
+        testID="delete-account-confirm"
+      />
+      {error ? <AccountFlowErrorLine message={error} /> : null}
+      <AccountFlowAction
+        label={t('deleteAccount.passkey.action')}
+        onPress={remove}
+        pending={pending}
+        disabled={confirmText.trim() !== username}
+        testID="delete-account-passkey"
+      />
+    </OxyAuthScreen>
+  );
+};

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

@@ -0,0 +1,222 @@
+/**
+ * Linking Commons to a passkey account (ADR 0029 D3), auth.oxy.so's
+ * `/link-commons`:
+ *
+ *   QR → Commons scans and signs with its key → both screens show the same
+ *   code → the person confirms here with the passkey → linked
+ *
+ * Afterwards the account is self-custodied: its root is the key Commons holds,
+ * its recovery email is deleted, and its phrase in Commons is how it gets back
+ * in. The passkey keeps signing in on the web. The page must be signed in as
+ * the account; the host renders sign-in first.
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { deriveIdentityLinkCode } from '@oxy.so/core';
+import type { IdentityLinkCreateResponse } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { PASSKEY_UNSUPPORTED_MESSAGE } from '../../context/passkeyFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { isPasskeySupported, runAuthenticationCeremony } from '../../../webauthn/passkeyClient';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { AccountFlowAction, AccountFlowErrorLine, AccountFlowNote, describeAccountFlowError } from './accountFlowParts';
+
+/** How often the page asks whether Commons has signed. */
+export const IDENTITY_LINK_POLL_MS = 2000;
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 200;
+
+type Step =
+  | { name: 'opening' }
+  | { name: 'qr'; link: IdentityLinkCreateResponse }
+  | { name: 'matching'; link: IdentityLinkCreateResponse; code: string }
+  | { name: 'expired' }
+  | { name: 'done' };
+
+export interface OxyLinkCommonsPanelProps {
+  /** Commons is linked. */
+  onLinked?: () => void;
+}
+
+export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLinked }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { user, oxyServices } = useOxy();
+  const [step, setStep] = useState<Step>({ name: 'opening' });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const alreadyLinked = Boolean(user?.publicKey);
+
+  const open = useCallback(() => {
+    setError(null);
+    setStep({ name: 'opening' });
+    oxyServices
+      .createIdentityLink()
+      .then((link) => setStep({ name: 'qr', link }))
+      .catch((reason: unknown) => {
+        setError(describeAccountFlowError(reason, t));
+        setStep({ name: 'expired' });
+      });
+  }, [oxyServices, t]);
+
+  // One request per visit, opened once the page knows the account has no root.
+  const opened = useRef(false);
+  useEffect(() => {
+    if (alreadyLinked || opened.current) return;
+    opened.current = true;
+    open();
+  }, [alreadyLinked, open]);
+
+  // While the QR shows, ask whether Commons has signed; a request only lives a
+  // few minutes, and an expired one says so instead of waiting forever.
+  const link = step.name === 'qr' ? step.link : null;
+  useEffect(() => {
+    if (!link) return;
+    let stopped = false;
+    const poll = async () => {
+      if (stopped) return;
+      if (Date.now() >= link.expiresAt) {
+        setStep({ name: 'expired' });
+        return;
+      }
+      try {
+        const state = await oxyServices.getIdentityLink(link.linkId);
+        if (stopped) return;
+        if (state.status === 'signed' && state.publicKey) {
+          setStep({ name: 'matching', link, code: deriveIdentityLinkCode(link.linkId, state.publicKey) });
+          return;
+        }
+        if (state.status === 'cancelled') {
+          setStep({ name: 'expired' });
+          return;
+        }
+      } catch {
+        // A missed poll is retried on the next tick.
+      }
+      if (!stopped) timer = setTimeout(() => void poll(), IDENTITY_LINK_POLL_MS);
+    };
+    let timer = setTimeout(() => void poll(), IDENTITY_LINK_POLL_MS);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
+  }, [link, oxyServices]);
+
+  // The ceremony opens the browser's passkey prompt, so it starts from the press.
+  const confirm = (confirmed: IdentityLinkCreateResponse) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    (async () => {
+      if (!isPasskeySupported()) throw new Error(PASSKEY_UNSUPPORTED_MESSAGE);
+      const options = await oxyServices.getIdentityLinkAssertionOptions(confirmed.linkId, confirmed.challenge);
+      const assertion = await runAuthenticationCeremony(options);
+      await oxyServices.completeIdentityLink(confirmed.linkId, assertion);
+      setStep({ name: 'done' });
+      onLinked?.();
+    })()
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const cancel = (cancelled: IdentityLinkCreateResponse) => {
+    void oxyServices.cancelIdentityLink(cancelled.linkId).catch(() => undefined);
+    setStep({ name: 'expired' });
+  };
+
+  if (alreadyLinked) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.already')} />
+      </OxyAuthScreen>
+    );
+  }
+
+  switch (step.name) {
+    case 'done':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.doneTitle')} description={t('linkCommons.done')} />
+        </OxyAuthScreen>
+      );
+    case 'expired':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.expired')} />
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction label={t('linkCommons.renew')} onPress={open} pending={false} testID="link-commons-renew" />
+        </OxyAuthScreen>
+      );
+    case 'matching':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.compareTitle')} description={t('linkCommons.compare')} />
+          <Text
+            accessibilityLabel={step.code.split('').join(' ')}
+            style={[styles.code, { color: theme.colors.text }]}
+            testID="link-commons-code"
+          >
+            {`${step.code.slice(0, 3)} ${step.code.slice(3)}`}
+          </Text>
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction label={t('linkCommons.confirm')} onPress={() => confirm(step.link)} pending={pending} testID="link-commons-confirm" />
+          <Button appearance="plain" tone="neutral" size="lg" fullWidth disabled={pending} onPress={() => cancel(step.link)} testID="link-commons-cancel">
+            {t('linkCommons.cancel')}
+          </Button>
+        </OxyAuthScreen>
+      );
+    case 'qr':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <View style={styles.plateRow}>
+            <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="link-commons-qr">
+              <QRCode value={step.link.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+            </View>
+          </View>
+          <AccountFlowNote>{t('linkCommons.scan')}</AccountFlowNote>
+          <AccountFlowNote>{t('linkCommons.waiting')}</AccountFlowNote>
+          <Button appearance="plain" tone="neutral" size="lg" fullWidth onPress={() => cancel(step.link)} testID="link-commons-cancel">
+            {t('linkCommons.cancel')}
+          </Button>
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <View style={styles.plateRow}>
+            <ActivityIndicator size="large" color={theme.colors.primary} />
+          </View>
+        </OxyAuthScreen>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  plateRow: {
+    alignItems: 'center',
+  },
+  plate: {
+    padding: 12,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+  },
+  code: {
+    fontSize: 40,
+    lineHeight: 48,
+    fontWeight: '700',
+    letterSpacing: 4,
+    textAlign: 'center',
+  },
+});