components/Loaders/Loader.vue

@@ -3,6 +3,7 @@
     <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>
@@ -19,7 +20,7 @@ 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'
     }

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: 100 })
             this.depositsPast = Number(depositsPast) <= 0 ? 0 : depositsPast
             this.depositTxHash = txHash
             this.depositTimestamp = timestamp

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
           }

store/loading.js

@@ -1,42 +1,48 @@
 export const state = () => {
-  return {
-    message: '',
-    enabled: false,
-    type: null
+    return {
+      message: '',
+      progress: '',
+      enabled: false,
+      type: null
+    }
   }
-}
-
-export const getters = {}
-
-export const mutations = {
-  ENABLE(state, { message, type }) {
-    state.message = message
-    state.enabled = true
-    state.type = type
-  },
-  DISABLE(state) {
-    state.message = ''
-    state.enabled = false
-    state.type = null
+  
+  export const getters = {}
+  
+  export const mutations = {
+    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 = ''
+      state.type = null
+    }
   }
-}
-
-export const actions = {
-  enable({ commit }, { message = this.app.i18n.t('loading') }) {
-    commit('ENABLE', { message })
-  },
-  changeText({ commit }, { message, type }) {
-    commit('ENABLE', { message, type })
-  },
-  disable({ commit }) {
-    commit('DISABLE')
-  },
-  showConfirmLoader({ dispatch, rootState }) {
-    dispatch('changeText', {
-      message: this.app.i18n.t('pleaseConfirmTransactionInWallet', {
-        wallet: rootState.metamask.walletName
-      }),
-      type: 'approve'
-    })
-  }
-}
+  
+  export const actions = {
+    enable({ commit }, { message = this.app.i18n.t('loading') }) {
+      commit('ENABLE', { message })
+    },
+    changeText({ commit }, { message, type }) {
+      commit('ENABLE', { message, type })
+    },
+    updateProgress({ commit }, { message, progress }) {
+      commit('ENABLE', { message, progress })
+    },
+    disable({ commit }) {
+      commit('DISABLE')
+    },
+    showConfirmLoader({ dispatch, rootState }) {
+      dispatch('changeText', {
+        message: this.app.i18n.t('pleaseConfirmTransactionInWallet', {
+          wallet: rootState.metamask.walletName
+        }),
+        type: 'approve'
+      })
+    }
+  }