123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <div class="column is-half">
- <div class="box-stats">
- <div class="tab-with-corner is-left-top">
- {{ $t('statistics') }}
- <span class="selected"
- ><NumberFormat :value="selectedStatistic.amount" /> {{ selectedStatisticCurrency }}</span
- >
- </div>
- <div class="box">
- <div class="label">
- {{ $t('anonymitySet') }}
- <b-tooltip :label="$t('anonymitySetTooltip')" size="is-medium" position="is-top" multilined>
- <button class="button is-primary has-icon">
- <span class="icon icon-info"></span>
- </button>
- </b-tooltip>
- </div>
- <div class="field">
- <i18n v-if="anonimitySet" path="equalUserDeposit">
- <span v-if="anonimitySet > 1 && anonimitySet < 5" slot="only">{{ $t('only') }}</span>
- <b v-if="anonimitySet > 1" slot="n">{{ Number(anonimitySet) }}</b>
- <span slot="equalUserDepositText">{{ $tc('equalUserDepositPlural', Number(anonimitySet)) }}</span>
- </i18n>
- <b-skeleton size="is-large" :active="!anonimitySet" width="200"></b-skeleton>
- </div>
- <template v-if="anonimitySet != 0">
- <div class="label">{{ $t('latestDeposits') }}</div>
- <div v-if="latestDeposits && latestDeposits.length" class="columns is-small is-multiline">
- <div class="column is-half-small">
- <div class="deposits">
- <div v-for="{ index, depositTime } in latestDeposits.slice(0, 5)" :key="index" class="row">
- <div class="value">{{ Number(index) + 1 }}.</div>
- <div class="data">{{ depositTime }}</div>
- </div>
- </div>
- </div>
- <div class="column is-half-small">
- <div class="deposits">
- <div v-for="{ index, depositTime } in latestDeposits.slice(5, 10)" :key="index" class="row">
- <div class="value">{{ Number(index) + 1 }}.</div>
- <div class="data">{{ depositTime }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-else class="columns is-small is-multiline">
- <div class="column is-half-small">
- <div class="deposits">
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- </div>
- </div>
- <div class="column is-half-small">
- <div class="deposits">
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- <b-skeleton size="is-large"></b-skeleton>
- </div>
- </div>
- </div>
- </template>
- </div>
- </div>
- </div>
- </template>
- <script>
- /* eslint-disable no-console */
- import { mapState, mapGetters } from 'vuex'
- import NumberFormat from '@/components/NumberFormat'
- export default {
- components: {
- NumberFormat
- },
- data() {
- return {
- timer: null
- }
- },
- computed: {
- ...mapState('application', ['ip', 'statistic', 'selectedStatistic']),
- ...mapGetters('metamask', ['networkConfig']),
- ...mapGetters('application', ['selectedStatisticCurrency', 'latestDeposits']),
- anonimitySet() {
- const currency = this.selectedStatistic.currency.toLowerCase()
- return this.statistic[currency][this.selectedStatistic.amount].anonymitySet
- }
- },
- mounted() {
- if (!this.timer) {
- this.updateEvents()
- }
- },
- beforeDestroy() {
- clearTimeout(this.timer)
- },
- methods: {
- updateEvents() {
- this.$store.dispatch('application/updateSelectEvents')
- this.timer = setTimeout(() => {
- this.updateEvents()
- }, 60 * 1000)
- }
- }
- }
- </script>
|