refactor: overall latest transactions per profile (#1034)

ArkEcosystem · Jan 30, 2019 · 90a6251 · 90a6251
1 parent 683a76d
commit 90a6251
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 27 deletions.
diff --git a/__tests__/unit/services/client.spec.js b/__tests__/unit/services/client.spec.js
@@ -514,7 +514,7 @@ describe('Services > Client', () => {
         expect(transaction).not.toHaveProperty('senderId')
         expect(transaction).not.toHaveProperty('recipientId')
         expect(transaction).not.toHaveProperty('isSender')
-        expect(transaction).not.toHaveProperty('isReceiver')
+        expect(transaction).not.toHaveProperty('isRecipient')
       })
     })
   })
@@ -550,7 +550,7 @@ describe('Services > Client', () => {
           expect(transaction).toHaveProperty('totalAmount', data[i].amount + data[i].fee)
           expect(transaction).toHaveProperty('timestamp', new Date(data[i].timestamp.human).getTime())
           expect(transaction).toHaveProperty('isSender')
-          expect(transaction).toHaveProperty('isReceiver')
+          expect(transaction).toHaveProperty('isRecipient')
           expect(transaction).toHaveProperty('sender')
           expect(transaction).toHaveProperty('recipient')
           expect(transaction).not.toHaveProperty('senderId')
@@ -587,7 +587,7 @@ describe('Services > Client', () => {
           expect(transaction).toHaveProperty('totalAmount', data[i].amount + data[i].fee)
           expect(transaction).toHaveProperty('timestamp', data[i].timestamp.unix * 1000)
           expect(transaction).toHaveProperty('isSender')
-          expect(transaction).toHaveProperty('isReceiver')
+          expect(transaction).toHaveProperty('isRecipient')
           expect(transaction).toHaveProperty('sender')
           expect(transaction).toHaveProperty('recipient')
           expect(transaction).not.toHaveProperty('senderId')

diff --git a/__tests__/unit/store/modules/transaction.spec.js b/__tests__/unit/store/modules/transaction.spec.js
@@ -74,7 +74,7 @@ describe('TransactionModule', () => {
         transactions.forEach(transaction => {
           expect(transaction).toHaveProperty('totalAmount')
           expect(transaction).toHaveProperty('isSender')
-          expect(transaction).toHaveProperty('isReceiver', true)
+          expect(transaction).toHaveProperty('isRecipient', true)
         })
       })
     })
@@ -90,7 +90,7 @@ describe('TransactionModule', () => {
         transactions.forEach(transaction => {
           expect(transaction).toHaveProperty('totalAmount')
           expect(transaction).toHaveProperty('isSender', true)
-          expect(transaction).toHaveProperty('isReceiver')
+          expect(transaction).toHaveProperty('isRecipient')
         })
       })
     })
@@ -107,7 +107,7 @@ describe('TransactionModule', () => {
         transactions.forEach(transaction => {
           expect(transaction).toHaveProperty('totalAmount')
           expect(transaction).toHaveProperty('isSender', transaction.sender === 'A3')
-          expect(transaction).toHaveProperty('isReceiver', transaction.recipient === 'A3')
+          expect(transaction).toHaveProperty('isRecipient', transaction.recipient === 'A3')
         })
       })
     })
@@ -134,7 +134,7 @@ describe('TransactionModule', () => {
         transactions.forEach(transaction => {
           expect(transaction).toHaveProperty('totalAmount')
           expect(transaction).toHaveProperty('isSender')
-          expect(transaction).toHaveProperty('isReceiver')
+          expect(transaction).toHaveProperty('isRecipient')
         })
       })
     })

diff --git a/src/renderer/components/Dashboard/DashboardTransactions.vue b/src/renderer/components/Dashboard/DashboardTransactions.vue
@@ -3,11 +3,12 @@
     :has-short-id="true"
     :rows="lastTransactions"
     :is-dashboard="true"
+    :is-loading="isLoading"
   />
 </template>
 
 <script>
-import { uniqBy } from 'lodash'
+import { uniqBy, orderBy, flatten } from 'lodash'
 import mergeTableTransactions from '@/components/utils/merge-table-transactions'
 import { TransactionTable } from '@/components/Transaction'
 
@@ -22,13 +23,14 @@ export default {
     numberOfTransactions: {
       type: Number,
       required: false,
-      default: 10
+      default: 50
     }
   },
 
   data: () => ({
     fetchedTransactions: [],
-    previousWalletAddresses: []
+    previousWalletAddresses: [],
+    isLoading: false
   }),
 
   computed: {
@@ -71,6 +73,9 @@ export default {
 
   methods: {
     async fetchTransactions (updatePreviousWallets = true) {
+      if (!this.fetchedTransactions.length) {
+        this.isLoading = true
+      }
       if (!this.wallets.length) {
         return
       }
@@ -81,23 +86,17 @@ export default {
 
       try {
         const addresses = this.wallets.map(wallet => wallet.address)
-        const walletTransactions = await this.$client.fetchTransactionsForWallets(addresses)
-        for (const transactions of Object.values(walletTransactions)) {
-          this.$set(this, 'fetchedTransactions', uniqBy([
-            /*
-             * NOTE: The order of this 2 lines is VERY important:
-             * recent transactions should override older to have the up-to-date number of confirmations
-             */
-            ...transactions.slice(0, this.numberOfTransactions),
-            ...this.fetchedTransactions
-          ], 'id'))
-        }
+        const transactions = await this.$client.fetchTransactionsForWallets(addresses)
+        const ordered = orderBy(uniqBy(flatten(Object.values(transactions)), 'id'), 'timestamp', 'desc')
+        this.fetchedTransactions = ordered.slice(0, this.numberOfTransactions)
       } catch (error) {
         this.$logger.error(error)
         this.$error(this.$t('COMMON.FAILED_FETCH', {
           name: 'transactions',
           msg: error.message
         }))
+      } finally {
+        this.isLoading = false
       }
     },
 

diff --git a/src/renderer/components/Transaction/TransactionAmount.vue b/src/renderer/components/Transaction/TransactionAmount.vue
@@ -2,7 +2,7 @@
   <span
     :class="{
       'text-red': transaction.isSender && transaction.amount,
-      'text-green': transaction.isReceiver && isTransfer,
+      'text-green': transaction.isRecipient && isTransfer,
     }"
   >
     {{ formatter_networkCurrency(transaction.amount) }}

diff --git a/src/renderer/pages/Dashboard.vue b/src/renderer/pages/Dashboard.vue
@@ -11,10 +11,13 @@
       </div>
 
       <div class="p-10">
-        <div class="text-lg font-semibold mb-4">
+        <h3 class="flex items-center">
           {{ $t('PAGES.DASHBOARD.LAST_TRANSACTIONS') }}
+        </h3>
+
+        <div class="Dashboard__transactions">
+          <DashboardTransactions />
         </div>
-        <DashboardTransactions />
       </div>
     </main>
 
@@ -91,6 +94,9 @@ export default {
 </style>
 
 <style lang="postcss" scoped>
+.Dashboard__transactions {
+  @apply .mt-10;
+}
 .Dashboard__wallets__list {
   border-top: 0.08rem solid var(--theme-feature-item-alternative);
 }

diff --git a/src/renderer/services/client.js b/src/renderer/services/client.js
@@ -327,7 +327,7 @@ export default class ClientService {
     // Add some utilities for each transactions
     const result = transactions.map(tx => {
       tx.isSender = tx.sender === address
-      tx.isReceiver = tx.recipient === address
+      tx.isRecipient = tx.recipient === address
       tx.totalAmount = tx.amount + tx.fee
 
       return tx
@@ -367,6 +367,8 @@ export default class ClientService {
       if (!hadFailure) {
         transactions = orderBy(transactions, 'timestamp', 'desc').map(transaction => {
           transaction.timestamp = transaction.timestamp.unix * 1000 // to milliseconds
+          transaction.isSender = addresses.includes(transaction.sender)
+          transaction.isRecipient = addresses.includes(transaction.recipient)
 
           return transaction
         })

diff --git a/src/renderer/store/modules/transaction.js b/src/renderer/store/modules/transaction.js
@@ -32,7 +32,7 @@ export default {
         return transaction.recipient === address || transaction.sender === address
       }).map(transaction => {
         transaction.isSender = transaction.sender === address
-        transaction.isReceiver = transaction.recipient === address
+        transaction.isRecipient = transaction.recipient === address
         transaction.totalAmount = transaction.amount + transaction.fee
 
         return transaction
@@ -56,7 +56,7 @@ export default {
 
       const transactions = state.transactions[profileId].map(transaction => {
         transaction.isSender = addresses.includes(transaction.sender)
-        transaction.isReceiver = addresses.includes(transaction.recipient)
+        transaction.isRecipient = addresses.includes(transaction.recipient)
         transaction.totalAmount = transaction.amount + transaction.fee
 
         return transaction