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

300 lines
9.1 KiB
Vue

<template>
<div v-show="Object.keys(allTxs).length > 0 || Object.keys(jobs('tornado')).length > 0" class="txs">
<div class="tx-filters buttons">
<div class="tx-filters-title">{{ $t('filterBy') }}</div>
<b-button
v-for="(token, key) in tokens"
:key="key"
type="is-primary"
size="is-small"
:class="{ 'is-hovered': filters.currency === key }"
outlined
:disabled="!activeTokensFilters.has(key) && filters.currency !== key"
@click="setFilter('currency', key)"
>
{{ token.symbol }}
</b-button>
<div class="break"></div>
<b-field>
<p class="control">
<b-button
type="is-primary"
size="is-small"
:class="{ 'is-hovered': filters.isSpent === true }"
outlined
@click="setSpent(true)"
>
{{ $t('spent') }}
</b-button>
</p>
<p class="control">
<b-button
type="is-primary"
size="is-small"
:class="{ 'is-hovered': filters.isSpent === false }"
outlined
@click="setSpent(false)"
>
{{ $t('unspent') }}
</b-button>
</p>
</b-field>
<div class="break"></div>
<b-field>
<p class="control">
<b-button
type="is-primary"
size="is-small"
:class="{ 'is-hovered': transactions === 'regular' }"
outlined
@click="setTransactionFilter('regular')"
>
{{ $t('regular') }}
</b-button>
</p>
<p class="control">
<b-button
type="is-primary"
size="is-small"
:class="{ 'is-hovered': transactions === 'encrypted' }"
outlined
@click="setTransactionFilter('encrypted')"
>
{{ $t('encrypted') }}
</b-button>
</p>
</b-field>
</div>
<div class="tx-head">
<div class="columns">
<div class="column is-time is-sortable" @click="setSort('timestamp')">
{{ $t('timePassed') }}
<span
v-show="currentSort === 'timestamp'"
class="icon icon-chevron-up"
:class="{ 'is-desc': !isAsc }"
/>
</div>
<div class="column is-amount is-sortable" @click="setSort('amount')">
{{ $t('amount') }}
<span
v-show="currentSort === 'amount'"
class="icon icon-chevron-up"
:class="{ 'is-desc': !isAsc }"
/>
</div>
<div class="column is-deposit is-sortable" @click="setSort('deposits')">
{{ $t('subsequentDeposits') }}
<span
v-show="currentSort === 'deposits'"
class="icon icon-chevron-up"
:class="{ 'is-desc': !isAsc }"
/>
</div>
<div class="column is-hash">{{ $t('txHash') }}</div>
<div class="column is-status">{{ $t('status') }}</div>
<div class="column column-buttons"></div>
</div>
</div>
<div class="tx-head-mobile field is-grouped">
<div class="control is-expanded">
<b-dropdown v-model="mobileSort" expanded aria-role="list">
<div slot="trigger" class="control">
<div class="input">
<span>{{
mobileSort === 'timestamp'
? $t('timePassed')
: mobileSort === 'amount'
? $t('amount')
: $t('subsequentDeposits')
}}</span>
</div>
</div>
<b-dropdown-item value="timestamp" aria-role="listitem">
{{ $t('timePassed') }}
</b-dropdown-item>
<b-dropdown-item value="amount" aria-role="listitem">{{ $t('amount') }}</b-dropdown-item>
<b-dropdown-item value="deposits" aria-role="listitem">
{{ $t('subsequentDeposits') }}
</b-dropdown-item>
</b-dropdown>
</div>
<div class="control">
<button class="button is-primary" @click="setSort(mobileSort)">
<span
v-show="currentSort === mobileSort"
class="icon icon-arrow-up"
:class="{ 'is-desc': !isAsc }"
/>
</button>
</div>
</div>
<Job v-for="job in jobs('tornado')" :key="job.id" :job="job" />
<template v-for="tx in filteredTxs">
<EncryptedTx v-if="tx.isEncrypted" :key="tx.txHash" :tx="tx" />
<Tx v-else :key="tx.txHash" :tx="tx" />
</template>
<div v-show="filteredTxs.length === 0 && jobs('tornado').length === 0" class="box box-tx is-white">
<div class="columns is-vcentered is-centered">
<div class="column">{{ $t('thereAreNoElements') }}</div>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable no-console */
import { mapActions, mapGetters, mapState } from 'vuex'
import Tx from '@/components/Tx'
import EncryptedTx from '@/components/EncryptedTx'
import Job from '@/components/Job'
const { toWei, toBN } = require('web3-utils')
export default {
components: {
Tx,
Job,
EncryptedTx
},
data() {
return {
filters: {
currency: '',
ifAfter24hrs: false,
isSpent: undefined,
timer: null
},
transactions: 'all',
currentSort: 'timestamp',
isAsc: false,
mobileSort: 'timestamp'
}
},
computed: {
...mapGetters('metamask', ['networkConfig', 'nativeCurrency']),
...mapGetters('txHashKeeper', ['allTxs', 'txs', 'txExplorerUrl', 'encryptedTxs']),
...mapGetters('relayer', ['jobs']),
...mapGetters('price', ['getTokenPrice']),
...mapState('application', ['statistic']),
tokens() {
return this.networkConfig.tokens
},
activeTokensFilters() {
const filters = new Set()
this.allTxs.forEach((tx) => {
filters.add(tx.currency)
})
return filters
},
filteredTxs() {
if (this.transactions === 'regular') {
return this.filterTxs(this.txs)
}
if (this.transactions === 'encrypted') {
return this.filterTxs(this.encryptedTxs)
}
return this.filterTxs(this.allTxs)
}
},
watch: {
mobileSort(sort) {
if (this.currentSort === sort) {
return
}
this.setSort(sort)
},
currentSort(sort) {
this.mobileSort = sort
}
},
mounted() {
this.timer = setTimeout(() => {
this.cleanTxs()
this.cleanEncryptedTxs()
this.checkPendingTransaction()
this.checkPendingEncryptedTransaction()
}, 2500)
},
beforeDestroy() {
clearTimeout(this.timer)
},
methods: {
...mapActions('txHashKeeper', [
'cleanTxs',
'cleanEncryptedTxs',
'checkPendingTransaction',
'checkPendingEncryptedTransaction'
]),
setFilter(filter, value) {
this.filters[filter] = this.filters[filter] === value ? '' : value
},
setSort(sort) {
this.isAsc = sort === this.currentSort ? !this.isAsc : true
this.currentSort = sort
},
filterTxs(txs) {
return txs
.filter((tx) => {
const isMatched = []
if (this.filters.currency !== '') {
isMatched.push(this.filters.currency === tx.currency)
}
if (this.filters.ifAfter24hrs) {
isMatched.push(this.$moment().unix() - Number(tx.timestamp) > 86400)
}
if (this.filters.isSpent !== undefined) {
isMatched.push(this.filters.isSpent === Boolean(tx.isSpent))
}
return isMatched.every(Boolean)
})
.sort((a, b) => {
if (this.currentSort === 'deposits') {
const depositsA = this.getDepositsPast(a)
const depositsB = this.getDepositsPast(b)
return this.isAsc ? depositsA - depositsB : depositsB - depositsA
}
if (this.currentSort === 'amount') {
return this.isAsc ? this.compareAmounts(a, b) : this.compareAmounts(b, a)
}
return this.isAsc
? this.compareNumbers(a[this.currentSort], b[this.currentSort])
: this.compareNumbers(b[this.currentSort], a[this.currentSort])
})
},
compareNumbers(a, b) {
const a1 = isNaN(Number(a)) ? 0 : Number(a)
const b1 = isNaN(Number(b)) ? 0 : Number(b)
return a1 - b1
},
compareAmounts(a, b) {
let amountA = toBN(toWei(a.amount))
if (a.currency !== this.nativeCurrency) {
const priceA = toBN(this.getTokenPrice(a.currency))
amountA = amountA.mul(priceA)
}
let amountB = toBN(toWei(b.amount))
if (b.currency !== this.nativeCurrency) {
const priceB = toBN(this.getTokenPrice(b.currency))
amountB = amountB.mul(priceB)
}
return amountA.cmp(amountB)
},
getDepositsPast(tx) {
const [, currency, amount] = tx.prefix.split('-')
return this.statistic[currency][amount].nextDepositIndex - tx.index - 1
},
setTransactionFilter(value) {
this.transactions = this.transactions === value ? 'all' : value
},
setSpent(value) {
this.filters.isSpent = this.filters.isSpent === value ? undefined : value
}
}
}
</script>