From 08ecad1c2786bb29dcf3f9af71b10fb68938f626 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Sat, 11 Sep 2021 17:13:26 +0800 Subject: [PATCH] improve UI/UX --- src/libs/fetch.js | 8 +++--- src/views/GovernanceProposalView.vue | 24 +++++++++++++++--- src/views/StakingAddressComponent.vue | 36 ++++++++++++++++++++++++--- src/views/StakingValidator.vue | 4 +-- src/views/UserAccountDetail.vue | 10 ++++++-- src/views/UserAccounts.vue | 34 ++++++++++++++++++++++--- 6 files changed, 98 insertions(+), 18 deletions(-) diff --git a/src/libs/fetch.js b/src/libs/fetch.js index 61321c24..e74192a7 100644 --- a/src/libs/fetch.js +++ b/src/libs/fetch.js @@ -221,12 +221,12 @@ const chainAPI = class ChainFetch { return this.get(`/cosmos/distribution/v1beta1/delegators/${address}/validators`).then(data => commonProcess(data)) } - async getStakingDelegations(address) { - return this.get(`/cosmos/staking/v1beta1/delegations/${address}`).then(data => commonProcess(data)) + async getStakingDelegations(address, config = null) { + return this.get(`/cosmos/staking/v1beta1/delegations/${address}`, config).then(data => commonProcess(data)) } - async getStakingRedelegations(address) { - return this.get(`/cosmos/staking/v1beta1/delegators/${address}/redelegations`).then(data => commonProcess(data)) + async getStakingRedelegations(address, config = null) { + return this.get(`/cosmos/staking/v1beta1/delegators/${address}/redelegations`, config).then(data => commonProcess(data)) } async getStakingUnbonding(address) { diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue index 7ba5ef1b..47ab45bf 100644 --- a/src/views/GovernanceProposalView.vue +++ b/src/views/GovernanceProposalView.vue @@ -58,7 +58,9 @@ {{ $t('proposal_proposer') }} - {{ formatAddress(proposer.proposer) }} + + {{ formatAddress(proposer.proposer) }} + @@ -176,7 +178,13 @@ :fields="votes_fields" :items="votes.votes" striped - /> + > + + + > + + @@ -272,12 +286,16 @@ export default { formatter: value => { switch (value) { case 1: + case 'VOTE_OPTION_YES': return 'Yes' case 2: + case 'VOTE_OPTION_ABSTAIN': return 'Abstain' case 3: + case 'VOTE_OPTION_NO': return 'No' case 4: + // case 'VOTE_OPTION_NO_WITH': return 'No With Veto' default: return value diff --git a/src/views/StakingAddressComponent.vue b/src/views/StakingAddressComponent.vue index ca627e66..54d9e4b1 100644 --- a/src/views/StakingAddressComponent.vue +++ b/src/views/StakingAddressComponent.vue @@ -24,7 +24,9 @@
Account Address
- {{ accountAddress }} + + {{ accountAddress }} + Validator Address - {{ operatorAddress }} + {{ operatorAddress }} Consensus Public Address - {{ consensusPubkey }} + {{ consensusPubkey }} Hex Address - {{ hexAddress }} + {{ hexAddress }} @@ -104,6 +106,8 @@ import { BCard, BAvatar, BMedia, BMediaAside, BMediaBody, VBTooltip, } from 'bootstrap-vue' +import ToastificationContent from '@core/components/toastification/ToastificationContent.vue' + export default { components: { BCard, @@ -111,6 +115,8 @@ export default { BMedia, BMediaAside, BMediaBody, + // eslint-disable-next-line vue/no-unused-components + ToastificationContent, }, directives: { 'b-tooltip': VBTooltip, @@ -133,6 +139,28 @@ export default { default: '-', }, }, + methods: { + copy(v) { + this.$copyText(v).then(() => { + this.$toast({ + component: ToastificationContent, + props: { + title: 'Address copied', + icon: 'BellIcon', + }, + }) + }, e => { + this.$toast({ + component: ToastificationContent, + props: { + title: `Failed to copy address! ${e}`, + icon: 'BellIcon', + variant: 'danger', + }, + }) + }) + }, + }, } diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue index d1c53f28..78bba01a 100644 --- a/src/views/StakingValidator.vue +++ b/src/views/StakingValidator.vue @@ -60,7 +60,7 @@ rounded > @@ -78,7 +78,7 @@ rounded > diff --git a/src/views/UserAccountDetail.vue b/src/views/UserAccountDetail.vue index 691c810b..4d4e1d3e 100644 --- a/src/views/UserAccountDetail.vue +++ b/src/views/UserAccountDetail.vue @@ -112,7 +112,10 @@ size="sm" class="mr-25" > - Delegate + Delegate - Withdraw + Withdraw diff --git a/src/views/UserAccounts.vue b/src/views/UserAccounts.vue index 0cf3996b..14f0de1d 100644 --- a/src/views/UserAccounts.vue +++ b/src/views/UserAccounts.vue @@ -76,8 +76,11 @@ />

${{ formatBalance(balances[acc.addr]) }}

- - {{ acc.addr }} + + {{ formatAddr(acc.addr) }} @@ -148,9 +151,9 @@ import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue' import { formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains, } from '@/libs/data' +import ToastificationContent from '@core/components/toastification/ToastificationContent.vue' import UserAccountImportAddress from './UserAccountImportAddress.vue' import OperationTransferComponent from './OperationTransferComponent.vue' -// import { SigningCosmosClient } from '@cosmjs/launchpad' export default { components: { @@ -168,6 +171,8 @@ export default { UserAccountImportAddress, FeatherIcon, OperationTransferComponent, + // eslint-disable-next-line vue/no-unused-components + ToastificationContent, }, directives: { 'b-modal': VBModal, @@ -235,6 +240,9 @@ export default { formatAmount(v) { return formatTokenAmount(v) }, + formatAddr(v) { + return v.substring(0, 10).concat('...', v.substring(v.length - 10)) + }, formatCurrency(amount, denom) { const qty = this.formatAmount(amount) const d2 = this.formatDenom(denom) @@ -265,6 +273,26 @@ export default { }) localStorage.setItem('accounts', JSON.stringify(this.accounts)) }, + copy(v) { + this.$copyText(v).then(() => { + this.$toast({ + component: ToastificationContent, + props: { + title: 'Address copied', + icon: 'BellIcon', + }, + }) + }, e => { + this.$toast({ + component: ToastificationContent, + props: { + title: `Failed to copy address! ${e}`, + icon: 'BellIcon', + variant: 'danger', + }, + }) + }) + }, }, }