From 5ca024ffa2100bf0a8a3f80fd4177e43479b15eb Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Tue, 13 Jul 2021 23:20:20 +0800
Subject: [PATCH] - add cancellation timer - handle failed cancel transaction

---
 .../CancellationFailedModal.scss              | 56 +++++++++++++
 .../CancellationFailedModal.vue               | 82 +++++++++++++++++++
 .../CancellationFailedModal/index.js          |  1 +
 .../CancellationModal/CancellationModal.vue   |  2 +-
 .../TransactionDetails/TransactionDetails.vue | 16 ++++
 .../TransactionDetailsMore.vue                | 40 +++++----
 .../WalletHistory/WalletHistory.vue           |  5 +-
 7 files changed, 184 insertions(+), 18 deletions(-)
 create mode 100644 src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.scss
 create mode 100644 src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.vue
 create mode 100644 src/components/WalletHistory/CancellationFailedModal/index.js

diff --git a/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.scss b/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.scss
new file mode 100644
index 000000000..5e0f45a6c
--- /dev/null
+++ b/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.scss
@@ -0,0 +1,56 @@
+.cancel-transaction-modal {
+  .close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .card-header {
+    background: #ffffff;
+    border-radius: 6px;
+    border: 1px solid #f5f5f5;
+    box-sizing: border-box;
+    box-shadow: 0px 14px 28px rgba(92, 108, 127, 0.06);
+
+    .close-btn {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      color: var(--v-text_1-base);
+    }
+  }
+  .transaction-details {
+    width: 100%;
+  }
+  .amount-container {
+    width: 120px;
+    text-align: right;
+  }
+
+  .info {
+    font-size: 10px;
+  }
+
+  .is-confirmed {
+    .v-icon__component {
+      color: var(--v-text_3-base);
+      caret-color: var(--v-text_3-base);
+    }
+  }
+
+  .text-caption {
+    line-height: 1em;
+  }
+
+  .is-confirmed-label {
+    cursor: pointer;
+    margin-top: 2px;
+  }
+
+  &.theme--dark {
+    .card-header {
+      border: 0;
+      background: #2f3136;
+      box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.16);
+    }
+  }
+}
diff --git a/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.vue b/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.vue
new file mode 100644
index 000000000..b2627e036
--- /dev/null
+++ b/src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-dialog :value="cancelDialog" persistent width="275">
+    <v-card class="cancel-transaction-modal">
+      <v-card-text class="pa-0">
+        <div class="card-header text-center xs12 py-6 px-6">
+          <div class="text-body2 text_1--text font-weight-bold">{{ t('walletActivity.cancelModalTitle') }}</div>
+          <v-btn class="close-btn" icon aria-label="Close cancel status" title="Close cancel status" @click="close">
+            <v-icon>$vuetify.icons.close</v-icon>
+          </v-btn>
+        </div>
+        <div class="px-4 pt-5 pb-8">
+          <div class="text-caption text-center text_1--text font-weight-bold mb-7">
+            {{ t('walletActivity.cancelModalDesc') }}
+            <span class="error--text">{{ t('walletActivity.cancelModalUnsuccessful') }}</span>
+          </div>
+          <div class="d-flex transaction-details pb-10">
+            <TransactionImage :is-cancel="true" :transaction="transaction" />
+            <div class="ml-auto amount-container">
+              <div class="caption text_1--text font-weight-medium">
+                <span
+                  v-if="
+                    transaction.type !== CONTRACT_TYPE_ERC721 &&
+                    transaction.type !== CONTRACT_TYPE_ERC1155 &&
+                    transaction.action === ACTIVITY_ACTION_SEND
+                  "
+                  class="error--text"
+                >
+                  -
+                </span>
+                {{ transaction.totalAmountString }}
+              </div>
+              <div class="info text_2--text font-weight-light">{{ transaction.currencyAmountString }}</div>
+            </div>
+          </div>
+          <div class="ma-2 text-caption text-center">{{ t('walletActivity.cancelModalNote') }}</div>
+        </div>
+      </v-card-text>
+      <v-card-actions class="pb-4">
+        <v-btn block text color="text_2" @click="close">{{ t('walletActivity.cancelModalClose') }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { ACTIVITY_ACTION_SEND, CONTRACT_TYPE_ERC721, CONTRACT_TYPE_ERC1155 } from '../../../utils/enums'
+import TransactionImage from '../TransactionImage'
+
+export default {
+  components: {
+    TransactionImage,
+  },
+  props: {
+    cancelDialog: {
+      type: Boolean,
+      default: false,
+    },
+    transaction: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      ACTIVITY_ACTION_SEND,
+      CONTRACT_TYPE_ERC721,
+      CONTRACT_TYPE_ERC1155,
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'CancellationFailedModal.scss';
+</style>
diff --git a/src/components/WalletHistory/CancellationFailedModal/index.js b/src/components/WalletHistory/CancellationFailedModal/index.js
new file mode 100644
index 000000000..4d96272c5
--- /dev/null
+++ b/src/components/WalletHistory/CancellationFailedModal/index.js
@@ -0,0 +1 @@
+export { default } from './CancellationFailedModal.vue'
diff --git a/src/components/WalletHistory/CancellationModal/CancellationModal.vue b/src/components/WalletHistory/CancellationModal/CancellationModal.vue
index fe84beff6..e14d0fc70 100644
--- a/src/components/WalletHistory/CancellationModal/CancellationModal.vue
+++ b/src/components/WalletHistory/CancellationModal/CancellationModal.vue
@@ -3,7 +3,7 @@
     <v-card class="cancel-transaction-modal">
       <v-card-text class="pa-0">
         <div class="card-header text-center xs12 py-6 px-6">
-          <div class="text-body2 text_1--text font-weight-bold">Transaction cancellation</div>
+          <div class="text-body2 text_1--text font-weight-bold">{{ t('walletActivity.cancelModalTitle') }}</div>
           <v-btn class="close-btn" icon aria-label="Close cancel transaction" title="Close cancel transaction" @click="close">
             <v-icon>$vuetify.icons.close</v-icon>
           </v-btn>
diff --git a/src/components/WalletHistory/TransactionDetails/TransactionDetails.vue b/src/components/WalletHistory/TransactionDetails/TransactionDetails.vue
index 89765666d..19361fe8a 100644
--- a/src/components/WalletHistory/TransactionDetails/TransactionDetails.vue
+++ b/src/components/WalletHistory/TransactionDetails/TransactionDetails.vue
@@ -48,6 +48,7 @@
       @close="cancelTransactionModal = false"
       @cancelTransaction="cancelTransaction"
     />
+    <CancellationFailedModal :cancel-dialog="failedCancelModal" :transaction="transaction" @close="failedCancelModal = false" />
   </v-card>
 </template>
 
@@ -65,6 +66,7 @@ import {
   CONTRACT_TYPE_ERC1155,
 } from '../../../utils/enums'
 import { significantDigits } from '../../../utils/utils'
+import CancellationFailedModal from '../CancellationFailedModal'
 import CancellationModal from '../CancellationModal'
 import TransactionDetailsMore from '../TransactionDetailsMore'
 import TransactionImage from '../TransactionImage'
@@ -74,6 +76,7 @@ const weiInGwei = new BigNumber('10').pow(new BigNumber('9'))
 export default {
   components: {
     CancellationModal,
+    CancellationFailedModal,
     TransactionDetailsMore,
     TransactionImage,
   },
@@ -97,6 +100,7 @@ export default {
     return {
       showDetails: false,
       cancelTransactionModal: false,
+      failedCancelModal: false,
       ACTIVITY_ACTION_SEND,
       ACTIVITY_STATUS_SUCCESSFUL,
       ACTIVITY_STATUS_UNSUCCESSFUL,
@@ -125,6 +129,18 @@ export default {
       return `${significantDigits(txFee, false, 2)} ${this.selectedCurrency}`
     },
   },
+  watch: {
+    transaction: {
+      handler(newVal, oldVal) {
+        // alert when cancel transaction fails
+        const failingList = new Set(['cancelling', 'cancelled'])
+        if (oldVal.status === 'cancelling' && !failingList.has(newVal.status)) {
+          this.failedCancelModal = true
+        }
+      },
+      deep: true,
+    },
+  },
   methods: {
     getChipColor(status) {
       if (status === ACTIVITY_STATUS_SUCCESSFUL) return '#9BE8C7'
diff --git a/src/components/WalletHistory/TransactionDetailsMore/TransactionDetailsMore.vue b/src/components/WalletHistory/TransactionDetailsMore/TransactionDetailsMore.vue
index 377efc0be..becbb8f87 100644
--- a/src/components/WalletHistory/TransactionDetailsMore/TransactionDetailsMore.vue
+++ b/src/components/WalletHistory/TransactionDetailsMore/TransactionDetailsMore.vue
@@ -59,7 +59,7 @@
           <div v-if="transaction.hasCancel" class="caption">
             <div class="text_1--text d-flex mb-2">
               <div class="details-label d-flex mr-6">
-                <span>{{ t('walletActivity.cancelButtonTooltip') }}</span>
+                <span>{{ t('walletActivity.cancelDate') }}</span>
                 <span class="ml-auto">:</span>
               </div>
               <div class="details-value">{{ transaction.cancelDateInitiated }}</div>
@@ -73,25 +73,32 @@
             </div> -->
           </div>
         </v-flex>
-        <v-flex v-if="transaction.etherscanLink || showCancel" xs12 sm6 class="text-right mt-4 mt-sm-0">
+        <v-flex v-if="transaction.etherscanLink || transaction.statusText === ACTIVITY_STATUS_PENDING" xs12 sm6 class="text-right mt-4 mt-sm-0">
           <v-layout :class="{ 'd-inline-flex': !$vuetify.breakpoint.xsOnly }">
             <v-flex>
               <v-tooltip top>
                 <template #activator="{ on }">
-                  <v-btn
-                    v-if="showCancel"
-                    class="text_2--text"
-                    :class="{ 'mr-2': !$vuetify.breakpoint.xsOnly }"
-                    :block="$vuetify.breakpoint.xsOnly"
-                    text
-                    v-on="on"
-                    @click.stop="showCancelTransaction"
-                  >
-                    {{ t('walletActivity.cancelButton') }}
-                  </v-btn>
+                  <span v-on="on">
+                    <v-btn
+                      v-if="transaction.statusText === ACTIVITY_STATUS_PENDING"
+                      class="text_2--text"
+                      :class="{ 'mr-2': !$vuetify.breakpoint.xsOnly }"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      text
+                      :disabled="timeDiff < allowCancelTime"
+                      @click.stop="showCancelTransaction"
+                    >
+                      {{ t('walletActivity.cancelButton') }}
+                    </v-btn>
+                  </span>
                 </template>
                 <span>
-                  <div class="caption text_3--text text-justify">{{ t('walletActivity.cancelButtonTooltip') }} {{ cancellationFeeEstimate }}</div>
+                  <div v-if="timeDiff >= allowCancelTime" class="caption text_3--text text-justify">
+                    {{ t('walletActivity.cancelButtonTooltip') }} {{ cancellationFeeEstimate }}
+                  </div>
+                  <div v-else class="caption text_3--text text-justify">
+                    {{ t('walletActivity.cancelButtonTooltipDisabled') }} {{ allowCancelTime - timeDiff }}min
+                  </div>
                 </span>
               </v-tooltip>
             </v-flex>
@@ -147,16 +154,17 @@ export default {
       ACTIVITY_STATUS_PENDING,
       CONTRACT_TYPE_ERC721,
       CONTRACT_TYPE_ERC1155,
+      allowCancelTime: 8,
     }
   },
   computed: {
     ...mapState(['networkType']),
-    showCancel() {
+    timeDiff() {
       const transactionDate = new Date(this.transaction.date)
       const currentDate = new Date()
       const diff = Math.abs(transactionDate - currentDate) / 1000 / 60
 
-      return diff > 8 && this.transaction.statusText === ACTIVITY_STATUS_PENDING
+      return Math.floor(diff)
     },
   },
   methods: {
diff --git a/src/containers/WalletHistory/WalletHistory.vue b/src/containers/WalletHistory/WalletHistory.vue
index d6f6f2fc7..133a01d5d 100644
--- a/src/containers/WalletHistory/WalletHistory.vue
+++ b/src/containers/WalletHistory/WalletHistory.vue
@@ -172,7 +172,10 @@ export default {
     calculatedFinalTx() {
       let finalTx = [...this.paymentTx, ...this.pastTx, ...this.etherscanTx]
       finalTx = finalTx.reduce((accumulator, x) => {
-        const cancelTxs = finalTx.filter((tx) => x.id !== tx.id && tx.is_cancel && tx.nonce === x.nonce).sort((a, b) => b.date - a.date)
+        const failingList = new Set(['rejected', 'denied', 'unapproved', 'failed'])
+        const cancelTxs = finalTx
+          .filter((tx) => x.id !== tx.id && tx.is_cancel && tx.nonce === x.nonce && !failingList.has(tx.status))
+          .sort((a, b) => b.date - a.date)
         if (cancelTxs.length > 0) {
           x.hasCancel = true
           x.status = cancelTxs[0].status === 'confirmed' ? 'cancelled' : 'cancelling'