feat: Nostr Wallet Connect screens

__tests__/components/animations/dashed-line-flow.spec.ts

@@ -0,0 +1,41 @@
+import { renderHook } from "@testing-library/react-native"
+
+import { useDashedLineFlow } from "@app/components/animations/dashed-line-flow"
+
+jest.mock("react-native-reanimated", () => ({
+  __esModule: true,
+  default: {},
+  useSharedValue: (initial: number) => ({ value: initial }),
+  useAnimatedProps: (factory: () => Record<string, number>) => factory(),
+  withRepeat: jest.fn(),
+  withTiming: jest.fn(),
+  Easing: { linear: "linear" },
+}))
+
+describe("useDashedLineFlow", () => {
+  it("returns dashArray with default values '5 5'", () => {
+    const { result } = renderHook(() => useDashedLineFlow())
+
+    expect(result.current.dashArray).toBe("5 5")
+  })
+
+  it("returns custom dashArray when params are provided", () => {
+    const { result } = renderHook(() =>
+      useDashedLineFlow({ dashLength: 10, gapLength: 3 }),
+    )
+
+    expect(result.current.dashArray).toBe("10 3")
+  })
+
+  it("returns animatedProps", () => {
+    const { result } = renderHook(() => useDashedLineFlow())
+
+    expect(result.current.animatedProps).toBeDefined()
+  })
+
+  it("returns animatedProps with strokeDashoffset", () => {
+    const { result } = renderHook(() => useDashedLineFlow())
+
+    expect(result.current.animatedProps).toEqual({ strokeDashoffset: 0 })
+  })
+})

__tests__/components/icon-hero.spec.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { render } from "@testing-library/react-native"
+import { loadLocale } from "@app/i18n/i18n-util.sync"
+
+import { IconHero } from "@app/components/icon-hero"
+import { ContextForScreen } from "../screens/helper"
+
+loadLocale("en")
+
+describe("IconHero", () => {
+  it("renders the title", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <IconHero icon="nostr-wallet-connect" title="Test Title" />
+      </ContextForScreen>,
+    )
+
+    expect(getByText("Test Title")).toBeTruthy()
+  })
+
+  it("renders subtitle when provided", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <IconHero icon="nostr-wallet-connect" title="Title" subtitle="Sub text" />
+      </ContextForScreen>,
+    )
+
+    expect(getByText("Title")).toBeTruthy()
+    expect(getByText("Sub text")).toBeTruthy()
+  })
+
+  it("does not render subtitle when not provided", async () => {
+    const { getByText, queryByText } = render(
+      <ContextForScreen>
+        <IconHero icon="nostr-wallet-connect" title="Only Title" />
+      </ContextForScreen>,
+    )
+
+    expect(getByText("Only Title")).toBeTruthy()
+    expect(queryByText("Sub text")).toBeNull()
+  })
+})

__tests__/screens/nostr-wallet-connect/connected-apps-list-screen.spec.tsx

@@ -0,0 +1,208 @@
+import React from "react"
+import { render, fireEvent, act } from "@testing-library/react-native"
+import { loadLocale } from "@app/i18n/i18n-util.sync"
+import { i18nObject } from "@app/i18n/i18n-util"
+
+import { NwcConnectedAppsListScreen } from "@app/screens/nostr-wallet-connect/connected-apps-list-screen"
+import { ContextForScreen } from "../helper"
+
+loadLocale("en")
+const LL = i18nObject("en")
+
+const mockNavigate = jest.fn()
+const mockReplace = jest.fn()
+
+jest.mock("@react-navigation/native", () => {
+  const actualNav = jest.requireActual("@react-navigation/native")
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      replace: mockReplace,
+    }),
+  }
+})
+
+const mockRemoveConnection = jest.fn()
+const mockConnections = [
+  {
+    id: "conn-1",
+    appName: "Amethyst",
+    dailyBudgetSats: 10_000,
+    connectionString: "nostr+walletconnect://abc",
+    createdAt: 1700000000000,
+  },
+  {
+    id: "conn-2",
+    appName: "Damus",
+    dailyBudgetSats: 1_000,
+    connectionString: "nostr+walletconnect://xyz",
+    createdAt: 1700000001000,
+  },
+]
+
+jest.mock("@app/screens/nostr-wallet-connect/hooks", () => ({
+  useNwcConnections: () => ({
+    connections: mockConnections,
+    removeConnection: mockRemoveConnection,
+    hasConnections: true,
+  }),
+}))
+
+jest.mock("@app/hooks/use-display-currency", () => ({
+  useDisplayCurrency: () => ({
+    formatMoneyAmount: ({ moneyAmount }: { moneyAmount: { amount: number } }) =>
+      `${moneyAmount.amount} SAT`,
+  }),
+}))
+
+jest.mock("@app/components/custom-modal/custom-modal", () => ({
+  __esModule: true,
+  default: ({
+    isVisible,
+    title,
+    body,
+    primaryButtonTitle,
+    primaryButtonOnPress,
+    secondaryButtonTitle,
+    secondaryButtonOnPress,
+  }: {
+    isVisible: boolean
+    title: string
+    body: React.ReactNode
+    primaryButtonTitle: string
+    primaryButtonOnPress: () => void
+    secondaryButtonTitle: string
+    secondaryButtonOnPress: () => void
+  }) => {
+    const { Text, View, Pressable } = jest.requireActual("react-native")
+    if (!isVisible) return null
+    return (
+      <View testID="delete-modal">
+        <Text>{title}</Text>
+        {body}
+        <Pressable onPress={primaryButtonOnPress}>
+          <Text>{primaryButtonTitle}</Text>
+        </Pressable>
+        <Pressable onPress={secondaryButtonOnPress} testID="confirm-delete">
+          <Text>{secondaryButtonTitle}</Text>
+        </Pressable>
+      </View>
+    )
+  },
+}))
+
+describe("NwcConnectedAppsListScreen", () => {
+  beforeEach(() => {
+    loadLocale("en")
+    jest.clearAllMocks()
+  })
+
+  it("renders connection cards", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    expect(getByText("Amethyst")).toBeTruthy()
+    expect(getByText("Damus")).toBeTruthy()
+  })
+
+  it("renders budget for each connection", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    expect(getByText(LL.NostrWalletConnect.budget({ amount: "10000 SAT" }))).toBeTruthy()
+    expect(getByText(LL.NostrWalletConnect.budget({ amount: "1000 SAT" }))).toBeTruthy()
+  })
+
+  it("shows delete modal on close icon press", async () => {
+    const { getByText, queryByTestId, getAllByTestId } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    expect(queryByTestId("delete-modal")).toBeNull()
+
+    const closeIcons = getAllByTestId("icon-close")
+    await act(async () => {
+      fireEvent.press(closeIcons[0])
+    })
+
+    expect(getByText(LL.NostrWalletConnect.deleteConfirmTitle())).toBeTruthy()
+  })
+
+  it("removes connection on confirm delete", async () => {
+    const { getByTestId, getAllByTestId } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    const closeIcons = getAllByTestId("icon-close")
+    await act(async () => {
+      fireEvent.press(closeIcons[0])
+    })
+
+    const confirmButton = getByTestId("confirm-delete")
+    await act(async () => {
+      fireEvent.press(confirmButton)
+    })
+
+    expect(mockRemoveConnection).toHaveBeenCalledWith("conn-1")
+  })
+
+  it("renders threshold field", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    expect(getByText(LL.NostrWalletConnect.doNotNotifyBelow())).toBeTruthy()
+  })
+
+  it("renders the new connection button", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    expect(getByText(LL.NostrWalletConnect.newConnection())).toBeTruthy()
+  })
+
+  it("navigates to nwcNewConnection on new connection press", async () => {
+    const { getByText } = render(
+      <ContextForScreen>
+        <NwcConnectedAppsListScreen />
+      </ContextForScreen>,
+    )
+
+    await act(async () => {})
+
+    const button = getByText(LL.NostrWalletConnect.newConnection())
+    await act(async () => {
+      fireEvent.press(button)
+    })
+
+    expect(mockNavigate).toHaveBeenCalledWith("nwcNewConnection")
+  })
+})