diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 394195da2f..935a325d04 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/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/try_api' +import './lib/stop_propagation' 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' diff --git a/apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js b/apps/block_scout_web/assets/js/lib/pending_transactions_toggle.js new file mode 100644 index 0000000000..26c28465a1 --- /dev/null +++ b/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)) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex index 733524e0f2..6869c0aa2e 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex @@ -61,11 +61,26 @@

<%= gettext "Transactions" %>

-
- <%= for pending_transaction <- @pending_transactions do %> - <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> - <% end %> -
+ + <%= link( + gettext("Show %{count} Pending Transactions", count: length(@pending_transactions)), + to: "#pending-transactions", + "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" + ) %> +
+ <%= for pending_transaction <- @pending_transactions do %> + <%= render(BlockScoutWeb.TransactionView, "_tile.html", current_address: @address, transaction: pending_transaction) %> + <% end %> +
+
<%= if Enum.count(@transactions) > 0 do %> <%= for transaction <- @transactions do %>