Update number of pending transactions

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

@@ -106,6 +106,10 @@ export function reducer (state = initialState, action) {
         newPendingTransactions: [
           ...state.newPendingTransactions,
           action.msg.transactionHtml
+        ],
+        pendingTransactionHashes: [
+          ...state.pendingTransactionHashes,
+          action.msg.transactionHash
         ]
       })
     }
@@ -155,7 +159,7 @@ if ($addressDetailsPage.length) {
         addressHash,
         beyondPageOne: !!blockNumber,
         filter,
-        pendingTransactionHashes: $('[data-selector="pending-transactions-list"]')
+        pendingTransactionHashes: $('[data-selector="pending-transactions-list"]').children()
           .map((index, el) => el.dataset.transactionHash).toArray(),
         transactionCount: $('[data-selector="transaction-count"]').text(),
         validationCount: $('[data-selector="validation-count"]') ? $('[data-selector="validation-count"]').text() : null
@@ -183,6 +187,7 @@ if ($addressDetailsPage.length) {
       const $emptyInternalTransactionsList = $('[data-selector="empty-internal-transactions-list"]')
       const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]')
       const $internalTransactionsList = $('[data-selector="internal-transactions-list"]')
+      const $pendingTransactionsCount = $('[data-selector="pending-transactions-count"]')
       const $pendingTransactionsList = $('[data-selector="pending-transactions-list"]')
       const $transactionCount = $('[data-selector="transaction-count"]')
       const $transactionsList = $('[data-selector="transactions-list"]')
@@ -214,6 +219,9 @@ if ($addressDetailsPage.length) {
         prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))
         updateAllAges()
       }
+      if (oldState.pendingTransactionHashes.length !== state.pendingTransactionHashes.length && $pendingTransactionsCount.length) {
+        $pendingTransactionsCount[0].innerHTML = numeral(state.pendingTransactionHashes.length).format()
+      }
       if (oldState.newPendingTransactions !== state.newPendingTransactions && $pendingTransactionsList.length) {
         prependWithClingBottom($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join(''))
         updateAllAges()

apps/block_scout_web/assets/js/utils.js

@@ -56,13 +56,13 @@ export function slideDownBefore ($el, content, callback) {
   $content.slideDown({ complete: callback })
 }
 export function prependWithClingBottom ($el, content) {
-  return slideDownPrepend($el, content, clingBottom($el, content))
+  return slideDownPrepend($el, content, clingBottom($el))
 }
 export function beforeWithClingBottom ($el, content) {
-  return slideDownBefore($el, content, clingBottom($el, content))
+  return slideDownBefore($el, content, clingBottom($el))
 }
 
-function clingBottom ($el, content) {
+function clingBottom ($el) {
   function userAtTop () {
     return window.scrollY < $('[data-selector="navbar"]').outerHeight()
   }

apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex

@@ -52,11 +52,11 @@
         </div>
         <h2 class="card-title"><%= gettext "Transactions" %></h2>
         <span data-selector="pending-transactions-toggle">
+          <span data-selector="pending-transactions-count"><%= length(@pending_transactions) %></span>
+          <%= gettext("Pending Transactions") %>
           <%= link to: "#pending-transactions", "data-toggle": "collapse" do %>
             <span data-selector="pending-transactions-open"><%= gettext("Show") %></span>
             <span data-selector="pending-transactions-close" class="d-none"><%= gettext("Hide") %></span>
-            <span data-selector="pending-transactions-count"><%= length(@pending_transactions) %></span>
-            <%= gettext("Pending Transactions") %>
           <% end %>
           <div class="mb-3 collapse" id="pending-transactions" data-selector="pending-transactions-list">
             <%= for pending_transaction <- @pending_transactions do %>