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

__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)
+  })
+})