Dsashboard banner styling

apps/explorer_web/assets/css/components/_dashboard-banner.scss

@@ -1,4 +1,4 @@
-.dashboard-container {
+.dashboard-banner-container {
   position: relative;
   background-color: $white;
   box-shadow: 0 5px 40px -5px rgba($black, 0.25);
@@ -24,6 +24,10 @@
     bottom: 0;
     left: 70%;
     background-color: $primary;
+
+    @media (max-width: 992px) {
+      left: 90%;
+    }
   }
 }
 
@@ -31,7 +35,7 @@
   position: relative;
   display: grid;
   grid-template-rows: 3rem 2fr 1fr;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 1fr 4fr;
   grid-template-areas:
     "chart ."
     "chart stats"

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

@@ -13,6 +13,10 @@
     margin-top: 1rem;
   }
 
+  @media (max-width: 767.98px) {
+    margin-bottom: 1rem;
+  }
+
   &-type {
 
     &-transaction {

apps/explorer_web/assets/js/lib/market_history_chart.js

@@ -62,9 +62,6 @@ function createMarketHistoryChart (ctx) {
             displayFormats: {
               week: 'MMM D'
             }
-          },
-          ticks: {
-            callback: (value, index, values) => value,
           }
         }],
         yAxes: [{
@@ -91,7 +88,20 @@ function createMarketHistoryChart (ctx) {
         }]
       },
       tooltips: {
-        enabled: false
+        mode: 'index',
+        intersect: false,
+        callbacks: {
+          label: ({datasetIndex, yLabel}, {datasets}) => {
+            const label = datasets[datasetIndex].label
+            if (datasets[datasetIndex].label === 'Price') {
+              return `${label}: ${formatPrice(yLabel)}`
+            } else if (datasets[datasetIndex].label === 'Market Cap') {
+              return `${label}: ${formatMarketCap(yLabel)}`
+            } else {
+              return yLabel
+            }
+          }
+        }
       }
     }
   })

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

@@ -1,8 +1,13 @@
 <%= if @address do %>
-  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address) do %>
+  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address), "data-address-hash": @address do %>
     <%= if contract?(@address) do %>
-      
+      <span class="tile-label"><%= @address %></span>
-    <% end %>
+    <% else %>
       <%= @address %>
     <% end %>
   <% end %>
+<% else %>
+  <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash do %>
+    <span class="tile-label"><%= @address_hash %></span>
+  <% end %>
+<% end %>

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

@@ -3,12 +3,10 @@
     <%= 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 %>
-      <%= cond do %>
+      <div class="tile <%= ExplorerWeb.TransactionView.tile_class(transaction) %>">
-        <%= transaction.created_contract_address_hash != nil -> %>
-          <div class="tile tile-type-contract-creation">
         <div class="row">
           <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
-                <%= gettext("Contract Creation") %>
+            <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %>
           </div>
           <div class="col-md-8">
             <%= link(transaction.hash ,
@@ -19,41 +17,7 @@
             <div>
               <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
               &rarr;
-                    <%= link(
+              <%= render ExplorerWeb.AddressView, "_link.html", Keyword.merge(ExplorerWeb.TransactionView.display_to_address(transaction), locale: @locale) %>
-                    transaction.created_contract_address_hash,
-                      class: "tile-label",
-                      "data-address-hash": transaction.created_contract_address_hash,
-                      to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
-                      title: transaction.created_contract_address_hash
-                    ) %>
-                </div>
-                <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
-              </div>
-              <div class="col-md-2 d-flex flex-column justify-content-end text-right">
-                <span data-from-now="<%= transaction.block.timestamp %>"></span>
-                <%= link(
-                  gettext("Block #") <> "#{transaction.block.number}",
-                  to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-                ) %>
-              </div>
-            </div>
-          </div>
-        <% ExplorerWeb.AddressView.contract?(transaction.from_address) || ExplorerWeb.AddressView.contract?(transaction.to_address) -> %>
-          <div class="tile tile-type-contract">
-            <div class="row">
-              <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
-                <%= gettext("Contract") %>
-              </div>
-              <div class="col-md-8">
-                <%= link(transaction.hash ,
-                    to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
-                    "class": "tile-title",
-                    "data-test": "transaction_hash",
-                    "data-transaction-hash": transaction.hash) %>
-                <div>
-                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
-                  &rarr;
-                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
             </div>
             <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
           </div>
@@ -66,35 +30,7 @@
           </div>
         </div>
       </div>
-          <% true -> %>
+
-            <div class="tile tile-type-transaction">
-              <div class="row">
-                <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
-                  <%= gettext("Transaction") %>
-                </div>
-                <div class="col-md-8">
-                  <%= link(transaction.hash ,
-                      to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
-                      "class": "tile-title",
-                      "data-test": "transaction_hash",
-                      "data-transaction-hash": transaction.hash) %>
-                  <div>
-                    <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
-                    &rarr;
-                    <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
-                  </div>
-                  <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
-                </div>
-                <div class="col-md-2 d-flex flex-column justify-content-end text-right">
-                  <span data-from-now="<%= transaction.block.timestamp %>"></span>
-                  <%= link(
-                    gettext("Block #") <> "#{transaction.block.number}",
-                    to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-                  ) %>
-                </div>
-              </div>
-            </div>
-      <% end %>
     <% end %>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-<div class="dashboard-container">
+<div class="dashboard-banner-container d-none d-md-block">
   <div class="container">
     <div class="dashboard-banner">
       <div class="dashboard-banner-chart">

apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg bg-primary">
+<nav class="navbar navbar-dark navbar-expand-lg bg-primary">
   <div class="container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />

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

@@ -5,9 +5,40 @@ defmodule ExplorerWeb.TransactionView do
   alias Explorer.Chain
   alias Explorer.Chain.{InternalTransaction, Transaction, Wei}
   alias Explorer.ExchangeRates.Token
-  alias ExplorerWeb.BlockView
+  alias ExplorerWeb.{AddressView, BlockView}
   alias ExplorerWeb.ExchangeRates.USD
 
+  import ExplorerWeb.Gettext
+
+  def contract_creation?(%Transaction{created_contract_address_hash: nil}), do: false
+  def contract_creation?(_), do: true
+
+  def contract?(%Transaction{from_address: from_address, to_address: to_address}) do
+    AddressView.contract?(from_address) || AddressView.contract?(to_address)
+  end
+
+  def tile_class(%Transaction{} = transaction) do
+    cond do
+      contract_creation?(transaction) -> "tile-type-contract-creation"
+      contract?(transaction) -> "tile-type-contract"
+      true -> "tile-type-transaction"
+    end
+  end
+
+  def transaction_display_type(%Transaction{} = transaction) do
+    cond do
+      contract_creation?(transaction) -> gettext("Contract Creation")
+      contract?(transaction) -> gettext("Contract")
+      true -> gettext("Transaction")
+    end
+  end
+
+  # This is the address to be shown in the to field
+  def display_to_address(%Transaction{to_address_hash: nil, created_contract_address_hash: address_hash}),
+    do: [address: nil, address_hash: address_hash]
+
+  def display_to_address(%Transaction{to_address: address}), do: [address: address]
+
   def confirmations(%Transaction{block: block}, named_arguments) when is_list(named_arguments) do
     case block do
       nil -> 0