cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Ui/Ux

Browse Source
This commit is contained in:
liangping 2021-09-13 11:40:13 +08:00
parent 87aed10821
commit 393d69b60f
10 changed files with 110 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -24,7 +24,7 @@
</noscript>
<div id="loading-bg">
<div class="loading-logo">
<img src="<%= BASE_URL %>logo.svg" alt="Logo" />
<img src="<%= BASE_URL %>logo.svg" alt="Logo" width="80"/>
</div>
<div class="loading">
<div class="effect-1 effects"></div>

27
src/layouts/components/Navbar.vue
View File

@ -44,7 +44,7 @@
size="42"
:src="selected_chain.logo"
class="badge-minimal"
:badge-variant="chainVariant"
:badge-variant="variant"
/></b-link>
</b-media-aside>
<b-media-body class="my-auto">
@ -166,22 +166,31 @@ export default {
},
data() {
return {
chainVariant: 'success',
variant: 'success',
tips: 'Synced',
}
},
computed: {
selected_chain() {
this.block()
return store.state.chains.selected
},
chainVariant() {
return this.variant
},
},
created() {
this.$http.getLatestBlock().then(block => {
if (timeIn(block.block.header.time, 1, 'm')) {
this.chainVariant = 'danger'
this.tips = `Halted ${toDay(block.block.header.time, 'from')} `
}
})
methods: {
block() {
store.commit('setHeight', 0)
this.$http.getLatestBlock().then(block => {
store.commit('setHeight', Number(block.block.header.height))
this.tips = `Synced height:${block.block.header.height}`
if (timeIn(block.block.header.time, 1, 'm')) {
this.variant = 'danger'
this.tips = `Halted ${toDay(block.block.header.time, 'from')}, Height: ${store.state.chains.height} `
}
})
},
},
}
</script>

4
src/libs/fetch.js
View File

@ -112,6 +112,10 @@ const chainAPI = class ChainFetch {
})
}
async getValidatorListByHeight(height) {
return this.get(`/validatorsets/${height}`).then(data => commonProcess(data))
}
async getStakingValidator(address) {
return this.get(`/staking/validators/${address}`).then(data => new Validator().init(commonProcess(data)))
}

5
src/store/chains/index.js
View File

@ -46,6 +46,7 @@ export default {
config: chains,
selected,
avatars: {},
height: 0,
},
getters: {
getchains: state => state.chains,
@ -61,7 +62,9 @@ export default {
cacheAvatar(state, args) {
state.chains.avatars[args.identity] = args.url
},
setHeight(state, height) {
state.chains.height = height
},
},
actions: {},
}

8
src/views/ArrayFieldComponent.vue
View File

@ -4,7 +4,7 @@
:items="tablefield"
:sticky-header="true"
:no-border-collapse="true"
responsive
responsive="sm"
class="ml-0 mr-0"
>
<template #cell()="data">
@ -24,13 +24,10 @@
<script>
import { BTable } from 'bootstrap-vue'
// import fetch from 'node-fetch'
import {
getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
} from '@/libs/data/data'
// import { Proposal, Proposer } from '@/libs/data'
// import { formatToken } from '@/libs/data/data'
export default {
name: 'ArrayFieldComponent',
@ -62,6 +59,9 @@ export default {
if (reg.test(value)) {
return toDay(value)
}
if (value.length > 30) {
return value.substring(0, 30).concat('...')
}
return value
},
formatTokens(value) {

9
src/views/Block.vue
View File

@ -33,7 +33,10 @@
</b-card>
<b-card title="Last Commit">
<object-field-component :tablefield="block.block.last_commit" />
<object-field-component
:tablefield="block.block.last_commit"
:small="true"
/>
</b-card>
</div>
</template>
@ -101,7 +104,3 @@ export default {
},
}
</script>
<style>
</style>

4
src/views/GovernanceProposalView.vue
View File

@ -372,5 +372,7 @@ export default {
.addzone :hover {
border: 2px dashed #7367F0;
}
@media (min-width: 768px) {
td:first-child { width: 20% ;}
}
</style>

2
src/views/ObjectFieldComponent.vue
View File

@ -131,7 +131,7 @@ export default {
}
</script>
<style lang='css'>
<style lang='css' scoped>
@media (min-width: 768px) {
td:first-child { width: 20% ;}
}

72
src/views/Staking.vue
View File

@ -20,7 +20,7 @@
</b-card-header>
<b-card-body class="pl-0 pr-0">
<b-table
:items="validators"
:items="list"
:fields="validator_fields"
:sort-desc="true"
sort-by="tokens"
@ -30,15 +30,17 @@
>
<!-- A virtual column -->
<template #cell(index)="data">
<b-badge
:variant="rankBadge(data)"
>
<b-badge :variant="rankBadge(data)">
{{ data.index + 1 }}
</b-badge>
</template>
<!-- Column: Validator -->
<template #cell(description)="data">
<b-media vertical-align="center d-none d-md-block">
<b-media
vertical-align="center"
class="text-truncate"
style="max-width:320px;"
>
<template #aside>
<b-avatar
v-if="data.item.avatar"
@ -63,7 +65,9 @@
{{ data.item.description.moniker }}
</router-link>
</span>
<small class="text-muted">{{ data.item.description.website || data.item.description.identity }}</small>
<small
class="text-muted"
>{{ data.item.description.website || data.item.description.identity }}</small>
</b-media>
</template>
<!-- Token -->
@ -77,6 +81,18 @@
</div>
<span v-else>{{ data.item.delegator_shares }}</span>
</template>
<!-- Token -->
<template #cell(changes)="data">
<small
v-if="data.item.changes>0"
class="text-success"
>+{{ data.item.changes }}</small>
<small v-else-if="data.item.changes===0">-</small>
<small
v-else
class="text-danger"
>{{ data.item.changes }}</small>
</template>
</b-table>
</b-card-body>
</b-card>
@ -91,6 +107,7 @@ import {
Validator, percent, StakingParameters, formatToken,
} from '@/libs/data'
import { keybase } from '@/libs/fetch'
// import { toHex } from '@cosmjs/encoding'
// import fetch from 'node-fetch'
export default {
@ -115,6 +132,7 @@ export default {
stakingParameters: new StakingParameters(),
validators: [new Validator()],
delegations: [new Validator()],
changes: {},
validator_fields: [
{
key: 'index',
@ -131,20 +149,54 @@ export default {
thClass: 'text-right',
sortByFormatted: true,
},
{
key: 'changes',
label: '24H Changes',
},
{
key: 'commission',
formatter: value => `${percent(value.rate)}%`,
tdClass: 'text-right d-none d-md-block',
thClass: 'text-right d-none d-md-block',
},
{
key: 'operation',
label: '',
},
],
}
},
computed: {
list() {
return this.validators.map(x => {
const xh = x
const change = this.changes[x.consensus_pubkey.value]
if (change) {
xh.changes = change.latest - change.previous
}
return xh
})
},
},
created() {
this.$http.getValidatorListByHeight('latest').then(data => {
let height = Number(data.block_height)
if (height > 14400) {
height -= 14400
} else {
height = 1
}
const changes = []
data.validators.forEach(x => {
changes[x.pub_key.value] = { latest: Number(x.voting_power), previous: 0 }
})
this.$http.getValidatorListByHeight(height).then(previous => {
previous.validators.forEach(x => {
if (changes[x.pub_key.value]) {
changes[x.pub_key.value].previous = Number(x.voting_power)
} else {
changes[x.pub_key.value] = { latest: 0, previous: Number(x.voting_power) }
}
})
this.$set(this, 'changes', changes)
})
})
this.$http.getStakingParameters().then(res => {
this.stakingParameters = res
})

11
src/views/StakingValidator.vue
View File

@ -140,7 +140,13 @@
<span class="font-weight-bold">Status</span>
</th>
<td class="pb-50 text-capitalize">
{{ validator.status }}
<b-badge
v-if="validator.status===3"
variant="light-success"
>
Active
</b-badge>
<span v-else>{{ validator.status }}</span>
</td>
</tr>
<tr>
@ -281,7 +287,7 @@
<script>
import {
BCard, BButton, BAvatar, BRow, BCol, BCardBody, BCardFooter, VBTooltip, VBModal,
BCard, BButton, BAvatar, BRow, BCol, BCardBody, BCardFooter, VBTooltip, VBModal, BBadge,
} from 'bootstrap-vue'
import {
@ -304,6 +310,7 @@ export default {
BAvatar,
BCardBody,
BCardFooter,
BBadge,
StakingAddressComponent,
StakingCommissionComponent,
StakingRewardComponent,