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,6 +1,7 @@
 export const state = () => {
   return {
     message: '',
+    progress: '',
     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 = ''
     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')
   },