feat(explorer): add batch status on detail page (#339)

Co-authored-by: Mariano A. Nicolini <[email protected]>

Author: glpecile

explorer/lib/explorer_web/components/core_components.ex

@@ -304,12 +304,46 @@ defmodule ExplorerWeb.CoreComponents do
 
   def a(assigns) do
     ~H"""
-    <.link class={["underline underline-offset-4 font-medium	after:content-['↗'] hover:after:content-['→'] transition-all duration-150", @class]} {@rest}>
+    <.link
+      class={[
+        "underline underline-offset-4 font-medium	after:content-['↗'] hover:after:content-['→'] transition-all duration-150",
+        @class
+      ]}
+      {@rest}
+    >
       <%= render_slot(@inner_block) %>
     </.link>
     """
   end
 
+  @doc """
+    Renders a dynamic badge compoent.
+  """
+  attr :class, :string, default: nil
+  attr :status, :boolean, default: true
+  attr :pending_text, :string, default: "Pending"
+  attr :verified_text, :string, default: "Verified"
+  slot :inner_block, default: nil
+
+  def dynamic_badge(assigns) do
+    ~H"""
+    <span class={[
+      "px-3 py-1 rounded-full",
+      case @status do
+        true -> "text-black bg-primary group-hover:bg-primary/80"
+        false -> "text-white bg-secondary group-hover:bg-secondary/80"
+      end,
+      @class
+    ]}>
+      <%= case @status do
+        true -> @verified_text
+        false -> @pending_text
+      end %>
+      <%= render_slot(@inner_block) %>
+    </span>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 

explorer/lib/explorer_web/live/pages/batch/index.html.heex

@@ -3,14 +3,40 @@
     <h1 class="text-5xl font-bold font-foreground">Batch Details</h1>
     <.card
       class="px-6 py-5 min-h-fit flex flex-col rounded-3xl"
-      inner_class="font-semibold inline-flex flex-col text-base gap-y-2 text-muted-foreground [&>span]:text-foreground [&>a]:text-foreground"
+      inner_class="font-semibold inline-flex flex-col text-base gap-y-2 text-muted-foreground [&>p]:text-foreground [&>a]:text-foreground"
     >
-      Merkle Root Hash: <span class="break-all font-normal"><%= @merkle_root %></span>
-      Block Hash: <span class="break-all font-normal"><%= @newBatchInfo.block_hash %></span>
-      Block Number: <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/block/#{@newBatchInfo.block_number}"}  class="break-all font-normal"><%= @newBatchInfo.block_number %></.a>
-      Transaction Hash:
-      <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/tx/#{@newBatchInfo.transaction_hash}"} class="break-all font-normal"><%= @newBatchInfo.transaction_hash %></.a>
-      Aligned Contract Address: <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/address/#{@newBatchInfo.address}"} class="break-all font-normal"><%= @newBatchInfo.address %></.a>
+      Merkle Root Hash:
+      <p class="break-all font-normal"><%= @merkle_root %></p>
+      Block Hash:
+      <p class="break-all font-normal"><%= @newBatchInfo.block_hash %></p>
+      Block Number:
+      <.a
+        target="_blank"
+        rel="noopener"
+        href={"https://holesky.etherscan.io/block/#{@newBatchInfo.block_number}"}
+        class="break-all font-normal"
+      >
+        <%= @newBatchInfo.block_number %>
+      </.a>
+      Batch Submission Transaction Hash:
+      <.a
+        target="_blank"
+        rel="noopener"
+        href={"https://holesky.etherscan.io/tx/#{@newBatchInfo.transaction_hash}"}
+        class="break-all font-normal"
+      >
+        <%= @newBatchInfo.transaction_hash %>
+      </.a>
+      Aligned Contract Address:
+      <.a
+        target="_blank"
+        rel="noopener"
+        href={"https://holesky.etherscan.io/address/#{@newBatchInfo.address}"}
+        class="break-all font-normal"
+      >
+        <%= @newBatchInfo.address %>
+      </.a>
+      Status: <.dynamic_badge class="w-fit" status={@batchWasResponded} />
     </.card>
   <% else %>
     <div class="flex flex-col space-y-6 justify-center grow relative text-center">

explorer/lib/explorer_web/live/pages/batches/index.html.heex

@@ -34,18 +34,7 @@
               <th class={[
                 "font-medium text-base rounded-full"
               ]}>
-                <span class={[
-                  "px-3 py-1 rounded-full",
-                  case batch.responded do
-                    true -> "text-black bg-primary group-hover:bg-primary/80"
-                    false -> "text-white bg-secondary group-hover:bg-secondary/80"
-                  end
-                ]}>
-                  <%= case batch.responded do
-                    true -> "Verified"
-                    false -> "Pending"
-                  end %>
-                </span>
+                <.dynamic_badge status={batch.responded} />
               </th>
             </tr>
           <% end %>