From 4d333fccad76a9a3e855f9f73e21b47615f27c71 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Mon, 13 May 2019 18:54:11 -0300
Subject: [PATCH] (update) all pagination buttons in all sections

---
 apps/block_scout_web/assets/css/_helpers.scss | 10 ++-
 .../css/components/_pagination_container.scss |  4 +
 .../assets/js/lib/async_listing_load.js       |  9 ++-
 .../templates/address/index.html.eex          | 11 +--
 .../address_coin_balance/index.html.eex       |  6 ++
 .../index.html.eex                            | 80 +++++++++++--------
 .../templates/address_token/index.html.eex    | 45 +++++++----
 .../address_token_transfer/index.html.eex     | 12 +++
 .../address_transaction/index.html.eex        | 79 ++++++++++--------
 .../address_validation/index.html.eex         |  9 +++
 .../templates/block/index.html.eex            |  4 +-
 .../block_transaction/index.html.eex          | 19 +++++
 .../_pagination_container.html.eex            | 14 +++-
 .../pending_transaction/index.html.eex        | 11 +--
 .../templates/tokens/transfer/index.html.eex  | 15 +++-
 .../templates/transaction/_tabs.html.eex      |  2 +-
 .../templates/transaction/index.html.eex      | 11 +--
 .../index.html.eex                            | 19 +++++
 .../templates/transaction_log/index.html.eex  | 19 +++++
 .../transaction_raw_trace/index.html.eex      |  9 +--
 .../transaction_token_transfer/index.html.eex | 44 +++++++---
 21 files changed, 292 insertions(+), 140 deletions(-)

diff --git a/apps/block_scout_web/assets/css/_helpers.scss b/apps/block_scout_web/assets/css/_helpers.scss
index a7068b0b63..c26b5c5b22 100644
--- a/apps/block_scout_web/assets/css/_helpers.scss
+++ b/apps/block_scout_web/assets/css/_helpers.scss
@@ -20,4 +20,12 @@
   @include media-breakpoint-down(md) {
     margin-right: 0;
   }
-}
\ No newline at end of file
+}
+
+.clearfix:after {
+  clear: both;
+  content: " "; /* Older browser do not support empty content */
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
diff --git a/apps/block_scout_web/assets/css/components/_pagination_container.scss b/apps/block_scout_web/assets/css/components/_pagination_container.scss
index a97b338c29..d9ae827df6 100644
--- a/apps/block_scout_web/assets/css/components/_pagination_container.scss
+++ b/apps/block_scout_web/assets/css/components/_pagination_container.scss
@@ -50,6 +50,10 @@ $pagination-page-link-color-active: #fff !default;
     margin: 0 0 0 auto;
     padding: 0;
 
+    @include media-breakpoint-down(sm) {
+      margin: 0 auto;
+    }
+
     .page-item {
       margin: 0 5px 0 0;
 
diff --git a/apps/block_scout_web/assets/js/lib/async_listing_load.js b/apps/block_scout_web/assets/js/lib/async_listing_load.js
index 2e9e4e371b..99c5b0eaf2 100644
--- a/apps/block_scout_web/assets/js/lib/async_listing_load.js
+++ b/apps/block_scout_web/assets/js/lib/async_listing_load.js
@@ -145,11 +145,12 @@ export const elements = {
   },
   '[data-async-listing] [data-next-page-button]': {
     render ($el, state) {
-      if (state.requestError) return $el.hide()
-      if (!state.nextPagePath) return $el.hide()
-      if (state.loading) return $el.hide()
+      if ((state.requestError) || (!state.nextPagePath) || (state.loading)) {
+        $el.attr('disabled', 'disabled')
+        return
+      }
 
-      $el.show()
+      // $el.show()
       $el.attr('href', state.nextPagePath)
     }
   },
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
index 080102d2c9..91697de0c9 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
@@ -1,16 +1,7 @@
 <section class="container">
   <div class="card">
     <div class="card-body">
-      <h1 class="card-title margin-bottom-0"><%= gettext "Addresses" %></h1>
-      <p class="card-subtitle">
-        <%= gettext "Showing " %>
-        <%= Cldr.Number.to_string!(@page_address_count, format: "#,###") %>
-        <%= gettext " addresses of" %>
-        <%= Cldr.Number.to_string!(@address_count, format: "#,###") %>
-        <%= gettext "total addresses with a balance" %>
-        <%= gettext " (page" %>
-        <%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %>
-      </p>
+      <h1 class="card-title"><%= gettext "Addresses" %></h1>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: @prev_page_path, next_page_path: @next_page_path, cur_page_number: @cur_page_number, show_pagination_limit: true %>
 
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
index a41a641fad..ed45e918ce 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
@@ -13,6 +13,8 @@
 
         <h2 class="card-title"><%= gettext "Balances" %></h2>
 
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <div data-chart-loading-message class="tile tile-muted text-center mt-3">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
@@ -48,9 +50,13 @@
 
         <div data-selector="coin-balances-list" data-items></div>
 
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
 
         <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
           <span class="loading-spinner-small mr-2">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
index e694ce56d3..ce478c1f00 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
@@ -15,44 +15,48 @@
             <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer internal transactions" %></a>
           </div>
         </div>
-        <div class="dropdown float-right u-push-sm">
-          <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
-            id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Filter: <%= format_current_filter(@filter) %>
-          </button>
-          <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
-            <%= link(
-              gettext("All"),
-              to: address_internal_transaction_path(@conn, :index, @address.hash),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-            <%= link(
-              gettext("To"),
-              to: address_internal_transaction_path(
-                @conn,
-                :index,
-                @address.hash,
-                filter: "to"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-            <%= link(
-              gettext("From"),
-              to: address_internal_transaction_path(
-                @conn,
-                :index,
-                @address.hash,
-                filter: "from"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
+        <div class="clearfix">
+          <h2 class="card-title float-left"><%= gettext "Internal Transactions" %></h2>
+          <div class="dropdown float-right u-push-sm">
+            <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
+              id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Filter: <%= format_current_filter(@filter) %>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
+              <%= link(
+                gettext("All"),
+                to: address_internal_transaction_path(@conn, :index, @address.hash),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("To"),
+                to: address_internal_transaction_path(
+                  @conn,
+                  :index,
+                  @address.hash,
+                  filter: "to"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("From"),
+                to: address_internal_transaction_path(
+                  @conn,
+                  :index,
+                  @address.hash,
+                  filter: "from"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+            </div>
           </div>
         </div>
 
-        <h2 class="card-title"><%= gettext "Internal Transactions" %></h2>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <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>
@@ -69,9 +73,15 @@
           <%= gettext("Loading") %>...
         </div>
         <div data-items></div>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
+
         <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
index bc5aac9f4b..0f8ae6efb1 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
@@ -6,6 +6,15 @@
       <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body">
         <h2 class="card-title"><%= gettext "Tokens" %></h2>
+
+        <%= if @next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: address_token_path(@conn, :index, @address, @next_page_params) %>
+        <% end %>
+
+        <%= if !@next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
+        <% end %>
+
         <%= if Enum.any?(@tokens) do %>
           <%= for token <- @tokens do %>
             <%= render "_tokens.html", conn: @conn, token: token, address: @address %>
@@ -16,20 +25,28 @@
           </div>
         <% end %>
 
-        <div>
-          <%= if @next_page_params do %>
-            <%= link(
-              gettext("Next"),
-              class: "button button-secondary button-sm float-right mt-3",
-              to: address_token_path(
-                @conn,
-                :index,
-                @address,
-                @next_page_params
-              )
-            ) %>
-          <% end %>
-        </div>
+        <%= if @next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, next_page_path: address_token_path(@conn, :index, @address, @next_page_params) %>
+        <% end %>
+
+        <%= if !@next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
+        <% end %>
+
+        <!--
+        <%= if @next_page_params do %>
+          <%= link(
+            gettext("Next"),
+            class: "button button-secondary button-sm float-right mt-3",
+            to: address_token_path(
+              @conn,
+              :index,
+              @address,
+              @next_page_params
+            )
+          ) %>
+        <% end %>
+        -->
       </div>
     </div>
   </section>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
index 389dd2aefb..33f29839bb 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
@@ -8,6 +8,9 @@
         <h2 class="card-title">
           <span class="text-muted"><%= gettext "Tokens" %></span> / <%= token_name(@token) %>
         </h2>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <div data-loading-message class="tile tile-muted text-center mt-3">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
@@ -15,18 +18,27 @@
           </span>
           <%= gettext("Loading...") %>
         </div>
+
         <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span><%= gettext "There are no token transfers for this address." %></span>
         </div>
+
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
           <span class="alert-link">
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
+
         <div data-items></div>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a data-next-page-button href="#" class="button button-secondary button-small float-right mt-4" style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
+
         <div data-loading-button class="button button-secondary button-small float-right mt-4" style="display: none;">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
index bc70ff693e..9932a8422d 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
@@ -11,43 +11,48 @@
             <a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer transactions" %></a>
           </div>
         </div>
-        <div class="dropdown float-right u-push-sm">
-          <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
-            id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Filter: <%= format_current_filter(@filter) %>
-          </button>
-          <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
-            <%= link(
-              gettext("All"),
-              to: address_transaction_path(@conn, :index, @address.hash),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-            <%= link(
-              gettext("To"),
-              to: address_transaction_path(
-                @conn,
-                :index,
-                @address.hash,
-                filter: "to"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
-            <%= link(
-              gettext("From"),
-              to: address_transaction_path(
-                @conn,
-                :index,
-                @address.hash,
-                filter: "from"
-              ),
-              class: "address__link address__link--active dropdown-item",
-              "data-test": "filter_option"
-            ) %>
+        <div class="clearfix">
+          <h2 class="card-title float-left"><%= gettext "Transactions" %></h2>
+          <div class="dropdown float-right u-push-sm">
+            <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
+              id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Filter: <%= format_current_filter(@filter) %>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
+              <%= link(
+                gettext("All"),
+                to: address_transaction_path(@conn, :index, @address.hash),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("To"),
+                to: address_transaction_path(
+                  @conn,
+                  :index,
+                  @address.hash,
+                  filter: "to"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+              <%= link(
+                gettext("From"),
+                to: address_transaction_path(
+                  @conn,
+                  :index,
+                  @address.hash,
+                  filter: "from"
+                ),
+                class: "address__link address__link--active dropdown-item",
+                "data-test": "filter_option"
+              ) %>
+            </div>
           </div>
         </div>
-        <h2 class="card-title"><%= gettext "Transactions" %></h2>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <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>
@@ -68,9 +73,13 @@
 
         <div data-items></div>
 
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
 
         <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
           <span class="loading-spinner-small mr-2">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex
index 4ab814e563..bf04937955 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_validation/index.html.eex
@@ -11,6 +11,9 @@
           </div>
         </div>
         <h2 class="card-title"><%=gettext("Blocks Validated")%></h2>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <div data-loading-message class="tile tile-muted text-center mt-3">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
@@ -27,9 +30,15 @@
           </span>
         </button>
         <div data-items data-selector="validations-list"></div>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a data-next-page-button href="#" class="button button-secondary button-small float-right mt-4" style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
+
         <div data-loading-button class="button button-secondary button-small float-right mt-4" style="display: none;">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
index 43941ca359..9a0b61a394 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block/index.html.eex
@@ -9,7 +9,7 @@
 
       <h1 class="card-title"><%= gettext("%{block_type}s", block_type: @block_type) %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <div data-loading-message class="tile tile-muted text-center mt-3">
         <span class="loading-spinner-small mr-2">
@@ -23,7 +23,7 @@
           <span><%= gettext "There are no blocks." %></span>
       </div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <!--
       <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
index 54aa04d947..79574e8fee 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
@@ -15,6 +15,15 @@
       </div>
       <div class="card-body">
         <h2 class="card-title"><%= gettext "Transactions" %></h2>
+
+        <%= if @next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_path(@conn, :index, @next_page_params) %>
+        <% end %>
+
+        <%= if !@next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
+        <% end %>
+
         <%= if Enum.count(@transactions) > 0 do %>
           <span data-selector="transactions-list">
             <%= for transaction <- @transactions do %>
@@ -27,6 +36,15 @@
           </div>
         <% end %>
 
+        <%= if @next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_path(@conn, :index, @next_page_params) %>
+        <% end %>
+
+        <%= if !@next_page_params do %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
+        <% end %>
+
+        <!--
         <%= if @next_page_params do %>
           <%= link(
             gettext("Older"),
@@ -38,6 +56,7 @@
             )
           ) %>
         <% end %>
+        -->
       </div>
     </div>
   </section>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex
index ee7890af6a..6f33bcf854 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex
@@ -1,5 +1,6 @@
 <div class='pagination-container <%= if assigns[:position] == "top" do %>position-top<% end %> <%= if assigns[:position] == "bottom" do %>position-bottom<% end %>'>
     <%= if assigns[:show_pagination_limit] do %>
+    <!-- Pagination limit -->
     <div class="pagination-limit">
         <%= gettext "Show" %>
         <select>
@@ -10,7 +11,9 @@
         <%= gettext "Records" %>
     </div>
     <% end %>
+    <!-- Pagination -->
     <ul class="pagination">
+        <!-- First -->
         <li class="page-item">
             <a
                 <%= if !assigns[:first_page_path] do %>disabled<% end %>
@@ -18,29 +21,34 @@
                 href='<%= "#{assigns[:first_page_path]}" %>'
             >First</a>
         </li>
+        <!-- Previous -->
         <li class="page-item">
             <a
                 <%= if !assigns[:prev_page_path] do %>disabled<% end %>
                 class="page-link"
-                href='<%= "#{@prev_page_path}" %>'
+                href='<%= "#{assigns[:prev_page_path]}" %>'
             >
                 <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10">
                     <path fill-rule="evenodd" d="M2.358 5l3.357 3.358a.959.959 0 1 1-1.357 1.357L.502 5.859c-.076-.042-.153-.08-.217-.144A.949.949 0 0 1 .011 5a.949.949 0 0 1 .274-.715c.064-.064.142-.102.217-.145L4.358.285a.959.959 0 1 1 1.357 1.357L2.358 5z"/>
                 </svg>
             </a>
         </li>
-        <li class="page-item"><a class="page-link no-hover" href><%= gettext "Page" %> <%= assigns[:cur_page_number] || "" %> <%= gettext "of" %> <%= assigns[:total_pages_number] || "undefined" %></a></li>
+        <!-- Page X of XX -->
+        <li class="page-item"><a class="page-link no-hover" href><%= gettext "Page" %> <%= assigns[:cur_page_number] || "" %> <% if assigns[:total_pages_number] do %> <%= gettext "of" %> <%= assigns[:total_pages_number] || "undefined" %><% end %></a></li>
+        <!-- Next -->
         <li class="page-item">
             <a
                 <%= if !assigns[:next_page_path] do %>disabled<% end %>
                 class="page-link"
-                href='<%= "#{@next_page_path}" %>'
+                href='<%= "#{assigns[:next_page_path]}" %>'
+                <%= if assigns[:data_next_page_button] do %>data-next-page-button<% end %>
             >
                 <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10">
                     <path fill-rule="evenodd" d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"/>
                 </svg>
             </a>
         </li>
+        <!-- Last -->
         <li class="page-item">
             <a
                 <%= if !assigns[:last_page_path] do %>disabled<% end %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
index 361d459179..8c57144734 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/pending_transaction/index.html.eex
@@ -1,14 +1,9 @@
 <section class="container" data-page="transaction-pending-list">
   <div class="card">
     <div class="card-body" data-async-listing="<%= @current_path %>">
-      <h1 class="card-title margin-bottom-0"><%= gettext "Pending Transactions" %></h1>
-      <p class="card-subtitle">
-        <%= gettext("Showing") %>
-        <span data-selector="transaction-pending-count"><%= Cldr.Number.to_string!(@pending_transaction_count, format: "#,###") %></span>
-        <%= gettext("Pending Transactions") %>
-      </p>
+      <h1 class="card-title"><%= gettext "Pending Transactions" %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">
@@ -37,7 +32,7 @@
         <%= gettext("Loading") %>...
       </div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <!--
       <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
index 75f5f1079e..fc1d6e9291 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
@@ -13,14 +13,19 @@
       <%= render OverviewView, "_tabs.html", assigns %>
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
         <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>
+
         <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span data-selector="empty-transactions-list">
             <%= gettext "There are no transfers for this Token." %>
           </span>
         </div>
+
         <div data-loading-message class="tile tile-muted text-center mt-3">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
@@ -28,11 +33,17 @@
           </span>
           <%= gettext("Loading") %>...
         </div>
-        <div data-items>
-        </div>
+
+        <div data-items></div>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
+
+        <!--
         <a href="#" class="button button-secondary button-small float-right mt-4" data-next-page-button style="display: none;">
           <%= gettext("Older") %>
         </a>
+        -->
+
         <div class="button button-secondary button-small float-right mt-4" data-loading-button style="display: none;">
           <span class="loading-spinner-small mr-2">
             <span class="loading-spinner-block-1"></span>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
index 83bdb3372f..67a5980f28 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
@@ -22,7 +22,7 @@
     %>
   <%= link(
       gettext("Raw Trace"),
-      class: "nav-link #{tab_status("raw_trace", @conn.request_path)}",
+      class: "card-tab #{tab_status("raw_trace", @conn.request_path)}",
       to: transaction_raw_trace_path(@conn, :index, @transaction)
       ) %>
 </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex
index eb601770e2..dd64899485 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/index.html.eex
@@ -1,14 +1,9 @@
 <section class="container" data-page="transaction-list">
   <div class="card">
     <div class="card-body" data-async-listing="<%= @current_path %>">
-      <h1 class="card-title margin-bottom-0"><%= gettext "Validated Transactions" %></h1>
-      <p class="card-subtitle">
-        <%= gettext("Showing") %>
-        <span data-selector="transaction-count"><%= Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %></span>
-        <%= gettext("Validated Transactions") %>
-      </p>
+      <h1 class="card-title"><%= gettext "Validated Transactions" %></h1>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
@@ -43,7 +38,7 @@
 
       <div data-selector="transactions-list" data-items></div>
 
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true %>
 
       <!--
       <a href="#" data-next-page-button class="button button-secondary button-small float-right mt-4" style="display: none;">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
index bb7c0f42ab..42a89ea930 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
@@ -4,6 +4,15 @@
     <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Internal Transactions" %></h2>
+
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_internal_transaction_path(@conn, :index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
       <%= if Enum.count(@internal_transactions) > 0 do %>
         <%= for internal_transaction <- @internal_transactions do %>
           <%= render BlockScoutWeb.InternalTransactionView, "_tile.html", internal_transaction: internal_transaction %>
@@ -14,6 +23,15 @@
         </div>
       <% end %>
 
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_internal_transaction_path(@conn, :index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
+      <!--
       <%= if @next_page_params do %>
         <%= link(
           gettext("Newer"),
@@ -26,6 +44,7 @@
           )
         ) %>
       <% end %>
+      -->
     </div>
   </div>
 </section>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
index c34d108a29..b0e8260d4e 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
@@ -6,6 +6,15 @@
 
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Logs" %></h2>
+
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_log_path(@conn,:index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
       <%= if Enum.count(@logs) > 0 do %>
         <%= for log <- @logs do %>
           <div data-test="transaction_log" class="tile tile-muted">
@@ -139,6 +148,15 @@
       </div>
       <% end %>
 
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_log_path(@conn,:index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
+      <!--
       <%= if @next_page_params do %>
         <%= link(
           gettext("Newer"),
@@ -151,6 +169,7 @@
           )
         ) %>
       <% end %>
+      -->
     </div>
   </div>
 </section>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_raw_trace/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_raw_trace/index.html.eex
index 2695dea13b..0d973adf5d 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_raw_trace/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_raw_trace/index.html.eex
@@ -2,16 +2,15 @@
   <%= render BlockScoutWeb.TransactionView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Raw Trace" %></h2>
       <%= if Enum.count(@internal_transactions) > 0 do %>
         <pre class="pre-scrollable line-numbers" data-activate-highlight><code class="json "><%= for {line, number} <- raw_traces_with_lines(@internal_transactions) do %><div data-line-number="<%= number %>"><%= line %></div><% end %></code></pre>
       <% else %>
-        No trace entries found.
+        <div class="tile tile-muted text-center">
+          <span>No trace entries found.</span>
+        </div>
       <% end %>
     </div>
   </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
index 74cb6cb4fd..45da95e2b5 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
@@ -5,6 +5,15 @@
     <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
+
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_token_transfer_path(@conn, :index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
       <%= if Enum.any?(@token_transfers) do %>
         <%= for token_transfer <- @token_transfers do %>
           <%= render "_token_transfer.html", token_transfer: token_transfer, conn: @conn %>
@@ -14,18 +23,29 @@
           <span><%= gettext "There are no token transfers for this transaction." %></span>
         </div>
       <% end %>
+
+      <%= if @next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, next_page_path: transaction_token_transfer_path(@conn, :index, @transaction, @next_page_params) %>
+      <% end %>
+
+      <%= if !@next_page_params do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
+      <% end %>
+
+      <!--
+      <%= if @next_page_params do %>
+        <%= link(
+          gettext("Older"),
+          class: "button button-secondary button-sm u-float-left mt-3",
+          to: transaction_token_transfer_path(
+            @conn,
+            :index,
+            @transaction,
+            @next_page_params
+          )
+        ) %>
+      <% end %>
+      -->
     </div>
   </div>
-  <%= if @next_page_params do %>
-    <%= link(
-      gettext("Older"),
-      class: "button button-secondary button-sm u-float-left mt-3",
-      to: transaction_token_transfer_path(
-        @conn,
-        :index,
-        @transaction,
-        @next_page_params
-      )
-    ) %>
-  <% end %>
 </section>