Add batch transactions message bar to prevent constant transaction list overwrites

apps/explorer_web/assets/js/pages/chain.js

@@ -1,5 +1,7 @@
 import $ from 'jquery'
 import humps from 'humps'
+import numeral from 'numeral'
+import 'numeral/locales'
 import router from '../router'
 import socket from '../socket'
 import { updateAllAges } from '../lib/from_now'
@@ -26,7 +28,7 @@ export function reducer (state = initialState, action) {
         return Object.assign({}, state, {
           newTransactions: [
             ...state.newTransactions,
-            ...humps.camelizeKeys(action.msgs).map(({homepageTransactionHtml}) => homepageTransactionHtml)
+            ...action.msgs.map(({homepageTransactionHtml}) => homepageTransactionHtml)
           ]
         })
       } else {
@@ -40,20 +42,23 @@ export function reducer (state = initialState, action) {
   }
 }
 
-router.when('', { exactPathMatch: true }).then(() => initRedux(reducer, {
+router.when('', { exactPathMatch: true }).then(({ locale }) => initRedux(reducer, {
   main (store) {
     const blocksChannel = socket.channel(`blocks:new_block`)
+    numeral.locale(locale)
     blocksChannel.join()
     blocksChannel.on('new_block', msg => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg }))
 
     const transactionsChannel = socket.channel(`transactions:new_transaction`)
     transactionsChannel.join()
     transactionsChannel.on('new_transaction', batchChannel((msgs) =>
-      store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs }))
+      store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs: humps.camelizeKeys(msgs) }))
     )
   },
   render (state, oldState) {
     const $blockList = $('[data-selector="chain-block-list"]')
+    const $channelBatching = $('[data-selector="channel-batching-message"]')
+    const $channelBatchingCount = $('[data-selector="channel-batching-count"]')
     const $transactionsList = $('[data-selector="transactions-list"]')
 
     if (oldState.newBlock !== state.newBlock) {
@@ -61,6 +66,12 @@ router.when('', { exactPathMatch: true }).then(() => initRedux(reducer, {
       $blockList.prepend(state.newBlock)
       updateAllAges()
     }
+    if (state.batchCountAccumulator) {
+      $channelBatching.show()
+      $channelBatchingCount[0].innerHTML = numeral(state.batchCountAccumulator).format()
+    } else {
+      $channelBatching.hide()
+    }
     if (oldState.newTransactions !== state.newTransactions) {
       const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length)
       $transactionsList

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

@@ -81,7 +81,7 @@
       <div class="card-body">
         <div data-selector="channel-batching-message" style="display:none;">
           <div data-selector="reload-button" class="alert alert-info">
-            <a href="#" class="alert-link" data-selector="channel-batching-count"><%= gettext "More messages have come in" %></a>
+            <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
           </div>
         </div>
         <div data-selector="channel-disconnected-message" style="display:none;">

apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex

@@ -65,6 +65,11 @@
   </div>
   <div class="card">
     <div class="card-body">
+      <div data-selector="channel-batching-message" style="display:none;">
+        <div data-selector="reload-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>
       <%= link(gettext("View All Transactions →"), to: transaction_path(ExplorerWeb.Endpoint, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Transactions" %></h2>
       <span data-selector="transactions-list">

apps/explorer_web/test/explorer_web/features/pages/address_page.ex

@@ -43,6 +43,10 @@ defmodule ExplorerWeb.AddressPage do
     css("[data-internal-transaction-id='#{id}'] [data-address-hash='#{address_hash}'][data-test='address_hash_link']")
   end
 
+  def non_loaded_transaction_count(count) do
+    css("[data-selector='channel-batching-count']", text: count)
+  end
+
   def transaction(%Transaction{hash: transaction_hash}), do: transaction(transaction_hash)
 
   def transaction(%Hash{} = hash) do

apps/explorer_web/test/explorer_web/features/viewing_addresses_test.exs

@@ -250,6 +250,24 @@ defmodule ExplorerWeb.ViewingAddressesTest do
     |> assert_has(AddressPage.transaction(transaction2))
   end
 
+  test "count of non-loaded transactions on live update when batch overflow", %{addresses: addresses, session: session} do
+    transaction_hashes =
+      30
+      |> insert_list(:transaction, from_address: addresses.lincoln)
+      |> with_block()
+      |> Repo.preload([:block, :from_address, :to_address])
+      |> Enum.map(& &1.hash)
+
+    session
+    |> AddressPage.visit_page(addresses.lincoln)
+    |> assert_has(AddressPage.balance())
+
+    Notifier.handle_event({:chain_event, :transactions, transaction_hashes})
+
+    session
+    |> assert_has(AddressPage.non_loaded_transaction_count("30"))
+  end
+
   test "transaction count live updates", %{addresses: addresses, session: session} do
     session
     |> AddressPage.visit_page(addresses.lincoln)

apps/explorer_web/test/explorer_web/features/viewing_transactions_test.exs

@@ -100,6 +100,23 @@ defmodule ExplorerWeb.ViewingTransactionsTest do
       |> refute_has(HomePage.transaction(last_shown_transaction))
     end
 
+    test "count of non-loaded transactions on homepage live update when batch overflow", %{session: session} do
+      transaction_hashes =
+        30
+        |> insert_list(:transaction)
+        |> with_block()
+        |> Enum.map(& &1.hash)
+
+      session
+      |> HomePage.visit_page()
+      |> assert_has(HomePage.transactions(count: 5))
+
+      Notifier.handle_event({:chain_event, :transactions, transaction_hashes})
+
+      session
+      |> assert_has(AddressPage.non_loaded_transaction_count("30"))
+    end
+
     test "contract creation is shown for to_address on home page", %{session: session} do
       transaction =
         :transaction