Add separate column for token icons

CHANGELOG.md

@@ -31,6 +31,7 @@
 - [#5014](https://github.com/blockscout/blockscout/pull/5014) - Separate FIRST_BLOCK and TRACE_FIRST_BLOCK option for blocks import and tracing methods
 - [#4998](https://github.com/blockscout/blockscout/pull/4998) - API endpoints logger
 - [#4983](https://github.com/blockscout/blockscout/pull/4983), [#5038](https://github.com/blockscout/blockscout/pull/5038) - Fix contract verification tests
+- [#4861](https://github.com/blockscout/blockscout/pull/4861) - Add separate column for token icons
 
 
 ## 4.0.0-beta

apps/block_scout_web/assets/css/components/_table.scss

@@ -24,3 +24,7 @@
 .address-cell {
   width: 150px;
 }
+
+.token-icon {
+  padding-right: 5px;
+}

apps/block_scout_web/lib/block_scout_web/templates/address_token/_tokens.html.eex

@@ -1,13 +1,7 @@
 <tr data-identifier-hash="<%= @token.contract_address_hash %>">
   <td class="stakes-td">
-      <!-- incremented number by order in the list -->
-      <span class="color-lighten">
-      </span>
   </td>
-  <td class="stakes-td">
-    <span
-        class="token-icon mr-1"
-    >
+  <td>
     <%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %>
       <% chain_id_for_token_icon = if @bridged_token && @bridged_token.foreign_chain_id, do: @bridged_token.foreign_chain_id |> Decimal.to_integer() |> to_string(), else: System.get_env("CHAIN_ID") %>
       <% address_hash = if @bridged_token && @bridged_token.foreign_token_contract_address_hash, do: @bridged_token.foreign_token_contract_address_hash, else: @token.contract_address_hash %>
@@ -18,7 +12,8 @@
         address: Address.checksum(address_hash)
       %>
     <% end %>
-    </span>
+  </td>
+  <td class="stakes-td">
     <%= link(
           to: address_token_transfers_path(@conn, :index, to_string(@address.hash), to_string(@token.contract_address_hash)),
           class: "tile-title-lg",

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

@@ -24,6 +24,9 @@
                         <th class="stakes-table-th">
                             <div class="stakes-table-th-content">&nbsp;</div>
                         </th>
+                        <th class="stakes-table-th">
+                            <div>&nbsp;</div>
+                        </th>
                         <th class="stakes-table-th">
                             <div class="stakes-table-th-content">Asset</div>
                         </th>
@@ -48,7 +51,7 @@
                     </tr>
                 </thead>
                 <tbody data-items data-selector="address-tokens-list">
-                    <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 8 %>
+                    <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 9 %>
                 </tbody>
             </table>
         </div>

apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_tokens.html.eex

@@ -1,5 +1,5 @@
 <div data-token-type="<%= @type %>">
-  <h6 class="dropdown-header">
+  <h6 class="dropdown-header" style="margin-left: 5px;">
     <%= @type %> (<span data-number-of-tokens-by-type="<%= @type %>"><%= Enum.count(@token_balances)%></span>)
   </h6>
 
@@ -21,19 +21,30 @@
             class: "dropdown-item"
           ) do %>
         <div class="row">
-          <p class="mb-0 col-md-6"><%= token_name(token) %>
+          <%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %>
+            <% chain_id_for_token_icon = if bridged_token && bridged_token.foreign_chain_id, do: bridged_token.foreign_chain_id |> Decimal.to_integer() |> to_string(), else: System.get_env("CHAIN_ID") %>
+            <% address_hash = if bridged_token && bridged_token.foreign_token_contract_address_hash, do: bridged_token.foreign_token_contract_address_hash, else: token.contract_address_hash %>
+            <%=
+              render BlockScoutWeb.TokensView,
+              "_token_icon.html",
+              chain_id: chain_id_for_token_icon,
+              address: Address.checksum(address_hash),
+              style: "height: fit-content; margin-right: 5px; margin-top: -1px;"
+            %>
+          <% end %>
+          <p class="mb-0 col-md-6" style="padding-left: 0; padding-right: 0;"><%= token_name(token) %>
           <%= if bridged_token && bridged_token.custom_metadata do %>
             <%= "(" <> bridged_token.custom_metadata <> ")" %>
           <% end %>
           </p>
           <%= if bridged_token && bridged_token.lp_token && bridged_token.custom_cap do %>
             <% lp_token_balance_usd = token_balance.value |> Decimal.div(token.total_supply) |> Decimal.mult(bridged_token.custom_cap) |> Decimal.round(4) %>
-            <p class="mb-0 col-md-6 text-right">
+            <p class="mb-0 col-md-6 text-right" style="padding-left: 5px; max-width: 40%;">
               <span data-selector="token-balance-usd" data-usd-value="<%= lp_token_balance_usd %>"></span>
             </p>
           <% else %>
             <%= if token_balance.token.usd_value do %>
-              <p class="mb-0 col-md-6 text-right">
+              <p class="mb-0 col-md-6 text-right" style="padding-left: 5px; max-width: 40%;">
                 <span data-selector="token-balance-usd" data-usd-value="<%= Chain.balance_in_usd(token_balance) %>"></span>
               </p>
             <% end %>
@@ -41,7 +52,7 @@
         </div>
         <div class="row">
           <% col_md = if token_balance.token.usd_value, do: "col-md-6", else: "col-md-12" %>
-          <p class="mb-0 <%= col_md %> ">
+          <p class="mb-0 <%= col_md %> " style="margin-left: 5px;" >
             <%= if token_balance.token_type == "ERC-721" && !is_nil(token_balance.token_id) do %>
               1
             <% else %>
@@ -52,7 +63,7 @@
             <% end %>
           </p>
           <%= if token_balance.token.usd_value do %>
-            <p class="mb-0 col-md-6 text-right text-muted">
+            <p class="mb-0 col-md-6 text-right text-muted" style="max-width: 40%; padding-right: 0;">
               <span data-selector="token-price" data-token-usd-value="<%= token_balance.token.usd_value %>"></span>
             </p>
           <% end %>

apps/block_scout_web/lib/block_scout_web/templates/bridged_tokens/_tile.html.eex

@@ -5,11 +5,7 @@
         <%= @index %>
       </span>
   </td>
-  <td class="stakes-td token-name">
-    <% token = token_display_name(@token) %>
-    <div class="centered-container">
-      <div>
-        <div style="display: table;">
+  <td clas="token-icon">
     <%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %>
     <% foreign_chain_id = if Map.has_key?(@bridged_token, :foreign_chain_id), do: @bridged_token.foreign_chain_id, else: nil %>
     <% chain_id_for_token_icon = if foreign_chain_id, do: foreign_chain_id |> Decimal.to_integer() |> to_string(), else: System.get_env("CHAIN_ID") %>
@@ -22,6 +18,12 @@
       address: token_hash_for_token_icon
     %>
     <% end %>
+  </td>
+  <td class="stakes-td token-name">
+    <% token = token_display_name(@token) %>
+    <div class="centered-container">
+      <div>
+        <div style="display: table;">
           <%= link(token,
             to: token_path(BlockScoutWeb.Endpoint, :show, @token.contract_address_hash),
             "data-test": "token_link",

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

@@ -23,6 +23,9 @@
 	    <tr>
 	      <th class="stakes-table-th">
 			<div class="stakes-table-th-content">&nbsp;</div>
+	      </th>
+		  <th class="stakes-table-th">
+			<div>&nbsp;</div>
 	      </th>
 	      <th class="stakes-table-th">
 			<div class="stakes-table-th-content">Token</div>
@@ -51,9 +54,9 @@
 	  </thead>
 	  <tbody data-items data-selector="top-bridged-tokens-list">
 	    <%= if @destination == :eth do %>
-	    	<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 6 %>
+	    	<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 7 %>
 		<% else %>
-			<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 5 %>
+			<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 6 %>
 		<% end %>
 	  </tbody>
 	</table>

apps/block_scout_web/lib/block_scout_web/templates/search/_tile.html.eex

@@ -5,9 +5,9 @@
       <span class="color-lighten">
       </span>
   </td>
-  <td class="stakes-td">
-    <%= case @result.type do %>
+<%= case @result.type do %>
     <% "token" -> %>
+        <td class="token-icon">
             <span
                 class="token-icon mr-1"
                 data-address-hash="<%= address_hash_checksummed %>"
@@ -23,29 +23,35 @@
                 %>
             <% end %>
             </span>
+        </td>
+        <td class="stakes-td">
             <% res = @result.name <> " (" <> @result.symbol <> ")" %>
             <a href="<%= token_path(@conn, :show, address_hash_checksummed) %>">
                 <%= highlight_search_result(res, @query) %>
             </a>
     <% "address" -> %>
+        <td class="stakes-td">
             <%= if @result.name do %>
                 <a href="<%= address_path(@conn, :show, address_hash_checksummed) %>">
                     <%= highlight_search_result(@result.name, @query) %>
                 </a>
             <% end %>
     <% "contract" -> %>
+        <td class="stakes-td">
             <%= if @result.name do %>
                 <a href="<%= address_path(@conn, :show, address_hash_checksummed) %>">
                     <%= highlight_search_result(@result.name, @query) %>
                 </a>
             <% end %>
     <% "block" -> %>
+        <td class="stakes-td">
             <%= link(
                 highlight_search_result(to_string(@result.block_number), @query),
                 to: block_path(@conn, :show, @result.block_number)
             ) %>
     <% _ -> %>
-    <% end %>
+        <td class="stakes-td">
+<% end %>
   </td>
   <td class="stakes-td">
     <%= case @result.type do %>

apps/block_scout_web/lib/block_scout_web/templates/search/results.html.eex

@@ -24,6 +24,9 @@
                             <th class="stakes-table-th">
                                 <div class="stakes-table-th-content">&nbsp;</div>
                             </th>
+                            <th class="stakes-table-th">
+			                    <div>&nbsp;</div>
+		                    </th>
                             <th class="stakes-table-th">
                                 <div class="stakes-table-th-content">Search Result</div>
                             </th>
@@ -36,7 +39,7 @@
                         </tr>
                     </thead>
                     <tbody data-items data-selector="search-results-list">
-                        <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 4 %>
+                        <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 5 %>
                     </tbody>
                 </table>
             </div>

apps/block_scout_web/lib/block_scout_web/templates/tokens/_tile.html.eex

@@ -5,7 +5,7 @@
         <%= @index %>
       </span>
   </td>
-  <td class="stakes-td">
+  <td class="token-icon">
     <%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %>
       <% chain_id_for_token_icon = System.get_env("CHAIN_ID") %>
       <% foreign_token_contract_address_hash = nil %>
@@ -16,6 +16,8 @@
         chain_id: chain_id_for_token_icon,
         address: token_hash_for_token_icon
       %>
+  </td>
+  <td class="stakes-td">
     <% end %>
     <% token = token_display_name(@token) %>
     <%= link(token,

apps/block_scout_web/lib/block_scout_web/templates/tokens/_token_icon.html.eex

@@ -1,2 +1,2 @@
 <% token_icon_url = Explorer.Chain.get_token_icon_url_by(@chain_id, @address) %>
-<img heigth=15 width=15 src="<%= token_icon_url %>" style="margin-top: -2px; min-height: 15px; min-width: 15px;" alt=""/>
+<img heigth=15 width=15 src="<%= token_icon_url %>" style="margin-top: -2px; min-height: 15px; min-width: 15px; <%= if assigns[:style], do: @style %>"  alt=""/>

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

@@ -24,6 +24,9 @@
 	      <th class="stakes-table-th">
 			<div class="stakes-table-th-content">&nbsp;</div>
 	      </th>
+		  <th class="stakes-table-th">
+			<div>&nbsp;</div>
+		  </th>
 	      <th class="stakes-table-th">
 			<div class="stakes-table-th-content">Token</div>
 	      </th>
@@ -43,7 +46,7 @@
 	    </tr>
 	  </thead>
 	  <tbody data-items data-selector="top-tokens-list">
-	    <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 5 %>
+	    <%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html", columns_num: 6 %>
 	  </tbody>
 	</table>
       </div>

apps/block_scout_web/lib/block_scout_web/views/address_token_balance_view.ex

@@ -3,6 +3,7 @@ defmodule BlockScoutWeb.AddressTokenBalanceView do
 
   alias BlockScoutWeb.AccessHelpers
   alias Explorer.Chain
+  alias Explorer.Chain.Address
   alias Explorer.Counters.AddressTokenUsdSum
 
   def tokens_count_title(token_balances) do

apps/block_scout_web/priv/gettext/default.pot

@@ -6,7 +6,7 @@ msgstr[0] ""
 msgstr[1] ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_token_balance_view.ex:9
+#: lib/block_scout_web/views/address_token_balance_view.ex:10
 msgid "%{count} token"
 msgid_plural "%{count} tokens"
 msgstr[0] ""
@@ -2088,7 +2088,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:30
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:50 lib/block_scout_web/templates/address_logs/index.html.eex:23
-#: lib/block_scout_web/templates/address_token/index.html.eex:57 lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
+#: lib/block_scout_web/templates/address_token/index.html.eex:60 lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:50 lib/block_scout_web/templates/address_validation/index.html.eex:20
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:22 lib/block_scout_web/templates/chain/show.html.eex:180
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:18 lib/block_scout_web/templates/stakes/_table.html.eex:49
@@ -2400,7 +2400,7 @@ msgid "There are no token transfers for this transaction"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:62
+#: lib/block_scout_web/templates/address_token/index.html.eex:65
 msgid "There are no tokens for this address."
 msgstr ""
 

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

@@ -6,7 +6,7 @@ msgstr[0] ""
 msgstr[1] ""
 
 #, elixir-format
-#: lib/block_scout_web/views/address_token_balance_view.ex:9
+#: lib/block_scout_web/views/address_token_balance_view.ex:10
 msgid "%{count} token"
 msgid_plural "%{count} tokens"
 msgstr[0] ""
@@ -2088,7 +2088,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:30
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:50 lib/block_scout_web/templates/address_logs/index.html.eex:23
-#: lib/block_scout_web/templates/address_token/index.html.eex:57 lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
+#: lib/block_scout_web/templates/address_token/index.html.eex:60 lib/block_scout_web/templates/address_token_transfer/index.html.eex:58
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:50 lib/block_scout_web/templates/address_validation/index.html.eex:20
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:22 lib/block_scout_web/templates/chain/show.html.eex:180
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:18 lib/block_scout_web/templates/stakes/_table.html.eex:49
@@ -2400,7 +2400,7 @@ msgid "There are no token transfers for this transaction"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:62
+#: lib/block_scout_web/templates/address_token/index.html.eex:65
 msgid "There are no tokens for this address."
 msgstr ""