@oxyhq/services 16.0.0 → 17.0.0

package/src/ui/components/OxyProvider.tsx

@@ -9,6 +9,7 @@ import { BloomDialogProvider } from '@oxyhq/bloom';
 import { ToastOutlet } from '@oxyhq/bloom/toast';
 import { logger as loggerUtil } from '@oxyhq/core';
 import { setupFonts } from './FontLoader';
+import { RequireOxyAuth } from './RequireOxyAuth';
 import { attachQueryPersistence, createQueryClient } from '../hooks/queryClient';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 
@@ -63,8 +64,8 @@ const LazyBottomSheetRouter = lazy((): Promise<{ default: ComponentType }> =>
     ),
 );
 
-const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
-    import('./SignInModal').then(
+const LazyOxyAccountDialog = lazy((): Promise<{ default: ComponentType }> =>
+    import('./OxyAccountDialog').then(
         (mod) => ({ default: mod.default as unknown as ComponentType }),
         () => ({ default: (() => null) as FC }),
     ),
@@ -75,8 +76,8 @@ const LazySignInModal = lazy((): Promise<{ default: ComponentType }> =>
  *
  * Provides authentication, session management, query client, and UI overlays.
  * Wraps its own overlay stack in SafeAreaProvider and GestureHandlerRootView so
- * BottomSheetRouter and SignInModal can safely render even when a consuming app
- * has not mounted those providers yet.
+ * BottomSheetRouter and OxyAccountDialog can safely render even when a consuming
+ * app has not mounted those providers yet.
  *
  * Usage:
  * ```tsx
@@ -114,6 +115,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     authWebUrl,
     authRedirectUri,
     queryClient: providedQueryClient,
+    requireAuth = 'off',
 }) => {
 
     // Dynamic KeyboardProvider for native. Uses variable indirection
@@ -310,10 +312,14 @@ const OxyProvider: FC<OxyProviderProps> = ({
                     clientId={clientId}
                     onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
                 >
-                    {children}
+                    {requireAuth === 'off' ? (
+                        children
+                    ) : (
+                        <RequireOxyAuth prompt={requireAuth}>{children}</RequireOxyAuth>
+                    )}
                     <Suspense fallback={null}>
                         <LazyBottomSheetRouter />
-                        <LazySignInModal />
+                        <LazyOxyAccountDialog />
                     </Suspense>
                     <ToastOutlet />
                 </OxyContextProvider>

package/src/ui/components/OxySignInButton.tsx

@@ -6,7 +6,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
-import { showSignInModal, subscribeToSignInModal } from './SignInModal';
+import { subscribeToSignInModal } from '../navigation/accountDialogManager';
 
 export interface OxySignInButtonProps {
     /**
@@ -84,37 +84,26 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     showWhenAuthenticated = false,
 }) => {
     const theme = useTheme();
-    const { showBottomSheet } = useOxy();
+    const { openAccountDialog } = useOxy();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
-    // Tracks visibility of the web full-screen sign-in modal so we can show
-    // "Signing in..." while it's open. On native we open a bottom sheet whose
-    // visibility is owned by the sheet manager — no subscription needed.
+    // Tracks whether the unified account dialog is open so we can show
+    // "Signing in..." while it is. The manager reports visibility on every
+    // change regardless of platform or what opened/closed it.
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // Subscribe to web modal visibility only — bottom sheet manages its own state.
-    useEffect(() => {
-        if (Platform.OS !== 'web') return;
-        return subscribeToSignInModal(setIsModalOpen);
-    }, []);
+    useEffect(() => subscribeToSignInModal(setIsModalOpen), []);
 
-    // Handle button press
-    // - Web: full-screen modal (dialog UX fits desktop / browser)
-    // - Native: bottom sheet (sheet UX fits iOS/Android)
+    // Open the unified account dialog on its sign-in view (same surface on web +
+    // native), or defer to a caller-supplied handler.
     const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
-
-        if (Platform.OS === 'web') {
-            setIsModalOpen(true);
-            showSignInModal();
-        } else {
-            showBottomSheet?.('OxyAuth');
-        }
-    }, [onPress, showBottomSheet]);
+        openAccountDialog('signin');
+    }, [onPress, openAccountDialog]);
 
     const themedStyles = useMemo(() => StyleSheet.create({
         button: {

package/src/ui/components/ProfileButton.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import {
     View,
     Pressable,
@@ -14,21 +14,11 @@ import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useAuth } from '../hooks/useAuth';
+import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
-import ProfileMenu, { type ProfileMenuAnchor } from './ProfileMenu';
 
 const isWeb = Platform.OS === 'web';
 
-/**
- * Fixed popover width used by {@link ProfileMenu} on web. `ProfileButton`
- * mirrors this constant when computing the trigger-relative anchor so the
- * left-edge clamp keeps the panel fully on-screen. Keep the two in sync.
- */
-const MENU_WIDTH = 300;
-
-/** Gutter, in px, kept between the popover and the viewport edges on web. */
-const VIEWPORT_GUTTER = 8;
-
 /**
  * Web-only Bluesky-style hover animation timings, mirrored from
  * `social-app/src/view/shell/desktop/LeftNav.tsx`. The row background and the
@@ -67,23 +57,15 @@ export interface ProfileButtonProps {
      */
     avatarSize?: number;
     /** Navigate to the "Manage account" surface (settings). */
-    onNavigateManage: () => void;
+    onNavigateManage?: () => void;
     /** Start the add-account / sign-in flow for an additional account. */
-    onAddAccount: () => void;
+    onAddAccount?: () => void;
     /** Optional: navigate to the signed-in user's own profile. */
     onNavigateProfile?: () => void;
-    /** Called before the active identity changes so apps can clear scoped state. */
-    onBeforeSessionChange?: () => void | Promise<void>;
     /**
-     * Web-only popover direction relative to the trigger:
-     *  - `'up'` (default): the menu opens UPWARD, for a trigger placed at the
-     *    BOTTOM of a sidebar (the footer pattern). Pixel-identical to prior
-     *    behavior.
-     *  - `'down'`: the menu opens DOWNWARD, for a trigger placed at the TOP of a
-     *    sidebar (the accounts app pattern).
-     *  - `'auto'`: opens downward when there is more room below the trigger than
-     *    above, otherwise upward.
-     * Native (bottom-sheet) is unaffected — this only influences the web popover.
+     * Retained for source compatibility. The trigger now opens the unified
+     * `OxyAccountDialog` (a centered / bottom-sheet modal) rather than an
+     * anchored popover, so popover placement no longer applies.
      */
     placement?: 'up' | 'down' | 'auto';
     /**
@@ -98,36 +80,27 @@ export interface ProfileButtonProps {
 
 /**
  * Self-contained sidebar account trigger, modeled on Bluesky's ProfileCard and
- * the Oxy inbox's `MailboxDrawer` footer. Owns its own open state + anchor
- * measurement, and renders {@link ProfileMenu} (the device-account switcher).
+ * the Oxy inbox's `MailboxDrawer` footer. Pressing it opens the unified
+ * {@link OxyAccountDialog} — the single account switcher + sign-in surface — via
+ * `useOxy().openAccountDialog`.
  *
  * Three auth states from {@link useAuth}:
  *  - **Undetermined** (`!isAuthResolved || isPrivateApiPending`): a neutral
  *    avatar-sized skeleton circle, no press.
  *  - **Signed in**: a pressable row — Bloom `Avatar` + display name + `@handle`
- *    + an `unfold-more-horizontal` chevron. Press opens the menu upward (web)
- *    against the measured trigger, or as a bottom sheet (native).
- *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()`.
+ *    + a chevron. Press opens the dialog on its `accounts` view.
+ *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()` (which opens
+ *    the dialog on its `signin` view).
  *
  * Styling uses react-native `StyleSheet` + the Bloom theme (via `useTheme`) so
  * the layout renders identically in EVERY consumer — including apps that do not
  * use NativeWind (e.g. the accounts app). Only the web hover animation keeps
  * dynamic inline `style` (the CSS transition/transform values), which is what
  * the `react-native-web-style.d.ts` augmentation exists for.
- *
- * All display strings resolve through `@oxyhq/core`'s
- * `getAccountDisplayName` / `getAccountFallbackHandle` — no hand-rolled name
- * fallbacks. Avatars pass the bare file id as `source` + `variant="thumb"`, so
- * the app's registered `ImageResolver` builds the thumbnail URL.
  */
 const ProfileButton: React.FC<ProfileButtonProps> = ({
     expanded = true,
     avatarSize,
-    onNavigateManage,
-    onAddAccount,
-    onNavigateProfile,
-    onBeforeSessionChange,
-    placement = 'up',
     className,
     style,
 }) => {
@@ -138,76 +111,20 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         isPrivateApiPending,
         signIn,
     } = useAuth();
+    const { openAccountDialog } = useOxy();
     const { colors } = useTheme();
     const { t, locale } = useI18n();
 
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [anchor, setAnchor] = useState<ProfileMenuAnchor | null>(null);
-
     // Web-only hover/focus tracking for the Bluesky-style reveal animation.
     // Native has no hover, so these stay false and the row renders statically.
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
 
-    // Trigger ref for the web anchor measurement. RN-Web exposes `measure()` on
-    // host views, so we anchor the popover to the button rect and open upward.
-    const triggerRef = useRef<View | null>(null);
-
     const resolvedAvatarSize = avatarSize ?? (expanded ? 40 : 32);
 
-    const openMenu = useCallback(() => {
-        if (!isWeb) {
-            setAnchor(null);
-            setMenuOpen(true);
-            return;
-        }
-        const node = triggerRef.current;
-        if (!node || typeof node.measure !== 'function' || typeof window === 'undefined') {
-            setAnchor(null);
-            setMenuOpen(true);
-            return;
-        }
-        node.measure((_x, _y, _w, height, pageX, pageY) => {
-            if (typeof pageX !== 'number' || typeof pageY !== 'number') {
-                setAnchor(null);
-            } else {
-                // Clamp the panel's left edge inside the viewport gutter.
-                const maxLeft = Math.max(
-                    VIEWPORT_GUTTER,
-                    window.innerWidth - MENU_WIDTH - VIEWPORT_GUTTER,
-                );
-                const left = Math.min(Math.max(VIEWPORT_GUTTER, pageX), maxLeft);
-                // Bottom edge of the trigger in page coordinates. `height` is a
-                // number for host views; guard defensively for non-web shims.
-                const triggerBottom = pageY + (typeof height === 'number' ? height : 0);
-                // Resolve `'auto'` by comparing the room below the trigger with
-                // the room above it; pick whichever direction has more space.
-                const openDown =
-                    placement === 'down' ||
-                    (placement === 'auto' &&
-                        window.innerHeight - triggerBottom > pageY);
-                if (openDown) {
-                    // Anchor the panel's TOP edge just below the trigger bottom so
-                    // the menu opens downward from a top-of-sidebar trigger.
-                    const top = Math.max(VIEWPORT_GUTTER, triggerBottom + VIEWPORT_GUTTER);
-                    setAnchor({ left, top });
-                } else {
-                    // Anchor the panel's BOTTOM edge just above the trigger top so
-                    // the menu opens upward from this footer button.
-                    const bottom = Math.max(
-                        VIEWPORT_GUTTER,
-                        window.innerHeight - pageY + VIEWPORT_GUTTER,
-                    );
-                    setAnchor({ left, bottom });
-                }
-            }
-            setMenuOpen(true);
-        });
-    }, [placement]);
-
-    const handleClose = useCallback(() => {
-        setMenuOpen(false);
-    }, []);
+    const openDialog = useCallback(() => {
+        openAccountDialog('accounts');
+    }, [openAccountDialog]);
 
     // ── Undetermined: skeleton circle, no interaction. ──────────────────────
     if (!isAuthResolved || isPrivateApiPending) {
@@ -285,10 +202,10 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         />
     );
 
-    // `active` combines hover, keyboard focus, and menu-open — exactly like
-    // Bluesky's `state.hovered || state.focused || control.isOpen`. Only web
-    // ever sets `hovered`/`focused`, so on native this reduces to `menuOpen`.
-    const active = hovered || focused || menuOpen;
+    // `active` combines hover and keyboard focus — exactly like Bluesky's
+    // `state.hovered || state.focused`. Only web ever sets these, so on native
+    // the row renders statically.
+    const active = hovered || focused;
     const accountLabel = t('accountSwitcher.switchWhileSignedInAs', { name: displayName })
         || `Switch account, signed in as ${displayName}`;
 
@@ -318,24 +235,14 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         return (
             <View className={className} style={style}>
                 <Pressable
-                    ref={triggerRef}
                     style={[styles.collapsedTrigger, collapsedBgStyle]}
-                    onPress={openMenu}
+                    onPress={openDialog}
                     accessibilityRole="button"
                     accessibilityLabel={accountLabel}
                     {...webInteractionProps}
                 >
                     {avatarNode}
                 </Pressable>
-                <ProfileMenu
-                    open={menuOpen}
-                    onClose={handleClose}
-                    anchor={anchor}
-                    onNavigateManage={onNavigateManage}
-                    onAddAccount={onAddAccount}
-                    onNavigateProfile={onNavigateProfile}
-                    onBeforeSessionChange={onBeforeSessionChange}
-                />
             </View>
         );
     }
@@ -402,9 +309,8 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     return (
         <View className={className} style={[styles.fullWidth, style]}>
             <Pressable
-                ref={triggerRef}
                 style={[styles.row, styles.rowExpanded, rowStyle]}
-                onPress={openMenu}
+                onPress={openDialog}
                 accessibilityRole="button"
                 accessibilityLabel={accountLabel}
                 {...webInteractionProps}
@@ -434,15 +340,6 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                     />
                 </View>
             </Pressable>
-            <ProfileMenu
-                open={menuOpen}
-                onClose={handleClose}
-                anchor={anchor}
-                onNavigateManage={onNavigateManage}
-                onAddAccount={onAddAccount}
-                onNavigateProfile={onNavigateProfile}
-                onBeforeSessionChange={onBeforeSessionChange}
-            />
         </View>
     );
 };

package/src/ui/components/RequireOxyAuth.tsx

@@ -0,0 +1,266 @@
+/**
+ * RequireOxyAuth — the optional signed-out gate primitive (React Native).
+ *
+ * ONE shared way for any Oxy app to opt into a signed-out gate. It is entirely
+ * OPTIONAL: a public app renders its children untouched (`prompt="off"`); an
+ * auth-required app blocks them behind a signed-out state (`prompt="hard"`); an
+ * app that mostly works signed-out but wants a nudge shows a dismissible banner
+ * (`prompt="soft"`). Every mode reuses the ONE account dialog the provider
+ * already mounts — opening the sign-in surface is always
+ * `useOxy().openAccountDialog('signin')`; there is NO second dialog.
+ *
+ * Readiness gating (CRITICAL): the gate keys on the SDK's own readiness state
+ * (`useOxy().canUsePrivateApi` / `isPrivateApiPending`), NEVER on app-local
+ * hooks. While auth is still resolving (`isPrivateApiPending`) it renders a
+ * neutral loading state so the signed-out wall never flashes before the
+ * device-first cold boot concludes (the documented cold-boot race).
+ *
+ * Styling follows the sibling `OxyAccountDialog`/`OxySignInButton` pattern —
+ * `useTheme()` + `StyleSheet` (NOT NativeWind), so the gate renders correctly in
+ * EVERY consumer, including apps that do not run NativeWind (e.g. the accounts
+ * app).
+ */
+
+import type React from 'react';
+import { useState, type ReactNode } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Text } from '@oxyhq/bloom/typography';
+import { useOxy } from '../context/OxyContext';
+import { OxySignInButton } from './OxySignInButton';
+import OxyLogo from './OxyLogo';
+
+/**
+ * How `RequireOxyAuth` treats a signed-out (or still-resolving) session.
+ *  - `off`  — always render children (public app; a no-op provided for symmetry).
+ *  - `soft` — render children, plus a dismissible sign-in banner when signed out.
+ *  - `hard` — block children behind a centered signed-out state until signed in.
+ */
+export type RequireOxyAuthPrompt = 'off' | 'soft' | 'hard';
+
+export interface RequireOxyAuthProps {
+  children: ReactNode;
+  /** Gate behavior. @default 'hard' */
+  prompt?: RequireOxyAuthPrompt;
+  /** Replaces the neutral loading UI shown while auth is still resolving. */
+  loadingFallback?: ReactNode;
+  /** Replaces the entire default signed-out wall (`prompt="hard"`). */
+  signedOutFallback?: ReactNode;
+  /** Title for the default `prompt="hard"` wall. */
+  title?: string;
+  /** Subtitle for the default `prompt="hard"` wall. */
+  subtitle?: string;
+  /** Message for the `prompt="soft"` banner. */
+  bannerMessage?: string;
+  /** CTA label for the `prompt="soft"` banner. */
+  bannerActionLabel?: string;
+}
+
+const DEFAULT_TITLE = 'Sign in to continue';
+const DEFAULT_SUBTITLE = 'Sign in with your Oxy account to continue.';
+const DEFAULT_BANNER_MESSAGE = "You're browsing signed out.";
+const DEFAULT_BANNER_ACTION = 'Sign in';
+
+/**
+ * Optional signed-out gate. Wrap any subtree (or the whole app via the
+ * provider's `requireAuth` prop) to opt into a shared, readiness-safe wall.
+ */
+export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
+  children,
+  prompt = 'hard',
+  loadingFallback,
+  signedOutFallback,
+  title,
+  subtitle,
+  bannerMessage,
+  bannerActionLabel,
+}) => {
+  const { canUsePrivateApi, isPrivateApiPending, openAccountDialog } = useOxy();
+
+  // Public app: render straight through. Cheap enough to short-circuit before
+  // touching any gate UI.
+  if (prompt === 'off') {
+    return <>{children}</>;
+  }
+
+  // Signed in (and token ready): render the protected subtree in every mode.
+  if (canUsePrivateApi) {
+    return <>{children}</>;
+  }
+
+  if (prompt === 'soft') {
+    return (
+      <SoftGate
+        pending={isPrivateApiPending}
+        message={bannerMessage ?? DEFAULT_BANNER_MESSAGE}
+        actionLabel={bannerActionLabel ?? DEFAULT_BANNER_ACTION}
+        onSignIn={() => openAccountDialog('signin')}
+      >
+        {children}
+      </SoftGate>
+    );
+  }
+
+  // prompt === 'hard'
+  if (isPrivateApiPending) {
+    return loadingFallback ? <>{loadingFallback}</> : <NeutralLoading />;
+  }
+  if (signedOutFallback) {
+    return <>{signedOutFallback}</>;
+  }
+  return <HardWall title={title ?? DEFAULT_TITLE} subtitle={subtitle ?? DEFAULT_SUBTITLE} />;
+};
+
+// ---------------------------------------------------------------------------
+// Soft gate — children + a dismissible sign-in banner while signed out.
+// ---------------------------------------------------------------------------
+
+interface SoftGateProps {
+  children: ReactNode;
+  pending: boolean;
+  message: string;
+  actionLabel: string;
+  onSignIn: () => void;
+}
+
+const SoftGate: React.FC<SoftGateProps> = ({ children, pending, message, actionLabel, onSignIn }) => {
+  const theme = useTheme();
+  const [dismissed, setDismissed] = useState(false);
+
+  // Never surface the nudge while auth is still resolving — only once the boot
+  // has concluded signed out and the user has not dismissed it.
+  const showBanner = !pending && !dismissed;
+
+  return (
+    <View style={styles.softRoot}>
+      {showBanner ? (
+        <View style={[styles.banner, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
+          <OxyLogo variant="icon" size={20} fillColor={theme.colors.primary} />
+          <Text style={[styles.bannerText, { color: theme.colors.text }]} numberOfLines={2}>
+            {message}
+          </Text>
+          <Pressable
+            onPress={onSignIn}
+            style={[styles.bannerCta, { backgroundColor: theme.colors.primary }]}
+            accessibilityRole="button"
+            accessibilityLabel={actionLabel}
+          >
+            <Text style={styles.bannerCtaText}>{actionLabel}</Text>
+          </Pressable>
+          <Pressable
+            onPress={() => setDismissed(true)}
+            style={styles.bannerDismiss}
+            accessibilityRole="button"
+            accessibilityLabel="Dismiss"
+            hitSlop={8}
+          >
+            <Text style={[styles.bannerDismissText, { color: theme.colors.textSecondary }]}>✕</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      <View style={styles.softBody}>{children}</View>
+    </View>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Hard wall — centered signed-out state with the "Sign in with Oxy" CTA.
+// ---------------------------------------------------------------------------
+
+const HardWall: React.FC<{ title: string; subtitle: string }> = ({ title, subtitle }) => {
+  const theme = useTheme();
+  return (
+    <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
+      <View style={[styles.logoBadge, { backgroundColor: theme.colors.primarySubtle }]}>
+        <OxyLogo variant="icon" size={44} fillColor={theme.colors.primary} />
+      </View>
+      <Text style={[styles.wallTitle, { color: theme.colors.text }]}>{title}</Text>
+      <Text style={[styles.wallSubtitle, { color: theme.colors.textSecondary }]}>{subtitle}</Text>
+      <OxySignInButton variant="contained" style={styles.wallCta} />
+    </View>
+  );
+};
+
+const NeutralLoading: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
+      <ActivityIndicator color={theme.colors.primary} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  softRoot: {
+    flex: 1,
+  },
+  softBody: {
+    flex: 1,
+  },
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  bannerText: {
+    flex: 1,
+    fontSize: 13.5,
+  },
+  bannerCta: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 999,
+  },
+  bannerCtaText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  bannerDismiss: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bannerDismissText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  wallRoot: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 16,
+  },
+  logoBadge: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 4,
+  },
+  wallTitle: {
+    fontSize: 24,
+    fontWeight: '800',
+    letterSpacing: -0.4,
+    textAlign: 'center',
+  },
+  wallSubtitle: {
+    fontSize: 15,
+    lineHeight: 21,
+    textAlign: 'center',
+    maxWidth: 340,
+  },
+  wallCta: {
+    marginTop: 8,
+    width: '100%',
+    maxWidth: 320,
+  },
+});
+
+export default RequireOxyAuth;