feat: composables migrations

src/composables/accounts.ts

@@ -20,6 +20,8 @@ import {
   watchUntilTruthy,
 } from '@/utils';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
+import migrateAccountsVuexToComposable from '@/migrations/001-accounts-vuex-to-composable';
+import migrateMnemonicVuexToComposable from '@/migrations/002-mnemonic-vuex-to-composable';
 import { useStorageRef } from './composablesHelpers';
 
 let isInitialized = false;
@@ -31,13 +33,23 @@ let isInitialized = false;
 const mnemonic = useStorageRef<string>(
   '',
   STORAGE_KEYS.mnemonic,
-  { backgroundSync: true },
+  {
+    backgroundSync: true,
+    migrations: [
+      migrateMnemonicVuexToComposable,
+    ],
+  },
 );
 
 const accountsRaw = useStorageRef<IAccountRaw[]>(
   [],
   STORAGE_KEYS.accountsRaw,
-  { backgroundSync: true },
+  {
+    backgroundSync: true,
+    migrations: [
+      migrateAccountsVuexToComposable,
+    ],
+  },
 );
 
 const activeAccountGlobalIdx = useStorageRef<number>(

src/composables/composablesHelpers.ts

@@ -7,7 +7,8 @@ import {
   watch,
 } from 'vue';
 import { isEqual } from 'lodash-es';
-import type { StorageKey } from '@/types';
+import type { Migration, StorageKey } from '@/types';
+import { asyncPipe } from '@/utils';
 import { WalletStorage } from '@/lib/WalletStorage';
 import { useConnection } from './connection';
 import { useUi } from './ui';
@@ -21,9 +22,10 @@ interface ICreateStorageRefOptions<T> {
    * Callbacks run on the data that will be saved and read from the browser storage.
    */
   serializer?: {
-    read: (v: T) => any,
-    write: (v: T) => any,
+    read: (v: T) => any;
+    write: (v: T) => any;
   };
+  migrations?: Migration<T>[];
 }
 
 /**
@@ -39,43 +41,52 @@ export function useStorageRef<T = string | object | any[]>(
   const {
     serializer,
     backgroundSync = false,
+    migrations,
   } = options;
 
-  let isRestored = false;
   let watcherDisabled = false; // Avoid watcher going infinite loop
   const state = ref(initialState) as Ref<T>; // https://github.com/vuejs/core/issues/2136
 
-  function setState(val: any) {
+  function setLocalState(val: T | null) {
     if (val) {
       watcherDisabled = true;
       state.value = (serializer?.read) ? serializer.read(val) : val;
       setTimeout(() => { watcherDisabled = false; }, 0);
     }
   }
 
-  watch(state, (val, oldVal) => {
-    // Arrays are not compared as there is a bug which makes the new and old val always the same.
-    if (!watcherDisabled && (Array.isArray(initialState) || !isEqual(val, oldVal))) {
-      WalletStorage.set(storageKey, (serializer?.write) ? serializer.write(val) : val);
-    }
-  }, { deep: true });
-
-  /**
-   * Two way binding between the extension and the background
-   * Whenever the app saves the state to browser storage the extension background picks this
-   * and synchronizes own state with the change.
-   */
-  if (backgroundSync) {
-    WalletStorage.watch?.(storageKey, (val) => setState(val));
+  function setStorageState(val: T | null) {
+    WalletStorage.set(storageKey, (val && serializer?.write) ? serializer.write(val) : val);
   }
 
-  if (!isRestored) {
-    (async () => {
-      const restoredValue = await WalletStorage.get<T | null>(storageKey);
-      setState(restoredValue);
-      isRestored = true;
-    })();
-  }
+  // Restore state and run watchers
+  (async () => {
+    let restoredValue = await WalletStorage.get<T | null>(storageKey);
+    if (migrations?.length) {
+      restoredValue = await asyncPipe<T | null>(migrations)(restoredValue);
+      setStorageState(restoredValue);
+    }
+    setLocalState(restoredValue);
+
+    /**
+     * Synchronize the state value with the storage.
+     */
+    watch(state, (val, oldVal) => {
+      // Arrays are not compared as there is a bug which makes the new and old val always the same.
+      if (!watcherDisabled && (Array.isArray(initialState) || !isEqual(val, oldVal))) {
+        setStorageState(val);
+      }
+    }, { deep: true });
+
+    /**
+     * Two way binding between the extension and the background
+     * Whenever the app saves the state to browser storage the extension background picks this
+     * and synchronizes own state with the change.
+     */
+    if (backgroundSync) {
+      WalletStorage.watch?.(storageKey, (val) => setLocalState(val));
+    }
+  })();
 
   return state;
 }

src/migrations/001-accounts-vuex-to-composable.ts

@@ -0,0 +1,27 @@
+import type { IAccountRaw, Migration } from '@/types';
+import { ACCOUNT_HD_WALLET, PROTOCOLS } from '@/constants';
+import { collectVuexState } from './migrationHelpers';
+
+const migration: Migration<IAccountRaw[]> = async (restoredValue: IAccountRaw[]) => {
+  if (!restoredValue?.length) {
+    const accounts = (await collectVuexState())?.accounts?.list as any[] | undefined;
+    if (accounts?.length) {
+      return accounts.reduce(
+        (list: IAccountRaw[], { protocol, type }: IAccountRaw) => {
+          if (PROTOCOLS.includes(protocol) && type === ACCOUNT_HD_WALLET) {
+            list.push({
+              isRestored: true,
+              protocol,
+              type,
+            });
+          }
+          return list;
+        },
+        [],
+      );
+    }
+  }
+  return restoredValue;
+};
+
+export default migration;

src/migrations/002-mnemonic-vuex-to-composable.ts

@@ -0,0 +1,15 @@
+import { validateMnemonic } from '@aeternity/bip39';
+import type { Migration } from '@/types';
+import { collectVuexState } from './migrationHelpers';
+
+const migration: Migration = async (restoredValue: string) => {
+  if (!restoredValue) {
+    const mnemonic = (await collectVuexState())?.mnemonic;
+    if (mnemonic && validateMnemonic(mnemonic)) {
+      return mnemonic;
+    }
+  }
+  return restoredValue;
+};
+
+export default migration;

src/migrations/migrationHelpers.ts

@@ -0,0 +1,23 @@
+import { watchUntilTruthy } from '@/utils';
+import { ref } from 'vue';
+
+/**
+ * Before version 2.0.2 we were using Vuex and the whole state was kept as
+ * one browser/local storage entry.
+ */
+export const collectVuexState = (() => {
+  let vuexState: Record<string, any> | null;
+  const isCollecting = ref(false);
+  return async () => {
+    if (window?.browser) {
+      if (isCollecting.value) {
+        await watchUntilTruthy(isCollecting);
+      } else if (!vuexState) {
+        isCollecting.value = true;
+        vuexState = (await window.browser.storage.local.get('state'))?.state as any;
+        isCollecting.value = false;
+      }
+    }
+    return vuexState;
+  };
+})();

src/types/index.ts

@@ -668,3 +668,5 @@ export interface IFormSelectOption {
   text: string;
   value: string | number;
 }
+
+export type Migration<T = any> = (restoredValue: T | any) => Promise<T>;

src/utils/common.ts

@@ -222,6 +222,16 @@ export function pipe<T = any[]>(fns: ((data: T) => T)[]) {
   return (data: T) => fns.reduce((currData, func) => func(currData), data);
 }
 
+/**
+ * Run asynchronous callbacks one by one and pass previous returned value to the next one.
+ */
+export function asyncPipe<T = any[]>(fns: ((data: T) => PromiseLike<T>)[]) {
+  return (data: T): Promise<T> => fns.reduce(
+    async (currData, func) => func(await currData),
+    Promise.resolve(data),
+  );
+}
+
 export function prepareStorageKey(keys: string[]) {
   return [LOCAL_STORAGE_PREFIX, ...keys].join('_');
 }