Merge branch 're-implement-operation-modal' of https://github.com/ping-pub/explorer into re-implement-operation-modal

This commit is contained in:
donne 2022-03-28 14:31:44 +08:00
commit 34fccd91ba
2 changed files with 70 additions and 101 deletions

View File

@ -1,28 +1,5 @@
<template> <template>
<div> <div>
<b-row>
<b-col>
<validation-provider
#default="{ errors }"
rules="required"
name="Validator"
>
<b-form-group
label="Validator"
label-for="validator"
>
<v-select
v-model="selectedValidator"
:options="valOptions"
:reduce="val => val.value"
placeholder="Select a validator"
:readonly="validatorAddress"
/>
</b-form-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-col>
</b-row>
<b-row> <b-row>
<b-col> <b-col>
<b-form-group <b-form-group
@ -51,6 +28,30 @@
</b-form-group> </b-form-group>
</b-col> </b-col>
</b-row> </b-row>
<b-row>
<b-col>
<validation-provider
#default="{ errors }"
rules="required"
name="Validator"
>
<b-form-group
label="Validator"
label-for="validator"
>
<v-select
v-model="selectedValidator"
:options="valOptions"
:reduce="val => val.value"
placeholder="Select a validator"
:readonly="validatorAddress"
:selectable="(v) => v.value"
/>
</b-form-group>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-col>
</b-row>
<b-row> <b-row>
<b-col> <b-col>
<b-form-group <b-form-group
@ -67,7 +68,7 @@
text-field="label" text-field="label"
> >
<b-form-select-option <b-form-select-option
v-for="x in balance" v-for="x in balanceOptions"
:key="x.denom" :key="x.denom"
:value="x.denom" :value="x.denom"
> >
@ -120,7 +121,7 @@ import {
required, email, url, between, alpha, integer, password, min, digits, alphaDash, length, required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
} from '@validations' } from '@validations'
import { import {
abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, extractAccountNumberAndSequence, formatToken, formatTokenDenom, getUnitAmount,
} from '@/libs/utils' } from '@/libs/utils'
import vSelect from 'vue-select' import vSelect from 'vue-select'
@ -147,6 +148,10 @@ export default {
type: String, type: String,
default: null, default: null,
}, },
balance: {
type: Array,
default: () => [],
},
}, },
data() { data() {
return { return {
@ -157,19 +162,8 @@ export default {
selectedValidator: null, selectedValidator: null,
token: '', token: '',
amount: null, amount: null,
chainId: '',
selectedChain: '', selectedChain: '',
balance: [],
delegations: [],
IBCDenom: {}, IBCDenom: {},
memo: '',
feeDenom: '',
wallet: 'ledgerUSB',
error: null,
sequence: 1,
accountNumber: 0,
advance: false,
gas: '200000',
required, required,
password, password,
@ -187,13 +181,21 @@ export default {
}, },
computed: { computed: {
valOptions() { valOptions() {
let options = []
const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` })) const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
if (vals.length > 0) {
options.push({ value: null, label: '=== ACTIVE VALIDATORS ===' })
options = options.concat(vals)
}
const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` })) const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
return vals.concat(unbunded) if (unbunded.length > 0) {
options.push({ value: null, label: '=== INACTIVE VALIDATORS ===', disabled: true })
options = options.concat(unbunded)
}
return options
}, },
feeDenoms() { balanceOptions() {
if (!this.balance) return [] return this.setupBalance()
return this.balance.filter(item => !item.denom.startsWith('ibc'))
}, },
msg() { msg() {
return [{ return [{
@ -214,68 +216,29 @@ export default {
modalTitle: 'Delegate Token', modalTitle: 'Delegate Token',
historyName: 'delegate', historyName: 'delegate',
}) })
this.loadBalance() this.loadData()
}, },
methods: { methods: {
loadBalance() { loadData() {
this.account = this.computeAccount()
this.$http.getValidatorList().then(v => { this.$http.getValidatorList().then(v => {
this.validators = v this.validators = v
}) })
this.$http.getValidatorUnbondedList().then(v => { this.$http.getValidatorUnbondedList().then(v => {
this.unbundValidators = v this.unbundValidators = v
}) })
this.onChange()
}, },
setupBalance() {
onChange() { if (this.balance && this.balance.length > 0) {
if (this.selectedAddress) { this.token = this.balance[0].denom
this.$http.getBankBalances(this.selectedAddress).then(res => { return this.balance
if (res && res.length > 0) {
this.balance = res.reverse()
const token = this.balance.find(i => !i.denom.startsWith('ibc'))
this.token = token.denom
if (token) this.feeDenom = token.denom
this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
if (!this.IBCDenom[x.denom]) {
this.$http.getIBCDenomTrace(x.denom).then(denom => {
this.IBCDenom[x.denom] = denom.denom_trace.base_denom
})
}
})
}
})
this.$http.getAuthAccount(this.selectedAddress).then(ret => {
const account = extractAccountNumberAndSequence(ret)
this.$emit('update', {
accountNumber: account.accountNumber,
sequence: account.sequence,
})
})
} }
}, return []
computeAccount() {
const accounts = getLocalAccounts()
const values = accounts ? Object.values(accounts) : []
let array = []
for (let i = 0; i < values.length; i += 1) {
const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
if (addrs && addrs.length > 0) {
array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
if (!this.selectedAddress) {
this.selectedAddress = addrs[0].addr
}
}
}
this.selectedValidator = this.validatorAddress
return array
}, },
printDenom() { printDenom() {
return formatTokenDenom(this.IBCDenom[this.token] || this.token) return formatTokenDenom(this.token)
}, },
format(v) { format(v) {
return formatToken(v, this.IBCDenom) return formatToken(v, this.IBCDenom, 6)
}, },
}, },
} }

View File

@ -7,13 +7,13 @@
ok-title="Send" ok-title="Send"
hide-header-close hide-header-close
scrollable scrollable
:ok-disabled="!selectedAddress" :ok-disabled="isOwner"
@hidden="resetModal" @hidden="resetModal"
@ok="handleOk" @ok="handleOk"
@show="loadBalance" @show="initialize"
> >
<b-overlay <b-overlay
:show="!selectedAddress" :show="isOwner"
rounded="sm" rounded="sm"
> >
<template #overlay> <template #overlay>
@ -24,7 +24,7 @@
animation="cylon" animation="cylon"
/> />
<p id="cancel-label"> <p id="cancel-label">
No available account found. {{ blockingMsg }}
</p> </p>
<b-button <b-button
v-ripple.400="'rgba(255, 255, 255, 0.15)'" v-ripple.400="'rgba(255, 255, 255, 0.15)'"
@ -42,6 +42,7 @@
ref="component" ref="component"
:address="address" :address="address"
:validator-address="validatorAddress" :validator-address="validatorAddress"
:balance="balance"
@update="componentUpdate" @update="componentUpdate"
/> />
<b-row> <b-row>
@ -144,7 +145,7 @@ import {
required, email, url, between, alpha, integer, password, min, digits, alphaDash, length, required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
} from '@validations' } from '@validations'
import { import {
extractAccountNumberAndSequence, setLocalTxHistory, sign, timeIn, extractAccountNumberAndSequence, getLocalAccounts, setLocalTxHistory, sign, timeIn,
} from '@/libs/utils' } from '@/libs/utils'
import vSelect from 'vue-select' import vSelect from 'vue-select'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue' import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
@ -221,6 +222,7 @@ export default {
wallet: 'ledgerUSB', wallet: 'ledgerUSB',
gas: '200000', gas: '200000',
memo: '', memo: '',
blockingMsg: 'No available account found.',
required, required,
password, password,
@ -240,9 +242,19 @@ export default {
if (!this.balance) return [] if (!this.balance) return []
return this.balance.filter(item => !item.denom.startsWith('ibc')) return this.balance.filter(item => !item.denom.startsWith('ibc'))
}, },
isOwner() {
const accounts = getLocalAccounts()
const selectedWallet = this.$store.state.chains.defaultWallet
if (accounts && accounts[selectedWallet]) {
if (accounts[selectedWallet].address.findIndex(x => x.addr === this.address) > -1) {
return false
}
}
return true
},
}, },
methods: { methods: {
loadBalance() { initialize() {
this.$http.getLatestBlock().then(ret => { this.$http.getLatestBlock().then(ret => {
this.chainId = ret.block.header.chain_id this.chainId = ret.block.header.chain_id
const notSynced = timeIn(ret.block.header.time, 10, 'm') const notSynced = timeIn(ret.block.header.time, 10, 'm')
@ -263,17 +275,11 @@ export default {
const token = this.balance.find(i => !i.denom.startsWith('ibc')) const token = this.balance.find(i => !i.denom.startsWith('ibc'))
this.token = token.denom this.token = token.denom
if (token) this.feeDenom = token.denom if (token) this.feeDenom = token.denom
this.balance.filter(i => i.denom.startsWith('ibc')).forEach(x => {
if (!this.IBCDenom[x.denom]) {
this.$http.getIBCDenomTrace(x.denom).then(denom => {
this.IBCDenom[x.denom] = denom.denom_trace.base_denom
})
}
})
} }
}) })
this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000' this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || '' this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
// this.$refs.component.loadData()
}, },
componentUpdate(obj) { componentUpdate(obj) {
console.log(obj) console.log(obj)