Update unit price on `new_rate` channel events

apps/block_scout_web/assets/js/lib/currency.js

@@ -5,11 +5,15 @@ import { BigNumber } from 'bignumber.js'
 import socket from '../socket'
 
 export function formatUsdValue (value) {
-  if (value === 0) return '$0.000000 USD'
-  if (value < 0.000001) return `${window.localized['Less than']} $0.000001 USD`
-  if (value < 1) return `$${numeral(value).format('0.000000')} USD`
-  if (value < 100000) return `$${numeral(value).format('0,0.00')} USD`
-  return `$${numeral(value).format('0,0')} USD`
+  return `${formatCurrencyValue(value)} USD`
+}
+
+function formatCurrencyValue (value) {
+  if (value === 0) return '$0.000000'
+  if (value < 0.000001) return `${window.localized['Less than']} $0.000001`
+  if (value < 1) return `$${numeral(value).format('0.000000')}`
+  if (value < 100000) return `$${numeral(value).format('0,0.00')}`
+  return `$${numeral(value).format('0,0')}`
 }
 
 function weiToEther (wei) {
@@ -34,8 +38,15 @@ function tryUpdateCalculatedUsdValues (el, usdExchangeRate = el.dataset.usdExcha
   const formattedUsd = formatUsdValue(usd)
   if (formattedUsd !== el.innerHTML) el.innerHTML = formattedUsd
 }
+
+function tryUpdateUnitPriceValues (el, usdUnitPrice = el.dataset.usdUnitPrice) {
+  const formattedValue = formatCurrencyValue(usdUnitPrice)
+  if (formattedValue !== el.innerHTML) el.innerHTML = formattedValue
+}
+
 export function updateAllCalculatedUsdValues (usdExchangeRate) {
   $('[data-usd-exchange-rate]').each((i, el) => tryUpdateCalculatedUsdValues(el, usdExchangeRate))
+  $('[data-usd-unit-price]').each((i, el) => tryUpdateUnitPriceValues(el, usdExchangeRate))
 }
 updateAllCalculatedUsdValues()
 

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

@@ -9,7 +9,7 @@
           data-wei-value="<%= if @address.fetched_coin_balance, do: @address.fetched_coin_balance.value %>"
           data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
         </span>
-        <small>(@ <%= @exchange_rate.usd_value %>/<%= gettext("Ether") %>)</small>
+        <small>(@ <span data-usd-unit-price="<%= @exchange_rate.usd_value %>"></span>/<%= gettext("Ether") %>)</small>
       </span>
 
       <div class="mt-3" data-token-balance-dropdown data-api_path="<%= address_token_balance_path(BlockScoutWeb.Endpoint, :index, @address.hash) %>">