From 4e90d8d6c653a1f98be076f1940ea09d14b67206 Mon Sep 17 00:00:00 2001
From: Francisco Krause Arnim <56402156+fkrause98@users.noreply.github.com>
Date: Wed, 5 Jul 2023 14:05:04 -0300
Subject: [PATCH] Fix tx details (#19)

* Fix tx details

* Finish block detail hardcoding

* Hardcode and modularize block detail

* Mix format

* Delete block.ex

* Delete transaction.ex

* Block detail fix

* Make transactions page faster

* Remove TODOs

---------

Co-authored-by: Javier Chatruc <jrchatruc@gmail.com>
---
 .../live/pages/block_detail.ex                |  98 ++++++++--
 .../live/transaction_index_live.ex            |   2 -
 .../live/transaction_live.ex                  | 185 +++++++++++++++---
 3 files changed, 242 insertions(+), 43 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/block_detail.ex b/lib/starknet_explorer_web/live/pages/block_detail.ex
index 3d828da8..23fb6b7e 100644
--- a/lib/starknet_explorer_web/live/pages/block_detail.ex
+++ b/lib/starknet_explorer_web/live/pages/block_detail.ex
@@ -1,10 +1,34 @@
 defmodule StarknetExplorerWeb.BlockDetailLive do
   use StarknetExplorerWeb, :live_view
   alias StarknetExplorer.Rpc
-
+  alias StarknetExplorerWeb.Utils
   defp num_or_hash(<<"0x", _rest::binary>>), do: :hash
   defp num_or_hash(_num), do: :num
 
+  defp block_detail_header(assigns) do
+    ~H"""
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Block detail</h1>
+    </div>
+    <button
+      class="font-bold py-2 px-4 rounded bg-blue-500 text-white"
+      phx-click="select-view"
+      ,
+      phx-value-view="overview"
+    >
+      Overview
+    </button>
+    <button
+      class="font-bold py-2 px-4 rounded bg-blue-500 text-white"
+      phx-click="select-view"
+      ,
+      phx-value-view="transactions"
+    >
+      Transactions
+    </button>
+    """
+  end
+
   def mount(_params = %{"number_or_hash" => param}, _session, socket) do
     {:ok, block} =
       case num_or_hash(param) do
@@ -16,22 +40,67 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
           Rpc.get_block_by_number(num)
       end
 
-    {:ok, assign(socket, :block, block)}
+    assigns = [
+      block: block,
+      view: "overview"
+    ]
+
+    {:ok, assign(socket, assigns)}
   end
 
-  def render(assigns = %{block: _block}) do
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <%= block_detail_header(assigns) %>
+    <%= render_info(assigns) %>
+    """
+  end
+
+  def render_info(assigns = %{block: block, view: "transactions"}) do
+    ~H"""
+    <table>
+      <tbody id="transactions">
+        <h1>Block Transactions</h1>
+        <%= for _transaction = %{"transaction_hash" => hash, "type" => type, "version" => version} <- @block["transactions"] do %>
+          <table>
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th>Version</th>
+                <th>Hash</th>
+              </tr>
+              <tbody>
+                <tr>
+                  <td><%= type %></td>
+                  <td><%= version %></td>
+                  <td><%= hash |> Utils.shorten_block_hash() %></td>
+                </tr>
+              </tbody>
+            </thead>
+          </table>
+        <% end %>
+      </tbody>
+    </table>
+    """
+  end
+
+  # TODO:
+  # Do not hardcode:
+  # - Total Execeution Resources
+  # - Gas Price
+  def render_info(assigns = %{block: _block, view: "overview"}) do
     ~H"""
-    <div class="flex justify-center items-center pt-14">
-      <h1>Block detail</h1>
-    </div>
     <table>
       <thead>
         <ul>
           <li>Block Number <%= @block["block_number"] %></li>
-          <li>New Root <%= @block["new_root"] %></li>
-          <li>Parent Hash <%= @block["parent_hash"] %></li>
+          <li>Block Hash <%= @block["block_hash"] |> Utils.shorten_block_hash() %></li>
+          <li>Block Status <%= @block["status"] %></li>
+          <li>State Root <%= @block["new_root"] |> Utils.shorten_block_hash() %></li>
+          <li>Parent Hash <%= @block["parent_hash"] |> Utils.shorten_block_hash() %></li>
           <li>Sequencer Address <%= @block["sequencer_address"] %></li>
-          <li>Status <%= @block["status"] %></li>
+          <li>Gas Price <%= "0.000000017333948464 ETH" %></li>
+          <li>Total execution resources <%= 543_910 %></li>
           <li>
             Timestamp <%= @block["timestamp"]
             |> DateTime.from_unix()
@@ -39,13 +108,12 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
           </li>
         </ul>
       </thead>
-      <tbody id="transactions">
-        <h1>Block Transactions</h1>
-        <%= for _transaction = %{"transaction_hash" => hash, "type" => type, "version" => version} <- @block["transactions"] do %>
-          Type: <%= hash %> Hash: <%= type %> Version: <%= version %>
-        <% end %>
-      </tbody>
     </table>
     """
   end
+
+  def handle_event("select-view", %{"view" => view}, socket) do
+    socket = assign(socket, :view, view)
+    {:noreply, socket}
+  end
 end
diff --git a/lib/starknet_explorer_web/live/transaction_index_live.ex b/lib/starknet_explorer_web/live/transaction_index_live.ex
index e31c7363..e888a125 100644
--- a/lib/starknet_explorer_web/live/transaction_index_live.ex
+++ b/lib/starknet_explorer_web/live/transaction_index_live.ex
@@ -57,7 +57,6 @@ defmodule StarknetExplorerWeb.TransactionIndexLive do
 
     {:ok,
      assign(socket,
-       blocks: [],
        latest_block: []
      )}
   end
@@ -66,7 +65,6 @@ defmodule StarknetExplorerWeb.TransactionIndexLive do
   def handle_info(:load_blocks, socket) do
     {:noreply,
      assign(socket,
-       blocks: Utils.list_blocks(),
        latest_block: Utils.get_latest_block_with_transactions()
      )}
   end
diff --git a/lib/starknet_explorer_web/live/transaction_live.ex b/lib/starknet_explorer_web/live/transaction_live.ex
index d7a7fb54..3658329a 100644
--- a/lib/starknet_explorer_web/live/transaction_live.ex
+++ b/lib/starknet_explorer_web/live/transaction_live.ex
@@ -1,6 +1,7 @@
 defmodule StarknetExplorerWeb.TransactionLive do
   use StarknetExplorerWeb, :live_view
   alias StarknetExplorer.Rpc
+  alias StarknetExplorerWeb.Utils
 
   defp transaction_header(assigns) do
     ~H"""
@@ -43,35 +44,49 @@ defmodule StarknetExplorerWeb.TransactionLive do
   end
 
   @impl true
-  def render(%{transaction: nil, transaction_receipt: nil} = assigns) do
+  def render(assigns) do
     ~H"""
-
+    <%= transaction_header(assigns) %>
+    <%= render_info(assigns) %>
     """
   end
 
-  def render(%{transaction_view: "events"} = assigns) do
+  def render_info(%{transaction: nil, transaction_receipt: nil} = assigns) do
     ~H"""
     <%= transaction_header(assigns) %>
+    """
+  end
+
+  # TODO:
+  # Do not hardcode the following:
+  # Identifier
+  # Name
+  # Age
+  def render_info(%{transaction_view: "events"} = assigns) do
+    ~H"""
     <table>
       <thead>
         <tr>
-          <th>Identifier(TODO)</th>
+          <th>Identifier</th>
           <th>Block Number</th>
           <th>Transaction Hash</th>
-          <th>Name(TODO)</th>
+          <th>Name</th>
           <th>From Address</th>
-          <th>Age(TODO)</th>
+          <th>Age</th>
         </tr>
       </thead>
       <tbody id="transaction-events-data">
         <%= for signature <- @transaction_receipt["events"] do %>
           <tr>
-            <td>TODO</td>
+            <td>
+              <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d_4"
+              |> Utils.shorten_block_hash() %>
+            </td>
             <td><%= @transaction_receipt["block_number"] %></td>
-            <td><%= @transaction["transaction_hash"] %></td>
-            <td>TODO</td>
-            <td><%= @transaction["sender_address"] %></td>
-            <td>TODO</td>
+            <td><%= @transaction["transaction_hash"] |> Utils.shorten_block_hash() %></td>
+            <td>Transfer</td>
+            <td><%= @transaction["sender_address"] |> Utils.shorten_block_hash() %></td>
+            <td>Age: 1h</td>
           </tr>
         <% end %>
       </tbody>
@@ -79,33 +94,108 @@ defmodule StarknetExplorerWeb.TransactionLive do
     """
   end
 
-  def render(%{transaction_view: "message_logs"} = assigns) do
+  # TODO:
+  # Everything here is hardcoded.
+  # I think this information comes from the block.
+  def render_info(%{transaction_view: "message_logs"} = assigns) do
     ~H"""
-    <%= transaction_header(assigns) %>
+    <table>
+      <thead>
+        <tr>
+          <th>Identifier</th>
+          <th>Message Hash</th>
+          <th>Direction</th>
+          <th>Type</th>
+          <th>From Address</th>
+          <th>To Address</th>
+          <th>Transaction Hash</th>
+          <th>Age</th>
+        </tr>
+      </thead>
+      <tbody id="message-logs-data">
+        <tr>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>L2 -> L1</td>
+          <td>Sent On L2</td>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>9min</td>
+        </tr>
+      </tbody>
+    </table>
     """
   end
 
-  def render(%{transaction_view: "internal_calls"} = assigns) do
+  def render_info(%{transaction_view: "internal_calls"} = assigns) do
     ~H"""
-    <%= transaction_header(assigns) %>
+    <table>
+      <thead>
+        <tr>
+          <th>Identifier</th>
+          <th>Transaction Hash</th>
+          <th>Type</th>
+          <th>Name</th>
+          <th>Contract Address</th>
+        </tr>
+      </thead>
+      <tbody id="message-logs-data">
+        <tr>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+          <td>Call</td>
+          <td>__execute__</td>
+          <td>
+            <%= "0x008e571d599345e12730f53df66cf74bea8ad238d68844b71ebadb567eae7a1d"
+            |> Utils.shorten_block_hash() %>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     """
   end
 
-  def render(%{transaction_view: "overview"} = assigns) do
+  # TODO:
+  # Do not hardcode the following:
+  # Call data
+  # Signatures
+  # Execution resources
+  def render_info(%{transaction_view: "overview"} = assigns) do
     ~H"""
-    <%= transaction_header(assigns) %>
     <hr /> Transaction Hash: <%= @transaction["transaction_hash"] %>
     <hr /> Status: <%= @transaction_receipt["status"] %>
     <hr /> Block Hash: <%= @transaction_receipt["block_hash"] %>
     <hr /> Block Number: <%= @transaction_receipt["block_number"] %>
-    <hr /> TODO <hr /> Transaction Type: <%= @transaction["type"] %>
+    <hr /> Transaction Type: <%= @transaction["type"] %>
     <hr /> Sender Address: <%= @transaction["sender_address"] %>
     <hr /> Actual Fee: <%= @transaction["max_fee"] %>
     <hr /> Max Fee: <%= @transaction_receipt["actual_fee"] %>
     <hr /> Nonce: <%= @transaction["nonce"] %>
-    <hr /> Input Data (TODO) <hr />
+    <hr /> Input Data <hr />
     <table>
       <thead>
+        <tr>
+          call approve(spender, amount) -> <%= "0x0219209e083275171774dab1df80982e9df2096516f06319c5c6d71ae0a8480c"
+          |> Utils.shorten_block_hash() %>
+        </tr>
         <tr>
           <th>Input</th>
           <th>Type</th>
@@ -114,9 +204,12 @@ defmodule StarknetExplorerWeb.TransactionLive do
       </thead>
       <tbody id="transaction-input-data">
         <tr id="transaction-input-0">
-          <td>to</td>
+          <td>spender</td>
           <td>felt</td>
-          <td>0x11cd02208d6ed241d3fc0dba144f09b70be03003c32e56de2d19aea99b0ca76</td>
+          <td>
+            <%= "0x11cd02208d6ed241d3fc0dba144f09b70be03003c32e56de2d19aea99b0ca76"
+            |> Utils.shorten_block_hash() %>
+          </td>
         </tr>
         <tr id="transaction-input-1">
           <td>token_id</td>
@@ -125,6 +218,40 @@ defmodule StarknetExplorerWeb.TransactionLive do
         </tr>
       </tbody>
     </table>
+    <table>
+      <thead>
+        <tr>
+          call swap(pool_id, token_from_addr, amount_from, amount_to_min) -> 0x015543c3708653cda9d418b4ccd3be11368e40636c10c44b18cfe756b6d88b29
+        </tr>
+        <tr>
+          <th>Input</th>
+          <th>Type</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody id="transaction-input-data">
+        <tr id="transaction-input-0">
+          <td>pool_id</td>
+          <td>felt</td>
+          <td>"0x42b8f0484674ca266ac5d08e4ac6a3fe65bd3129795def2dca5c34ecc5f96d2"</td>
+        </tr>
+        <tr id="transaction-input-1">
+          <td>token_from_addr</td>
+          <td>felt</td>
+          <td>"0x42b8f0484674ca266ac5d08e4ac6a3fe65bd3129795def2dca5c34ecc5f96d2"</td>
+        </tr>
+        <tr id="transaction-input-1">
+          <td>amount_from</td>
+          <td>Uint256</td>
+          <td>"71587356859985694"</td>
+        </tr>
+        <tr id="transaction-input-1">
+          <td>amount_to_min</td>
+          <td>Uint256</td>
+          <td>"80225122454772041"</td>
+        </tr>
+      </tbody>
+    </table>
     <hr />
     <table>
       <thead>
@@ -134,6 +261,7 @@ defmodule StarknetExplorerWeb.TransactionLive do
         </tr>
       </thead>
       <tbody id="signatures">
+        Signature
         <%= for {index, signature} <- Enum.with_index(@transaction["signature"]) do %>
           <tr id={"signature-#{index}"}>
             <td><%= index %></td>
@@ -142,7 +270,14 @@ defmodule StarknetExplorerWeb.TransactionLive do
         <% end %>
       </tbody>
     </table>
-    <hr /> Execution Resources (TODO)
+    <hr />
+    <div>
+      Execution Resources
+      STEPS 5083
+      MEMORY 224
+      PEDERSEN_BUILTIN 21
+      RANGE_CHECK_BUILTIN 224
+    </div>
     """
   end
 
@@ -164,11 +299,9 @@ defmodule StarknetExplorerWeb.TransactionLive do
         :load_transaction,
         %{assigns: %{transaction_hash: transaction_hash}} = socket
       ) do
-    {:ok, transaction} =
-      Rpc.get_transaction(transaction_hash)
+    {:ok, transaction} = Rpc.get_transaction(transaction_hash)
 
-    {:ok, transaction_receipt} =
-      Rpc.get_transaction_receipt(transaction_hash)
+    {:ok, transaction_receipt} = Rpc.get_transaction_receipt(transaction_hash)
 
     assigns = [
       transaction: transaction,