Updated transaction tiles throughout the site

apps/explorer_web/assets/css/components/_tile.scss

@@ -85,12 +85,16 @@
       }
     }
   }
+}
 
-  .tile-title {
-    font-size: 14px;
+.tile-title {
+  font-size: 12px;
   font-weight: 600;
   color: $gray-700;
   margin-bottom: 0;
+
+  &-hash {
+    font-weight: 300;
   }
 }
 

apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex

@@ -1,9 +1,9 @@
 <div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>">
-  <div class="row justify-content-end">
-    <div class="col-md-3 col-lg-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label">
+  <div class="row">
+    <div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center tile-label  mb-1 mb-md-0 pl-md-4">
       <%=  gettext("Internal Transaction") %>
     </div>
-    <div class="col-md-9 col-lg-7 d-flex flex-column text-nowrap">
+    <div class="col-md-8 col-lg-8 d-flex flex-column text-nowrap pr-2 pr-sm-2 pr-md-0">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %>
       <span class="text-nowrap">
         <%= if @address.hash == @internal_transaction.from_address_hash do %>
@@ -18,16 +18,16 @@
           <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction), contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), locale: @locale %>
         <% end %>
       </span>
+      <span class="tile-title text-truncate mt-3 mt-md-0">
+        <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
+      </span>
+    </div>
+    <div class="col-md-2 d-flex flex-row flex-md-column justify-content-start align-items-end  mt-3 mt-md-0">
       <%= if @address.hash == @internal_transaction.from_address_hash do %>
         <span class="badge badge-danger tile-badge"><%= gettext "OUT" %></span>
       <% else %>
         <span class="badge badge-success tile-badge"><%= gettext "IN" %></span>
       <% end %>
     </div>
-    <div class="col-md-9 col-lg-3 d-flex flex-row flex-md-column justify-content-start text-lg-right mt-3 mt-lg-0">
-      <span class="tile-title">
-        <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
-      </span>
-    </div>
   </div>
 </div>

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

@@ -126,12 +126,11 @@
             <span><%= gettext "There are no internal transactions for this address." %></span>
           </div>
         <% end %>
-      </div>
-    </div>
+        <div>
           <%= if @next_page_params do %>
             <%= link(
               gettext("Older"),
-        class: "button button--secondary button--sm u-float-right mt-3",
+              class: "button button--secondary button--sm float-right",
               to: address_internal_transaction_path(
                 @conn,
                 :index,
@@ -141,5 +140,9 @@
               )
             ) %>
           <% end %>
+        </div>
+      </div>
+    </div>
+
   </section>
 </section>

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

@@ -1,20 +1,16 @@
 <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">
-    <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">
+    <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
+      <span class="tile-label">
         <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
       </span>
-        <span class="tile-status-label" data-test="transaction_status">
+
+      <span class="tile-status-label ml-2 ml-md-0" data-test="transaction_status">
         <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
       </span>
     </div>
-    </div>
-
-    <div class="col-md-9 col-lg-7 d-flex flex-column">
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
       <%= 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) %>
@@ -30,40 +26,39 @@
           <%= 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_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="mr-1 badge badge-danger tile-badge">
-                <%= gettext "OUT" %>
+      <span class="d-flex flex-md-row flex-column mt-3 mt-md-0">
+        <span class="tile-title">
+          <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
         </span>
-            <% else %>
-              <span data-test="transaction_type" class="mr-1 badge badge-success tile-badge">
-                <%= gettext "IN" %>
+        <span class="ml-0 ml-md-1 text-nowrap">
+          <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %>
         </span>
-            <% end %>
-          <% end %>
-          <span data-from-now="<%= @transaction.block.timestamp %>"></span>
-          <span class="ml-1">
+      </span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-start text-md-right mt-3 mt-md-0">
+      <span class="mr-2 mr-md-0 order-1">
         <%= link(
           gettext("Block #%{number}", number: to_string(@transaction.block.number)),
           to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
         ) %>
       </span>
+      <span class="mr-2 mr-md-0 order-2" data-from-now="<%= @transaction.block.timestamp %>"></span>
+      <%= if transaction_from_or_to_current_address?(@transaction, @address.hash) do %>
+        <span class="mr-2 mr-md-0 order-0 order-md-3">
+          <%= if @transaction.from_address_hash == @address.hash do %>
+            <span data-test="transaction_type" class="badge badge-danger tile-badge">
+              <%= gettext "OUT" %>
+            </span>
+          <% else %>
+            <span data-test="transaction_type" class="badge badge-success tile-badge">
+              <%= gettext "IN" %>
             </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 %>
+    </div>
 
-    <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) && transfered_value?(@transaction.value) do %>
+    <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) do %>
       <div class="offset-md-2 col-md-10">
         <hr class="mt-3 mb-3 w-100" />
         <p class="tile-title"><%= gettext "Transfers" %></p>
@@ -71,8 +66,8 @@
     <% end %>
 
     <%= for token_transfer <- @transaction.token_transfers do %>
-      <div class="offset-md-2 col-sm-7 col-lg-8 d-flex flex-column">
-        <span data-test="token_transfer">
+      <div class="offset-md-2 col-md-7 col-lg-8 d-flex flex-column mt-1 mb-2">
+        <span class="text-nowrap" data-test="token_transfer">
           <span data-test="token_transfer_address_hash">
             <%= ExplorerWeb.AddressView.display_address_hash(@address, token_transfer.from_address, @locale) %>
           </span>
@@ -81,38 +76,22 @@
             <%= ExplorerWeb.AddressView.display_address_hash(@address, token_transfer.to_address, @locale) %>
           </span>
         </span>
-      </div>
-      <div class="col-sm-3 col-lg-2 d-flex flex-row flex-sm-column align-items-end">
         <span class="tile-title">
           <%= formatted_token_amount(token_transfer.amount, token_transfer.token.decimals) %> <%= token_transfer.token.symbol %>
         </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">
+      <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column align-items-end">
+        <%= if token_transfer.from_address_hash == @address.hash || token_transfer.to_address_hash == @address.hash do %>
+          <%= if token_transfer.from_address_hash == @address.hash do %>
+            <span data-test="transaction_type" class="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">
+            <span data-test="transaction_type" class="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>

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

@@ -139,12 +139,11 @@
             <span data-selector="empty-transactions-list"><%= gettext "There are no transactions for this address." %></span>
           </div>
         <% end %>
-      </div>
-    </div>
+
         <%= if @next_page_params do %>
           <%= link(
             gettext("Older"),
-        class: "button button--secondary button--sm u-float-right mt-3",
+            class: "button button--secondary button--sm float-right",
             to: address_transaction_path(
               @conn,
               :index,
@@ -154,5 +153,7 @@
             )
           ) %>
         <% end %>
+      </div>
+    </div>
   </section>
 </section>

apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex

@@ -1,6 +1,6 @@
 <section>
   <div class="row">
-    <div class="col-md-8">
+    <div class="col-md-12 col-lg-8">
       <!-- Block Details -->
       <div class="card">
         <div class="card-body">
@@ -63,7 +63,9 @@
       </div>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-md-12 col-lg-4">
+      <div class="row">
+        <div class="col-md-6 col-lg-12">
       <!-- Validator -->
           <div class="card bg-primary">
             <div class="card-body">
@@ -77,7 +79,8 @@
               </div>
             </div>
           </div>
-
+        </div>
+        <div class="col-md-6 col-lg-12">
       <!-- Gas -->
           <div class="card">
             <div class="card-body">
@@ -95,4 +98,6 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </section>

apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex

@@ -1,4 +1,4 @@
-<div class="col-sm-3 fade-up-blocks-homepage" data-selector="chain-block" data-block-number="<%= @block.number %>">
+<div class="col-sm-3 fade-up-blocks-homepage mb-3 mb-sm-0" data-selector="chain-block" data-block-number="<%= @block.number %>">
   <div class="tile d-flex flex-column">
     <%= link(@block, to: block_path(ExplorerWeb.Endpoint, :show, @locale, @block), class: "tile-title") %>
     <div>

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

@@ -48,14 +48,12 @@
 
       <%= for transaction <- @transactions do %>
         <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
-          <div class="row justify-content-end" data-test="chain_transaction">
-            <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" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
-                <div data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div>
+          <div class="row" data-test="chain_transaction">
+            <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
+              <span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
+              <div class="tile-status-label ml-2 ml-md-0" data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div>
             </div>
-            </div>
-            <div class="col-md-9 col-lg-7 d-flex flex-column">
+            <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
               <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
               <span class="text-nowrap">
                 <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %>
@@ -66,10 +64,11 @@
                   <%= gettext("Contract Address Pending") %>
                 <% end %>
               </span>
-            </div>
-            <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>
+              <span class="d-flex flex-md-row flex-column mt-3 mt-md-0">
+                <span class="tile-title"><%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %></span>
+                <span class="ml-0 ml-md-1 text-nowrap"> <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %></span>
+              </span>
+
             </div>
           </div>
         </div>

apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex

@@ -1,4 +1,4 @@
 <%= link(@transaction_hash,
     to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, @transaction_hash),
     "data-test": "transaction_hash_link",
-    "class": "tile-title text-truncate") %>
+    "class": "text-truncate") %>

apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex

@@ -1,31 +1,35 @@
 <div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %> fade-up" data-test="<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
   <div class="row" data-test="chain_transaction">
-    <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
-      <span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %></span>
-      <div class="tile-status-label" data-test="transaction_status"><%= ExplorerWeb.TransactionView.formatted_status(@transaction) %></div>
+    <div class="col-md-2 d-flex flex-row flex-md-column align-items-left justify-content-start justify-content-lg-center mb-1 mb-md-0 pl-md-4">
+      <span class="tile-label" data-test="transaction_type">
+        <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+      </span>
+      <div class="tile-status-label ml-2 ml-md-0" data-test="transaction_status">
+        <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+      </div>
     </div>
-    <div class="col-md-7 col-lg-8 d-flex flex-column">
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
       <span class="text-nowrap">
         <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %>
         &rarr;
         <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
       </span>
-      <span>
-        <span data-from-now="<%= @transaction.block.timestamp %>"></span>
-        <span class="ml-1">
+      <span class="d-flex flex-md-row flex-column mt-3 mt-md-0">
+        <span class="tile-title">
+          <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
+        </span>
+        <span class="ml-0 ml-md-1 text-nowrap"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %></span>
+      </span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right mt-3 mt-md-0">
+      <span class="mr-2 mr-md-0">
         <%= link(
           gettext("Block #%{number}", number: to_string(@transaction.block.number)),
           to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
         ) %>
       </span>
-      </span>
-    </div>
-    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start text-md-right">
-      <span class="tile-title">
-        <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
-      </span>
-      <span><%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
+      <span data-from-now="<%= @transaction.block.timestamp %>"></span>
     </div>
   </div>
 </div>

apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex

@@ -1,8 +1,8 @@
 <% block = @transaction.block %>
 <section>
   <div class="row">
-    <div class="col-md-8">
-      <!-- Block Details -->
+    <div class="col-md-12 col-lg-8">
+      <!-- Transaction Details -->
       <div class="card">
         <div class="card-body">
           <h1 class="card-title"><%= gettext "Transaction Details" %> </h1>
@@ -74,9 +74,12 @@
         </div>
       </div>
     </div>
+
+    <div class="col-md-12 col-lg-4">
+      <div class="row">
+        <div class="col-md-6 col-lg-12">
           <!-- Value -->
-    <div class="col-md-4">
-      <div class="card bg-primary">
+          <div class="card bg-primary ">
             <div class="card-body">
               <h2 class="card-title text-white"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
               <div class="text-right">
@@ -85,7 +88,9 @@
               </div>
             </div>
           </div>
+        </div>
 
+        <div class="col-md-6 col-lg-12">
           <!-- Gas -->
           <div class="card">
             <div class="card-body">
@@ -108,4 +113,7 @@
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
 </section>

apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex

@@ -1,6 +1,6 @@
 <div class="tile tile-type-internal-transaction fade-in" data-test="internal_transaction" data-internal-transaction-id="<%= @internal_transaction.id %>">
-  <div class="row justify-content-end">
-    <div class="col-md-3 col-lg-2 d-flex align-items-center justify-content-start justify-content-lg-center tile-label">
+  <div class="row">
+    <div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center tile-label">
       <%=  gettext("Internal Transaction") %>
     </div>
     <div class="col-md-9 col-lg-10 d-flex flex-column text-nowrap">

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

@@ -14,22 +14,6 @@ defmodule ExplorerWeb.AddressTransactionView do
     end
   end
 
-  def address_sending_and_receiving_tokens?(%Transaction{} = transaction, address_hash) do
-    address_receiving_tokens?(transaction, address_hash) && address_sending_tokens?(transaction, address_hash)
-  end
-
-  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 """
   Formats the given amount according to given decimals.
 
@@ -52,4 +36,8 @@ defmodule ExplorerWeb.AddressTransactionView do
     |> Decimal.reduce()
     |> Decimal.to_string(:normal)
   end
+
+  def transaction_from_or_to_current_address?(%Transaction{} = transaction, address_hash) do
+    transaction.from_address_hash == address_hash || transaction.to_address_hash == address_hash
+  end
 end

apps/explorer_web/lib/explorer_web/views/transaction_view.ex

@@ -132,10 +132,6 @@ defmodule ExplorerWeb.TransactionView do
     format_wei_value(value, :ether, include_unit_label: include_label?)
   end
 
-  defp fee_to_currency({fee_type, fee}, denomination: denomination) do
-    {fee_type, format_wei_value(Wei.from(fee, :wei), denomination)}
-  end
-
   defp fee_to_currency({fee_type, fee}, exchange_rate: %Token{} = exchange_rate) do
     formatted =
       fee
@@ -145,4 +141,10 @@ defmodule ExplorerWeb.TransactionView do
 
     {fee_type, formatted}
   end
+
+  defp fee_to_currency({fee_type, fee}, opts) do
+    denomination = Keyword.get(opts, :denomination)
+    include_label? = Keyword.get(opts, :include_label, true)
+    {fee_type, format_wei_value(Wei.from(fee, :wei), denomination, include_unit_label: include_label?)}
+  end
 end