Fix menu for having both verified & unverified accounts

apps/web/src/components/Menu/Menu.test.tsx

@@ -152,11 +152,115 @@ describe("<Menu />", () => {
 
       expect(screen.getByText("Advanced")).toBeVisible();
       expect(screen.queryByText("Address Book")).not.toBeInTheDocument();
-      expect(screen.queryByText("Add Account")).not.toBeInTheDocument();
+      expect(screen.queryByText("Add Account")).toBeVisible();
       expect(screen.queryByText("Save Backup")).not.toBeInTheDocument();
       expect(screen.queryByText("Apps")).not.toBeInTheDocument();
       expect(screen.getByText("Light mode")).toBeVisible();
       expect(screen.getByText("Logout")).toBeVisible();
     });
+
+    it("opens Add Account modal when Add Account button is clicked", async () => {
+      const { openWith } = dynamicModalContextMock;
+      const user = userEvent.setup();
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText("Add Account"));
+
+      expect(openWith).toHaveBeenCalledWith(<OnboardOptionsModal />);
+    });
+  });
+
+  describe.each([
+    { selectedAccount: "verified", isVerifiedSelected: true },
+    { selectedAccount: "unverified", isVerifiedSelected: false },
+  ])("when user has both and %selectedAccount account selected, ", ({ isVerifiedSelected }) => {
+    const unverifiedAccount = mockImplicitAccount(1);
+
+    beforeEach(() => {
+      addTestAccount(store, unverifiedAccount);
+      store.dispatch(
+        accountsActions.setIsVerified({
+          pkh: unverifiedAccount.address.pkh,
+          isVerified: false,
+        })
+      );
+      if (isVerifiedSelected) {
+        store.dispatch(accountsActions.setCurrent(account.address.pkh));
+      } else {
+        store.dispatch(accountsActions.setCurrent(unverifiedAccount.address.pkh));
+      }
+    });
+
+    it("renders menu items correctly", async () => {
+      await renderInDrawer(<Menu />, store);
+
+      expect(screen.getByText("Advanced")).toBeVisible();
+      expect(screen.getByText("Address Book")).toBeVisible();
+      expect(screen.getByText("Add Account")).toBeVisible();
+      expect(screen.getByText("Save Backup")).toBeVisible();
+      expect(screen.getByText("Apps")).toBeVisible();
+      expect(screen.getByText("Light mode")).toBeVisible();
+      expect(screen.getByText("Logout")).toBeVisible();
+    });
+
+    it.each([
+      ["Advanced", AdvancedMenu],
+      ["Address Book", AddressBookMenu],
+      ["Apps", AppsMenu],
+    ])("opens %label menu correctly", async (label, Component) => {
+      const user = userEvent.setup();
+      const { openWith } = dynamicDrawerContextMock;
+      jest.spyOn(walletKit, "getActiveSessions").mockImplementation(() => ({}));
+
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText(label));
+      expect(openWith).toHaveBeenCalledWith(<Component />);
+    });
+
+    it("opens Logout menu correctly", async () => {
+      const user = userEvent.setup();
+      const { openWith } = dynamicModalContextMock;
+
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText("Logout"));
+      expect(openWith).toHaveBeenCalledWith(<LogoutModal />);
+    });
+
+    it("calls downloadBackupFile function when Save Backup is clicked", async () => {
+      const user = userEvent.setup();
+      const mockDownloadBackupFile = jest.fn();
+      jest.mocked(useDownloadBackupFile).mockReturnValue(mockDownloadBackupFile);
+
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText("Save Backup"));
+
+      await user.type(screen.getByLabelText("Set Password"), password);
+      await user.type(screen.getByLabelText("Confirm Password"), password);
+      await user.click(screen.getByRole("button", { name: "Save Backup" }));
+
+      expect(mockDownloadBackupFile).toHaveBeenCalled();
+    });
+
+    it("calls toggleColorMode function when Light mode is clicked", async () => {
+      const user = userEvent.setup();
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText("Light mode"));
+
+      expect(useColorMode().toggleColorMode).toHaveBeenCalled();
+    });
+
+    it("opens Add Account modal when Add Account button is clicked", async () => {
+      const { openWith } = dynamicModalContextMock;
+      const user = userEvent.setup();
+      await renderInDrawer(<Menu />, store);
+
+      await user.click(screen.getByText("Add Account"));
+
+      expect(openWith).toHaveBeenCalledWith(<OnboardOptionsModal />);
+    });
   });
 });

apps/web/src/components/Menu/Menu.tsx

@@ -18,68 +18,68 @@ import {
   UserPlusIcon,
 } from "../../assets/icons";
 import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
-import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
+import { useHasVerifiedAccounts } from "../Onboarding/VerificationFlow";
 
 export const Menu = () => {
   const { openWith: openModal } = useDynamicModalContext();
   const { openWith: openDrawer } = useDynamicDrawerContext();
   const { colorMode, toggleColorMode } = useColorMode();
-  const isVerified = useIsAccountVerified();
+  const hasVerified = useHasVerifiedAccounts();
   const saveBackup = useSaveBackup();
 
   const colorModeSwitchLabel = colorMode === "light" ? "Light mode" : "Dark mode";
 
-  const menuItemsForVerifiedUser = [
-    {
-      label: "Address Book",
-      icon: <BookIcon />,
-      onClick: () => openDrawer(<AddressBookMenu />),
-      hasArrow: true,
-    },
-    {
-      label: "Add Account",
-      icon: <UserPlusIcon />,
-      onClick: () => openModal(<OnboardOptionsModal />),
-    },
-    {
-      label: "Save Backup",
-      icon: <DownloadIcon />,
-      onClick: saveBackup,
-    },
+  const advanced = {
+    label: "Advanced",
+    icon: <SettingsIcon />,
+    onClick: () => openDrawer(<AdvancedMenu />),
+    hasArrow: true,
+  };
+  const addressBook = {
+    label: "Address Book",
+    icon: <BookIcon />,
+    onClick: () => openDrawer(<AddressBookMenu />),
+    hasArrow: true,
+  };
+  const addAccount = {
+    label: "Add Account",
+    icon: <UserPlusIcon />,
+    onClick: () => openModal(<OnboardOptionsModal />),
+    hasArrow: false,
+  };
+  const backup = {
+    label: "Save Backup",
+    icon: <DownloadIcon />,
+    onClick: saveBackup,
+    hasArrow: false,
+  };
+  const apps = {
+    label: "Apps",
+    icon: <CodeSandboxIcon />,
+    onClick: () => openDrawer(<AppsMenu />),
+    hasArrow: true,
+  };
+
+  const coreMenuItems = hasVerified
+    ? [advanced, addressBook, addAccount, backup, apps]
+    : [advanced, addAccount];
+
+  const themeMenuItems = [
     {
-      label: "Apps",
-      icon: <CodeSandboxIcon />,
-      onClick: () => openDrawer(<AppsMenu />),
-      hasArrow: true,
+      label: colorModeSwitchLabel,
+      icon: <MoonIcon />,
+      onClick: toggleColorMode,
+      rightElement: <Switch isChecked={colorMode === "dark"} onChange={toggleColorMode} />,
     },
   ];
 
-  const menuItems = [
-    [
-      {
-        label: "Advanced",
-        icon: <SettingsIcon />,
-        onClick: () => openDrawer(<AdvancedMenu />),
-        hasArrow: true,
-      },
-      ...(isVerified ? menuItemsForVerifiedUser : []),
-    ],
-    [
-      {
-        label: colorModeSwitchLabel,
-        icon: <MoonIcon />,
-        onClick: toggleColorMode,
-        rightElement: <Switch isChecked={colorMode === "dark"} onChange={toggleColorMode} />,
-      },
-    ],
-    [
-      {
-        label: "Logout",
-        icon: <LogoutIcon />,
-        onClick: () => openModal(<LogoutModal />),
-      },
-    ],
+  const logoutMenuItems = [
+    {
+      label: "Logout",
+      icon: <LogoutIcon />,
+      onClick: () => openModal(<LogoutModal />),
+    },
   ];
 
-  return <GenericMenu menuItems={menuItems} />;
+  return <GenericMenu menuItems={[coreMenuItems, themeMenuItems, logoutMenuItems]} />;
 };