Skip to content

Commit

Permalink
- add cancellation timer
Browse files Browse the repository at this point in the history 
- handle failed cancel transaction
  • Loading branch information
@lionellbriones
lionellbriones committed Jul 13, 2021
1 parent 9f9d6bf commit 5ca024f
Show file tree
Hide file tree
Showing 7 changed files with 184 additions and 18 deletions.
56 changes: 56 additions & 0 deletions src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
82 changes: 82 additions & 0 deletions src/components/WalletHistory/CancellationFailedModal/CancellationFailedModal.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions src/components/WalletHistory/CancellationFailedModal/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './CancellationFailedModal.vue'
2 changes: 1 addition & 1 deletion src/components/WalletHistory/CancellationModal/CancellationModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 16 additions & 0 deletions src/components/WalletHistory/TransactionDetails/TransactionDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
@close="cancelTransactionModal = false"
@cancelTransaction="cancelTransaction"
/>
<CancellationFailedModal :cancel-dialog="failedCancelModal" :transaction="transaction" @close="failedCancelModal = false" />
</v-card>
</template>

Expand All @@ -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'
Expand All @@ -74,6 +76,7 @@ const weiInGwei = new BigNumber('10').pow(new BigNumber('9'))
export default {
components: {
CancellationModal,
CancellationFailedModal,
TransactionDetailsMore,
TransactionImage,
},
Expand All @@ -97,6 +100,7 @@ export default {
return {
showDetails: false,
cancelTransactionModal: false,
failedCancelModal: false,
ACTIVITY_ACTION_SEND,
ACTIVITY_STATUS_SUCCESSFUL,
ACTIVITY_STATUS_UNSUCCESSFUL,
Expand Down Expand Up @@ -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'
Expand Down
40 changes: 24 additions & 16 deletions src/components/WalletHistory/TransactionDetailsMore/TransactionDetailsMore.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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: {
Expand Down
5 changes: 4 additions & 1 deletion src/containers/WalletHistory/WalletHistory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down

0 comments on commit 5ca024f

Please sign in to comment.