Setup channel updates for address overview

apps/explorer_web/assets/js/pages/address.js

@@ -18,6 +18,13 @@ router.when('/addresses/:addressHash').then(({ addressHash, blockNumber, filter
     $channelBatching.hide()
   })
 
+  const $overview = $('[data-selector="overview"]')
+  if ($overview) {
+    channel.on('overview', (msg) => {
+      $overview.empty().append(msg.overview)
+    })
+  }
+
   if (!blockNumber) {
     const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]')
     if ($emptyTransactionsList.length) {

apps/explorer_web/lib/explorer_web/channels/address_channel.ex

@@ -4,10 +4,10 @@ defmodule ExplorerWeb.AddressChannel do
   """
   use ExplorerWeb, :channel
 
-  alias ExplorerWeb.AddressTransactionView
+  alias ExplorerWeb.{AddressTransactionView, AddressView}
   alias Phoenix.View
 
-  intercept(["transaction"])
+  intercept(["overview", "transaction"])
 
   def join("addresses:" <> _address_hash, _params, socket) do
     {:ok, %{}, socket}
@@ -32,4 +32,21 @@ defmodule ExplorerWeb.AddressChannel do
 
     {:noreply, socket}
   end
+
+  def handle_out("overview", %{address: address, exchange_rate: exchange_rate, transaction_count: transaction_count}, socket) do
+    Gettext.put_locale(ExplorerWeb.Gettext, socket.assigns.locale)
+
+    rendered =
+      View.render_to_string(
+        AddressView,
+        "_values.html",
+        locale: socket.assigns.locale,
+        address: address,
+        exchange_rate: exchange_rate,
+        transaction_count: transaction_count
+      )
+
+    push(socket, "overview", %{overview: rendered})
+    {:noreply, socket}
+  end
 end

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

@@ -17,7 +17,7 @@
     <div class="card-body">
       <div class="row">
         <div class="col-sm-6">
-          <table class="table table-font table-responsive-sm table-horizontal">
+          <table class="table table-font table-responsive-sm table-horizontal" data-selector='overview'>
             <%= render "_values.html", address: @address, exchange_rate: @exchange_rate, transaction_count: @transaction_count %>
           </table>
         </div>

apps/explorer_web/test/explorer_web/channels/address_channel_test.exs

@@ -2,7 +2,7 @@ defmodule ExplorerWeb.AddressChannelTest do
   use ExplorerWeb.ChannelCase
 
   describe "addresses channel tests" do
-    test "subscribed user can receive channel message" do
+    test "subscribed user can receive transaction event" do
       channel = "addresses"
       @endpoint.subscribe(channel)
 
@@ -16,5 +16,20 @@ defmodule ExplorerWeb.AddressChannelTest do
           assert false, "Expected message received nothing."
       end
     end
+
+    test "subscribed user can receive overview event" do
+      channel = "addresses"
+      @endpoint.subscribe(channel)
+
+      ExplorerWeb.Endpoint.broadcast(channel, "overview", %{body: "test"})
+
+      receive do
+        %Phoenix.Socket.Broadcast{event: "overview", topic: ^channel, payload: %{body: body}} ->
+          assert body == "test"
+      after
+        5_000 ->
+          assert false, "Expected message received nothing."
+      end
+    end
   end
 end

apps/explorer_web/test/explorer_web/features/viewing_addresses_test.exs

@@ -1,6 +1,9 @@
 defmodule ExplorerWeb.ViewingAddressesTest do
   use ExplorerWeb.FeatureCase, async: true
 
+  alias Explorer.Chain
+  alias Explorer.Chain.Address
+  alias Explorer.ExchangeRates.Token
   alias ExplorerWeb.{AddressPage, HomePage}
 
   setup do
@@ -161,7 +164,26 @@ defmodule ExplorerWeb.ViewingAddressesTest do
 
     ExplorerWeb.Endpoint.broadcast!("addresses:#{addresses.lincoln.hash}", "transaction", %{transaction: transaction})
 
+    assert_has(session, AddressPage.transaction(transaction))
+  end
+
+  test "viewing updated overview via live update", %{session: session} do
+    address = %Address{hash: hash} = insert(:address, fetched_balance: 500)
+
     session
-    |> assert_has(AddressPage.transaction(transaction))
+    |> AddressPage.visit_page(address)
+    |> assert_text(AddressPage.balance(), "0.0000000000000005 POA")
+
+    {:ok, [^hash]} = Chain.update_balances([%{
+      fetched_balance: 100,
+      fetched_balance_block_number: 1,
+      hash: hash
+    }])
+
+    {:ok, updated_address} = Chain.hash_to_address(hash)
+
+    ExplorerWeb.Endpoint.broadcast!("addresses:#{hash}", "overview", %{address: updated_address, exchange_rate: %Token{}, transaction_count: 1})
+
+    assert_text(session, AddressPage.balance(), "0.0000000000000001 POA")
   end
 end