From cf1656f407713c370c359260d2f4cb28c9a96ee6 Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Tue, 3 Nov 2020 13:54:21 +0300
Subject: [PATCH] Fix long NFT id

---
 CHANGELOG.md                                  |  1 +
 .../assets/css/components/_tile.scss          |  4 +++
 .../assets/css/theme/_dai_variables.scss      | 16 ++++++++++-
 .../assets/css/theme/_dark-theme.scss         |  4 ++-
 .../tokens/transfer/_token_transfer.html.eex  |  9 +------
 .../transaction/_token_transfer.html.eex      | 10 ++-----
 .../transaction/_total_transfers.html.eex     |  8 ++++++
 .../templates/transaction/overview.html.eex   | 27 +++----------------
 .../_token_transfer.html.eex                  | 11 ++------
 .../lib/block_scout_web/views/address_view.ex | 14 ++++++++++
 .../block_scout_web/views/transaction_view.ex |  2 +-
 apps/block_scout_web/priv/gettext/default.pot | 16 +++++------
 .../priv/gettext/en/LC_MESSAGES/default.po    | 16 +++++------
 13 files changed, 70 insertions(+), 68 deletions(-)
 create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/transaction/_total_transfers.html.eex

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b07f4f9b3..cd0c50688a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 
 ### Fixes
+- [#3424](https://github.com/poanetwork/blockscout/pull/3424) - Fix display of long NFT IDs
 - [#3422](https://github.com/poanetwork/blockscout/pull/3422) - Fix contract reader: tuple type
 - [#3408](https://github.com/poanetwork/blockscout/pull/3408) - Fix (total) difficulty display
 - [#3401](https://github.com/poanetwork/blockscout/pull/3401) - Fix procedure of marking internal transactions as failed
diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss
index 79441d0722..4a1457bb71 100644
--- a/apps/block_scout_web/assets/css/components/_tile.scss
+++ b/apps/block_scout_web/assets/css/components/_tile.scss
@@ -171,6 +171,10 @@ $tile-body-a-color: #5959d8 !default;
     color: $tile-body-a-color;
   }
 
+  a[data-test=token_link] {
+    color: $tile-body-a-color;
+  }
+
   .tile-body {
     a {
       color: $tile-body-a-color;
diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss
index 373323eaca..c2f17ed90c 100644
--- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss
@@ -48,6 +48,7 @@ $btn-contract-color: $secondary;
 $tile-body-a-color: $secondary;
 $tile-type-block-color: $secondary;
 $tile-type-progress-bar-color: $secondary;
+.tile a:hover,
 a.tile-title { color: $secondary !important; }
 .card-body {  
 	a:not(.dropdown-item):not(.button):not([data-test=address_hash_link]):not(.alert-link):not([data-test=token_link]):not(#dropdown-tokens):not(.btn-line):not(.page-link) {
@@ -97,7 +98,10 @@ $dark-secondary: #93d7ff;
 $dark-primary-alternate: #15bba6;
 $dark-tertiary: #5a77ff;
 
-.dark-theme-applied .tile .tile-body a, .dark-theme-applied .tile span[data-address-hash] {
+.dark-theme-applied .tile .tile-body a,
+.dark-theme-applied .tile a:hover,
+.dark-theme-applied .tile span[data-address-hash],
+.dark-theme-applied .tile a[data-test=token_link] {
     color: $dark-tertiary!important;
 }
 
@@ -119,3 +123,13 @@ $dark-tertiary: #5a77ff;
 .dark-theme-applied .btn-line:hover {
     color: $additional-font!important;
 }
+
+.dark-theme-applied .card-body {  
+    a:not(.dropdown-item):not(.button):not([data-test=address_hash_link]):not(.alert-link):not([data-test=token_link]):not(#dropdown-tokens):not(.btn-line):not(.page-link) {
+        color: $dark-tertiary;
+
+        &:hover {
+            color: $dark-tertiary;
+        }
+    }
+}
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
index 0c36ac8f36..f3a06031a7 100644
--- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss
+++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -197,7 +197,9 @@ $dark-stakes-banned-background: #3e314c;
 		color: $labels-dark;
 	}
 	.tile .tile-body a,
-	.tile span[data-address-hash] { color: $dark-primary; }
+	.tile a:hover,
+	.tile span[data-address-hash],
+	.tile a[data-test=token_link] { color: $dark-primary; }
 	.fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
 		background-color: $dark-primary;
 	}
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex
index 3e6f3f973f..e1c9198b88 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex
@@ -39,14 +39,7 @@
       </span>
       <span class="d-flex flex-md-row flex-column mt-3 mt-md-0">
         <span class="tile-title">
-          <%= case token_transfer_amount(@token_transfer) do %>
-            <% {:ok, :erc721_instance} -> %>
-              <%= "TokenID ["%><%= link(@token_transfer.token_id, to: token_instance_path(@conn, :show, Address.checksum(@token_transfer.token.contract_address_hash), to_string(@token_transfer.token_id))) %><%= "]" %>
-            <% {:ok, value} -> %>
-              <%= value %>
-          <% end %>
-          <%= " "%>
-          <%= link(@token_transfer.token.symbol, to: token_path(BlockScoutWeb.Endpoint, :show, @token_transfer.token.contract_address_hash)) %>
+          <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, @token_transfer) %>
         </span>
       </span>
     </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_token_transfer.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_token_transfer.html.eex
index 1a5024d14d..465de1e753 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_token_transfer.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_token_transfer.html.eex
@@ -19,13 +19,7 @@
     <%= @token_transfer |> BlockScoutWeb.AddressView.address_partial_selector(:to, @address, true) |> BlockScoutWeb.RenderHelpers.render_partial() %>
     </span>
   </span>
-  <span class="col-xs-12 col-lg-4 ml-3 ml-sm-0 text-truncate">
-    <%= case token_transfer_amount(@token_transfer) do %>
-      <% {:ok, :erc721_instance} -> %>
-        <%= "TokenID ["%><%= link(@token_transfer.token_id, to: token_instance_path(BlockScoutWeb.Endpoint, :show,  @token_transfer.token.contract_address_hash, to_string(@token_transfer.token_id))) %><%= "] " %>
-      <% {:ok, value} -> %>
-        <%= "#{value} " %>
-    <% end %>
-    <%= link(token_symbol(@token_transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, @token_transfer.token.contract_address_hash)) %>
+  <span class="col-xs-12 col-lg-4 ml-3 ml-sm-0">
+    <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, @token_transfer) %>
   </span>
 </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_total_transfers.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_total_transfers.html.eex
new file mode 100644
index 0000000000..c0b0d09119
--- /dev/null
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_total_transfers.html.eex
@@ -0,0 +1,8 @@
+<%= case token_transfer_amount(@transfer) do %>
+    <% {:ok, :erc721_instance} -> %>
+        <%= "TokenID ["%><%= link(short_token_id(@transfer.token_id, 30), to: token_instance_path(BlockScoutWeb.Endpoint, :show, @transfer.token.contract_address_hash, to_string(@transfer.token_id)), "data-test": "token_link") %><%= "]" %>
+    <% {:ok, value} -> %>
+        <%= value %>
+<% end %>
+<%= " "%>
+<%= link(token_symbol(@transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, @transfer.token.contract_address_hash), "data-test": "token_link") %>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
index e3121fffa8..d06c85628f 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
@@ -221,14 +221,7 @@
               <div class="text-right">
               <%= for transfer  <- token_transfers do %>
                 <h3 class="address-balance-text">
-                  <%= case token_transfer_amount(transfer) do %>
-                    <% {:ok, :erc721_instance} -> %>
-                      <%= "TokenID ["%><%= link(transfer.token_id, to: token_instance_path(@conn, :show, transfer.token.contract_address_hash, to_string(transfer.token_id)), "data-test": "token_link") %><%= "]" %>
-                    <% {:ok, value} -> %>
-                      <%= value %>
-                  <% end %>
-                    <%= " "%>
-                    <%= link(token_symbol(transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, transfer.token.contract_address_hash), "data-test": "token_link") %>
+                  <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, transfer) %>
                 </h3>
               <% end %>
               </div>
@@ -239,14 +232,7 @@
               <div class="text-right">
               <%= for transfer  <- mintings do %>
                 <h3 class="address-balance-text">
-                  <%= case token_transfer_amount(transfer) do %>
-                    <% {:ok, :erc721_instance} -> %>
-                      <%= "TokenID ["%><%= link(transfer.token_id, to: token_instance_path(@conn, :show, transfer.token.contract_address_hash, to_string(transfer.token_id)), "data-test": "token_link") %><%= "]" %>
-                    <% {:ok, value} -> %>
-                      <%= value %>
-                  <% end %>
-                    <%= " "%>
-                    <%= link(token_symbol(transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, transfer.token.contract_address_hash), "data-test": "token_link") %>
+                  <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, transfer) %>
                 </h3>
               <% end %>
               </div>
@@ -257,14 +243,7 @@
               <div class="text-right">
               <%= for transfer  <- burnings do %>
                 <h3 class="address-balance-text">
-                  <%= case token_transfer_amount(transfer) do %>
-                    <% {:ok, :erc721_instance} -> %>
-                      <%= "TokenID ["%><%= link(transfer.token_id, to: token_instance_path(@conn, :show, transfer.token.contract_address_hash, to_string(transfer.token_id)), "data-test": "token_link") %><%= "]" %>
-                    <% {:ok, value} -> %>
-                      <%= value %>
-                  <% end %>
-                    <%= " "%>
-                    <%= link(token_symbol(transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, transfer.token.contract_address_hash), "data-test": "token_link") %>
+                  <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, transfer) %>
                 </h3>
               <% end %>
               </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex
index 353d3067bf..3bbbe6a419 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex
@@ -19,15 +19,8 @@
         <%= render BlockScoutWeb.AddressView, "_link.html", address: @token_transfer.to_address, contract: BlockScoutWeb.AddressView.contract?(@token_transfer.to_address), use_custom_tooltip: false %>
       </span>
 
-      <span class="tile-title text-truncate">
-        <%= case token_transfer_amount(@token_transfer) do%>
-          <% {:ok, :erc721_instance} -> %>
-            <%= "TokenID2 ["%><%= link(@token_transfer.token_id, to: token_instance_path(@conn, :show, @token_transfer.token.contract_address_hash, to_string(@token_transfer.token_id))) %><%= "]" %>
-          <% {:ok, value} -> %>
-            <%= value %>
-        <% end %>
-        <%= " "%>
-        <%= link(token_symbol(@token_transfer.token), to: token_path(BlockScoutWeb.Endpoint, :show, @token_transfer.token.contract_address_hash)) %>
+      <span class="tile-title">
+        <%= render BlockScoutWeb.TransactionView, "_total_transfers.html", Map.put(assigns, :transfer, @token_transfer) %>
       </span>
     </div>
   </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/views/address_view.ex b/apps/block_scout_web/lib/block_scout_web/views/address_view.ex
index c8508c592d..c5a09b0f3c 100644
--- a/apps/block_scout_web/lib/block_scout_web/views/address_view.ex
+++ b/apps/block_scout_web/lib/block_scout_web/views/address_view.ex
@@ -367,6 +367,20 @@ defmodule BlockScoutWeb.AddressView do
   end
 
   def short_contract_name(name, max_length) do
+    short_string(name, max_length)
+  end
+
+  def short_token_id(%Decimal{} = token_id, max_length) do
+    token_id
+    |> Decimal.to_string()
+    |> short_string(max_length)
+  end
+
+  def short_token_id(token_id, max_length) do
+    short_string(token_id, max_length)
+  end
+
+  def short_string(name, max_length) do
     part_length = Kernel.trunc(max_length / 4)
 
     if String.length(name) <= max_length,
diff --git a/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex b/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex
index a4a5177841..98ab0b7fd3 100644
--- a/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex
+++ b/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex
@@ -11,7 +11,7 @@ defmodule BlockScoutWeb.TransactionView do
   alias Timex.Duration
 
   import BlockScoutWeb.Gettext
-  import BlockScoutWeb.AddressView, only: [from_address_hash: 1]
+  import BlockScoutWeb.AddressView, only: [from_address_hash: 1, short_token_id: 2]
   import BlockScoutWeb.Tokens.Helpers
 
   @tabs ["token-transfers", "internal-transactions", "logs", "raw-trace"]
diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
index 8b5671d160..7dbd99ec79 100644
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/apps/block_scout_web/priv/gettext/default.pot
@@ -186,7 +186,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/block/_link.html.eex:2
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:28
-#: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:57
+#: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:50
 msgid "Block #%{number}"
 msgstr ""
 
@@ -641,7 +641,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:29
 #: lib/block_scout_web/templates/transaction/overview.html.eex:205
-#: lib/block_scout_web/templates/transaction/overview.html.eex:279
+#: lib/block_scout_web/templates/transaction/overview.html.eex:258
 #: lib/block_scout_web/views/wei_helpers.ex:78
 msgid "Ether"
 msgstr ""
@@ -998,7 +998,7 @@ msgid "License ID"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:307
+#: lib/block_scout_web/templates/transaction/overview.html.eex:286
 msgid "Limit"
 msgstr ""
 
@@ -1532,7 +1532,7 @@ msgid "Use the search box to find a hosted network, or select from the list of a
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:301
+#: lib/block_scout_web/templates/transaction/overview.html.eex:280
 msgid "Used"
 msgstr ""
 
@@ -1563,7 +1563,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/transaction/overview.html.eex:205
-#: lib/block_scout_web/templates/transaction/overview.html.eex:279
+#: lib/block_scout_web/templates/transaction/overview.html.eex:258
 msgid "Value"
 msgstr ""
 
@@ -1743,7 +1743,7 @@ msgid "Decimals"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:297
+#: lib/block_scout_web/templates/transaction/overview.html.eex:276
 msgid "Gas"
 msgstr ""
 
@@ -1874,7 +1874,7 @@ msgid "Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:256
+#: lib/block_scout_web/templates/transaction/overview.html.eex:242
 msgid " Token Burning"
 msgstr ""
 
@@ -1886,7 +1886,7 @@ msgid "Token Burning"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:238
+#: lib/block_scout_web/templates/transaction/overview.html.eex:231
 msgid " Token Minting"
 msgstr ""
 
diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
index 8b5671d160..7dbd99ec79 100644
--- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -186,7 +186,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/block/_link.html.eex:2
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:28
-#: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:57
+#: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:50
 msgid "Block #%{number}"
 msgstr ""
 
@@ -641,7 +641,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:29
 #: lib/block_scout_web/templates/transaction/overview.html.eex:205
-#: lib/block_scout_web/templates/transaction/overview.html.eex:279
+#: lib/block_scout_web/templates/transaction/overview.html.eex:258
 #: lib/block_scout_web/views/wei_helpers.ex:78
 msgid "Ether"
 msgstr ""
@@ -998,7 +998,7 @@ msgid "License ID"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:307
+#: lib/block_scout_web/templates/transaction/overview.html.eex:286
 msgid "Limit"
 msgstr ""
 
@@ -1532,7 +1532,7 @@ msgid "Use the search box to find a hosted network, or select from the list of a
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:301
+#: lib/block_scout_web/templates/transaction/overview.html.eex:280
 msgid "Used"
 msgstr ""
 
@@ -1563,7 +1563,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/transaction/overview.html.eex:205
-#: lib/block_scout_web/templates/transaction/overview.html.eex:279
+#: lib/block_scout_web/templates/transaction/overview.html.eex:258
 msgid "Value"
 msgstr ""
 
@@ -1743,7 +1743,7 @@ msgid "Decimals"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:297
+#: lib/block_scout_web/templates/transaction/overview.html.eex:276
 msgid "Gas"
 msgstr ""
 
@@ -1874,7 +1874,7 @@ msgid "Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:256
+#: lib/block_scout_web/templates/transaction/overview.html.eex:242
 msgid " Token Burning"
 msgstr ""
 
@@ -1886,7 +1886,7 @@ msgid "Token Burning"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:238
+#: lib/block_scout_web/templates/transaction/overview.html.eex:231
 msgid " Token Minting"
 msgstr ""