Add separate column for token icons

pull/4861/head
nikitosing 3 years ago committed by Viktor Baranov
parent cdcba15072
commit d23e9ab13e
  1. 1
      CHANGELOG.md
  2. 4
      apps/block_scout_web/assets/css/components/_table.scss
  3. 11
      apps/block_scout_web/lib/block_scout_web/templates/address_token/_tokens.html.eex
  4. 5
      apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
  5. 23
      apps/block_scout_web/lib/block_scout_web/templates/address_token_balance/_tokens.html.eex
  6. 12
      apps/block_scout_web/lib/block_scout_web/templates/bridged_tokens/_tile.html.eex
  7. 7
      apps/block_scout_web/lib/block_scout_web/templates/bridged_tokens/index.html.eex
  8. 12
      apps/block_scout_web/lib/block_scout_web/templates/search/_tile.html.eex
  9. 5
      apps/block_scout_web/lib/block_scout_web/templates/search/results.html.eex
  10. 4
      apps/block_scout_web/lib/block_scout_web/templates/tokens/_tile.html.eex
  11. 2
      apps/block_scout_web/lib/block_scout_web/templates/tokens/_token_icon.html.eex
  12. 5
      apps/block_scout_web/lib/block_scout_web/templates/tokens/index.html.eex
  13. 1
      apps/block_scout_web/lib/block_scout_web/views/address_token_balance_view.ex
  14. 6
      apps/block_scout_web/priv/gettext/default.pot
  15. 6
      apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@ -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 - [#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 - [#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 - [#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 ## 4.0.0-beta

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

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

@ -24,6 +24,9 @@
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">&nbsp;</div> <div class="stakes-table-th-content">&nbsp;</div>
</th> </th>
<th class="stakes-table-th">
<div>&nbsp;</div>
</th>
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">Asset</div> <div class="stakes-table-th-content">Asset</div>
</th> </th>
@ -48,7 +51,7 @@
</tr> </tr>
</thead> </thead>
<tbody data-items data-selector="address-tokens-list"> <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> </tbody>
</table> </table>
</div> </div>

@ -1,5 +1,5 @@
<div data-token-type="<%= @type %>"> <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>) <%= @type %> (<span data-number-of-tokens-by-type="<%= @type %>"><%= Enum.count(@token_balances)%></span>)
</h6> </h6>
@ -21,19 +21,30 @@
class: "dropdown-item" class: "dropdown-item"
) do %> ) do %>
<div class="row"> <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 %> <%= if bridged_token && bridged_token.custom_metadata do %>
<%= "(" <> bridged_token.custom_metadata <> ")" %> <%= "(" <> bridged_token.custom_metadata <> ")" %>
<% end %> <% end %>
</p> </p>
<%= if bridged_token && bridged_token.lp_token && bridged_token.custom_cap do %> <%= 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) %> <% 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> <span data-selector="token-balance-usd" data-usd-value="<%= lp_token_balance_usd %>"></span>
</p> </p>
<% else %> <% else %>
<%= if token_balance.token.usd_value do %> <%= 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> <span data-selector="token-balance-usd" data-usd-value="<%= Chain.balance_in_usd(token_balance) %>"></span>
</p> </p>
<% end %> <% end %>
@ -41,7 +52,7 @@
</div> </div>
<div class="row"> <div class="row">
<% col_md = if token_balance.token.usd_value, do: "col-md-6", else: "col-md-12" %> <% 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 %> <%= if token_balance.token_type == "ERC-721" && !is_nil(token_balance.token_id) do %>
1 1
<% else %> <% else %>
@ -52,7 +63,7 @@
<% end %> <% end %>
</p> </p>
<%= if token_balance.token.usd_value do %> <%= 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> <span data-selector="token-price" data-token-usd-value="<%= token_balance.token.usd_value %>"></span>
</p> </p>
<% end %> <% end %>

@ -5,11 +5,7 @@
<%= @index %> <%= @index %>
</span> </span>
</td> </td>
<td class="stakes-td token-name"> <td clas="token-icon">
<% token = token_display_name(@token) %>
<div class="centered-container">
<div>
<div style="display: table;">
<%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %> <%= 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 %> <% 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") %> <% 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 address: token_hash_for_token_icon
%> %>
<% end %> <% end %>
</td>
<td class="stakes-td token-name">
<% token = token_display_name(@token) %>
<div class="centered-container">
<div>
<div style="display: table;">
<%= link(token, <%= link(token,
to: token_path(BlockScoutWeb.Endpoint, :show, @token.contract_address_hash), to: token_path(BlockScoutWeb.Endpoint, :show, @token.contract_address_hash),
"data-test": "token_link", "data-test": "token_link",

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

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

@ -24,6 +24,9 @@
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">&nbsp;</div> <div class="stakes-table-th-content">&nbsp;</div>
</th> </th>
<th class="stakes-table-th">
<div>&nbsp;</div>
</th>
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">Search Result</div> <div class="stakes-table-th-content">Search Result</div>
</th> </th>
@ -36,7 +39,7 @@
</tr> </tr>
</thead> </thead>
<tbody data-items data-selector="search-results-list"> <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> </tbody>
</table> </table>
</div> </div>

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

@ -1,2 +1,2 @@
<% token_icon_url = Explorer.Chain.get_token_icon_url_by(@chain_id, @address) %> <% 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=""/>

@ -24,6 +24,9 @@
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">&nbsp;</div> <div class="stakes-table-th-content">&nbsp;</div>
</th> </th>
<th class="stakes-table-th">
<div>&nbsp;</div>
</th>
<th class="stakes-table-th"> <th class="stakes-table-th">
<div class="stakes-table-th-content">Token</div> <div class="stakes-table-th-content">Token</div>
</th> </th>
@ -43,7 +46,7 @@
</tr> </tr>
</thead> </thead>
<tbody data-items data-selector="top-tokens-list"> <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> </tbody>
</table> </table>
</div> </div>

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

@ -6,7 +6,7 @@ msgstr[0] ""
msgstr[1] "" msgstr[1] ""
#, elixir-format #, 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 "%{count} token"
msgid_plural "%{count} tokens" msgid_plural "%{count} tokens"
msgstr[0] "" msgstr[0] ""
@ -2088,7 +2088,7 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:30 #: 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_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/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/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 #: 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 "" msgstr ""
#, elixir-format #, 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." msgid "There are no tokens for this address."
msgstr "" msgstr ""

@ -6,7 +6,7 @@ msgstr[0] ""
msgstr[1] "" msgstr[1] ""
#, elixir-format #, 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 "%{count} token"
msgid_plural "%{count} tokens" msgid_plural "%{count} tokens"
msgstr[0] "" msgstr[0] ""
@ -2088,7 +2088,7 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/address_coin_balance/index.html.eex:30 #: 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_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/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/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 #: 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 "" msgstr ""
#, elixir-format #, 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." msgid "There are no tokens for this address."
msgstr "" msgstr ""

Loading…
Cancel
Save