Merge release/v0.8.7 into main

.gitignore

@@ -59,3 +59,5 @@ screenshots/
 *.iml
 
 .vscode
+
+.elixir_ls

apps/block_scout_web/assets/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "insertSpaceBeforeFunctionParenthesis": "true"
+}

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

@@ -156,16 +156,17 @@ $card-tab-icon-color-active: #fff !default;
 .card-body {
   padding: $card-horizontal-padding;
   overflow-x: auto;
-  .recent-tx-list-page {
+  .recent-tx-list-page,
+  .table-list-page {
     .recent-preview-item-content {
       display: none;
     }
   }
-  .tx-fee-price-can-click{
+  .tx-fee-price-can-click {
     color: rgba(10, 143, 246, 1);
     cursor: pointer;
   }
-  .tx-fee-price-disable-click{
+  .tx-fee-price-disable-click {
     color: rgba(110, 118, 125, 1);
     cursor: auto;
   }
@@ -190,7 +191,7 @@ $card-tab-icon-color-active: #fff !default;
         position: relative;
         bottom: 1px;
       }
-      .transaction_detail_status_item_right_dark{
+      .transaction_detail_status_item_right_dark {
         display: none;
         margin-right: 5px;
         position: relative;
@@ -200,8 +201,8 @@ $card-tab-icon-color-active: #fff !default;
     .transaction_detail_status_item_true {
       margin-bottom: 8px;
     }
-    .transaction_detail_status_item_true_dark{
-      display:none;
+    .transaction_detail_status_item_true_dark {
+      display: none;
       margin-bottom: 8px;
     }
     .transaction_detail_status_item_active {
@@ -210,17 +211,17 @@ $card-tab-icon-color-active: #fff !default;
     }
   }
 }
-.dark-theme-applied{
+.dark-theme-applied {
   .transaction_detail_status_item_true {
-    display:none;
+    display: none;
   }
-  .transaction_detail_status_item_true_dark{
-    display:inline-block !important;
+  .transaction_detail_status_item_true_dark {
+    display: inline-block !important;
   }
   .transaction_detail_status_item_right {
     display: none;
   }
-  .transaction_detail_status_item_right_dark{
+  .transaction_detail_status_item_right_dark {
     display: inline-block !important;
   }
 }
@@ -262,7 +263,8 @@ $card-tab-icon-color-active: #fff !default;
       }
     }
   }
-  .recent-tx-list-page {
+  .recent-tx-list-page,
+  .table-list-page {
     min-width: 1130px;
   }
   .txn-list-table-item {
@@ -330,7 +332,7 @@ $card-tab-icon-color-active: #fff !default;
 }
 
 .card-chain-blocks {
-  min-height: 233px;
+  // min-height: 233px;
   max-height: auto;
   [class*="col-"]:last-child {
     .tile {
@@ -354,13 +356,13 @@ $card-tab-icon-color-active: #fff !default;
   display: flex;
   flex-direction: row;
   box-shadow: none;
-  margin-bottom:120px;
+  margin-bottom: 120px;
   @media (max-width: 1254px) {
     flex-direction: column;
   }
-  a{
-    &:hover{
-      color:#007bff;
+  a {
+    &:hover {
+      color: #007bff;
     }
   }
   .recent-preview-item {
@@ -416,7 +418,7 @@ $card-tab-icon-color-active: #fff !default;
           width: 110px;
         }
       }
-      .recent-preview-item-content-txn-l1-2-l2-link{
+      .recent-preview-item-content-txn-l1-2-l2-link {
         width: 90px;
         color: #007bff;
         @media (max-width: 368px) {
@@ -434,7 +436,7 @@ $card-tab-icon-color-active: #fff !default;
           white-space: nowrap;
           text-overflow: ellipsis;
           margin-left: 5px;
-          color:#007bff;
+          color: #007bff;
           @media (max-width: 500px) {
             width: 160px;
           }
@@ -449,7 +451,7 @@ $card-tab-icon-color-active: #fff !default;
           white-space: nowrap;
           text-overflow: ellipsis;
           margin-left: 5px;
-          color:#007bff;
+          color: #007bff;
           @media (max-width: 500px) {
             width: 80px;
           }
@@ -559,8 +561,8 @@ $card-tab-icon-color-active: #fff !default;
       }
     }
   }
-  
-  .tx-fee-price-disable-click{
+
+  .tx-fee-price-disable-click {
     color: rgba(159, 165, 169, 1);
     cursor: auto;
   }

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

@@ -200,11 +200,17 @@ $dashboard-banner-chart-axis-font-color-alt: #333;
     flex-direction: row;
     align-items: center;
     &:first-child {
-      margin-bottom: 30px;
+      margin-bottom: 15px;
       @media (max-width: 767px) {
         margin-bottom: 0;
       }
     }
+    &:last-child {
+      margin-top: 15px;
+      @media (max-width: 767px) {
+        margin-top: 0;
+      }
+    }
     @media (max-width: 767px) {
       width: 100%;
     }

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

@@ -53,9 +53,10 @@ $dropdown-menu-background: #cbe9e7;
   white-space: initial;
   border-radius: 6px;
   position: relative;
-  &[target='_blank']{
+  text-transform: capitalize;
+  &[target='_blank'] {
     padding-right: 20px;
-    &:after{
+    &:after {
       content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 8.5L9 8.5C7.89543 8.5 7 9.39543 7 10.5L7 14' stroke='%2315181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6L14.5 8.5L12 11' stroke='%2315181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
       width: 20px;
       height: 20px;

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

@@ -11,7 +11,7 @@
     padding: 5px;
     line-height: normal;
     vertical-align: bottom;
-    max-width: 110px;
+    max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -1,5 +1,6 @@
 .modal-backdrop {
-  background-color: $modal-overlay-color;
+  background-color: #00000033;
+  backdrop-filter: blur(8px);
 
   &.show {
     opacity: 1;
@@ -16,7 +17,7 @@
   margin: 0 auto;
 }
 
-.close.close-modal{
+.close.close-modal {
   left: auto;
   opacity: 1;
   position: absolute;
@@ -25,7 +26,7 @@
   outline: none !important;
 
   path {
-    fill: #F6F7F9;
+    fill: #f6f7f9;
   }
 }
 

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

@@ -35,15 +35,15 @@
 .autoComplete_wrapper {
   width: 100% !important;
   position: initial;
-  & > input{
-    @include textfield-placeholder(#6E767D);
+  & > input {
+    @include textfield-placeholder(#6e767d);
   }
-  .item-wrapper{
-    position:relative;
-    .hide-contract-address{
+  .item-wrapper {
+    position: relative;
+    .hide-contract-address {
       display: none;
     }
-    .common-contract-address{
+    .common-contract-address {
       display: inline-block;
       width: 18px;
       height: 18px;
@@ -61,9 +61,8 @@
       background: url(../static/images/verified.svg) no-repeat !important;
     }
   }
-
 }
-.dark-theme-applied{
+.dark-theme-applied {
   .autoComplete_wrapper {
     .is_contract_address {
       background: url(../static/images/dark_not_verified.svg) no-repeat !important;
@@ -86,11 +85,10 @@
     } */
 }
 
-
 .main-search-autocomplete,
 .main-search-autocomplete-mobile {
   font-size: 14px !important;
-  color: #15181C !important;
+  color: #15181c !important;
 }
 
 .autocomplete-category {
@@ -110,100 +108,102 @@
   border-radius: 2px;
 }
 
-ul[id^="autoComplete_list_"] {
+ul[id^='autoComplete_list_'] {
   border-radius: 12px !important;
   padding: 10px !important;
   top: calc(100% + 8px);
-  background: #F1FCFB;
-  .result-header{
+  background: #f1fcfb;
+  .result-header {
     white-space: nowrap;
     overflow: hidden;
     margin-left: -10px;
     margin-right: -10px;
     margin-top: -10px;
     margin-bottom: 10px;
     padding: 10px 10px 0;
-    border-bottom: 1px solid #CBE9E7;
+    border-bottom: 1px solid #cbe9e7;
     position: sticky;
     top: -10px;
-    background-color: #F1FCFB;
+    background-color: #f1fcfb;
     z-index: 1;
-    .result-header-content{
+    .result-header-content {
       display: flex;
       gap: 10px;
       overflow-x: scroll;
       padding-bottom: 10px;
-      .list-toggle{
+      .list-toggle {
         font-size: 12px;
         border-radius: 26px;
-        border: 1px solid #65B3AE;
-        color: #305A57;
+        border: 1px solid #65b3ae;
+        color: #305a57;
         padding: 2px 10px;
         transition: all 0.3s ease;
         cursor: pointer;
-        &.active,&:hover{
-          background-color: #65B3AE;
+        &.active,
+        &:hover {
+          background-color: #65b3ae;
           color: white;
-          border-color: #65B3AE;
+          border-color: #65b3ae;
         }
       }
     }
   }
-  .result-counter{
-    color: #4F8F8B;
-    &:not(.no-result){
-      border-bottom: 1px solid #CBE9E7;
+  .result-counter {
+    color: #4f8f8b;
+    &:not(.no-result) {
+      border-bottom: 1px solid #cbe9e7;
       padding-bottom: 5px;
     }
-    .counter-content{
+    .counter-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      p{
+      p {
         margin-bottom: 0;
-        &.label{
+        &.label {
           font-weight: 700;
           color: #152928;
           font-size: 14px;
         }
-        &.count{
-          color: #6E767D;
+        &.count {
+          color: #6e767d;
           font-size: 12px;
         }
       }
     }
   }
 }
 
-li[id^="autoComplete_result_"] {
+li[id^='autoComplete_result_'] {
   font-size: 12px !important;
   border-radius: 6px !important;
 
-  .result-match{
-    div{
+  .result-match {
+    padding-right: 20px;
+    div {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    & > div{
-      div:first-child{
-        color: #305A57;
+    & > div {
+      div:first-child {
+        color: #305a57;
       }
     }
   }
-  [id^="token-icon-"]{
+  [id^='token-icon-'] {
     display: flex;
     align-items: center;
   }
 }
 
-.autoComplete_wrapper > ul > li[id^="autoComplete_result_"]{
+.autoComplete_wrapper > ul > li[id^='autoComplete_result_'] {
   background-color: transparent;
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
   margin-right: 0;
-  &:hover{
+  &:hover {
     background: rgba(203, 233, 231, 0.5);
   }
 }