Linearize Send Flow

__tests__/components/screens/SendScreen/SendSearchContacts.test.tsx

@@ -1,12 +1,20 @@
 import { NavigationContainer, RouteProp } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import { screen, userEvent, waitFor } from "@testing-library/react-native";
+import {
+  act,
+  fireEvent,
+  screen,
+  userEvent,
+  waitFor,
+} from "@testing-library/react-native";
 import { SendSearchContacts } from "components/screens/SendScreen";
 import {
   RootStackParamList,
   SEND_PAYMENT_ROUTES,
   SendPaymentStackParamList,
 } from "config/routes";
+import { Account } from "config/types";
+import { useAuthenticationStore } from "ducks/auth";
 import * as sendDuck from "ducks/sendRecipient";
 import * as transactionSettingsDuck from "ducks/transactionSettings";
 import { renderWithProviders } from "helpers/testUtils";
@@ -48,6 +56,7 @@ const mockLoadRecentAddresses = jest.fn();
 const mockSearchAddress = jest.fn();
 const mockAddRecentAddress = jest.fn();
 const mockSetDestinationAddress = jest.fn();
+const mockPrepareForSearch = jest.fn();
 const mockReset = jest.fn();
 
 // Create mock data
@@ -78,7 +87,12 @@ const getSendStoreMock = (overrides = {}) =>
     searchAddress: mockSearchAddress,
     addRecentAddress: mockAddRecentAddress,
     setDestinationAddress: mockSetDestinationAddress,
+    prepareForSearch: mockPrepareForSearch,
     resetSendRecipient: mockReset,
+    isSearching: false,
+    isValidDestination: false,
+    isDestinationFunded: null,
+    destinationAddress: "",
     ...overrides,
   });
 
@@ -88,6 +102,7 @@ jest.mock("ducks/sendRecipient", () => ({
 
 const getTransactionSettingsStoreMock = (overrides = {}) => ({
   saveRecipientAddress: jest.fn(),
+  saveRecipientName: jest.fn(),
   saveSelectedCollectibleDetails: jest.fn(),
   selectedCollectibleDetails: { collectionAddress: "", tokenId: "" },
   selectedTokenId: "",
@@ -97,6 +112,7 @@ const getTransactionSettingsStoreMock = (overrides = {}) => ({
 jest.mock("ducks/transactionSettings", () => ({
   useTransactionSettingsStore: jest.fn().mockReturnValue({
     saveRecipientAddress: jest.fn(),
+    saveRecipientName: jest.fn(),
     saveSelectedCollectibleDetails: jest.fn(),
     selectedCollectibleDetails: { collectionAddress: "", tokenId: "" },
     selectedTokenId: "",
@@ -107,6 +123,10 @@ jest.mock("ducks/qrData", () => ({
   useQRDataStore: () => ({ clearQRData: jest.fn() }),
 }));
 
+jest.mock("ducks/auth", () => ({
+  useAuthenticationStore: jest.fn(),
+}));
+
 jest.mock("hooks/useInAppBrowser", () => ({
   useInAppBrowser: () => ({ open: jest.fn() }),
 }));
@@ -162,6 +182,7 @@ jest.mock("hooks/useAppTranslation", () => () => ({
       "sendPaymentScreen.recents": "Recent",
       "sendPaymentScreen.suggestions": "Suggestions",
       "common.paste": "Paste",
+      "sendSearchContacts.myWallets": "My Wallets",
       "sendSearchContacts.unfunded.title":
         "The destination account doesn't exist",
       "sendSearchContacts.unfunded.action":
@@ -172,6 +193,25 @@ jest.mock("hooks/useAppTranslation", () => () => ({
   },
 }));
 
+const mockUseAuthenticationStore =
+  useAuthenticationStore as jest.MockedFunction<typeof useAuthenticationStore>;
+
+const mockAccounts: Account[] = [
+  {
+    id: "wallet-1",
+    name: "My Second Wallet",
+    publicKey: "GBLS3IXAFSUWBSW3RXJMNXEGCHXEUL6VMBLFGVFPW47X2OL7BG7QQMUQ",
+  },
+  {
+    id: "wallet-2",
+    name: "Savings",
+    publicKey: "GACJYENHYW2LGHBNNGNZ4NCBGZYVTGTZM4CJLQIOQQ5IUZU3SYWOW5EK",
+  },
+];
+
+const activePublicKey =
+  "GDAS7BS4XKW27H2K5C25V6ZU46FCFGBTFQGFDZURAKVPA6QYQG4GTWBC";
+
 describe("SendSearchContacts", () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -182,6 +222,10 @@ describe("SendSearchContacts", () => {
         loadRecentAddresses: mockLoadRecentAddresses,
       }),
     );
+    mockUseAuthenticationStore.mockReturnValue({
+      allAccounts: mockAccounts,
+      account: { publicKey: activePublicKey } as any,
+    } as any);
   });
 
   it("renders correctly with the search input", async () => {
@@ -232,6 +276,8 @@ describe("SendSearchContacts", () => {
   });
 
   it("shows search suggestions when text is entered", async () => {
+    jest.useFakeTimers();
+
     // Setup the mock to return search results for this specific test
     jest.spyOn(sendDuck, "useSendRecipientStore").mockImplementation(
       getSendStoreMock({
@@ -248,11 +294,68 @@ describe("SendSearchContacts", () => {
     );
 
     const input = await screen.findByPlaceholderText("Enter address");
-    await userEvent.type(input, "test");
+    fireEvent.changeText(input, "test");
+
+    expect(mockPrepareForSearch).toHaveBeenCalled();
+    expect(mockSearchAddress).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.runAllTimers();
+    });
 
     await waitFor(() => {
       expect(mockSearchAddress).toHaveBeenCalledWith("test");
     });
+
+    jest.useRealTimers();
+  });
+
+  it("keeps recents and wallets visible while typing an invalid address", async () => {
+    jest.spyOn(sendDuck, "useSendRecipientStore").mockImplementation(
+      getSendStoreMock({
+        searchResults: mockSearchResults,
+        recentAddresses: mockRecentAddresses,
+        loadRecentAddresses: mockLoadRecentAddresses,
+        isValidDestination: false,
+      }),
+    );
+
+    renderWithProviders(
+      <NavigationContainer>
+        <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+      </NavigationContainer>,
+    );
+
+    const input = await screen.findByPlaceholderText("Enter address");
+    await userEvent.type(input, "GABC");
+
+    await waitFor(() => {
+      expect(screen.getByText("Recent Contact")).toBeTruthy();
+      expect(screen.getByText("My Second Wallet")).toBeTruthy();
+    });
+  });
+
+  it("hides recents and wallets once a valid destination is found", async () => {
+    jest.spyOn(sendDuck, "useSendRecipientStore").mockImplementation(
+      getSendStoreMock({
+        searchResults: mockSearchResults,
+        recentAddresses: mockRecentAddresses,
+        loadRecentAddresses: mockLoadRecentAddresses,
+        isValidDestination: true,
+      }),
+    );
+
+    renderWithProviders(
+      <NavigationContainer>
+        <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+      </NavigationContainer>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText("Recent Contact")).toBeNull();
+      expect(screen.queryByText("My Second Wallet")).toBeNull();
+      expect(screen.getByText("Search Result")).toBeTruthy();
+    });
   });
 
   describe("unfunded destination notification", () => {
@@ -394,4 +497,105 @@ describe("SendSearchContacts", () => {
       expect(screen.queryByText(unfundedTitle)).toBeNull();
     });
   });
+
+  describe("My Wallets section", () => {
+    beforeEach(() => {
+      jest.spyOn(sendDuck, "useSendRecipientStore").mockImplementation(
+        getSendStoreMock({
+          recentAddresses: [],
+          loadRecentAddresses: mockLoadRecentAddresses,
+        }),
+      );
+      mockUseAuthenticationStore.mockReturnValue({
+        allAccounts: mockAccounts,
+        account: { publicKey: activePublicKey } as any,
+      } as any);
+    });
+
+    it("renders rows for wallets other than active account", async () => {
+      renderWithProviders(
+        <NavigationContainer>
+          <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+        </NavigationContainer>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("My Second Wallet")).toBeTruthy();
+        expect(screen.getByText("Savings")).toBeTruthy();
+      });
+    });
+
+    it("does not render active account row", async () => {
+      mockUseAuthenticationStore.mockReturnValue({
+        allAccounts: [
+          ...mockAccounts,
+          { id: "active", name: "Active Wallet", publicKey: activePublicKey },
+        ],
+        account: { publicKey: activePublicKey } as any,
+      } as any);
+
+      renderWithProviders(
+        <NavigationContainer>
+          <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+        </NavigationContainer>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("My Second Wallet")).toBeTruthy();
+      });
+      expect(screen.queryByText("Active Wallet")).toBeNull();
+    });
+
+    it("sets destination address when wallet row is tapped", async () => {
+      renderWithProviders(
+        <NavigationContainer>
+          <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+        </NavigationContainer>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("My Second Wallet")).toBeTruthy();
+      });
+
+      await userEvent.press(screen.getByTestId("my-wallet-row-wallet-1"));
+
+      await waitFor(() => {
+        expect(mockSetDestinationAddress).toHaveBeenCalledWith(
+          "GBLS3IXAFSUWBSW3RXJMNXEGCHXEUL6VMBLFGVFPW47X2OL7BG7QQMUQ",
+        );
+      });
+    });
+
+    it("shows My Wallets header when other accounts exist", async () => {
+      renderWithProviders(
+        <NavigationContainer>
+          <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+        </NavigationContainer>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("My Wallets")).toBeTruthy();
+      });
+    });
+
+    it("hides My Wallets section when there are no other accounts", async () => {
+      mockUseAuthenticationStore.mockReturnValue({
+        allAccounts: [
+          { id: "active", name: "Active Wallet", publicKey: activePublicKey },
+        ],
+        account: { publicKey: activePublicKey } as any,
+      } as any);
+
+      renderWithProviders(
+        <NavigationContainer>
+          <SendSearchContacts navigation={mockNavigation} route={mockRoute} />
+        </NavigationContainer>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText("Enter address")).toBeTruthy();
+      });
+      expect(screen.queryByText("My Wallets")).toBeNull();
+    });
+  });
 });

__tests__/components/screens/SendScreen/components/RecentContactsList.test.tsx

@@ -22,8 +22,8 @@ jest.mock("hooks/useColors", () => ({
   __esModule: true,
   default: () => ({
     themeColors: {
-      foreground: {
-        primary: "#000000",
+      text: {
+        secondary: "#000000",
       },
     },
   }),

__tests__/components/screens/SendScreen/components/SendReviewBottomSheet.test.tsx

@@ -32,6 +32,7 @@ jest.mock("ducks/transactionSettings", () => ({
   useTransactionSettingsStore: jest.fn(() => ({
     recipientAddress:
       "GA6SXIZIKLJHCZI2KEOBEUUOFMM4JUPPM2UTWX6STAWT25JWIEUFIMFF",
+    recipientName: "",
     memo: "",
     isMemoRequired: false,
     transactionFee: "0.00001",
@@ -83,6 +84,15 @@ describe("SendReviewBottomSheet", () => {
 
       expect(getByText("Test Account")).toBeTruthy();
     });
+
+    it("displays recipient name above the truncated address when provided", () => {
+      const { getByText } = renderWithProviders(
+        <SendReviewBottomSheet {...defaultProps} recipientName="Account 2" />,
+      );
+
+      expect(getByText("Account 2")).toBeTruthy();
+      expect(getByText("GA6S...IMFF")).toBeTruthy();
+    });
   });
 
   describe("Security banner states", () => {