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

components/Loaders/Loader.vue

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

components/withdraw/Withdraw.vue

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

services/events.js

@@ -9,6 +9,13 @@ import { sleep, formatEvents, capitalizeFirstLetter } from '@/utils'
 
 const supportedCaches = ['1', '56', '100', '137']
 
+let store
+if (process.browser) {
+  window.onNuxtReady(({ $store }) => {
+    store = $store
+  })
+}
+
 class EventService {
   constructor({ netId, amount, currency, factoryMethods }) {
     this.idb = window.$nuxt.$indexedDB(netId)
@@ -278,6 +285,7 @@ class EventService {
       const part = Math.ceil(blockDifference / numberParts)
 
       let events = []
+      let loadedBlocks = 0
       let toBlock = fromBlock + part
 
       if (fromBlock < currentBlockNumber) {
@@ -285,6 +293,9 @@ class EventService {
           toBlock = 'latest'
           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++) {
           try {
@@ -293,8 +304,18 @@ class EventService {
             if (partOfEvents) {
               events = events.concat(partOfEvents.events)
             }
+            loadedBlocks += toBlock - fromBlock
             fromBlock = toBlock
             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 {
             numberParts = numberParts + 1
           }
@@ -410,4 +431,4 @@ class EventsFactory {
   }
 }
 
-export { EventsFactory }
+export { EventsFactory }

store/loading.js

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