feat(ui): update connect wallet button for menu tab

src/locales/en/en.json

@@ -854,13 +854,24 @@
         "profile": "Profile",
         "crypto": "Crypto",
         "connections": "Connections",
-        "p2p": "P2P",
-        "identity": "Identity",
-        "credentials": "Credentials",
-        "lock": "Lock"
+        "connectwallet": "Connect Wallet",
+        "lock": "Lock",
+        "cip": "CIP-45"
       }
     }
   },
+  "connectwallet": {
+    "sections": {
+      "header": "Cardano Connect",
+      "connectbtn": "Connect with Cardano"
+    },
+    "connectwalletmodal": {
+      "header": "New connection",
+      "cancel": "Cancel",
+      "scanqr": "Scan QR code",
+      "pastePID": "Paste Peer ID"
+    }
+  },
   "settings": {
     "sections": {
       "header": "Settings",

src/ui/pages/Menu/Menu.const.tsx

@@ -0,0 +1,6 @@
+export const emptySubMenu = {
+  Component: () => <></>,
+  title: "",
+  additionalButtons: <></>,
+  pageId: "empty",
+};

src/ui/pages/Menu/Menu.scss

@@ -24,6 +24,21 @@
             font-size: 1.25rem;
           }
         }
+
+        .menu-item-icon {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .sub-label {
+            padding: 0.125rem 0.375rem;
+            border-radius: 0.25rem;
+            background-color: rgba(187, 187, 187, 0.5);
+            font-size: 0.5rem;
+            font-weight: 400;
+            line-height: 0.75rem;
+          }
+        }
       }
     }
   }
@@ -52,3 +67,46 @@
     }
   }
 }
+
+.connect-wallet {
+  &.sub-menu {
+    background: var(--ion-color-light);
+
+    ion-header ion-toolbar {
+      --background: transparent;
+
+      ion-title.md {
+        margin-left: 0;
+      }
+    }
+
+    ion-toolbar ion-buttons ion-button.close-button {
+      --background-activated: var(--ion-color-light-grey);
+      --background-focused: var(--ion-color-light-grey);
+      --background-hover: var(--ion-color-light-grey);
+      background: var(--ion-color-light-grey);
+    }
+
+    ion-toolbar ion-buttons ion-button.connect-wallet-button {
+      --padding-start: 0.5rem;
+      --padding-end: 0.5rem;
+      --background-activated: var(--ion-color-light-grey);
+      --background-focused: var(--ion-color-light-grey);
+      --background-hover: var(--ion-color-light-grey);
+      background: var(--ion-color-light-grey);
+
+      width: 2.81rem;
+      height: 2.81rem;
+      border-radius: 1.5rem;
+    }
+
+    @media screen and (min-width: 250px) and (max-width: 370px) {
+      ion-toolbar ion-buttons ion-button.connect-wallet-button {
+        width: 2.3rem;
+        height: 2.3rem;
+        --padding-start: 0;
+        --padding-end: 0;
+      }
+    }
+  }
+}

src/ui/pages/Menu/Menu.test.tsx

@@ -1,8 +1,11 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { Provider } from "react-redux";
+import { waitForIonicReact } from "@ionic/react-test-utils";
+import { act } from "react-dom/test-utils";
 import { Menu } from "./Menu";
 import { store } from "../../../store";
 import EN_TRANSLATIONS from "../../../locales/en/en.json";
+import { SubMenuKey } from "./Menu.types";
 
 describe("Menu Tab", () => {
   test("Renders Menu Tab", () => {
@@ -23,12 +26,34 @@ describe("Menu Tab", () => {
     expect(
       getByText(EN_TRANSLATIONS.menu.tab.items.connections)
     ).toBeInTheDocument();
-    expect(getByText(EN_TRANSLATIONS.menu.tab.items.p2p)).toBeInTheDocument();
     expect(
-      getByText(EN_TRANSLATIONS.menu.tab.items.identity)
+      getByText(EN_TRANSLATIONS.menu.tab.items.connectwallet)
     ).toBeInTheDocument();
+  });
+
+  test("Open connect wallet tab", async () => {
+    const { getByTestId, getByText } = render(
+      <Provider store={store}>
+        <Menu />
+      </Provider>
+    );
+
+    expect(getByTestId("menu-tab")).toBeInTheDocument();
     expect(
-      getByText(EN_TRANSLATIONS.menu.tab.items.credentials)
+      getByText(EN_TRANSLATIONS.menu.tab.items.connectwallet)
     ).toBeInTheDocument();
+    const connectButton = getByTestId(
+      `menu-input-item-${SubMenuKey.ConnectWallet}`
+    );
+
+    act(() => {
+      fireEvent.click(connectButton);
+    });
+
+    await waitForIonicReact();
+
+    expect(
+      getByText(EN_TRANSLATIONS.connectwallet.sections.header)
+    ).toBeVisible();
   });
 });

src/ui/pages/Menu/Menu.tsx

@@ -13,9 +13,8 @@ import {
   personCircleOutline,
   walletOutline,
   peopleOutline,
-  chatbubbleOutline,
-  fingerPrintOutline,
-  idCardOutline,
+  linkOutline,
+  addOutline,
 } from "ionicons/icons";
 import { useMemo, useState } from "react";
 import { TabLayout } from "../../components/layout/TabLayout";
@@ -24,39 +23,33 @@ import { setCurrentRoute } from "../../../store/reducers/stateCache";
 import { TabsRoutePath } from "../../../routes/paths";
 import "./Menu.scss";
 import { i18n } from "../../../i18n";
-import { Settings } from "./components/Settings";
 import { SubMenu } from "./components/SubMenu";
 import { MenuItemProps, SubMenuData, SubMenuKey } from "./Menu.types";
+import { emptySubMenu } from "./Menu.const";
+import { Settings } from "./components/Settings";
+import { ConnectWallet } from "./components/ConnectWallet";
 
-const emptySubMenu = {
-  Component: () => <></>,
-  title: "",
-  additionalButtons: <></>,
-};
-
-const submenuMap = new Map<SubMenuKey, SubMenuData>([
-  [
-    SubMenuKey.Settings,
-    {
-      Component: Settings,
-      title: "settings.sections.header",
-      additionalButtons: <></>,
-    },
-  ],
-]);
-
-const MenuItem = ({ itemKey, icon, label, onClick }: MenuItemProps) => {
+const MenuItem = ({
+  itemKey,
+  icon,
+  label,
+  onClick,
+  subLabel,
+}: MenuItemProps) => {
   return (
     <IonCol size="6">
       <IonCard
         onClick={() => onClick(itemKey)}
         data-testid={`menu-input-item-${itemKey}`}
         className="menu-input"
       >
-        <IonIcon
-          icon={icon}
-          color="primary"
-        />
+        <div className="menu-item-icon">
+          <IonIcon
+            icon={icon}
+            color="primary"
+          />
+          {subLabel && <span className="sub-label">{subLabel}</span>}
+        </div>
         <IonLabel>{label}</IonLabel>
       </IonCard>
     </IonCol>
@@ -75,6 +68,43 @@ const Menu = () => {
     dispatch(setCurrentRoute({ path: TabsRoutePath.MENU }));
   });
 
+  const submenuMap = useMemo(
+    () =>
+      new Map<SubMenuKey, SubMenuData>([
+        [
+          SubMenuKey.Settings,
+          {
+            Component: Settings,
+            title: "settings.sections.header",
+            additionalButtons: <></>,
+            pageId: "menu-setting",
+          },
+        ],
+        [
+          SubMenuKey.ConnectWallet,
+          {
+            Component: ConnectWallet,
+            title: "connectwallet.sections.header",
+            pageId: "connect-wallet",
+            additionalButtons: (
+              <IonButton
+                shape="round"
+                className="connect-wallet-button"
+                data-testid="menu-add-connection-button"
+              >
+                <IonIcon
+                  slot="icon-only"
+                  icon={addOutline}
+                  color="primary"
+                />
+              </IonButton>
+            ),
+          },
+        ],
+      ]),
+    []
+  );
+
   const showSelectedOption = (key: SubMenuKey) => {
     if (!submenuMap.has(key)) return;
 
@@ -99,7 +129,7 @@ const Menu = () => {
     );
   };
 
-  const menuItems = [
+  const menuItems: Omit<MenuItemProps, "onClick">[] = [
     {
       itemKey: SubMenuKey.Profile,
       icon: personCircleOutline,
@@ -116,19 +146,10 @@ const Menu = () => {
       label: `${i18n.t("menu.tab.items.connections")}`,
     },
     {
-      itemKey: SubMenuKey.P2P,
-      icon: chatbubbleOutline,
-      label: `${i18n.t("menu.tab.items.p2p")}`,
-    },
-    {
-      itemKey: SubMenuKey.Identifier,
-      icon: fingerPrintOutline,
-      label: `${i18n.t("menu.tab.items.identity")}`,
-    },
-    {
-      itemKey: SubMenuKey.Credential,
-      icon: idCardOutline,
-      label: `${i18n.t("menu.tab.items.credentials")}`,
+      itemKey: SubMenuKey.ConnectWallet,
+      icon: linkOutline,
+      label: `${i18n.t("menu.tab.items.connectwallet")}`,
+      subLabel: `${i18n.t("menu.tab.items.cip")}`,
     },
   ];
 
@@ -156,6 +177,7 @@ const Menu = () => {
                 itemKey={menuItem.itemKey}
                 icon={menuItem.icon}
                 label={`${i18n.t(menuItem.label)}`}
+                subLabel={menuItem.subLabel}
                 onClick={() => showSelectedOption(menuItem.itemKey)}
               />
             ))}
@@ -167,6 +189,7 @@ const Menu = () => {
         setShowSubMenu={setShowSubMenu}
         title={`${i18n.t(selectSubmenu.title)}`}
         additionalButtons={selectSubmenu.additionalButtons}
+        pageId={selectSubmenu.pageId}
       >
         <selectSubmenu.Component />
       </SubMenu>

src/ui/pages/Menu/Menu.types.ts

@@ -4,6 +4,7 @@ interface SubMenuData {
   Component: () => ReactElement;
   title: string;
   additionalButtons: ReactNode;
+  pageId: string;
 }
 
 interface SubMenuProps {
@@ -18,6 +19,7 @@ interface MenuItemProps {
   itemKey: SubMenuKey;
   icon: string;
   label: string;
+  subLabel?: string;
   onClick: (key: SubMenuKey) => void;
 }
 
@@ -26,9 +28,7 @@ export enum SubMenuKey {
   Profile,
   Crypto,
   Connections,
-  P2P,
-  Identifier,
-  Credential,
+  ConnectWallet,
 }
 
 export type { SubMenuProps, MenuItemProps, SubMenuData };

src/ui/pages/Menu/components/ConnectWallet/ConnectWallet.scss

@@ -0,0 +1,5 @@
+.connect-wallet-container {
+  .placeholder-container {
+    margin-top: 30%;
+  }
+}

src/ui/pages/Menu/components/ConnectWallet/ConnectWallet.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { i18n } from "../../../../../i18n";
+import { CardsPlaceholder } from "../../../../components/CardsPlaceholder";
+import "./ConnectWallet.scss";
+
+export const ConnectWallet = () => {
+  const pageId = "connect-wallet-placeholder";
+  const [openConnectWallet, setOpenConnectWallet] = useState(false);
+  const handleAddConnect = () => {
+    setOpenConnectWallet(true);
+  };
+
+  return (
+    <>
+      <div className="connect-wallet-container">
+        <div className="placeholder-container">
+          <CardsPlaceholder
+            buttonLabel={i18n.t("connectwallet.sections.connectbtn")}
+            buttonAction={handleAddConnect}
+            testId={pageId}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/ui/pages/Menu/components/ConnectWallet/index.ts

@@ -0,0 +1 @@
+export * from "./ConnectWallet";