perf: reduce amount of calls to crypto compare (ArkEcosystemArchive#708)

* refactor: display fees using TransactionAmount component * refactor: move price fetching to table components * test: fix failing transactions test * fix: check if transactions/blocks are truthy before mapping * fix: throttle crypto compare requests to not hit rate limit * refactor: use axios interceptors to rate limit * chore: remove babel 6 plugins * refactor: set pendingRequests as class property and limit to 1 request every 50ms
lostlink · Sep 2, 2019 · d92e1e0 · d92e1e0
1 parent 969bab1
commit d92e1e0
Show file tree

Hide file tree

Showing 22 changed files with 165 additions and 129 deletions.
diff --git a/.babelrc b/.babelrc
@@ -18,7 +18,7 @@
       "plugins": [
         "@vue/babel-plugin-transform-vue-jsx",
         "@babel/plugin-transform-modules-commonjs",
-        "dynamic-import-node"
+        "@babel/plugin-syntax-dynamic-import"
       ]
     }
   }

diff --git a/__tests__/e2e/specs/transactions_spec.js b/__tests__/e2e/specs/transactions_spec.js
@@ -72,7 +72,7 @@ describe('Transactions', () => {
 
       cy.get('tbody tr').first().then($row => {
         cy.wrap($row).get('td').eq(3).then($cell => {
-          return $cell.find('a').length ? $cell.get('a') : null
+          return $cell.find('a').length ? $cell.find('a') : null
         }).then(link => {
           if (link) {
             cy.wrap(link).click()

diff --git a/__tests__/unit/specs/components/utils/TransactionAmount.spec.js b/__tests__/unit/specs/components/utils/TransactionAmount.spec.js
@@ -119,4 +119,38 @@ describe('Components > Utils > TransactionAmount', () => {
     expect(wrapper.classes()).not.toContain('text-green')
     expect(wrapper.text()).toEqual(wrapper.vm.readableCrypto(100000000).trim())
   })
+
+  it('should display a fee amount without additional coloring', () => {
+    const $route = {
+      params: {
+        address: incomingAddress
+      }
+    }
+
+    const wrapper = mount(TransactionAmount, {
+      propsData: {
+        transaction: {
+          sender: incomingAddress,
+          recipient: outgoingAddress,
+          fee: 100000000,
+          timestamp: {
+            unix: 1535190579
+          }
+        },
+        type: 1,
+        isFee: true
+      },
+      mocks: {
+        $route
+      },
+      i18n,
+      localVue,
+      mixins: [CurrencyMixin],
+      store
+    })
+
+    expect(wrapper.classes()).not.toContain('text-red')
+    expect(wrapper.classes()).not.toContain('text-green')
+    expect(wrapper.text()).toEqual(wrapper.vm.readableCrypto(100000000).trim())
+  })
 })
diff --git a/package.json b/package.json
@@ -34,7 +34,6 @@
     "chart.js": "^2.8.0",
     "connect-history-api-fallback": "^1.6.0",
     "express": "^4.17.1",
-    "generic-pool": "^3.7.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "node-emoji": "^1.10.0",
@@ -65,8 +64,6 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
     "chai": "^4.2.0",
     "chalk": "^2.4.2",
     "compression-webpack-plugin": "^3.0.0",

diff --git a/src/components/block/Details.vue b/src/components/block/Details.vue
@@ -128,6 +128,7 @@ export default {
       required: true
     }
   },
+
   data: () => ({
     price: 0
   }),

diff --git a/src/components/block/Transactions.vue b/src/components/block/Transactions.vue
@@ -79,7 +79,7 @@ export default {
 
       if (this.block.transactions) {
         const { data } = await TransactionService.byBlock(this.block.id)
-        this.transactions = data
+        this.transactions = data.map(transaction => ({ ...transaction, price: null }))
       }
     },
 

diff --git a/src/components/home/LatestBlocks.vue b/src/components/home/LatestBlocks.vue
@@ -61,8 +61,8 @@ export default {
     },
 
     async getBlocks () {
-      const response = await BlockService.latest()
-      this.blocks = response
+      const data = await BlockService.latest()
+      this.blocks = data.map(block => ({ ...block, price: null }))
     },
 
     onSortChange (params) {

diff --git a/src/components/home/LatestTransactions.vue b/src/components/home/LatestTransactions.vue
@@ -76,7 +76,8 @@ export default {
 
     async getTransactions () {
       const { data } = await TransactionService.filterByType(1, this.transactionType)
-      this.transactions = data
+
+      this.transactions = data.map(transaction => ({ ...transaction, price: null }))
     },
 
     onSortChange (params) {

diff --git a/src/components/tables/Blocks.vue b/src/components/tables/Blocks.vue
@@ -131,28 +131,43 @@ export default {
       ]
 
       return columns
+    },
+
+    currencySymbol () {
+      return this.$store.getters['currency/symbol']
     }
   },
 
   watch: {
-    blocks () {
-      this.updateBlocks()
+    async blocks () {
+      await this.prepareBlocks()
+    },
+
+    async currencySymbol () {
+      await this.updatePrices()
     }
   },
 
-  created () {
-    this.updateBlocks()
+  async created () {
+    this.prepareBlocks()
   },
 
   methods: {
-    async updateBlocks () {
+    async prepareBlocks () {
+      await this.updatePrices()
+    },
+
+    async fetchPrice (block) {
+      block.price = await CryptoCompareService.dailyAverage(block.timestamp.unix)
+    },
+
+    async updatePrices () {
       if (!this.blocks) {
         return
       }
 
-      for (const block of this.blocks) {
-        block.price = await CryptoCompareService.dailyAverage(block.timestamp.unix)
-      }
+      const promises = this.blocks.map(this.fetchPrice)
+      await Promise.all(promises)
     },
 
     emitSortChange (params) {

diff --git a/src/components/tables/Transactions.vue b/src/components/tables/Transactions.vue
@@ -44,25 +44,17 @@
         </div>
 
         <div v-else-if="data.column.field === 'amount'">
-          <span class="whitespace-no-wrap">
-            <TransactionAmount
-              :transaction="data.row"
-              :type="data.row.type"
-            />
-          </span>
+          <TransactionAmount
+            :transaction="data.row"
+            :type="data.row.type"
+          />
         </div>
 
         <div v-else-if="data.column.field === 'fee'">
-          <span
-            v-tooltip="{
-              trigger: 'hover click',
-              content: data.row.price ? readableCurrency(data.row.fee, data.row.price) : '',
-              placement: 'top'
-            }"
-            class="whitespace-no-wrap"
-          >
-            {{ readableCrypto(data.row.fee) }}
-          </span>
+          <TransactionAmount
+            :transaction="data.row"
+            :is-fee="true"
+          />
         </div>
 
         <div v-else-if="data.column.field === 'confirmations'">
@@ -90,8 +82,8 @@
 </template>
 
 <script type="text/ecmascript-6">
-import { mapGetters } from 'vuex'
 import CryptoCompareService from '@/services/crypto-compare'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'TableTransactionsDesktop',
@@ -112,6 +104,7 @@ export default {
 
   computed: {
     ...mapGetters('network', ['activeDelegates']),
+    ...mapGetters('currency', { currencySymbol: 'symbol' }),
 
     columns () {
       const feeClasses = ['hidden', 'lg:table-cell']
@@ -188,24 +181,35 @@ export default {
   },
 
   watch: {
-    transactions () {
-      this.updatePrices()
+    async transactions () {
+      await this.prepareTransactions()
+    },
+
+    async currencySymbol () {
+      await this.updatePrices()
     }
   },
 
-  created () {
-    this.updatePrices()
+  async created () {
+    this.prepareTransactions()
   },
 
   methods: {
+    async prepareTransactions () {
+      await this.updatePrices()
+    },
+
+    async fetchPrice (transaction) {
+      transaction.price = await CryptoCompareService.dailyAverage(transaction.timestamp.unix)
+    },
+
     async updatePrices () {
       if (!this.transactions) {
         return
       }
 
-      for (const transaction of this.transactions) {
-        transaction.price = await CryptoCompareService.dailyAverage(transaction.timestamp.unix)
-      }
+      const promises = this.transactions.map(this.fetchPrice)
+      await Promise.all(promises)
     },
 
     emitSortChange (params) {

diff --git a/src/components/tables/TransactionsDetail.vue b/src/components/tables/TransactionsDetail.vue
@@ -44,25 +44,17 @@
         </div>
 
         <div v-else-if="data.column.field === 'amount'">
-          <span class="whitespace-no-wrap">
-            <TransactionAmount
-              :transaction="data.row"
-              :type="data.row.type"
-            />
-          </span>
+          <TransactionAmount
+            :transaction="data.row"
+            :type="data.row.type"
+          />
         </div>
 
         <div v-else-if="data.column.field === 'fee'">
-          <span
-            v-tooltip="{
-              trigger: 'hover click',
-              content: data.row.price ? readableCurrency(data.row.fee, data.row.price) : '',
-              placement: 'top'
-            }"
-            class="whitespace-no-wrap"
-          >
-            {{ readableCrypto(data.row.fee) }}
-          </span>
+          <TransactionAmount
+            :transaction="data.row"
+            :is-fee="true"
+          />
         </div>
 
         <div v-else-if="data.column.field === 'confirmations'">

diff --git a/src/components/tables/mobile/Transactions.vue b/src/components/tables/mobile/Transactions.vue
@@ -71,7 +71,12 @@
           <div class="mr-4">
             {{ $t('TRANSACTION.FEE') }}
           </div>
-          <div>{{ readableCrypto(transaction.fee) }}</div>
+          <div>
+            <TransactionAmount
+              :transaction="transaction"
+              :is-fee="true"
+            />
+          </div>
         </div>
 
         <div

diff --git a/src/components/tables/mobile/TransactionsDetail.vue b/src/components/tables/mobile/TransactionsDetail.vue
@@ -69,7 +69,12 @@
           <div class="mr-4">
             {{ $t('TRANSACTION.FEE') }}
           </div>
-          <div>{{ readableCrypto(transaction.fee) }}</div>
+          <div>
+            <TransactionAmount
+              :transaction="data.row"
+              :is-fee="true"
+            />
+          </div>
         </div>
 
         <div class="list-row">
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,6 +128,7 @@ export default { @@
           required: true
         }
       },
       data: () => ({
         price: 0
       }),
@@ Expand Down @@