Merge pull request #3385 from poanetwork/vb-gas-usage-main-page

Gas usage at main page

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

@@ -52,11 +52,25 @@ $tooltip-background-color: $btn-line-color !default;
     }
 }
 
-.token-bridge-market-cap-header {
+.tooltip-gas-usage {
+    .tooltip-inner {
+        @media (min-width: 576px) {
+            max-width: 150px !important;
+        }
+        @media (min-width: 768px) {
+            max-width: 150px !important;
+        }
+        width: 150px !important;
+    }
+}
+
+.custom-tooltip-header {
     font-size: 1.2em;
     margin-bottom: 10px;
 }
 
-.token-bridge-market-cap-description {
+.custom-tooltip-description {
-    text-align: left;
+    .left {
+        text-align: left;
+    }
 }

apps/block_scout_web/assets/js/pages/chain.js

@@ -29,6 +29,7 @@ export const initialState = {
   transactionsError: false,
   transactionsLoading: true,
   transactionCount: null,
+  totalGasUsageCount: null,
   usdMarketCap: null,
   blockCount: null
 }
@@ -185,6 +186,15 @@ const elements = {
       $el.empty().append(numeral(state.transactionCount).format())
     }
   },
+  '[data-selector="total-gas-usage"]': {
+    load ($el) {
+      return { totalGasUsageCount: numeral($el.text()).value() }
+    },
+    render ($el, state, oldState) {
+      if (oldState.totalGasUsageCount === state.totalGasUsageCount) return
+      $el.empty().append(numeral(state.totalGasUsageCount).format())
+    }
+  },
   '[data-selector="block-count"]': {
     load ($el) {
       return { blockCount: numeral($el.text()).value() }

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

@@ -13,6 +13,7 @@ defmodule BlockScoutWeb.ChainController do
 
   def show(conn, _params) do
     transaction_estimated_count = Chain.transaction_estimated_count()
+    total_gas_usage = Chain.total_gas_usage()
     block_count = Chain.block_estimated_count()
     address_count = Chain.address_estimated_count()
 
@@ -50,6 +51,7 @@ defmodule BlockScoutWeb.ChainController do
       chart_data_paths: chart_data_paths,
       market_cap_calculation: market_cap_calculation,
       transaction_estimated_count: transaction_estimated_count,
+      total_gas_usage: total_gas_usage,
       transactions_path: recent_transactions_path(conn, :index),
       transaction_stats: transaction_stats,
       block_count: block_count,

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

@@ -74,7 +74,7 @@
                       data-placement="top"
                       data-html="true"
                       data-template="<div class='tooltip tooltip-inversed-color tooltip-market-cap' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
-                      title="<div class='token-bridge-market-cap-header'><b><%= format_usd_value(total_market_cap) %></b> is a sum of assets locked in TokenBridge and OmniBridge</div><div class='token-bridge-market-cap-description'><b><%= format_usd_value(token_bridge_market_cap) %></b> locked in Dai in TokenBridge <br/><b><%= format_usd_value(omni_bridge_market_cap) %></b> locked in different assets in OmniBridge</div>">
+                      title="<div class='custom-tooltip-header'><b><%= format_usd_value(total_market_cap) %></b> is a sum of assets locked in TokenBridge and OmniBridge</div><div class='custom-tooltip-description left'><b><%= format_usd_value(token_bridge_market_cap) %></b> locked in Dai in TokenBridge <br/><b><%= format_usd_value(omni_bridge_market_cap) %></b> locked in different assets in OmniBridge</div>">
                       <i style="color: #ffffff;" class="fa fa-info-circle ml-1" data-test="token-bridge-supply"></i>
                     </span>
                   <% end %>
@@ -118,9 +118,22 @@
             <span class="dashboard-banner-network-stats-label">
               <%= gettext "Total transactions" %>
             </span>
-            <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
+            <div style="display: flex;">
-              <%= BlockScoutWeb.Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
+              <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
-            </span>
+                <%= BlockScoutWeb.Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
+              </span>
+              <%= if @total_gas_usage > 0 do %>
+                <span
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  data-html="true"
+                  data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-usage' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+                  title="<div class='custom-tooltip-header'>Total gas used</div><div class='custom-tooltip-description'><b><%= BlockScoutWeb.Cldr.Number.to_string!(@total_gas_usage, format: "#,###") %><b></div>"
+                  style="margin-top:8px;">
+                  <i style="color: #ffffff;" class="fa fa-info-circle ml-2"></i>
+                </span>
+              <% end %>
+            </div>
           </div>
           <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-3">
             <span class="dashboard-banner-network-stats-label">

apps/block_scout_web/lib/block_scout_web/views/bridged_tokens_view.ex

@@ -22,10 +22,10 @@ defmodule BlockScoutWeb.BridgedTokensView do
   end
 
   def owl_token_amb_info do
-    "<div class='token-bridge-market-cap-header'>OWL token bridged through AMB extension with support of <i>burnOWL</i> method. It is recommended to use.</div>"
+    "<div class='custom-tooltip-header'>OWL token bridged through AMB extension with support of <i>burnOWL</i> method. It is recommended to use.</div>"
   end
 
   def owl_token_omni_info do
-    "<div class='token-bridge-market-cap-header'>OWL token bridged through OmniBridge without support of <i>burnOWL</i> method. It is not recommended to use.</div>"
+    "<div class='custom-tooltip-header'>OWL token bridged through OmniBridge without support of <i>burnOWL</i> method. It is not recommended to use.</div>"
   end
 end

apps/block_scout_web/priv/gettext/default.pot

@@ -236,7 +236,7 @@ msgid "BlockScout provides analytics data, API, and Smart Contract tools for the
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:152
+#: lib/block_scout_web/templates/chain/show.html.eex:165
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 msgid "Blocks"
@@ -1065,7 +1065,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:213
+#: lib/block_scout_web/templates/chain/show.html.eex:226
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
 msgid "More transactions have come in"
@@ -1309,7 +1309,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
-#: lib/block_scout_web/templates/chain/show.html.eex:156
+#: lib/block_scout_web/templates/chain/show.html.eex:169
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:44
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
@@ -1324,7 +1324,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:219
+#: lib/block_scout_web/templates/chain/show.html.eex:232
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1453,7 +1453,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:127
+#: lib/block_scout_web/templates/chain/show.html.eex:140
 msgid "Total blocks"
 msgstr ""
 
@@ -1593,12 +1593,12 @@ msgid "Version"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:151
+#: lib/block_scout_web/templates/chain/show.html.eex:164
 msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:209
+#: lib/block_scout_web/templates/chain/show.html.eex:222
 msgid "View All Transactions"
 msgstr ""
 
@@ -1640,7 +1640,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:135
+#: lib/block_scout_web/templates/chain/show.html.eex:148
 msgid "Wallet addresses"
 msgstr ""
 
@@ -1867,7 +1867,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:210
+#: lib/block_scout_web/templates/chain/show.html.eex:223
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 #: lib/block_scout_web/views/address_view.ex:349
 msgid "Transactions"

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

@@ -236,7 +236,7 @@ msgid "BlockScout provides analytics data, API, and Smart Contract tools for the
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:152
+#: lib/block_scout_web/templates/chain/show.html.eex:165
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 msgid "Blocks"
@@ -1065,7 +1065,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:213
+#: lib/block_scout_web/templates/chain/show.html.eex:226
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
 msgid "More transactions have come in"
@@ -1309,7 +1309,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
-#: lib/block_scout_web/templates/chain/show.html.eex:156
+#: lib/block_scout_web/templates/chain/show.html.eex:169
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:44
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
@@ -1324,7 +1324,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:219
+#: lib/block_scout_web/templates/chain/show.html.eex:232
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1453,7 +1453,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:127
+#: lib/block_scout_web/templates/chain/show.html.eex:140
 msgid "Total blocks"
 msgstr ""
 
@@ -1593,12 +1593,12 @@ msgid "Version"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:151
+#: lib/block_scout_web/templates/chain/show.html.eex:164
 msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:209
+#: lib/block_scout_web/templates/chain/show.html.eex:222
 msgid "View All Transactions"
 msgstr ""
 
@@ -1640,7 +1640,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:135
+#: lib/block_scout_web/templates/chain/show.html.eex:148
 msgid "Wallet addresses"
 msgstr ""
 
@@ -1867,7 +1867,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:210
+#: lib/block_scout_web/templates/chain/show.html.eex:223
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 #: lib/block_scout_web/views/address_view.ex:349
 msgid "Transactions"

apps/explorer/lib/explorer/application.ex

@@ -14,6 +14,7 @@ defmodule Explorer.Application do
     BlockCount,
     BlockNumber,
     Blocks,
+    GasUsage,
     NetVersion,
     TransactionCount,
     Transactions,
@@ -52,6 +53,7 @@ defmodule Explorer.Application do
       AddressSumMinusBurnt,
       BlockCount,
       Blocks,
+      GasUsage,
       NetVersion,
       BlockNumber,
       con_cache_child_spec(MarketHistoryCache.cache_name()),

apps/explorer/lib/explorer/chain.ex

@@ -69,6 +69,7 @@ defmodule Explorer.Chain do
     BlockCount,
     BlockNumber,
     Blocks,
+    GasUsage,
     TransactionCount,
     Transactions,
     Uncles
@@ -1612,7 +1613,7 @@ defmodule Explorer.Chain do
         where: block.consensus == true
       )
 
-    Repo.one!(query)
+    Repo.one!(query) || 0
   end
 
   @spec fetch_sum_coin_total_supply_minus_burnt() :: non_neg_integer
@@ -1642,6 +1643,17 @@ defmodule Explorer.Chain do
     Repo.one!(query) || 0
   end
 
+  @spec fetch_sum_gas_used() :: non_neg_integer
+  def fetch_sum_gas_used do
+    query =
+      from(
+        t0 in Transaction,
+        select: fragment("SUM(t0.gas_used)")
+      )
+
+    Repo.one!(query) || 0
+  end
+
   @doc """
   The number of `t:Explorer.Chain.InternalTransaction.t/0`.
 
@@ -2739,6 +2751,17 @@ defmodule Explorer.Chain do
     end
   end
 
+  @spec total_gas_usage() :: non_neg_integer()
+  def total_gas_usage do
+    cached_value = GasUsage.get_sum()
+
+    if is_nil(cached_value) do
+      0
+    else
+      cached_value
+    end
+  end
+
   @doc """
   Estimated count of `t:Explorer.Chain.Block.t/0`.
 

apps/explorer/lib/explorer/chain/cache/gas_usage.ex

@@ -0,0 +1,65 @@
+defmodule Explorer.Chain.Cache.GasUsage do
+  @moduledoc """
+  Cache for total gas usage.
+  """
+
+  require Logger
+
+  @default_cache_period :timer.minutes(10)
+
+  use Explorer.Chain.MapCache,
+    name: :gas_usage,
+    key: :sum,
+    key: :async_task,
+    global_ttl: cache_period(),
+    ttl_check_interval: :timer.minutes(1),
+    callback: &async_task_on_deletion(&1)
+
+  alias Explorer.Chain
+
+  defp handle_fallback(:sum) do
+    # This will get the task PID if one exists and launch a new task if not
+    # See next `handle_fallback` definition
+    get_async_task()
+
+    {:return, nil}
+  end
+
+  defp handle_fallback(:async_task) do
+    # If this gets called it means an async task was requested, but none exists
+    # so a new one needs to be launched
+    {:ok, task} =
+      Task.start(fn ->
+        try do
+          result = Chain.fetch_sum_gas_used()
+
+          set_sum(result)
+        rescue
+          e ->
+            Logger.debug([
+              "Coudn't update gas used sum test #{inspect(e)}"
+            ])
+        end
+
+        set_async_task(nil)
+      end)
+
+    {:update, task}
+  end
+
+  # By setting this as a `callback` an async task will be started each time the
+  # `sum` expires (unless there is one already running)
+  defp async_task_on_deletion({:delete, _, :sum}), do: get_async_task()
+
+  defp async_task_on_deletion(_data), do: nil
+
+  defp cache_period do
+    "TOTAL_GAS_USAGE_CACHE_PERIOD"
+    |> System.get_env("")
+    |> Integer.parse()
+    |> case do
+      {integer, ""} -> :timer.seconds(integer)
+      _ -> @default_cache_period
+    end
+  end
+end