add recent transactions

This commit is contained in:
liangping 2022-08-25 14:57:51 +08:00
parent 19d44be755
commit 07bd6ee4b1
3 changed files with 102 additions and 36 deletions

View File

@ -36,7 +36,7 @@
"staking": "Staking", "staking": "Staking",
"governance": "Governance", "governance": "Governance",
"summary": "Summary", "summary": "Summary",
"blocks": "Blocks", "blocks": "Blocks / Txs",
"blockchains": "Blockchains", "blockchains": "Blockchains",
"uptime": "Uptime", "uptime": "Uptime",
"statesync": "State Sync", "statesync": "State Sync",

View File

@ -9,6 +9,7 @@ export default class Tx {
this.memo = '' this.memo = ''
this.messages = [] this.messages = []
this.signatures = [] this.signatures = []
this.time = null
} }
static create(element) { static create(element) {

View File

@ -4,57 +4,84 @@
no-body no-body
class="text-truncate" class="text-truncate"
> >
<b-card-header> <b-tabs
<b-card-title> pills
Blocks class="mt-1"
</b-card-title>
</b-card-header>
<b-table
:items="blocks"
:fields="list_fields"
:sort-desc="true"
sort-by="tokens"
striped
hover
stacked="sm"
> >
<!-- Column: Height --> <b-tab
<template #cell(height)="data"> title="Recent"
<router-link :to="`./blocks/${data.item.block.header.height}`"> disabled
{{ data.item.block.header.height }} />
</router-link> <b-tab
</template> title="Blocks"
<template #cell(hash)="data"> active
<small>{{ data.item.block_id.hash }}</small> >
</template> <b-table
<template #cell(time)="data"> :items="blocks"
{{ formatTime(data.item.block.header.time) }} :fields="list_fields"
</template> :sort-desc="true"
<template #cell(proposer)="data"> sort-by="tokens"
{{ formatProposer(data.item.block.header.proposer_address) }} striped
</template> hover
<template #cell(txs)="data"> stacked="sm"
{{ length(data.item.block.data.txs) }} >
</template> <!-- Column: Height -->
<template #cell(height)="data">
<router-link :to="`./blocks/${data.item.block.header.height}`">
{{ data.item.block.header.height }}
</router-link>
</template>
<template #cell(hash)="data">
<small>{{ data.item.block_id.hash }}</small>
</template>
<template #cell(time)="data">
{{ formatTime(data.item.block.header.time) }}
</template>
<template #cell(proposer)="data">
{{ formatProposer(data.item.block.header.proposer_address) }}
</template>
<template #cell(txs)="data">
{{ length(data.item.block.data.txs) }}
</template>
</b-table> </b-table>
</b-tab>
<b-tab title="Transactions">
<b-table
:items="txs"
:fields="txFields"
responsive="sm"
>
<template #cell(hash)="data">
<router-link :to="`./tx/${data.value}`">
{{ shortHash(data.value) }}
</router-link>
</template>
</b-table>
</b-tab>
</b-tabs>
</b-card> </b-card>
</div> </div>
</template> </template>
<script> <script>
import { import {
BTable, BCard, BCardHeader, BCardTitle, VBTooltip, BTable, BCard, BCardHeader, BCardTitle, VBTooltip, BTab, BTabs,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
getCachedValidators, getCachedValidators,
getStakingValidatorByHex, getStakingValidatorByHex,
toDay, toDay, abbr, abbrMessage, tokenFormatter,
} from '@/libs/utils' } from '@/libs/utils'
import { decodeTxRaw } from '@cosmjs/proto-signing'
import { fromBase64 } from '@cosmjs/encoding'
import Tx from '@/libs/data/tx'
// import fetch from 'node-fetch' // import fetch from 'node-fetch'
export default { export default {
components: { components: {
BTab,
BTabs,
BCard, BCard,
BTable, BTable,
BCardHeader, BCardHeader,
@ -67,6 +94,7 @@ export default {
return { return {
islive: true, islive: true,
blocks: [], blocks: [],
txs: [],
list_fields: [ list_fields: [
{ {
key: 'height', key: 'height',
@ -90,6 +118,13 @@ export default {
tdClass: 'd-none d-md-block', tdClass: 'd-none d-md-block',
}, },
], ],
txFields: [
{ key: 'hash' },
{ key: 'time', formatter: v => toDay(v, 'time') },
{ key: 'fee', formatter: v => tokenFormatter(v) },
{ key: 'messages', formatter: v => abbrMessage(v) },
{ key: 'memo' },
],
} }
}, },
created() { created() {
@ -111,6 +146,9 @@ export default {
this.$http.getBlockByHeight(item).then(b => { this.$http.getBlockByHeight(item).then(b => {
resolve() resolve()
this.blocks.push(b) this.blocks.push(b)
if (this.txs.length < 20) {
this.extractTx(b, 'tail')
}
}) })
})) }))
}) })
@ -123,6 +161,7 @@ export default {
}, },
methods: { methods: {
length: v => (Array.isArray(v) ? v.length : 0), length: v => (Array.isArray(v) ? v.length : 0),
shortHash: v => abbr(v),
formatTime: v => toDay(v, 'time'), formatTime: v => toDay(v, 'time'),
formatProposer(v) { formatProposer(v) {
return getStakingValidatorByHex(this.$http.config.chain_name, v) return getStakingValidatorByHex(this.$http.config.chain_name, v)
@ -130,10 +169,36 @@ export default {
fetch() { fetch() {
this.$http.getLatestBlock().then(b => { this.$http.getLatestBlock().then(b => {
const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height) const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)
if (has < 0) this.blocks.unshift(b) if (has < 0) {
this.blocks.unshift(b)
this.extractTx(b)
}
if (this.blocks.length > 200) this.blocks.pop() if (this.blocks.length > 200) this.blocks.pop()
}) })
}, },
extractTx(block, direction = 'head') {
const { txs } = block.block.data
if (txs === null) return
for (let i = 0; i < txs.length; i += 1) {
let tx = new Tx()
try {
const origin = decodeTxRaw(fromBase64(txs[i]))
tx = Tx.create(origin)
tx.time = block.block.header.time
} catch (e) {
// catch errors
}
tx.setHash(txs[i])
if (direction === 'head') {
this.txs.unshift(tx)
if (this.txs.length > 100) {
this.txs.pop()
}
} else if (this.txs.length < 100) {
this.txs.push(tx)
}
}
},
}, },
} }
</script> </script>