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,11 +4,18 @@
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-tab
title="Recent"
disabled
/>
<b-tab
title="Blocks"
active
>
<b-table <b-table
:items="blocks" :items="blocks"
:fields="list_fields" :fields="list_fields"
@ -38,23 +45,43 @@
</template> </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>