refactor: create composables for globally injected items

front-end/src/renderer/components/GlobalAppProcesses/GlobalAppProcesses.vue

@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
-
-import { inject, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import { MIGRATION_STARTED } from '@main/shared/constants';
 
 import useUserStore from '@renderer/stores/storeUser';
 
-import { useToast } from 'vue-toast-notification';
 import useAutoLogin from '@renderer/composables/useAutoLogin';
+import useLoader from '@renderer/composables/useLoader';
 
 import { getUseKeychain } from '@renderer/services/safeStorageService';
 import { getUsersCount, resetDataLocal } from '@renderer/services/userService';
 import { getStoredClaim } from '@renderer/services/claimService';
 
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
-
-import { withLoader } from '@renderer/utils';
-
 import AutoLoginInOrganization from '@renderer/components/Organization/AutoLoginInOrganization.vue';
 import AppUpdate from './components/AppUpdate.vue';
 import ImportantNote from './components/ImportantNote.vue';
@@ -27,12 +21,9 @@ import BeginDataMigration from './components/BeginDataMigration.vue';
 /* Stores */
 const user = useUserStore();
 
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
-
 /* Composables */
-const toast = useToast();
 const tryAutoLogin = useAutoLogin();
+const withLoader = useLoader();
 
 /* State */
 const importantNoteRef = ref<InstanceType<typeof ImportantNote> | null>(null);
@@ -58,9 +49,9 @@ const handleBeginMigrationReadyState = async (ready: boolean) => {
   }
 };
 
-const handleDetectKeychainReadyState = () => {
+const handleDetectKeychainReadyState = async () => {
   detectKeychainReady.value = true;
-  withLoader(tryAutoLogin, toast, globalModalLoaderRef?.value)();
+  await withLoader(tryAutoLogin);
 };
 
 /* Hooks */

front-end/src/renderer/components/Header.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
 import type { Network } from '@main/shared/interfaces';
-import type { GLOBAL_MODAL_LOADER_TYPE } from '@renderer/providers';
 
-import { inject, onUpdated } from 'vue';
+import { onUpdated } from 'vue';
 
 import { CommonNetwork } from '@main/shared/enums';
 
 import useUserStore from '@renderer/stores/storeUser';
 import useNetworkStore from '@renderer/stores/storeNetwork';
 
 import { useRouter } from 'vue-router';
-import { useToast } from 'vue-toast-notification';
 import useCreateTooltips from '@renderer/composables/useCreateTooltips';
+import useLoader from '@renderer/composables/useLoader';
 
 import { logout } from '@renderer/services/organization';
 import { updateOrganizationCredentials } from '@renderer/services/organizationCredentials';
 
-import { GLOBAL_MODAL_LOADER_KEY } from '@renderer/providers';
-
-import { isUserLoggedIn, toggleAuthTokenInSessionStorage, withLoader } from '@renderer/utils';
+import { isUserLoggedIn, toggleAuthTokenInSessionStorage } from '@renderer/utils';
 
 import Logo from '@renderer/components/Logo.vue';
 import LogoText from '@renderer/components/LogoText.vue';
@@ -53,10 +50,7 @@ const networkStore = useNetworkStore();
 /* Composables */
 const router = useRouter();
 const createTooltips = useCreateTooltips();
-const toast = useToast();
-
-/* Injected */
-const globalModalLoaderRef = inject<GLOBAL_MODAL_LOADER_TYPE>(GLOBAL_MODAL_LOADER_KEY);
+const withLoader = useLoader();
 
 /* Handlers */
 const handleLogout = async () => {
@@ -77,9 +71,7 @@ const handleLogout = async () => {
 };
 
 /* Hooks */
-onUpdated(() => {
-  createTooltips();
-});
+onUpdated(createTooltips);
 </script>
 
 <template>
@@ -124,7 +116,7 @@ onUpdated(() => {
         "
         class="container-icon"
         data-testid="button-logout"
-        @click="withLoader(handleLogout, toast, globalModalLoaderRef)()"
+        @click="withLoader(handleLogout)"
         data-bs-toggle="tooltip"
         data-bs-trigger="hover"
         data-bs-placement="bottom"

front-end/src/renderer/components/ImportExternalPrivateKeyModal.vue

@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-import { inject, reactive, watch } from 'vue';
+import { reactive, watch } from 'vue';
 
 import { Prisma } from '@prisma/client';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { generateExternalKeyPairFromString } from '@renderer/services/keyPairService';
 
 import {
+  assertUserLoggedIn,
   getErrorMessage,
   isLoggedInOrganization,
-  isUserLoggedIn,
   safeDuplicateUploadKey,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppButton from '@renderer/components/ui/AppButton.vue';
 import AppModal from '@renderer/components/ui/AppModal.vue';
 import AppInput from '@renderer/components/ui/AppInput.vue';
@@ -37,28 +35,19 @@ const user = useUserStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const key = reactive<{ privateKey: string; nickname?: string }>({
   privateKey: '',
 });
 
 const handleImportExternalKey = async () => {
-  /* Verify user is logged in with password */
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'Private key/s will be encrypted with this password',
-      handleImportExternalKey,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(handleImportExternalKey, {
+    subHeading: 'Private key/s will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     const keyPair: Prisma.KeyPairUncheckedCreateInput = {

front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeys.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
-
-import { computed, inject, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
 import { useToast } from 'vue-toast-notification';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { hashData } from '@renderer/services/electronUtilsService';
 
-import { getKeysFromSecretHash, isUserLoggedIn } from '@renderer/utils';
-
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { getKeysFromSecretHash } from '@renderer/utils';
 
 import DecryptKeyModal from '@renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue';
 
@@ -30,9 +27,7 @@ const user = useUserStore();
 
 /* Composables */
 const toast = useToast();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const isDecryptKeyModalShown = ref(false);
@@ -74,17 +69,10 @@ async function process(keyPaths: string[], words: string[] | null) {
   }
 
   /* Verify user is logged in with password */
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter personal password',
-      'Private key/s will be encrypted with this password',
-      nextKey,
-    );
-    return;
-  }
+  const personalPassword = getPassword(nextKey, {
+    subHeading: 'Private key/s will be encrypted with this password',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   await nextKey();
 }

front-end/src/renderer/components/Menu.vue

@@ -57,21 +57,6 @@ const getMenuItems = (): MenuItem[] => [
     title: 'Files',
     icon: 'bi bi-file-text',
   },
-  // {
-  //   link: '/tokens',
-  //   title: 'Tokens',
-  //   icon: 'bi bi-coin',
-  // },
-  // {
-  //   link: '/smart-contracts',
-  //   title: 'Smart Contracts',
-  //   icon: 'bi bi-arrows-angle-contract',
-  // },
-  // {
-  //   link: '/consensus-service',
-  //   title: 'Consensus Service',
-  //   icon: 'bi bi-shield-check',
-  // },
   {
     link: '/contact-list',
     testid: 'button-contact-list',
@@ -131,9 +116,6 @@ const organizationOnly = ['/contact-list'];
         :class="{ active: $route.path.startsWith('/settings') }"
         ><i class="bi bi-gear"></i><span>Settings</span></RouterLink
       >
-      <!-- <RouterLink class="link-menu mt-2" to="/help"
-        ><i class="bi bi-question-circle"></i><span>Help</span></RouterLink
-      > -->
     </div>
   </div>
 </template>

front-end/src/renderer/components/Organization/AutoLoginInOrganization.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { Organization } from '@prisma/client';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { inject, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import useUserStore from '@renderer/stores/storeUser';
 
-import { tryAutoSignIn } from '@renderer/services/organizationCredentials';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
+import { tryAutoSignIn } from '@renderer/services/organizationCredentials';
 
 import { isUserLoggedIn } from '@renderer/utils';
 
@@ -18,8 +17,8 @@ import AppModal from '@renderer/components/ui/AppModal.vue';
 /* Stores */
 const user = useUserStore();
 
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+/* Composables */
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const checked = ref(false);
@@ -55,16 +54,10 @@ async function openPasswordModalIfRequired() {
 
     if (organizationToSignIn.length === 0) return;
 
-    const personalPassword = user.getPassword();
-    if (!personalPassword && !user.personal.useKeychain) {
-      if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-      userPasswordModalRef.value?.open(
-        null,
-        'Sign in to your organizations with expired token',
-        handleAutoLogin,
-      );
-      return;
-    }
+    const personalPassword = getPassword(handleAutoLogin, {
+      subHeading: 'Sign in to your organizations with expired token',
+    });
+    if (passwordModalOpened(personalPassword)) return;
 
     await handleAutoLogin(personalPassword || null);
   }

front-end/src/renderer/components/Transaction/Create/FileContents/FileContents.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { HederaFile } from '@prisma/client';
-import type { USER_PASSWORD_MODAL_TYPE } from '@renderer/providers';
 
-import { inject, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { FileContentsQuery, FileId, FileInfoQuery, Hbar, HbarUnit } from '@hashgraph/sdk';
 
 import { DISPLAY_FILE_SIZE_LIMIT } from '@main/shared/constants';
@@ -13,22 +12,21 @@ import useNetworkStore from '@renderer/stores/storeNetwork';
 import { useToast } from 'vue-toast-notification';
 import { useRoute } from 'vue-router';
 import useAccountId from '@renderer/composables/useAccountId';
+import usePersonalPassword from '@renderer/composables/usePersonalPassword';
 
 import { decryptPrivateKey } from '@renderer/services/keyPairService';
 import { executeQuery } from '@renderer/services/transactionService';
 import { add, getAll, update } from '@renderer/services/filesService';
 
 import {
-  isUserLoggedIn,
+  assertUserLoggedIn,
   isFileId,
   isHederaSpecialFileId,
   formatAccountId,
   encodeString,
   getErrorMessage,
 } from '@renderer/utils';
 
-import { USER_PASSWORD_MODAL_KEY } from '@renderer/providers';
-
 import AppInput from '@renderer/components/ui/AppInput.vue';
 import AppHbarInput from '@renderer/components/ui/AppHbarInput.vue';
 import AccountIdsSelect from '@renderer/components/AccountIdsSelect.vue';
@@ -42,9 +40,7 @@ const network = useNetworkStore();
 const toast = useToast();
 const payerData = useAccountId();
 const route = useRoute();
-
-/* Injected */
-const userPasswordModalRef = inject<USER_PASSWORD_MODAL_TYPE>(USER_PASSWORD_MODAL_KEY);
+const { getPassword, passwordModalOpened } = usePersonalPassword();
 
 /* State */
 const maxQueryFee = ref<Hbar>(new Hbar(2));
@@ -55,17 +51,11 @@ const storedFiles = ref<HederaFile[]>([]);
 
 /* Functions */
 const readFile = async () => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
-  const personalPassword = user.getPassword();
-  if (!personalPassword && !user.personal.useKeychain) {
-    if (!userPasswordModalRef) throw new Error('User password modal ref is not provided');
-    userPasswordModalRef.value?.open(
-      'Enter your application password',
-      'Enter your application password to decrypt your keys and sign the transaction',
-      readFile,
-    );
-    return;
-  }
+  assertUserLoggedIn(user.personal);
+  const personalPassword = getPassword(readFile, {
+    subHeading: 'Enter your application password to decrypt your keys and sign the transaction',
+  });
+  if (passwordModalOpened(personalPassword)) return;
 
   try {
     isLoading.value = true;
@@ -126,7 +116,7 @@ const readContent = async (privateKey: string, privateKeyType: string) => {
 };
 
 const updateLocalFileInfo = async (content: string, privateKey: string, privateKeyType: string) => {
-  if (!isUserLoggedIn(user.personal)) throw new Error('User is not logged in');
+  assertUserLoggedIn(user.personal);
 
   try {
     const fileInfoQuery = new FileInfoQuery()
@@ -175,9 +165,7 @@ onMounted(async () => {
     fileId.value = route.query.fileId.toString();
   }
 
-  if (!isUserLoggedIn(user.personal)) {
-    throw Error('User is not logged in');
-  }
+  assertUserLoggedIn(user.personal);
 
   storedFiles.value = await getAll({
     where: {