classic-ui/components/Tx.vue
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

185 lines
5.1 KiB
Vue

<template>
<div
class="box box-tx"
:class="{
'is-waiting': isWaiting,
'is-danger': isFailed,
'is-spent': tx.isSpent
}"
>
<div class="columns is-vcentered">
<div class="column is-time" :data-label="$t('timePassed')">{{ time }}</div>
<div class="column is-amount" :data-label="$t('amount')">
<NumberFormat :value="amount" />
{{ currency }}
</div>
<div class="column is-deposit" :data-label="$t('subsequentDeposits')">
<b-skeleton v-if="mixingPower === 'loading'" width="80" />
<template v-else>
{{ mixingPower }}
</template>
</div>
<div class="column is-hash" :data-label="$t('txHash')">
<div class="details">
<p class="detail">
<a class="detail-description" :href="txExplorerUrl(tx.txHash)" target="_blank">
{{ tx.txHash }}
</a>
</p>
</div>
</div>
<div class="column is-status" :data-label="$t('status')">{{ status }}</div>
<div class="column column-buttons">
<b-tooltip :active="!!tx.note" :label="tooltipShareUrl" position="is-left">
<b-button
v-clipboard:copy="`${tx.prefix}-${tx.note}`"
v-clipboard:success="onCopyLink"
type="is-primary hide-text-touch"
size="is-small"
:disabled="!tx.note"
icon-left="copy"
>
{{ $t('note') }}
</b-button>
</b-tooltip>
<b-button type="is-dark" size="is-small" icon-right="remove" @click="onClose" />
</div>
</div>
</div>
</template>
<script>
/* eslint-disable no-console */
import { mapGetters, mapState } from 'vuex'
import txStatus from '../store/txStatus'
import NumberFormat from '@/components/NumberFormat'
export default {
components: {
NumberFormat
},
props: {
tx: {
type: Object,
required: true
}
},
data() {
return {
tooltipShareUrl: this.$t('copyNote'),
time: '',
isSpent: false,
timer: null,
copyTimer: null
}
},
computed: {
...mapGetters('txHashKeeper', ['txExplorerUrl']),
...mapGetters('metamask', ['networkConfig', 'nativeCurrency']),
...mapGetters('token', ['toDecimals', 'getSymbol']),
...mapState('application', ['statistic']),
prefix() {
let prefix = this.tx.prefix || ''
prefix = prefix.split('-')
return { currency: prefix[1], amount: prefix[2] }
},
amount() {
if (this.tx.amount === '100000000000000000') {
return this.toDecimals(this.tx.amount, 18)
}
return this.tx.amount
},
currency() {
const { currency } = this.prefix
return this.getSymbol(currency || this.tx.currency)
},
mixingPower() {
if (!this.tx.index) {
return '-'
}
if (this.tx.index === 'v1') {
return this.$t('v1Deposit')
}
const { currency, amount } = this.prefix
const nextDepositIndex = this.statistic[currency][amount].nextDepositIndex
if (this.tx.status === txStatus.waitingForReciept || !nextDepositIndex) {
return 'loading'
} else if (this.tx.status === txStatus.fail) {
return '-'
} else {
const depositsPast = this.statistic[currency][amount].nextDepositIndex - this.tx.index - 1
return this.depositsPastToRender(depositsPast)
}
},
status() {
if (this.isWaiting) {
return this.$t('waitingForReceipt')
}
if (this.isFailed) {
return this.$t('failed')
}
if (this.tx.isSpent) {
return this.$t('spent')
}
return this.$t('deposited')
},
isWaiting() {
return this.tx.status === txStatus.waitingForReciept
},
isFailed() {
return this.tx.status === txStatus.fail
}
},
mounted() {
this.update()
},
beforeDestroy() {
clearTimeout(this.timer)
clearTimeout(this.copyTimer)
},
methods: {
update() {
this.updateTime()
this.timer = setTimeout(() => {
this.update()
}, 10000)
},
onCopyLink() {
this.tooltipShareUrl = this.$t('copied')
this.copyTimer = setTimeout(() => {
this.tooltipShareUrl = this.$t('copyNote')
}, 1500)
},
onClose() {
this.$buefy.dialog.confirm({
title: this.$t('removeFromCache'),
type: 'is-primary is-outlined',
message: this.$t('pleaseMakeSureYouHaveBackedUpYourNote'),
cancelText: this.$t('cancelButton'),
confirmText: this.$t('remove'),
onConfirm: () => {
this.$store.dispatch('notice/addNoticeWithInterval', {
notice: {
title: 'noteHasBeenDeleted',
type: 'info'
},
interval: 2000
})
this.$store.commit('txHashKeeper/DELETE_TX', { txHash: this.tx.txHash })
}
})
},
updateTime(t = this.tx.timestamp) {
this.time = this.$moment.unix(t).fromNow()
},
depositsPastToRender(depositsPast) {
if (depositsPast < 0) {
return 'loading'
}
return this.$tc('userDeposit', depositsPast)
}
}
}
</script>