feat: disable modal animation and add lock option in menu

cardano-foundation · Apr 29, 2024 · 1c4730d · 1c4730d
1 parent dac7582
commit 1c4730d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -856,7 +856,8 @@
         "connections": "Connections",
         "p2p": "P2P",
         "identity": "Identity",
-        "credentials": "Credentials"
+        "credentials": "Credentials",
+        "lock": "Lock"
       }
     }
   },

diff --git a/src/ui/components/LockModal/LockModal.tsx b/src/ui/components/LockModal/LockModal.tsx
@@ -122,6 +122,7 @@ const LockModal = () => {
       isOpen={lockApp}
       className="lock-modal"
       data-testid={componentId}
+      animated={false}
     >
       <ResponsivePageLayout
         pageId={componentId}

diff --git a/src/ui/pages/Menu/Menu.tsx b/src/ui/pages/Menu/Menu.tsx
@@ -16,10 +16,12 @@ import {
   chatbubbleOutline,
   fingerPrintOutline,
   idCardOutline,
+  lockClosedOutline,
 } from "ionicons/icons";
 import { TabLayout } from "../../components/layout/TabLayout";
 import { useAppDispatch } from "../../../store/hooks";
 import {
+  logout,
   setCurrentOperation,
   setCurrentRoute,
 } from "../../../store/reducers/stateCache";
@@ -55,8 +57,14 @@ const Menu = () => {
     );
   };
 
-  const handleItemSelection = (index: number) => {
-    // @TODO - sdisalvo: add some logic for selection
+  const handleItemSelection = (option: string) => {
+    switch (option) {
+    case i18n.t("menu.tab.items.lock"):
+      dispatch(logout());
+      return;
+    default:
+      return;
+    }
   };
 
   const MenuItem = ({
@@ -71,7 +79,7 @@ const Menu = () => {
     return (
       <IonCol>
         <IonCard
-          onClick={() => handleItemSelection(index)}
+          onClick={() => handleItemSelection(label)}
           data-testid={`menu-input-item-${index}`}
           className="menu-input"
         >
@@ -129,6 +137,18 @@ const Menu = () => {
             label={`${i18n.t("menu.tab.items.credentials")}`}
           />
         </IonRow>
+        <IonRow className="menu-input-row">
+          <MenuItem
+            index={4}
+            icon={lockClosedOutline}
+            label={`${i18n.t("menu.tab.items.lock")}`}
+          />
+          <MenuItem
+            index={5}
+            icon=""
+            label=""
+          />
+        </IonRow>
       </IonGrid>
     </TabLayout>
   );