Merge pull request #4353 from blockscout/np-add-live-reload-token-holders

Token holders page: add live reload

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#4353](https://github.com/blockscout/blockscout/pull/4353) - Added live-reload on the token holders page
 
 ### Fixes
 - [#4388](https://github.com/blockscout/blockscout/pull/4388) - Fix internal server error on contract page for insctances without sourcify envs

apps/block_scout_web/assets/js/lib/async_listing_load.js

@@ -307,7 +307,7 @@ export function refreshPage (store) {
   loadPage(store, store.getState().currentPagePath)
 }
 
-function loadPage (store, path) {
+export function loadPage (store, path) {
   store.dispatch({ type: 'START_REQUEST', path })
   $.getJSON(path, merge({ type: 'JSON' }, store.getState().additionalParams))
     .done(response => store.dispatch(Object.assign({ type: 'ITEMS_FETCHED' }, humps.camelizeKeys(response))))

apps/block_scout_web/assets/js/pages/token_counters.js

@@ -1,8 +1,9 @@
 import $ from 'jquery'
 import omit from 'lodash/omit'
 import humps from 'humps'
+import { subscribeChannel } from '../socket'
 import { createStore, connectElements } from '../lib/redux_helpers.js'
-import '../lib/async_listing_load'
+import { createAsyncLoadStore, loadPage } from '../lib/async_listing_load'
 import '../app'
 import {
   openQrModal
@@ -21,8 +22,6 @@ export function reducer (state = initialState, action) {
       return Object.assign({}, state, omit(action, 'type'))
     }
     case 'CHANNEL_DISCONNECTED': {
-      if (state.beyondPageOne) return state
-
       return Object.assign({}, state, {
         channelDisconnected: true
       })
@@ -86,11 +85,37 @@ function loadCounters (store) {
 const $tokenPage = $('[token-page]')
 
 if ($tokenPage.length) {
+  updateCounters()
+}
+
+function updateCounters () {
   const store = createStore(reducer)
   connectElements({ store, elements })
   loadCounters(store)
 }
 
+if ($('[data-page="token-holders-list"]').length) {
+  const asyncElements = {
+    '[data-selector="channel-disconnected-message"]': {
+      render ($el, state) {
+        if (state.channelDisconnected) $el.show()
+      }
+    }
+  }
+
+  const store = createAsyncLoadStore(reducer, initialState, null)
+  connectElements({ store, asyncElements })
+
+  const addressHash = $('[data-page="token-details"]')[0].dataset.pageAddressHash
+  const tokensChannel = subscribeChannel(`tokens:${addressHash}`)
+  tokensChannel.onError(() => store.dispatch({ type: 'CHANNEL_DISCONNECTED' }))
+  tokensChannel.on('token_transfer', (_msg) => {
+    const uri = new URL(window.location)
+    loadPage(store, uri.pathname + uri.search)
+    updateCounters()
+  })
+}
+
 $('.btn-qr-icon').click(_event => {
   openQrModal()
 })

apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex

@@ -7,11 +7,16 @@
     conn: @conn
   ) %>
 
-  <section>
+  <section data-page="token-holders-list">
     <div class="card">
       <%= render OverviewView, "_tabs.html", assigns %>
       <!-- Token Holders -->
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
+        <div data-selector="channel-disconnected-message" class="d-none">
+          <div data-selector="reload-button" class="alert alert-danger">
+            <a href="#" class="alert-link"><%= gettext "Connection Lost" %></a>
+          </div>
+        </div>
         <h2 class="card-title list-title-description"><%= gettext "Token Holders" %></h2>
 
         <div class="list-top-pagination-container-wrapper">

apps/block_scout_web/priv/gettext/default.pot

@@ -542,6 +542,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_contract_verification/new.html.eex:4
 #: lib/block_scout_web/templates/address_contract_verification_via_flattened_code/new.html.eex:13
 #: lib/block_scout_web/templates/address_contract_verification_via_json/new.html.eex:4
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:17
 msgid "Connection Lost"
 msgstr ""
 
@@ -1808,7 +1809,7 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:182
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:49
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:27
 #: lib/block_scout_web/templates/tokens/instance/transfer/index.html.eex:23
 #: lib/block_scout_web/templates/tokens/inventory/index.html.eex:22
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:21
@@ -2025,7 +2026,7 @@ msgid "There are no blocks."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:27
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:32
 msgid "There are no holders for this Token."
 msgstr ""
 
@@ -2209,7 +2210,7 @@ msgid "Token Details"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:15
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:20
 #: lib/block_scout_web/templates/tokens/overview/_tabs.html.eex:9
 #: lib/block_scout_web/views/tokens/overview_view.ex:42
 msgid "Token Holders"

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

@@ -542,6 +542,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_contract_verification/new.html.eex:4
 #: lib/block_scout_web/templates/address_contract_verification_via_flattened_code/new.html.eex:13
 #: lib/block_scout_web/templates/address_contract_verification_via_json/new.html.eex:4
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:17
 msgid "Connection Lost"
 msgstr ""
 
@@ -1808,7 +1809,7 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:182
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:49
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:27
 #: lib/block_scout_web/templates/tokens/instance/transfer/index.html.eex:23
 #: lib/block_scout_web/templates/tokens/inventory/index.html.eex:22
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:21
@@ -2025,7 +2026,7 @@ msgid "There are no blocks."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:27
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:32
 msgid "There are no holders for this Token."
 msgstr ""
 
@@ -2209,7 +2210,7 @@ msgid "Token Details"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/holder/index.html.eex:15
+#: lib/block_scout_web/templates/tokens/holder/index.html.eex:20
 #: lib/block_scout_web/templates/tokens/overview/_tabs.html.eex:9
 #: lib/block_scout_web/views/tokens/overview_view.ex:42
 msgid "Token Holders"
@@ -2795,12 +2796,12 @@ msgstr ""
 msgid "validator"
 msgstr ""
 
-#, elixir-format
+#, elixir-format, fuzzy
 #: lib/block_scout_web/templates/stakes/_stakes_modal_withdraw.html.eex:76
 msgid "<p>Pending stake (stake placed on a candidate pool or placed during the current staking epoch) may be withdrawn now.</p>\n        <p>Active stake (stake available after the current epoch) can be ordered for withdrawal from the pool, and will be available to claim after the current staking epoch is complete.</p>\n        <p>If you have already ordered (and the staking window is still open), you may increase your current order by entering a positive value, or decrease your current order by entering a negative value in the box and clicking 'Order Withdrawal'. You must either keep the minimum stake amount in the pool, or order your entire stake for withdrawal.</p>\n"
 msgstr ""
 
-#, elixir-format
+#, elixir-format, fuzzy
 #:
 #: lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex:36
 msgid "<p>To become a candidate, your staking address must be funded with %{tokenSymbol} tokens <strong>and</strong> %{coinSymbol} coins, and your OpenEthereum node must be active and configured with the mining address you specify here.</p>\n      <p>To become a delegator, close this window and select an address from the list of pools you would like to place stake on. Click the <strong>Stake</strong> button next to the address to begin the process.</p>"