@oxy.so/services 8.2.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "8.2.0",
+  "version": "8.4.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -163,7 +163,7 @@
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/core": "3.1.0",
+    "@oxy.so/core": "3.2.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^12.0.1",
     "@react-native/babel-preset": "^0.86.2",
@@ -178,8 +178,9 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.43",
     "@types/react": "*",
-    "@oxy.so/bloom": "^4.31.0",
+    "@oxy.so/bloom": "^4.35.0",
     "copyfiles": "^2.4.1",
+    "expo-clipboard": "~57.0.2",
     "expo-constants": "~57.0.5",
     "expo-file-system": "~57.0.1",
     "expo-haptics": "~57.0.1",
@@ -211,11 +212,11 @@
     "typescript": "^5.9.2",
     "zustand": "^5.0.14"
   },
-  "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer. RAISED TO ^4.31.0: the sign-in and account screens type one-time codes into `InputOtp` with `type=\"alphanumeric\"` (the long sign-in code and backup codes), which 4.31.0 adds; older 4.x drops the letters.",
+  "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer. RAISED TO ^4.31.0: the sign-in and account screens type one-time codes into `InputOtp` with `type=\"alphanumeric\"` (the long sign-in code and backup codes), which 4.31.0 adds; older 4.x drops the letters. RAISED TO ^4.35.0: every password field passes `revealable` to `TextFieldInput` (the eye button, 4.35.0); older 4.x drops the prop silently and the password cannot be shown. The provider also mounts `@oxy.so/bloom/locale` (4.32.0+).",
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/bloom": "^4.31.0",
-    "@oxy.so/core": "^3.1.0",
+    "@oxy.so/bloom": "^4.35.0",
+    "@oxy.so/core": "^3.2.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": ">=11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",
@@ -225,6 +226,7 @@
     "@types/react": "*",
     "@types/react-native": "*",
     "expo": ">=56.0.0",
+    "expo-clipboard": ">=56.0.0 <59.0.0",
     "expo-constants": ">=56.0.0",
     "expo-document-picker": ">=56.0.0",
     "expo-file-system": ">=56.0.0",
@@ -293,6 +295,9 @@
     },
     "expo-web-browser": {
       "optional": true
+    },
+    "expo-clipboard": {
+      "optional": true
     }
   },
   "react-native-builder-bob": {

package/src/index.ts

@@ -306,6 +306,8 @@ export type {
 // wall before the device-first cold boot resolves. Opens the ONE account dialog.
 export { RequireOxyAuth } from './ui/components/RequireOxyAuth';
 export type { RequireOxyAuthProps, RequireOxyAuthPrompt } from './ui/components/RequireOxyAuth';
+// `OxyProvider`'s `accountQueries`: the app's per-account offline cache.
+export type { AccountQueriesConfig } from './ui/hooks/accountQueryPersistence';
 
 export { default as FollowButton } from './ui/components/FollowButton';
 export type { FollowButtonProps, SingleFollowButtonProps, MultiFollowButtonProps } from './ui/components/FollowButton';

package/src/ui/components/BloomLocaleBridge.tsx

@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from 'react';
+import { LocaleProvider, useBloomLocale } from '@oxy.so/bloom/locale';
+import { useOxy } from '../context/OxyContext';
+
+/**
+ * Bloom's own words — a field's "Show password", a dialog's "Close", "Step 2
+ * of 3" — in the language Oxy resolved for this person (`currentLanguage`: the
+ * account's, or signed out, the device's). Mounted by `OxyProvider` around
+ * everything it renders, the app included, so the SDK's screens and the app's
+ * Bloom components speak one language without the app doing anything.
+ *
+ * An app that sets Bloom's locale itself keeps it; the nearest provider wins:
+ *   - a `LocaleProvider` (or `BloomProvider locale`) INSIDE `OxyProvider` is
+ *     nearer than this one, and wins for its subtree as usual;
+ *   - one OUTSIDE `OxyProvider` is the app's explicit choice, so this bridge
+ *     passes it through instead of overriding it from within.
+ * Only where nothing above sets a locale does Oxy's language apply.
+ */
+export const BloomLocaleBridge: FC<{ children: ReactNode }> = ({ children }) => {
+    const { currentLanguage } = useOxy();
+    const inherited = useBloomLocale();
+    return <LocaleProvider locale={inherited ?? currentLanguage}>{children}</LocaleProvider>;
+};

package/src/ui/components/OxyProvider.tsx

@@ -15,6 +15,7 @@ import { isNetConnectivityOnline } from '../utils/netConnectivity';
 import { KeyboardBoundary } from './KeyboardBoundary';
 import { ProductAnalyticsObserver } from '../analytics/productAnalytics';
 import { LanguageBridge } from './LanguageBridge';
+import { BloomLocaleBridge } from './BloomLocaleBridge';
 
 const bootStyles = StyleSheet.create({
     providerRoot: {
@@ -88,6 +89,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     sessionMode = 'account',
     webAuthMode = 'popup',
     queryClient: providedQueryClient,
+    accountQueries,
     requireAuth = 'off',
     backgroundSession = false,
     language,
@@ -102,6 +104,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
     const persistenceUnsubRef = useRef<(() => void) | null>(null);
     const ownsQueryClientRef = useRef(providedQueryClient === undefined);
+    // `accountQueries` is read once, at mount, like the client itself.
+    const accountMutationKeysRef = useRef(accountQueries?.mutationKeys);
     const [platformStorage, setPlatformStorage] = useState<StorageInterface | null>(null);
 
     // If the consumer supplied their own QueryClient we use it as-is and skip
@@ -135,7 +139,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
             setPlatformStorage(storage);
             const client = queryClientRef.current;
             if (!client || !ownsQueryClientRef.current) return;
-            const persistence = attachQueryPersistence(client, storage);
+            const persistence = attachQueryPersistence(client, storage, accountMutationKeysRef.current);
             persistenceUnsubRef.current = persistence.unsubscribe;
             await persistence.restored;
         };
@@ -226,6 +230,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
     // (defaultColorPreset, defaultMode, persistKey, storage, fonts, etc.).
     // OxyProvider does NOT wrap a BloomThemeProvider — that would create a
     // duplicate scope that silently shadows the consumer's configuration.
+    // It DOES set Bloom's locale (`BloomLocaleBridge`) to Oxy's language, but
+    // defers to a locale the app already set above it.
     const coreContent = (
         <QueryClientProvider client={queryClient}>
             <OxyRuntimeProvider
@@ -240,18 +246,21 @@ const OxyProvider: FC<OxyProviderProps> = ({
                 webAuthMode={webAuthMode}
                 backgroundSession={backgroundSession}
                 platformStorage={platformStorage}
+                accountQueries={accountQueries}
                 onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
             >
                 {productAnalytics ? <ProductAnalyticsObserver analytics={productAnalytics} /> : null}
                 {language ? <LanguageBridge {...language} /> : null}
-                <SurfaceProvider>
-                    {requireAuth === 'off' ? (
-                        children
-                    ) : (
-                        <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
-                    )}
-                </SurfaceProvider>
-                <ToastOutlet />
+                <BloomLocaleBridge>
+                    <SurfaceProvider>
+                        {requireAuth === 'off' ? (
+                            children
+                        ) : (
+                            <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
+                        )}
+                    </SurfaceProvider>
+                    <ToastOutlet />
+                </BloomLocaleBridge>
             </OxyRuntimeProvider>
         </QueryClientProvider>
     );

package/src/ui/components/OxySignInRequestSurface.tsx

@@ -138,7 +138,6 @@ export const OxySignInRequestSurface: React.FC<OxySignInRequestSurfaceProps> = (
     <SubtleLink
       key={action.key}
       label={action.label}
-      theme={theme}
       onPress={action.onPress}
       disabled={action.disabled}
       testID={action.key}

package/src/ui/components/RequireOxyAuth.tsx

@@ -75,7 +75,7 @@ export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
   bannerMessage,
   bannerActionLabel,
 }) => {
-  const { canUsePrivateApi, isPrivateApiPending, openAccountDialog } = useOxy();
+  const { canUsePrivateApi, isPrivateApiPending, isAccountCacheReady, openAccountDialog } = useOxy();
 
   // Public app: render straight through. Cheap enough to short-circuit before
   // touching any gate UI.
@@ -83,8 +83,13 @@ export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
     return <>{children}</>;
   }
 
-  // Signed in (and token ready): render the protected subtree in every mode.
+  // Signed in (and token ready): render the protected subtree in every mode,
+  // once the account's offline cache (`accountQueries`) has restored. Before
+  // that it would render with no rows, or with the previous account's.
   if (canUsePrivateApi) {
+    if (!isAccountCacheReady) {
+      return loadingFallback ? <>{loadingFallback}</> : <NeutralLoading />;
+    }
     return <>{children}</>;
   }
 

package/src/ui/components/SurfaceScreen.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
-import { ActivityIndicator, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -83,18 +84,11 @@ const errorStyles = StyleSheet.create({
  * as `lazy(() => import(...))` (see `../navigation/routes`), so the very first
  * presentation of a surface can land here for a frame; the surface chrome is
  * already on screen by then, so this fills only the body.
- *
- * Deliberately RN's `ActivityIndicator` rather than `@oxy.so/bloom/loading`,
- * matching `authChooser/requestSurfaces`: Bloom still declares
- * `sideEffects: false`, so its `Loading` can still tree-shake to `undefined` in
- * a rolldown-vite production bundle. Removing that risk from the first frame of
- * every route is not worth a themed spinner.
  */
 function ScreenPending() {
-  const theme = useTheme();
   return (
     <View style={errorStyles.container}>
-      <ActivityIndicator size="large" color={theme.colors.primary} />
+      <Loading variant="spinner" size="large" />
     </View>
   );
 }

package/src/ui/components/__tests__/BloomLocaleBridge.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { LocaleProvider, useBloomLocale } from '@oxy.so/bloom/locale';
+import { BloomLocaleBridge } from '../BloomLocaleBridge';
+
+/**
+ * Bloom's own words follow Oxy's language unless the app already set Bloom's
+ * locale: the nearest provider wins, in both directions.
+ */
+
+let mockCurrentLanguage = 'es-ES';
+jest.mock('../../context/OxyContext', () => ({
+  useOxy: () => ({ currentLanguage: mockCurrentLanguage }),
+}));
+
+function Probe() {
+  return <span data-testid="locale">{useBloomLocale() ?? 'runtime'}</span>;
+}
+
+beforeEach(() => {
+  mockCurrentLanguage = 'es-ES';
+});
+
+it("gives Bloom the account's language", () => {
+  const { getByTestId } = render(
+    <BloomLocaleBridge>
+      <Probe />
+    </BloomLocaleBridge>,
+  );
+  expect(getByTestId('locale').textContent).toBe('es-ES');
+});
+
+it('follows a language change', () => {
+  const { getByTestId, rerender } = render(
+    <BloomLocaleBridge>
+      <Probe />
+    </BloomLocaleBridge>,
+  );
+  mockCurrentLanguage = 'fr-FR';
+  rerender(
+    <BloomLocaleBridge>
+      <Probe />
+    </BloomLocaleBridge>,
+  );
+  expect(getByTestId('locale').textContent).toBe('fr-FR');
+});
+
+it("keeps a locale the app set above OxyProvider", () => {
+  const { getByTestId } = render(
+    <LocaleProvider locale="de-DE">
+      <BloomLocaleBridge>
+        <Probe />
+      </BloomLocaleBridge>
+    </LocaleProvider>,
+  );
+  expect(getByTestId('locale').textContent).toBe('de-DE');
+});
+
+it('yields to a provider the app mounts inside it', () => {
+  const { getByTestId } = render(
+    <BloomLocaleBridge>
+      <LocaleProvider locale="ja-JP">
+        <Probe />
+      </LocaleProvider>
+    </BloomLocaleBridge>,
+  );
+  expect(getByTestId('locale').textContent).toBe('ja-JP');
+});

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

@@ -56,7 +56,6 @@ const TroubleDisclosure: React.FC<TroubleDisclosureProps> = ({ actions, revealed
         <SubtleLink
           key={action.key}
           label={action.label}
-          theme={theme}
           onPress={action.onPress}
           disabled={action.disabled}
           testID={action.key}

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

@@ -5,10 +5,8 @@
  */
 
 import type React from 'react';
-import { Pressable } from 'react-native';
-import { Text } from '@oxy.so/bloom/typography';
+import { LinkButton } from '@oxy.so/bloom/button';
 import { authChooserStyles as styles } from './styles';
-import type { Theme } from './types';
 
 /**
  * A SUBORDINATE action: a small centred text link, never a button.
@@ -17,22 +15,26 @@ import type { Theme } from './types';
  * primary action (issue #691) — the sign-up entry, and every alternative revealed
  * behind "Having trouble?". Keeping them all on one component is what stops an
  * alternative from quietly growing into a co-equal button again.
+ *
+ * Bloom's `LinkButton` in the secondary tone at `sm`: no fill or border, the
+ * secondary text colour, underlined under a pointer, and Bloom's link hit slop
+ * for the touch target. The vertical padding keeps the stack's old rhythm.
  */
 export const SubtleLink: React.FC<{
   label: string;
-  theme: Theme;
   onPress: () => void;
   disabled?: boolean;
   testID?: string;
-}> = ({ label, theme, onPress, disabled, testID }) => (
-  <Pressable
+}> = ({ label, onPress, disabled, testID }) => (
+  <LinkButton
+    variant="secondary"
+    size="sm"
     onPress={onPress}
     disabled={disabled}
-    accessibilityRole="button"
     accessibilityLabel={label}
     style={styles.footerLink}
     testID={testID}
   >
-    <Text style={[styles.linkText, { color: theme.colors.textSecondary }]}>{label}</Text>
-  </Pressable>
+    {label}
+  </LinkButton>
 );

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

@@ -13,16 +13,17 @@
  */
 
 import type React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { View } from 'react-native';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
-import { useTheme } from '@oxy.so/bloom/theme';
+import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import type { CommonsDeliveryRoute } from '@oxy.so/core';
 import type { SignInProgress } from '@oxy.so/core/session';
 import { authChooserStyles as styles } from './styles';
 import type { Theme, Translate } from './types';
+import { useI18n } from '../../hooks/useI18n';
 
 /** High-contrast QR colors — intentionally fixed (NOT themed) for scan reliability. */
 const QR_PLATE_BG = '#FFFFFF';
@@ -32,14 +33,14 @@ const QR_SIZE = 196;
 const ROUTE_GLYPH_SIZE = 44;
 
 /**
- * The indeterminate leading visual: the request exists but has nothing to show yet.
- * Uses RN's ActivityIndicator — `@oxy.so/bloom/loading` can tree-shake to `undefined`
- * in rolldown-vite production bundles when co-imported with `@oxy.so/bloom/button`
- * (auth.oxy.so/authorize blank screen, React #130).
+ * The indeterminate leading visual: the request exists but has nothing to show
+ * yet. Bloom's spinner, named "Loading…" so assistive technology hears a busy
+ * progressbar where the QR will appear; the status sentence under it
+ * (`signInProgressLabel`) says what is happening.
  */
 export const PreparingSurface: React.FC = () => {
-  const theme = useTheme();
-  return <ActivityIndicator size="large" color={theme.colors.primary} />;
+  const { t } = useI18n();
+  return <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />;
 };
 
 /** The leading glyph for a route whose surface is elsewhere (the phone, Commons). */

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>
   );
 };