Merge pull request #4391 from blockscout/np-add-batched-txs

Add batched txs at address page

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#4391](https://github.com/blockscout/blockscout/pull/4391) - Add batched transactions on the `address/{addressHash}/transactions` page
 - [#4353](https://github.com/blockscout/blockscout/pull/4353) - Added live-reload on the token holders page
 
 ### Fixes

apps/block_scout_web/assets/js/pages/address/transactions.js

@@ -2,16 +2,21 @@ import $ from 'jquery'
 import omit from 'lodash/omit'
 import URI from 'urijs'
 import humps from 'humps'
+import numeral from 'numeral'
 import { subscribeChannel } from '../../socket'
 import { connectElements } from '../../lib/redux_helpers.js'
 import { createAsyncLoadStore } from '../../lib/async_listing_load'
+import { batchChannel } from '../../lib/utils'
 import '../address'
 import { isFiltered } from './utils'
 
+const BATCH_THRESHOLD = 6
+
 export const initialState = {
   addressHash: null,
   channelDisconnected: false,
-  filter: null
+  filter: null,
+  transactionsBatch: []
 }
 
 export function reducer (state, action) {
@@ -36,11 +41,46 @@ export function reducer (state, action) {
 
       return Object.assign({}, state, { items: [action.msg.transactionHtml, ...state.items] })
     }
+    case 'RECEIVED_NEW_TRANSACTION_BATCH': {
+      if (state.channelDisconnected || state.beyondPageOne) return state
+
+      const transactionCount = state.transactionCount + action.msgs.length
+
+      if (!state.transactionsBatch.length && action.msgs.length < BATCH_THRESHOLD) {
+        return Object.assign({}, state, {
+          items: [
+            ...action.msgs.map(msg => msg.transactionHtml).reverse(),
+            ...state.items
+          ],
+          transactionCount
+        })
+      } else {
+        return Object.assign({}, state, {
+          transactionsBatch: [
+            ...action.msgs.reverse(),
+            ...state.transactionsBatch
+          ],
+          transactionCount
+        })
+      }
+    }
     case 'RECEIVED_NEW_REWARD': {
       if (state.channelDisconnected) return state
 
       return Object.assign({}, state, { items: [action.msg.rewardHtml, ...state.items] })
     }
+    case 'TRANSACTION_BATCH_EXPANDED': {
+      return Object.assign({}, state, {
+        transactionsBatch: []
+      })
+    }
+    case 'TRANSACTIONS_FETCHED':
+      return Object.assign({}, state, { items: [...action.msg.items] })
+    case 'TRANSACTIONS_FETCH_ERROR': {
+      const $channelBatching = $('[data-selector="channel-batching-message"]')
+      $channelBatching.show()
+      return state
+    }
     default:
       return state
   }
@@ -66,6 +106,14 @@ const elements = {
 
       return $el.show()
     }
+  },
+  '[data-selector="channel-batching-count"]': {
+    render ($el, state, _oldState) {
+      const $channelBatching = $('[data-selector="channel-batching-message"]')
+      if (!state.transactionsBatch.length) return $channelBatching.hide()
+      $channelBatching.show()
+      $el[0].innerHTML = numeral(state.transactionsBatch.length).format()
+    }
   }
 }
 
@@ -85,18 +133,18 @@ if ($('[data-page="address-transactions"]').length) {
 
   const addressChannel = subscribeChannel(`addresses:${addressHash}`)
   addressChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
-  addressChannel.on('transaction', (msg) => {
+  addressChannel.on('transaction', batchChannel((msgs) =>
     store.dispatch({
-      type: 'RECEIVED_NEW_TRANSACTION',
-      msg: humps.camelizeKeys(msg)
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: humps.camelizeKeys(msgs)
     })
-  })
-  addressChannel.on('pending_transaction', (msg) => {
+  ))
+  addressChannel.on('pending_transaction', batchChannel((msgs) =>
     store.dispatch({
-      type: 'RECEIVED_NEW_TRANSACTION',
-      msg: humps.camelizeKeys(msg)
-    })
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: humps.camelizeKeys(msgs)
     })
+  ))
 
   const rewardsChannel = subscribeChannel(`rewards:${addressHash}`)
   rewardsChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
@@ -106,4 +154,24 @@ if ($('[data-page="address-transactions"]').length) {
       msg: humps.camelizeKeys(msg)
     })
   })
+
+  const $txReloadButton = $('[data-selector="reload-transactions-button"]')
+  const $channelBatching = $('[data-selector="channel-batching-message"]')
+  $txReloadButton.on('click', (event) => {
+    event.preventDefault()
+    loadTransactions(store)
+    $channelBatching.hide()
+    store.dispatch({
+      type: 'TRANSACTION_BATCH_EXPANDED'
+    })
+  })
+}
+
+function loadTransactions (store) {
+  const path = $('[class="card-body"]')[1].dataset.asyncListing
+  store.dispatch({ type: 'START_TRANSACTIONS_FETCH' })
+  $.getJSON(path, { type: 'JSON' })
+    .done(response => store.dispatch({ type: 'TRANSACTIONS_FETCHED', msg: humps.camelizeKeys(response) }))
+    .fail(() => store.dispatch({ type: 'TRANSACTIONS_FETCH_ERROR' }))
+    .always(() => store.dispatch({ type: 'FINISH_TRANSACTIONS_FETCH' }))
 }

apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex

@@ -45,7 +45,11 @@
             <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
           </div>
         </div>
-
+        <div data-selector="channel-batching-message" style="display: none;">
+          <div data-selector="reload-transactions-button" class="alert alert-info">
+            <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
+          </div>
+        </div>
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
           <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
         </button>

apps/block_scout_web/priv/gettext/default.pot

@@ -1392,6 +1392,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:50
 #: lib/block_scout_web/templates/chain/show.html.eex:239
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
@@ -1803,7 +1804,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/index.html.eex:23
 #: lib/block_scout_web/templates/address_token/index.html.eex:17
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:50
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:54
 #: lib/block_scout_web/templates/address_validation/index.html.eex:24
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
 #: lib/block_scout_web/templates/chain/show.html.eex:182
@@ -2077,7 +2078,7 @@ msgid "There are no tokens."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:55
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:59
 msgid "There are no transactions for this address."
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -1392,6 +1392,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:50
 #: lib/block_scout_web/templates/chain/show.html.eex:239
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
@@ -1803,7 +1804,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/index.html.eex:23
 #: lib/block_scout_web/templates/address_token/index.html.eex:17
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:50
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:54
 #: lib/block_scout_web/templates/address_validation/index.html.eex:24
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
 #: lib/block_scout_web/templates/chain/show.html.eex:182
@@ -2077,7 +2078,7 @@ msgid "There are no tokens."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:55
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:59
 msgid "There are no transactions for this address."
 msgstr ""