Merge pull request 'Show progress percentage for events fetching' (#9) from Freezy/classic-ui:staging into staging

Reviewed-on: https://development.tornadocash.community/tornadocash/classic-ui/pulls/9
This commit is contained in:
gozzy 2022-10-15 17:59:06 +00:00
commit 1d15649faa
4 changed files with 36 additions and 8 deletions

@ -1,17 +1,17 @@
<template> <template>
<b-loading v-model="enabled"> <b-loading v-model="enabled">
<div class="loading-container"> <div class="loading-container">
<div class="loading-tornado" data-test="tornado_loader"></div> <div class="loading-tornado" data-test="tornado_loader"></div>
<div class="loading-message">{{ message }}...</div> <div class="loading-message">{{ message }}...</div>
<div v-if="progress >= 0" class="loading-message">{{ progress }}%</div>
<approve-loader v-if="isApprove" /> <approve-loader v-if="isApprove" />
</div> </div>
</b-loading> </b-loading>
</template> </template>
<script> <script>
import { mapState, mapGetters } from 'vuex' import { mapState, mapGetters } from 'vuex'
import ApproveLoader from './ApproveLoader' import ApproveLoader from './ApproveLoader'
export default { export default {
components: { components: {
ApproveLoader ApproveLoader
@ -19,10 +19,10 @@ export default {
computed: { computed: {
...mapGetters('metamask', ['isWalletConnect']), ...mapGetters('metamask', ['isWalletConnect']),
...mapState('metamask', ['providerName']), ...mapState('metamask', ['providerName']),
...mapState('loading', ['enabled', 'message', 'type']), ...mapState('loading', ['enabled', 'message', 'progress', 'type']),
isApprove() { isApprove() {
return this.type === 'approve' return this.type === 'approve'
} }
} }
} }
</script> </script>

@ -341,6 +341,7 @@ export default {
if (currency !== this.nativeCurrency) { if (currency !== this.nativeCurrency) {
this.$store.dispatch('application/setDefaultEthToReceive', { currency }) this.$store.dispatch('application/setDefaultEthToReceive', { currency })
} }
this.$store.dispatch('loading/updateProgress', { progress: -1 })
this.depositsPast = Number(depositsPast) <= 0 ? 0 : depositsPast this.depositsPast = Number(depositsPast) <= 0 ? 0 : depositsPast
this.depositTxHash = txHash this.depositTxHash = txHash
this.depositTimestamp = timestamp this.depositTimestamp = timestamp
@ -540,4 +541,4 @@ export default {
} }
} }
} }
</style> </style>

@ -9,6 +9,13 @@ import { sleep, formatEvents, capitalizeFirstLetter } from '@/utils'
const supportedCaches = ['1', '56', '100', '137'] const supportedCaches = ['1', '56', '100', '137']
let store
if (process.browser) {
window.onNuxtReady(({ $store }) => {
store = $store
})
}
class EventService { class EventService {
constructor({ netId, amount, currency, factoryMethods }) { constructor({ netId, amount, currency, factoryMethods }) {
this.idb = window.$nuxt.$indexedDB(netId) this.idb = window.$nuxt.$indexedDB(netId)
@ -278,6 +285,7 @@ class EventService {
const part = Math.ceil(blockDifference / numberParts) const part = Math.ceil(blockDifference / numberParts)
let events = [] let events = []
let loadedBlocks = 0
let toBlock = fromBlock + part let toBlock = fromBlock + part
if (fromBlock < currentBlockNumber) { if (fromBlock < currentBlockNumber) {
@ -285,6 +293,9 @@ class EventService {
toBlock = 'latest' toBlock = 'latest'
numberParts = 1 numberParts = 1
} }
if (store.state.loading.progress !== 98) {
store.dispatch('loading/updateProgress', { message: 'Fetching the past events', progress: 0 })
}
for (let i = 0; i < numberParts; i++) { for (let i = 0; i < numberParts; i++) {
try { try {
@ -293,8 +304,18 @@ class EventService {
if (partOfEvents) { if (partOfEvents) {
events = events.concat(partOfEvents.events) events = events.concat(partOfEvents.events)
} }
loadedBlocks += toBlock - fromBlock
fromBlock = toBlock fromBlock = toBlock
toBlock += part toBlock += part
const progressInt = parseInt((loadedBlocks / blockDifference) * 100)
console.log('Progress: ', progressInt)
if (store.state.loading.progress !== 98) {
store.dispatch('loading/updateProgress', {
message: 'Fetching the past events',
progress: progressInt === 100 ? 98 : progressInt
})
}
} catch { } catch {
numberParts = numberParts + 1 numberParts = numberParts + 1
} }
@ -410,4 +431,4 @@ class EventsFactory {
} }
} }
export { EventsFactory } export { EventsFactory }

@ -1,6 +1,7 @@
export const state = () => { export const state = () => {
return { return {
message: '', message: '',
progress: -1,
enabled: false, enabled: false,
type: null type: null
} }
@ -9,14 +10,16 @@ export const state = () => {
export const getters = {} export const getters = {}
export const mutations = { export const mutations = {
ENABLE(state, { message, type }) { ENABLE(state, { message, progress, type }) {
state.message = message state.message = message
state.enabled = true state.enabled = true
state.progress = progress
state.type = type state.type = type
}, },
DISABLE(state) { DISABLE(state) {
state.message = '' state.message = ''
state.enabled = false state.enabled = false
state.progress = -1
state.type = null state.type = null
} }
} }
@ -28,6 +31,9 @@ export const actions = {
changeText({ commit }, { message, type }) { changeText({ commit }, { message, type }) {
commit('ENABLE', { message, type }) commit('ENABLE', { message, type })
}, },
updateProgress({ commit }, { message, progress }) {
commit('ENABLE', { message, progress })
},
disable({ commit }) { disable({ commit }) {
commit('DISABLE') commit('DISABLE')
}, },
@ -39,4 +45,4 @@ export const actions = {
type: 'approve' type: 'approve'
}) })
} }
} }