feat(spark): account migration to non-custodial UI screens (#3742)

## Summary

Implements the UI screens for the **Custodial → Non-custodial** migration flow as described in [#636](blinkbitcoin/blink-wip#636). This is a UI-only implementation — backend integration is tracked separately.

### Screens implemented

| Ticket requirement | Status |
|---|---|
| **Settings entry point** — "Move to non-custodial" row in Account section | Done |
| **Explainer screen** — Key icon, title, numbered list with "learn more" link, "Let's move" CTA | Done |
| **Backup method selection** — Already exists in parent branch (ticket #572) | Reused |
| **Transferring funds screen** — Clock icon with warning background, auto-redirects to success after transfer | Done |
| **Welcome success screen** — Already exists in parent branch | Reused |
| **Flow checkpoints** — Resume migration from last visited step when user exits and returns | Done |

### New components

- **StatusScreenLayout** (`app/components/status-screen-layout/`) — Generic centered layout with icon + text for loading/status screens. Accepts optional `iconBackgroundColor` for themed icon circles.
- **MigrationExplainerLayout** (`app/screens/account-migration/migration-explainer-layout.tsx`) — Reusable layout for explainer screens with icon, title, numbered steps list, and CTA button.
- **NumberedStepsList** (`app/components/numbered-steps-list/`) — Reusable numbered list component extracted from MigrationExplainerLayout.
- **useMigrationCheckpoint** (`app/screens/account-migration/hooks/`) — Thin React wrapper around a pure persistence module (`migration-checkpoint-storage.ts`). Persists flow progress in AsyncStorage with a **uniform 48-hour expiration** for all checkpoint steps. Validates stored data on load, clears expired/corrupt checkpoints, and includes unmount-race protection.
- **migration-checkpoint-storage** (`app/screens/account-migration/utils/`) — Pure module (no React) for checkpoint persistence: load, save, clear, validate, expiration check, and route resolution. Environment-namespaced storage keys. iOS-aware route fallback for CloudBackup.
- **openExternalUrl** (`app/utils/external.ts`) — Shared helper: InAppBrowser with Linking fallback. Replaces duplicate patterns in explainer and backup-phrase screens.

### Theme additions

- `_warningLight: "#FFF9E5"` — Static color for warning/loading icon backgrounds
- `ClockIcon` registered in GaloyIcon

### Navigation flow

```
Settings → "Move to non-custodial"
  → Explainer (or resume from checkpoint)
    → "Let's move" → Backup method → ... backup flow ...
      → If user has funds → Transferring funds screen (2s mock) → Success
      → If no funds → Success directly
```

### Checkpoint system

- Saves current step to AsyncStorage on each screen mount
- Settings entry reads checkpoint and navigates to last visited screen
- **All checkpoints expire after 48 hours**
- Storage key namespaced by environment (staging/mainnet/signet)
- iOS CloudBackup checkpoint falls back to explainer (cloud backup not yet available on iOS)
- Cleared on successful completion
- Graceful handling of corrupt/missing storage data

### i18n

- `AccountMigration` namespace with 8 keys translated across all 28 languages
- All translations use proper diacritical marks

### Existing component improvements

- **IconHero** — Removed fixed `width: 264` to respect parent padding
- **StatusScreenLayout** — Always wraps icon in circle View (default transparent background), removed conditional branch

### Test coverage

- 50+ tests across 8 suites
- Checkpoint storage module: 23 tests (validation, 48h expiration boundary, route resolution with iOS fallback, load with rejection/corrupt data, environment-namespaced keys)
- Checkpoint hook: 9 tests (load, save, clear, route resolution, unmount race, save→unmount→remount→resume integration)
- MigrationExplainerLayout: 5 tests
- Explainer screen: 5 tests
- Transferring funds screen: 3 tests
- Settings row: 1 test
- StatusScreenLayout: 3 tests
- Backup screens: saveCheckpoint assertions on mount

Author: esaugomez31

__tests__/components/status-screen-layout.spec.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Text } from "react-native"
+import { render, screen } from "@testing-library/react-native"
+
+import { StatusScreenLayout } from "@app/components/status-screen-layout"
+import { ContextForScreen } from "../screens/helper"
+
+jest.mock("@app/components/atomic/galoy-icon", () => ({
+  GaloyIcon: ({ name }: { name: string }) => {
+    const { Text } = jest.requireActual("react-native")
+    return <Text testID="galoy-icon">{name}</Text>
+  },
+}))
+
+describe("StatusScreenLayout", () => {
+  it("renders icon and children", () => {
+    render(
+      <ContextForScreen>
+        <StatusScreenLayout icon="clock" iconBackgroundColor="#FFF9E5">
+          <Text>Loading message</Text>
+        </StatusScreenLayout>
+      </ContextForScreen>,
+    )
+
+    expect(screen.getByText("Loading message")).toBeTruthy()
+    expect(screen.getByTestId("galoy-icon")).toBeTruthy()
+  })
+
+  it("renders without icon background when not provided", () => {
+    render(
+      <ContextForScreen>
+        <StatusScreenLayout icon="payment-success">
+          <Text>Success</Text>
+        </StatusScreenLayout>
+      </ContextForScreen>,
+    )
+
+    expect(screen.getByText("Success")).toBeTruthy()
+  })
+
+  it("renders footer when provided", () => {
+    render(
+      <ContextForScreen>
+        <StatusScreenLayout
+          icon="clock"
+          iconBackgroundColor="#FFF9E5"
+          footer={<Text>Footer</Text>}
+        >
+          <Text>Content</Text>
+        </StatusScreenLayout>
+      </ContextForScreen>,
+    )
+
+    expect(screen.getByText("Footer")).toBeTruthy()
+  })
+})

__tests__/screens/account-migration/hooks/use-migration-checkpoint.spec.ts

@@ -0,0 +1,176 @@
+import { renderHook, act, waitFor } from "@testing-library/react-native"
+
+import {
+  useMigrationCheckpoint,
+  MigrationCheckpoint,
+} from "@app/screens/account-migration/hooks"
+
+const mockLoadCheckpoint = jest.fn()
+const mockSaveCheckpointToStorage = jest.fn()
+const mockClearCheckpointFromStorage = jest.fn()
+
+jest.mock("@app/screens/account-migration/utils/migration-checkpoint-storage", () => ({
+  ...jest.requireActual(
+    "@app/screens/account-migration/utils/migration-checkpoint-storage",
+  ),
+  loadCheckpoint: (...args: readonly unknown[]) => mockLoadCheckpoint(...args),
+  saveCheckpointToStorage: (...args: readonly unknown[]) =>
+    mockSaveCheckpointToStorage(...args),
+  clearCheckpointFromStorage: (...args: readonly unknown[]) =>
+    mockClearCheckpointFromStorage(...args),
+  getStorageKey: (env: string) => `migrationCheckpoint_${env.toLowerCase()}`,
+}))
+
+jest.mock("@app/hooks/use-app-config", () => ({
+  useAppConfig: () => ({
+    appConfig: { galoyInstance: { name: "Main" } },
+  }),
+}))
+
+describe("useMigrationCheckpoint", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockLoadCheckpoint.mockResolvedValue(null)
+    mockSaveCheckpointToStorage.mockResolvedValue(undefined)
+    mockClearCheckpointFromStorage.mockResolvedValue(undefined)
+  })
+
+  it("starts with null checkpoint and loading true", async () => {
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    expect(result.current.loading).toBe(true)
+    expect(result.current.checkpoint).toBeNull()
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+  })
+
+  it("loads existing checkpoint from storage", async () => {
+    mockLoadCheckpoint.mockResolvedValue({
+      step: MigrationCheckpoint.BackupAlerts,
+      savedAt: Date.now(),
+    })
+
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+    expect(result.current.checkpoint).toBe(MigrationCheckpoint.BackupAlerts)
+  })
+
+  it("sets loading false when no checkpoint found", async () => {
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+    expect(result.current.checkpoint).toBeNull()
+  })
+
+  it("saves checkpoint to storage", async () => {
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    act(() => {
+      result.current.saveCheckpoint(MigrationCheckpoint.BackupMethod)
+    })
+
+    expect(result.current.checkpoint).toBe(MigrationCheckpoint.BackupMethod)
+    expect(mockSaveCheckpointToStorage).toHaveBeenCalledWith(
+      "migrationCheckpoint_main",
+      MigrationCheckpoint.BackupMethod,
+    )
+  })
+
+  it("clears checkpoint from storage", async () => {
+    mockLoadCheckpoint.mockResolvedValue({
+      step: MigrationCheckpoint.BackupMethod,
+      savedAt: Date.now(),
+    })
+
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    act(() => {
+      result.current.clearCheckpoint()
+    })
+
+    expect(result.current.checkpoint).toBeNull()
+    expect(mockClearCheckpointFromStorage).toHaveBeenCalledWith(
+      "migrationCheckpoint_main",
+    )
+  })
+
+  it("returns default route when no checkpoint", async () => {
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.getRouteForCheckpoint()).toBe("sparkMigrationExplainer")
+  })
+
+  it("returns correct route for checkpoint", async () => {
+    mockLoadCheckpoint.mockResolvedValue({
+      step: MigrationCheckpoint.BackupMethod,
+      savedAt: Date.now(),
+    })
+
+    const { result } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.getRouteForCheckpoint()).toBe("sparkBackupMethodScreen")
+  })
+
+  it("resumes from checkpoint after unmount and remount", async () => {
+    mockLoadCheckpoint.mockResolvedValue(null)
+
+    const { result, unmount } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    act(() => {
+      result.current.saveCheckpoint(MigrationCheckpoint.BackupAlerts)
+    })
+
+    expect(result.current.checkpoint).toBe(MigrationCheckpoint.BackupAlerts)
+    expect(mockSaveCheckpointToStorage).toHaveBeenCalledWith(
+      "migrationCheckpoint_main",
+      MigrationCheckpoint.BackupAlerts,
+    )
+
+    unmount()
+
+    mockLoadCheckpoint.mockResolvedValue({
+      step: MigrationCheckpoint.BackupAlerts,
+      savedAt: Date.now(),
+    })
+
+    const { result: result2 } = renderHook(() => useMigrationCheckpoint())
+
+    await waitFor(() => expect(result2.current.loading).toBe(false))
+
+    expect(result2.current.checkpoint).toBe(MigrationCheckpoint.BackupAlerts)
+    expect(result2.current.getRouteForCheckpoint()).toBe("sparkBackupAlertsScreen")
+  })
+
+  it("does not update state after unmount", async () => {
+    let resolveLoad: (value: null) => void
+    mockLoadCheckpoint.mockReturnValue(
+      new Promise((resolve) => {
+        resolveLoad = resolve
+      }),
+    )
+
+    const { result, unmount } = renderHook(() => useMigrationCheckpoint())
+
+    expect(result.current.loading).toBe(true)
+    unmount()
+
+    await act(async () => {
+      resolveLoad!(null)
+    })
+  })
+})

__tests__/screens/account-migration/migration-explainer-layout.spec.tsx

@@ -0,0 +1,96 @@
+import React from "react"
+import { render, fireEvent } from "@testing-library/react-native"
+import { Pressable, Text } from "react-native"
+
+import { MigrationExplainerLayout } from "@app/screens/account-migration/migration-explainer-layout"
+import { ContextForScreen } from "../helper"
+
+jest.mock("@app/components/icon-hero", () => ({
+  IconHero: ({ title }: { title: string }) => {
+    const { Text: RNText } = jest.requireActual("react-native")
+    return <RNText>{title}</RNText>
+  },
+}))
+
+jest.mock("@app/components/atomic/galoy-primary-button", () => ({
+  GaloyPrimaryButton: ({ title, onPress }: { title: string; onPress: () => void }) => (
+    <Pressable testID="cta-button" onPress={onPress}>
+      <Text>{title}</Text>
+    </Pressable>
+  ),
+}))
+
+jest.mock("@app/components/screen", () => ({
+  Screen: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+describe("MigrationExplainerLayout", () => {
+  const mockOnCtaPress = jest.fn()
+
+  const defaultProps = {
+    icon: "key-outline" as const,
+    iconColor: "#999",
+    title: "Test Title",
+    steps: [
+      <Text key="1">Step one</Text>,
+      <Text key="2">Step two</Text>,
+      <Text key="3">Step three</Text>,
+    ],
+    ctaTitle: "Continue",
+    onCtaPress: mockOnCtaPress,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("renders title", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <MigrationExplainerLayout {...defaultProps} />
+      </ContextForScreen>,
+    )
+    expect(getByText("Test Title")).toBeTruthy()
+  })
+
+  it("renders all steps", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <MigrationExplainerLayout {...defaultProps} />
+      </ContextForScreen>,
+    )
+    expect(getByText("Step one")).toBeTruthy()
+    expect(getByText("Step two")).toBeTruthy()
+    expect(getByText("Step three")).toBeTruthy()
+  })
+
+  it("renders step numbers", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <MigrationExplainerLayout {...defaultProps} />
+      </ContextForScreen>,
+    )
+    expect(getByText("1.")).toBeTruthy()
+    expect(getByText("2.")).toBeTruthy()
+    expect(getByText("3.")).toBeTruthy()
+  })
+
+  it("renders CTA button with title", () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <MigrationExplainerLayout {...defaultProps} />
+      </ContextForScreen>,
+    )
+    expect(getByText("Continue")).toBeTruthy()
+  })
+
+  it("calls onCtaPress when button pressed", () => {
+    const { getByTestId } = render(
+      <ContextForScreen>
+        <MigrationExplainerLayout {...defaultProps} />
+      </ContextForScreen>,
+    )
+    fireEvent.press(getByTestId("cta-button"))
+    expect(mockOnCtaPress).toHaveBeenCalledTimes(1)
+  })
+})