Manage local storage keys for the chart per chain, allow display price legend without price chart

CHANGELOG.md

@@ -22,6 +22,7 @@
 
 ### Chore
 
+- [#7343](https://github.com/blockscout/blockscout/pull/7343) - Management flexibility of charts dashboard on the main page
 - [#7337](https://github.com/blockscout/blockscout/pull/7337) - Account: derive Auth0 logout urls from existing envs
 - [#7332](https://github.com/blockscout/blockscout/pull/7332) - Add volume for Postgres Docker containers DB
 - [#7328](https://github.com/blockscout/blockscout/pull/7328) - Update Docker image tag latest with release only

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

@@ -1,3 +1,5 @@
+$main-search-autocomplete-background-color: #f5f6fa !default;
+
 .mobile-search-show {
     @media screen and (max-width: 992px) {
         width: 100%;
@@ -34,7 +36,7 @@
     padding: 0 !important;
     border: none !important;
     border-radius: 0 !important;
-    background-color: #f5f6fa !important;
+    background-color: $main-search-autocomplete-background-color !important;
     @media screen and (max-width: 992px) {
         height: auto !important;
     }

apps/block_scout_web/assets/js/lib/csv_download.js

@@ -27,10 +27,10 @@ function generateDatePicker (classSelector, defaultDate) {
 $button.on('click', () => {
   // @ts-ignore
   // eslint-disable-next-line
-  const reCaptchaV2ClientKey = document.getElementById('re-captcha-client-key').value
+  const reCaptchaV2ClientKey = document.getElementById('js-re-captcha-client-key').value
   // @ts-ignore
   // eslint-disable-next-line
-  const reCaptchaV3ClientKey = document.getElementById('re-captcha-v3-client-key').value
+  const reCaptchaV3ClientKey = document.getElementById('js-re-captcha-v3-client-key').value
   const addressHash = $button.data('address-hash')
   const from = $('.js-datepicker-from').val()
   const to = $('.js-datepicker-to').val()

apps/block_scout_web/assets/js/lib/history_chart.js

@@ -12,6 +12,14 @@ import sassVariables from '../../css/export-vars-to-js.module.scss'
 Chart.defaults.font.family = 'Nunito, "Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
 Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip)
 
+// @ts-ignore
+const coinName = document.getElementById('js-coin-name').value
+const chainId = document.getElementById('js-chain-id').value
+const priceDataKey = `priceData${coinName}`
+const txHistoryDataKey = `txHistoryData${coinName}${chainId}`
+const marketCapDataKey = `marketCapData${coinName}${chainId}`
+const isChartLoadedKey = `isChartLoaded${coinName}${chainId}`
+
 const grid = {
   display: false,
   drawBorder: false,
@@ -157,16 +165,16 @@ function setDataToLocalStorage (key, data) {
 
 function getPriceData (marketHistoryData) {
   if (marketHistoryData.length === 0) {
-    return getDataFromLocalStorage('priceData')
+    return getDataFromLocalStorage(priceDataKey)
   }
   const data = marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
-  setDataToLocalStorage('priceData', data)
+  setDataToLocalStorage(priceDataKey, data)
   return data
 }
 
 function getTxHistoryData (transactionHistory) {
   if (transactionHistory.length === 0) {
-    return getDataFromLocalStorage('txHistoryData')
+    return getDataFromLocalStorage(txHistoryDataKey)
   }
   const data = transactionHistory.map(dataPoint => ({ x: dataPoint.date, y: dataPoint.number_of_transactions }))
 
@@ -176,13 +184,13 @@ function getTxHistoryData (transactionHistory) {
   const curDay = prevDay.plus({ days: 1 }).toISODate()
   data.unshift({ x: curDay, y: null })
 
-  setDataToLocalStorage('txHistoryData', data)
+  setDataToLocalStorage(txHistoryDataKey, data)
   return data
 }
 
 function getMarketCapData (marketHistoryData, availableSupply) {
   if (marketHistoryData.length === 0) {
-    return getDataFromLocalStorage('marketCapData')
+    return getDataFromLocalStorage(marketCapDataKey)
   }
   const data = marketHistoryData.map(({ date, closingPrice }) => {
     const supply = (availableSupply !== null && typeof availableSupply === 'object')
@@ -190,7 +198,7 @@ function getMarketCapData (marketHistoryData, availableSupply) {
       : availableSupply
     return { x: date, y: closingPrice * supply }
   })
-  setDataToLocalStorage('marketCapData', data)
+  setDataToLocalStorage(marketCapDataKey, data)
   return data
 }
 
@@ -278,7 +286,6 @@ class MarketHistoryChart {
     // @ts-ignore
     config.data.datasets = [this.price, this.marketCap, this.numTransactions]
 
-    const isChartLoadedKey = 'isChartLoaded'
     const isChartLoaded = window.sessionStorage.getItem(isChartLoadedKey) === 'true'
     if (isChartLoaded) {
       config.options.animation = false

apps/block_scout_web/assets/js/lib/path_helper.js

@@ -1,4 +1,4 @@
-const pathObj = document.getElementById('network-path')
+const pathObj = document.getElementById('js-network-path')
 // @ts-ignore
 const commonPath = (pathObj && pathObj.value) || ''
 

apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex

@@ -40,7 +40,7 @@ defmodule BlockScoutWeb.ChainController do
       transaction: transaction_history_chart_path(conn, :show)
     }
 
-    chart_config = Application.get_env(:block_scout_web, :chart_config, %{})
+    chart_config = Application.get_env(:block_scout_web, :chart)[:chart_config]
 
     render(
       conn,

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

@@ -27,15 +27,16 @@
          document.documentElement.style.setProperty("--numChartData", numChartData);
         </script>
         <div class="dashboard-banner-chart-legend">
-          <%= if Map.has_key?(@chart_config, :market) do %>
+          <% price_chart_legend_enabled? = Application.get_env(:block_scout_web, :chart)[:price_chart_legend_enabled?] %>
+          <%= if Map.has_key?(@chart_config, :market) || price_chart_legend_enabled? do %>
 
             <%# THE FOLLOWING LINE PREVENTS COPY/PASTE ERRORS %>
             <%# Explicity put @chart_config.market in a variable %>
             <%# This is done so that when people add a new chart source, x, %>
             <%# They wont just access @chart_config.x w/o first checking if x exists%>
-            <% market_chart_config = @chart_config.market%>
+            <% market_chart_config = Map.has_key?(@chart_config, :market) && @chart_config.market%>
 
-            <%= if Enum.member?(market_chart_config, :price) do %>
+            <%= if price_chart_legend_enabled? || Enum.member?(market_chart_config, :price) do %>
               <div class="dashboard-banner-chart-legend-item price-per-day">
                   <span class="dashboard-banner-chart-legend-label">
                   <%= Explorer.coin_name() %> <%= gettext "Price" %>
@@ -46,7 +47,7 @@
                 </div>
               </div>
             <% end %>
-            <%= if Enum.member?(@chart_config.market, :market_cap) do %>
+            <%= if price_chart_legend_enabled? || Enum.member?(@chart_config.market, :market_cap) do %>
             <div class="dashboard-banner-chart-legend-item market-cap-per-day">
                 <span class="dashboard-banner-chart-legend-label">
                 <%= gettext "Market Cap" %>

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

@@ -63,9 +63,10 @@
       <div id="indexer-first-block" class="d-none" ><%= Application.get_env(:indexer, :first_block) %></div>
       <input id="js-chain-id" class="d-none" value="<%= Application.get_env(:block_scout_web, :chain_id) %>" />
       <input id="js-json-rpc" class="d-none" value="<%= Application.get_env(:block_scout_web, :json_rpc) %>" />
-      <input id="re-captcha-client-key" class="d-none" value="<%= Application.get_env(:block_scout_web, :recaptcha)[:v2_client_key] %>" />
-      <input id="re-captcha-v3-client-key" class="d-none" value="<%= Application.get_env(:block_scout_web, :recaptcha)[:v3_client_key] %>" />
-      <input id="network-path" class="d-none" value="<%= Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)[:url][:path] %>" />
+      <input id="js-coin-name" class="d-none" value="<%= Application.get_env(:explorer, :coin_name) %>" />
+      <input id="js-re-captcha-client-key" class="d-none" value="<%= Application.get_env(:block_scout_web, :recaptcha)[:v2_client_key] %>" />
+      <input id="js-re-captcha-v3-client-key" class="d-none" value="<%= Application.get_env(:block_scout_web, :recaptcha)[:v3_client_key] %>" />
+      <input id="js-network-path" class="d-none" value="<%= Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)[:url][:path] %>" />
       <!-- -->
       <% show_maintenance_alert = Application.get_env(:block_scout_web, BlockScoutWeb.Chain)[:show_maintenance_alert] %>
       <%= if show_maintenance_alert do %>

apps/block_scout_web/priv/gettext/default.pot

@@ -81,7 +81,7 @@ msgstr ""
 msgid ") may be added for each contract. Click the Add Library button to add an additional one."
 msgstr ""
 
-#: lib/block_scout_web/templates/layout/app.html.eex:86
+#: lib/block_scout_web/templates/layout/app.html.eex:87
 #, elixir-autogen, elixir-format
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
@@ -335,7 +335,7 @@ msgstr ""
 msgid "Average"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:100
+#: lib/block_scout_web/templates/chain/show.html.eex:101
 #, elixir-autogen, elixir-format
 msgid "Average block time"
 msgstr ""
@@ -473,7 +473,7 @@ msgstr ""
 msgid "Blockchain"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:153
+#: lib/block_scout_web/templates/chain/show.html.eex:154
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 #, elixir-autogen, elixir-format
@@ -971,7 +971,7 @@ msgstr ""
 msgid "Custom ABI from account"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:69
+#: lib/block_scout_web/templates/chain/show.html.eex:70
 #, elixir-autogen, elixir-format
 msgid "Daily Transactions"
 msgstr ""
@@ -1633,7 +1633,7 @@ msgstr ""
 msgid "Main Networks"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:52
+#: lib/block_scout_web/templates/chain/show.html.eex:53
 #: lib/block_scout_web/templates/layout/app.html.eex:50
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:85
 #: lib/block_scout_web/views/address_view.ex:145
@@ -1723,7 +1723,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:46
-#: lib/block_scout_web/templates/chain/show.html.eex:216
+#: lib/block_scout_web/templates/chain/show.html.eex:217
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:13
 #: lib/block_scout_web/templates/transaction/index.html.eex:19
 #, elixir-autogen, elixir-format
@@ -2012,7 +2012,7 @@ msgstr ""
 msgid "Press / and focus will be moved to the search field"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:41
+#: lib/block_scout_web/templates/chain/show.html.eex:42
 #: lib/block_scout_web/templates/layout/app.html.eex:51
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:96
 #, elixir-autogen, elixir-format
@@ -2317,7 +2317,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:50
 #: lib/block_scout_web/templates/address_validation/index.html.eex:20
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:22
-#: lib/block_scout_web/templates/chain/show.html.eex:157
+#: lib/block_scout_web/templates/chain/show.html.eex:158
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:24
 #: lib/block_scout_web/templates/tokens/instance/holder/index.html.eex:23
@@ -2334,7 +2334,7 @@ msgstr ""
 msgid "Something went wrong, click to reload."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:222
+#: lib/block_scout_web/templates/chain/show.html.eex:223
 #, elixir-autogen, elixir-format
 msgid "Something went wrong, click to retry."
 msgstr ""
@@ -2809,7 +2809,7 @@ msgstr ""
 msgid "Total Supply * Price"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:130
+#: lib/block_scout_web/templates/chain/show.html.eex:131
 #, elixir-autogen, elixir-format
 msgid "Total blocks"
 msgstr ""
@@ -2834,7 +2834,7 @@ msgstr ""
 msgid "Total transaction fee."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:109
+#: lib/block_scout_web/templates/chain/show.html.eex:110
 #, elixir-autogen, elixir-format
 msgid "Total transactions"
 msgstr ""
@@ -2912,7 +2912,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:13
 #: lib/block_scout_web/templates/block/overview.html.eex:80
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
-#: lib/block_scout_web/templates/chain/show.html.eex:213
+#: lib/block_scout_web/templates/chain/show.html.eex:214
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:49
 #: lib/block_scout_web/views/address_view.ex:375
 #, elixir-autogen, elixir-format
@@ -3146,12 +3146,12 @@ msgstr ""
 msgid "Via multi-part files"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:152
+#: lib/block_scout_web/templates/chain/show.html.eex:153
 #, elixir-autogen, elixir-format
 msgid "View All Blocks"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:212
+#: lib/block_scout_web/templates/chain/show.html.eex:213
 #, elixir-autogen, elixir-format
 msgid "View All Transactions"
 msgstr ""
@@ -3224,7 +3224,7 @@ msgstr ""
 msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:138
+#: lib/block_scout_web/templates/chain/show.html.eex:139
 #, elixir-autogen, elixir-format
 msgid "Wallet addresses"
 msgstr ""

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

@@ -81,7 +81,7 @@ msgstr ""
 msgid ") may be added for each contract. Click the Add Library button to add an additional one."
 msgstr ""
 
-#: lib/block_scout_web/templates/layout/app.html.eex:86
+#: lib/block_scout_web/templates/layout/app.html.eex:87
 #, elixir-autogen, elixir-format
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
@@ -335,7 +335,7 @@ msgstr ""
 msgid "Average"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:100
+#: lib/block_scout_web/templates/chain/show.html.eex:101
 #, elixir-autogen, elixir-format
 msgid "Average block time"
 msgstr ""
@@ -473,7 +473,7 @@ msgstr ""
 msgid "Blockchain"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:153
+#: lib/block_scout_web/templates/chain/show.html.eex:154
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 #, elixir-autogen, elixir-format
@@ -971,7 +971,7 @@ msgstr ""
 msgid "Custom ABI from account"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:69
+#: lib/block_scout_web/templates/chain/show.html.eex:70
 #, elixir-autogen, elixir-format
 msgid "Daily Transactions"
 msgstr ""
@@ -1633,7 +1633,7 @@ msgstr ""
 msgid "Main Networks"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:52
+#: lib/block_scout_web/templates/chain/show.html.eex:53
 #: lib/block_scout_web/templates/layout/app.html.eex:50
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:85
 #: lib/block_scout_web/views/address_view.ex:145
@@ -1723,7 +1723,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:46
-#: lib/block_scout_web/templates/chain/show.html.eex:216
+#: lib/block_scout_web/templates/chain/show.html.eex:217
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:13
 #: lib/block_scout_web/templates/transaction/index.html.eex:19
 #, elixir-autogen, elixir-format
@@ -2012,7 +2012,7 @@ msgstr ""
 msgid "Press / and focus will be moved to the search field"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:41
+#: lib/block_scout_web/templates/chain/show.html.eex:42
 #: lib/block_scout_web/templates/layout/app.html.eex:51
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:96
 #, elixir-autogen, elixir-format
@@ -2317,7 +2317,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:50
 #: lib/block_scout_web/templates/address_validation/index.html.eex:20
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:22
-#: lib/block_scout_web/templates/chain/show.html.eex:157
+#: lib/block_scout_web/templates/chain/show.html.eex:158
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:24
 #: lib/block_scout_web/templates/tokens/instance/holder/index.html.eex:23
@@ -2334,7 +2334,7 @@ msgstr ""
 msgid "Something went wrong, click to reload."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:222
+#: lib/block_scout_web/templates/chain/show.html.eex:223
 #, elixir-autogen, elixir-format
 msgid "Something went wrong, click to retry."
 msgstr ""
@@ -2809,7 +2809,7 @@ msgstr ""
 msgid "Total Supply * Price"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:130
+#: lib/block_scout_web/templates/chain/show.html.eex:131
 #, elixir-autogen, elixir-format
 msgid "Total blocks"
 msgstr ""
@@ -2834,7 +2834,7 @@ msgstr ""
 msgid "Total transaction fee."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:109
+#: lib/block_scout_web/templates/chain/show.html.eex:110
 #, elixir-autogen, elixir-format
 msgid "Total transactions"
 msgstr ""
@@ -2912,7 +2912,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:13
 #: lib/block_scout_web/templates/block/overview.html.eex:80
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
-#: lib/block_scout_web/templates/chain/show.html.eex:213
+#: lib/block_scout_web/templates/chain/show.html.eex:214
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:49
 #: lib/block_scout_web/views/address_view.ex:375
 #, elixir-autogen, elixir-format
@@ -3146,12 +3146,12 @@ msgstr ""
 msgid "Via multi-part files"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:152
+#: lib/block_scout_web/templates/chain/show.html.eex:153
 #, elixir-autogen, elixir-format
 msgid "View All Blocks"
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:212
+#: lib/block_scout_web/templates/chain/show.html.eex:213
 #, elixir-autogen, elixir-format
 msgid "View All Transactions"
 msgstr ""
@@ -3224,7 +3224,7 @@ msgstr ""
 msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
-#: lib/block_scout_web/templates/chain/show.html.eex:138
+#: lib/block_scout_web/templates/chain/show.html.eex:139
 #, elixir-autogen, elixir-format
 msgid "Wallet addresses"
 msgstr ""

config/runtime.exs

@@ -109,6 +109,9 @@ price_chart_config =
     %{}
   end
 
+price_chart_legend_enabled? =
+  ConfigHelper.parse_bool_env_var("SHOW_PRICE_CHART") || ConfigHelper.parse_bool_env_var("SHOW_PRICE_CHART_LEGEND")
+
 tx_chart_config =
   if ConfigHelper.parse_bool_env_var("SHOW_TXS_CHART", "true") do
     %{transactions: [:transactions_per_day]}
@@ -116,8 +119,9 @@ tx_chart_config =
     %{}
   end
 
-config :block_scout_web,
-  chart_config: Map.merge(price_chart_config, tx_chart_config)
+config :block_scout_web, :chart,
+  chart_config: Map.merge(price_chart_config, tx_chart_config),
+  price_chart_legend_enabled?: price_chart_legend_enabled?
 
 config :block_scout_web, BlockScoutWeb.Chain.Address.CoinBalance,
   coin_balance_history_days: ConfigHelper.parse_integer_env_var("COIN_BALANCE_HISTORY_DAYS", 10)

docker-compose/envs/common-blockscout.env

@@ -125,6 +125,7 @@ CHECKSUM_FUNCTION=eth
 DISABLE_EXCHANGE_RATES=true
 TXS_STATS_ENABLED=true
 SHOW_PRICE_CHART=false
+SHOW_PRICE_CHART_LEGEND=false
 SHOW_TXS_CHART=true
 TXS_HISTORIAN_INIT_LAG=0
 TXS_STATS_DAYS_TO_COMPILE_AT_INIT=10

docker/Makefile

@@ -255,6 +255,9 @@ endif
 ifdef SHOW_PRICE_CHART
 	BLOCKSCOUT_CONTAINER_PARAMS += -e 'SHOW_PRICE_CHART=$(SHOW_PRICE_CHART)'
 endif
+ifdef SHOW_PRICE_CHART_LEGEND
+	BLOCKSCOUT_CONTAINER_PARAMS += -e 'SHOW_PRICE_CHART_LEGEND=$(SHOW_PRICE_CHART_LEGEND)'
+endif
 ifdef SHOW_TXS_CHART
 	BLOCKSCOUT_CONTAINER_PARAMS += -e 'SHOW_TXS_CHART=$(SHOW_TXS_CHART)'
 endif