From 3a53717dceb86510186348d39a37ee28bf951fb0 Mon Sep 17 00:00:00 2001 From: liangping <18786721@qq.com> Date: Sat, 9 Apr 2022 21:56:40 +0800 Subject: [PATCH] improve staking, withdraw --- src/chains/mainnet/osmosis.json | 2 +- src/views/Staking.vue | 103 ++++++++++++------ src/views/StakingValidator.vue | 45 +++++--- src/views/WalletAccountDetail.vue | 50 +++++---- .../OperationModal/TransactionResult.vue | 14 ++- .../OperationModal/components/IBCTransfer.vue | 3 +- 6 files changed, 142 insertions(+), 75 deletions(-) diff --git a/src/chains/mainnet/osmosis.json b/src/chains/mainnet/osmosis.json index fde43e22..ec404e23 100644 --- a/src/chains/mainnet/osmosis.json +++ b/src/chains/mainnet/osmosis.json @@ -1,7 +1,7 @@ { "chain_name": "osmosis", "coingecko": "osmosis", - "api": ["https://lcd-osmosis.blockapsis.com", "https://osmo.api.ping.pub"], + "api": ["https://osmo.api.ping.pub", "https://lcd-osmosis.blockapsis.com"], "rpc": ["https://osmosis.validator.network:443", "https://rpc-osmosis.blockapsis.com:443"], "snapshot_provider": "", "sdk_version": "0.44.5", diff --git a/src/views/Staking.vue b/src/views/Staking.vue index b36ca436..65cede31 100644 --- a/src/views/Staking.vue +++ b/src/views/Staking.vue @@ -214,6 +214,7 @@ type="Delegate" :validator-address="validator_address" /> +
@@ -257,6 +258,8 @@ export default { validators: [], delegations: [], changes: {}, + latestPower: {}, + previousPower: {}, validator_fields: [ { key: 'index', @@ -291,11 +294,12 @@ export default { }, ], statusOptions: [ - { text: 'Active', value: ['BOND_STATUS_BONDED'] }, - { text: 'Inactive', value: ['BOND_STATUS_UNBONDED', 'BOND_STATUS_UNBONDING'] }, + { text: 'Active', value: 'active' }, + { text: 'Inactive', value: 'inactive' }, ], - selectedStatus: ['BOND_STATUS_BONDED'], - isChangesLoaded: false, + selectedStatus: 'active', + isInactiveLoaded: false, + inactiveValidators: [], } }, computed: { @@ -303,11 +307,13 @@ export default { return this.list.filter(x => x.description.identity === '6783E9F948541962') }, list() { - return this.validators.map(x => { + const tab = this.selectedStatus === 'active' ? this.validators : this.inactiveValidators + return tab.map(x => { const xh = x - const change = this.changes[x.consensus_pubkey.key] - if (change) { - xh.changes = this.isChangesLoaded ? change.latest - change.previous : 0 + if (Object.keys(this.latestPower).length > 0 && Object.keys(this.previousPower).length > 0) { + const latest = this.latestPower[x.consensus_pubkey.value] || 0 + const previous = this.previousPower[x.consensus_pubkey.value] || 0 + xh.changes = latest - previous } return xh }) @@ -318,50 +324,81 @@ export default { this.stakingPool = pool.bondedToken }) // set - this.getValidatorListByHeight() this.$http.getStakingParameters().then(res => { this.stakingParameters = res }) - this.getValidatorListByStatus(this.selectedStatus) + this.initial() }, beforeDestroy() { this.islive = false }, + mounted() { + const elem = document.getElementById('txevent') + elem.addEventListener('txcompleted', () => { + this.initial() + }) + }, methods: { - getValidatorListByHeight(offset = 0) { - this.$http.getValidatorListByHeight('latest', offset).then(data => { + initial() { + this.$http.getValidatorList().then(res => { + const identities = [] + const temp = res + for (let i = 0; i < temp.length; i += 1) { + const { identity } = temp[i].description + const url = this.$store.getters['chains/getAvatarById'](identity) + if (url) { + temp[i].avatar = url + } else if (identity && identity !== '') { + identities.push(identity) + } + } + + // fetch avatar from keybase + let promise = Promise.resolve() + identities.forEach(item => { + promise = promise.then(() => new Promise(resolve => { + this.avatar(item, resolve) + })) + }) + this.validators = temp + this.getPreviousPower(this.validators.length) + }) + }, + getPreviousPower(length) { + this.$http.getValidatorListByHeight('latest', 0).then(data => { let height = Number(data.block_height) if (height > 14400) { height -= 14400 } else { height = 1 } - const { changes } = this data.validators.forEach(x => { - changes[x.pub_key.key] = { latest: Number(x.voting_power), previous: 0 } + this.$set(this.latestPower, x.pub_key.key, Number(x.voting_power)) }) - this.$http.getValidatorListByHeight(height, offset).then(previous => { - previous.validators.forEach(x => { - if (changes[x.pub_key.key]) { - changes[x.pub_key.key].previous = Number(x.voting_power) - } else { - changes[x.pub_key.key] = { latest: 0, previous: Number(x.voting_power) } - } + for (let offset = 100; offset < length; offset += 100) { + this.$http.getValidatorListByHeight('latest', offset).then(latest => { + latest.validators.forEach(x => { + this.$set(this.latestPower, x.pub_key.key, Number(x.voting_power)) + }) }) - this.isChangesLoaded = true - this.$set(this, 'changes', changes) - }) + } + for (let offset = 0; offset < length; offset += 100) { + this.$http.getValidatorListByHeight(height, offset).then(previous => { + previous.validators.forEach(x => { + this.$set(this.previousPower, x.pub_key.key, Number(x.voting_power)) + }) + }) + } }) }, - getValidatorListByStatus(statusList) { - this.validators = [] + getValidatorListByStatus() { + if (this.isInactiveLoaded) return + const statusList = ['BOND_STATUS_UNBONDED', 'BOND_STATUS_UNBONDING'] statusList.forEach(status => { this.$http.getValidatorListByStatus(status).then(res => { const identities = [] const temp = res - let total = 0 for (let i = 0; i < temp.length; i += 1) { - total += temp[i].tokens const { identity } = temp[i].description const url = this.$store.getters['chains/getAvatarById'](identity) if (url) { @@ -370,10 +407,6 @@ export default { identities.push(identity) } } - if (total > 100) { - this.getValidatorListByHeight(100) - } - this.validators.push(...temp) // fetch avatar from keybase let promise = Promise.resolve() @@ -382,8 +415,10 @@ export default { this.avatar(item, resolve) })) }) + this.inactiveValidators = this.inactiveValidators.concat(res) }) }) + this.isInactiveLoaded = true }, selectValidator(da) { this.validator_address = da @@ -393,6 +428,7 @@ export default { return formatToken({ amount, denom }, {}, 0) }, rankBadge(data) { + if (this.selectedStatus === 'inactive') return 'primary' const { index, item } = data if (index === 0) { window.sum = item.tokens @@ -415,7 +451,8 @@ export default { if (Array.isArray(d.them) && d.them.length > 0) { const pic = d.them[0].pictures if (pic) { - const validator = this.validators.find(u => u.description.identity === identity) + const list = this.selectedStatus === 'active' ? this.validators : this.inactiveValidators + const validator = list.find(u => u.description.identity === identity) this.$set(validator, 'avatar', pic.primary.url) this.$store.commit('cacheAvatar', { identity, url: pic.primary.url }) } diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue index fe08d8c6..b32ffc01 100644 --- a/src/views/StakingValidator.vue +++ b/src/views/StakingValidator.vue @@ -272,6 +272,7 @@ type="Delegate" :validator-address="validator.operator_address" /> +
@@ -326,6 +327,7 @@ export default { mintInflation: 0, stakingParameter: new StakingParameters(), validator: new Validator(), + address: null, userData: {}, blocks: Array.from('0'.repeat(100)).map(x => [Boolean(x), Number(x)]), distribution: {}, @@ -349,26 +351,35 @@ export default { this.$http.getStakingPool().then(res => { this.stakingPool = res }) this.$http.getStakingParameters().then(res => { this.stakingParameter = res }) this.$http.getMintingInflation().then(res => { this.mintInflation = res }) - const { address } = this.$route.params - this.$http.getValidatorDistribution(address).then(res => { this.distribution = res }) - this.$http.getStakingValidator(address).then(data => { - this.validator = data - - this.processAddress(data.operator_address, data.consensus_pubkey) - this.$http.getTxsBySender(this.accountAddress).then(res => { - this.transactions = res - }) - - const { identity } = data.description - keybase(identity).then(d => { - if (Array.isArray(d.them) && d.them.length > 0) { - this.$set(this.validator, 'avatar', d.them[0].pictures.primary.url) - this.$store.commit('cacheAvatar', { identity, url: d.them[0].pictures.primary.url }) - } - }) + this.address = this.$route.params.address + this.$http.getValidatorDistribution(this.address).then(res => { this.distribution = res }) + this.initial() + }, + mounted() { + const elem = document.getElementById('txevent') + elem.addEventListener('txcompleted', () => { + this.initial() }) }, methods: { + initial() { + this.$http.getStakingValidator(this.address).then(data => { + this.validator = data + + this.processAddress(data.operator_address, data.consensus_pubkey) + this.$http.getTxsBySender(this.accountAddress).then(res => { + this.transactions = res + }) + + const { identity } = data.description + keybase(identity).then(d => { + if (Array.isArray(d.them) && d.them.length > 0) { + this.$set(this.validator, 'avatar', d.them[0].pictures.primary.url) + this.$store.commit('cacheAvatar', { identity, url: d.them[0].pictures.primary.url }) + } + }) + }) + }, pageload(v) { this.$http.getTxsBySender(this.accountAddress, v).then(res => { this.transactions = res diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue index 1fa264db..8847664e 100644 --- a/src/views/WalletAccountDetail.vue +++ b/src/views/WalletAccountDetail.vue @@ -383,6 +383,7 @@ :address="address" :validator-address="selectedValidator" /> +
@@ -605,26 +606,7 @@ export default { this.$http.getAuthAccount(this.address).then(acc => { this.account = acc }) - this.$http.getBankAccountBalance(this.address).then(bal => { - this.assets = bal - bal.forEach(x => { - const symbol = formatTokenDenom(x.denom) - if (!this.quotes[symbol] && symbol.indexOf('/') === -1) { - chainAPI.fetchTokenQuote(symbol).then(quote => { - this.$set(this.quotes, symbol, quote) - }) - } - }) - }) - this.$http.getStakingReward(this.address).then(res => { - this.reward = res - }) - this.$http.getStakingDelegations(this.address).then(res => { - this.delegations = res.delegation_responses || res - }) - this.$http.getStakingUnbonding(this.address).then(res => { - this.unbonding = res.unbonding_responses || res - }) + this.initial() this.$http.getTxsBySender(this.address).then(res => { this.transactions = res }) @@ -632,7 +614,35 @@ export default { this.stakingParameters = res }) }, + mounted() { + const elem = document.getElementById('txevent') + elem.addEventListener('txcompleted', () => { + this.initial() + }) + }, methods: { + initial() { + this.$http.getBankAccountBalance(this.address).then(bal => { + this.assets = bal + bal.forEach(x => { + const symbol = formatTokenDenom(x.denom) + if (!this.quotes[symbol] && symbol.indexOf('/') === -1) { + chainAPI.fetchTokenQuote(symbol).then(quote => { + this.$set(this.quotes, symbol, quote) + }) + } + }) + }) + this.$http.getStakingReward(this.address).then(res => { + this.reward = res + }) + this.$http.getStakingDelegations(this.address).then(res => { + this.delegations = res.delegation_responses || res + }) + this.$http.getStakingUnbonding(this.address).then(res => { + this.unbonding = res.unbonding_responses || res + }) + }, formatNumber(v) { return numberWithCommas(v) }, diff --git a/src/views/components/OperationModal/TransactionResult.vue b/src/views/components/OperationModal/TransactionResult.vue index 6b8b88b9..34f19aa7 100644 --- a/src/views/components/OperationModal/TransactionResult.vue +++ b/src/views/components/OperationModal/TransactionResult.vue @@ -79,9 +79,9 @@
- View details + View Transaction
@@ -126,6 +126,10 @@ export default { } return [50, 0, 50] }, + txUrl() { + const chain = this.selectedChain ? this.selectedChain.chain_name : this.$store.state.chains.selected.chain_name + return `/${chain}/tx/${this.hash}` + }, }, mounted() { this.timer = setInterval(this.trace, 6000) @@ -141,7 +145,11 @@ export default { if (res.code === 0) { this.succeed = true clearInterval(this.timer) - window.location.reload() + const elem = document.getElementById('txevent') + if (elem) { + const event = new Event('txcompleted', res) + elem.dispatchEvent(event) + } } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded). this.error = res.raw_log clearInterval(this.timer) diff --git a/src/views/components/OperationModal/components/IBCTransfer.vue b/src/views/components/OperationModal/components/IBCTransfer.vue index ccb29795..aff6abe0 100644 --- a/src/views/components/OperationModal/components/IBCTransfer.vue +++ b/src/views/components/OperationModal/components/IBCTransfer.vue @@ -135,7 +135,7 @@ import { ValidationProvider } from 'vee-validate' import { BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BFormGroup, BFormSelect, BFormSelectOption, - + BFormText, } from 'bootstrap-vue' import { required, email, url, between, alpha, integer, password, min, digits, alphaDash, length, @@ -157,6 +157,7 @@ export default { BFormInput, BFormGroup, BFormSelect, + BFormText, BFormSelectOption, vSelect,