Add broadcasting of coin balance

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#5588](https://github.com/blockscout/blockscout/pull/5588) - Add broadcasting of coin balance
 - [#5479](https://github.com/blockscout/blockscout/pull/5479) - Remake of solidity verifier module; Verification UX improvements
 - [#5540](https://github.com/blockscout/blockscout/pull/5540) - Tx page: scroll to selected tab's data
 

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

@@ -80,6 +80,15 @@ export function reducer (state = initialState, action) {
         fetchedCoinBalanceBlockNumber: action.msg.fetchedCoinBalanceBlockNumber
       })
     }
+    case 'RECEIVED_NEW_CURRENT_COIN_BALANCE': {
+      if (state.initialBlockNumber && action.msg.currentCoinBalanceBlockNumber < state.initialBlockNumber) return
+      return Object.assign({}, state, {
+        currentCoinBalance: action.msg.currentCoinBalanceHtml,
+        currentCoinBalanceBlockNumber: action.msg.currentCoinBalanceBlockNumberHtml,
+        initialBlockNumber: state.newBlockNumber,
+        newBlockNumber: action.msg.currentCoinBalanceBlockNumber
+      })
+    }
     default:
       return state
   }
@@ -187,6 +196,24 @@ const elements = {
         $('[data-test="address-tokens-panel-crc-total-worth-container"]').addClass('d-none')
       }
     }
+  },
+  '[data-selector="current-coin-balance"]': {
+    render ($el, state, oldState) {
+      if (!state.newBlockNumber || state.newBlockNumber > oldState.newBlockNumber) return
+      $el.empty().append(state.currentCoinBalance)
+      updateAllCalculatedUsdValues()
+    }
+  },
+  '[data-selector="last-balance-update"]': {
+    render ($el, state, oldState) {
+      if (!state.newBlockNumber || state.newBlockNumber > oldState.newBlockNumber) return
+      $el.empty().append(state.currentCoinBalanceBlockNumber)
+    }
+  },
+  '[data-last-balance-update]': {
+    load ($el) {
+      return { initialBlockNumber: numeral($el.data('last-balance-update')).value() }
+    }
   }
 }
 
@@ -243,6 +270,12 @@ if ($addressDetailsPage.length) {
       msg: humps.camelizeKeys(msg)
     })
   })
+  addressChannel.on('current_coin_balance', (msg) => {
+    store.dispatch({
+      type: 'RECEIVED_NEW_CURRENT_COIN_BALANCE',
+      msg: humps.camelizeKeys(msg)
+    })
+  })
 
   const blocksChannel = socket.channel(`blocks:${addressHash}`, {})
   blocksChannel.join()

apps/block_scout_web/lib/block_scout_web/channels/address_channel.ex

@@ -12,7 +12,7 @@ defmodule BlockScoutWeb.AddressChannel do
   }
 
   alias Explorer.{Chain, Market, Repo}
-  alias Explorer.Chain.{Hash, Transaction}
+  alias Explorer.Chain.{Hash, Transaction, Wei}
   alias Explorer.Chain.Hash.Address, as: AddressHash
   alias Explorer.ExchangeRates.Token
   alias Phoenix.View
@@ -137,11 +137,41 @@ defmodule BlockScoutWeb.AddressChannel do
       coin_balance_html: rendered_coin_balance
     })
 
+    push_current_coin_balance(socket, block_number, coin_balance)
+
     {:noreply, socket}
   end
 
   def handle_out("pending_transaction", data, socket), do: handle_transaction(data, socket, "transaction")
 
+  def push_current_coin_balance(socket, block_number, coin_balance) do
+    {:ok, hash} = Chain.string_to_address_hash(socket.assigns.address_hash)
+
+    rendered_current_coin_balance =
+      View.render_to_string(
+        AddressView,
+        "_current_coin_balance.html",
+        conn: socket,
+        address: Chain.hash_to_address(hash),
+        coin_balance: (coin_balance && coin_balance.value) || %Wei{value: Decimal.new(0)},
+        exchange_rate: Market.get_exchange_rate(Explorer.coin()) || Token.null()
+      )
+
+    rendered_link =
+      View.render_to_string(
+        AddressView,
+        "_block_link.html",
+        conn: socket,
+        block_number: block_number
+      )
+
+    push(socket, "current_coin_balance", %{
+      current_coin_balance_html: rendered_current_coin_balance,
+      current_coin_balance_block_number_html: rendered_link,
+      current_coin_balance_block_number: coin_balance.block_number
+    })
+  end
+
   def handle_transaction(%{address: address, transaction: transaction}, socket, event) do
     Gettext.put_locale(BlockScoutWeb.Gettext, socket.assigns.locale)
 

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

@@ -0,0 +1 @@
+<%= link(@block_number, to: block_path(@conn, :show, @block_number), class: "tile-title-lg") %>

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

@@ -0,0 +1,15 @@
+<%= format_wei_value(@coin_balance, :ether) %>
+<%= if !empty_exchange_rate?(@exchange_rate) do %>
+  <% usd_value = to_string(@exchange_rate.usd_value) %>
+  <span class="address-current-balance">
+    (<span
+      data-wei-value="<%= @coin_balance.value %>"
+      data-usd-exchange-rate="<%= @exchange_rate.usd_value %>"
+      data-placement="top"
+      data-toggle="tooltip"
+      data-html="true"
+      title='<%= "@ " <> usd_value <> "/" <> gettext("Ether") %>'  
+    >
+    </span>)
+  </span>
+<% end %>

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

@@ -165,7 +165,7 @@
               text: gettext("Address balance in xDAI (doesn't include ERC20, ERC721, ERC1155 tokens).") %>
               <%= gettext("Balance") %>
             </dt>
-            <dd class="col-sm-8 col-md-8 col-lg-9" data-test="address_balance">
+            <dd data-selector="current-coin-balance" class="col-sm-8 col-md-8 col-lg-9" data-test="address_balance">
               <%= balance(@address) %>
               <%= if !match?({:pending, _}, @coin_balance_status) && !empty_exchange_rate?(@exchange_rate) do %>
                 <% usd_value = to_string(@exchange_rate.usd_value) %>
@@ -273,7 +273,7 @@
                 text: gettext("Block number in which the address was updated.") %>
                 <%= gettext("Last Balance Update") %>
               </dt>
-              <dd class="col-sm-8 col-md-8 col-lg-9" data-test="address_last_balance_update">
+              <dd data-selector="last-balance-update" class="col-sm-8 col-md-8 col-lg-9" data-test="address_last_balance_update">
                 <%= link(
                     @address.fetched_coin_balance_block_number,
                     to: block_path(@conn, :show, @address.fetched_coin_balance_block_number),
@@ -282,6 +282,7 @@
               </dd>
             </dl>
           <% end %>
+          <div data-last-balance-update="<%= @address.fetched_coin_balance_block_number %>"></div>
           <!-- Blocks Validated -->
           <dl class="row address-validation-count-item" style="display: none;">
             <dt class="col-sm-4 col-md-4 col-lg-3 text-muted">

apps/block_scout_web/priv/gettext/default.pot

@@ -305,9 +305,9 @@ msgid "Back Home"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:4
-#: lib/block_scout_web/templates/address/overview.html.eex:166 lib/block_scout_web/templates/address_token/overview.html.eex:51
-#: lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:42 lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:43
+#: lib/block_scout_web/templates/address/overview.html.eex:166
+#: lib/block_scout_web/templates/address_token/overview.html.eex:51 lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:42
+#: lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:43
 msgid "Balance"
 msgstr ""
 
@@ -429,7 +429,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:48
-#: lib/block_scout_web/templates/address/overview.html.eex:290 lib/block_scout_web/templates/address_validation/index.html.eex:11
+#: lib/block_scout_web/templates/address/overview.html.eex:291 lib/block_scout_web/templates/address_validation/index.html.eex:11
 #: lib/block_scout_web/views/address_view.ex:371
 msgid "Blocks Validated"
 msgstr ""
@@ -1084,7 +1084,6 @@ msgid "Error rendering value"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:31
 #: lib/block_scout_web/templates/address/_balance_dropdown.html.eex:10
 msgid "Error trying to fetch balances."
 msgstr ""
@@ -1110,7 +1109,7 @@ msgid "Eth RPC"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:18
+#: lib/block_scout_web/templates/address/_current_coin_balance.html.eex:11
 #: lib/block_scout_web/templates/address/index.html.eex:5 lib/block_scout_web/templates/address/overview.html.eex:179
 #: lib/block_scout_web/templates/block/overview.html.eex:215 lib/block_scout_web/templates/internal_transaction/_tile.html.eex:24
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:89 lib/block_scout_web/templates/layout/_topnav.html.eex:110
@@ -1174,7 +1173,6 @@ msgid "Fetching holders..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:28
 #: lib/block_scout_web/templates/address/_balance_dropdown.html.eex:7
 msgid "Fetching tokens..."
 msgstr ""
@@ -1712,7 +1710,7 @@ msgid "Number of accounts holding the token"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/overview.html.eex:289
+#: lib/block_scout_web/templates/address/overview.html.eex:290
 msgid "Number of blocks validated by this validator."
 msgstr ""
 

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

@@ -305,9 +305,9 @@ msgid "Back Home"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:4
-#: lib/block_scout_web/templates/address/overview.html.eex:166 lib/block_scout_web/templates/address_token/overview.html.eex:51
-#: lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:42 lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:43
+#: lib/block_scout_web/templates/address/overview.html.eex:166
+#: lib/block_scout_web/templates/address_token/overview.html.eex:51 lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:42
+#: lib/block_scout_web/templates/stakes/_stakes_stats_item_account.html.eex:43
 msgid "Balance"
 msgstr ""
 
@@ -429,7 +429,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:48
-#: lib/block_scout_web/templates/address/overview.html.eex:290 lib/block_scout_web/templates/address_validation/index.html.eex:11
+#: lib/block_scout_web/templates/address/overview.html.eex:291 lib/block_scout_web/templates/address_validation/index.html.eex:11
 #: lib/block_scout_web/views/address_view.ex:371
 msgid "Blocks Validated"
 msgstr ""
@@ -1084,7 +1084,6 @@ msgid "Error rendering value"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:31
 #: lib/block_scout_web/templates/address/_balance_dropdown.html.eex:10
 msgid "Error trying to fetch balances."
 msgstr ""
@@ -1110,7 +1109,7 @@ msgid "Eth RPC"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:18
+#: lib/block_scout_web/templates/address/_current_coin_balance.html.eex:11
 #: lib/block_scout_web/templates/address/index.html.eex:5 lib/block_scout_web/templates/address/overview.html.eex:179
 #: lib/block_scout_web/templates/block/overview.html.eex:215 lib/block_scout_web/templates/internal_transaction/_tile.html.eex:24
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:89 lib/block_scout_web/templates/layout/_topnav.html.eex:110
@@ -1174,7 +1173,6 @@ msgid "Fetching holders..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_balance_card.html.eex:28
 #: lib/block_scout_web/templates/address/_balance_dropdown.html.eex:7
 msgid "Fetching tokens..."
 msgstr ""
@@ -1712,7 +1710,7 @@ msgid "Number of accounts holding the token"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/overview.html.eex:289
+#: lib/block_scout_web/templates/address/overview.html.eex:290
 msgid "Number of blocks validated by this validator."
 msgstr ""