Reload transactions on the main page without reloading of the whole page

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#4241](https://github.com/blockscout/blockscout/pull/4241) - Reload transactions on the main page without reloading of the whole page
 - [#4218](https://github.com/blockscout/blockscout/pull/4218) - Hide long arrays in smart-contract's 
 - [#4205](https://github.com/blockscout/blockscout/pull/4205) - Total transactions fees per day API endpoint
 - [#4158](https://github.com/blockscout/blockscout/pull/4158) - Calculate total fee per day

apps/block_scout_web/assets/js/pages/chain.js

@@ -124,6 +124,11 @@ function baseReducer (state = initialState, action) {
         })
       }
     }
+    case 'TRANSACTION_BATCH_EXPANDED': {
+      return Object.assign({}, state, {
+        transactionsBatch: []
+      })
+    }
     case 'RECEIVED_UPDATED_TRANSACTION_STATS': {
       return Object.assign({}, state, {
         transactionStats: action.msg.stats
@@ -339,6 +344,17 @@ if ($chainDetailsPage.length) {
     type: 'RECEIVED_UPDATED_TRANSACTION_STATS',
     msg: 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) {

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

@@ -9,7 +9,7 @@
     <div class="card">
       <%= render BlockScoutWeb.AddressView, "_tabs.html", address: @address, is_proxy: is_proxy, conn: @conn %>
       <div class="card-body" data-async-listing="<%= @current_path %>">
-        <div data-selector="channel-disconnected-message" style="display:none;">
+        <div data-selector="channel-disconnected-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-danger" style="padding: 0.75rem 0rem; cursor: pointer;">
             <span href="#" class="alert alert-danger"><%= gettext "Connection Lost, click to load newer blocks" %></span>
           </div>

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

@@ -1,7 +1,7 @@
 <section class="container" data-page="<%= String.downcase(@block_type) %>-list">
   <div class="card">
     <div class="card-body" data-async-listing="<%= @current_path %>">
-      <div data-selector="channel-disconnected-message" style="display:none;">
+      <div data-selector="channel-disconnected-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-danger">
           <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer blocks" %></a>
         </div>

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

@@ -236,8 +236,8 @@
     <div class="card-body">
       <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
       <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
-      <div data-selector="channel-batching-message" class="d-none">
+      <div data-selector="channel-batching-message" style="display: none;">
-        <div data-selector="reload-button" class="alert alert-info">
+        <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>

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

@@ -7,12 +7,12 @@
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
       </div>
  
-      <div data-selector="channel-batching-message" style="display:none;">
+      <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>
-      <div data-selector="channel-disconnected-message" style="display:none;">
+      <div data-selector="channel-disconnected-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-danger">
           <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
         </div>