Wire-up page reload of pending transaction detail when collated channel message received

apps/block_scout_web/assets/js/pages/transaction.js

@@ -75,6 +75,11 @@ if ($transactionDetailsPage.length) {
       })
       blocksChannel.join()
       blocksChannel.on('new_block', (msg) => store.dispatch({ type: 'RECEIVED_NEW_BLOCK', msg: humps.camelizeKeys(msg) }))
+
+      const transactionHash = $transactionDetailsPage[0].dataset.pageTransactionHash
+      const transactionChannel = socket.channel(`transactions:${transactionHash}`, {})
+      transactionChannel.join()
+      transactionChannel.on('collated', () => window.location.reload())
     },
     render (state, oldState) {
       const $blockConfirmations = $('[data-selector="block-confirmations"]')

apps/block_scout_web/lib/block_scout_web/channels/transaction_channel.ex

@@ -13,6 +13,10 @@ defmodule BlockScoutWeb.TransactionChannel do
     {:ok, %{}, socket}
   end
 
+  def join("transactions:" <> _transaction_hash, _params, socket) do
+    {:ok, %{}, socket}
+  end
+
   def handle_out("new_transaction", %{transaction: transaction}, socket) do
     Gettext.put_locale(BlockScoutWeb.Gettext, socket.assigns.locale)
 

apps/block_scout_web/lib/block_scout_web/notifier.ex

@@ -99,6 +99,8 @@ defmodule BlockScoutWeb.Notifier do
       transaction: transaction
     })
 
+    Endpoint.broadcast("transactions:#{transaction.hash}", "collated", %{})
+
     Endpoint.broadcast("addresses:#{transaction.from_address_hash}", "transaction", %{
       address: transaction.from_address,
       transaction: transaction

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -1,5 +1,5 @@
 <% block = @transaction.block %>
-<section data-page="transaction-details">
+<section data-page="transaction-details" data-page-transaction-hash="<%= @transaction %>">
   <div class="row">
     <div class="col-md-12 col-lg-8">
       <!-- Transaction Details -->
@@ -12,8 +12,8 @@
               </button>
             </span>
           </div>
-          <h1 class="card-title"><%= gettext "Transaction Details" %> </h1>
-          <h3 data-test="transaction_detail_hash"><%= @transaction %> </h3>
+          <h1 class="card-title"><%= gettext "Transaction Details" %></h1>
+          <h3 data-test="transaction_detail_hash"><%= @transaction %></h3>
           <span class="d-block mb-2 text-muted">
             <%= @transaction |> BlockScoutWeb.AddressView.address_partial_selector(:from, nil) |> BlockScoutWeb.AddressView.render_partial() %>
             <span class="text-muted">  &rarr; </span>

apps/block_scout_web/test/block_scout_web/features/pages/transaction_page.ex

@@ -15,6 +15,10 @@ defmodule BlockScoutWeb.TransactionPage do
     css("[data-test='transaction_detail_hash']", text: Hash.to_string(transaction_hash))
   end
 
+  def is_pending() do
+    css("[data-selector='block-number']", text: "Pending")
+  end
+
   def visit_page(session, %Transaction{hash: transaction_hash}) do
     visit(session, "/tx/#{transaction_hash}")
   end

apps/block_scout_web/test/block_scout_web/features/viewing_transactions_test.exs

@@ -4,7 +4,7 @@ defmodule BlockScoutWeb.ViewingTransactionsTest do
   use BlockScoutWeb.FeatureCase, async: true
 
   alias Explorer.Chain.Wei
-  alias BlockScoutWeb.{AddressPage, TransactionListPage, TransactionLogsPage, TransactionPage}
+  alias BlockScoutWeb.{AddressPage, Notifier, TransactionListPage, TransactionLogsPage, TransactionPage}
 
   setup do
     block =
@@ -102,6 +102,27 @@ defmodule BlockScoutWeb.ViewingTransactionsTest do
     end
   end
 
+  describe "viewing a pending transaction page" do
+    test "can see a pending transaction's details", %{session: session, pending: pending} do
+      session
+      |> TransactionPage.visit_page(pending)
+      |> assert_has(TransactionPage.detail_hash(pending))
+      |> assert_has(TransactionPage.is_pending())
+    end
+
+    test "pending transactions live update once collated", %{session: session, pending: pending} do
+      session
+      |> TransactionPage.visit_page(pending)
+
+      transaction = with_block(pending)
+
+      Notifier.handle_event({:chain_event, :transactions, [transaction.hash]})
+
+      session
+      |> refute_has(TransactionPage.is_pending())
+    end
+  end
+
   describe "viewing a transaction page" do
     test "can navigate to transaction show from list page", %{session: session, transaction: transaction} do
       session