add image instance

apps/block_scout_web/assets/css/app.scss

@@ -114,6 +114,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/radio_big";
 @import "components/btn_no_border";
 @import "components/custom_tooltips_block_details";
+@import "components/_erc721_token_image_container";
 
 @import "theme/dark-theme";
 

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

@@ -0,0 +1,10 @@
+/* ERC721 image block */
+.erc721-image {
+    display: flex;
+    justify-content: center;
+}
+
+ .erc721-image img {
+    height: 200px;
+}
+/* ERC721 image block end */

apps/block_scout_web/lib/block_scout_web/csp_header.ex

@@ -15,7 +15,7 @@ defmodule BlockScoutWeb.CSPHeader do
         default-src 'self';\
         script-src 'self' 'unsafe-inline' 'unsafe-eval';\
         style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\
-        img-src 'self' 'unsafe-inline' 'unsafe-eval' data:;\
+        img-src 'self' 'unsafe-inline' 'unsafe-eval' data: https:;\
         font-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.gstatic.com data:;\
       "
     })

apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex

@@ -67,34 +67,16 @@
       </div>
     </div>
 
-    <%= if total_supply?(@token) do %>
+    <div class="card-section col-md-12 col-lg-4 pl-0-md">
-      <div class="card-section col-md-12 col-lg-4 pl-0-md">
+      <div class="card card-background-1">
-        <div class="card card-background-1">
+        <div class="card-body">
-          <div class="card-body">
+          <div class="erc721-image" >
-            <h2 class="card-title balance-card-title"><%= gettext "Total Supply" %></h2>
+            <img src=<%=image_src(@token_instance.instance)%> />
-            <div class="text-right">
-              <h3 class="text-uppercase">
-                <%= if decimals?(@token) do %>
-                  <%= format_according_to_decimals(@token.total_supply, @token.decimals) %>
-                <% else %>
-                  <%= format_integer_to_currency(@token.total_supply) %>
-                <% end %> <%= @token.symbol %>
-              </h3>
-              <%= if @token.usd_value do %>
-                <div class="text-uppercase">
-                  <span data-selector="token-supply-usd" data-usd-value="<%= total_supply_usd(@token) %>"></span>
-                  |
-                  <span data-selector="token-price" data-token-usd-value="<%= @token.usd_value %>"></span>
-                </div>
-              <% else %>
-                <br />
-              <% end %>
-            </div>
           </div>
         </div>
       </div>
     </div>
-  <% end %>
+  </div>
 </section>
 <!-- Modal -->
 <div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">

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

@@ -5,6 +5,7 @@
     token: @token,
     total_token_transfers: @total_token_transfers,
     token_id: @token_instance.token_id,
+    token_instance: @token_instance,
     conn: @conn
   ) %>
 

apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex

@@ -15,6 +15,16 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
   def total_supply?(%Token{total_supply: nil}), do: false
   def total_supply?(%Token{total_supply: _}), do: true
 
+  def image_src(nil), do: "/images/ether1_logo.svg"
+
+  def image_src(instance) do
+    if instance.metadata && instance.metadata["image"] do
+      instance.metadata["image"]
+    else
+      image_src(nil)
+    end
+  end
+
   def total_supply_usd(token) do
     tokens = CurrencyHelpers.divide_decimals(token.total_supply, token.decimals)
     price = token.usd_value

apps/explorer/lib/explorer/chain.ex

@@ -3086,6 +3086,7 @@ defmodule Explorer.Chain do
       from(tt in TokenTransfer,
         where: tt.token_contract_address_hash == ^token_contract_address and tt.token_id == ^token_id,
         order_by: [desc: tt.block_number],
+        preload: [:instance],
         limit: 1
       )
 

apps/explorer/lib/explorer/chain/token_transfer.ex

@@ -28,6 +28,7 @@ defmodule Explorer.Chain.TokenTransfer do
   import Ecto.Query, only: [from: 2, limit: 2, where: 3]
 
   alias Explorer.Chain.{Address, Hash, TokenTransfer, Transaction}
+  alias Explorer.Chain.Token.Instance
   alias Explorer.{PagingOptions, Repo}
 
   @default_paging_options %PagingOptions{page_size: 50}
@@ -92,6 +93,13 @@ defmodule Explorer.Chain.TokenTransfer do
       type: Hash.Full
     )
 
+    has_one(
+      :instance,
+      Instance,
+      foreign_key: :token_contract_address_hash,
+      references: :token_contract_address_hash
+    )
+
     has_one(:token, through: [:token_contract_address, :token])
 
     timestamps()