make token inventory async

apps/block_scout_web/lib/block_scout_web/controllers/tokens/inventory_controller.ex

@@ -1,12 +1,14 @@
 defmodule BlockScoutWeb.Tokens.InventoryController do
   use BlockScoutWeb, :controller
 
+  alias BlockScoutWeb.Tokens.InventoryView
   alias Explorer.{Chain, Market}
   alias Explorer.Chain.TokenTransfer
+  alias Phoenix.View
 
   import BlockScoutWeb.Chain, only: [split_list_by_page: 1, default_paging_options: 0]
 
-  def index(conn, %{"token_id" => address_hash_string} = params) do
+  def index(conn, %{"token_id" => address_hash_string, "type" => "JSON"} = params) do
     with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
          {:ok, token} <- Chain.token_from_address_hash(address_hash) do
       unique_tokens =
@@ -17,14 +19,56 @@ defmodule BlockScoutWeb.Tokens.InventoryController do
 
       {unique_tokens_paginated, next_page} = split_list_by_page(unique_tokens)
 
+      next_page_path =
+        case unique_tokens_next_page(next_page, unique_tokens_paginated, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            token_inventory_path(
+              conn,
+              :index,
+              address_hash_string,
+              Map.delete(next_page_params, "type")
+            )
+        end
+
+      items =
+        unique_tokens_paginated
+        |> Enum.map(fn token_transfer ->
+          View.render_to_string(
+            InventoryView,
+            "_token.html",
+            token_transfer: token_transfer
+          )
+        end)
+
+      json(
+        conn,
+        %{
+          items: items,
+          next_page_path: next_page_path
+        }
+      )
+    else
+      :error ->
+        not_found(conn)
+
+      {:error, :not_found} ->
+        not_found(conn)
+    end
+  end
+
+  def index(conn, %{"token_id" => address_hash_string}) do
+    with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
+         {:ok, token} <- Chain.token_from_address_hash(address_hash) do
       render(
         conn,
         "index.html",
+        current_path: current_path(conn),
         token: Market.add_price(token),
-        unique_tokens: unique_tokens_paginated,
         total_token_transfers: Chain.count_token_transfers_from_token_hash(address_hash),
-        total_token_holders: token.holder_count || Chain.count_token_holders_from_token_hash(address_hash),
-        next_page_params: unique_tokens_next_page(next_page, unique_tokens_paginated, params)
+        total_token_holders: token.holder_count || Chain.count_token_holders_from_token_hash(address_hash)
       )
     else
       :error ->

apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex

@@ -12,28 +12,25 @@
     <div class="card">
       <%= render OverviewView, "_tabs.html", assigns %>
 
-      <div class="card-body">
+    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
       <h2 class="card-title"><%= gettext "Inventory" %></h2>
 
-        <%= if Enum.any?(@unique_tokens) do %>
-          <%= for token_transfer <- @unique_tokens do %>
-            <%= render "_token.html", token_transfer: token_transfer %>
-          <% end %>
-        <% else %>
-          <div class="tile tile-muted text-center">
-            <span data-selector="empty-transactions-list">
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_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 style="display: none;">
+          <div class="tile tile-muted text-center" data-selector="empty-token-list">
             <%= gettext "There are no tokens." %>
-            </span>
           </div>
-        <% end %>
+        </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, data_prev_page_button: true %>
 
-        <%= if @next_page_params do %>
-          <%= link(
-            gettext("Next Page"),
-            class: "button button-secondary button-small float-right mt-4",
-            to: token_inventory_path(@conn, :index, @token.contract_address_hash, @next_page_params)
-          ) %>
-        <% end %>
       </div>
     </div>
   </section>

apps/block_scout_web/priv/gettext/default.pot

@@ -567,11 +567,6 @@ msgstr ""
 msgid "New Smart Contract"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:32
-msgid "Next Page"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract_verification/new.html.eex:40
 msgid "No"
@@ -751,7 +746,7 @@ msgid "There are no tokens for this address."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:25
+#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:26
 msgid "There are no tokens."
 msgstr ""
 
@@ -1231,6 +1226,7 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:91
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:19
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:21
+#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:21
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:20
 #: lib/block_scout_web/templates/transaction/index.html.eex:20
 #: lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex:11

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -567,11 +567,6 @@ msgstr ""
 msgid "New Smart Contract"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:32
-msgid "Next Page"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract_verification/new.html.eex:40
 msgid "No"
@@ -751,7 +746,7 @@ msgid "There are no tokens for this address."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:25
+#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:26
 msgid "There are no tokens."
 msgstr ""
 
@@ -1231,6 +1226,7 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:91
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:19
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:21
+#: lib/block_scout_web/templates/tokens/inventory/index.html.eex:21
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:20
 #: lib/block_scout_web/templates/transaction/index.html.eex:20
 #: lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex:11

apps/block_scout_web/test/block_scout_web/controllers/tokens/inventory_controller_test.exs

@@ -62,13 +62,20 @@ defmodule BlockScoutWeb.Tokens.InventoryControllerTest do
 
       conn =
         get(conn, token_inventory_path(conn, :index, token.contract_address_hash), %{
-          "token_id" => "999"
+          "token_id" => "999",
+          "type" => "JSON"
         })
 
-      assert Enum.map(conn.assigns.unique_tokens, & &1.token_id) == Enum.map(second_page_token_balances, & &1.token_id)
+      conn = get(conn, token_inventory_path(conn, :index, token.contract_address_hash), %{type: "JSON"})
+
+      {:ok, %{"items" => items}} =
+        conn.resp_body
+        |> Poison.decode()
+
+      assert Enum.count(items) == Enum.count(second_page_token_balances)
     end
 
-    test "next_page_params exists if not on last page", %{conn: conn} do
+    test "next_page_path exists if not on last page", %{conn: conn} do
       token = insert(:token, type: "ERC-721")
 
       transaction =
@@ -87,17 +94,16 @@ defmodule BlockScoutWeb.Tokens.InventoryControllerTest do
         )
       )
 
-      expected_next_page_params = %{
-        "token_id" => to_string(token.contract_address_hash),
-        "unique_token" => 1050
-      }
+      conn = get(conn, token_inventory_path(conn, :index, token.contract_address_hash), %{type: "JSON"})
 
-      conn = get(conn, token_inventory_path(conn, :index, token.contract_address_hash))
+      {:ok, %{"next_page_path" => next_page_path}} =
+        conn.resp_body
+        |> Poison.decode()
 
-      assert conn.assigns.next_page_params == expected_next_page_params
+      assert next_page_path
     end
 
-    test "next_page_params are empty if on last page", %{conn: conn} do
+    test "next_page_path is empty if on last page", %{conn: conn} do
       token = insert(:token, type: "ERC-721")
 
       transaction =
@@ -113,9 +119,13 @@ defmodule BlockScoutWeb.Tokens.InventoryControllerTest do
         token_id: 1000
       )
 
-      conn = get(conn, token_inventory_path(conn, :index, token.contract_address_hash))
+      conn = get(conn, token_inventory_path(conn, :index, token.contract_address_hash), %{type: "JSON"})
+
+      {:ok, %{"next_page_path" => next_page_path}} =
+        conn.resp_body
+        |> Poison.decode()
 
-      refute conn.assigns.next_page_params
+      refute next_page_path
     end
   end
 end