Land #412: Add transaction status indicator

apps/explorer_web/assets/css/_typography.scss

@@ -52,6 +52,6 @@ a {
 }
 
 .contract-address {
-  text-decoration: underline;
-  text-decoration-style: dashed;
+  border-bottom: 1px dashed currentColor;
+  display: inline-block;
 }

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

@@ -22,7 +22,7 @@
     &-transaction {
       border-left: 4px solid $blue;
 
-      .tile-label, .tile-text-highlight {
+      .tile-label {
         color: $blue;
       }
     }
@@ -51,7 +51,7 @@
     &-token {
       border-left: 4px solid $orange;
 
-      .tile-label, .tile-text-highlight {
+      .tile-label {
         color: $orange;
       }
     }
@@ -59,18 +59,38 @@
     &-internal-transaction {
       border-left: 4px solid $teal;
 
-      .tile-label, .tile-text-highlight {
+      .tile-label {
         color: $teal;
       }
     }
   }
 
+  &-status {
+    &--failed {
+      border-top: 1px solid lighten($danger, 10%);
+      border-right: 1px solid lighten($danger, 10%);
+      border-bottom: 1px solid lighten($danger, 10%);
+
+      .tile-status-label {
+        color: $danger;
+      }
+    }
+    &--out_of_gas {
+      border-top: 1px solid lighten($warning, 10%);
+      border-right: 1px solid lighten($warning, 10%);
+      border-bottom: 1px solid lighten($warning, 10%);
+
+      .tile-status-label {
+        color: $warning;
+      }
+    }
+  }
+
   .tile-title {
     font-size: 14px;
     font-weight: 600;
     color: $gray-700;
     margin-bottom: 0;
-    display: block;
   }
 }
 

apps/explorer_web/assets/css/theme/_poa_variables.scss

@@ -38,7 +38,7 @@ $blue:    #4786ff !default;
 $indigo:  #5b33a1 !default;
 $purple:  #9987fc !default;
 $pink:    #e83e8c !default;
-$red:     #dc3545 !default;
+$red:     #c74d39 !default;
 $orange:  #ef9a60 !default;
 $yellow:  #ffc107 !default;
 $green:   #20b760 !default;

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

@@ -18,14 +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>
-      <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> POA
-    </div>
-    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column align-items-end justify-content-center text-md-right">
       <%= if @address.hash == @internal_transaction.from_address_hash do %>
-        <span class="badge badge-danger tile-badge">OUT</span>
+        <span class="badge badge-danger tile-badge"><%= gettext "OUT" %></span>
       <% else %>
-        <span class="badge badge-success tile-badge">IN</span>
+        <span class="badge badge-success tile-badge"><%= gettext "IN" %></span>
       <% end %>
     </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(@internal_transaction, include_label: false) %> <%= gettext "Ether" %>
+      </span>
+    </div>
   </div>
 </div>

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

@@ -1,7 +1,12 @@
-<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> fade-in" data-transaction-hash="<%= @transaction.hash %>">
+<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-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
-      <%= ExplorerWeb.TransactionView.transaction_display_type(@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">
+        <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %>
+      </span>
+      <div class="tile-status-label" data-test="transaction_status">
+        <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+      </div>
     </div>
     <div class="col-md-7 col-lg-8 d-flex flex-column">
       <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %>
@@ -11,6 +16,7 @@
         <% else %>
           <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %>
         <% end %>
+
         &rarr;
         <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %>
           <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %>
@@ -18,19 +24,26 @@
           <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %>
         <% end %>
       </span>
-      <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> POA
+      <span>
+        <%= if @address.hash == @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 %>
+        <span class="ml-1" 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>
-    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end align-items-end text-md-right">
-      <%= if @address.hash == @transaction.from_address_hash do %>
-        <span class="badge badge-warning tile-badge  mr-2 mr-md-0">OUT</span>
-      <% else %>
-        <span class="badge badge-success tile-badge mr-2 mr-md-0">IN</span>
-      <% end %>
-      <span class="mr-2 mr-sm-0" data-from-now="<%= @transaction.block.timestamp %>"></span>
-      <%= link(
-        gettext("Block #") <> "#{@transaction.block.number}",
-        to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block)
-      ) %>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start align-items-end text-md-right">
+      <span class="tile-title">
+        <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %>
+      </span>
+      <span class="mr-2 mr-sm-0 text-muted"> <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %></span>
     </div>
   </div>
 </div>

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

@@ -148,8 +148,8 @@
             <tbody>
               <%= for transaction <- @transactions do %>
                 <tr data-transaction-hash="<%= transaction.hash %>">
-                  <td>
-                    <div class="transaction__dot transaction__dot--<%= status(transaction) %>"></div>
+                  <td data-test="transaction_status">
+                    <div class="transaction__dot transaction__dot--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-toggle="tooltip" title="<%= ExplorerWeb.TransactionView.formatted_status(transaction) %>"></div>
                   </td>
                   <td>
                     <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>

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

@@ -3,26 +3,36 @@
     <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
     <%= for transaction <- @chain.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="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
       <div class="row" data-test="chain_transaction">
-        <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
-          <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
+        <div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
+          <div class="ml-4">
+            <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>
         </div>
         <div class="col-md-7 col-lg-8 d-flex flex-column">
-          <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
+            <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
           <span>
             <%= 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>
-          <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+          <span>
+            <span class="ml-1" data-from-now="<%= transaction.block.timestamp %>"></span>
+            <span class="ml-1">
+              <%= link(
+                gettext("Block #%{number}", number: to_string(transaction.block.number)),
+                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+              ) %>
+            </span>
+          </span>
         </div>
-        <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end text-md-right">
-          <span class="mr-2 mr-sm-0" data-from-now="<%= transaction.block.timestamp %>"></span>
-          <%= link(
-            gettext("Block #") <> "#{transaction.block.number}",
-            to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-          ) %>
+        <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>
         </div>
       </div>
     </div>

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

@@ -27,10 +27,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" data-test="chain_transaction">
-            <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label">
-              <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
+            <div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center tile-label">
+              <div class="ml-4">
+                <span data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %></span>
+                <div data-test="transaction_status" class="text-muted"><%= ExplorerWeb.TransactionView.formatted_status(transaction) %></div>
+              </div>
             </div>
-
             <div class="col-md-7 col-lg-8 d-flex flex-column">
               <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
               <span>
@@ -42,7 +44,7 @@
                   <%= gettext("Contract Address Pending") %>
                 <% end %>
               </span>
-              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %>
             </div>
           </div>
         </div>

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

@@ -25,12 +25,14 @@
       <p><%= gettext("Showing %{count} Validated Transactions", count: Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###")) %></p>
 
       <%= 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="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(transaction) %>" data-transaction-hash="<%= transaction.hash %>">
           <div class="row" data-test="chain_transaction">
-            <div class="col-md-2 d-flex align-items-center justify-content-start justify-content-lg-center  tile-label" data-test="transaction_type">
-              <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
+            <div class="col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
+              <div class="ml-4">
+                <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>
             </div>
-
             <div class="col-md-7 col-lg-8 d-flex flex-column">
               <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %>
               <span>
@@ -38,14 +40,19 @@
                 &rarr;
                 <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(transaction), contract: ExplorerWeb.AddressView.contract?(transaction.to_address), locale: @locale %>
               </span>
-              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+              <span>
+                <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(@conn, :show, @conn.assigns.locale, transaction.block)
+                  ) %>
+                </span>
+              </span>
             </div>
-            <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column justify-content-start justify-content-md-end text-md-right">
-              <span class="mr-2 mr-sm-0" data-from-now="<%= transaction.block.timestamp %>"></span>
-              <%= link(
-                gettext("Block #") <> "#{transaction.block.number}",
-                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-              ) %>
+            <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>
             </div>
           </div>
         </div>

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

@@ -24,8 +24,8 @@
                   <%= gettext "Transaction Status" %>
                 </th>
                 <td>
-                  <%= formatted_status(@transaction) %>
-                  <div class="transaction__dot transaction__dot--<%= status(@transaction) %>"></div>
+                  <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+                  <div class="transaction__dot transaction__dot--<%= ExplorerWeb.TransactionView.status(@transaction) %>"></div>
                 </td>
               </tr>
               <tr>

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

@@ -3,8 +3,6 @@ defmodule ExplorerWeb.AddressTransactionView do
 
   import ExplorerWeb.AddressView, only: [contract?: 1, smart_contract_verified?: 1]
 
-  alias ExplorerWeb.TransactionView
-
   def format_current_filter(filter) do
     case filter do
       "to" -> gettext("To")
@@ -12,6 +10,4 @@ defmodule ExplorerWeb.AddressTransactionView do
       _ -> gettext("All")
     end
   end
-
-  defdelegate status(transaction), to: TransactionView
 end

apps/explorer_web/lib/explorer_web/views/block_transaction_view.ex

@@ -1,8 +1,7 @@
 defmodule ExplorerWeb.BlockTransactionView do
   use ExplorerWeb, :view
 
-  alias ExplorerWeb.{BlockView, TransactionView}
+  alias ExplorerWeb.BlockView
 
   defdelegate formatted_timestamp(block), to: BlockView
-  defdelegate status(transacton), to: TransactionView
 end

apps/explorer_web/priv/gettext/default.pot

@@ -148,7 +148,7 @@ msgstr ""
 #: lib/explorer_web/templates/transaction/overview.html.eex:79
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
-#: lib/explorer_web/views/address_transaction_view.ex:11
+#: lib/explorer_web/views/address_transaction_view.ex:9
 msgid "From"
 msgstr ""
 
@@ -167,7 +167,7 @@ msgstr ""
 #: lib/explorer_web/templates/transaction/overview.html.eex:91
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:32
 #: lib/explorer_web/views/address_internal_transaction_view.ex:8
-#: lib/explorer_web/views/address_transaction_view.ex:10
+#: lib/explorer_web/views/address_transaction_view.ex:8
 msgid "To"
 msgstr ""
 
@@ -293,6 +293,11 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:4
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:29
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:44
+#: lib/explorer_web/templates/chain/_transactions.html.eex:33
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:47
+#: lib/explorer_web/templates/transaction/index.html.eex:54
 #: lib/explorer_web/templates/transaction/overview.html.eex:63
 #: lib/explorer_web/templates/transaction/overview.html.eex:159
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
@@ -351,11 +356,13 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:80
 #: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
-#: lib/explorer_web/views/address_transaction_view.ex:12
+#: lib/explorer_web/views/address_transaction_view.ex:10
 msgid "All"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:102
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:46
+#: lib/explorer_web/templates/chain/_transactions.html.eex:35
+#: lib/explorer_web/templates/transaction/index.html.eex:55
 msgid "Fee"
 msgstr ""
 
@@ -470,8 +477,8 @@ msgstr ""
 #: lib/explorer_web/templates/address_transaction/index.html.eex:138
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:198
-#: lib/explorer_web/templates/pending_transaction/index.html.eex:52
-#: lib/explorer_web/templates/transaction/index.html.eex:55
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:54
+#: lib/explorer_web/templates/transaction/index.html.eex:62
 msgid "Older"
 msgstr ""
 
@@ -551,13 +558,6 @@ msgstr ""
 msgid "Twitter"
 msgstr ""
 
-#, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
-#: lib/explorer_web/templates/chain/_transactions.html.eex:23
-#: lib/explorer_web/templates/transaction/index.html.eex:46
-msgid "Block #"
-msgstr ""
-
 #, elixir-format
 #: lib/explorer_web/templates/chain/_blocks.html.eex:4
 msgid "View All Blocks →"
@@ -625,7 +625,7 @@ msgid "There are no transactions for this address."
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/pending_transaction/index.html.eex:42
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:44
 msgid "Contract Address Pending"
 msgstr ""
 
@@ -643,3 +643,24 @@ msgstr ""
 #: lib/explorer_web/templates/address/overview.html.eex:36
 msgid "at"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:36
+#: lib/explorer_web/templates/chain/_transactions.html.eex:25
+#: lib/explorer_web/templates/transaction/index.html.eex:47
+msgid "Block #%{number}"
+msgstr ""
+
+#, elixir-format
+#:
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:24
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
+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:29
+msgid "OUT"
+msgstr ""

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

@@ -160,7 +160,7 @@ msgstr "Address"
 #: lib/explorer_web/templates/transaction/overview.html.eex:79
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
-#: lib/explorer_web/views/address_transaction_view.ex:11
+#: lib/explorer_web/views/address_transaction_view.ex:9
 msgid "From"
 msgstr "From"
 
@@ -179,7 +179,7 @@ msgstr "Success"
 #: lib/explorer_web/templates/transaction/overview.html.eex:91
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:32
 #: lib/explorer_web/views/address_internal_transaction_view.ex:8
-#: lib/explorer_web/views/address_transaction_view.ex:10
+#: lib/explorer_web/views/address_transaction_view.ex:8
 msgid "To"
 msgstr "To"
 
@@ -305,6 +305,11 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:4
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:29
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:44
+#: lib/explorer_web/templates/chain/_transactions.html.eex:33
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:47
+#: lib/explorer_web/templates/transaction/index.html.eex:54
 #: lib/explorer_web/templates/transaction/overview.html.eex:63
 #: lib/explorer_web/templates/transaction/overview.html.eex:159
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
@@ -363,11 +368,13 @@ msgstr ""
 #: lib/explorer_web/templates/address_internal_transaction/index.html.eex:80
 #: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
-#: lib/explorer_web/views/address_transaction_view.ex:12
+#: lib/explorer_web/views/address_transaction_view.ex:10
 msgid "All"
 msgstr ""
 
-#: lib/explorer_web/templates/address_transaction/index.html.eex:102
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:46
+#: lib/explorer_web/templates/chain/_transactions.html.eex:35
+#: lib/explorer_web/templates/transaction/index.html.eex:55
 msgid "Fee"
 msgstr ""
 
@@ -482,8 +489,8 @@ msgstr ""
 #: lib/explorer_web/templates/address_transaction/index.html.eex:138
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:198
-#: lib/explorer_web/templates/pending_transaction/index.html.eex:52
-#: lib/explorer_web/templates/transaction/index.html.eex:55
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:54
+#: lib/explorer_web/templates/transaction/index.html.eex:62
 msgid "Older"
 msgstr ""
 
@@ -563,13 +570,6 @@ msgstr ""
 msgid "Twitter"
 msgstr ""
 
-#, elixir-format
-#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
-#: lib/explorer_web/templates/chain/_transactions.html.eex:23
-#: lib/explorer_web/templates/transaction/index.html.eex:46
-msgid "Block #"
-msgstr ""
-
 #, elixir-format
 #: lib/explorer_web/templates/chain/_blocks.html.eex:4
 msgid "View All Blocks →"
@@ -637,7 +637,7 @@ msgid "There are no transactions for this address."
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/pending_transaction/index.html.eex:42
+#: lib/explorer_web/templates/pending_transaction/index.html.eex:44
 msgid "Contract Address Pending"
 msgstr ""
 
@@ -655,3 +655,24 @@ msgstr ""
 #: lib/explorer_web/templates/address/overview.html.eex:36
 msgid "at"
 msgstr ""
+
+#, elixir-format, fuzzy
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:36
+#: lib/explorer_web/templates/chain/_transactions.html.eex:25
+#: lib/explorer_web/templates/transaction/index.html.eex:47
+msgid "Block #%{number}"
+msgstr ""
+
+#, elixir-format
+#:
+#: lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex:24
+#: lib/explorer_web/templates/address_transaction/_transaction.html.eex:31
+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:29
+msgid "OUT"
+msgstr ""

apps/explorer_web/test/explorer_web/features/pages/address_page.ex

@@ -67,6 +67,10 @@ defmodule ExplorerWeb.AddressPage do
     css("[data-test='transaction_count']")
   end
 
+  def transaction_status(%Transaction{hash: transaction_hash}) do
+    css("[data-transaction-hash='#{transaction_hash}'] [data-test='transaction_status']")
+  end
+
   def visit_page(session, %Address{hash: address_hash}), do: visit_page(session, address_hash)
 
   def visit_page(session, address_hash) do

apps/explorer_web/test/explorer_web/features/pages/block_page.ex

@@ -3,9 +3,9 @@ defmodule ExplorerWeb.BlockPage do
 
   use Wallaby.DSL
 
-  import Wallaby.Query, only: [css: 2]
+  import Wallaby.Query, only: [css: 1, css: 2]
 
-  alias Explorer.Chain.{Block, InternalTransaction}
+  alias Explorer.Chain.{Block, InternalTransaction, Transaction}
 
   def contract_creation(%InternalTransaction{created_contract_address_hash: hash}) do
     css("[data-address-hash='#{hash}']", text: "Contract Creation")
@@ -15,6 +15,14 @@ defmodule ExplorerWeb.BlockPage do
     css("[data-test='block_detail_number']", text: to_string(block_number))
   end
 
+  def transaction(%Transaction{hash: transaction_hash}) do
+    css("[data-transaction-hash='#{transaction_hash}']")
+  end
+
+  def transaction_status(%Transaction{hash: transaction_hash}) do
+    css("[data-transaction-hash='#{transaction_hash}'] [data-test='transaction_status']")
+  end
+
   def visit_page(session, %Block{number: block_number}) do
     visit(session, "/en/blocks/#{block_number}/transactions")
   end

apps/explorer_web/test/explorer_web/features/pages/home_page.ex

@@ -5,7 +5,7 @@ defmodule ExplorerWeb.HomePage do
 
   import Wallaby.Query, only: [css: 1, css: 2]
 
-  alias Explorer.Chain.InternalTransaction
+  alias Explorer.Chain.{InternalTransaction, Transaction}
 
   def blocks(count: count) do
     css("[data-test='chain_block']", count: count)
@@ -25,6 +25,10 @@ defmodule ExplorerWeb.HomePage do
     css("[data-test='chain_transaction']", count: count)
   end
 
+  def transaction_status(%Transaction{hash: transaction_hash}) do
+    css("[data-transaction-hash='#{transaction_hash}'] [data-test='transaction_status']")
+  end
+
   def visit_page(session) do
     visit(session, "/")
   end

apps/explorer_web/test/explorer_web/features/pages/transaction_list_page.ex

@@ -23,6 +23,10 @@ defmodule ExplorerWeb.TransactionListPage do
     css("[data-transaction-hash='#{transaction_hash}']")
   end
 
+  def transaction_status(%Transaction{hash: transaction_hash}) do
+    css("[data-transaction-hash='#{transaction_hash}'] [data-test='transaction_status']")
+  end
+
   def visit_page(session) do
     visit(session, "/en/transactions")
   end

apps/explorer_web/test/explorer_web/features/viewing_addresses_test.exs

@@ -115,6 +115,7 @@ defmodule ExplorerWeb.ViewingAddressesTest do
       |> AddressPage.visit_page(addresses.lincoln)
       |> assert_has(AddressPage.transaction(transactions.from_taft))
       |> assert_has(AddressPage.transaction(transactions.from_lincoln))
+      |> assert_has(AddressPage.transaction_status(transactions.from_lincoln))
     end
 
     test "can filter to only see transactions from an address", %{

apps/explorer_web/test/explorer_web/features/viewing_blocks_test.exs

@@ -43,6 +43,21 @@ defmodule ExplorerWeb.ViewingBlocksTest do
     |> assert_has(BlockPage.detail_number(block))
   end
 
+  test "block detail page has transactions", %{session: session} do
+    block = insert(:block, number: 42)
+
+    transaction =
+      :transaction
+      |> insert()
+      |> with_block(block)
+
+    session
+    |> BlockPage.visit_page(block)
+    |> assert_has(BlockPage.detail_number(block))
+    |> assert_has(BlockPage.transaction(transaction))
+    |> assert_has(BlockPage.transaction_status(transaction))
+  end
+
   test "contract creation is shown for to_address in transaction list", %{session: session} do
     block = insert(:block, number: 42)
 

apps/explorer_web/test/explorer_web/features/viewing_transactions_test.exs

@@ -94,6 +94,7 @@ defmodule ExplorerWeb.ViewingTransactionsTest do
       session
       |> TransactionListPage.visit_page()
       |> assert_has(TransactionListPage.transaction(transaction))
+      |> assert_has(TransactionListPage.transaction_status(transaction))
       |> refute_has(TransactionListPage.transaction(pending))
     end
 
@@ -103,6 +104,7 @@ defmodule ExplorerWeb.ViewingTransactionsTest do
       |> TransactionListPage.click_pending()
       |> assert_has(TransactionListPage.transaction(pending))
       |> assert_has(TransactionListPage.transaction(pending_contract))
+      |> assert_has(TransactionListPage.transaction_status(pending_contract))
     end
 
     test "contract creation is shown for to_address on list page", %{session: session} do