Merge pull request #10252 from hassnian/issue-10224

fix: When transaction failed, opening modal resets the state weirdly

components/collection/drop/modal/PaidMint.vue

@@ -109,7 +109,11 @@ const mintButton = computed(() => {
 })
 
 const loading = computed(
-  () => isSingleMintNotReady.value || mintOverview.value?.loading || false,
+  () =>
+    isSingleMintNotReady.value ||
+    mintOverview.value?.loading ||
+    (isSuccessfulDropStep.value && !moveSuccessfulDrop.value) ||
+    false,
 )
 const preStepTitle = computed<string | undefined>(() =>
   isSingleMintNotReady.value ? $i18n.t('drops.mintDropError') : undefined,

components/common/autoTeleport/AutoTeleportModal.vue

@@ -154,8 +154,10 @@ const steps = computed<TransactionStep[]>(() => {
     props.transactions.actions.map((action) => {
       return {
         title: getActionDetails(action.interaction).title,
-        status: action.status.value,
-        isError: action.isError.value,
+        status: hasCompletedActionPreSteps.value
+          ? action.status.value
+          : TransactionStatus.Unknown,
+        isError: action.isError.value && hasCompletedActionPreSteps.value,
         txId: action.txId.value,
         blockNumber: action.blockNumber?.value,
         isLoading: action.isLoading.value,
@@ -251,6 +253,10 @@ const onClose = () => {
   emit('close', autoteleportFinalized.value)
 }
 
+const clearModal = () => {
+  balanceCheckState.value = TransactionStepStatus.WAITING
+}
+
 watch(
   [isTeleportTransactionFinalized, () => props.canDoAction],
   ([telportFinalized, canDoAction]) => {
@@ -275,6 +281,16 @@ watch(autoteleportFinalized, () => {
     }
   }
 })
+
+watchDebounced(
+  () => props.modelValue,
+  (isOpen) => {
+    if (!isOpen) {
+      clearModal()
+    }
+  },
+  { debounce: 500 }, // wait for the modal closing animation to finish
+)
 </script>
 
 <style lang="scss" scoped>

composables/autoTeleport/useAutoTeleport.ts

@@ -35,11 +35,12 @@ export default function (
     autoTeleportStarted,
   })
 
-  const { transactionActions, clear: clearActions } =
-    useAutoTeleportTransactionActions(actions)
+  const { transactionActions } = useAutoTeleportTransactionActions({
+    actions,
+    teleportTxId,
+  })
 
   const clear = () => {
-    clearActions()
     teleportStatus.value = TransactionStatus.Unknown
     teleportIsError.value = false
     teleportTxId.value = ''

composables/autoTeleport/useAutoTeleportTransactionActions.ts

@@ -1,3 +1,4 @@
+import { TransactionStatus } from '../useTransactionStatus'
 import type {
   ActionTransactionDetails,
   AutoTeleportAction,
@@ -10,22 +11,32 @@ export const getAutoTeleportActionInteraction = (
   (autoTeleportAction.action?.interaction ||
     autoTeleportAction.interaction) as AutoteleportInteraction
 
-export default function (actions: ComputedRef<AutoTeleportAction[]>) {
-  const actionsCancelled = ref(new Map<AutoteleportInteraction, boolean>())
+export default function ({
+  actions,
+  teleportTxId,
+}: {
+  actions: ComputedRef<AutoTeleportAction[]>
+  teleportTxId: Ref<string | null>
+}) {
+  const actionSessionStatus = ref(
+    new Map<string, Record<AutoteleportInteraction, TransactionStatus>>(),
+  )
 
   const transactionActions = computed<ActionTransactionDetails[]>(() => {
     return actions.value.map<ActionTransactionDetails>((action, index) => {
       return {
-        isError: toRef(
+        isError: computed(
           () =>
             action.details.isError ||
-            actionsCancelled.value.get(
-              getAutoTeleportActionInteraction(action),
-            ) ||
-            false,
+            action.details.status === TransactionStatus.Cancelled,
         ),
         blockNumber: toRef(() => action.details.blockNumber),
-        status: toRef(() => action.details.status),
+        status: computed(
+          () =>
+            actionSessionStatus.value.get(teleportTxId.value!)?.[
+              action.interaction!
+            ] ?? TransactionStatus.Unknown,
+        ),
         isLoading: toRef(() => action.details.isLoading),
         interaction: getAutoTeleportActionInteraction(actions.value[index]),
         txId: ref(''),
@@ -36,26 +47,21 @@ export default function (actions: ComputedRef<AutoTeleportAction[]>) {
   watch(
     actions,
     (actions) => {
+      if (!teleportTxId.value) {
+        return
+      }
+
       actions.forEach((action) => {
-        const cancelled = action.details.status === TransactionStatus.Cancelled
-        actionsCancelled.value.set(
-          getAutoTeleportActionInteraction(action),
-          cancelled,
-        )
+        actionSessionStatus.value.set(teleportTxId.value!, {
+          ...(actionSessionStatus.value.get(teleportTxId.value!) || {}),
+          [action.interaction as string]: action.details.status,
+        })
       })
     },
-    { immediate: true, deep: true },
+    { deep: true },
   )
 
-  const clear = () => {
-    const interactions = actions.value.map(getAutoTeleportActionInteraction)
-    interactions.forEach((interaction) => {
-      actionsCancelled.value.set(interaction, false)
-    })
-  }
-
   return {
     transactionActions,
-    clear,
   }
 }

composables/useTeleport.ts

@@ -26,6 +26,7 @@ export default function (fetchBalancePeriodically: boolean = false) {
     useTransactionStatus()
   const { accountId } = useAuth()
   const { assets } = usePrefix()
+  const { $i18n } = useNuxtApp()
   const { decimalsOf } = useChain()
   const { urlPrefix } = usePrefix()
   const { fetchMultipleBalance, chainBalances } = useMultipleBalance(
@@ -93,7 +94,7 @@ export default function (fetchBalancePeriodically: boolean = false) {
     )
 
     const errorHandler = () => {
-      warningMessage('Cancelled')
+      warningMessage($i18n.t('general.tx.cancelled'), { reportable: false })
 
       isLoading.value = false
       status.value = TransactionStatus.Cancelled