Initial wires of a pending-transaction toggle

apps/block_scout_web/assets/js/app.js

@@ -26,16 +26,17 @@ import './lib/from_now'
 import './lib/indexing'
 import './lib/loading_element'
 import './lib/market_history_chart'
+import './lib/pending_transactions_toggle'
+import './lib/pretty_json'
 import './lib/reload_button'
-import './lib/tooltip'
 import './lib/smart_contract/read_only_functions'
 import './lib/smart_contract/wei_ether_converter'
-import './lib/pretty_json'
+import './lib/stop_propagation'
-import './lib/try_api'
 import './lib/token_balance_dropdown'
 import './lib/token_balance_dropdown_search'
 import './lib/token_transfers_toggle'
-import './lib/stop_propagation'
+import './lib/tooltip'
+import './lib/try_api'
 
 import './pages/address'
 import './pages/block'

apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js

@@ -0,0 +1,20 @@
+import $ from 'jquery'
+
+const pendingTransactionToggle = (element) => {
+  const $element = $(element)
+  const $pendingTransactionsClose = $element.find("[data-selector='pending-transactions-close']")
+  const $pendingTransactionsOpen = $element.find("[data-selector='pending-transactions-open']")
+
+  $element.on('show.bs.collapse', () => {
+    $pendingTransactionsOpen.addClass('d-none')
+    $pendingTransactionsClose.removeClass('d-none')
+  })
+
+  $element.on('hide.bs.collapse', () => {
+    $pendingTransactionsClose.addClass('d-none')
+    $pendingTransactionsOpen.removeClass('d-none')
+  })
+}
+
+// Initialize the script scoped for each instance.
+$("[data-selector='pending-transactions-toggle']").each((_index, element) => pendingTransactionToggle(element))

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

@@ -61,11 +61,26 @@
           </div>
         </div>
         <h2 class="card-title"><%= gettext "Transactions" %></h2>
-        <div class="mb-3" data-selector="pending-transactions-list">
+        <span data-selector="pending-transactions-toggle">
-          <%= for pending_transaction <- @pending_transactions do %>
+          <%= link(
-            <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %>
+            gettext("Show %{count} Pending Transactions", count: length(@pending_transactions)),
-          <% end %>
+            to: "#pending-transactions",
-        </div>
+            "data-toggle": "collapse",
+            "data-selector": "pending-transactions-open"
+          ) %>
+          <%= link(
+            gettext("Hide %{count} Pending Transactions", count: length(@pending_transactions)),
+            to: "#pending-transactions",
+            class: "d-none",
+            "data-toggle": "collapse",
+            "data-selector": "pending-transactions-close"
+          ) %>
+          <div class="mb-3 collapse" id="pending-transactions" data-selector="pending-transactions-list">
+            <%= for pending_transaction <- @pending_transactions do %>
+              <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %>
+            <% end %>
+          </div>
+        </span>
         <%= if Enum.count(@transactions) > 0 do %>
           <span data-selector="transactions-list">
             <%= for transaction <- @transactions do %>