refactor: remove ui composableHelpers circular dependency

Author: CedrikNikita

src/composables/accounts.ts

@@ -19,6 +19,7 @@ import {
 } from '@/constants';
 import {
   createCallbackRegistry,
+  createCustomScopedComposable,
   excludeFalsy,
   prepareAccountSelectOptions,
   watchUntilTruthy,
@@ -28,7 +29,6 @@ import migrateAccountsVuexToComposable from '@/migrations/001-accounts-vuex-to-c
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 
 import { useStorageRef } from './storageRef';
-import { createCustomScopedComposable } from './composablesHelpers';
 import { useAuth } from './auth';
 
 const {

src/composables/addressBook.ts

@@ -11,14 +11,14 @@ import { STORAGE_KEYS, MODAL_ADDRESS_BOOK_IMPORT } from '@/constants';
 import { AddressBookEntryExists, AddressBookInvalidAddress, AddressBookRequiredFields } from '@/lib/errors';
 import {
   convertBlobToBase64,
+  createCustomScopedComposable,
   getProtocolByAddress,
   handleUnknownError,
   selectFiles,
   pipe,
 } from '@/utils';
 import { tg as t } from '@/popup/plugins/i18n';
 
-import { createCustomScopedComposable } from './composablesHelpers';
 import { useStorageRef } from './storageRef';
 import { useModals } from './modals';
 

src/composables/auth.ts

@@ -19,6 +19,7 @@ import {
 } from '@/constants';
 import { STUB_ACCOUNT } from '@/constants/stubs';
 import {
+  createCustomScopedComposable,
   decodeBase64,
   decrypt,
   encodeBase64,
@@ -36,7 +37,6 @@ import migrateMnemonicCordovaToIonic from '@/migrations/008-mnemonic-cordova-to-
 
 import { useUi } from './ui';
 import { useModals } from './modals';
-import { createCustomScopedComposable } from './composablesHelpers';
 import { useStorageRef } from './storageRef';
 
 const CHECK_FOR_SESSION_KEY_INTERVAL = 5000;

src/composables/composablesHelpers.ts

@@ -1,27 +1,11 @@
 import {
-  effectScope,
   getCurrentInstance,
   onBeforeUnmount,
   onMounted,
 } from 'vue';
 import { useConnection } from './connection';
 import { useUi } from './ui';
 
-/**
- * Creates a custom effect scope for a composable to avoid disposing watchers
- * and computed properties when a Vue component is unmounted. The effect scope
- * is only created the first time you run the composable and is reused from that point on.
- */
-export function createCustomScopedComposable<T>(composableBody: () => T) {
-  let activeScope: T;
-  return () => {
-    if (!activeScope) {
-      activeScope = effectScope(true).run(composableBody) || composableBody();
-    }
-    return activeScope;
-  };
-}
-
 /**
  * Creates a function, that will monitor how many components is actually using the composable
  * and if the value is greater than 0 it will perform a polling based on the setInterval function.

src/composables/ui.ts

@@ -10,13 +10,13 @@ import { RouteLocationRaw } from 'vue-router';
 import type { IOtherSettings } from '@/types';
 import { AUTHENTICATION_TIMEOUT_DEFAULT, STORAGE_KEYS } from '@/constants';
 import { ROUTE_ACCOUNT } from '@/popup/router/routeNames';
+import { createCustomScopedComposable } from '@/utils';
 
 import migrateHiddenCardsVuexToComposable from '@/migrations/004-hidden-cards-vuex-to-composables';
 import migrateOtherSettingsVuexToComposable from '@/migrations/005-other-settings-vuex-to-composables';
 import migrateSecureLoginEnabledToBiometric from '@/migrations/009-secure-login-enabled-to-biometric';
 
 import { useStorageRef } from './storageRef';
-import { createCustomScopedComposable } from './composablesHelpers';
 
 export const useUi = createCustomScopedComposable(() => {
   /** Control the route that would be visible after opening the extension. */

src/protocols/aeternity/composables/aeNetworkSettings.ts

@@ -1,7 +1,7 @@
 import { computed } from 'vue';
 import type { NetworkTypeDefault } from '@/types';
 import { NETWORK_TYPE_CUSTOM, NETWORK_TYPE_TESTNET } from '@/constants';
-import { createCustomScopedComposable } from '@/composables/composablesHelpers';
+import { createCustomScopedComposable } from '@/utils';
 import { useNetworks } from '@/composables/networks';
 
 import type { IAeNetworkPredefinedSettings, IAeNetworkSettings } from '@/protocols/aeternity/types';

src/utils/common.ts

@@ -4,7 +4,7 @@
 
 /* eslint-disable no-use-before-define */
 
-import { WatchSource, watch } from 'vue';
+import { effectScope, WatchSource, watch } from 'vue';
 import { defer, uniqWith } from 'lodash-es';
 import BigNumber from 'bignumber.js';
 import { Share } from '@capacitor/share';
@@ -602,3 +602,18 @@ export function checkPasswordStrength(password: string): ObjectValues<typeof PAS
   }
   return PASSWORD_STRENGTH.strong;
 }
+
+/**
+ * Creates a custom effect scope for a composable to avoid disposing watchers
+ * and computed properties when a Vue component is unmounted. The effect scope
+ * is only created the first time you run the composable and is reused from that point on.
+ */
+export function createCustomScopedComposable<T>(composableBody: () => T) {
+  let activeScope: T;
+  return () => {
+    if (!activeScope) {
+      activeScope = effectScope(true).run(composableBody) || composableBody();
+    }
+    return activeScope;
+  };
+}