From 3254b601b5c15845d5dfc8f7ee595cf5121668fc Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 11:46:02 +0200
Subject: [PATCH 1/9] fix: form submission

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/components/Approvers/ApproverModal.vue  |  6 ++----
 .../components/ComplexKey/ComplexKeyModal.vue        |  6 ++----
 .../components/ComplexKey/ComplexKeySaveKeyModal.vue |  5 ++---
 .../ComplexKey/ComplexKeySelectAccountModal.vue      |  6 ++----
 .../ComplexKey/ComplexKeySelectSavedKey.vue          | 12 ++++--------
 .../DataMigration/DecryptMnemonicPhrase.vue          |  5 ++---
 .../src/renderer/components/ForgotPasswordModal.vue  |  6 ++----
 .../ImportEncrypted/components/DecryptKeyModal.vue   |  5 ++---
 .../components/SelectEncryptedKeysModal.vue          |  5 ++---
 .../components/Organization/AddOrSelectModal.vue     |  4 +---
 .../components/Organization/AddOrganizationModal.vue |  6 ++----
 .../Organization/OrganizationStatusModal.vue         |  6 ++----
 .../Organization/SelectOrganizationModal.vue         |  6 ++----
 .../components/Organization/UserSelectModal.vue      |  6 ++----
 .../src/renderer/components/UserPasswordModal.vue    |  5 ++---
 .../components/modals/UpdateNicknameModal.vue        |  6 ++----
 .../pages/AccountSetup/components/NewPassword.vue    |  6 ++----
 .../LinkExistingAccount/LinkExistingAccount.vue      |  6 ++----
 .../pages/ContactList/SignUpUser/SignUpUser.vue      |  6 ++----
 .../Files/LinkExistingFile/LinkExistingFile.vue      |  6 ++----
 .../Migrate/components/DecryptRecoveryPhraseForm.vue |  6 ++----
 .../pages/Migrate/components/SetupPersonal.vue       |  2 +-
 .../pages/Settings/components/WorkGroupsTab.vue      |  6 ++----
 23 files changed, 46 insertions(+), 87 deletions(-)

diff --git a/front-end/src/renderer/components/Approvers/ApproverModal.vue b/front-end/src/renderer/components/Approvers/ApproverModal.vue
index 1933e43c7..f318f0835 100644
--- a/front-end/src/renderer/components/Approvers/ApproverModal.vue
+++ b/front-end/src/renderer/components/Approvers/ApproverModal.vue
@@ -58,9 +58,7 @@ const handleApproverUpdate = (newApprover: TransactionApproverDto) =>
 const handleSingleApproverUpdate = (newApprover: TransactionApproverDto[]) =>
   (currentSingleApprover.value = newApprover);
 
-const handleDoneClick = async (e: Event) => {
-  e.preventDefault();
-
+const handleDoneClick = async () => {
   if (currentApproverInvalid.value) {
     errorModalShow.value = true;
     return;
@@ -172,7 +170,7 @@ const modalContentContainerStyle = { padding: '0 10%', height: '80%' };
 <template>
   <AppModal :show="show" @update:show="emit('update:show', $event)" class="full-screen-modal">
     <div class="p-5 h-100">
-      <form @submit="handleDoneClick" class="flex-column-100 fill-remaining">
+      <form @submit.prevent="handleDoneClick" class="flex-column-100 fill-remaining">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
diff --git a/front-end/src/renderer/components/ComplexKey/ComplexKeyModal.vue b/front-end/src/renderer/components/ComplexKey/ComplexKeyModal.vue
index c511d0a32..6a11bfb67 100644
--- a/front-end/src/renderer/components/ComplexKey/ComplexKeyModal.vue
+++ b/front-end/src/renderer/components/ComplexKey/ComplexKeyModal.vue
@@ -51,9 +51,7 @@ const handleSaveComplexKeyButtonClick = () => {
   }
 };
 
-const handleSaveButtonClick = async (e: Event) => {
-  e.preventDefault();
-
+const handleSaveButtonClick = async () => {
   if (currentKeyInvalid.value) {
     errorModalShow.value = true;
     return;
@@ -77,7 +75,7 @@ const modalContentContainerStyle = { padding: '0 10%', height: '80%' };
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="full-screen-modal">
     <div class="p-5 h-100">
-      <form @submit="handleSaveButtonClick" class="h-100">
+      <form @submit.prevent="handleSaveButtonClick" class="h-100">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
diff --git a/front-end/src/renderer/components/ComplexKey/ComplexKeySaveKeyModal.vue b/front-end/src/renderer/components/ComplexKey/ComplexKeySaveKeyModal.vue
index f775f56bd..754766493 100644
--- a/front-end/src/renderer/components/ComplexKey/ComplexKeySaveKeyModal.vue
+++ b/front-end/src/renderer/components/ComplexKey/ComplexKeySaveKeyModal.vue
@@ -39,8 +39,7 @@ const nickname = ref('');
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleSaveKeyList = async (e: Event) => {
-  e.preventDefault();
+const handleSaveKeyList = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -65,7 +64,7 @@ const handleSaveKeyList = async (e: Event) => {
       <div>
         <i class="bi bi-x-lg cursor-pointer" @click="handleShowUpdate(false)"></i>
       </div>
-      <form class="mt-3" @submit="handleSaveKeyList">
+      <form class="mt-3" @submit.prevent="handleSaveKeyList">
         <h3 class="text-center text-title text-bold">Enter the nickname</h3>
         <div class="form-group mt-5 mb-4">
           <label class="form-label">Nickname</label>
diff --git a/front-end/src/renderer/components/ComplexKey/ComplexKeySelectAccountModal.vue b/front-end/src/renderer/components/ComplexKey/ComplexKeySelectAccountModal.vue
index 2e65323dc..eff957a48 100644
--- a/front-end/src/renderer/components/ComplexKey/ComplexKeySelectAccountModal.vue
+++ b/front-end/src/renderer/components/ComplexKey/ComplexKeySelectAccountModal.vue
@@ -56,9 +56,7 @@ const accountIdsList = computed(() => {
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleInsert = async (e: Event) => {
-  e.preventDefault();
-
+const handleInsert = async () => {
   if (!isAccountId(selectedAccountData.accountId.value)) {
     throw new Error('Invalid Account ID');
   }
@@ -87,7 +85,7 @@ onMounted(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleInsert">
+      <form @submit.prevent="handleInsert">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
diff --git a/front-end/src/renderer/components/ComplexKey/ComplexKeySelectSavedKey.vue b/front-end/src/renderer/components/ComplexKey/ComplexKeySelectSavedKey.vue
index ba753b323..e3807af9d 100644
--- a/front-end/src/renderer/components/ComplexKey/ComplexKeySelectSavedKey.vue
+++ b/front-end/src/renderer/components/ComplexKey/ComplexKeySelectSavedKey.vue
@@ -50,9 +50,7 @@ const handleTrashClick = (e: Event, id: string) => {
   deleteSavedKeyModalShown.value = true;
 };
 
-const handleDeleteSavedKey = async (e: Event) => {
-  e.preventDefault();
-
+const handleDeleteSavedKey = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -65,9 +63,7 @@ const handleDeleteSavedKey = async (e: Event) => {
   complexKeyId.value = null;
 };
 
-const handleDone = (e: Event) => {
-  e.preventDefault();
-
+const handleDone = () => {
   if (complexKey.value) {
     props.onKeyListSelect(complexKey.value);
     handleShowUpdate(false);
@@ -86,7 +82,7 @@ onBeforeMount(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleDone">
+      <form @submit.prevent="handleDone">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
@@ -173,7 +169,7 @@ onBeforeMount(async () => {
           <div class="text-center">
             <AppCustomIcon :name="'bin'" style="height: 160px" />
           </div>
-          <form @submit="handleDeleteSavedKey">
+          <form @submit.prevent="handleDeleteSavedKey">
             <h3 class="text-center text-title text-bold mt-3">Remove Key List</h3>
             <p class="text-center text-small text-secondary mt-4">
               Are you sure you want to remove this Key List from your Complex Keys List
diff --git a/front-end/src/renderer/components/DataMigration/DecryptMnemonicPhrase.vue b/front-end/src/renderer/components/DataMigration/DecryptMnemonicPhrase.vue
index 8eb1cdd60..79d911db5 100644
--- a/front-end/src/renderer/components/DataMigration/DecryptMnemonicPhrase.vue
+++ b/front-end/src/renderer/components/DataMigration/DecryptMnemonicPhrase.vue
@@ -21,8 +21,7 @@ const password = ref<string>('');
 const error = ref<string | null>(null);
 
 /* Handlers */
-const handleSubmit = (event: Event) => {
-  event.preventDefault();
+const handleSubmit = () => {
   if (password.value.trim().length === 0) {
     error.value = 'Password cannot be empty';
     return;
@@ -50,7 +49,7 @@ const handleClose = () => {
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Enter Password</h3>
 
         <div class="form-group mt-4">
diff --git a/front-end/src/renderer/components/ForgotPasswordModal.vue b/front-end/src/renderer/components/ForgotPasswordModal.vue
index 44d0c3e4b..8ce5352eb 100644
--- a/front-end/src/renderer/components/ForgotPasswordModal.vue
+++ b/front-end/src/renderer/components/ForgotPasswordModal.vue
@@ -79,9 +79,7 @@ const isPrimaryButtonDisabled = computed(() => {
 });
 
 /* Handlers */
-const handleSubmit = async (e: Event) => {
-  e.preventDefault();
-
+const handleSubmit = async () => {
   if (!shouldEnterToken.value && !shouldSetNewPassword.value) {
     handleEmailEnter();
   } else if (!shouldSetNewPassword.value) {
@@ -228,7 +226,7 @@ watch(newPassword, pass => {
       <div class="text-center">
         <AppCustomIcon :name="'contact'" style="height: 160px" />
       </div>
-      <form class="mt-3" @submit="handleSubmit">
+      <form class="mt-3" @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold">
           {{ shouldSetNewPassword ? 'Set new password' : 'Forgot password' }}
         </h3>
diff --git a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue
index ea568549a..d7eb096c3 100644
--- a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue
+++ b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue
@@ -65,8 +65,7 @@ const hashCode = computed(() =>
 /* Handlers */
 const handleSkipAll = () => emit('skip:all');
 const handleSkip = () => emit('skip:one');
-const handleSubmit = async (event: Event) => {
-  event.preventDefault();
+const handleSubmit = async () => {
   await decrypt();
 };
 
@@ -220,7 +219,7 @@ watch(
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Decrypt key</h3>
 
         <div class="form-group mt-4">
diff --git a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/SelectEncryptedKeysModal.vue b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/SelectEncryptedKeysModal.vue
index 2209d9a83..b203d2f19 100644
--- a/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/SelectEncryptedKeysModal.vue
+++ b/front-end/src/renderer/components/KeyPair/ImportEncrypted/components/SelectEncryptedKeysModal.vue
@@ -36,8 +36,7 @@ const fileNames = computed(() => {
 });
 
 /* Handlers */
-const handleSubmit = (event: Event) => {
-  event.preventDefault();
+const handleSubmit = () => {
   emit('update:keyPaths', selectedKeyPaths.value);
   emit('continue');
 };
@@ -111,7 +110,7 @@ watch(
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Import encrypted keys</h3>
 
         <p class="text-center mt-4">
diff --git a/front-end/src/renderer/components/Organization/AddOrSelectModal.vue b/front-end/src/renderer/components/Organization/AddOrSelectModal.vue
index 8ea7033cf..d78252e7f 100644
--- a/front-end/src/renderer/components/Organization/AddOrSelectModal.vue
+++ b/front-end/src/renderer/components/Organization/AddOrSelectModal.vue
@@ -18,8 +18,6 @@ const emit = defineEmits<{
 
 /* Handlers */
 const handleChoose = (e: Event) => {
-  e.preventDefault();
-
   if (
     e instanceof SubmitEvent &&
     e.submitter instanceof HTMLButtonElement &&
@@ -43,7 +41,7 @@ function isChoice(value: string): value is Choice {
     :close-on-escape="false"
     class="common-modal"
   >
-    <form class="p-4" @submit="handleChoose">
+    <form class="p-4" @submit.prevent="handleChoose">
       <div class="text-start">
         <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
       </div>
diff --git a/front-end/src/renderer/components/Organization/AddOrganizationModal.vue b/front-end/src/renderer/components/Organization/AddOrganizationModal.vue
index fde4f4c15..fb9a227b4 100644
--- a/front-end/src/renderer/components/Organization/AddOrganizationModal.vue
+++ b/front-end/src/renderer/components/Organization/AddOrganizationModal.vue
@@ -38,9 +38,7 @@ const nickname = ref('');
 const serverUrl = ref('');
 
 /* Handlers */
-const handleAdd = async (e: Event) => {
-  e.preventDefault();
-
+const handleAdd = async () => {
   try {
     const url = new URL(serverUrl.value);
     serverUrl.value = url.origin;
@@ -77,7 +75,7 @@ watch(
     :close-on-escape="false"
     class="common-modal"
   >
-    <form class="p-4" @submit="handleAdd">
+    <form class="p-4" @submit.prevent="handleAdd">
       <div class="text-start">
         <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
       </div>
diff --git a/front-end/src/renderer/components/Organization/OrganizationStatusModal.vue b/front-end/src/renderer/components/Organization/OrganizationStatusModal.vue
index edb2b9d38..aea680a9a 100644
--- a/front-end/src/renderer/components/Organization/OrganizationStatusModal.vue
+++ b/front-end/src/renderer/components/Organization/OrganizationStatusModal.vue
@@ -16,9 +16,7 @@ const inactiveSelectedOrganizationModalShown = ref(false);
 
 /* Handlers */
 
-const handleSelectedOrganizationNotActiveSubmit = async (e: Event) => {
-  e.preventDefault();
-
+const handleSelectedOrganizationNotActiveSubmit = async () => {
   inactiveSelectedOrganizationModalShown.value = false;
 };
 
@@ -49,7 +47,7 @@ watch(
           @click="inactiveSelectedOrganizationModalShown = false"
         ></i>
       </div>
-      <form class="mt-3" @submit="handleSelectedOrganizationNotActiveSubmit">
+      <form class="mt-3" @submit.prevent="handleSelectedOrganizationNotActiveSubmit">
         <h3 class="text-center text-title text-bold">Organization status error</h3>
         <p
           class="text-center text-small text-secondary mt-4"
diff --git a/front-end/src/renderer/components/Organization/SelectOrganizationModal.vue b/front-end/src/renderer/components/Organization/SelectOrganizationModal.vue
index 7e39d7334..ccc40d6e8 100644
--- a/front-end/src/renderer/components/Organization/SelectOrganizationModal.vue
+++ b/front-end/src/renderer/components/Organization/SelectOrganizationModal.vue
@@ -29,9 +29,7 @@ const organizations = ref<Organization[]>([]);
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleSelect = (e: Event) => {
-  e.preventDefault();
-
+const handleSelect = () => {
   if (selectedOrganization.value) {
     emit('onSelected', selectedOrganization.value);
     handleShowUpdate(false);
@@ -46,7 +44,7 @@ onBeforeMount(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleSelect">
+      <form @submit.prevent="handleSelect">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
diff --git a/front-end/src/renderer/components/Organization/UserSelectModal.vue b/front-end/src/renderer/components/Organization/UserSelectModal.vue
index 9d3e63d11..9c0a8c50d 100644
--- a/front-end/src/renderer/components/Organization/UserSelectModal.vue
+++ b/front-end/src/renderer/components/Organization/UserSelectModal.vue
@@ -45,9 +45,7 @@ const listedContacts = computed(() =>
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleInsert = (e: Event) => {
-  e.preventDefault();
-
+const handleInsert = () => {
   if (userIds.value.length === 0) return;
 
   emit('users-selected', userIds.value);
@@ -58,7 +56,7 @@ const handleInsert = (e: Event) => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleInsert">
+      <form @submit.prevent="handleInsert">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
diff --git a/front-end/src/renderer/components/UserPasswordModal.vue b/front-end/src/renderer/components/UserPasswordModal.vue
index 1dc036a34..8d9286761 100644
--- a/front-end/src/renderer/components/UserPasswordModal.vue
+++ b/front-end/src/renderer/components/UserPasswordModal.vue
@@ -23,8 +23,7 @@ const password = ref('');
 const callback = ref<((password: string) => void) | null>(null);
 
 /* Handlers */
-const handlePasswordEntered = async (e: Event) => {
-  e.preventDefault();
+const handlePasswordEntered = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -89,7 +88,7 @@ defineExpose({
       <div class="text-center">
         <AppCustomIcon :name="'lock'" style="height: 160px" />
       </div>
-      <form class="mt-3" @submit="handlePasswordEntered">
+      <form class="mt-3" @submit.prevent="handlePasswordEntered">
         <h3 class="text-center text-title text-bold">{{ heading || 'Enter your password' }}</h3>
         <p class="text-center text-small text-secondary mt-4" v-if="subHeading">
           {{ subHeading }}
diff --git a/front-end/src/renderer/components/modals/UpdateNicknameModal.vue b/front-end/src/renderer/components/modals/UpdateNicknameModal.vue
index f4d8f35b2..d52eaf17c 100644
--- a/front-end/src/renderer/components/modals/UpdateNicknameModal.vue
+++ b/front-end/src/renderer/components/modals/UpdateNicknameModal.vue
@@ -35,9 +35,7 @@ const isUpdating = ref(false);
 /* Handlers */
 const handleShow = (show: boolean) => emit('update:show', show);
 
-const handleUpdate = async (e: Event) => {
-  e.preventDefault();
-
+const handleUpdate = async () => {
   const oldNickname = getNicknameById(props.keyPairId, user.keyPairs);
 
   if (nickname.value.trim() === (oldNickname || '')) {
@@ -95,7 +93,7 @@ watch(
       <div class="text-center mt-5">
         <i class="bi bi-pencil-fill large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleUpdate">
+      <form @submit.prevent="handleUpdate">
         <h3 class="text-center text-title text-bold mt-5">Update key pair nickname</h3>
         <div class="form-group mt-4">
           <label class="form-label">Enter Nickname</label>
diff --git a/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue b/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
index c5ad797e3..6bcfd2fa4 100644
--- a/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
+++ b/front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue
@@ -54,9 +54,7 @@ const isPrimaryButtonDisabled = computed(() => {
 });
 
 /* Handlers */
-const handleFormSubmit = async (event: Event) => {
-  event.preventDefault();
-
+const handleFormSubmit = async () => {
   await handleChangePassword();
 };
 
@@ -135,7 +133,7 @@ watch(newPassword, pass => {
   <div class="fill-remaining flex-start flex-column mt-4">
     <h1 class="text-display text-bold text-center">New Password</h1>
     <p class="text-main text-center mt-5">Please enter new password</p>
-    <form @submit="handleFormSubmit" class="row justify-content-center w-100 mt-5">
+    <form @submit.prevent="handleFormSubmit" class="row justify-content-center w-100 mt-5">
       <div class="col-12 col-md-8 col-lg-6">
         <AppPasswordInput
           v-model="currentPassword"
diff --git a/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue b/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
index d02953c97..12431b785 100644
--- a/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
+++ b/front-end/src/renderer/pages/Accounts/LinkExistingAccount/LinkExistingAccount.vue
@@ -31,9 +31,7 @@ useSetDynamicLayout(LOGGED_IN_LAYOUT);
 const accountData = useAccountId();
 const nickname = ref('');
 
-const handleLinkAccount = async (e: Event) => {
-  e.preventDefault();
-
+const handleLinkAccount = async () => {
   if (accountData.isValid.value) {
     try {
       if (!isUserLoggedIn(user.personal)) {
@@ -64,7 +62,7 @@ const handleLinkAccount = async (e: Event) => {
 
       <h2 class="text-title text-bold">Link existing account</h2>
     </div>
-    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit="handleLinkAccount">
+    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit.prevent="handleLinkAccount">
       <div class="form-group">
         <label class="form-label">Hedera Account ID <span class="text-danger">*</span></label>
 
diff --git a/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue b/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
index 7c911e96e..486ffb911 100644
--- a/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
+++ b/front-end/src/renderer/pages/ContactList/SignUpUser/SignUpUser.vue
@@ -27,9 +27,7 @@ useSetDynamicLayout(LOGGED_IN_LAYOUT);
 const email = ref('');
 const nickname = ref('');
 
-const handleLinkAccount = async (e: Event) => {
-  e.preventDefault();
-
+const handleLinkAccount = async () => {
   if (!isEmail(email.value)) throw new Error('Invalid email');
   if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
   if (!isLoggedInOrganization(user.selectedOrganization))
@@ -72,7 +70,7 @@ watch(
 
       <h2 class="text-title text-bold">Create New Organization User</h2>
     </div>
-    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit="handleLinkAccount">
+    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit.prevent="handleLinkAccount">
       <div class="form-group">
         <label class="form-label">Email <span class="text-danger">*</span></label>
         <AppInput
diff --git a/front-end/src/renderer/pages/Files/LinkExistingFile/LinkExistingFile.vue b/front-end/src/renderer/pages/Files/LinkExistingFile/LinkExistingFile.vue
index 7b1bd2b02..df787e0bc 100644
--- a/front-end/src/renderer/pages/Files/LinkExistingFile/LinkExistingFile.vue
+++ b/front-end/src/renderer/pages/Files/LinkExistingFile/LinkExistingFile.vue
@@ -37,9 +37,7 @@ const fileId = ref('');
 const nickname = ref('');
 const description = ref('');
 
-const handleLinkFile = async (e: Event) => {
-  e.preventDefault();
-
+const handleLinkFile = async () => {
   if (isAccountId(fileId.value)) {
     try {
       if (!isUserLoggedIn(user.personal)) {
@@ -76,7 +74,7 @@ const handleLinkFile = async (e: Event) => {
       @click="$router.back()"
       ><i class="bi bi-arrow-left text-subheader me-2"></i> Back</AppButton
     >
-    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit="handleLinkFile">
+    <form class="mt-5 col-12 col-md-8 col-lg-6 col-xxl-4" @submit.prevent="handleLinkFile">
       <div class="form-group">
         <label class="form-label">Hedera File ID <span class="text-danger">*</span></label>
         <AppInput
diff --git a/front-end/src/renderer/pages/Migrate/components/DecryptRecoveryPhraseForm.vue b/front-end/src/renderer/pages/Migrate/components/DecryptRecoveryPhraseForm.vue
index dcebeed2d..3f5cfa490 100644
--- a/front-end/src/renderer/pages/Migrate/components/DecryptRecoveryPhraseForm.vue
+++ b/front-end/src/renderer/pages/Migrate/components/DecryptRecoveryPhraseForm.vue
@@ -29,9 +29,7 @@ const inputRecoveryPhrasePassword = ref('');
 const inputRecoveryPhrasePasswordError = ref<string | null>(null);
 
 /* Handlers */
-const handleOnFormSubmit = async (e: Event) => {
-  e.preventDefault();
-
+const handleOnFormSubmit = async () => {
   const recoveryPhrasePassword = inputRecoveryPhrasePassword.value.trim();
 
   if (recoveryPhrasePassword.length === 0) return;
@@ -44,7 +42,7 @@ const handleOnFormSubmit = async (e: Event) => {
 watch(inputRecoveryPhrasePassword, () => (inputRecoveryPhrasePasswordError.value = null));
 </script>
 <template>
-  <form @submit="handleOnFormSubmit" class="flex-column-100">
+  <form @submit.prevent="handleOnFormSubmit" class="flex-column-100">
     <div class="fill-remaining">
       <p class="text-secondary text-small lh-base text-center">
         Enter your recovery phrase password from the old tool
diff --git a/front-end/src/renderer/pages/Migrate/components/SetupPersonal.vue b/front-end/src/renderer/pages/Migrate/components/SetupPersonal.vue
index 35fe3865d..f12889eb5 100644
--- a/front-end/src/renderer/pages/Migrate/components/SetupPersonal.vue
+++ b/front-end/src/renderer/pages/Migrate/components/SetupPersonal.vue
@@ -119,7 +119,7 @@ const setupPersonal = async ({
 <template>
   <SetupPersonalForm
     :loading="loading"
-    @submit="handleFormSubmit"
+    @submit.prevent="handleFormSubmit"
     @migration:cancel="handleCancel"
   />
 </template>
diff --git a/front-end/src/renderer/pages/Settings/components/WorkGroupsTab.vue b/front-end/src/renderer/pages/Settings/components/WorkGroupsTab.vue
index c15454e3e..6ae2e9b81 100644
--- a/front-end/src/renderer/pages/Settings/components/WorkGroupsTab.vue
+++ b/front-end/src/renderer/pages/Settings/components/WorkGroupsTab.vue
@@ -22,9 +22,7 @@ const newOrganizationServerPublicKey = ref('');
 const organizations = ref<Organization[]>();
 
 /* Handlers */
-const handleAddOrganization = async (e: Event) => {
-  e.preventDefault();
-
+const handleAddOrganization = async () => {
   if (newOrganizationName.value !== '' && newOrganizationServerUrl.value !== '') {
     try {
       await addOrganization({
@@ -47,7 +45,7 @@ onBeforeMount(async () => {
 </script>
 <template>
   <div class="flex-column-100">
-    <form class="p-4 border border-2 rounded-3" @submit="handleAddOrganization">
+    <form class="p-4 border border-2 rounded-3" @submit.prevent="handleAddOrganization">
       <div class="d-flex align-items-center">
         <p class="me-4">Organization name:</p>
         <AppInput :filled="true" class="w-25 py-3" v-model="newOrganizationName" />

From b35722accd67a3285eb9039ed7d42967064c5603 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 11:46:02 +0200
Subject: [PATCH 2/9] refactor: RestoreKey

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/pages/RestoreKey/RestoreKey.vue  | 283 ++----------------
 .../RestoreKey/components/ImportStep.vue      |  58 ++++
 .../RestoreKey/components/RestoreStep.vue     | 126 ++++++++
 .../pages/RestoreKey/components/SaveStep.vue  | 130 ++++++++
 4 files changed, 347 insertions(+), 250 deletions(-)
 create mode 100644 front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
 create mode 100644 front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
 create mode 100644 front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue

diff --git a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
index dca3a4fcf..d04dcd332 100644
--- a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
+++ b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
@@ -1,178 +1,41 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { PrivateKey } from '@hashgraph/sdk';
-import { Prisma } from '@prisma/client';
 
 import useUserStore from '@renderer/stores/storeUser';
-import useContactsStore from '@renderer/stores/storeContacts';
-
-import { useRouter } from 'vue-router';
-import { useToast } from 'vue-toast-notification';
-import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
-import useRecoveryPhraseNickname from '@renderer/composables/useRecoveryPhraseNickname';
 
 import { restorePrivateKey } from '@renderer/services/keyPairService';
 
-import {
-  assertUserLoggedIn,
-  getErrorMessage,
-  getSecretHashFromLocalKeys,
-  getSecretHashFromUploadedKeys,
-  isLoggedInOrganization,
-  safeAwait,
-  safeDuplicateUploadKey,
-} from '@renderer/utils';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
-import AppInput from '@renderer/components/ui/AppInput.vue';
-import Import from '@renderer/components/RecoveryPhrase/Import.vue';
-import RecoveryPhraseNicknameInput from '@renderer/components/RecoveryPhrase/RecoveryPhraseNicknameInput.vue';
+
+import ImportStep from './components/ImportStep.vue';
+import RestoreStep from './components/RestoreStep.vue';
+import SaveStep from './components/SaveStep.vue';
 
 /* Stores */
 const user = useUserStore();
-const contacts = useContactsStore();
 
 /* Composables */
-const toast = useToast();
-const router = useRouter();
 useSetDynamicLayout(LOGGED_IN_LAYOUT);
-const { getPassword, passwordModalOpened } = usePersonalPassword();
-const recoveryPhraseNickname = useRecoveryPhraseNickname();
 
 /* State */
 const step = ref(0);
 const index = ref(0);
-const inputIndexInvalid = ref(false);
-const nickname = ref('');
 const mnemonicHashNickname = ref('');
 const restoredKey = ref<{ privateKey: string; publicKey: string; mnemonicHash: string } | null>(
   null,
 );
 
-const loadingText = ref<string | null>(null);
-
 /* Handlers */
-const handleImportRecoveryPhrase = () => step.value++;
-
-const handleClearWords = () => (user.recoveryPhrase = null);
-
-const handleRestoreKey = async () => {
-  if (!user.recoveryPhrase) {
-    throw new Error('Recovery phrase not found');
-  }
-
-  try {
-    loadingText.value = 'Restoring key pair...';
-
-    const privateKey = await restorePrivateKey(
-      user.recoveryPhrase.words,
-      '',
-      Number(index.value),
-      'ED25519',
-    );
-
-    if (keyExists(privateKey)) {
-      return (inputIndexInvalid.value = true);
-    }
-
-    inputIndexInvalid.value = false;
-    restoredKey.value = {
-      privateKey: privateKey.toStringRaw(),
-      publicKey: privateKey.publicKey.toStringRaw(),
-      mnemonicHash: user.recoveryPhrase.hash,
-    };
-
-    if (isLoggedInOrganization(user.selectedOrganization)) {
-      const alreadyUploadedHash = await getSecretHashFromUploadedKeys(
-        user.recoveryPhrase,
-        user.selectedOrganization.userKeys,
-      );
-      if (alreadyUploadedHash) {
-        restoredKey.value.mnemonicHash = alreadyUploadedHash;
-      }
-    } else {
-      const alreadyStoredHash = await getSecretHashFromLocalKeys(
-        user.recoveryPhrase,
-        user.keyPairs,
-      );
-      if (alreadyStoredHash) {
-        restoredKey.value.mnemonicHash = alreadyStoredHash;
-      }
-    }
 
-    step.value++;
-  } catch (error) {
-    toast.error(getErrorMessage(error, 'Failed to restore private key'));
-  } finally {
-    loadingText.value = null;
-  }
+const handleNickname = (nickname: string) => {
+  mnemonicHashNickname.value = nickname;
 };
 
-const handleSaveKey = async () => {
-  assertUserLoggedIn(user.personal);
-  const personalPassword = getPassword(handleSaveKey, {
-    subHeading: 'Enter your application password to decrypt your key',
-  });
-  if (passwordModalOpened(personalPassword)) return;
-
-  if (!restoredKey.value) {
-    throw new Error('Restored key not found');
-  }
-
-  try {
-    loadingText.value = 'Saving key pair...';
-
-    const keyPair: Prisma.KeyPairUncheckedCreateInput = {
-      user_id: user.personal.id,
-      index: Number(index.value),
-      private_key: restoredKey.value.privateKey,
-      public_key: restoredKey.value.publicKey,
-      type: 'ED25519',
-      organization_id: null,
-      organization_user_id: null,
-      secret_hash: restoredKey.value.mnemonicHash,
-      nickname: nickname.value || null,
-    };
-
-    const keyStored = user.keyPairs.find(k => k.public_key === restoredKey.value?.publicKey);
-    if (isLoggedInOrganization(user.selectedOrganization)) {
-      const keyUploaded = user.selectedOrganization.userKeys.some(
-        k => k.publicKey === restoredKey.value?.publicKey,
-      );
-      if (keyUploaded && keyStored) {
-        throw new Error('Key pair already exists');
-      }
-
-      keyPair.organization_id = user.selectedOrganization.id;
-      keyPair.organization_user_id = user.selectedOrganization.userId;
-
-      await safeDuplicateUploadKey(user.selectedOrganization, {
-        publicKey: restoredKey.value.publicKey,
-        index: keyPair.index,
-        mnemonicHash: restoredKey.value.mnemonicHash,
-      });
-    }
+const handleStepValue = () => step.value++;
 
-    if (!keyStored) {
-      await user.storeKey(keyPair, restoredKey.value.mnemonicHash, personalPassword, false);
-    }
-
-    await safeAwait(
-      recoveryPhraseNickname.set(restoredKey.value.mnemonicHash, mnemonicHashNickname.value),
-    );
-    user.recoveryPhrase = null;
-    await user.refetchUserState();
-
-    toast.success('Key pair saved');
-    router.push({ name: 'settingsKeys' });
-    await safeAwait(contacts.fetch());
-  } catch (error) {
-    toast.error(getErrorMessage(error, 'Failed to store private key'));
-  } finally {
-    loadingText.value = null;
-  }
-};
+const handleClearWords = () => (user.recoveryPhrase = null);
 
 const handleFindEmptyIndex = async () => {
   if (!user.recoveryPhrase) return;
@@ -205,9 +68,6 @@ onBeforeUnmount(() => {
   user.recoveryPhrase = null;
 });
 
-/* Watchers */
-watch(index, () => (inputIndexInvalid.value = false));
-
 watch(step, async newStep => {
   if (newStep === 2) {
     await handleFindEmptyIndex();
@@ -222,114 +82,37 @@ watch(step, async newStep => {
     <div class="flex-centered flex-column-100">
       <Transition name="fade" mode="out-in">
         <!-- Step 1 -->
-        <form v-if="step === 0" @submit.prevent="handleImportRecoveryPhrase" class="fill-remaining">
-          <h1 class="text-display text-bold text-center">Enter your Recovery Phrase</h1>
-          <div class="mt-8">
-            <Import />
-
-            <div class="form-group mt-4">
-              <label class="form-label">Enter Recovery Phrase Nickname</label>
-              <RecoveryPhraseNicknameInput
-                v-model="mnemonicHashNickname"
-                :mnemonic-hash="user.recoveryPhrase?.hash"
-                :filled="true"
-                data-testid="input-recovery-phrase-nickname"
-              />
-            </div>
-
-            <div class="row justify-content-between mt-6">
-              <div class="col-4 d-grid">
-                <AppButton type="button" color="secondary" @click="handleClearWords"
-                  >Clear</AppButton
-                >
-              </div>
-              <div class="col-4 d-grid">
-                <AppButton
-                  color="primary"
-                  data-testid="button-continue-phrase"
-                  :disabled="!user.recoveryPhrase"
-                  type="submit"
-                  >Continue</AppButton
-                >
-              </div>
-            </div>
-          </div>
-        </form>
+        <ImportStep
+          v-if="step === 0"
+          :user="user"
+          @next="
+            (nicknameValue: string) => {
+              handleNickname(nicknameValue);
+              handleStepValue();
+            }
+          "
+          @clear="handleClearWords"
+        />
 
         <!-- Step 2 -->
-        <form
+        <RestoreStep
           v-else-if="step === 1"
-          class="w-100"
-          @submit.prevent="handleRestoreKey"
-          v-focus-first-input
-        >
-          <h1 class="text-display text-bold text-center">Provide Index of Key</h1>
-          <p class="text-main mt-5 text-center">
-            Enter the index of the private key you want to generate from the recovery phrase
-          </p>
-          <div
-            class="mt-5 w-100 d-flex flex-column justify-content-center align-items-center gap-4"
-          >
-            <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
-              <AppInput
-                v-model="index"
-                :filled="true"
-                data-testid="input-index"
-                type="number"
-                :class="{ 'is-invalid': inputIndexInvalid }"
-                placeholder="Enter key index"
-              />
-              <div v-if="inputIndexInvalid" class="invalid-feedback">
-                Key at index {{ index }} is already restored.
-              </div>
-              <AppButton
-                type="submit"
-                data-testid="button-continue-index"
-                color="primary"
-                class="mt-4 d-block w-100"
-                :disabled="index < 0"
-                :loading="Boolean(loadingText)"
-                :loading-text="loadingText || ''"
-                >Continue</AppButton
-              >
-            </div>
-          </div>
-        </form>
+          @next="
+            (key: typeof restoredKey, enteredIndex: number) => {
+              restoredKey = key;
+              index = enteredIndex;
+              handleStepValue();
+            }
+          "
+        />
 
         <!-- Step 3 -->
-        <form
+        <SaveStep
           v-else-if="step === 2"
-          class="w-100"
-          @submit.prevent="handleSaveKey"
-          v-focus-first-input
-        >
-          <h1 class="text-display text-bold text-center">Enter Key Nickname</h1>
-          <p class="text-main mt-5 text-center">
-            You can optionally enter a nickname for the private key generated at {{ index }} to
-            reference it more easily later
-          </p>
-          <div
-            class="mt-5 w-100 d-flex flex-column justify-content-center align-items-center gap-4"
-          >
-            <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
-              <AppInput
-                v-model="nickname"
-                :filled="true"
-                data-testid="input-nickname"
-                placeholder="Enter nickname"
-              />
-              <AppButton
-                type="submit"
-                data-testid="button-continue-nickname"
-                color="primary"
-                class="mt-4 d-block w-100"
-                :loading="Boolean(loadingText)"
-                :loading-text="loadingText || ''"
-                >Continue</AppButton
-              >
-            </div>
-          </div>
-        </form>
+          :restored-key="restoredKey"
+          :mnemonic-hash-nickname="mnemonicHashNickname"
+          :index="index"
+        />
       </Transition>
     </div>
   </div>
diff --git a/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue b/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
new file mode 100644
index 000000000..cc6e7bbfd
--- /dev/null
+++ b/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Import from '@renderer/components/RecoveryPhrase/Import.vue';
+import RecoveryPhraseNicknameInput from '@renderer/components/RecoveryPhrase/RecoveryPhraseNicknameInput.vue';
+import AppButton from '@renderer/components/ui/AppButton.vue';
+import useUserStore from '@renderer/stores/storeUser';
+
+const { user } = defineProps<{
+  user: ReturnType<typeof useUserStore>;
+}>();
+
+/* Emits */
+const emit = defineEmits(['next', 'clear']);
+
+/* State */
+const mnemonicHashNickname = ref('');
+
+/* Handlers */
+const handleImportRecoveryPhrase = () => {
+  emit('next', mnemonicHashNickname.value);
+};
+const handleClearWords = () => {
+  emit('clear');
+};
+</script>
+
+<template>
+  <form @submit.prevent="handleImportRecoveryPhrase" class="fill-remaining">
+    <h1 class="text-display text-bold text-center">Enter your Recovery Phrase</h1>
+    <div class="mt-8">
+      <Import />
+      <div class="form-group mt-4">
+        <label class="form-label">Enter Recovery Phrase Nickname</label>
+        <RecoveryPhraseNicknameInput
+          v-model="mnemonicHashNickname"
+          :mnemonic-hash="user.recoveryPhrase?.hash"
+          :filled="true"
+          data-testid="input-recovery-phrase-nickname"
+        />
+      </div>
+      <div class="row justify-content-between mt-6">
+        <div class="col-4 d-grid">
+          <AppButton type="button" color="secondary" @click="handleClearWords">Clear</AppButton>
+        </div>
+        <div class="col-4 d-grid">
+          <AppButton
+            color="primary"
+            data-testid="button-continue-phrase"
+            type="submit"
+            :disabled="!user.recoveryPhrase"
+          >
+            Continue
+          </AppButton>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
new file mode 100644
index 000000000..f789dc1c1
--- /dev/null
+++ b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import AppInput from '@renderer/components/ui/AppInput.vue';
+import AppButton from '@renderer/components/ui/AppButton.vue';
+import { ref, watch } from 'vue';
+import useUserStore from '@renderer/stores/storeUser';
+import { restorePrivateKey } from '@renderer/services/keyPairService';
+import { PrivateKey } from '@hashgraph/sdk';
+import {
+  getErrorMessage,
+  getSecretHashFromLocalKeys,
+  getSecretHashFromUploadedKeys,
+  isLoggedInOrganization,
+} from '@renderer/utils';
+import { useToast } from 'vue-toast-notification';
+
+/* Stores */
+const user = useUserStore();
+
+/* Emits */
+const emit = defineEmits(['next']);
+
+/* Composables */
+const toast = useToast();
+
+/* State */
+const index = ref(0);
+const inputIndexInvalid = ref(false);
+const loadingText = ref<string | null>(null);
+const restoredKey = ref<{ privateKey: string; publicKey: string; mnemonicHash: string } | null>(
+  null,
+);
+
+/* Handlers */
+const handleRestoreKey = async () => {
+  if (!user.recoveryPhrase) {
+    throw new Error('Recovery phrase not found');
+  }
+
+  try {
+    loadingText.value = 'Restoring key pair...';
+
+    const privateKey = await restorePrivateKey(
+      user.recoveryPhrase.words,
+      '',
+      Number(index.value),
+      'ED25519',
+    );
+
+    if (keyExists(privateKey)) {
+      return (inputIndexInvalid.value = true);
+    }
+
+    inputIndexInvalid.value = false;
+    restoredKey.value = {
+      privateKey: privateKey.toStringRaw(),
+      publicKey: privateKey.publicKey.toStringRaw(),
+      mnemonicHash: user.recoveryPhrase.hash,
+    };
+
+    if (isLoggedInOrganization(user.selectedOrganization)) {
+      const alreadyUploadedHash = await getSecretHashFromUploadedKeys(
+        user.recoveryPhrase,
+        user.selectedOrganization.userKeys,
+      );
+      if (alreadyUploadedHash) {
+        restoredKey.value.mnemonicHash = alreadyUploadedHash;
+      }
+    } else {
+      const alreadyStoredHash = await getSecretHashFromLocalKeys(
+        user.recoveryPhrase,
+        user.keyPairs,
+      );
+      if (alreadyStoredHash) {
+        restoredKey.value.mnemonicHash = alreadyStoredHash;
+      }
+    }
+  } catch (error) {
+    toast.error(getErrorMessage(error, 'Failed to restore private key'));
+  } finally {
+    loadingText.value = null;
+    emit('next', restoredKey.value, index.value);
+  }
+};
+
+/* Functions */
+const keyExists = (privateKey: PrivateKey) => {
+  return user.keyPairs.some(kp => kp.public_key === privateKey.publicKey.toStringRaw());
+};
+
+/* Watchers */
+watch(index, () => (inputIndexInvalid.value = false));
+</script>
+
+<template>
+  <form class="w-100" @submit.prevent="handleRestoreKey" v-focus-first-input>
+    <h1 class="text-display text-bold text-center">Provide Index of Key</h1>
+    <p class="text-main mt-5 text-center">
+      Enter the index of the private key you want to generate from the recovery phrase
+    </p>
+    <div class="mt-5 w-100 d-flex flex-column justify-content-center align-items-center gap-4">
+      <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
+        <AppInput
+          v-model="index"
+          :filled="true"
+          data-testid="input-index"
+          type="number"
+          :class="{ 'is-invalid': inputIndexInvalid }"
+          placeholder="Enter key index"
+        />
+        <div v-if="inputIndexInvalid" class="invalid-feedback">
+          Key at index {{ index }} is already restored.
+        </div>
+        <AppButton
+          type="submit"
+          data-testid="button-continue-index"
+          color="primary"
+          class="mt-4 d-block w-100"
+          :disabled="index < 0"
+          :loading="Boolean(loadingText)"
+          :loading-text="loadingText || ''"
+          >Continue</AppButton
+        >
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue b/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue
new file mode 100644
index 000000000..577e07c51
--- /dev/null
+++ b/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import AppInput from '@renderer/components/ui/AppInput.vue';
+import AppButton from '@renderer/components/ui/AppButton.vue';
+import { ref } from 'vue';
+import useUserStore from '@renderer/stores/storeUser';
+import {
+  assertUserLoggedIn,
+  getErrorMessage,
+  isLoggedInOrganization,
+  safeAwait,
+  safeDuplicateUploadKey,
+} from '@renderer/utils';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
+import { Prisma } from '@prisma/client';
+import { useToast } from 'vue-toast-notification';
+import useRecoveryPhraseNickname from '@renderer/composables/useRecoveryPhraseNickname';
+import { useRouter } from 'vue-router';
+
+const { restoredKey, mnemonicHashNickname, index } = defineProps<{
+  restoredKey: { privateKey: string; publicKey: string; mnemonicHash: string } | null;
+  mnemonicHashNickname: string;
+  index: number;
+}>();
+
+/* Stores */
+const user = useUserStore();
+
+/* Composables */
+const recoveryPhraseNickname = useRecoveryPhraseNickname();
+const router = useRouter();
+const toast = useToast();
+const { getPassword, passwordModalOpened } = usePersonalPassword();
+
+/* State */
+const nickname = ref('');
+const loadingText = ref<string | null>(null);
+
+/* Handlerss */
+const handleSaveKey = async () => {
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleSaveKey, {
+    subHeading: 'Enter your application password to decrypt your key',
+  });
+  if (passwordModalOpened(personalPassword)) return;
+
+  if (!restoredKey) {
+    throw new Error('Restored key not found');
+  }
+
+  try {
+    loadingText.value = 'Saving key pair...';
+
+    const keyPair: Prisma.KeyPairUncheckedCreateInput = {
+      user_id: user.personal.id,
+      index: Number(index),
+      private_key: restoredKey.privateKey,
+      public_key: restoredKey.publicKey,
+      type: 'ED25519',
+      organization_id: null,
+      organization_user_id: null,
+      secret_hash: restoredKey.mnemonicHash,
+      nickname: nickname.value || null,
+    };
+
+    const keyStored = user.keyPairs.find(k => k.public_key === restoredKey.publicKey);
+    if (isLoggedInOrganization(user.selectedOrganization)) {
+      const keyUploaded = user.selectedOrganization.userKeys.some(
+        k => k.publicKey === restoredKey.publicKey,
+      );
+      if (keyUploaded && keyStored) {
+        throw new Error('Key pair already exists');
+      }
+
+      keyPair.organization_id = user.selectedOrganization.id;
+      keyPair.organization_user_id = user.selectedOrganization.userId;
+
+      await safeDuplicateUploadKey(user.selectedOrganization, {
+        publicKey: restoredKey.publicKey,
+        index: keyPair.index,
+        mnemonicHash: restoredKey.mnemonicHash,
+      });
+    }
+
+    if (!keyStored) {
+      await user.storeKey(keyPair, restoredKey.mnemonicHash, personalPassword, false);
+    }
+
+    await safeAwait(recoveryPhraseNickname.set(restoredKey.mnemonicHash, mnemonicHashNickname));
+    user.recoveryPhrase = null;
+    await user.refetchUserState();
+
+    toast.success('Key pair saved');
+    router.push({ name: 'settingsKeys' });
+  } catch (error) {
+    toast.error(getErrorMessage(error, 'Failed to store private key'));
+  } finally {
+    loadingText.value = null;
+  }
+};
+</script>
+
+<template>
+  <form class="w-100" @submit.prevent="handleSaveKey" v-focus-first-input>
+    <h1 class="text-display text-bold text-center">Enter Key Nickname</h1>
+    <p class="text-main mt-5 text-center">
+      You can optionally enter a nickname for the private key generated at {{ index }} to reference
+      it more easily later.
+    </p>
+    <div class="mt-5 w-100 d-flex flex-column justify-content-center align-items-center gap-4">
+      <div class="col-12 col-md-8 col-lg-6 col-xxl-4">
+        <AppInput
+          v-model="nickname"
+          :filled="true"
+          data-testid="input-nickname"
+          placeholder="Enter nickname"
+        />
+        <AppButton
+          type="submit"
+          data-testid="button-continue-nickname"
+          color="primary"
+          class="mt-4 d-block w-100"
+          :loading="Boolean(loadingText)"
+          :loading-text="loadingText || ''"
+        >
+          Continue
+        </AppButton>
+      </div>
+    </div>
+  </form>
+</template>

From a1418732285c28cf4e997f5f1df3a3d3f9538db5 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 11:46:02 +0200
Subject: [PATCH 3/9] fix: variable type

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../src/renderer/pages/RestoreKey/components/RestoreStep.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
index f789dc1c1..72329b0de 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
@@ -78,7 +78,7 @@ const handleRestoreKey = async () => {
     toast.error(getErrorMessage(error, 'Failed to restore private key'));
   } finally {
     loadingText.value = null;
-    emit('next', restoredKey.value, index.value);
+    emit('next', restoredKey.value, Number(index.value));
   }
 };
 

From 34e62e0c123c56a29d48607892d025b6536e321b Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 11:46:02 +0200
Subject: [PATCH 4/9] feat: ButtonGroup component

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/components/ui/ButtonGroup.vue    | 40 ++++++++++++
 .../GeneralTab/components/NetworkSettings.vue | 62 +++++++++----------
 2 files changed, 70 insertions(+), 32 deletions(-)
 create mode 100644 front-end/src/renderer/components/ui/ButtonGroup.vue

diff --git a/front-end/src/renderer/components/ui/ButtonGroup.vue b/front-end/src/renderer/components/ui/ButtonGroup.vue
new file mode 100644
index 000000000..71be3c8f3
--- /dev/null
+++ b/front-end/src/renderer/components/ui/ButtonGroup.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import AppButton from '@renderer/components/ui/AppButton.vue';
+
+/* Props */
+const props = defineProps<{
+  items: { label: string; value: string | number; active?: boolean }[];
+  activeValue: string | number;
+  color?: 'primary' | 'secondary' | 'borderless' | 'danger';
+}>();
+
+/* Emits */
+const emit = defineEmits(['change']);
+
+/* Handlers */
+const handleButtonClick = (value: string | number) => {
+  if (value !== props.activeValue) {
+    emit('change', value);
+  }
+};
+</script>
+
+<template>
+  <div class="btn-group-container" role="group">
+    <div class="btn-group gap-3 overflow-x-auto w-100">
+      <template v-for="item in items" :key="item.value">
+        <AppButton
+          class="rounded-3"
+          :class="{
+            active: activeValue === item.value,
+            'text-body': activeValue !== item.value,
+          }"
+          :color="activeValue === item.value ? color : undefined"
+          @click="handleButtonClick(item.value)"
+        >
+          {{ item.label }}
+        </AppButton>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
index b714b26d0..c7ee4036f 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
@@ -15,8 +15,9 @@ import { add, getStoredClaim, update } from '@renderer/services/claimService';
 
 import { isUserLoggedIn } from '@renderer/utils';
 
-import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
+import ButtonGroup from '@renderer/components/ui/ButtonGroup.vue';
+import { useToast } from 'vue-toast-notification';
 
 /* Stores */
 const user = useUserStore();
@@ -24,6 +25,7 @@ const networkStore = useNetworkStore();
 
 /* Composables */
 const withLoader = useLoader();
+const toast = useToast();
 
 /* State */
 const mirrorNodeInputRef = ref<InstanceType<typeof AppInput> | null>(null);
@@ -49,8 +51,12 @@ const handleNetworkChange = async (network: Network) => {
 };
 
 const handleCommonNetwork = async (network: Network) => {
-  isCustomSettingsVisible.value = false;
-  await handleNetworkChange(network);
+  try {
+    isCustomSettingsVisible.value = false;
+    await handleNetworkChange(network);
+  } catch (error: any) {
+    toast.error(error.message);
+  }
 };
 
 const handleToggleCustomNetwork = async () => {
@@ -113,35 +119,27 @@ onBeforeMount(() => {
 <template>
   <div class="fill-remaining border border-2 rounded-3 p-4">
     <p>Network</p>
-    <div class="btn-group-container mt-4" role="group">
-      <div class="btn-group gap-3 overflow-x-auto w-100">
-        <template v-for="network in CommonNetwork" :key="network">
-          <AppButton
-            class="rounded-3 text-nowrap"
-            :class="{
-              active: networkStore.network === network && !isCustomSettingsVisible,
-              'text-body': networkStore.network !== network && !isCustomSettingsVisible,
-            }"
-            :color="
-              networkStore.network === network && !isCustomSettingsVisible ? 'primary' : undefined
-            "
-            @click="handleCommonNetwork(network)"
-            :data-testid="`tab-network-${network}`"
-            >{{ CommonNetworkNames[network] }}</AppButton
-          >
-        </template>
-        <AppButton
-          :color="isCustomActive || isCustomSettingsVisible ? 'primary' : undefined"
-          data-testid="tab-network-custom"
-          class="rounded-3 text-nowrap"
-          :class="{
-            active: isCustomActive,
-            'text-body': !isCustomActive,
-          }"
-          @click="handleToggleCustomNetwork"
-          >Custom</AppButton
-        >
-      </div>
+    <div class="mt-4">
+      <ButtonGroup
+        :items="[
+          ...Object.values(CommonNetwork).map(network => ({
+            label: CommonNetworkNames[network],
+            value: network,
+          })),
+          { label: 'Custom', value: 'custom' },
+        ]"
+        :activeValue="isCustomSettingsVisible ? 'custom' : networkStore.network"
+        color="primary"
+        @change="
+          value => {
+            if (value === 'custom') {
+              handleToggleCustomNetwork();
+            } else {
+              handleCommonNetwork(value);
+            }
+          }
+        "
+      />
     </div>
     <Transition name="fade" mode="out-in">
       <div v-show="isCustomSettingsVisible" class="mt-4">

From 6b7ca59ecd68213e75d7fb12f26a0fb17f3decb4 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 11:46:02 +0200
Subject: [PATCH 5/9] refactor: AppearanceSettings

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../components/AppearanceSettings.vue         | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
index 45ef99729..9058b35aa 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
@@ -3,7 +3,7 @@ import type { Theme } from '@main/shared/interfaces';
 
 import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
 
-import AppButton from '@renderer/components/ui/AppButton.vue';
+import ButtonGroup from '@renderer/components/ui/ButtonGroup.vue';
 
 /* State */
 const theme = ref<Theme>('light');
@@ -42,19 +42,13 @@ const themeNames: Record<Theme, string> = {
   <!-- Appearance -->
   <div class="p-4 border border-2 rounded-3 mt-5">
     <p>Appearance</p>
-    <div class="btn-group-container d-inline-flex mw-100 mt-4" role="group">
-      <div class="btn-group gap-3 overflow-x-auto">
-        <template v-for="themeItem of themes" :key="themeItem">
-          <AppButton
-            class="rounded-3"
-            :class="{ active: theme === themeItem, 'text-body': theme !== themeItem }"
-            :color="theme === themeItem ? 'primary' : undefined"
-            @click="handleThemeChange(themeItem)"
-            :data-testid="`tab-appearance-${themeItem}`"
-            >{{ themeNames[themeItem] }}</AppButton
-          >
-        </template>
-      </div>
+    <div class="d-inline-flex mw-100 mt-4">
+      <ButtonGroup
+        :items="themes.map(themeItem => ({ label: themeNames[themeItem], value: themeItem }))"
+        :activeValue="theme"
+        color="primary"
+        @change="handleThemeChange"
+      />
     </div>
   </div>
 </template>

From 8e4feb39a4028f24f522c69c51327e26028cb2a1 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 13:42:16 +0200
Subject: [PATCH 6/9] fix: ButtonGroup data-testid

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 front-end/src/renderer/components/ui/ButtonGroup.vue      | 3 ++-
 .../GeneralTab/components/AppearanceSettings.vue          | 8 +++++++-
 .../components/GeneralTab/components/NetworkSettings.vue  | 3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/front-end/src/renderer/components/ui/ButtonGroup.vue b/front-end/src/renderer/components/ui/ButtonGroup.vue
index 71be3c8f3..e43e90c4e 100644
--- a/front-end/src/renderer/components/ui/ButtonGroup.vue
+++ b/front-end/src/renderer/components/ui/ButtonGroup.vue
@@ -3,7 +3,7 @@ import AppButton from '@renderer/components/ui/AppButton.vue';
 
 /* Props */
 const props = defineProps<{
-  items: { label: string; value: string | number; active?: boolean }[];
+  items: { label: string; value: string | number; active?: boolean; id: string }[];
   activeValue: string | number;
   color?: 'primary' | 'secondary' | 'borderless' | 'danger';
 }>();
@@ -31,6 +31,7 @@ const handleButtonClick = (value: string | number) => {
           }"
           :color="activeValue === item.value ? color : undefined"
           @click="handleButtonClick(item.value)"
+          :data-testid="item.id"
         >
           {{ item.label }}
         </AppButton>
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
index 9058b35aa..fe711e082 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
@@ -44,7 +44,13 @@ const themeNames: Record<Theme, string> = {
     <p>Appearance</p>
     <div class="d-inline-flex mw-100 mt-4">
       <ButtonGroup
-        :items="themes.map(themeItem => ({ label: themeNames[themeItem], value: themeItem }))"
+        :items="
+          themes.map(themeItem => ({
+            label: themeNames[themeItem],
+            value: themeItem,
+            id: `tab-appearance-${themeItem}`,
+          }))
+        "
         :activeValue="theme"
         color="primary"
         @change="handleThemeChange"
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
index c7ee4036f..69e33cdba 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
@@ -125,8 +125,9 @@ onBeforeMount(() => {
           ...Object.values(CommonNetwork).map(network => ({
             label: CommonNetworkNames[network],
             value: network,
+            id: `tab-network-${network}`,
           })),
-          { label: 'Custom', value: 'custom' },
+          { label: 'Custom', value: 'custom', id: `tab-network-custom` },
         ]"
         :activeValue="isCustomSettingsVisible ? 'custom' : networkStore.network"
         color="primary"

From fba88265ea33074d01e7cbadb255221c3f0f07d5 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 17:22:09 +0200
Subject: [PATCH 7/9] fix: RestoreKey

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/components/ui/ButtonGroup.vue    |  4 +-
 .../renderer/pages/RestoreKey/RestoreKey.vue  | 37 +---------------
 .../RestoreKey/components/RestoreStep.vue     | 40 +++++++++++++++---
 .../pages/RestoreKey/components/SaveStep.vue  | 13 ++++--
 .../GeneralTab/components/NetworkSettings.vue | 42 +++++++++----------
 5 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/front-end/src/renderer/components/ui/ButtonGroup.vue b/front-end/src/renderer/components/ui/ButtonGroup.vue
index e43e90c4e..b369b3c36 100644
--- a/front-end/src/renderer/components/ui/ButtonGroup.vue
+++ b/front-end/src/renderer/components/ui/ButtonGroup.vue
@@ -9,7 +9,9 @@ const props = defineProps<{
 }>();
 
 /* Emits */
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  (event: 'change', value: string | number): void;
+}>();
 
 /* Handlers */
 const handleButtonClick = (value: string | number) => {
diff --git a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
index d04dcd332..b11af9256 100644
--- a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
+++ b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue';
-import { PrivateKey } from '@hashgraph/sdk';
+import { onBeforeUnmount, ref } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 import useSetDynamicLayout, { LOGGED_IN_LAYOUT } from '@renderer/composables/useSetDynamicLayout';
 
-import { restorePrivateKey } from '@renderer/services/keyPairService';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 
 import ImportStep from './components/ImportStep.vue';
@@ -37,42 +34,10 @@ const handleStepValue = () => step.value++;
 
 const handleClearWords = () => (user.recoveryPhrase = null);
 
-const handleFindEmptyIndex = async () => {
-  if (!user.recoveryPhrase) return;
-
-  let exists = false;
-  do {
-    const privateKey = await restorePrivateKey(
-      user.recoveryPhrase.words,
-      '',
-      Number(index.value),
-      'ED25519',
-    );
-
-    if (keyExists(privateKey)) {
-      index.value++;
-      exists = true;
-    } else {
-      exists = false;
-    }
-  } while (exists);
-};
-
-/* Functions */
-const keyExists = (privateKey: PrivateKey) => {
-  return user.keyPairs.some(kp => kp.public_key === privateKey.publicKey.toStringRaw());
-};
-
 /* Hooks */
 onBeforeUnmount(() => {
   user.recoveryPhrase = null;
 });
-
-watch(step, async newStep => {
-  if (newStep === 2) {
-    await handleFindEmptyIndex();
-  }
-});
 </script>
 <template>
   <div class="flex-column-100 p-8">
diff --git a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
index 72329b0de..0f598bf77 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { onBeforeMount, onMounted, ref, watch } from 'vue';
+
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import AppButton from '@renderer/components/ui/AppButton.vue';
-import { ref, watch } from 'vue';
+
 import useUserStore from '@renderer/stores/storeUser';
+
 import { restorePrivateKey } from '@renderer/services/keyPairService';
 import { PrivateKey } from '@hashgraph/sdk';
+
 import {
   getErrorMessage,
   getSecretHashFromLocalKeys,
@@ -13,12 +17,12 @@ import {
 } from '@renderer/utils';
 import { useToast } from 'vue-toast-notification';
 
-/* Stores */
-const user = useUserStore();
-
 /* Emits */
 const emit = defineEmits(['next']);
 
+/* Stores */
+const user = useUserStore();
+
 /* Composables */
 const toast = useToast();
 
@@ -38,6 +42,7 @@ const handleRestoreKey = async () => {
 
   try {
     loadingText.value = 'Restoring key pair...';
+    //await handleFindEmptyIndex();
 
     const privateKey = await restorePrivateKey(
       user.recoveryPhrase.words,
@@ -74,19 +79,44 @@ const handleRestoreKey = async () => {
         restoredKey.value.mnemonicHash = alreadyStoredHash;
       }
     }
+
+    emit('next', restoredKey.value, Number(index.value));
   } catch (error) {
     toast.error(getErrorMessage(error, 'Failed to restore private key'));
   } finally {
     loadingText.value = null;
-    emit('next', restoredKey.value, Number(index.value));
   }
 };
 
+const handleFindEmptyIndex = async () => {
+  if (!user.recoveryPhrase) return;
+
+  let exists = false;
+  do {
+    const privateKey = await restorePrivateKey(
+      user.recoveryPhrase.words,
+      '',
+      Number(index.value),
+      'ED25519',
+    );
+
+    if (keyExists(privateKey)) {
+      index.value++;
+      exists = true;
+    } else {
+      exists = false;
+    }
+  } while (exists);
+};
+
 /* Functions */
 const keyExists = (privateKey: PrivateKey) => {
   return user.keyPairs.some(kp => kp.public_key === privateKey.publicKey.toStringRaw());
 };
 
+onMounted(async () => {
+  await handleFindEmptyIndex();
+});
 /* Watchers */
 watch(index, () => (inputIndexInvalid.value = false));
 </script>
diff --git a/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue b/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue
index 577e07c51..f7a5d372f 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/SaveStep.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import AppInput from '@renderer/components/ui/AppInput.vue';
-import AppButton from '@renderer/components/ui/AppButton.vue';
 import { ref } from 'vue';
+import { Prisma } from '@prisma/client';
+
 import useUserStore from '@renderer/stores/storeUser';
+
 import {
   assertUserLoggedIn,
   getErrorMessage,
@@ -10,12 +11,16 @@ import {
   safeAwait,
   safeDuplicateUploadKey,
 } from '@renderer/utils';
-import usePersonalPassword from '@renderer/composables/usePersonalPassword';
-import { Prisma } from '@prisma/client';
+
 import { useToast } from 'vue-toast-notification';
 import useRecoveryPhraseNickname from '@renderer/composables/useRecoveryPhraseNickname';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 import { useRouter } from 'vue-router';
 
+import AppInput from '@renderer/components/ui/AppInput.vue';
+import AppButton from '@renderer/components/ui/AppButton.vue';
+
+/* Props */
 const { restoredKey, mnemonicHashNickname, index } = defineProps<{
   restoredKey: { privateKey: string; publicKey: string; mnemonicHash: string } | null;
   mnemonicHashNickname: string;
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
index 69e33cdba..649428b6d 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/NetworkSettings.vue
@@ -17,7 +17,6 @@ import { isUserLoggedIn } from '@renderer/utils';
 
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import ButtonGroup from '@renderer/components/ui/ButtonGroup.vue';
-import { useToast } from 'vue-toast-notification';
 
 /* Stores */
 const user = useUserStore();
@@ -25,7 +24,6 @@ const networkStore = useNetworkStore();
 
 /* Composables */
 const withLoader = useLoader();
-const toast = useToast();
 
 /* State */
 const mirrorNodeInputRef = ref<InstanceType<typeof AppInput> | null>(null);
@@ -44,6 +42,15 @@ const isCustomActive = computed(
     ].includes(networkStore.network),
 );
 
+const networkButtons = computed(() => [
+  ...Object.values(CommonNetwork).map(network => ({
+    label: CommonNetworkNames[network],
+    value: network,
+    id: `tab-network-${network}`,
+  })),
+  { label: 'Custom', value: 'custom', id: `tab-network-custom` },
+]);
+
 /* Handlers */
 const handleNetworkChange = async (network: Network) => {
   await networkStore.setNetwork(network);
@@ -51,12 +58,8 @@ const handleNetworkChange = async (network: Network) => {
 };
 
 const handleCommonNetwork = async (network: Network) => {
-  try {
-    isCustomSettingsVisible.value = false;
-    await handleNetworkChange(network);
-  } catch (error: any) {
-    toast.error(error.message);
-  }
+  isCustomSettingsVisible.value = false;
+  await handleNetworkChange(network);
 };
 
 const handleToggleCustomNetwork = async () => {
@@ -89,6 +92,14 @@ const updateSelectedNetwork = async (network: Network) => {
   await addOrUpdate(user.personal.id, SELECTED_NETWORK, network);
 };
 
+const handleChange = (network: Network) => {
+  if (network === 'custom') {
+    handleToggleCustomNetwork();
+  } else {
+    handleCommonNetwork(network);
+  }
+};
+
 /* Functions */
 const formatMirrorNodeBaseURL = (url: string) => {
   return url
@@ -121,23 +132,12 @@ onBeforeMount(() => {
     <p>Network</p>
     <div class="mt-4">
       <ButtonGroup
-        :items="[
-          ...Object.values(CommonNetwork).map(network => ({
-            label: CommonNetworkNames[network],
-            value: network,
-            id: `tab-network-${network}`,
-          })),
-          { label: 'Custom', value: 'custom', id: `tab-network-custom` },
-        ]"
+        :items="networkButtons"
         :activeValue="isCustomSettingsVisible ? 'custom' : networkStore.network"
         color="primary"
         @change="
           value => {
-            if (value === 'custom') {
-              handleToggleCustomNetwork();
-            } else {
-              handleCommonNetwork(value);
-            }
+            handleChange(value as string);
           }
         "
       />

From d1e35da82ba8f7fdd51fb20d870b7f240cb9fa98 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 18:45:54 +0200
Subject: [PATCH 8/9] fix: handleFindEmptyIndex

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/pages/RestoreKey/components/RestoreStep.vue   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
index 0f598bf77..9d06ec021 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import AppButton from '@renderer/components/ui/AppButton.vue';
@@ -42,7 +42,6 @@ const handleRestoreKey = async () => {
 
   try {
     loadingText.value = 'Restoring key pair...';
-    //await handleFindEmptyIndex();
 
     const privateKey = await restorePrivateKey(
       user.recoveryPhrase.words,
@@ -114,9 +113,11 @@ const keyExists = (privateKey: PrivateKey) => {
   return user.keyPairs.some(kp => kp.public_key === privateKey.publicKey.toStringRaw());
 };
 
-onMounted(async () => {
+/* Lifecycle */
+onBeforeMount(async () => {
   await handleFindEmptyIndex();
 });
+
 /* Watchers */
 watch(index, () => (inputIndexInvalid.value = false));
 </script>

From 5b143e51891b37b866eb2aa21c50814b1386c226 Mon Sep 17 00:00:00 2001
From: Hristiyan <hristiyan.valkov@limechain.tech>
Date: Mon, 20 Jan 2025 19:14:18 +0200
Subject: [PATCH 9/9] fix: RestoreKey types, imports

Signed-off-by: Hristiyan <hristiyan.valkov@limechain.tech>
---
 .../renderer/pages/RestoreKey/RestoreKey.vue  | 13 +++++-----
 .../RestoreKey/components/ImportStep.vue      | 14 +++++++----
 .../RestoreKey/components/RestoreStep.vue     |  8 +++++-
 .../components/AppearanceSettings.vue         | 25 ++++++++++++-------
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
index b11af9256..ae7c997f4 100644
--- a/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
+++ b/front-end/src/renderer/pages/RestoreKey/RestoreKey.vue
@@ -26,11 +26,11 @@ const restoredKey = ref<{ privateKey: string; publicKey: string; mnemonicHash: s
 
 /* Handlers */
 
-const handleNickname = (nickname: string) => {
+const handleMnemonicHashNickname = (nickname: string) => {
   mnemonicHashNickname.value = nickname;
 };
 
-const handleStepValue = () => step.value++;
+const handleNextStep = () => step.value++;
 
 const handleClearWords = () => (user.recoveryPhrase = null);
 
@@ -49,11 +49,10 @@ onBeforeUnmount(() => {
         <!-- Step 1 -->
         <ImportStep
           v-if="step === 0"
-          :user="user"
           @next="
-            (nicknameValue: string) => {
-              handleNickname(nicknameValue);
-              handleStepValue();
+            (mnemonicHashNickname: string) => {
+              handleMnemonicHashNickname(mnemonicHashNickname);
+              handleNextStep();
             }
           "
           @clear="handleClearWords"
@@ -66,7 +65,7 @@ onBeforeUnmount(() => {
             (key: typeof restoredKey, enteredIndex: number) => {
               restoredKey = key;
               index = enteredIndex;
-              handleStepValue();
+              handleNextStep();
             }
           "
         />
diff --git a/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue b/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
index cc6e7bbfd..97d5bcd1e 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/ImportStep.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+
+import useUserStore from '@renderer/stores/storeUser';
+
 import Import from '@renderer/components/RecoveryPhrase/Import.vue';
 import RecoveryPhraseNicknameInput from '@renderer/components/RecoveryPhrase/RecoveryPhraseNicknameInput.vue';
 import AppButton from '@renderer/components/ui/AppButton.vue';
-import useUserStore from '@renderer/stores/storeUser';
 
-const { user } = defineProps<{
-  user: ReturnType<typeof useUserStore>;
-}>();
+const user = useUserStore();
 
 /* Emits */
-const emit = defineEmits(['next', 'clear']);
+const emit = defineEmits<{
+  (event: 'next', nickname: string): void;
+  (event: 'clear'): void;
+}>();
 
 /* State */
 const mnemonicHashNickname = ref('');
@@ -19,6 +22,7 @@ const mnemonicHashNickname = ref('');
 const handleImportRecoveryPhrase = () => {
   emit('next', mnemonicHashNickname.value);
 };
+
 const handleClearWords = () => {
   emit('clear');
 };
diff --git a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
index 9d06ec021..8a461e5c5 100644
--- a/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
+++ b/front-end/src/renderer/pages/RestoreKey/components/RestoreStep.vue
@@ -18,7 +18,13 @@ import {
 import { useToast } from 'vue-toast-notification';
 
 /* Emits */
-const emit = defineEmits(['next']);
+const emit = defineEmits<{
+  (
+    event: 'next',
+    key: { privateKey: string; publicKey: string; mnemonicHash: string } | null,
+    enteredIndex: number,
+  ): void;
+}>();
 
 /* Stores */
 const user = useUserStore();
diff --git a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
index fe711e082..59ea08d63 100644
--- a/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
+++ b/front-end/src/renderer/pages/Settings/components/GeneralTab/components/AppearanceSettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Theme } from '@main/shared/interfaces';
 
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';
 
 import ButtonGroup from '@renderer/components/ui/ButtonGroup.vue';
 
@@ -13,6 +13,15 @@ const handleThemeChange = (newTheme: Theme) => {
   window.electronAPI.local.theme.toggle(newTheme);
 };
 
+/* Computed */
+const themeButtons = computed(() =>
+  themes.map(themeItem => ({
+    label: themeNames[themeItem],
+    value: themeItem,
+    id: `tab-appearance-${themeItem}`,
+  })),
+);
+
 /* Hooks */
 onBeforeMount(async () => {
   onUpdateUnsubscribe.value = window.electronAPI.local.theme.onThemeUpdate(
@@ -44,16 +53,14 @@ const themeNames: Record<Theme, string> = {
     <p>Appearance</p>
     <div class="d-inline-flex mw-100 mt-4">
       <ButtonGroup
-        :items="
-          themes.map(themeItem => ({
-            label: themeNames[themeItem],
-            value: themeItem,
-            id: `tab-appearance-${themeItem}`,
-          }))
-        "
+        :items="themeButtons"
         :activeValue="theme"
         color="primary"
-        @change="handleThemeChange"
+        @change="
+          value => {
+            handleThemeChange(value as Theme);
+          }
+        "
       />
     </div>
   </div>