Improve token transfers in transactions tab on Address details page.

Resolves https://github.com/poanetwork/poa-explorer/issues/478

apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex

@@ -1,5 +1,5 @@
 <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in  tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
-  <div class="row justify-content-end">
+  <div class="row">
     <div class="col-md-3 col-lg-2 d-flex align-items-lg-center">
       <div class="d-flex flex-md-column ml-md-4">
         <span class="tile-label mr-1 mr-md-0">
@@ -10,8 +10,11 @@
         </span>
       </div>
     </div>
+
     <div class="col-md-9 col-lg-7 d-flex flex-column">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
+
+      <%= if Enum.empty?(@transaction.token_transfers) || transfered_value?(@transaction.value) do %>
         <span class="text-nowrap">
           <%= if @address.hash == @transaction.from_address_hash do %>
             <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address) %>
@@ -27,19 +30,20 @@
             <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
           <% end %>
         </span>
+
         <span>
-        <%= if transaction_from_or_to_current_address?(@transaction, @address.hash) do %>
+          <%= if @transaction.from_address_hash == @address.hash || @transaction.to_address_hash == @address.hash do %>
             <%= if @transaction.from_address_hash == @address.hash do %>
-            <span data-test="transaction_type" class="badge badge-danger tile-badge">
+              <span data-test="transaction_type" class="mr-1 badge badge-danger tile-badge">
                 <%= gettext "OUT" %>
               </span>
             <% else %>
-            <span data-test="transaction_type" class="badge badge-success tile-badge">
+              <span data-test="transaction_type" class="mr-1 badge badge-success tile-badge">
                 <%= gettext "IN" %>
               </span>
             <% end %>
           <% end %>
-        <span class="ml-1" data-from-now="<%= @transaction.block.timestamp %>"></span>
+          <span data-from-now="<%= @transaction.block.timestamp %>"></span>
           <span class="ml-1">
             <%= link(
               gettext("Block #%{number}", number: to_string(@transaction.block.number)),
@@ -47,15 +51,19 @@
             ) %>
           </span>
         </span>
+      <% end %>
     </div>
+
+    <%= if Enum.empty?(@transaction.token_transfers) || transfered_value?(@transaction.value) do %>
       <div class="col-md-9 col-lg-3 d-flex flex-column flex-md-row flex-lg-column justify-content-start text-lg-right mt-3 mt-lg-0">
         <span class="tile-title mr-1 mr-lg-0">
           <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
         </span>
         <span> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
       </div>
+    <% end %>
 
-    <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) do %>
+    <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) && transfered_value?(@transaction.value) do %>
       <div class="offset-md-2 col-md-10">
         <hr class="mt-3 mb-3 w-100" />
         <p class="tile-title"><%= gettext "Transfers" %></p>
@@ -80,5 +88,32 @@
         </span>
       </div>
     <% end %>
+
+    <%= if Enum.any?(@transaction.token_transfers) && !transfered_value?(@transaction.value) do %>
+      <div class="mt-3 offset-md-2 col-sm-7 col-lg-8 d-flex flex-column">
+        <span>
+          <%= if !address_sending_and_receiving_tokens?(@transaction, @address.hash) do %>
+            <%= if address_sending_tokens?(@transaction, @address.hash) do %>
+              <span data-test="transaction_type" class="mr-1 badge badge-danger tile-badge">
+                <%= gettext "OUT" %>
+              </span>
+            <% else %>
+              <%= if address_receiving_tokens?(@transaction, @address.hash) do %>
+                <span data-test="transaction_type" class="mr-1 badge badge-success tile-badge">
+                  <%= gettext "IN" %>
+                </span>
+              <% end %>
+            <% end %>
+          <% end %>
+          <span data-from-now="<%= @transaction.block.timestamp %>"></span>
+          <span class="ml-1">
+            <%= link(
+              gettext("Block #%{number}", number: to_string(@transaction.block.number)),
+              to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
+            ) %>
+          </span>
+        </span>
+      </div>
+    <% end %>
   </div>
 </div>

apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex

@@ -131,7 +131,7 @@
           <h2 class="card-title"><%= gettext "Transactions" %></h2>
           <span data-selector="transactions-list">
             <%= for transaction <- @transactions do %>
-              <%= render "_transaction.html", locale: @locale, address: @address, transaction: transaction %>
+              <%= render("_transaction.html", locale: @locale, address: @address, transaction: transaction) %>
             <% end %>
           </span>
         <% else %>

apps/explorer_web/lib/explorer_web/views/address_transaction_view.ex

@@ -1,6 +1,8 @@
 defmodule ExplorerWeb.AddressTransactionView do
   use ExplorerWeb, :view
 
+  alias Explorer.Chain.{Transaction}
+
   import ExplorerWeb.AddressView,
     only: [contract?: 1, smart_contract_verified?: 1, smart_contract_with_read_only_functions?: 1]
 
@@ -12,14 +14,20 @@ defmodule ExplorerWeb.AddressTransactionView do
     end
   end
 
-  @doc """
-  Check if the given address is the to_address_hash or from_address_hash from the transaction.
+  def address_sending_and_receiving_tokens?(%Transaction{} = transaction, address_hash) do
+    address_receiving_tokens?(transaction, address_hash) && address_sending_tokens?(transaction, address_hash)
+  end
 
-  When the transaction has token transfers, the transaction is going to be shown even when the 
-  transaction is the to or from of the given address.
-  """
-  def transaction_from_or_to_current_address?(transaction, address_hash) do
-    transaction.from_address_hash == address_hash || transaction.to_address_hash == address_hash
+  def address_receiving_tokens?(%Transaction{token_transfers: token_transfers}, address_hash) do
+    Enum.any?(token_transfers, &(&1.to_address_hash == address_hash))
+  end
+
+  def address_sending_tokens?(%Transaction{token_transfers: token_transfers}, address_hash) do
+    Enum.any?(token_transfers, &(&1.from_address_hash == address_hash))
+  end
+
+  def transfered_value?(%Explorer.Chain.Wei{value: value}) do
+    Decimal.to_integer(value) != 0
   end
 
   @doc """

apps/explorer_web/priv/gettext/default.pot

@@ -137,7 +137,7 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:106
 #: lib/explorer_web/templates/address_transaction/index.html.eex:117
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
-#: lib/explorer_web/views/address_transaction_view.ex:10
+#: lib/explorer_web/views/address_transaction_view.ex:12
 msgid "From"
 msgstr ""
 
@@ -153,7 +153,7 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:94
 #: lib/explorer_web/templates/address_transaction/index.html.eex:105
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
-#: lib/explorer_web/views/address_transaction_view.ex:9
+#: lib/explorer_web/views/address_transaction_view.ex:11
 msgid "To"
 msgstr ""
 
@@ -284,7 +284,7 @@ msgstr ""
 
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:29
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:53
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:60
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:33
 #: lib/explorer_web/templates/chain/_transactions.html.eex:33
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:71
@@ -350,11 +350,11 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:99
 #: lib/explorer_web/views/address_internal_transaction_view.ex:11
-#: lib/explorer_web/views/address_transaction_view.ex:11
+#: lib/explorer_web/views/address_transaction_view.ex:13
 msgid "All"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:55
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:62
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:35
 #: lib/explorer_web/templates/chain/_transactions.html.eex:35
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:72
@@ -627,7 +627,8 @@ msgid "at"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:45
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:49
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:111
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:25
 #: lib/explorer_web/templates/chain/_transactions.html.eex:25
 #: lib/explorer_web/templates/transaction/index.html.eex:69
@@ -637,14 +638,16 @@ msgstr ""
 #, elixir-format
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:24
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:38
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:42
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:103
 msgid "IN"
 msgstr ""
 
 #, elixir-format
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:22
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:34
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:38
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:98
 msgid "OUT"
 msgstr ""
 
@@ -717,7 +720,7 @@ msgid "Token Transfer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:61
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:69
 msgid "Transfers"
 msgstr ""
 

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

@@ -149,7 +149,7 @@ msgstr "Address"
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:106
 #: lib/explorer_web/templates/address_transaction/index.html.eex:117
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
-#: lib/explorer_web/views/address_transaction_view.ex:10
+#: lib/explorer_web/views/address_transaction_view.ex:12
 msgid "From"
 msgstr "From"
 
@@ -165,7 +165,7 @@ msgstr "Success"
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:94
 #: lib/explorer_web/templates/address_transaction/index.html.eex:105
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
-#: lib/explorer_web/views/address_transaction_view.ex:9
+#: lib/explorer_web/views/address_transaction_view.ex:11
 msgid "To"
 msgstr "To"
 
@@ -296,7 +296,7 @@ msgstr ""
 
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:29
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:53
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:60
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:33
 #: lib/explorer_web/templates/chain/_transactions.html.eex:33
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:71
@@ -362,11 +362,11 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:99
 #: lib/explorer_web/views/address_internal_transaction_view.ex:11
-#: lib/explorer_web/views/address_transaction_view.ex:11
+#: lib/explorer_web/views/address_transaction_view.ex:13
 msgid "All"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:55
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:62
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:35
 #: lib/explorer_web/templates/chain/_transactions.html.eex:35
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:72
@@ -639,7 +639,8 @@ msgid "at"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:45
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:49
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:111
 #: lib/explorer_web/templates/block_transaction/_transaction.html.eex:25
 #: lib/explorer_web/templates/chain/_transactions.html.eex:25
 #: lib/explorer_web/templates/transaction/index.html.eex:69
@@ -649,14 +650,16 @@ msgstr ""
 #, elixir-format
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:24
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:38
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:42
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:103
 msgid "IN"
 msgstr ""
 
 #, elixir-format
 #:
 #: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:22
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:34
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:38
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:98
 msgid "OUT"
 msgstr ""
 
@@ -729,7 +732,7 @@ msgid "Token Transfer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:61
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:69
 msgid "Transfers"
 msgstr ""