add transaction token transfer tab async

apps/block_scout_web/lib/block_scout_web/controllers/transaction_token_transfer_controller.ex

@@ -3,11 +3,12 @@ defmodule BlockScoutWeb.TransactionTokenTransferController do
 
   import BlockScoutWeb.Chain, only: [paging_options: 1, next_page_params: 3, split_list_by_page: 1]
 
-  alias BlockScoutWeb.TransactionView
+  alias BlockScoutWeb.{TransactionTokenTransferView, TransactionView}
   alias Explorer.{Chain, Market}
   alias Explorer.ExchangeRates.Token
+  alias Phoenix.View
 
-  def index(conn, %{"transaction_id" => hash_string} = params) do
+  def index(conn, %{"transaction_id" => hash_string, "type" => "JSON"} = params) do
     with {:ok, hash} <- Chain.string_to_transaction_hash(hash_string),
          {:ok, transaction} <-
            Chain.hash_to_transaction(
@@ -37,13 +38,68 @@ defmodule BlockScoutWeb.TransactionTokenTransferController do
 
       {token_transfers, next_page} = split_list_by_page(token_transfers_plus_one)
 
+      next_page_url =
+        case next_page_params(next_page, token_transfers, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            transaction_token_transfer_path(conn, :index, transaction, Map.delete(next_page_params, "type"))
+        end
+
+      items =
+        token_transfers
+        |> Enum.map(fn transfer ->
+          View.render_to_string(
+            TransactionTokenTransferView,
+            "_token_transfer.html",
+            token_transfer: transfer,
+            conn: conn
+          )
+        end)
+
+      json(
+        conn,
+        %{
+          items: items,
+          next_page_path: next_page_url
+        }
+      )
+    else
+      :error ->
+        conn
+        |> put_status(422)
+        |> put_view(TransactionView)
+        |> render("invalid.html", transaction_hash: hash_string)
+
+      {:error, :not_found} ->
+        conn
+        |> put_status(404)
+        |> put_view(TransactionView)
+        |> render("not_found.html", transaction_hash: hash_string)
+    end
+  end
+
+  def index(conn, %{"transaction_id" => hash_string}) do
+    with {:ok, hash} <- Chain.string_to_transaction_hash(hash_string),
+         {:ok, transaction} <-
+           Chain.hash_to_transaction(
+             hash,
+             necessity_by_association: %{
+               :block => :optional,
+               [created_contract_address: :names] => :optional,
+               [from_address: :names] => :optional,
+               [to_address: :names] => :optional,
+               [to_address: :smart_contract] => :optional,
+               :token_transfers => :optional
+             }
+           ) do
       render(
         conn,
         "index.html",
         exchange_rate: Market.get_exchange_rate(Explorer.coin()) || Token.null(),
         block_height: Chain.block_height(),
-        next_page_params: next_page_params(next_page, token_transfers, params),
-        token_transfers: token_transfers,
+        current_path: current_path(conn),
         show_token_transfers: true,
         transaction: transaction
       )

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

@@ -3,34 +3,24 @@
 
   <div class="card">
     <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
-    <div class="card-body">
+    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
       <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 %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <%= if !@next_page_params do %>
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
-      <% end %>
+        <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>
 
-      <%= if Enum.any?(@token_transfers) do %>
-        <%= for token_transfer <- @token_transfers do %>
-          <%= render "_token_transfer.html", token_transfer: token_transfer, conn: @conn %>
-        <% end %>
-      <% else %>
-        <div class="tile tile-muted text-center">
-          <span><%= gettext "There are no token transfers for this transaction." %></span>
+        <div data-empty-response-message style="display: none;">
+          <div class="tile tile-muted text-center" data-selector="empty-logs-list">
+            <%= gettext "There are no token transfers for this transaction" %>
+          </div>
         </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 %>
+        <div data-items></div>
 
-      <%= if !@next_page_params do %>
-      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true %>
-      <% end %>
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
     </div>
   </div>