wip: UpdatePasscode Layout

src/locales/en/en.json

@@ -1097,6 +1097,20 @@
         "terms": "Terms and Privacy Policy",
         "version": "App Version"
       }
+    },
+    "updatepasscode": {
+      "createpasscode": {
+        "title": "Create new passcode"
+      },
+      "reenterpasscode": {
+        "title": "Re-enter new passcode"
+      },
+      "cancel": "Cancel",
+      "back": "Back",
+      "description": "Create a new passcode to secure your wallet",
+      "cantremember": {
+        "label": "Can't remember?"
+      }
     }
   },
   "connections": {
@@ -1360,7 +1374,7 @@
     "rotatekeyerror": "Unable to rotate keys",
     "newmultisignmember": "New member added to multi-sig",
     "multisignidentifiercreated": "Identifier added to \"For multiple signers\"",
-    "delegatedidentifiercreated": "Identifier added to \"For delegates\"" 
+    "delegatedidentifiercreated": "Identifier added to \"For delegates\""
   },
   "request": {
     "sign": {

src/ui/components/CreatePasscodeModule/CreatePasscodeModule.scss

@@ -13,15 +13,43 @@
     margin: 0;
   }
 
+  @media screen and (min-height: 581px) {
+    & .passcode-module-circle-row {
+      margin: 0;
+    }
+  }
+
+  & > .set-passcode-title {
+    margin: 0;
+  }
+
   .set-passcode-title,
   .set-passcode-description {
     text-align: center;
   }
 
+  & > .error-message {
+    margin: 0;
+  }
+
+  & > .error-message-placeholder {
+    margin: 0;
+  }
+
+  & > .passcode-module-container {
+    margin: 0;
+  }
+
   .forgot-your-passcode-placeholder {
     height: 4.625rem;
   }
 
+  @media screen and (min-height: 300px) and (max-height: 600px) {
+    .forgot-your-passcode-placeholder {
+      height: 2rem;
+    }
+  }
+
   @media screen and (min-height: 300px) and (max-height: 600px) {
     .forgot-your-passcode-placeholder {
       height: 4.5rem;

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

@@ -43,14 +43,17 @@ import { VerifyPassword } from "../../../../components/VerifyPassword";
 import { VerifyPasscode } from "../../../../components/VerifyPasscode";
 import { getStateCache } from "../../../../../store/reducers/stateCache";
 import { useBiometricAuth } from "../../../../hooks/useBiometricsHook";
+import { UpdatePasscode } from "../UpdatePasscode";
 
 const Settings = () => {
   const [verifyPasswordIsOpen, setVerifyPasswordIsOpen] = useState(false);
   const [verifyPasscodeIsOpen, setVerifyPasscodeIsOpen] = useState(false);
+  const [updatePasscodeIsOpen, setUpdatePasscodeIsOpen] = useState(false);
 
   const stateCache = useSelector(getStateCache);
   const biometricsCache = useSelector(getBiometricsCacheCache);
   const dispatch = useAppDispatch();
+  const [option, setOption] = useState("");
   const { biometricInfo, handleBiometricAuth } = useBiometricAuth();
   const inBiometricSetup = useRef(false);
 
@@ -155,15 +158,47 @@ const Settings = () => {
     }
   }, [biometricInfo]);
 
+  const handleChangePin = () => {
+    if (
+      !stateCache?.authentication.passwordIsSkipped &&
+      stateCache?.authentication.passwordIsSet
+    ) {
+      setVerifyPasswordIsOpen(true);
+    } else {
+      setVerifyPasscodeIsOpen(true);
+    }
+  };
+
   const handleOptionClick = async (item: OptionProps) => {
+    setOption(item.label);
     switch (item.label) {
-    case i18n.t("settings.sections.security.biometry"): {
-      handleBiometricUpdate();
-      break;
+      case i18n.t("settings.sections.security.biometry"): {
+        handleBiometricUpdate();
+        break;
+      }
+      case i18n.t("settings.sections.security.changepin"): {
+        handleChangePin();
+        break;
+      }
+      default:
+        return;
     }
-    default:
-      return;
+  };
+
+  const onVerify = () => {
+    switch (option) {
+      case i18n.t("settings.sections.security.biometry"): {
+        biometricAuth();
+        break;
+      }
+      case i18n.t("settings.sections.security.changepin"): {
+        setUpdatePasscodeIsOpen(true);
+        break;
+      }
+      default:
+        return;
     }
+    setOption("");
   };
 
   return (
@@ -248,12 +283,16 @@ const Settings = () => {
       <VerifyPassword
         isOpen={verifyPasswordIsOpen}
         setIsOpen={setVerifyPasswordIsOpen}
-        onVerify={biometricAuth}
+        onVerify={onVerify}
       />
       <VerifyPasscode
         isOpen={verifyPasscodeIsOpen}
         setIsOpen={setVerifyPasscodeIsOpen}
-        onVerify={biometricAuth}
+        onVerify={onVerify}
+      />
+      <UpdatePasscode
+        isOpen={updatePasscodeIsOpen}
+        setIsOpen={setUpdatePasscodeIsOpen}
       />
     </>
   );

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

@@ -0,0 +1,11 @@
+.update-passcode-modal {
+  .responsive-page-content {
+    justify-content: space-evenly;
+  }
+
+  .page-header {
+    ion-toolbar {
+      --background: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+import { IonModal } from "@ionic/react";
+import "./UpdatePasscode.scss";
+import { CreatePasscodeModuleRef } from "../../../../components/CreatePasscodeModule/CreatePasscodeModule.types";
+import { ResponsivePageLayout } from "../../../../components/layout/ResponsivePageLayout";
+import { PageHeader } from "../../../../components/PageHeader";
+import { CreatePasscodeModule } from "../../../../components/CreatePasscodeModule";
+import { i18n } from "../../../../../i18n";
+import { UpdatePasscodeModalProps } from "./UpdatePasscode.types";
+
+const UpdatePasscode = ({ isOpen, setIsOpen }: UpdatePasscodeModalProps) => {
+  const pageId = "update-passcode";
+  const [passCodeValue, setPassCodeValue] = useState({
+    passcode: "",
+    originalPasscode: "",
+  });
+
+  const ref = useRef<CreatePasscodeModuleRef>(null);
+
+  const handlePassAuth = async () => {
+    // TODO: toast message and close modal
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    console.log(passCodeValue);
+    console.log(isOnReenterPasscodeStep);
+  }, [passCodeValue]);
+
+  const handleCancel = () => {
+    if (isOnReenterPasscodeStep) {
+      ref.current?.clearState;
+      setPassCodeValue({
+        passcode: "",
+        originalPasscode: "",
+      });
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  const isOnReenterPasscodeStep =
+    passCodeValue.originalPasscode.length > 0 &&
+    passCodeValue.passcode.length < 6;
+
+  const title =
+    passCodeValue.originalPasscode !== ""
+      ? i18n.t("settings.updatepasscode.reenterpasscode.title")
+      : i18n.t("settings.updatepasscode.createpasscode.title");
+
+  return (
+    <IonModal
+      isOpen={isOpen}
+      className={pageId + "-modal"}
+      data-testid={pageId + "-modal"}
+      onDidDismiss={() => setIsOpen(false)}
+    >
+      <ResponsivePageLayout
+        pageId={pageId}
+        header={
+          <PageHeader
+            closeButton={true}
+            closeButtonLabel={`${
+              isOnReenterPasscodeStep
+                ? i18n.t("settings.updatepasscode.back")
+                : i18n.t("settings.updatepasscode.cancel")
+            }`}
+            closeButtonAction={handleCancel}
+          />
+        }
+      >
+        <CreatePasscodeModule
+          title={title}
+          description={`${i18n.t("settings.updatepasscode.description")}`}
+          ref={ref}
+          testId={pageId}
+          onCreateSuccess={handlePassAuth}
+          onPasscodeChange={(passcode, originalPasscode) => {
+            setPassCodeValue({
+              passcode,
+              originalPasscode,
+            });
+          }}
+        />
+      </ResponsivePageLayout>
+    </IonModal>
+  );
+};
+
+export { UpdatePasscode };

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

@@ -0,0 +1,6 @@
+interface UpdatePasscodeModalProps {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}
+
+export type { UpdatePasscodeModalProps };

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

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

src/ui/pages/SetPasscode/SetPasscode.scss

@@ -1,43 +1,6 @@
 .set-passcode {
   .responsive-page-content {
     justify-content: space-evenly;
-
-    @media screen and (min-height: 581px) {
-      & .passcode-module-circle-row {
-        margin: 0;
-      }
-    }
-
-    & > .set-passcode-title {
-      margin: 0;
-    }
-
-    & > .error-message {
-      margin: 0;
-    }
-
-    & > .error-message-placeholder {
-      margin: 0;
-    }
-
-    & > .passcode-module-container {
-      margin: 0;
-    }
-
-    .set-passcode-title,
-    .set-passcode-description {
-      text-align: center;
-    }
-
-    .forgot-your-passcode-placeholder {
-      height: 4.625rem;
-    }
-
-    @media screen and (min-height: 300px) and (max-height: 600px) {
-      .forgot-your-passcode-placeholder {
-        height: 2rem;
-      }
-    }
   }
 
   .page-header {