add recent transactions
This commit is contained in:
parent
19d44be755
commit
07bd6ee4b1
@ -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",
|
||||||
|
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user