Rework validation list to only subscribe to new_blocks of the miner_hash, prepend list with clingBottom, and update the validations count

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

@@ -18,12 +18,14 @@ export const initialState = {
   beyondPageOne: null,
   channelDisconnected: false,
   filter: null,
+  newBlock: null,
   newInternalTransactions: [],
   newPendingTransactions: [],
   newTransactions: [],
   newTransactionHashes: [],
   newPendingTransactionHashesBatch: [],
-  transactionCount: null
+  transactionCount: null,
+  validationCount: null
 }
 
 export function reducer (state = initialState, action) {
@@ -33,7 +35,8 @@ export function reducer (state = initialState, action) {
         addressHash: action.addressHash,
         beyondPageOne: action.beyondPageOne,
         filter: action.filter,
-        transactionCount: numeral(action.transactionCount).value()
+        transactionCount: numeral(action.transactionCount).value(),
+        validationCount: action.transactionCount ? numeral(action.transactionCount).value() : null
       })
     }
     case 'CHANNEL_DISCONNECTED': {
@@ -44,9 +47,15 @@ export function reducer (state = initialState, action) {
         batchCountAccumulator: 0
       })
     }
-    case 'RECEIVED_UPDATED_BALANCE': {
+    case 'RECEIVED_NEW_BLOCK': {
+      if (state.channelDisconnected) return state
+
+      const validationCount = state.validationCount + 1
+
+      if (state.beyondPageOne) return Object.assign({}, state, { validationCount })
       return Object.assign({}, state, {
-        balance: action.msg.balance
+        newBlock: action.msg.blockHtml,
+        validationCount
       })
     }
     case 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH': {
@@ -133,12 +142,9 @@ export function reducer (state = initialState, action) {
         })
       }
     }
-    case 'RECEIVED_NEW_BLOCK': {
+    case 'RECEIVED_UPDATED_BALANCE': {
-      if (state.channelDisconnected || state.beyondPageOne) return state
-
       return Object.assign({}, state, {
-        newBlock: action.msg.blockHtml,
+        balance: action.msg.balance
-        minerHash: action.msg.blockMinerHash
       })
     }
     default:
@@ -158,32 +164,31 @@ if ($addressDetailsPage.length) {
         addressHash,
         beyondPageOne: !!blockNumber,
         filter,
-        transactionCount: $('[data-selector="transaction-count"]').text()
+        transactionCount: $('[data-selector="transaction-count"]').text(),
+        validationCount: $('[data-selector="validation-count"]') ? $('[data-selector="validation-count"]').text() : null
       })
       addressChannel.join()
       addressChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
       addressChannel.on('balance', (msg) => store.dispatch({ type: 'RECEIVED_UPDATED_BALANCE', msg }))
-      if (!state.beyondPageOne) {
+      addressChannel.on('transaction', batchChannel((msgs) =>
-        const blocksChannel = socket.channel(`blocks:new_block`, {})
+        store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs })
-        blocksChannel.join()
+      ))
-        blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
-        blocksChannel.on('new_block', (msg) => {
-          store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) })
-        })
-        addressChannel.on('transaction', batchChannel((msgs) =>
-          store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs })
-        ))
 
-        addressChannel.on('internal_transaction', batchChannel((msgs) =>
+      addressChannel.on('internal_transaction', batchChannel((msgs) =>
-          store.dispatch({ type: 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH', msgs })
+        store.dispatch({ type: 'RECEIVED_NEW_INTERNAL_TRANSACTION_BATCH', msgs })
-        ))
+      ))
-        addressChannel.on('pending_transaction', batchChannel((msgs) =>
+      addressChannel.on('pending_transaction', batchChannel((msgs) =>
-          store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', msgs })
+        store.dispatch({ type: 'RECEIVED_NEW_PENDING_TRANSACTION_BATCH', msgs })
-        ))
+      ))
-        addressChannel.on('transaction', batchChannel((msgs) =>
+      addressChannel.on('transaction', batchChannel((msgs) =>
-          store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs })
+        store.dispatch({ type: 'RECEIVED_NEW_TRANSACTION_BATCH', msgs })
-        ))
+      ))
-      }
+      const blocksChannel = socket.channel(`blocks:${addressHash}`, {})
+      blocksChannel.join()
+      blocksChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
+      blocksChannel.on('new_block', (msg) => {
+        store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) })
+      })
     },
     render (state, oldState) {
       const $balance = $('[data-selector="balance-card"]')
@@ -198,6 +203,7 @@ if ($addressDetailsPage.length) {
       const $pendingTransactionsList = $('[data-selector="pending-transactions-list"]')
       const $transactionCount = $('[data-selector="transaction-count"]')
       const $transactionsList = $('[data-selector="transactions-list"]')
+      const $validationCount = $('[data-selector="validation-count"]')
       const $validationsList = $('[data-selector="validations-list"]')
 
       if ($emptyInternalTransactionsList.length && state.newInternalTransactions.length) window.location.reload()
@@ -209,6 +215,7 @@ if ($addressDetailsPage.length) {
         updateAllCalculatedUsdValues()
       }
       if (oldState.transactionCount !== state.transactionCount) $transactionCount.empty().append(numeral(state.transactionCount).format())
+      if (oldState.validationCount !== state.validationCount) $validationCount.empty().append(numeral(state.validationCount).format())
       if (state.batchCountAccumulator) {
         $channelBatching.show()
         $channelBatchingCount[0].innerHTML = numeral(state.batchCountAccumulator).format()
@@ -241,14 +248,9 @@ if ($addressDetailsPage.length) {
         prependWithClingBottom($transactionsList, state.newTransactions.slice(oldState.newTransactions.length).reverse().join(''))
         updateAllAges()
       }
-      if (oldState.newBlock !== state.newBlock && state.minerHash === state.addressHash) {
+      if (oldState.newBlock !== state.newBlock) {
-        const len = $validationsList.children().length
+        prependWithClingBottom($validationsList, state.newBlock)
-        $validationsList
+        updateAllAges()
-          .children()
-          .slice(len - 1, len)
-          .remove()
-
-        $validationsList.prepend(state.newBlock)
       }
     }
   })

apps/block_scout_web/lib/block_scout_web/channels/block_channel.ex

@@ -13,6 +13,10 @@ defmodule BlockScoutWeb.BlockChannel do
     {:ok, %{}, socket}
   end
 
+  def join("blocks:" <> _miner_address, _params, socket) do
+    {:ok, %{}, socket}
+  end
+
   def handle_out("new_block", %{block: block, average_block_time: average_block_time}, socket) do
     Gettext.put_locale(BlockScoutWeb.Gettext, socket.assigns.locale)
 

apps/block_scout_web/lib/block_scout_web/notifier.ex

@@ -68,10 +68,16 @@ defmodule BlockScoutWeb.Notifier do
 
   defp broadcast_block(block) do
     preloaded_block = Repo.preload(block, [[miner: :names], :transactions])
+    average_block_time = Chain.average_block_time()
 
     Endpoint.broadcast("blocks:new_block", "new_block", %{
       block: preloaded_block,
-      average_block_time: Chain.average_block_time()
+      average_block_time: average_block_time
+    })
+
+    Endpoint.broadcast("blocks:#{to_string(block.miner_hash)}", "new_block", %{
+      block: preloaded_block,
+      average_block_time: average_block_time
     })
   end
 

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

@@ -97,14 +97,8 @@
           </li>
         </ul>
       </div>
-      
-      <div class="card-body">
-        <div data-selector="channel-batching-message">
-          <div data-selector="reload-button" class="alert alert-info" class="d-none">
-            <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More validations have come in." %></a>
-          </div>
-        </div>
 
+      <div class="card-body">
         <div data-selector="channel-disconnected-message" class="d-none">
           <div data-selector="reload-button" class="alert alert-danger">
             <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer validations" %></a>