Make address human readable

This commit is contained in:
liangping 2021-08-08 18:08:09 +08:00
parent eaac3b295a
commit de77ea57c1
7 changed files with 99 additions and 52 deletions

View File

@ -8,9 +8,9 @@ import duration from 'dayjs/plugin/duration'
import relativeTime from 'dayjs/plugin/relativeTime'
import localeData from 'dayjs/plugin/localeData'
dayjs.extend(localeData)
dayjs.extend(duration)
dayjs.extend(relativeTime)
dayjs.extend(localeData)
export function toDuration(value) {
return dayjs.duration(value).humanize()
@ -39,9 +39,16 @@ export function percent(num) {
return parseFloat((num * 100).toFixed(2))
}
export function abbr(string, length = 6) {
export function abbr(string, length = 6, suffix = '...') {
if (string && string.length > length) {
return `${string.substring(0, length)}...`
return `${string.substring(0, length)}${suffix}`
}
return string
}
export function abbrRight(string, length = 6, suffix = '...') {
if (string && string.length > length) {
return `${string.substring(string.length - length)}${suffix}`
}
return string
}
@ -105,6 +112,9 @@ export function tokenFormatter(tokens) {
export function operatorAddressToAccount(operAddress) {
const { prefix, data } = Bech32.decode(operAddress)
if (prefix === 'iva') { // handle special cases
return Bech32.encode('iaa', data)
}
return Bech32.encode(prefix.replace('valoper', ''), data)
}
@ -119,6 +129,38 @@ export function consensusPubkeyToHexAddress(consensusPubkey) {
return address
}
export function getCachedValidators(chainName) {
const locals = localStorage.getItem(`validators-${chainName}`)
return locals
}
export function isHexAddress(v) {
const re = /^[A-Z\d]{40}$/
return re.test(v)
}
export function getStakingValidatorByHex(chainName, hex) {
const locals = localStorage.getItem(`validators-${chainName}`)
if (locals) {
const val = JSON.parse(locals).find(x => consensusPubkeyToHexAddress(x.consensus_pubkey) === hex)
if (val) {
return val.description.moniker
}
}
return abbr(hex)
}
export function getStakingValidatorByAccount(chainName, addr) {
const locals = localStorage.getItem(`validators-${chainName}`)
if (locals) {
const val = JSON.parse(locals).find(x => operatorAddressToAccount(x.operator_address) === addr)
if (val) {
return val.description.moniker
}
}
return addr
}
export * from 'compare-versions'
export class Data {

View File

@ -106,7 +106,11 @@ const chainAPI = class ChainFetch {
}
async getValidatorList() {
return this.get('/staking/validators').then(data => commonProcess(data).map(i => new Validator().init(i)))
return this.get('/staking/validators').then(data => {
const vals = commonProcess(data).map(i => new Validator().init(i))
localStorage.setItem(`validators-${this.config.chain_name}`, JSON.stringify(vals))
return vals
})
}
async getStakingValidator(address) {

View File

@ -95,7 +95,7 @@ const router = new VueRouter({
{
path: '/:chain/gov/:proposalid',
name: 'proposal',
component: () => import('@/views/ProposalView.vue'),
component: () => import('@/views/GovernanceProposalView.vue'),
meta: {
pageTitle: 'Governance',
breadcrumb: [

View File

@ -8,6 +8,7 @@
>
<template #cell()="data">
<span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
<span v-else-if="isHex(data.value)">{{ formatHexAddress(data.value) }}</span>
<array-field-component
v-else-if="isArrayText(data.value)"
:tablefield="eval_value(data.value)"
@ -25,7 +26,7 @@ import { BTable } from 'bootstrap-vue'
// import fetch from 'node-fetch'
import {
abbr, isToken, toDay, tokenFormatter,
abbr, getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
} from '@/libs/data/data'
// import { Proposal, Proposer } from '@/libs/data'
// import { formatToken } from '@/libs/data/data'
@ -65,6 +66,12 @@ export default {
formatTokens(value) {
return tokenFormatter(value)
},
isHex(value) {
return isHexAddress(value)
},
formatHexAddress(v) {
return getStakingValidatorByHex(this.$http.config.chain_name, v)
},
},
}
</script>

View File

@ -30,7 +30,7 @@
{{ formatTime(data.item.block.header.time) }}
</template>
<template #cell(proposer)="data">
{{ data.item.block.header.proposer_address }}
{{ formatProposer(data.item.block.header.proposer_address) }}
</template>
<template #cell(txs)="data">
{{ length(data.item.block.data.txs) }}
@ -46,6 +46,8 @@ import {
BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
} from 'bootstrap-vue'
import {
getCachedValidators,
getStakingValidatorByHex,
toDay,
} from '@/libs/data'
// import fetch from 'node-fetch'
@ -101,6 +103,10 @@ export default {
list.push(height - i)
}
if (!getCachedValidators()) {
this.$http.getValidatorList()
}
let promise = Promise.resolve()
list.forEach(item => {
promise = promise.then(() => new Promise(resolve => {
@ -120,6 +126,9 @@ export default {
methods: {
length: v => (Array.isArray(v) ? v.length : 0),
formatTime: v => toDay(v, 'time'),
formatProposer(v) {
return getStakingValidatorByHex(this.$http.config.chain_name, v)
},
fetch() {
this.$http.getLatestBlock().then(b => {
const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)

View File

@ -48,7 +48,7 @@
<b-tr>
<b-td>
{{ $t('proposal_proposer') }}
</b-td><b-td>{{ proposer.proposer }} </b-td>
</b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
</b-tr>
<b-tr>
<b-td>
@ -202,7 +202,7 @@ import {
} from 'bootstrap-vue'
// import fetch from 'node-fetch'
import { tokenFormatter } from '@/libs/data/data'
import { getCachedValidators, getStakingValidatorByAccount, tokenFormatter } from '@/libs/data/data'
import { Proposal, Proposer } from '@/libs/data'
import ObjectFieldComponent from './ObjectFieldComponent.vue'
// import { formatToken } from '@/libs/data/data'
@ -232,7 +232,11 @@ export default {
deposits: [],
votes: [],
votes_fields: [
{ key: 'voter', sortable: true },
{
key: 'voter',
sortable: true,
formatter: v => this.formatAddress(v),
},
{
key: 'option',
sortable: true,
@ -253,7 +257,10 @@ export default {
},
],
deposit_fields: [
'depositor',
{
key: 'depositor',
formatter: v => this.formatAddress(v),
},
{
key: 'amount',
sortable: true,
@ -273,6 +280,10 @@ export default {
this.proposal = p
})
if (!getCachedValidators()) {
this.$http.getValidatorList()
}
this.$http.getGovernanceProposer(pid).then(res => {
this.proposer = res
})
@ -283,46 +294,11 @@ export default {
this.votes = res
})
},
// asyncComputed: {
// proposal: {
// get() {
// const pid = this.$route.params.proposalid
// // const api = new ChainAPI(this.$route)
// return this.$http.getGovernance(pid).then(p => {
// if (p.status === 2) {
// this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t)).catch(e => console.log('failed on update voting tally:', e))
// }
// return p
// })
// },
// default: new Proposal(),
// },
// proposer: {
// get() {
// const pid = this.$route.params.proposalid
// // const api = new ChainAPI(this.$route)
// return this.$http.getGovernanceProposer(pid)
// },
// default: new Proposer(),
// },
// deposits: {
// get() {
// const pid = this.$route.params.proposalid
// // const api = new ChainAPI(this.$route)
// return this.$http.getGovernanceDeposits(pid)
// },
// default: [],
// },
// votes: {
// get() {
// const pid = this.$route.params.proposalid
// // const api = new ChainAPI(this.$route)
// return this.$http.getGovernanceVotes(pid)
// },
// default: [],
// },
// },
methods: {
formatAddress(v) {
return getStakingValidatorByAccount(this.$http.config.chain_name, v)
},
},
}
</script>

View File

@ -21,6 +21,9 @@
<b-td v-else-if="isArrayText(value)">
{{ value.join(', ') }}
</b-td>
<b-td v-else-if="isHex(value)">
{{ formatHexAddress(value) }}
</b-td>
<b-td v-else-if="Array.isArray(value)">
<array-field-component :tablefield="value" />
</b-td>
@ -60,7 +63,7 @@ import {
BTableSimple, BTr, BTd, BTabs, BTab,
} from 'bootstrap-vue'
import {
abbr, isStringArray, isToken, tokenFormatter,
abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
} from '@/libs/data'
import ArrayFieldComponent from './ArrayFieldComponent.vue'
@ -100,6 +103,12 @@ export default {
isTokenField(value) {
return isToken(value)
},
isHex(value) {
return isHexAddress(value)
},
formatHexAddress(v) {
return getStakingValidatorByHex(this.$http.config.chain_name, v)
},
isArrayText(value) {
return isStringArray(value)
},