Fix dark forest theme bugs, allow multiple contracts

apps/block_scout_web/assets/css/components/_log-search.scss

@@ -62,7 +62,7 @@
 	transition: .1s ease-in;
 	position: absolute;
 	top: 0;
-	right: 59px;
+	right: 56px;
 	&:hover {
 		color: #333;
 	}

apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss

@@ -142,12 +142,20 @@ $dark-primary-alternate: $dark-primary;
 		}
 	}
 
-	.card-tab .fa-check-circle {
+	.check_dark_forest_icon {
-		color: $dark-primary;
+		margin-left: 10px;
 	}
 
-	.card-tab.active .fa-check-circle {
+	.card-tab .check_dark_forest_icon {
-		color: $body-dark;
+		svg path {
+			fill: $dark-primary;
+		}
+	}
+
+	.card-tab.active .check_dark_forest_icon {
+		svg path {
+			fill: $body-dark;
+		}
 	}
 
 	.card-background-1 {
@@ -259,9 +267,11 @@ $dark-primary-alternate: $dark-primary;
 	}
 
 	.btn-copy-icon, .btn-qr-icon, .btn-address-card-icon .btn-contract-icon {
+		border-radius: 0;
+		border: none;
 		border-color: $dark-primary;
 		&:hover {
-			background-color: $labels-dark;
+			background-color: rgba(117, 249, 77, 0.4);
 		}
 	}
 	
@@ -274,7 +284,8 @@ $dark-primary-alternate: $dark-primary;
 		padding: 15px;
 		&:not(.no-hover):hover {
 			color: #fff;
-			background-color: $dark-light-bg;
+			border: 1px solid #fff;
+			background-color: $dark-primary;
 			path {
 				fill: #fff;
 			}
@@ -466,16 +477,19 @@ $dark-primary-alternate: $dark-primary;
 		background-color: $dark-light;
 		border-color: $dark-light;
 		color: #fff;
+		height: 32px;
+		border-radius: 0px;
+		border-color: #fff;
 	}
 
 	.logs-search-btn {
-		color: $labels-dark;
+		border: none;
-	}
+		background-color: $dark-primary;
+		color: $body-dark;
 
-	.logs-search-btn {
 		&:hover {
 			background-color: $dark-primary;
-			color: #fff;
+			color: $body-dark;
 		}
 	}
 
@@ -569,9 +583,9 @@ $dark-primary-alternate: $dark-primary;
 
 	// Content loading placeholders
 	.tile-loader, .table-content-loader {
-		background-color: $labels-dark !important;
+		background-color: rgba(117, 249, 77, 0.4) !important;
 		&:before {
-			background: linear-gradient(to right, $labels-dark 2%, lighten($labels-dark, 3) 18%, $labels-dark 33%);
+			background: linear-gradient(to right, rgba(117, 249, 77, 0.4) 2%, lighten(rgba(117, 249, 77, 0.4), 3) 18%, rgba(117, 249, 77, 0.4) 33%);
 		}
 	}
 
@@ -714,7 +728,7 @@ $dark-primary-alternate: $dark-primary;
 	.table-bordered, .table-bordered td, .table-bordered th {
 		border-color: darken($labels-dark, 30);
 	}
-	.dark-theme-applied .table td, .dark-theme-applied .table th, .dark-theme-applied hr {
+	.dark-forest-theme-applied .table td, .dark-forest-theme-applied .table th, .dark-forest-theme-applied hr {
 		border-top-color: darken($labels-dark, 30);
 	}
 	.btn-copy-ico svg path {
@@ -918,10 +932,6 @@ $dark-primary-alternate: $dark-primary;
 		background: $dark-primary;
 	}
 
-	.fa-check-circle {
-		content: url(/images/custom-themes/dark-forest/union.svg);
-	}
-
 	.custom-balance-icon {
 		content: url(/images/custom-themes/dark-forest/pic_balance.svg);
 		margin-right: 0px;
@@ -972,6 +982,9 @@ $dark-primary-alternate: $dark-primary;
 
 	.application-icon {
 		content: url(/images/custom-themes/dark-forest/planet.svg);
+		&:hover {
+			background-color: rgba(117, 249, 77, 0.4);
+		}
 		@media screen and (max-width: 768px) {
 			float: right;
 		}
@@ -987,18 +1000,18 @@ $dark-primary-alternate: $dark-primary;
 	border: none;
 }
 
-.dark-theme-applied .dropdown-item {
+.dark-forest-theme-applied .dropdown-item {
 	background-color: $dark-light!important;
 	color: #fff !important;
 }
 
-.dark-theme-applied .dropdown-item.active:not(.header), .dark-theme-applied .dropdown-item:not(.header):hover, .dark-theme-applied .dropdown-item:not(.header):focus {
+.dark-forest-theme-applied .dropdown-item.active:not(.header), .dark-forest-theme-applied .dropdown-item:not(.header):hover, .dark-forest-theme-applied .dropdown-item:not(.header):focus {
     background-image: none;
     width: 100%;
-    background-color: #3f426c !important;
+    background-color: rgba(117, 249, 77, 0.4) !important;
 }
 
-.dark-theme-applied .dropdown-item.active.header, .dark-theme-applied .dropdown-item.header:hover, .dark-theme-applied .dropdown-item.header:focus {
+.dark-forest-theme-applied .dropdown-item.active.header, .dark-forest-theme-applied .dropdown-item.header:hover, .dark-forest-theme-applied .dropdown-item.header:focus {
     background-color: $dark-light !important;
 }
 

apps/block_scout_web/assets/js/lib/smart_contract/write.js

@@ -64,7 +64,6 @@ export const hideConnectButton = () => {
           }
         })
       } else {
-        console.log(window.ethereum.selectedAddress)
         resolve({ shouldHide: true, account: window.ethereum.selectedAddress })
       }
     } else {

apps/block_scout_web/assets/js/pages/address/internal_transactions.js

@@ -69,12 +69,21 @@ const elements = {
     }
   },
   '[data-selector="channel-batching-count"]': {
-    render ($el, state, oldState) {
+    render ($el, state) {
       const $channelBatching = $('[data-selector="channel-batching-message"]')
       if (!state.internalTransactionsBatch.length) return $channelBatching.hide()
       $channelBatching.show()
       $el[0].innerHTML = numeral(state.internalTransactionsBatch.length).format()
     }
+  },
+  '[data-test="filter_dropdown"]': {
+    render ($el, state) {
+      if (state.emptyResponse && !state.isSearch) {
+        return $el.hide()
+      }
+
+      return $el.show()
+    }
   }
 }
 

apps/block_scout_web/assets/js/pages/address/token_transfers.js

@@ -50,6 +50,15 @@ const elements = {
     render ($el, state) {
       if (state.channelDisconnected) $el.show()
     }
+  },
+  '[data-test="filter_dropdown"]': {
+    render ($el, state) {
+      if (state.emptyResponse && !state.isSearch) {
+        return $el.hide()
+      }
+
+      return $el.show()
+    }
   }
 }
 

apps/block_scout_web/assets/js/pages/address/transactions.js

@@ -50,6 +50,15 @@ const elements = {
     render ($el, state) {
       if (state.channelDisconnected) $el.show()
     }
+  },
+  '[data-test="filter_dropdown"]': {
+    render ($el, state) {
+      if (state.emptyResponse && !state.isSearch) {
+        return $el.hide()
+      }
+
+      return $el.show()
+    }
   }
 }
 

apps/block_scout_web/config/config.exs

@@ -42,7 +42,7 @@ config :block_scout_web,
   gas_price: System.get_env("GAS_PRICE", nil),
   restricted_list: System.get_env("RESTRICTED_LIST", nil),
   restricted_list_key: System.get_env("RESTRICTED_LIST_KEY", nil),
-  dark_forest_address: System.get_env("CUSTOM_CONTRACT_ADDRESS_DARK_FOREST")
+  dark_forest_addresses: System.get_env("CUSTOM_CONTRACT_ADDRESSES_DARK_FOREST")
 
 config :block_scout_web, BlockScoutWeb.Counters.BlocksIndexedCounter, enabled: true
 

apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex

@@ -1,3 +1,5 @@
+<% dark_forest_addresses_list = CustomContractsHelpers.get_dark_forest_addresses_list() %>
+<% current_address = "0x" <> Base.encode16(@address.hash.bytes, case: :lower) %>
 <div class="card-tabs js-card-tabs">
   <%= link(
         gettext("Transactions"),
@@ -53,10 +55,17 @@
         class: "card-tab #{tab_status("contracts", @conn.request_path)}") do %>
         <%= gettext("Code") %>
       <%= if smart_contract_verified?(@address) do %>
+        <%= cond do %>
+          <% Enum.member?(dark_forest_addresses_list, current_address) -> %>
+            <i class="check_dark_forest_icon">
+              <%= render BlockScoutWeb.IconsView, "_check_dark_forest_icon.html" %>
+            </i>
+          <% true -> %>
             <i class="far fa-check-circle"></i>
         <% end %>
       <% end %>
     <% end %>
+  <% end %>
   <%= if has_decompiled_code?(@address) do %>
     <%= link(
         to: AccessHelpers.get_path(@conn, :address_decompiled_contract_path, :index, @address.hash),

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

@@ -1,6 +1,5 @@
 <section class="address-overview" data-page="address-details" data-page-address-hash="<%= @address.hash %>" data-async-counters="<%= @counters_path %>">
-  <% dark_forest_address_var = Application.get_env(:block_scout_web, :dark_forest_address) %>
+  <% dark_forest_addresses_list = CustomContractsHelpers.get_dark_forest_addresses_list() %>
-  <% dark_forest_address = if dark_forest_address_var, do: String.downcase(dark_forest_address_var), else: nil %>
   <% current_address = "0x" <> Base.encode16(@address.hash.bytes, case: :lower) %>
   <div class="row">
     <!-- Address details -->
@@ -8,14 +7,24 @@
       <div class="card">
         <div class="card-body">
           <%= cond do %>
-            <% current_address == dark_forest_address -> %>
+            <% Enum.member?(dark_forest_addresses_list, current_address) -> %>
               <div class="custom-dapp-header-container">
                 <img class="custom-address-icon"/>
                 <div class="custom-dapp-header-description-container">
                   <span class="address-detail-item custom-address-details">
                     <%= gettext "zkSnark space warfare (v0.4)" %>
                   </span>
-                  <a href="https://zkga.me/" target="_blank" class="application-icon-link"><img class="application-icon"/></a>
+                  <a href="https://zkga.me/" target="_blank" class="application-icon-link">
+                    <span
+                      aria-label='<%= gettext("Play") %>'
+                      class="application-icon"
+                      data-placement="top"
+                      data-toggle="tooltip"
+                      title='<%= gettext("Play") %>'
+                    >
+                      <img class="application-icon"/>
+                    </span>
+                  </a>
                 </div>
               </div>
             <% true -> %>

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

@@ -17,7 +17,8 @@
         </div>
         <div class="clearfix">
           <h2 class="card-title float-left"><%= gettext "Internal Transactions" %></h2>
-          <div class="dropdown float-right u-push-sm">
+          <div class="top-pagination-outer-container float-right">
+            <div class="dropdown u-push-sm">
               <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
                 id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Filter: <%= format_current_filter(@filter) %>
@@ -43,9 +44,9 @@
                 ) %>
               </div>
             </div>
-        </div>
-
             <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+          </div>
+        </div>
 
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
           <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>

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

@@ -15,7 +15,8 @@
         <%= if !assigns[:token] do %>
         <div class="clearfix">
           <h2 class="card-title float-left"><%= gettext "Transactions" %></h2>
-          <div class="dropdown float-right u-push-sm">
+          <div class="top-pagination-outer-container float-right">
+            <div class="dropdown u-push-sm">
               <button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
                 id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Filter: <%= format_current_filter(@filter) %>
@@ -41,11 +42,11 @@
                 ) %>
               </div>
             </div>
+            <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+          </div>
         </div>
         <% end %>
 
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-
         <div data-empty-response-message class="tile tile-muted text-center" style="display: none;">
           <span><%= gettext "There are no token transfers for this address." %></span>
         </div>

apps/block_scout_web/lib/block_scout_web/templates/icons/_check_dark_forest_icon.html.eex

@@ -0,0 +1 @@
+<svg fill="none" height="10" viewBox="0 0 14 10" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m1.41421 3.53553-1.41421 1.41422 4.94975 4.94975 8.48525-8.48529-1.4142-1.41421-7.07105 7.07107z" fill="#75f94d"/></svg>

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -36,15 +36,17 @@
   </head>
 
   <body>
-    <% dark_forest_address_var = Application.get_env(:block_scout_web, :dark_forest_address) %>
+    <% raw_dark_forest_addresses = CustomContractsHelpers.get_raw_dark_forest_addresses_list() %>
-    <% dark_forest_address = if dark_forest_address_var, do: String.downcase(dark_forest_address_var), else: nil %>
     <script>
       function applyCustomMode() {
-        const darkForestContractAddressHash = "<%= dark_forest_address %>"
+        const darkForestContractAddressHashes = "<%= raw_dark_forest_addresses %>".split(',').map(hash => hash.toLowerCase())
 
+        darkForestContractAddressHashes.forEach(darkForestContractAddressHash => {
           if (window.location.pathname.toLowerCase().includes(darkForestContractAddressHash)) {
             document.body.className += " " + "dark-forest-theme-applied";
+            return;
           }
+        })
       }
       function applyDarkMode() {
         if (localStorage.getItem("current-color-mode") === "dark") {

apps/block_scout_web/lib/block_scout_web/views/address_view.ex

@@ -3,7 +3,7 @@ defmodule BlockScoutWeb.AddressView do
 
   require Logger
 
-  alias BlockScoutWeb.{AccessHelpers, LayoutView}
+  alias BlockScoutWeb.{AccessHelpers, CustomContractsHelpers, LayoutView}
   alias Explorer.Chain
   alias Explorer.Chain.{Address, Hash, InternalTransaction, SmartContract, Token, TokenTransfer, Transaction, Wei}
   alias Explorer.Chain.Block.Reward
@@ -132,7 +132,7 @@ defmodule BlockScoutWeb.AddressView do
       do: ""
 
   def balance_percentage(%Address{fetched_coin_balance: balance}, total_supply) do
-    if total_supply > 0 do
+    if Decimal.cmp(total_supply, 0) == :gt do
       balance
       |> Wei.to(:ether)
       |> Decimal.div(Decimal.new(total_supply))

apps/block_scout_web/lib/block_scout_web/views/custom_contracts_helpers.ex

@@ -0,0 +1,22 @@
+defmodule BlockScoutWeb.CustomContractsHelpers do
+  @moduledoc """
+  Helpers to enable custom contracts themes
+  """
+
+  def get_dark_forest_addresses_list do
+    dark_forest_addresses_var = get_raw_dark_forest_addresses_list()
+    dark_forest_addresses_list = (dark_forest_addresses_var && String.split(dark_forest_addresses_var, ",")) || []
+
+    formatted_dark_forest_addresses_list =
+      dark_forest_addresses_list
+      |> Enum.map(fn addr ->
+        String.downcase(addr)
+      end)
+
+    formatted_dark_forest_addresses_list
+  end
+
+  def get_raw_dark_forest_addresses_list do
+    Application.get_env(:block_scout_web, :dark_forest_addresses)
+  end
+end

apps/block_scout_web/lib/block_scout_web/views/layout_view.ex

@@ -31,7 +31,7 @@ defmodule BlockScoutWeb.LayoutView do
     }
   ]
 
-  alias BlockScoutWeb.SocialMedia
+  alias BlockScoutWeb.{CustomContractsHelpers, SocialMedia}
 
   def logo do
     Keyword.get(application_config(), :logo) || "/images/blockscout_logo.svg"