Added tooltipsfor Block Details Page + fixed height issue on main Blockscout Page + Added ERC 721 image to the token transfers page(required additional logic)

apps/block_scout_web/assets/css/app.scss

@@ -1,10 +1,12 @@
 @import "./mixins";
 
 /* Phoenix flash messages */
+
 .alert:empty {
     display: none;
 }
 
+
 /* This file is for your main application css. */
 
 // Font Awesome
@@ -13,13 +15,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "fa-brands";
 @import "fa-regular";
 @import "fa-solid";
-
 // Bootstrap Core CSS
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/mixins";
-
 @import "theme/variables";
-
 @import "node_modules/bootstrap/scss/root";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
@@ -38,7 +37,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/utilities/position";
 @import "node_modules/bootstrap/scss/utilities/borders";
 @import "node_modules/bootstrap/scss/progress";
-
 // Bootstrap Components
 @import "node_modules/bootstrap/scss/alert";
 @import "node_modules/bootstrap/scss/badge";
@@ -50,13 +48,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tables";
 @import "node_modules/bootstrap/scss/transitions";
-
 // Code highlight
 @import "node_modules/highlight.js/styles/default";
-
 //Custom theme
 @import "theme/fonts";
-
 // Custom SCSS
 @import "layout";
 @import "typography";
@@ -113,6 +108,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/new_smart_contract";
 @import "components/radio_big";
 @import "components/btn_no_border";
+@import "components/custom_tooltips_block_details";
+@import "components/_erc721_token_image_container";
 
 @import "theme/dark-theme";
 
@@ -125,3 +122,5 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
     darkprimary: $dark-primary;
     darksecondary: $dark-secondary;
 }
+
+

apps/block_scout_web/assets/css/components/_card.scss

@@ -7,20 +7,17 @@ $card-background-1: $primary !default;
 $card-background-1-text-color: #fff !default;
 $card-tab-icon-color: #20b760 !default;
 $card-tab-icon-color-active: #fff !default;
-
 .card {
     background-color: $card-background-color;
     border-radius: $card-default-border-radius;
     border: none;
     box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
     margin-bottom: $common-container-margin;
-
     .block-details-row {
         flex-direction: row;
         @include media-breakpoint-down(sm) {
             flex-direction: column;
         }
-
         .block-detail-el {
             &+.block-detail-el {
                 @include media-breakpoint-down(sm) {
@@ -34,7 +31,6 @@ $card-tab-icon-color-active: #fff !default;
 .card-background-1 {
     background-color: $card-background-1;
     color: $card-background-1-text-color;
-
     a:not(.dropdown-item),
     a:not(.dropdown-item):hover {
         color: $card-background-1-text-color;
@@ -45,7 +41,6 @@ $card-tab-icon-color-active: #fff !default;
     background: transparent;
     border-bottom: 1px solid $base-border-color;
     padding: $card-vertical-padding $card-horizontal-padding;
-
     &-tabs {
         margin: (-$card-spacer-y) (-$card-spacer-x);
     }
@@ -56,33 +51,26 @@ $card-tab-icon-color-active: #fff !default;
     font-weight: normal;
     line-height: 1.2rem;
     margin-bottom: 2rem;
-
     &.lg-card-title {
         @media (max-width: 374px) {
             font-size: 13px;
         }
     }
-
     &.margin-bottom-md {
         margin-bottom: 25px;
     }
-
     &.margin-bottom-sm {
         margin-bottom: 15px;
     }
-
     &.margin-bottom-xs {
         margin-bottom: 10px;
     }
-
     &.margin-bottom-0 {
         margin-bottom: 0;
     }
-
     .card-title-container & {
         line-height: 1.2;
         margin: 0;
-
         @include media-breakpoint-down(sm) {
             margin-bottom: 25px;
         }
@@ -95,7 +83,6 @@ $card-tab-icon-color-active: #fff !default;
     font-weight: normal;
     line-height: 1.2;
     margin: 0 0 30px;
-
     &.margin-bottom-0 {
         margin-bottom: 0;
     }
@@ -106,7 +93,6 @@ $card-tab-icon-color-active: #fff !default;
     display: flex;
     justify-content: space-between;
     padding: 25px $card-horizontal-padding;
-
     @include media-breakpoint-down(sm) {
         flex-direction: column;
     }
@@ -116,22 +102,17 @@ $card-tab-icon-color-active: #fff !default;
     align-items: center;
     display: flex;
     justify-content: flex-end;
-
     @include media-breakpoint-down(sm) {
         flex-direction: column;
     }
-
     .card-title-control {
         margin-right: 20px;
-
         &:last-child {
             margin-right: 0;
         }
-
         @include media-breakpoint-down(sm) {
             margin-bottom: 20px;
             margin-right: 0;
-
             &:last-child {
                 margin-bottom: 0;
             }
@@ -156,7 +137,6 @@ $card-tab-icon-color-active: #fff !default;
 
 .card-chain-blocks {
     height: auto;
-
     [class*="col-"]:last-child {
         .tile {
             margin-bottom: 0;
@@ -166,7 +146,6 @@ $card-tab-icon-color-active: #fff !default;
 
 .card-chain-transactions {
     height: auto;
-
     .tile {
         margin-bottom: 0;
     }
@@ -180,7 +159,6 @@ $card-tab-icon-color-active: #fff !default;
     display: flex;
     justify-content: flex-start;
     overflow: hidden;
-
     @include media-breakpoint-down(md) {
         flex-direction: column;
     }
@@ -198,38 +176,31 @@ $card-tab-icon-color-active: #fff !default;
     padding: 0 25px;
     text-align: center;
     transition: $transition-cont;
-
     &:hover {
         background-color: rgba($card-tab-active, .15);
         color: $card-tab-active;
         text-decoration: none;
     }
-
     @include media-breakpoint-down(md) {
         display: none;
         width: 100%;
     }
-
     .fa-check-circle {
         color: $card-tab-icon-color;
         margin-left: 6px;
     }
-
     &.active {
         background-color: $card-tab-active;
         color: #fff;
         cursor: default;
         text-decoration: none;
-
         .fa-check-circle {
             color: $card-tab-icon-color-active;
         }
-
         @include media-breakpoint-down(md) {
             cursor: pointer;
             display: flex;
             order: -1;
-
             &::after {
                 border-bottom: 0;
                 border-left: 0.3em solid transparent;
@@ -241,7 +212,6 @@ $card-tab-icon-color-active: #fff !default;
                 margin-left: 10px;
                 width: 0;
             }
-
             &.noCaret::after {
                 display: none;
             }

apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss

@@ -0,0 +1,74 @@
+/* Custom Tooltips for Block Details Page */
+.tooltipCustom {
+     position: relative;
+  display: inline-block;
+}
+.tooltipCustom .tooltiptextTopMiner {
+    visibility: hidden;
+    position: absolute;
+    width: 50%;
+    background-color: white;
+    color: #5c34a2;
+    text-align: center;
+    border-radius: 6px;
+    left: 25%;
+    bottom: 100%;
+    padding: 15px 0px;
+    display: inline-block;
+    z-index: 1;
+    font-family: Nunito;
+    margin-bottom: 15px;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+.tooltipCustom .tooltiptextTopMiner::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white transparent transparent transparent;
+}
+.tooltipCustom:hover .tooltiptextTopMiner {
+    visibility: visible;
+    opacity: 1;
+}
+
+.tooltipCustom .tooltiptextTopR {
+    visibility: hidden;
+    position: absolute;
+    width: 50%;
+    background-color: $primary;
+    color: white;
+    text-align: center;
+    border-radius: 6px;
+    left: 52%;
+    bottom: 120%;
+    padding: 15px 10px;
+    font-family: Nunito;
+    display: inline-block;
+    z-index: 1;
+    margin-bottom: 15px;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.tooltipCustom .tooltiptextTopR::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: $primary transparent transparent transparent;
+}
+
+
+.tooltipCustom:hover .tooltiptextTopR {
+    visibility: visible;
+    opacity: 1;
+}
+/* Custom Tooltips for Block Details Page end*/

apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss

@@ -0,0 +1,10 @@
+/* ERC721 image block */
+.erc721-image {
+    display: flex;
+    justify-content: center;
+}
+
+.erc721-image img {
+    height: 80px;
+}
+/* ERC721 image block end */

apps/block_scout_web/assets/package-lock.json

@@ -4333,7 +4333,8 @@
           "version": "2.1.1",
           "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4798,7 +4799,8 @@
           "version": "5.1.1",
           "resolved": false,
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4862,6 +4864,7 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4910,13 +4913,15 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

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

@@ -8,13 +8,18 @@
             <%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
           </h1>
           <!-- Block Height -->
-          <h3 data-test="block_detail_number" style="width: 170px;" data-toggle="tooltip" data-placement="right" data-offset="0 0" title="" data-original-title="The block number in which transactions were recorded.">
+          
+             
+          <h3 data-test="block_detail_number" style="width: 25%;" data-toggle="tooltip" data-placement="top"  title="" data-original-title="The SHA256 hash of the parent block.">
+            
             <%= if block_type(@block) == "Block" do %>
+                
               <%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
             <% else %>
               <%= gettext("%{block_type} Height:", block_type: block_type(@block)) %>
               <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
             <% end %>
+                
           </h3>
           
           <div class="d-flex justify-content-start text-muted block-details-row">
@@ -36,11 +41,14 @@
 
           <!-- Block Hash -->
           <dl class="row">
+                
             <dt class="col-sm-3 text-muted"><%= gettext "Hash" %></dt>
             
             <dd class="col-sm-9"><a class="transaction__link"  data-toggle="tooltip" data-placement="top"  title="" data-original-title="The SHA256 hash of the block."><%= to_string(@block.hash) %></a></dd>
+             
           </dl>
                        
+
           <%= unless @block.number == 0 do %>
               <!-- Parent Hash -->
               <dl class="row">
@@ -123,9 +131,12 @@
       <div class="card card-background-1 flex-grow-1">
         <div class="card-body card-body-flex-column-space-between">
           <h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
-          <div class="text-right">
+          <div class="text-right tooltipCustom">
             <!-- Validator's Name -->
-            <h3 class="address-balance-text text-truncate"  data-toggle="tooltip" data-offset ="0 20" data-placement="left" title="" data-original-title="Block Miner / Validator Address">
+            <span class="tooltiptextTopMiner"> Validator's Name</span>
+
+            <h3 class="address-balance-text text-truncate" >
+
               <%= render BlockScoutWeb.AddressView,
                 "_link.html",
                 address: @block.miner,
@@ -135,17 +146,18 @@
           </div>
         </div>
       </div>
-
       <!-- Validator Reward or Gas-->
       <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0" >
-        <div class="card-body card-body-flex-column-space-between" data-toggle="tooltip" data-offset ="0 0" data-animation="true" data-placement="left" title="" data-original-title="If Miner : Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.
-If POA : Amount of distributed reward. Currently validators receive 1 POA token + TX fees, and the Emission fund receives 1 POA per validated block.
-If xDai : Validators receive Tx fees if collected (If transactions exist in the block)">
+        <div class="card-body card-body-flex-column-space-between">
+        
           <%= if show_reward?(@block.rewards) do %>
             <h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
-            <div class="text-right">
+            <div class="text-right tooltipCustom">
+                            <span class="tooltiptextTopR">  Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees. </span>
               <%= for block_reward <- @block.rewards do %>
+            
                 <p class="address-current-balance "><%= block_reward_text(block_reward) %> <span class="text-muted"><%= format_wei_value(block_reward.reward, :ether) %></span></p>
+                
               <% end %>
             </div>
           <% else %>
@@ -156,6 +168,7 @@ If xDai : Validators receive Tx fees if collected (If transactions exist in the
                 <span class="text-muted">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span>
               </h3>
               <p class="address-current-balance"><%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %></p>
+             
             </div>
           <% end %>
         </div>

apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex

@@ -72,6 +72,13 @@
       <div class="card-section col-md-12 col-lg-4 pl-0-md">
         <div class="card card-background-1">
           <div class="card-body">
+              <!-- ADDITION: Need logic to display section below if @token is
+               ERC721 -->
+            <div class="erc721-image" >
+           <img src="/images/ether1_logo.svg" />
+            </div>
+               <!-- ADDITION END -->
+              
             <h2 class="card-title balance-card-title"><%= gettext "Total Supply" %></h2>
             <div class="text-right">
               <h3 class="text-uppercase">

apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex

@@ -23,4 +23,10 @@
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
     </div>
   </div>
+
+
+
 </section>
+
+ 
+