Merge pull request #364 from poanetwork/block-confirmations-on-transaction-page-#121

Block confirmations on transaction page #121

apps/explorer_web/assets/__tests__/pages/transaction.js

@@ -0,0 +1,14 @@
+import { reducer, initialState } from '../../js/pages/transaction'
+
+test('RECEIVED_UPDATED_CONFIRMATIONS', () => {
+  const state = initialState
+  const action = {
+    type: 'RECEIVED_UPDATED_CONFIRMATIONS',
+    msg: {
+      confirmations: 5
+    }
+  }
+  const output = reducer(state, action)
+
+  expect(output.confirmations).toBe(5)
+})

apps/explorer_web/assets/js/app.js

@@ -25,3 +25,4 @@ import './lib/reload_button'
 import './lib/tooltip'
 
 import './pages/address'
+import './pages/transaction'

apps/explorer_web/assets/js/pages/transaction.js

@@ -0,0 +1,38 @@
+import $ from 'jquery'
+import numeral from 'numeral'
+import 'numeral/locales'
+import socket from '../socket'
+import router from '../router'
+import { initRedux } from '../utils'
+
+export const initialState = {confirmations: null}
+
+export function reducer (state = initialState, action) {
+  switch (action.type) {
+    case 'RECEIVED_UPDATED_CONFIRMATIONS': {
+      return Object.assign({}, state, {
+        confirmations: action.msg.confirmations
+      })
+    }
+    default:
+      return state
+  }
+}
+
+router.when('/transactions/:transactionHash').then((params) => initRedux(reducer, {
+  main (store) {
+    const { transactionHash, locale } = params
+    const channel = socket.channel(`transactions:${transactionHash}`, {})
+    numeral.locale(locale)
+    channel.join()
+      .receive('ok', resp => { console.log('Joined successfully', `transactions:${transactionHash}`, resp) })
+      .receive('error', resp => { console.log('Unable to join', `transactions:${transactionHash}`, resp) })
+    channel.on('confirmations', (msg) => store.dispatch({ type: 'RECEIVED_UPDATED_CONFIRMATIONS', msg }))
+  },
+  render (state, oldState) {
+    const $blockConfirmations = $('[data-selector="block_confirmations"]')
+    if (oldState.confirmations !== state.confirmations) {
+      $blockConfirmations.empty().append(numeral(state.confirmations).format())
+    }
+  }
+}))

apps/explorer_web/lib/explorer_web/channels/transaction_channel.ex

@@ -0,0 +1,10 @@
+defmodule ExplorerWeb.TransactionChannel do
+  @moduledoc """
+  Establishes pub/sub channel for transaction page live updates.
+  """
+  use ExplorerWeb, :channel
+
+  def join("transactions:" <> _transaction_hash, _params, socket) do
+    {:ok, %{}, socket}
+  end
+end

apps/explorer_web/lib/explorer_web/channels/user_socket.ex

@@ -2,6 +2,7 @@ defmodule ExplorerWeb.UserSocket do
   use Phoenix.Socket
 
   channel("addresses:*", ExplorerWeb.AddressChannel)
+  channel("transactions:*", ExplorerWeb.TransactionChannel)
 
   transport(:websocket, Phoenix.Transports.WebSocket, timeout: 45_000)
   # transport :longpoll, Phoenix.Transports.LongPoll

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

@@ -41,7 +41,9 @@
                           to: block_path(@conn, :show, @conn.assigns.locale, block)
                         ) %>
                   <% end %>
-                  (<%= gettext "%{confirmations} block confirmations", confirmations: confirmations(@transaction, max_block_number: @max_block_number) %>)
+                  (<span data-selector="block_confirmations">
+                    <%= confirmations(@transaction, max_block_number: @max_block_number) %>
+                  </span> <%= gettext "block confirmations" %>)
                 </td>
               </tr>
               <tr>

apps/explorer_web/priv/gettext/default.pot

@@ -3,7 +3,7 @@
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
 #: lib/explorer_web/templates/transaction/index.html.eex:37
-#: lib/explorer_web/templates/transaction/overview.html.eex:49
+#: lib/explorer_web/templates/transaction/overview.html.eex:51
 msgid "Age"
 msgstr ""
 
@@ -25,7 +25,7 @@ msgstr ""
 
 #: lib/explorer_web/templates/block/index.html.eex:20
 #: lib/explorer_web/templates/block_transaction/index.html.eex:88
-#: lib/explorer_web/templates/transaction/overview.html.eex:171
+#: lib/explorer_web/templates/transaction/overview.html.eex:173
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:34
 msgid "Gas Used"
 msgstr ""
@@ -61,8 +61,8 @@ msgstr ""
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
-#: lib/explorer_web/templates/transaction/overview.html.eex:61
-#: lib/explorer_web/templates/transaction/overview.html.eex:69
+#: lib/explorer_web/templates/transaction/overview.html.eex:63
+#: lib/explorer_web/templates/transaction/overview.html.eex:71
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
 msgid "Value"
 msgstr ""
@@ -77,7 +77,7 @@ msgstr ""
 
 #: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/block_transaction/index.html.eex:96
-#: lib/explorer_web/templates/transaction/overview.html.eex:138
+#: lib/explorer_web/templates/transaction/overview.html.eex:140
 msgid "Gas Limit"
 msgstr ""
 
@@ -86,7 +86,7 @@ msgid "Miner"
 msgstr ""
 
 #: lib/explorer_web/templates/block_transaction/index.html.eex:104
-#: lib/explorer_web/templates/transaction/overview.html.eex:112
+#: lib/explorer_web/templates/transaction/overview.html.eex:114
 msgid "Nonce"
 msgstr ""
 
@@ -128,11 +128,11 @@ msgid "Gas"
 msgstr ""
 
 #: lib/explorer_web/templates/block/index.html.eex:22
-#: lib/explorer_web/templates/transaction/overview.html.eex:146
+#: lib/explorer_web/templates/transaction/overview.html.eex:148
 msgid "Gas Price"
 msgstr ""
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:179
+#: lib/explorer_web/templates/transaction/overview.html.eex:181
 msgid "Input"
 msgstr ""
 
@@ -156,7 +156,7 @@ msgstr ""
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:37
 #: lib/explorer_web/templates/transaction/index.html.eex:38
-#: lib/explorer_web/templates/transaction/overview.html.eex:77
+#: lib/explorer_web/templates/transaction/overview.html.eex:79
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
 #: lib/explorer_web/views/address_transaction_view.ex:11
@@ -179,7 +179,7 @@ msgstr ""
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:38
 #: lib/explorer_web/templates/transaction/index.html.eex:39
-#: lib/explorer_web/templates/transaction/overview.html.eex:89
+#: lib/explorer_web/templates/transaction/overview.html.eex:91
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:32
 #: lib/explorer_web/views/address_internal_transaction_view.ex:8
 #: lib/explorer_web/views/address_transaction_view.ex:10
@@ -224,18 +224,18 @@ msgstr ""
 
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
-#: lib/explorer_web/templates/transaction/overview.html.eex:55
+#: lib/explorer_web/templates/transaction/overview.html.eex:57
 #: lib/explorer_web/views/transaction_view.ex:39
 #: lib/explorer_web/views/transaction_view.ex:74
 msgid "Pending"
 msgstr ""
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:126
+#: lib/explorer_web/templates/transaction/overview.html.eex:128
 msgid "First Seen"
 msgstr ""
 
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:36
-#: lib/explorer_web/templates/transaction/overview.html.eex:132
+#: lib/explorer_web/templates/transaction/overview.html.eex:134
 msgid "Last Seen"
 msgstr ""
 
@@ -316,8 +316,8 @@ msgstr ""
 #: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
-#: lib/explorer_web/templates/transaction/overview.html.eex:61
-#: lib/explorer_web/templates/transaction/overview.html.eex:155
+#: lib/explorer_web/templates/transaction/overview.html.eex:63
+#: lib/explorer_web/templates/transaction/overview.html.eex:157
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
 #: lib/explorer_web/views/wei_helpers.ex:71
 msgid "Ether"
@@ -410,8 +410,8 @@ msgid "Price"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:12
-#: lib/explorer_web/templates/transaction/overview.html.eex:69
-#: lib/explorer_web/templates/transaction/overview.html.eex:163
+#: lib/explorer_web/templates/transaction/overview.html.eex:71
+#: lib/explorer_web/templates/transaction/overview.html.eex:165
 #: lib/explorer_web/views/currency_helpers.ex:32
 msgid "USD"
 msgstr ""
@@ -466,8 +466,8 @@ msgstr ""
 msgid "View All"
 msgstr ""
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:155
-#: lib/explorer_web/templates/transaction/overview.html.eex:163
+#: lib/explorer_web/templates/transaction/overview.html.eex:157
+#: lib/explorer_web/templates/transaction/overview.html.eex:165
 msgid "TX Fee"
 msgstr ""
 
@@ -611,3 +611,8 @@ msgstr ""
 #: lib/explorer_web/templates/chain/show.html.eex:44
 msgid "Wallet addresses"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/transaction/overview.html.eex:46
+msgid "block confirmations"
+msgstr ""

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

@@ -15,7 +15,7 @@ msgstr ""
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
 #: lib/explorer_web/templates/transaction/index.html.eex:37
-#: lib/explorer_web/templates/transaction/overview.html.eex:49
+#: lib/explorer_web/templates/transaction/overview.html.eex:51
 msgid "Age"
 msgstr "Age"
 
@@ -37,7 +37,7 @@ msgstr "%{year} POA Network Ltd. All rights reserved"
 
 #: lib/explorer_web/templates/block/index.html.eex:20
 #: lib/explorer_web/templates/block_transaction/index.html.eex:88
-#: lib/explorer_web/templates/transaction/overview.html.eex:171
+#: lib/explorer_web/templates/transaction/overview.html.eex:173
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:34
 msgid "Gas Used"
 msgstr "Gas Used"
@@ -73,8 +73,8 @@ msgstr "Transactions"
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
-#: lib/explorer_web/templates/transaction/overview.html.eex:61
-#: lib/explorer_web/templates/transaction/overview.html.eex:69
+#: lib/explorer_web/templates/transaction/overview.html.eex:63
+#: lib/explorer_web/templates/transaction/overview.html.eex:71
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
 msgid "Value"
 msgstr "Value"
@@ -89,7 +89,7 @@ msgstr "Difficulty"
 
 #: lib/explorer_web/templates/block/index.html.eex:21
 #: lib/explorer_web/templates/block_transaction/index.html.eex:96
-#: lib/explorer_web/templates/transaction/overview.html.eex:138
+#: lib/explorer_web/templates/transaction/overview.html.eex:140
 msgid "Gas Limit"
 msgstr "Gas Limit"
 
@@ -98,7 +98,7 @@ msgid "Miner"
 msgstr "Validator"
 
 #: lib/explorer_web/templates/block_transaction/index.html.eex:104
-#: lib/explorer_web/templates/transaction/overview.html.eex:112
+#: lib/explorer_web/templates/transaction/overview.html.eex:114
 msgid "Nonce"
 msgstr "Nonce"
 
@@ -140,11 +140,11 @@ msgid "Gas"
 msgstr "Gas"
 
 #: lib/explorer_web/templates/block/index.html.eex:22
-#: lib/explorer_web/templates/transaction/overview.html.eex:146
+#: lib/explorer_web/templates/transaction/overview.html.eex:148
 msgid "Gas Price"
 msgstr "Gas Price"
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:179
+#: lib/explorer_web/templates/transaction/overview.html.eex:181
 msgid "Input"
 msgstr "Input"
 
@@ -168,7 +168,7 @@ msgstr "Address"
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:37
 #: lib/explorer_web/templates/transaction/index.html.eex:38
-#: lib/explorer_web/templates/transaction/overview.html.eex:77
+#: lib/explorer_web/templates/transaction/overview.html.eex:79
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:31
 #: lib/explorer_web/views/address_internal_transaction_view.ex:9
 #: lib/explorer_web/views/address_transaction_view.ex:11
@@ -191,7 +191,7 @@ msgstr "Success"
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:38
 #: lib/explorer_web/templates/transaction/index.html.eex:39
-#: lib/explorer_web/templates/transaction/overview.html.eex:89
+#: lib/explorer_web/templates/transaction/overview.html.eex:91
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:32
 #: lib/explorer_web/views/address_internal_transaction_view.ex:8
 #: lib/explorer_web/views/address_transaction_view.ex:10
@@ -236,18 +236,18 @@ msgstr "Showing %{count} Transactions"
 
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
-#: lib/explorer_web/templates/transaction/overview.html.eex:55
+#: lib/explorer_web/templates/transaction/overview.html.eex:57
 #: lib/explorer_web/views/transaction_view.ex:39
 #: lib/explorer_web/views/transaction_view.ex:74
 msgid "Pending"
 msgstr "Pending"
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:126
+#: lib/explorer_web/templates/transaction/overview.html.eex:128
 msgid "First Seen"
 msgstr ""
 
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:36
-#: lib/explorer_web/templates/transaction/overview.html.eex:132
+#: lib/explorer_web/templates/transaction/overview.html.eex:134
 msgid "Last Seen"
 msgstr ""
 
@@ -328,8 +328,8 @@ msgstr ""
 #: lib/explorer_web/templates/address_transaction/index.html.eex:101
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
 #: lib/explorer_web/templates/transaction/index.html.eex:40
-#: lib/explorer_web/templates/transaction/overview.html.eex:61
-#: lib/explorer_web/templates/transaction/overview.html.eex:155
+#: lib/explorer_web/templates/transaction/overview.html.eex:63
+#: lib/explorer_web/templates/transaction/overview.html.eex:157
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:33
 #: lib/explorer_web/views/wei_helpers.ex:71
 msgid "Ether"
@@ -422,8 +422,8 @@ msgid "Price"
 msgstr ""
 
 #: lib/explorer_web/templates/address/_values.html.eex:12
-#: lib/explorer_web/templates/transaction/overview.html.eex:69
-#: lib/explorer_web/templates/transaction/overview.html.eex:163
+#: lib/explorer_web/templates/transaction/overview.html.eex:71
+#: lib/explorer_web/templates/transaction/overview.html.eex:165
 #: lib/explorer_web/views/currency_helpers.ex:32
 msgid "USD"
 msgstr ""
@@ -478,8 +478,8 @@ msgstr ""
 msgid "View All"
 msgstr ""
 
-#: lib/explorer_web/templates/transaction/overview.html.eex:155
-#: lib/explorer_web/templates/transaction/overview.html.eex:163
+#: lib/explorer_web/templates/transaction/overview.html.eex:157
+#: lib/explorer_web/templates/transaction/overview.html.eex:165
 msgid "TX Fee"
 msgstr ""
 
@@ -623,3 +623,8 @@ msgstr ""
 #: lib/explorer_web/templates/chain/show.html.eex:44
 msgid "Wallet addresses"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/transaction/overview.html.eex:46
+msgid "block confirmations"
+msgstr ""

apps/explorer_web/test/explorer_web/channels/transaction_channel_test.exs

@@ -0,0 +1,31 @@
+defmodule ExplorerWeb.AddressTransactionTest do
+  use ExplorerWeb.ChannelCase
+
+  describe "transactions channel tests" do
+    test "subscribed user can receive block confirmations event" do
+      channel = "transactions"
+      @endpoint.subscribe(channel)
+
+      block = insert(:block, number: 1)
+
+      transaction =
+        :transaction
+        |> insert()
+        |> with_block(block)
+
+      ExplorerWeb.Endpoint.broadcast(channel, "confirmations", %{max_block_number: 3, transaction: transaction})
+
+      receive do
+        %Phoenix.Socket.Broadcast{
+          event: "confirmations",
+          topic: ^channel,
+          payload: %{max_block_number: 3, transaction: ^transaction}
+        } ->
+          assert true
+      after
+        5_000 ->
+          assert false, "Expected message received nothing."
+      end
+    end
+  end
+end

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

@@ -7,6 +7,10 @@ defmodule ExplorerWeb.TransactionPage do
 
   alias Explorer.Chain.{InternalTransaction, Transaction, Hash}
 
+  def block_confirmations() do
+    css("[data-selector='block_confirmations']")
+  end
+
   def click_logs(session) do
     click(session, css("[data-test='transaction_logs_link']"))
   end

apps/explorer_web/test/explorer_web/features/viewing_transactions_test.exs

@@ -160,5 +160,13 @@ defmodule ExplorerWeb.ViewingTransactionsTest do
       |> TransactionLogsPage.click_address(lincoln)
       |> assert_has(AddressPage.detail_hash(lincoln))
     end
+
+    test "block confirmations via live update", %{session: session, transaction: transaction} do
+      TransactionPage.visit_page(session, transaction)
+
+      assert_text(session, TransactionPage.block_confirmations(), "0")
+      ExplorerWeb.Endpoint.broadcast!("transactions:#{transaction.hash}", "confirmations", %{confirmations: 10})
+      assert_text(session, TransactionPage.block_confirmations(), "10")
+    end
   end
 end