Merge pull request #760 from poanetwork/623-live-reload-pending-transaction-details

Wire-up page reload of pending transaction detail when collated chann…

apps/block_scout_web/assets/css/app.scss

@@ -80,6 +80,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/address-overview";
 @import "components/token_tile_view_more";
 @import "components/dropdown";
+@import "components/loading-spinner";
 
 :export {
   primary: $primary;

apps/block_scout_web/assets/css/components/_loading-spinner.scss

@@ -0,0 +1,70 @@
+.loading-spinner {
+  margin: auto 1rem;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.loading-spinner-block-1, .loading-spinner-block-2 {
+  background-color: $light;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: $border-radius;
+
+  animation: loading-spinner 1.8s infinite ease-in-out;
+}
+
+.loading-spinner-block-2 {
+  animation-delay: -0.9s;
+}
+
+@keyframes loading-spinner {
+  25% {
+    transform: translateX(22px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(22px) translateY(22px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(22px) translateY(22px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+  }
+}
+
+
+.loading-spinner-small {
+  display: inline-block;
+  top: -0.125em;
+  margin: auto 0.5em auto 0;
+  width: 1em;
+  height: 1em;
+
+  .loading-spinner-block-1, .loading-spinner-block-2 {
+    width: 0.5em;
+    height: 0.5em;
+
+    animation: loading-spinner-small 1.8s infinite ease-in-out;
+  }
+
+  .loading-spinner-block-2 {
+    animation-delay: -0.9s;
+  }
+}
+
+@keyframes loading-spinner-small {
+  25% {
+    transform: translateX(10px) rotate(-90deg) scale(0.5);
+  } 50% {
+    transform: translateX(10px) translateY(10px) rotate(-179deg);
+  } 50.1% {
+    transform: translateX(10px) translateY(10px) rotate(-180deg);
+  } 75% {
+    transform: translateX(0px) translateY(10px) rotate(-270deg) scale(0.5);
+  } 100% {
+    transform: rotate(-360deg);
+  }
+}

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

@@ -98,6 +98,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 -->
@@ -13,6 +13,17 @@
             </span>
           </div>
           <h1 class="card-title"><%= gettext "Transaction Details" %> </h1>
+
+          <%= if !block do %>
+            <div class="tile tile-muted d-flex justify-content-center align-items-center mb-4">
+              <div class="loading-spinner">
+                <span class="loading-spinner-block-1"></span>
+                <span class="loading-spinner-block-2"></span>
+              </div>
+              <%= gettext("This transaction is pending confirmation.") %>
+            </div>
+          <% end %>
+
           <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() %>
@@ -86,7 +97,9 @@
         <div class="card-body">
           <h2 class="card-title text-white"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
           <div class="text-right">
-            <h3 class="text-white"> <%= value(@transaction) %></h3>
+            <h3 class="text-white">
+              <%= value(@transaction) %>
+            </h3>
             <span class="text-light" data-wei-value=<%= @transaction.value.value %> data-usd-exchange-rate=<%= @exchange_rate.usd_value %>></span>
           </div>
         </div>

apps/block_scout_web/priv/gettext/default.pot

@@ -60,7 +60,7 @@ msgstr ""
 msgid "Transactions"
 msgstr ""
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:87
+#: lib/block_scout_web/templates/transaction/overview.html.eex:98
 msgid "Value"
 msgstr ""
 
@@ -84,7 +84,7 @@ msgid "Miner"
 msgstr ""
 
 #: lib/block_scout_web/templates/block/overview.html.eex:59
-#: lib/block_scout_web/templates/transaction/overview.html.eex:55
+#: lib/block_scout_web/templates/transaction/overview.html.eex:66
 msgid "Nonce"
 msgstr ""
 
@@ -108,7 +108,7 @@ msgstr ""
 msgid "Total Difficulty"
 msgstr ""
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:34
+#: lib/block_scout_web/templates/transaction/overview.html.eex:45
 msgid "Block Number"
 msgstr ""
 
@@ -120,7 +120,7 @@ msgstr ""
 msgid "Cumulative Gas Used"
 msgstr ""
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:98
+#: lib/block_scout_web/templates/transaction/overview.html.eex:111
 msgid "Gas"
 msgstr ""
 
@@ -128,7 +128,7 @@ msgstr ""
 msgid "Gas Price"
 msgstr ""
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:68
+#: lib/block_scout_web/templates/transaction/overview.html.eex:79
 msgid "Input"
 msgstr ""
 
@@ -208,7 +208,7 @@ msgstr ""
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:35
 #: lib/block_scout_web/templates/transaction/index.html.eex:16
 #: lib/block_scout_web/templates/transaction/index.html.eex:35
-#: lib/block_scout_web/templates/transaction/overview.html.eex:43
+#: lib/block_scout_web/templates/transaction/overview.html.eex:54
 #: lib/block_scout_web/views/transaction_view.ex:53
 #: lib/block_scout_web/views/transaction_view.ex:79
 msgid "Pending"
@@ -301,7 +301,7 @@ msgstr ""
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:15
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:68
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:20
-#: lib/block_scout_web/templates/transaction/overview.html.eex:87
+#: lib/block_scout_web/templates/transaction/overview.html.eex:98
 #: lib/block_scout_web/views/wei_helpers.ex:72
 msgid "Ether"
 msgstr ""
@@ -488,7 +488,7 @@ msgstr ""
 
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:69
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:23
-#: lib/block_scout_web/templates/transaction/overview.html.eex:60
+#: lib/block_scout_web/templates/transaction/overview.html.eex:71
 msgid "TX Fee"
 msgstr ""
 
@@ -759,12 +759,12 @@ msgid "Github"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:48
+#: lib/block_scout_web/templates/transaction/overview.html.eex:59
 msgid "Block Confirmations"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:110
+#: lib/block_scout_web/templates/transaction/overview.html.eex:123
 msgid "Limit"
 msgstr ""
 
@@ -780,7 +780,7 @@ msgid "There are no logs for this transaction."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:103
+#: lib/block_scout_web/templates/transaction/overview.html.eex:116
 msgid "Used"
 msgstr ""
 
@@ -1280,3 +1280,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:128
 msgid "There are no token transfers for this address."
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/transaction/overview.html.eex:23
+msgid "This transaction is pending confirmation."
+msgstr ""

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

@@ -72,7 +72,7 @@ msgstr "BlockScout"
 msgid "Transactions"
 msgstr "Transactions"
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:87
+#: lib/block_scout_web/templates/transaction/overview.html.eex:98
 msgid "Value"
 msgstr "Value"
 
@@ -96,7 +96,7 @@ msgid "Miner"
 msgstr "Validator"
 
 #: lib/block_scout_web/templates/block/overview.html.eex:59
-#: lib/block_scout_web/templates/transaction/overview.html.eex:55
+#: lib/block_scout_web/templates/transaction/overview.html.eex:66
 msgid "Nonce"
 msgstr "Nonce"
 
@@ -120,7 +120,7 @@ msgstr "Timestamp"
 msgid "Total Difficulty"
 msgstr "Total Difficulty"
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:34
+#: lib/block_scout_web/templates/transaction/overview.html.eex:45
 msgid "Block Number"
 msgstr "Block Height"
 
@@ -132,7 +132,7 @@ msgstr "Transaction Details"
 msgid "Cumulative Gas Used"
 msgstr "Cumulative Gas Used"
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:98
+#: lib/block_scout_web/templates/transaction/overview.html.eex:111
 msgid "Gas"
 msgstr "Gas"
 
@@ -140,7 +140,7 @@ msgstr "Gas"
 msgid "Gas Price"
 msgstr "Gas Price"
 
-#: lib/block_scout_web/templates/transaction/overview.html.eex:68
+#: lib/block_scout_web/templates/transaction/overview.html.eex:79
 msgid "Input"
 msgstr "Input"
 
@@ -220,7 +220,7 @@ msgstr "Showing %{count} Transactions"
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:35
 #: lib/block_scout_web/templates/transaction/index.html.eex:16
 #: lib/block_scout_web/templates/transaction/index.html.eex:35
-#: lib/block_scout_web/templates/transaction/overview.html.eex:43
+#: lib/block_scout_web/templates/transaction/overview.html.eex:54
 #: lib/block_scout_web/views/transaction_view.ex:53
 #: lib/block_scout_web/views/transaction_view.ex:79
 msgid "Pending"
@@ -313,7 +313,7 @@ msgstr ""
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:15
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:68
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:20
-#: lib/block_scout_web/templates/transaction/overview.html.eex:87
+#: lib/block_scout_web/templates/transaction/overview.html.eex:98
 #: lib/block_scout_web/views/wei_helpers.ex:72
 msgid "Ether"
 msgstr "POA"
@@ -500,7 +500,7 @@ msgstr ""
 
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:69
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:23
-#: lib/block_scout_web/templates/transaction/overview.html.eex:60
+#: lib/block_scout_web/templates/transaction/overview.html.eex:71
 msgid "TX Fee"
 msgstr ""
 
@@ -763,12 +763,12 @@ msgid "Github"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:48
+#: lib/block_scout_web/templates/transaction/overview.html.eex:59
 msgid "Block Confirmations"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:110
+#: lib/block_scout_web/templates/transaction/overview.html.eex:123
 msgid "Limit"
 msgstr ""
 
@@ -784,7 +784,7 @@ msgid "There are no logs for this transaction."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:103
+#: lib/block_scout_web/templates/transaction/overview.html.eex:116
 msgid "Used"
 msgstr ""
 
@@ -1284,3 +1284,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:128
 msgid "There are no token transfers for this address."
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/transaction/overview.html.eex:23
+msgid "This transaction is pending confirmation."
+msgstr ""

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