Fix: Latest multisig transaction updating on account change

src/composables/currencies.ts

@@ -23,7 +23,7 @@ import { CoinGecko } from '@/lib/CoinGecko';
 import { createPollingBasedOnMountedComponents } from './composablesHelpers';
 
 export interface UseCurrenciesOptions {
-  withoutPolling?: boolean;
+  pollingDisabled?: boolean;
 }
 
 let composableInitialized = false;
@@ -50,7 +50,7 @@ const currentCurrencyCode = ref<CurrencyCode>(
 const initPollingWatcher = createPollingBasedOnMountedComponents(POLLING_INTERVAL);
 
 export function useCurrencies({
-  withoutPolling = false,
+  pollingDisabled = false,
 }: UseCurrenciesOptions = {}) {
   const { protocolsInUse, isLoggedIn } = useAccounts();
   const currentCurrencyInfo = computed(
@@ -151,7 +151,7 @@ export function useCurrencies({
     return (converted < 0.01) ? `<${formatCurrency(0.01)}` : formatCurrency(converted);
   }
 
-  if (!withoutPolling) {
+  if (!pollingDisabled) {
     initPollingWatcher(() => loadCurrencyRates());
   }
 

src/composables/pendingMultisigTransaction.ts

@@ -2,6 +2,7 @@ import {
   ref,
   watch,
   computed,
+  effectScope,
 } from 'vue';
 import { isEqual } from 'lodash-es';
 import type {
@@ -23,7 +24,12 @@ import { useTopHeaderData } from './topHeader';
 
 let composableInitialized = false;
 
-const pendingMultisigTransaction = ref<IActiveMultisigTransaction | null>();
+const pendingMultisigTransaction = ref<IActiveMultisigTransaction | null>(null);
+
+/** Used only to establish the multisig transaction function */
+const activeMultisigTransactionData = ref<ITransaction | null>(null);
+
+const isLoading = ref(false);
 
 export function usePendingMultisigTransaction() {
   const { getMiddleware } = useAeMiddleware();
@@ -32,12 +38,6 @@ export function usePendingMultisigTransaction() {
   const { topBlockHeight } = useTopHeaderData();
   const { aeAccounts } = useAccounts();
 
-  const latestMultisigAccountTransaction = ref<ITransaction | null>(null);
-
-  async function assignPendingMultisigTx() {
-    pendingMultisigTransaction.value = await fetchActiveMultisigTx();
-  }
-
   /**
    * The minimum required number of confirmations to process the current proposal.
    */
@@ -162,15 +162,15 @@ export function usePendingMultisigTransaction() {
    */
   const isPendingMultisigTxCompletedAndRevoked = computed((): boolean => (
     !activeMultisigAccount.value?.txHash
-    && latestMultisigAccountTransaction.value?.tx.function === TX_FUNCTIONS_MULTISIG.revoke
+    && activeMultisigTransactionData.value?.tx.function === TX_FUNCTIONS_MULTISIG.revoke
   ));
 
   /**
    * Check if the latest proposal action is confirmed.
    */
   const isPendingMultisigTxCompletedAndConfirmed = computed((): boolean => (
     !activeMultisigAccount.value?.txHash
-    && latestMultisigAccountTransaction.value?.tx.function === TX_FUNCTIONS_MULTISIG.confirm
+    && activeMultisigTransactionData.value?.tx.function === TX_FUNCTIONS_MULTISIG.confirm
   ));
 
   /**
@@ -183,28 +183,43 @@ export function usePendingMultisigTransaction() {
       const { data: [latestTransaction] } = await middleware.getTxs({
         direction: 'backward', limit: 1, contract: contractId,
       });
-      latestMultisigAccountTransaction.value = latestTransaction;
+      return latestTransaction;
     } catch (error) {
       handleUnknownError(error);
+      return null;
     }
   }
 
   if (!composableInitialized) {
     composableInitialized = true;
 
-    watch(
-      activeMultisigAccount,
-      (newValue, oldValue) => {
-        if (!isEqual(newValue, oldValue)) {
-          assignPendingMultisigTx();
-
-          if (!activeMultisigAccount.value?.txHash && !latestMultisigAccountTransaction.value) {
-            fetchLatestMultisigAccountTransaction();
+    // Create persistent effect scope to avoid watcher being disposed
+    effectScope(true).run(() => {
+      const { activeMultisigAccount: scopedActiveMultisigAccount } = useMultisigAccounts();
+
+      watch(
+        scopedActiveMultisigAccount,
+        async (newValue, oldValue) => {
+          if (newValue && !isEqual(newValue, oldValue)) {
+            if (!newValue?.txHash) {
+              activeMultisigTransactionData.value = null;
+              pendingMultisigTransaction.value = null;
+            } else if (newValue.txHash !== oldValue?.txHash) {
+              isLoading.value = true;
+              [
+                activeMultisigTransactionData.value,
+                pendingMultisigTransaction.value,
+              ] = await Promise.all([
+                fetchLatestMultisigAccountTransaction(),
+                fetchActiveMultisigTx(),
+              ]);
+              isLoading.value = false;
+            }
           }
-        }
-      },
-      { immediate: true },
-    );
+        },
+        { immediate: true },
+      );
+    });
   }
 
   return {
@@ -223,6 +238,7 @@ export function usePendingMultisigTransaction() {
     pendingMultisigTxCanBeSent,
     pendingMultisigTxLocalSigners,
     pendingMultisigTxConfirmedByLocalSigners,
+    isLoading,
     isPendingMultisigTxCompleted,
     isPendingMultisigTxCompletedAndRevoked,
     isPendingMultisigTxCompletedAndConfirmed,

src/popup/App.vue

@@ -127,7 +127,7 @@ export default defineComponent({
     const { modalsOpen } = useModals();
     const { isLoggedIn } = useAccounts();
     const { addWalletNotification } = useNotifications();
-    const { loadCoinsData } = useCurrencies({ withoutPolling: true });
+    const { loadCoinsData } = useCurrencies({ pollingDisabled: true });
     const { restoreLanguage } = useLanguages();
     const { restore: restoreTransferSendForm } = useTransferSendHandler();
     const { multisigAccounts } = useMultisigAccounts({ pollingDisabled: true });

src/popup/components/PendingMultisigTransactionCard.vue

@@ -1,12 +1,20 @@
 <template>
   <Panel
-    v-if="pendingMultisigTransaction && pendingMultisigTransaction.tx"
+    v-if="pendingMultisigTransaction?.tx"
     class="pending-multisig-transaction-card"
     :header="$t('dashboard.pendingMultisigCard.title')"
   >
-    <TransactionListItem
-      :multisig-transaction="pendingMultisigTransaction"
-    />
+    <Transition name="page-transition">
+      <AnimatedSpinner
+        v-if="isLoading"
+        class="spinner"
+      />
+      <div v-else>
+        <TransactionListItem
+          :multisig-transaction="pendingMultisigTransaction"
+        />
+      </div>
+    </Transition>
   </Panel>
 </template>
 
@@ -16,18 +24,35 @@ import { usePendingMultisigTransaction } from '@/composables';
 
 import Panel from './Panel.vue';
 import TransactionListItem from './TransactionListItem.vue';
+import AnimatedSpinner from '../../icons/animated-spinner.svg?skip-optimize';
 
 export default defineComponent({
   components: {
+    AnimatedSpinner,
     Panel,
     TransactionListItem,
   },
   setup() {
-    const { pendingMultisigTransaction } = usePendingMultisigTransaction();
+    const { isLoading, pendingMultisigTransaction } = usePendingMultisigTransaction();
 
     return {
+      isLoading,
       pendingMultisigTransaction,
     };
   },
 });
 </script>
+
+<style lang="scss" scoped>
+@use '../../styles/variables';
+@use '../../styles/typography';
+@use '../../styles/mixins';
+
+.pending-multisig-transaction-card {
+  .spinner {
+    display: block;
+    margin-inline: auto;
+    height: 60px;
+  }
+}
+</style>

src/popup/plugins/veeValidate.ts

@@ -123,7 +123,7 @@ defineRule(
 
 export default () => {
   const { balance, updateBalances } = useBalances();
-  const { currencyRates } = useCurrencies({ withoutPolling: true });
+  const { currencyRates } = useCurrencies({ pollingDisabled: true });
   const { getAeSdk } = useAeSdk();
 
   const NAME_STATES = {