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

improve UX

Browse Source
This commit is contained in:
liangping 2021-09-06 15:30:17 +08:00
parent de149a7f26
commit 6373336d6e
10 changed files with 415 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/libs/fetch.js
View File

@ -169,8 +169,11 @@ const chainAPI = class ChainFetch {
})
}
async getGovernanceVotes(pid) {
return this.get(`/gov/proposals/${pid}/votes`).then(data => commonProcess(data).map(d => new Votes().init(d)))
async getGovernanceVotes(pid, offset = 0, limit = 50) {
if (compareVersions(this.config.sdk_version, '0.40') < 0) {
return this.get(`/gov/proposals/${pid}/votes`).then(data => commonProcess(data).map(d => new Votes().init(d)))
}
return this.get(`/cosmos/gov/v1beta1/proposals/${pid}/votes?pagination.offset=${offset}&pagination.limit=${limit}`).then(data => data.votes.map(d => new Votes().init(d)))
}
async getGovernanceList() {

2
src/views/GovernanceProposalView.vue
View File

@ -109,7 +109,7 @@
</b-card-footer>
</b-card>
<operation-vote-component
:proposal-id="proposal.id"
:proposal-id="Number(proposal.id)"
:title="proposal.title"
/>
<b-card no-body>

1
src/views/OperationDelegateComponent.vue
View File

@ -7,6 +7,7 @@
title="Delegate Token"
hide-header-close
scrollable
:ok-disabled="!selectedAddress"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"

1
src/views/OperationRedelegateComponent.vue
View File

@ -7,6 +7,7 @@
title="Redelegate Token"
hide-header-close
scrollable
:ok-disabled="!selectedAddress"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"

1
src/views/OperationTransferComponent.vue
View File

@ -7,6 +7,7 @@
title="Transfer Tokens"
hide-header-close
scrollable
:ok-disabled="!address"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"

1
src/views/OperationUnbondComponent.vue
View File

@ -7,6 +7,7 @@
title="Unbond Token"
hide-header-close
scrollable
:ok-disabled="!selectedAddress"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"

379
src/views/OperationWithdrawCommissionComponent.vue Normal file
View File

@ -0,0 +1,379 @@
<template>
<div>
<b-modal
id="withdraw-commission-window"
centered
size="md"
title="Withdraw Commission"
hide-header-close
scrollable
:ok-disabled="!address"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"
>
<validation-observer ref="simpleRules">
<b-form>
<b-row>
<b-col v-if="account">
<b-form-group
label="Sender"
label-for="Account"
>
<b-input-group class="mb-25">
<b-input-group-prepend is-text>
<b-avatar
:src="account.logo"
size="18"
variant="light-primary"
rounded
/>
</b-input-group-prepend>
<b-form-input
:value="account.addr"
readonly
/>
</b-input-group>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col>
<b-form-group
label="Fee"
label-for="Fee"
>
<validation-provider
v-slot="{ errors }"
rules="required"
name="fee"
>
<b-input-group>
<b-form-input v-model="fee" />
<b-form-select
v-model="feeDenom"
>
<b-form-select-option
v-for="item in feeDenoms"
:key="item.denom"
:value="item.denom"
>
{{ item.denom }}
</b-form-select-option>
</b-form-select>
</b-input-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col>
<b-form-group
label="Memo"
label-for="Memo"
>
<validation-provider
v-slot="{ errors }"
name="memo"
>
<b-form-input
id="Memo"
v-model="memo"
max="2"
/>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col>
<b-form-group
label="Wallet"
label-for="wallet"
>
<validation-provider
v-slot="{ errors }"
rules="required"
name="wallet"
>
<b-form-radio-group
v-model="wallet"
stacked
class="demo-inline-spacing"
>
<b-form-radio
v-model="wallet"
name="wallet"
value="keplr"
class="mb-1 mt-1"
>
Keplr
</b-form-radio>
<!-- <b-form-radio
v-model="wallet"
name="wallet"
value="ledgerUSB"
class="mb-1 mt-1"
disabled
>
Ledger (USB)
</b-form-radio>
<b-form-radio
v-model="wallet"
name="wallet"
value="ledgerBle"
class="mb-1 mt-1"
disabled
>
Ledger (Bluetooth)
</b-form-radio> -->
</b-form-radio-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>
</b-col>
</b-row>
</b-form>
</validation-observer>
<small class="text-danger">{{ error }}</small>
</b-modal>
</div>
</template>
<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import {
BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
} from 'bootstrap-vue'
import {
required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
} from '@validations'
import {
formatToken, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
} from '@/libs/data'
import chainAPI from '@/libs/fetch'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
export default {
name: 'WithdrawCommissionDialogue',
components: {
BModal,
BRow,
BCol,
BForm,
BInputGroup,
BInputGroupPrepend,
BFormInput,
BAvatar,
BFormGroup,
BFormSelect,
BFormSelectOption,
BFormRadioGroup,
BFormRadio,
ValidationProvider,
ValidationObserver,
// eslint-disable-next-line vue/no-unused-components
ToastificationContent,
},
props: {
address: {
type: String,
default: '',
},
validatorAddress: {
type: String,
default: '',
},
},
data() {
return {
chainId: '',
account: [],
selectedChain: '',
balance: [],
delegations: [],
memo: '',
fee: 800,
feeDenom: '',
wallet: 'keplr',
error: null,
sequence: 1,
accountNumber: 0,
required,
password,
email,
min,
integer,
url,
alpha,
between,
digits,
length,
alphaDash,
}
},
computed: {
feeDenoms() {
return this.balance.filter(item => !item.denom.startsWith('ibc'))
},
},
created() {
// console.log('address: ', this.address)
},
methods: {
computeAccount() {
const accounts = getLocalAccounts()
const chains = getLocalChains()
const values = Object.values(accounts)
for (let i = 0; i < values.length; i += 1) {
const addr = values[i].address.find(x => x.addr === this.address)
if (addr) {
this.selectedChain = chains[addr.chain]
return addr
}
}
this.error = 'You are not the owner of this validator'
return null
},
loadBalance() {
this.account = this.computeAccount()
if (this.account && this.account.length > 0) this.address = this.account[0].addr
if (this.address) {
chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
if (res && res.length > 0) {
this.balance = res
const token = this.balance.find(i => !i.denom.startsWith('ibc'))
if (token) this.feeDenom = token.denom
}
})
this.$http.getLatestBlock(this.selectedChain).then(ret => {
this.chainId = ret.block.header.chain_id
const notSynced = timeIn(ret.block.header.time, 10, 'm')
if (notSynced) {
this.error = 'Client is not synced or blockchain is halted'
}
})
this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
if (ret.value.base_vesting_account) {
this.accountNumber = ret.value.base_vesting_account.base_account.account_number
this.sequence = ret.value.base_vesting_account.base_account.sequence
if (!this.sequence) this.sequence = 0
} else {
this.accountNumber = ret.value.account_number
this.sequence = ret.value.sequence ? ret.value.sequence : 0
}
})
}
this.$http.getStakingDelegations(this.address).then(res => {
this.delegations = res.delegation_responses
})
},
handleOk(bvModalEvt) {
// console.log('send')
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
// this.handleSubmit()
this.sendTx().then(ret => {
// console.log(ret)
this.error = ret
})
},
resetModal() {
this.feeDenom = ''
this.error = null
},
format(v) {
return formatToken(v)
},
async sendTx() {
const txMsgs = [
{
typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
value: {
delegatorAddress: this.address,
validatorAddress: this.validatorAddress,
},
}, {
typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission',
value: {
validatorAddress: this.validatorAddress,
},
},
]
// this.delegations.forEach(i => {
// if ()
// txMsgs.push({
// typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
// value: {
// delegatorAddress: this.address,
// validatorAddress: i.delegation.validator_address,
// },
// })
// })
if (txMsgs.length === 0) {
this.error = 'No delegation found'
return ''
}
if (!this.accountNumber) {
this.error = 'Account number should not be empty!'
return ''
}
const txFee = {
amount: [
{
amount: this.fee,
denom: this.feeDenom,
},
],
gas: '200000',
}
const signerData = {
accountNumber: this.accountNumber,
sequence: this.sequence,
chainId: this.chainId,
}
sign(
this.wallet,
this.chainId,
this.address,
txMsgs,
txFee,
this.memo,
signerData,
).then(bodyBytes => {
this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
setLocalTxHistory({ op: 'withdraw', hash: res.tx_response.txhash, time: new Date() })
this.$bvModal.hide('withdraw-commission-window')
this.$toast({
component: ToastificationContent,
props: {
title: 'Transaction sent!',
icon: 'EditIcon',
variant: 'success',
},
})
}).catch(e => {
this.error = e
})
}).catch(e => {
this.error = e
})
// Send tokens
// return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
return ''
},
},
}
</script>

2
src/views/OperationWithdrawComponent.vue
View File

@ -7,6 +7,8 @@
title="Withdraw Rewards"
hide-header-close
scrollable
:ok-disabled="!address"
@hidden="resetModal"
@ok="handleOk"
@show="loadBalance"

62
src/views/StakingRewardComponent.vue
View File

@ -6,13 +6,17 @@
<b-card-header>
<b-card-title>Outstanding Rewards</b-card-title>
<feather-icon
v-b-modal.withdraw-commission-window
icon="MoreVerticalIcon"
size="18"
class="cursor-pointer"
/>
</b-card-header>
<b-card-body>
<b-card-body
class="overflow-auto"
style="max-height:220px;"
>
<div
v-for="d in data.self_bond_rewards"
:key="d.amount"
@ -71,6 +75,10 @@
</small>
</div>
</b-card-body>
<operation-withdraw-commission-component
:validator-address="validator"
:address="address"
/>
</b-card>
</template>
@ -78,6 +86,7 @@
import {
BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar,
} from 'bootstrap-vue'
import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
export default {
components: {
@ -89,57 +98,24 @@ export default {
BMedia,
BMediaAside,
BAvatar,
OperationWithdrawCommissionComponent,
},
props: {
data: {
type: Object,
required: true,
},
validator: {
type: String,
required: true,
},
address: {
type: String,
required: true,
},
},
data() {
return {
transactionData: [
{
mode: 'Wallet',
types: 'Starbucks',
avatar: 'PocketIcon',
avatarVariant: 'light-primary',
payment: '-$74',
deduction: true,
},
{
mode: 'Bank Transfer',
types: 'Add Money',
avatar: 'CheckIcon',
avatarVariant: 'light-success',
payment: '+$480',
deduction: false,
},
{
mode: 'Paypal',
types: 'Add Money',
avatar: 'DollarSignIcon',
avatarVariant: 'light-danger',
payment: '+$480',
deduction: false,
},
{
mode: 'Mastercard',
types: 'Ordered Food',
avatar: 'CreditCardIcon',
avatarVariant: 'light-warning',
payment: '-$23',
deduction: true,
},
{
mode: 'Transfer',
types: 'Refund',
avatar: 'TrendingUpIcon',
avatarVariant: 'light-info',
payment: '+$98',
deduction: false,
},
],
}
},
methods: {

6
src/views/StakingValidator.vue
View File

@ -227,7 +227,11 @@
lg="4"
md="12"
>
<staking-reward-component :data="distribution" />
<staking-reward-component
:data="distribution"
:validator="validator.operator_address"
:address="accountAddress"
/>
</b-col>
<b-col
lg="4"