Organize site a bit more (#16)

lib/starknet_explorer_web/components/layouts/app.html.heex

@@ -7,21 +7,14 @@
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-white">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700"> @elixirphoenix </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-900/50 hover:text-zinc-200/80 text-zinc-900"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
+      <a href="/" class="hover:text-zinc-700"> Home </a>
+      <a href="/blocks" class="hover:text-zinc-700"> Blocks </a>
+      <a href="/transactions" class="hover:text-zinc-700"> Transactions </a>
     </div>
   </div>
 </header>
 <div class="flex justify-center items-center pt-14">
-  <h1 class="text-white text-4xl font-mono">Scanner</h1>
+  <h1 class="text-white text-4xl font-mono">Starknet Explorer</h1>
 </div>
 
 <main class="px-4 py-20 sm:px-6 lg:px-8 flex justify-center items-center">

lib/starknet_explorer_web/live/block_index_live.ex

@@ -0,0 +1,67 @@
+defmodule StarknetExplorerWeb.BlockIndexLive do
+  use StarknetExplorerWeb, :live_view
+  alias StarknetExplorerWeb.Utils
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Blocks</h1>
+    </div>
+    <div class="table-block bg-[#182635]">
+      <div>
+        <ul class="grid grid-cols-4 grid-flow-col text-lg gap-20 px-2 text-white/50">
+          <li scope="col" class="py-5">Number</li>
+          <li scope="col" class="py-5">Block Hash</li>
+          <li scope="col" class="py-5">Status</li>
+          <li scope="col" class="py-5">Age</li>
+        </ul>
+      </div>
+      <div id="blocks" class="px-2">
+        <%= for block <- @blocks do %>
+          <ul
+            id={"block-#{block["block_number"]}"}
+            class="grid gap-20 grid-cols-4  auto-cols-[minmax(0,1fr)] border-b-[0.5px] border-gray-600 last:border-none border-spacing-6"
+          >
+            <li scope="row" class="py-4">
+              <%= live_redirect(to_string(block["block_number"]),
+                to: "/block/#{block["block_number"]}",
+                class: "text-blue-500 hover:text-blue-700 underline-none font-medium"
+              ) %>
+            </li>
+            <li scope="row" class="py-4">
+              <%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
+                to: "/block/#{block["block_hash"]}",
+                class: "text-blue-500 hover:text-blue-700 underline-none font-medium",
+                title: block["block_hash"]
+              ) %>
+            </li>
+            <li scope="row" class="py-4"><%= block["status"] %></li>
+            <li scope="row" class="py-4"><%= Utils.get_block_age(block) %></li>
+          </ul>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    Process.send(self(), :load_blocks, [])
+
+    {:ok,
+     assign(socket,
+       blocks: [],
+       latest_block: []
+     )}
+  end
+
+  @impl true
+  def handle_info(:load_blocks, socket) do
+    {:noreply,
+     assign(socket,
+       blocks: Utils.list_blocks(),
+       latest_block: Utils.get_latest_block_with_transactions()
+     )}
+  end
+end

lib/starknet_explorer_web/live/pages/block_detail.ex

@@ -21,6 +21,9 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
 
   def render(assigns = %{block: _block}) do
     ~H"""
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Block detail</h1>
+    </div>
     <table>
       <thead>
         <ul>

lib/starknet_explorer_web/live/pages/home/index.ex

@@ -1,7 +1,6 @@
 defmodule StarknetExplorerWeb.HomeLive.Index do
   use StarknetExplorerWeb, :live_view
-  alias StarknetExplorer.Rpc
-  alias StarknetExplorer.DateUtils
+  alias StarknetExplorerWeb.Utils
 
   @impl true
   def mount(_params, _session, socket) do
@@ -17,6 +16,9 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
   @impl true
   def render(assigns) do
     ~H"""
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Blocks</h1>
+    </div>
     <div class="table-block bg-[#182635]">
       <div>
         <ul class="grid grid-cols-4 grid-flow-col text-lg gap-20 px-2 text-white/50">
@@ -39,19 +41,22 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               ) %>
             </li>
             <li scope="row" class="py-4">
-              <%= live_redirect(shorten_block_hash(block["block_hash"]),
+              <%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
                 to: "/block/#{block["block_hash"]}",
                 class: "text-blue-500 hover:text-blue-700 underline-none font-medium",
                 title: block["block_hash"]
               ) %>
             </li>
             <li scope="row" class="py-4"><%= block["status"] %></li>
-            <li scope="row" class="py-4"><%= get_block_age(block) %></li>
+            <li scope="row" class="py-4"><%= Utils.get_block_age(block) %></li>
           </ul>
         <% end %>
       </div>
     </div>
 
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Transactions</h1>
+    </div>
     <div class="table-block bg-[#182635]">
       <div>
         <ul class="grid grid-cols-4 grid-flow-col text-lg gap-20 px-2 text-white/50">
@@ -69,7 +74,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               class="grid gap-20 grid-cols-4  auto-cols-[minmax(0,1fr)] border-b-[0.5px] border-gray-600 last:border-none border-spacing-6"
             >
               <li scope="row" class="py-4">
-                <%= live_redirect(shorten_block_hash(transaction["transaction_hash"]),
+                <%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
                   to: "/transactions/#{transaction["transaction_hash"]}",
                   class: "text-blue-500 hover:text-blue-700 underline-none font-medium"
                 ) %>
@@ -78,7 +83,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
                 <%= transaction["type"] %>
               </li>
               <li scope="row" class="py-4"><%= block["status"] %></li>
-              <li scope="row" class="py-4"><%= get_block_age(block) %></li>
+              <li scope="row" class="py-4"><%= Utils.get_block_age(block) %></li>
             </ul>
           <% end %>
         <% end %>
@@ -91,52 +96,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
   def handle_info(:load_blocks, socket) do
     {:noreply,
      assign(socket,
-       blocks: list_blocks(),
-       latest_block: get_latest_block_with_transactions()
+       blocks: Utils.list_blocks(),
+       latest_block: Utils.get_latest_block_with_transactions()
      )}
   end
-
-  defp get_latest_block_number() do
-    {:ok, latest_block} = Rpc.get_latest_block()
-    latest_block["block_number"]
-  end
-
-  defp list_blocks() do
-    Enum.reverse(list_blocks(get_latest_block_number(), 15, []))
-  end
-
-  defp list_blocks(_block_number, 0, acc) do
-    acc
-  end
-
-  defp list_blocks(block_number, remaining, acc) do
-    {:ok, block} = Rpc.get_block_by_number(block_number)
-    prev_block_number = block_number - 1
-    list_blocks(prev_block_number, remaining - 1, [block | acc])
-  end
-
-  defp get_block_age(block) do
-    %{minutes: minutes, hours: hours, days: days} =
-      DateUtils.calculate_time_difference(block["timestamp"])
-
-    case days do
-      0 ->
-        case hours do
-          0 -> "#{minutes} min"
-          _ -> "#{hours} h"
-        end
-
-      _ ->
-        "#{days} d"
-    end
-  end
-
-  defp shorten_block_hash(block_hash) do
-    "#{String.slice(block_hash, 0, 6)}...#{String.slice(block_hash, -4, 4)}"
-  end
-
-  defp get_latest_block_with_transactions() do
-    {:ok, block} = Rpc.get_block_by_number(get_latest_block_number())
-    [block]
-  end
 end

lib/starknet_explorer_web/live/transaction_index_live.ex

@@ -0,0 +1,65 @@
+defmodule StarknetExplorerWeb.TransactionIndexLive do
+  use StarknetExplorerWeb, :live_view
+  alias StarknetExplorerWeb.Utils
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Transactions</h1>
+    </div>
+    <div class="table-block bg-[#182635]">
+      <div>
+        <ul class="grid grid-cols-4 grid-flow-col text-lg gap-20 px-2 text-white/50">
+          <li scope="col" class="py-5">Transaction Hash</li>
+          <li scope="col" class="py-5">Type</li>
+          <li scope="col" class="py-5">Status</li>
+          <li scope="col" class="py-5">Age</li>
+        </ul>
+      </div>
+      <div id="transactions" class="px-2">
+        <%= for block <- @latest_block do %>
+          <%= for {transaction, idx} <- Enum.with_index(block["transactions"]) do %>
+            <ul
+              id={"transaction-#{idx}"}
+              class="grid gap-20 grid-cols-4  auto-cols-[minmax(0,1fr)] border-b-[0.5px] border-gray-600 last:border-none border-spacing-6"
+            >
+              <li scope="row" class="py-4">
+                <%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
+                  to: "/transactions/#{transaction["transaction_hash"]}",
+                  class: "text-blue-500 hover:text-blue-700 underline-none font-medium"
+                ) %>
+              </li>
+              <li scope="row" class="py-4">
+                <%= transaction["type"] %>
+              </li>
+              <li scope="row" class="py-4"><%= block["status"] %></li>
+              <li scope="row" class="py-4"><%= Utils.get_block_age(block) %></li>
+            </ul>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    Process.send(self(), :load_blocks, [])
+
+    {:ok,
+     assign(socket,
+       blocks: [],
+       latest_block: []
+     )}
+  end
+
+  @impl true
+  def handle_info(:load_blocks, socket) do
+    {:noreply,
+     assign(socket,
+       blocks: Utils.list_blocks(),
+       latest_block: Utils.get_latest_block_with_transactions()
+     )}
+  end
+end

lib/starknet_explorer_web/live/transaction_live.ex

@@ -4,7 +4,9 @@ defmodule StarknetExplorerWeb.TransactionLive do
 
   defp transaction_header(assigns) do
     ~H"""
-    Transaction <br />
+    <div class="flex justify-center items-center pt-14">
+      <h1 class="text-white text-4xl font-mono">Transaction detail</h1>
+    </div>
     <button
       class="font-bold py-2 px-4 rounded bg-blue-500 text-white"
       phx-click="select-view"
@@ -40,6 +42,7 @@ defmodule StarknetExplorerWeb.TransactionLive do
     """
   end
 
+  @impl true
   def render(%{transaction: nil, transaction_receipt: nil} = assigns) do
     ~H"""
 

lib/starknet_explorer_web/live/utils.ex

@@ -0,0 +1,48 @@
+defmodule StarknetExplorerWeb.Utils do
+  alias StarknetExplorer.Rpc
+  alias StarknetExplorer.DateUtils
+
+  def shorten_block_hash(block_hash) do
+    "#{String.slice(block_hash, 0, 6)}...#{String.slice(block_hash, -4, 4)}"
+  end
+
+  def get_latest_block_with_transactions() do
+    {:ok, block} = Rpc.get_block_by_number(get_latest_block_number())
+    [block]
+  end
+
+  def get_latest_block_number() do
+    {:ok, latest_block} = Rpc.get_latest_block()
+    latest_block["block_number"]
+  end
+
+  def list_blocks() do
+    Enum.reverse(list_blocks(get_latest_block_number(), 15, []))
+  end
+
+  def list_blocks(_block_number, 0, acc) do
+    acc
+  end
+
+  def list_blocks(block_number, remaining, acc) do
+    {:ok, block} = Rpc.get_block_by_number(block_number)
+    prev_block_number = block_number - 1
+    list_blocks(prev_block_number, remaining - 1, [block | acc])
+  end
+
+  def get_block_age(block) do
+    %{minutes: minutes, hours: hours, days: days} =
+      DateUtils.calculate_time_difference(block["timestamp"])
+
+    case days do
+      0 ->
+        case hours do
+          0 -> "#{minutes} min"
+          _ -> "#{hours} h"
+        end
+
+      _ ->
+        "#{days} d"
+    end
+  end
+end

lib/starknet_explorer_web/router.ex

@@ -18,8 +18,9 @@ defmodule StarknetExplorerWeb.Router do
     pipe_through :browser
 
     live "/", HomeLive.Index, :index
+    live "/blocks", BlockIndexLive
     live "/block/:number_or_hash", BlockDetailLive
-    live "/transactions", HomeLive.Index
+    live "/transactions", TransactionIndexLive
     live "/transactions/:transaction_hash", TransactionLive
   end