From 789ab16732e87188893fd140e2517335c7de458f Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:06:02 -0300
Subject: [PATCH 01/36] refactor: tables ui component

---
 .../explorer_web/components/batches_table.ex  |  35 +++++
 .../components/core_components.ex             | 136 +++++++++---------
 .../explorer_web/live/pages/batches/index.ex  |   1 +
 .../live/pages/batches/index.html.heex        |  29 +---
 .../lib/explorer_web/live/pages/home/index.ex |   1 +
 .../live/pages/home/index.html.heex           |  65 +++------
 .../live/pages/operators/index.ex             |  86 ++++++-----
 .../explorer_web/live/pages/restakes/index.ex |  70 ++++-----
 8 files changed, 213 insertions(+), 210 deletions(-)
 create mode 100644 explorer/lib/explorer_web/components/batches_table.ex

diff --git a/explorer/lib/explorer_web/components/batches_table.ex b/explorer/lib/explorer_web/components/batches_table.ex
new file mode 100644
index 000000000..25c990a51
--- /dev/null
+++ b/explorer/lib/explorer_web/components/batches_table.ex
@@ -0,0 +1,35 @@
+defmodule ExplorerWeb.BatchesTable do
+  use Phoenix.Component
+  use ExplorerWeb, :live_component
+
+  attr(:batches, :list, required: true)
+
+  def batches_table(assigns) do
+    ~H"""
+    <.table id="batches" rows={@batches}>
+      <:col :let={latest_batch} label="Batch Hash" class="text-left">
+        <.link navigate={~p"/batches/#{latest_batch.merkle_root}"}>
+          <span class="inline-flex gap-x-3 items-center group-hover:text-foreground/80">
+            <%= Helpers.shorten_hash(latest_batch.merkle_root, 6) %>
+            <.right_arrow />
+            <.tooltip>
+              <%= latest_batch.merkle_root %>
+            </.tooltip>
+          </span>
+        </.link>
+      </:col>
+      <:col :let={latest_batch} label="Status">
+        <.dynamic_badge_for_batcher status={Helpers.get_batch_status(latest_batch)} />
+      </:col>
+      <:col :let={latest_batch} label="Age">
+        <span class="md:px-0" title={latest_batch.submission_timestamp}>
+          <%= latest_batch.submission_timestamp |> Helpers.parse_timeago() %>
+        </span>
+      </:col>
+      <:col :let={latest_batch} label="Block Number">
+        <%= latest_batch.submission_block_number |> Helpers.format_number() %>
+      </:col>
+    </.table>
+    """
+  end
+end
diff --git a/explorer/lib/explorer_web/components/core_components.ex b/explorer/lib/explorer_web/components/core_components.ex
index b77c5034b..445dfc7ad 100644
--- a/explorer/lib/explorer_web/components/core_components.ex
+++ b/explorer/lib/explorer_web/components/core_components.ex
@@ -522,13 +522,26 @@ defmodule ExplorerWeb.CoreComponents do
       classes([
         "px-3 py-1 rounded-full font-semibold relative group",
         case @variant do
-          "accent" -> "color-accent text-accent-foreground bg-accent group-hover:bg-accent/80"
-          "primary" -> "color-primary text-primary-foreground bg-primary group-hover:bg-primary/80"
-          "secondary" -> "color-secondary text-secondary-foreground bg-secondary group-hover:bg-secondary/80"
-          "destructive" -> "color-destructive text-destructive-foreground bg-destructive group-hover:bg-destructive/80"
-          "foreground" -> "color-foreground text-background bg-foreground group-hover:bg-foreground/80"
-          "card" -> "color-card text-card-foreground bg-card group-hover:bg-card/80"
-          _ -> "color-accent text-accent-foreground bg-accent group-hover:bg-accent/80"
+          "accent" ->
+            "color-accent text-accent-foreground bg-accent group-hover:bg-accent/80"
+
+          "primary" ->
+            "color-primary text-primary-foreground bg-primary group-hover:bg-primary/80"
+
+          "secondary" ->
+            "color-secondary text-secondary-foreground bg-secondary group-hover:bg-secondary/80"
+
+          "destructive" ->
+            "color-destructive text-destructive-foreground bg-destructive group-hover:bg-destructive/80"
+
+          "foreground" ->
+            "color-foreground text-background bg-foreground group-hover:bg-foreground/80"
+
+          "card" ->
+            "color-card text-card-foreground bg-card group-hover:bg-card/80"
+
+          _ ->
+            "color-accent text-accent-foreground bg-accent group-hover:bg-accent/80"
         end,
         @class
       ])
@@ -541,13 +554,16 @@ defmodule ExplorerWeb.CoreComponents do
       >
         <div class="w-full bg-card border border-muted-foreground/30 rounded-lg">
           <%= for {value, on_click} <- @options do %>
-            <button class={classes([
-              "text-card-foreground w-full rounded-lg p-4 text-center hover:bg-accent",
-              case @current_value do
-                ^value -> "text-accent hover:text-accent-foreground"
-                _ -> ""
-                end
-              ])}
+            <button
+              class={
+                classes([
+                  "text-card-foreground w-full rounded-lg p-4 text-center hover:bg-accent",
+                  case @current_value do
+                    ^value -> "text-accent hover:text-accent-foreground"
+                    _ -> ""
+                  end
+                ])
+              }
               onclick={on_click}
             >
               <%= value %>
@@ -794,8 +810,6 @@ defmodule ExplorerWeb.CoreComponents do
   end
 
   slot(:action, doc: "the slot for showing user actions in the last table column")
-  slot(:header, default: nil, doc: "optional header for the table")
-  slot(:footer, default: nil, doc: "optional footer for the table")
 
   def table(assigns) do
     assigns =
@@ -804,58 +818,46 @@ defmodule ExplorerWeb.CoreComponents do
       end
 
     ~H"""
-    <.card_background class={classes(["overflow-x-auto", @class])}>
-      <%= render_slot(@header) %>
-      <table class="table-auto border-collapse w-full">
-        <thead>
-          <tr class="text-muted-foreground font-normal truncate">
-            <th
-              :for={{col, i} <- Enum.with_index(@col)}
-              class={classes(["pr-4", i == 0 && "text-left", i != 0 && "text-center"])}
-            >
-              <%= col[:label] %>
-            </th>
-            <th :if={@action != []} class="p-0 pb-4">
-              <span class="sr-only"><%= gettext("Actions") %></span>
-            </th>
-          </tr>
-        </thead>
-        <tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}>
-          <tr
-            :for={row <- @rows}
-            id={@row_id && @row_id.(row)}
-            class="gap-y-2 [&>td]:pt-3 animate-in fade-in-0 duration-700 truncate"
+    <table class="table-auto border-collapse w-full">
+      <thead>
+        <tr class="text-muted-foreground truncate">
+          <th :for={{col, i} <- Enum.with_index(@col)} class="text-left font-normal">
+            <%= col[:label] %>
+          </th>
+          <th :if={@action != []} class="p-0 pb-4">
+            <span class="sr-only"><%= gettext("Actions") %></span>
+          </th>
+        </tr>
+      </thead>
+      <tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}>
+        <tr
+          :for={row <- @rows}
+          id={@row_id && @row_id.(row)}
+          class="gap-y-2 [&>td]:pt-3 animate-in fade-in-0 duration-700 truncate"
+        >
+          <td
+            :for={{col, _i} <- Enum.with_index(@col)}
+            phx-click={@row_click && @row_click.(row)}
+            class={classes(["p-0", @row_click && "hover:cursor-pointer"])}
           >
-            <td
-              :for={{col, _i} <- Enum.with_index(@col)}
-              phx-click={@row_click && @row_click.(row)}
-              class={classes(["p-0", @row_click && "hover:cursor-pointer"])}
-            >
-              <div class={
-                classes([
-                  "group block normal-case font-medium text-base min-w-28",
-                  col[:class] != nil && col[:class],
-                  col[:class] == nil && "text-center font-semibold"
-                ])
-              }>
-                <%= render_slot(col, @row_item.(row)) %>
-              </div>
-            </td>
-            <td :if={@action != []} class="w-14 p-0">
-              <div class="whitespace-nowrap py-4 text-right text-sm font-medium">
-                <span
-                  :for={action <- @action}
-                  class="ml-4 font-semibold leading-6 text-muted-foreground"
-                >
-                  <%= render_slot(action, @row_item.(row)) %>
-                </span>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <%= render_slot(@footer) %>
-    </.card_background>
+            <div class={
+              classes([
+                "group block normal-case  text-base min-w-28"
+              ])
+            }>
+              <%= render_slot(col, @row_item.(row)) %>
+            </div>
+          </td>
+          <td :if={@action != []} class="w-14 p-0">
+            <div class="whitespace-nowrap py-4 text-left text-sm">
+              <span :for={action <- @action} class="ml-4 leading-6 text-muted-foreground">
+                <%= render_slot(action, @row_item.(row)) %>
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     """
   end
 
diff --git a/explorer/lib/explorer_web/live/pages/batches/index.ex b/explorer/lib/explorer_web/live/pages/batches/index.ex
index f6c649c8e..57e647a5b 100644
--- a/explorer/lib/explorer_web/live/pages/batches/index.ex
+++ b/explorer/lib/explorer_web/live/pages/batches/index.ex
@@ -1,6 +1,7 @@
 defmodule ExplorerWeb.Batches.Index do
   alias Phoenix.PubSub
   require Logger
+  import ExplorerWeb.BatchesTable
   use ExplorerWeb, :live_view
 
   @page_size 15
diff --git a/explorer/lib/explorer_web/live/pages/batches/index.html.heex b/explorer/lib/explorer_web/live/pages/batches/index.html.heex
index cdfc5add4..8172a2961 100644
--- a/explorer/lib/explorer_web/live/pages/batches/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/batches/index.html.heex
@@ -1,32 +1,11 @@
 <div class="flex flex-col space-y-3 text-foreground px-1 sm:max-w-lg md:max-w-3xl lg:max-w-5xl mx-auto capitalize">
   <.card_preheding>Batches</.card_preheding>
   <%= if @batches != :empty and @batches != [] do %>
-    <.table id="batches" rows={@batches}>
-      <:col :let={batch} label="Batch Hash" class="text-left">
-        <.link navigate={~p"/batches/#{batch.merkle_root}"}>
-          <span class="inline-flex gap-x-3 col-span-2 items-center group-hover:text-foreground/80">
-            <%= Helpers.shorten_hash(batch.merkle_root, 6) %>
-            <.right_arrow />
-            <.tooltip>
-              <%= batch.merkle_root %>
-            </.tooltip>
-          </span>
-        </.link>
-      </:col>
-      <:col :let={batch} label="Status">
-        <.dynamic_badge_for_batcher status={Helpers.get_batch_status(batch)} />
-      </:col>
-      <:col :let={batch} label="Age">
-        <span class="md:px-0" title={batch.submission_timestamp}>
-          <%= batch.submission_timestamp |> Helpers.parse_timeago() %>
-        </span>
-      </:col>
-      <:col :let={batch} label="Submission Block Number">
-        <%= batch.submission_block_number |> Helpers.format_number() %>
-      </:col>
-    </.table>
+    <.card_background class="w-full overflow-x-auto sm:col-span-2">
+      <.batches_table batches={@batches} />
+    </.card_background>
   <% else %>
-    <.empty_card_background text="No batches found." />
+    <.empty_card_background text="No Batches To Display." class="sm:col-span-2" />
   <% end %>
   <div class="flex gap-x-2 items-center justify-center w-full">
     <%= if @current_page >= 2 do %>
diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index e88e22956..58e407335 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -1,6 +1,7 @@
 defmodule ExplorerWeb.Home.Index do
   require Logger
   import ExplorerWeb.ChartComponents
+  import ExplorerWeb.BatchesTable
   use ExplorerWeb, :live_view
 
   def get_cost_per_proof_chart_data() do
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 1fce66f3e..6714112da 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -12,18 +12,19 @@
         <%= @operators_registered %>
       <% end %>
     </.card_link>
-    <.card_link 
-        icon="hero-arrow-right-solid" 
-        navigate={~p"/restake"} 
-        title="Total Restaked" 
-        subtitle={
-          if @restaked_amount_eth |> Helpers.format_number() != nil do
-            "(#{@restaked_amount_eth |> Helpers.format_number()} ETH)"
-          end
-        }>
-        <%= if @restaked_amount_usd |> Helpers.format_number() != nil do %>
-          <%= @restaked_amount_usd |> Helpers.format_number() %> USD
-        <% end %>
+    <.card_link
+      icon="hero-arrow-right-solid"
+      navigate={~p"/restake"}
+      title="Total Restaked"
+      subtitle={
+        if @restaked_amount_eth |> Helpers.format_number() != nil do
+          "(#{@restaked_amount_eth |> Helpers.format_number()} ETH)"
+        end
+      }
+    >
+      <%= if @restaked_amount_usd |> Helpers.format_number() != nil do %>
+        <%= @restaked_amount_usd |> Helpers.format_number() %> USD
+      <% end %>
     </.card_link>
     <.card title="verified batches">
       <%= if @verified_batches != :empty do %>
@@ -46,44 +47,16 @@
       </div>
     </.card>
     <div class="relative truncate sm:col-span-2">
-        <h1 class="text-xl font-bold font-foreground text-left py-2">
+      <h1 class="text-xl font-bold font-foreground text-left py-2">
         Recent Batches
-        </h1>
+      </h1>
     </div>
     <%= if @latest_batches != :empty and @latest_batches != [] do %>
-        <.table id="latest_batches" rows={@latest_batches} class="sm:col-span-2">
-        <:col :let={latest_batch} label="Batch Hash" class="text-left">
-          <.link navigate={~p"/batches/#{latest_batch.merkle_root}"}>
-            <span class="inline-flex gap-x-3 col-span-2 items-center group-hover:text-foreground/80">
-              <%= Helpers.shorten_hash(latest_batch.merkle_root, 6) %>
-              <.right_arrow />
-              <.tooltip>
-                <%= latest_batch.merkle_root %>
-              </.tooltip>
-            </span>
-          </.link>
-        </:col>
-        <:col :let={latest_batch} label="Status">
-          <.dynamic_badge_for_batcher status={Helpers.get_batch_status(latest_batch)} />
-        </:col>
-        <:col :let={latest_batch} label="Age">
-          <span class="md:px-0" title={latest_batch.submission_timestamp}>
-            <%= latest_batch.submission_timestamp |> Helpers.parse_timeago() %>
-          </span>
-        </:col>
-        <:col :let={latest_batch} label="Submission Block Number">
-          <%= latest_batch.submission_block_number |> Helpers.format_number() %>
-        </:col>
-        <:footer>
-          <div class="flex justify-center py-3">    
-            <.link navigate={~p"/batches"} class="absolute hover:underline font-medium text-muted-foreground capitalize text-sm">
-                View All <.icon name="hero-arrow-top-right-on-square-solid" class="size-3.5 mb-1" />
-            </.link>
-          </div>
-        </:footer>
-      </.table>
+      <.card_background class="w-full overflow-x-auto sm:col-span-2">
+        <.batches_table batches={@latest_batches} />
+      </.card_background>
     <% else %>
-      <.empty_card_background text="No Batches To Display." class="sm:col-span-2"/>
+      <.empty_card_background text="No Batches To Display." class="sm:col-span-2" />
     <% end %>
   </div>
 </section>
diff --git a/explorer/lib/explorer_web/live/pages/operators/index.ex b/explorer/lib/explorer_web/live/pages/operators/index.ex
index 26e156802..c05a54aa0 100644
--- a/explorer/lib/explorer_web/live/pages/operators/index.ex
+++ b/explorer/lib/explorer_web/live/pages/operators/index.ex
@@ -54,46 +54,54 @@ defmodule ExplorerWeb.Operators.Index do
         operators_registered={@operators_registered}
       />
       <%= if @operators != [] do %>
-        <.table id="operators" rows={@operators}>
-          <:col :let={operator} label="Name" class="[animation-delay: 3s]">
-            <.link navigate={~p"/operators/#{operator.address}"} class="flex gap-x-2">
-              <span class="inline-flex gap-x-3 col-span-2 items-center group-hover:text-foreground/80">
-                <img
-                  src={operator.logo_link}
-                  alt={operator.name}
-                  class="rounded-full size-5 object-scale-down"
-                />
-                <span>
-                  <%= operator.name %>
-                  <%= if @operator_versions[operator.address] != nil do %>
-                    <.badge class="text-xs px-1.5" variant="secondary">
-                      <%= @operator_versions[operator.address] %>
-                    </.badge>
-                  <% end %>
+        <.card_background>
+          <.table id="operators" rows={@operators}>
+            <:col :let={operator} label="Name" class="[animation-delay: 3s]">
+              <.link navigate={~p"/operators/#{operator.address}"} class="flex gap-x-2">
+                <span class="inline-flex gap-x-3 col-span-2 items-center group-hover:text-foreground/80">
+                  <img
+                    src={operator.logo_link}
+                    alt={operator.name}
+                    class="rounded-full size-5 object-scale-down"
+                  />
+                  <span>
+                    <%= operator.name %>
+                    <%= if @operator_versions[operator.address] != nil do %>
+                      <.badge class="text-xs px-1.5" variant="secondary">
+                        <%= @operator_versions[operator.address] %>
+                      </.badge>
+                    <% end %>
+                  </span>
+                  <.right_arrow />
+                  <.tooltip class="py-2 px-2.5 rounded-2xl">
+                    <span class="font-semibold text-muted-foreground">Id:</span> <%= operator.id
+                    |> Helpers.binary_to_hex_string() %>
+                    <br />
+                    <span class="font-semibold text-muted-foreground">Address:</span> <%= operator.address %>
+                  </.tooltip>
                 </span>
-                <.right_arrow />
-                <.tooltip class="py-2 px-2.5 rounded-2xl">
-                  <span class="font-semibold text-muted-foreground">Id:</span> <%= operator.id
-                  |> Helpers.binary_to_hex_string() %>
-                  <br />
-                  <span class="font-semibold text-muted-foreground">Address:</span> <%= operator.address %>
-                </.tooltip>
-              </span>
-            </.link>
-          </:col>
-          <:col :let={operator} label="Restake Concentration">
-            <%= operator.weight |> Numbers.show_percentage() %>
-          </:col>
-          <:col :let={operator} label="Total Restaked">
-            <div class="flex flex-col">
-              <p><%= operator.total_stake_usd |> Helpers.format_number() %> USD</p>
-              <p class="text-gray-500 font-normal"><%= operator.total_stake_eth |> Helpers.format_number() %> ETH</p>
-            </div>
-          </:col>
-          <:col :let={operator} label="Status">
-            <.dynamic_badge_boolean status={operator.is_active} truthy_text="Active" falsy_text="Inactive" />
-          </:col>
-        </.table>
+              </.link>
+            </:col>
+            <:col :let={operator} label="Restake Concentration">
+              <%= operator.weight |> Numbers.show_percentage() %>
+            </:col>
+            <:col :let={operator} label="Total Restaked">
+              <div class="flex flex-col">
+                <p><%= operator.total_stake_usd |> Helpers.format_number() %> USD</p>
+                <p class="text-gray-500 font-normal">
+                  <%= operator.total_stake_eth |> Helpers.format_number() %> ETH
+                </p>
+              </div>
+            </:col>
+            <:col :let={operator} label="Status">
+              <.dynamic_badge_boolean
+                status={operator.is_active}
+                truthy_text="Active"
+                falsy_text="Inactive"
+              />
+            </:col>
+          </.table>
+        </.card_background>
       <% else %>
         <.empty_card_background text="No operators found." />
       <% end %>
diff --git a/explorer/lib/explorer_web/live/pages/restakes/index.ex b/explorer/lib/explorer_web/live/pages/restakes/index.ex
index 68b3e6eff..40554b6d5 100644
--- a/explorer/lib/explorer_web/live/pages/restakes/index.ex
+++ b/explorer/lib/explorer_web/live/pages/restakes/index.ex
@@ -65,39 +65,43 @@ defmodule ExplorerWeb.Restakes.Index do
         operators_registered={@operators_registered}
       />
       <%= if @assets != [] do %>
-        <.table id="assets" rows={@assets}>
-          <:col :let={asset} label="Token" class="text-left">
-            <.link
-              navigate={~p"/restakes/#{asset.strategy_address}"}
-              class="flex gap-x-2 items-center group-hover:text-foreground/80"
-            >
-              <img
-                src={~s"/images/restakes/#{asset.symbol |> String.downcase()}.webp"}
-                alt={asset.name}
-                class="size-5 rounded-full object-scale-down text-xs truncate text-center"
-              />
-              <%= if asset.name != "‎" do %>
-                <%= asset.name %>
-              <% else %>
-                <%= asset.strategy_address %>
-              <% end %>
-              <p class="text-muted-foreground text-sm">
-                <%= asset.symbol %>
-              </p>
-              <.right_arrow />
-            </.link>
-          </:col>
-          <:col :let={asset} label="Total Restaked">
-            <div class="flex flex-col">
-              <%= if asset.total_staked_eth != nil do %>
-                <p><%= asset.total_staked_usd |> Helpers.format_number() %> USD</p>
-                <p class="text-gray-500 font-normal"><%= asset.total_staked_eth |> Helpers.format_number() %> ETH</p>
-              <% else %>
-                N/A
-              <% end %>
-            </div>
-          </:col>
-        </.table>
+        <.card_background>
+          <.table id="assets" rows={@assets}>
+            <:col :let={asset} label="Token" class="text-left">
+              <.link
+                navigate={~p"/restakes/#{asset.strategy_address}"}
+                class="flex gap-x-2 items-center group-hover:text-foreground/80"
+              >
+                <img
+                  src={~s"/images/restakes/#{asset.symbol |> String.downcase()}.webp"}
+                  alt={asset.name}
+                  class="size-5 rounded-full object-scale-down text-xs truncate text-center"
+                />
+                <%= if asset.name != "‎" do %>
+                  <%= asset.name %>
+                <% else %>
+                  <%= asset.strategy_address %>
+                <% end %>
+                <p class="text-muted-foreground text-sm">
+                  <%= asset.symbol %>
+                </p>
+                <.right_arrow />
+              </.link>
+            </:col>
+            <:col :let={asset} label="Total Restaked">
+              <div class="flex flex-col">
+                <%= if asset.total_staked_eth != nil do %>
+                  <p><%= asset.total_staked_usd |> Helpers.format_number() %> USD</p>
+                  <p class="text-gray-500 font-normal">
+                    <%= asset.total_staked_eth |> Helpers.format_number() %> ETH
+                  </p>
+                <% else %>
+                  N/A
+                <% end %>
+              </div>
+            </:col>
+          </.table>
+        </.card_background>
       <% else %>
         <.empty_card_background text="No restaked assets found." />
       <% end %>

From 449225b00eaf60722cdc3a252f7b425ffc9356fe Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:19:15 -0300
Subject: [PATCH 02/36] feat: number of proofs and fee per proof on batches
 table

---
 .../explorer_web/components/batches_table.ex  | 30 ++++++++++++-------
 .../components/core_components.ex             |  2 +-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/explorer/lib/explorer_web/components/batches_table.ex b/explorer/lib/explorer_web/components/batches_table.ex
index 25c990a51..bb34fbba9 100644
--- a/explorer/lib/explorer_web/components/batches_table.ex
+++ b/explorer/lib/explorer_web/components/batches_table.ex
@@ -7,27 +7,35 @@ defmodule ExplorerWeb.BatchesTable do
   def batches_table(assigns) do
     ~H"""
     <.table id="batches" rows={@batches}>
-      <:col :let={latest_batch} label="Batch Hash" class="text-left">
-        <.link navigate={~p"/batches/#{latest_batch.merkle_root}"}>
+      <:col :let={batch} label="Batch Hash" class="text-left">
+        <.link navigate={~p"/batches/#{batch.merkle_root}"}>
           <span class="inline-flex gap-x-3 items-center group-hover:text-foreground/80">
-            <%= Helpers.shorten_hash(latest_batch.merkle_root, 6) %>
+            <%= Helpers.shorten_hash(batch.merkle_root, 6) %>
             <.right_arrow />
             <.tooltip>
-              <%= latest_batch.merkle_root %>
+              <%= batch.merkle_root %>
             </.tooltip>
           </span>
         </.link>
       </:col>
-      <:col :let={latest_batch} label="Status">
-        <.dynamic_badge_for_batcher status={Helpers.get_batch_status(latest_batch)} />
+      <:col :let={batch} label="Status">
+        <.dynamic_badge_for_batcher status={Helpers.get_batch_status(batch)} />
       </:col>
-      <:col :let={latest_batch} label="Age">
-        <span class="md:px-0" title={latest_batch.submission_timestamp}>
-          <%= latest_batch.submission_timestamp |> Helpers.parse_timeago() %>
+      <:col :let={batch} label="Age">
+        <span class="md:px-0" title={batch.submission_timestamp}>
+          <%= batch.submission_timestamp |> Helpers.parse_timeago() %>
         </span>
       </:col>
-      <:col :let={latest_batch} label="Block Number">
-        <%= latest_batch.submission_block_number |> Helpers.format_number() %>
+      <:col :let={batch} label="Block Number">
+        <%= batch.submission_block_number |> Helpers.format_number() %>
+      </:col>
+
+      <:col :let={batch} label="Fee per proof">
+        <%= batch.fee_per_proof |> EthConverter.wei_to_eth(4) %> ETH
+      </:col>
+
+      <:col :let={batch} label="Number of proofs">
+        <%= batch.amount_of_proofs |> Helpers.format_number() %>
       </:col>
     </.table>
     """
diff --git a/explorer/lib/explorer_web/components/core_components.ex b/explorer/lib/explorer_web/components/core_components.ex
index 445dfc7ad..5c0ab260b 100644
--- a/explorer/lib/explorer_web/components/core_components.ex
+++ b/explorer/lib/explorer_web/components/core_components.ex
@@ -838,7 +838,7 @@ defmodule ExplorerWeb.CoreComponents do
           <td
             :for={{col, _i} <- Enum.with_index(@col)}
             phx-click={@row_click && @row_click.(row)}
-            class={classes(["p-0", @row_click && "hover:cursor-pointer"])}
+            class={classes(["p-0 pr-10", @row_click && "hover:cursor-pointer"])}
           >
             <div class={
               classes([

From b86ea43731187c643797569909b8b395f6b5d606 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:24:48 -0300
Subject: [PATCH 03/36] refactor: spacing in table

---
 explorer/lib/explorer_web/components/core_components.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/lib/explorer_web/components/core_components.ex b/explorer/lib/explorer_web/components/core_components.ex
index 5c0ab260b..b0b948600 100644
--- a/explorer/lib/explorer_web/components/core_components.ex
+++ b/explorer/lib/explorer_web/components/core_components.ex
@@ -821,7 +821,7 @@ defmodule ExplorerWeb.CoreComponents do
     <table class="table-auto border-collapse w-full">
       <thead>
         <tr class="text-muted-foreground truncate">
-          <th :for={{col, i} <- Enum.with_index(@col)} class="text-left font-normal">
+          <th :for={{col, i} <- Enum.with_index(@col)} class="text-left font-normal pb-5">
             <%= col[:label] %>
           </th>
           <th :if={@action != []} class="p-0 pb-4">
@@ -833,7 +833,7 @@ defmodule ExplorerWeb.CoreComponents do
         <tr
           :for={row <- @rows}
           id={@row_id && @row_id.(row)}
-          class="gap-y-2 [&>td]:pt-3 animate-in fade-in-0 duration-700 truncate"
+          class="gap-y-2 [&>td]:pb-4 animate-in fade-in-0 duration-700 truncate"
         >
           <td
             :for={{col, _i} <- Enum.with_index(@col)}

From 295d002da04f47e990ce82d2383ee4e840f9aa55 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:33:13 -0300
Subject: [PATCH 04/36] feat: enlarge view and ditch grid for flex

---
 .../live/pages/home/index.html.heex           | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 6714112da..69654adc9 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -1,8 +1,10 @@
-<section class="md:max-w-[50rem] mx-auto">
-  <h1 class="text-5xl text-center font-medium tracking-tighter drop-shadow-lg text-primary mt-3">
-    Aligned Explorer
-  </h1>
-  <div class="mt-8 text-foreground px-2 grid grid-cols-1 sm:grid-cols-2 gap-3">
+<section class="mx-auto" style="max-width: 1200px;">
+  <div class="flex justify-center items-center">
+    <h1 class="text-5xl w-fit font-normal p-2 px-4 selection:bg-accent-foreground/20 selection:text-accent-foreground/80 rounded-xl tracking-tighter bg-accent drop-shadow-lg text-black mt-3">
+      Aligned Layer Explorer
+    </h1>
+  </div>
+  <div class="mt-8 text-foreground px-2 flex flex-col justify-center gap-5">
     <.card_link
       icon="hero-arrow-right-solid"
       navigate={~p"/operators"}
@@ -14,7 +16,7 @@
     </.card_link>
     <.card_link
       icon="hero-arrow-right-solid"
-      navigate={~p"/restake"}
+      navigate={~p"/restakes"}
       title="Total Restaked"
       subtitle={
         if @restaked_amount_eth |> Helpers.format_number() != nil do
@@ -36,8 +38,8 @@
         <%= @verified_proofs |> Helpers.format_number() %>
       <% end %>
     </.card>
-    <.live_component module={ContractsComponent} id="contracts_card" class="sm:col-span-2" />
-    <.card title="Cost per proof" class="w-full sm:col-span-2">
+    <.live_component module={ContractsComponent} id="contracts_card" class="" />
+    <.card title="Cost per proof" class="w-full">
       <div style="height: 200px;" class="mt-4">
         <.line_chart
           id="cost_per_proof_chart"
@@ -46,17 +48,17 @@
         />
       </div>
     </.card>
-    <div class="relative truncate sm:col-span-2">
+    <div class="relative truncate">
       <h1 class="text-xl font-bold font-foreground text-left py-2">
         Recent Batches
       </h1>
     </div>
     <%= if @latest_batches != :empty and @latest_batches != [] do %>
-      <.card_background class="w-full overflow-x-auto sm:col-span-2">
+      <.card_background class="w-full overflow-x-auto">
         <.batches_table batches={@latest_batches} />
       </.card_background>
     <% else %>
-      <.empty_card_background text="No Batches To Display." class="sm:col-span-2" />
+      <.empty_card_background text="No Batches To Display." />
     <% end %>
   </div>
 </section>

From 5faeb5a427017a3416550a63d2281f526fcbc43a Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:45:53 -0300
Subject: [PATCH 05/36] feat: new card style

---
 .../explorer_web/components/core_components.ex | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/explorer/lib/explorer_web/components/core_components.ex b/explorer/lib/explorer_web/components/core_components.ex
index b0b948600..23061887b 100644
--- a/explorer/lib/explorer_web/components/core_components.ex
+++ b/explorer/lib/explorer_web/components/core_components.ex
@@ -305,19 +305,23 @@ defmodule ExplorerWeb.CoreComponents do
   """
   attr(:class, :string, default: nil)
   attr(:title, :string, default: nil)
+  attr(:subtitle, :string, default: nil)
   attr(:inner_class, :string, default: nil)
-
+  attr(:header_container_class, :string, default: nil)
   slot(:inner_block, default: nil)
 
   def card(assigns) do
     ~H"""
-    <.card_background class={@class}>
-      <h2 class="font-medium text-muted-foreground capitalize">
-        <%= @title %>
-      </h2>
-      <span class={classes(["text-4xl font-bold slashed-zero", @inner_class])}>
+    <.card_background class={classes(["px-10 py-8", @class])}>
+      <div class={classes(["mb-6", @header_container_class])}>
+        <h2 class="text-2xl mb-1 text-foreground font-bold">
+          <%= @title %>
+        </h2>
+        <p class="text-md text-muted-foreground"><%= @subtitle %></p>
+      </div>
+      <div class={classes(["w-full", @inner_class])}>
         <%= render_slot(@inner_block) %>
-      </span>
+      </div>
     </.card_background>
     """
   end

From 9e8ab1e6f8ddc7613a61159a013518d7e53d003d Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 17:50:42 -0300
Subject: [PATCH 06/36] feat: landing stats

---
 explorer/assets/vendor/tooltip.js             |  2 +-
 explorer/lib/explorer/models/batches.ex       | 13 +++
 .../lib/explorer_web/live/pages/home/index.ex | 88 +++++++++++--------
 .../live/pages/home/index.html.heex           | 44 +++-------
 4 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/explorer/assets/vendor/tooltip.js b/explorer/assets/vendor/tooltip.js
index 86bd1de22..80b29ba7a 100644
--- a/explorer/assets/vendor/tooltip.js
+++ b/explorer/assets/vendor/tooltip.js
@@ -41,7 +41,7 @@ class Tooltip {
 	setupFloatingUI() {
 		this.cleanup = autoUpdate(this.$parent, this.$tooltip, () => {
 			computePosition(this.$parent, this.$tooltip, {
-				placement: "top",
+				placement: "bottom",
 				middleware: [offset(5), flip(), shift({ padding: 5 })]
 			}).then(({ x, y }) => {
 				Object.assign(this.$tooltip.style, {
diff --git a/explorer/lib/explorer/models/batches.ex b/explorer/lib/explorer/models/batches.ex
index 27045ad6e..b22dd7b68 100644
--- a/explorer/lib/explorer/models/batches.ex
+++ b/explorer/lib/explorer/models/batches.ex
@@ -139,6 +139,19 @@ defmodule Batches do
       result -> result
     end
   end
+  
+  def get_avg_fee_per_proof() do
+    query =
+      from(b in Batches,
+        where: b.is_verified == true,
+        select: avg(b.fee_per_proof)
+      )
+
+    case Explorer.Repo.one(query) do
+      nil -> 0
+      result -> result
+    end
+  end
 
   def get_amount_of_verified_proofs() do
     query = from(b in Batches,
diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 58e407335..b0ad1165e 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -4,6 +4,54 @@ defmodule ExplorerWeb.Home.Index do
   import ExplorerWeb.BatchesTable
   use ExplorerWeb, :live_view
 
+  def get_stats() do
+    verified_batches = Batches.get_amount_of_verified_batches()
+    avg_fee_per_proof = Batches.get_avg_fee_per_proof()
+
+    avg_fee_per_proof_usd =
+      case EthConverter.wei_to_usd(avg_fee_per_proof, 2) do
+        {:ok, value} -> value
+        _ -> 0
+      end
+
+    avg_fee_per_proof_eth = EthConverter.wei_to_eth(avg_fee_per_proof, 4)
+
+    verified_proofs = Batches.get_amount_of_verified_proofs()
+    operators_registered = Operators.get_amount_of_operators()
+
+    restaked_amount_eth = Restakings.get_restaked_amount_eth()
+    restaked_amount_usd = Restakings.get_restaked_amount_usd()
+    operator_latest_release = ReleasesHelper.get_latest_release()
+
+    [
+      %{
+        title: "Proofs verified",
+        value: Helpers.convert_number_to_shorthand(verified_proofs),
+        tooltip_text: nil
+      },
+      %{
+        title: "Total batches",
+        value: Helpers.convert_number_to_shorthand(verified_batches),
+        tooltip_text: nil
+      },
+      %{
+        title: "AVG proof cost",
+        value: "#{avg_fee_per_proof_usd} USD",
+        tooltip_text: "~= #{avg_fee_per_proof_eth} ETH"
+      },
+      %{
+        title: "Operators",
+        value: operators_registered,
+        tooltip_text: "Current version #{operator_latest_release}"
+      },
+      %{
+        title: "Total restake",
+        value: "#{restaked_amount_usd} USD",
+        tooltip_text: "~= #{restaked_amount_eth} ETH"
+      }
+    ]
+  end
+
   def get_cost_per_proof_chart_data() do
     batches = Enum.reverse(Batches.get_latest_batches(%{amount: 100, order_by: :desc}))
 
@@ -40,67 +88,35 @@ defmodule ExplorerWeb.Home.Index do
 
     socket
     |> assign(
-      verified_batches: :empty,
-      operators_registered: :empty,
-      latest_batches: :empty,
-      verified_proofs: :empty,
-      restaked_amount_eth: :empty,
-      restaked_amount_usd: :empty,
+      stats: [],
+      latest_batches: [],
       cost_per_proof_data: %{points: [], extra_data: %{}}
     )
   end
 
   @impl true
   def handle_info(_, socket) do
-    verified_batches = Batches.get_amount_of_verified_batches()
-
-    operators_registered = Operators.get_amount_of_operators()
-
     latest_batches = Batches.get_latest_batches(%{amount: 5, order_by: :desc})
 
-    verified_proofs = Batches.get_amount_of_verified_proofs()
-
-    restaked_amount_eth = Restakings.get_restaked_amount_eth()
-    restaked_amount_usd = Restakings.get_restaked_amount_usd()
-
     {:noreply,
      assign(
        socket,
-       verified_batches: verified_batches,
-       operators_registered: operators_registered,
+       stats: get_stats(),
        latest_batches: latest_batches,
-       verified_proofs: verified_proofs,
-       restaked_amount_eth: restaked_amount_eth,
-       restaked_amount_usd: restaked_amount_usd,
        cost_per_proof_chart: get_cost_per_proof_chart_data()
      )}
   end
 
   @impl true
   def mount(_, _, socket) do
-    verified_batches = Batches.get_amount_of_verified_batches()
-
-    operators_registered = Operators.get_amount_of_operators()
-
     latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
 
-    verified_proofs = Batches.get_amount_of_verified_proofs()
-
-    restaked_amount_eth = Restakings.get_restaked_amount_eth()
-    restaked_amount_usd = Restakings.get_restaked_amount_usd()
-
     if connected?(socket), do: Phoenix.PubSub.subscribe(Explorer.PubSub, "update_views")
 
     {:ok,
      assign(socket,
-       verified_batches: verified_batches,
-       operators_registered: operators_registered,
+       stats: get_stats(),
        latest_batches: latest_batches,
-       verified_proofs: verified_proofs,
-       service_manager_address:
-         AlignedLayerServiceManager.get_aligned_layer_service_manager_address(),
-       restaked_amount_eth: restaked_amount_eth,
-       restaked_amount_usd: restaked_amount_usd,
        cost_per_proof_chart: get_cost_per_proof_chart_data(),
        page_title: "Welcome"
      )}
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 69654adc9..ab7bbf00a 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -5,39 +5,19 @@
     </h1>
   </div>
   <div class="mt-8 text-foreground px-2 flex flex-col justify-center gap-5">
-    <.card_link
-      icon="hero-arrow-right-solid"
-      navigate={~p"/operators"}
-      title="Registered Active Operators"
-    >
-      <%= if @operators_registered != :empty do %>
-        <%= @operators_registered %>
+    <.card_background class="flex lg:justify-between gap-10 px-20 py-8 flex-wrap">
+      <%= for %{title: title, value: value, tooltip_text: tooltip_text} <- @stats do %>
+        <div>
+          <p class="mb-2 text-md text-muted-foreground"><%= title %></p>
+          <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
+          <%= if tooltip_text do %>
+            <.tooltip>
+              <%= tooltip_text %>
+            </.tooltip>
+          <% end %>
+        </div>
       <% end %>
-    </.card_link>
-    <.card_link
-      icon="hero-arrow-right-solid"
-      navigate={~p"/restakes"}
-      title="Total Restaked"
-      subtitle={
-        if @restaked_amount_eth |> Helpers.format_number() != nil do
-          "(#{@restaked_amount_eth |> Helpers.format_number()} ETH)"
-        end
-      }
-    >
-      <%= if @restaked_amount_usd |> Helpers.format_number() != nil do %>
-        <%= @restaked_amount_usd |> Helpers.format_number() %> USD
-      <% end %>
-    </.card_link>
-    <.card title="verified batches">
-      <%= if @verified_batches != :empty do %>
-        <%= @verified_batches |> Helpers.format_number() %>
-      <% end %>
-    </.card>
-    <.card title="Verified Proofs" class="-mt-0.5 md:mt-0">
-      <%= if @verified_proofs != :empty do %>
-        <%= @verified_proofs |> Helpers.format_number() %>
-      <% end %>
-    </.card>
+    </.card_background>
     <.live_component module={ContractsComponent} id="contracts_card" class="" />
     <.card title="Cost per proof" class="w-full">
       <div style="height: 200px;" class="mt-4">

From b3901d05c7d4a865f66c35697994aa5036297164 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 18:21:48 -0300
Subject: [PATCH 07/36] feat: use new cards and various style fixes

---
 .../lib/explorer_web/components/charts.ex     |  3 +-
 .../lib/explorer_web/components/contracts.ex  | 57 +++++++++--------
 .../live/pages/home/index.html.heex           | 64 ++++++++++++++-----
 3 files changed, 80 insertions(+), 44 deletions(-)

diff --git a/explorer/lib/explorer_web/components/charts.ex b/explorer/lib/explorer_web/components/charts.ex
index dd533ebb8..257e285db 100644
--- a/explorer/lib/explorer_web/components/charts.ex
+++ b/explorer/lib/explorer_web/components/charts.ex
@@ -60,6 +60,7 @@ defmodule ExplorerWeb.ChartComponents do
       }
       chart_options={
         Jason.encode!(%{
+          responsive: true,
           maintainAspectRatio: false,
           interaction: %{
             mode: "index",
@@ -83,7 +84,6 @@ defmodule ExplorerWeb.ChartComponents do
               ticks: %{
                 display: @show_ticks.x,
                 autoSkip: false,
-                sampleSize: 1,
                 maxRotation: 0,
                 font: %{
                   weight: "700"
@@ -102,7 +102,6 @@ defmodule ExplorerWeb.ChartComponents do
               ticks: %{
                 display: @show_ticks.y,
                 autoSkip: false,
-                sampleSize: 1,
                 maxRotation: 0,
                 font: %{
                   weight: "700"
diff --git a/explorer/lib/explorer_web/components/contracts.ex b/explorer/lib/explorer_web/components/contracts.ex
index 6f353d69a..6e96f51aa 100644
--- a/explorer/lib/explorer_web/components/contracts.ex
+++ b/explorer/lib/explorer_web/components/contracts.ex
@@ -1,16 +1,16 @@
 defmodule ContractsComponent do
   use ExplorerWeb, :live_component
 
-  attr :class, :string, default: nil
+  attr(:class, :string, default: nil)
 
   @impl true
   def mount(socket) do
     {:ok,
      assign(socket,
        service_manager_address:
-          AlignedLayerServiceManager.get_aligned_layer_service_manager_address(),
+         AlignedLayerServiceManager.get_aligned_layer_service_manager_address(),
        batcher_payment_service_address:
-          BatcherPaymentServiceManager.get_batcher_payment_service_address(),
+         BatcherPaymentServiceManager.get_batcher_payment_service_address(),
        network: System.get_env("ENVIRONMENT")
      )}
   end
@@ -22,6 +22,7 @@ defmodule ContractsComponent do
       <.card
         inner_class="text-base leading-9 flex flex-wrap sm:flex-row overflow-x-auto gap-x-2"
         title="Contract Addresses"
+        subtitle="Main Aligned contracts addresses"
       >
         <.link
           href="https://docs.alignedlayer.com/guides/6_contract_addresses"
@@ -31,28 +32,34 @@ defmodule ContractsComponent do
         >
           View All <.icon name="hero-arrow-top-right-on-square-solid" class="size-3.5 mb-1" />
         </.link>
-        <h3>
-          <.icon name="hero-cpu-chip" class="size-4 mb-0.5" /> Service Manager:
-        </h3>
-        <.a
-          href={"#{Helpers.get_etherescan_url()}/address/#{@service_manager_address}"}
-          class="hover:text-foreground/80"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <%= @service_manager_address %>
-        </.a>
-        <h3>
-          <.icon name="hero-wallet" class="size-4 mb-0.5" /> Batcher Payment Service:
-        </h3>
-        <.a
-          href={"#{Helpers.get_etherescan_url()}/address/#{@batcher_payment_service_address}"}
-          class="hover:text-foreground/80"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <%= @batcher_payment_service_address %>
-        </.a>
+        <div class="flex flex-col w-full">
+          <div class="flex flex-wrap gap-x-3 w-full justify-between">
+            <h3>
+              <.icon name="hero-cpu-chip" class="size-4 mb-0.5" /> Service Manager:
+            </h3>
+            <.a
+              href={"#{Helpers.get_etherescan_url()}/address/#{@service_manager_address}"}
+              class="hover:text-foreground/80"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <%= @service_manager_address %>
+            </.a>
+          </div>
+          <div class="flex flex-wrap gap-x-3 w-full justify-between">
+            <h3>
+              <.icon name="hero-wallet" class="size-4 mb-0.5" /> Batcher Payment Service:
+            </h3>
+            <.a
+              href={"#{Helpers.get_etherescan_url()}/address/#{@batcher_payment_service_address}"}
+              class="hover:text-foreground/80"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <%= @batcher_payment_service_address %>
+            </.a>
+          </div>
+        </div>
       </.card>
     </div>
     """
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index ab7bbf00a..2f4cc9bc7 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -1,6 +1,6 @@
 <section class="mx-auto" style="max-width: 1200px;">
   <div class="flex justify-center items-center">
-    <h1 class="text-5xl w-fit font-normal p-2 px-4 selection:bg-accent-foreground/20 selection:text-accent-foreground/80 rounded-xl tracking-tighter bg-accent drop-shadow-lg text-black mt-3">
+    <h1 class="text-5xl w-fit text-center font-normal p-2 px-4 selection:bg-accent-foreground/20 selection:text-accent-foreground/80 rounded-xl tracking-tighter bg-accent drop-shadow-lg text-black mt-3">
       Aligned Layer Explorer
     </h1>
   </div>
@@ -18,27 +18,57 @@
         </div>
       <% end %>
     </.card_background>
-    <.live_component module={ContractsComponent} id="contracts_card" class="" />
-    <.card title="Cost per proof" class="w-full">
-      <div style="height: 200px;" class="mt-4">
-        <.line_chart
-          id="cost_per_proof_chart"
-          points={@cost_per_proof_chart.points}
-          extra_data={@cost_per_proof_chart.extra_data}
-        />
-      </div>
-    </.card>
-    <div class="relative truncate">
-      <h1 class="text-xl font-bold font-foreground text-left py-2">
-        Recent Batches
-      </h1>
+    <div class="flex flex-wrap md:flex-row flex-col gap-5">
+      <.card
+        title="Cost per proof"
+        subtitle="Cost of proving over time"
+        class="p-0 flex-1"
+        header_container_class="px-10 pt-8"
+      >
+        <div style="height: 200px;" class="px-4 pb-8">
+          <.line_chart
+            id="cost_per_proof_chart"
+            points={@cost_per_proof_chart.points}
+            extra_data={@cost_per_proof_chart.extra_data}
+          />
+        </div>
+      </.card>
+      <.card
+        title="Batch size"
+        subtitle="Number of proofs in last batches"
+        class="p-0 flex-1"
+        header_container_class="px-10 pt-8"
+      >
+        <div style="height: 200px;" class="px-4 pb-8">
+          <.line_chart
+            id="cost_per_proof_chart"
+            points={@cost_per_proof_chart.points}
+            extra_data={@cost_per_proof_chart.extra_data}
+          />
+        </div>
+      </.card>
     </div>
+
     <%= if @latest_batches != :empty and @latest_batches != [] do %>
-      <.card_background class="w-full overflow-x-auto">
+      <.card
+        title="Latest batches"
+        subtitle="The most recent verified batches on aligned"
+        class="overflow-x-auto"
+      >
         <.batches_table batches={@latest_batches} />
-      </.card_background>
+        <div class="flex justify-center my-5">
+          <.link
+            navigate={~p"/batches"}
+            class="absolute hover:underline font-medium text-muted-foreground capitalize text-sm"
+          >
+            View All <.icon name="hero-arrow-top-right-on-square-solid" class="size-3.5 mb-1" />
+          </.link>
+        </div>
+      </.card>
     <% else %>
       <.empty_card_background text="No Batches To Display." />
     <% end %>
+
+    <.live_component module={ContractsComponent} id="contracts_card" class="" />
   </div>
 </section>

From 599576f26560194ede449b5b3c5a0e4a0cfc78bb Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 18:40:26 -0300
Subject: [PATCH 08/36] fix: chart responsiveness and remove uneeded dark-mode
 listener

---
 explorer/assets/vendor/charts/index.js         | 3 ---
 explorer/assets/vendor/dark_mode.js            | 2 --
 explorer/lib/explorer_web/components/charts.ex | 2 +-
 explorer/lib/explorer_web/components/nav.ex    | 8 +++++++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/explorer/assets/vendor/charts/index.js b/explorer/assets/vendor/charts/index.js
index faa2155f7..da71d33d3 100644
--- a/explorer/assets/vendor/charts/index.js
+++ b/explorer/assets/vendor/charts/index.js
@@ -21,7 +21,6 @@ const applyOptionsByChartId = (id, options, data) => {
 export default {
 	mounted() {
 		this.initChart();
-		window.addEventListener("theme-changed", this.reinitChart.bind(this));
 	},
 
 	updated() {
@@ -32,8 +31,6 @@ export default {
 		if (this.chart) {
 			this.chart.destroy();
 		}
-
-		window.removeEventListener("theme-changed", this.reinitChart.bind(this));
 	},
 
 	initChart() {
diff --git a/explorer/assets/vendor/dark_mode.js b/explorer/assets/vendor/dark_mode.js
index 9485082de..7c0ebc19b 100644
--- a/explorer/assets/vendor/dark_mode.js
+++ b/explorer/assets/vendor/dark_mode.js
@@ -41,8 +41,6 @@ const setupThemeToggle = () => {
 		.getElementById("theme-toggle")
 		.addEventListener("click", function () {
 			toggleVisibility(!isDark());
-			// chart.js listens for this event to re-render the chart and update its colors
-			window.dispatchEvent(new Event("theme-changed"));
 		});
 };
 
diff --git a/explorer/lib/explorer_web/components/charts.ex b/explorer/lib/explorer_web/components/charts.ex
index 8e1f79530..0617f8c7a 100644
--- a/explorer/lib/explorer_web/components/charts.ex
+++ b/explorer/lib/explorer_web/components/charts.ex
@@ -59,7 +59,7 @@ defmodule ExplorerWeb.ChartComponents do
       }
       chart_options={
         Jason.encode!(%{
-          responsive: true,
+          responsive: false,
           maintainAspectRatio: false,
           interaction: %{
             mode: "index",
diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index 19e53fb22..c421a623c 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -44,7 +44,7 @@ defmodule NavComponent do
     }
     style="z-index: 1"
     >
-    <div class={classes(["gap-5 lg:gap-10 px-4 sm:px-6 lg:px-8 top-0 p-3 z-50",
+    <div class={classes(["gap-5  mx-4 top-0 p-3 z-50",
         "flex justify-between items-center w-full"])} style="max-width: 1200px;">
       <div class="gap-x-6 flex">
         <.link
@@ -104,6 +104,12 @@ defmodule NavComponent do
           GitHub
         </.link>
         <DarkMode.button theme={@theme} />
+        <.badge :if={@latest_release != nil} class="hidden md:inline">
+          <%= @latest_release %>
+          <.tooltip>
+            Latest Aligned version
+          </.tooltip>
+        </.badge>
         <.hover_dropdown_selector
           current_value={get_current_network(@host)}
           variant="accent"

From 205252c61093125eedbfd609da2acabef4112ef2 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 18:44:51 -0300
Subject: [PATCH 09/36] chore: remove animations

---
 explorer/lib/explorer_web/components/charts.ex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/explorer/lib/explorer_web/components/charts.ex b/explorer/lib/explorer_web/components/charts.ex
index 0617f8c7a..5d3d5a629 100644
--- a/explorer/lib/explorer_web/components/charts.ex
+++ b/explorer/lib/explorer_web/components/charts.ex
@@ -59,6 +59,7 @@ defmodule ExplorerWeb.ChartComponents do
       }
       chart_options={
         Jason.encode!(%{
+          animation: false,
           responsive: false,
           maintainAspectRatio: false,
           interaction: %{

From a20d95bb03265ce1d92c7e02cf287fc26696aa7e Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 18:59:47 -0300
Subject: [PATCH 10/36] fix: chart responsive when updating

---
 explorer/assets/vendor/charts/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/explorer/assets/vendor/charts/index.js b/explorer/assets/vendor/charts/index.js
index da71d33d3..904fea877 100644
--- a/explorer/assets/vendor/charts/index.js
+++ b/explorer/assets/vendor/charts/index.js
@@ -48,6 +48,8 @@ export default {
 			data,
 			options,
 		});
+
+		this.char.resize();
 	},
 
 	reinitChart() {

From 28f5f199db5eab3457c6533b732bc669ec218dd4 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Mon, 23 Dec 2024 19:08:54 -0300
Subject: [PATCH 11/36] fix: typo

---
 explorer/assets/vendor/charts/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/assets/vendor/charts/index.js b/explorer/assets/vendor/charts/index.js
index 904fea877..2a99f932b 100644
--- a/explorer/assets/vendor/charts/index.js
+++ b/explorer/assets/vendor/charts/index.js
@@ -49,7 +49,7 @@ export default {
 			options,
 		});
 
-		this.char.resize();
+		this.chart.resize();
 	},
 
 	reinitChart() {

From f72d3e7be2f1350daf0cc24f61e2cc6a136a6fce Mon Sep 17 00:00:00 2001
From: Uriel Mihura <43704209+uri-99@users.noreply.github.com>
Date: Mon, 23 Dec 2024 19:16:43 -0300
Subject: [PATCH 12/36] Update
 explorer/lib/explorer_web/live/pages/home/index.ex

---
 explorer/lib/explorer_web/live/pages/home/index.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index b074b4213..14039ad11 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -14,7 +14,7 @@ defmodule ExplorerWeb.Home.Index do
         _ -> 0
       end
 
-    avg_fee_per_proof_eth = EthConverter.wei_to_eth(avg_fee_per_proof, 4)
+    avg_fee_per_proof_eth = EthConverter.wei_to_eth(avg_fee_per_proof, 6)
 
     verified_proofs = Batches.get_amount_of_verified_proofs()
     operators_registered = Operators.get_amount_of_operators()

From bf0b38672f6e594a72e5efc36c31da2ac01a5ad9 Mon Sep 17 00:00:00 2001
From: Urix <43704209+uri-99@users.noreply.github.com>
Date: Mon, 23 Dec 2024 19:26:04 -0300
Subject: [PATCH 13/36] fix: details

---
 explorer/lib/explorer_web/components/batches_table.ex | 2 +-
 explorer/lib/explorer_web/live/pages/home/index.ex    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/lib/explorer_web/components/batches_table.ex b/explorer/lib/explorer_web/components/batches_table.ex
index bb34fbba9..f49e9d7e2 100644
--- a/explorer/lib/explorer_web/components/batches_table.ex
+++ b/explorer/lib/explorer_web/components/batches_table.ex
@@ -31,7 +31,7 @@ defmodule ExplorerWeb.BatchesTable do
       </:col>
 
       <:col :let={batch} label="Fee per proof">
-        <%= batch.fee_per_proof |> EthConverter.wei_to_eth(4) %> ETH
+        <%= batch.fee_per_proof |> EthConverter.wei_to_eth(6) %> ETH
       </:col>
 
       <:col :let={batch} label="Number of proofs">
diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 14039ad11..b074b4213 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -14,7 +14,7 @@ defmodule ExplorerWeb.Home.Index do
         _ -> 0
       end
 
-    avg_fee_per_proof_eth = EthConverter.wei_to_eth(avg_fee_per_proof, 6)
+    avg_fee_per_proof_eth = EthConverter.wei_to_eth(avg_fee_per_proof, 4)
 
     verified_proofs = Batches.get_amount_of_verified_proofs()
     operators_registered = Operators.get_amount_of_operators()

From 04fc5c36d0ba4bf02426a8012dd9777296c38b83 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 16:36:32 -0300
Subject: [PATCH 14/36] feat: change chart type to bar

---
 .../lib/explorer_web/components/charts.ex     | 112 +++++++++++++++++-
 .../live/pages/home/index.html.heex           |   4 +-
 2 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/explorer/lib/explorer_web/components/charts.ex b/explorer/lib/explorer_web/components/charts.ex
index 5d3d5a629..2640727a7 100644
--- a/explorer/lib/explorer_web/components/charts.ex
+++ b/explorer/lib/explorer_web/components/charts.ex
@@ -15,7 +15,7 @@ defmodule ExplorerWeb.ChartComponents do
         data-chart-type={@chart_type}
         data-chart-data={@chart_data}
         data-chart-options={@chart_options}
-        style="height: 100%; width: 100%;"
+        class="!w-full !h-full"
       >
       </canvas>
     </div>
@@ -23,9 +23,115 @@ defmodule ExplorerWeb.ChartComponents do
   end
 
   @doc """
-  Renders a line chart with aligned style.
+  Renders a bar chart with aligned style.
   ## Examples
-    <.line
+    <.bar_chart
+      id="exchanges"
+      points={%{x: [1, 2, 3, 4], y: ["01-01-2024", "01-02-2024", "01-03-2024", "01-04-2024"]},}
+      show_ticks={%{x: true, y: true}}
+      extra_data={%{merkle_roots: [0x1, 0x2, 0x3, 0x4]}}
+    />
+    !Note:
+    - id is used to reference the chart on javascript to apply custom styles, configurations, tooltip, that are possible only via javascript
+    - points: nil values are automatically ignored and not displayed
+    - extra_data: any other data you might want to retrieve via javascript later
+  """
+  attr(:id, :string, required: true)
+  attr(:points, :map, required: true)
+  attr(:extra_data, :map, default: %{})
+  attr(:show_ticks, :map, default: %{x: true, y: true})
+
+  def bar_chart(assigns) do
+    ~H"""
+    <.basic_chart
+      id={@id}
+      chart_type="bar"
+      chart_data={
+        Jason.encode!(%{
+          labels: @points,
+          datasets: [
+            Map.merge(
+              %{
+                data: @points,
+                fill: false,
+                tension: 0.1,
+                backgroundColor: "rgba(24, 255, 128, 0.3)",
+                hoverBackgroundColor: "rgba(24, 255, 128, 0.5)",
+                borderColor: "rgb(24, 255, 127)",
+                borderWidth: 1.5,
+                borderRadius: 4
+              },
+              @extra_data
+            )
+          ]
+        })
+      }
+      chart_options={
+        Jason.encode!(%{
+          animation: false,
+          responsive: false,
+          maintainAspectRatio: false,
+          interaction: %{
+            mode: "index",
+            intersect: false
+          },
+          plugins: %{
+            legend: %{
+              display: false
+            }
+          },
+          elements: %{
+            point: %{
+              pointStyle: false
+            }
+          },
+          scales: %{
+            x: %{
+              bounds: "data",
+              offset: false,
+              ticks: %{
+                display: @show_ticks.x,
+                autoSkip: false,
+                maxRotation: 0,
+                font: %{
+                  weight: "700"
+                }
+              },
+              grid: %{
+                display: false
+              },
+              border: %{
+                display: false
+              }
+            },
+            y: %{
+              offset: false,
+              ticks: %{
+                display: @show_ticks.y,
+                autoSkip: false,
+                maxRotation: 0,
+                font: %{
+                  weight: "700"
+                }
+              },
+              grid: %{
+                display: false
+              },
+              border: %{
+                display: false
+              }
+            }
+          }
+        })
+      }
+    />
+    """
+  end
+
+  @doc """
+  Renders a linear chart with aligned style.
+  ## Examples
+    <.line_chart
       id="exchanges"
       points={%{x: [1, 2, 3, 4], y: ["01-01-2024", "01-02-2024", "01-03-2024", "01-04-2024"]},}
       show_ticks={%{x: true, y: true}}
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index e5d49afcb..95100efe8 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -26,7 +26,7 @@
         header_container_class="px-10 pt-8"
       >
         <div style="height: 200px;" class="px-4 pb-8">
-          <.line_chart
+          <.bar_chart
             id="cost_per_proof_chart"
             points={@cost_per_proof_chart.points}
             extra_data={@cost_per_proof_chart.extra_data}
@@ -40,7 +40,7 @@
         header_container_class="px-10 pt-8"
       >
         <div style="height: 200px;" class="px-4 pb-8">
-          <.line_chart
+          <.bar_chart
             id="batch_size_chart"
             points={@batch_size_chart_data.points}
             extra_data={@batch_size_chart_data.extra_data}

From 93b3911840aa7eeac92a675e2e16dca226a4ea71 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 16:42:27 -0300
Subject: [PATCH 15/36] style: place tooltip in top of bar

---
 explorer/assets/css/tooltip.css          | 10 +++++-----
 explorer/assets/vendor/charts/tooltip.js | 12 +++++-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/explorer/assets/css/tooltip.css b/explorer/assets/css/tooltip.css
index 8ce7acdab..039017c72 100644
--- a/explorer/assets/css/tooltip.css
+++ b/explorer/assets/css/tooltip.css
@@ -8,16 +8,14 @@
 .chart-tooltip-dot {
 	height: 10px;
 	width: 10px;
-	top: -5px;
+	bottom: -5px;
 	border-radius: 100%;
-	background-color: hsl(var(--foreground));
-	opacity: 0.2;
+	background-color: hsl(var(--accent));
 	position: absolute;
 	transition: all 0.2s;
 }
 
 .chart-tooltip-dot:hover {
-	opacity: 0.5;
 	transform: scale(1.2);
 	cursor: pointer;
 }
@@ -26,7 +24,7 @@
 	min-height: 50px;
 	min-width: 250px;
 	padding: 20px;
-	margin-top: 8px;
+	margin-bottom: 8px;
 	background-color: hsl(var(--card));
 	border-radius: 8px;
 	border-width: 1px;
@@ -49,6 +47,7 @@
 .chart-tooltip-item {
 	display: flex;
 	justify-content: space-between;
+	gap: 5px;
 	width: 100%;
 }
 
@@ -59,3 +58,4 @@
 .chart-tooltip-item-value {
 	color: hsl(var(--foreground));
 }
+
diff --git a/explorer/assets/vendor/charts/tooltip.js b/explorer/assets/vendor/charts/tooltip.js
index 3ab1d723e..52486fa5e 100644
--- a/explorer/assets/vendor/charts/tooltip.js
+++ b/explorer/assets/vendor/charts/tooltip.js
@@ -91,12 +91,6 @@ export const alignedTooltip = (
 		tooltipEl.style.opacity = 0;
 		return;
 	}
-	tooltipEl.classList.remove("above", "below", "no-transform");
-	if (tooltipModel.yAlign) {
-		tooltipEl.classList.add(tooltipModel.yAlign);
-	} else {
-		tooltipEl.classList.add("no-transform");
-	}
 
 	const values = onTooltipUpdate(tooltipModel);
 	items.forEach((item) => {
@@ -115,5 +109,9 @@ export const alignedTooltip = (
 		tooltipModel.caretX +
 		"px";
 	tooltipEl.style.top =
-		position.top + window.scrollY + tooltipModel.caretY + "px";
+		position.top -
+		tooltipEl.offsetHeight +
+		window.scrollY +
+		tooltipModel.caretY +
+		"px";
 };

From 0a0f4fdef620e584cf8bb64dc9023d92911fd1d6 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 16:42:48 -0300
Subject: [PATCH 16/36] chore: elixir warnings

---
 explorer/lib/explorer_web/components/core_components.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/components/core_components.ex b/explorer/lib/explorer_web/components/core_components.ex
index 23061887b..e9b93e9c8 100644
--- a/explorer/lib/explorer_web/components/core_components.ex
+++ b/explorer/lib/explorer_web/components/core_components.ex
@@ -825,7 +825,7 @@ defmodule ExplorerWeb.CoreComponents do
     <table class="table-auto border-collapse w-full">
       <thead>
         <tr class="text-muted-foreground truncate">
-          <th :for={{col, i} <- Enum.with_index(@col)} class="text-left font-normal pb-5">
+          <th :for={{col, _i} <- Enum.with_index(@col)} class="text-left font-normal pb-5">
             <%= col[:label] %>
           </th>
           <th :if={@action != []} class="p-0 pb-4">

From dd9823ded1f059ae2a44ec9beabc850df863e0ac Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 16:55:34 -0300
Subject: [PATCH 17/36] feat: links in stats

---
 .../lib/explorer_web/live/pages/home/index.ex     | 15 ++++++++++-----
 .../explorer_web/live/pages/home/index.html.heex  | 13 +++++++++++--
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index b074b4213..9d773554e 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -27,27 +27,32 @@ defmodule ExplorerWeb.Home.Index do
       %{
         title: "Proofs verified",
         value: Helpers.convert_number_to_shorthand(verified_proofs),
-        tooltip_text: nil
+        tooltip_text: nil,
+        link: nil
       },
       %{
         title: "Total batches",
         value: Helpers.convert_number_to_shorthand(verified_batches),
-        tooltip_text: nil
+        tooltip_text: nil,
+        link: nil
       },
       %{
         title: "AVG proof cost",
         value: "#{avg_fee_per_proof_usd} USD",
-        tooltip_text: "~= #{avg_fee_per_proof_eth} ETH"
+        tooltip_text: "~= #{avg_fee_per_proof_eth} ETH",
+        link: nil
       },
       %{
         title: "Operators",
         value: operators_registered,
-        tooltip_text: "Current version #{operator_latest_release}"
+        tooltip_text: "Current version #{operator_latest_release}",
+        link: "/operators"
       },
       %{
         title: "Total restake",
         value: "#{restaked_amount_usd} USD",
-        tooltip_text: "~= #{restaked_amount_eth} ETH"
+        tooltip_text: "~= #{restaked_amount_eth} ETH",
+        link: "/restakes"
       }
     ]
   end
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 95100efe8..0d1c9be23 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -6,9 +6,18 @@
   </div>
   <div class="mt-8 text-foreground px-2 flex flex-col justify-center gap-5">
     <.card_background class="flex lg:justify-between gap-10 px-20 py-8 flex-wrap">
-      <%= for %{title: title, value: value, tooltip_text: tooltip_text} <- @stats do %>
+      <%= for %{title: title, value: value, tooltip_text: tooltip_text, link: link} <- @stats do %>
         <div>
-          <p class="mb-2 text-md text-muted-foreground"><%= title %></p>
+          <.link
+            class={[
+              "mb-2 text-md text-muted-foreground",
+              link != nil && "hover:underline",
+              link == nil && "cursor-default pointer-events-none"
+            ]}
+            navigate={link}
+          >
+            <%= title %>
+          </.link>
           <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
           <%= if tooltip_text do %>
             <.tooltip>

From f83d334a77adc5637dcc34079583c3d931966763 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:17:12 -0300
Subject: [PATCH 18/36] feat: show all contract addresses

---
 .../lib/explorer_web/components/contracts.ex  | 91 ++++++++++++-------
 explorer/lib/explorer_web/live/utils.ex       | 13 ++-
 2 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/explorer/lib/explorer_web/components/contracts.ex b/explorer/lib/explorer_web/components/contracts.ex
index 6e96f51aa..d5c753249 100644
--- a/explorer/lib/explorer_web/components/contracts.ex
+++ b/explorer/lib/explorer_web/components/contracts.ex
@@ -5,13 +5,40 @@ defmodule ContractsComponent do
 
   @impl true
   def mount(socket) do
+    addresses = Helpers.get_aligned_contracts_addresses()
+
     {:ok,
      assign(socket,
-       service_manager_address:
-         AlignedLayerServiceManager.get_aligned_layer_service_manager_address(),
-       batcher_payment_service_address:
-         BatcherPaymentServiceManager.get_batcher_payment_service_address(),
-       network: System.get_env("ENVIRONMENT")
+       contracts: [
+         %{
+           contract_name: "AlignedServiceManager",
+           address: addresses["alignedLayerServiceManager"]
+         },
+         %{
+           contract_name: "BatcherPaymentService",
+           address: addresses["batcherPaymentService"]
+         },
+         %{
+           contract_name: "BlsApkRegistry",
+           address: addresses["blsApkRegistry"]
+         },
+         %{
+           contract_name: "IndexRegistry",
+           address: addresses["indexRegistry"]
+         },
+         %{
+           contract_name: "OperatorStateRetriever",
+           address: addresses["operatorStateRetriever"]
+         },
+         %{
+           contract_name: "RegistryCoordinator",
+           address: addresses["registryCoordinator"]
+         },
+         %{
+           contract_name: "StakeRegistry",
+           address: addresses["stakeRegistry"]
+         }
+       ]
      )}
   end
 
@@ -22,7 +49,7 @@ defmodule ContractsComponent do
       <.card
         inner_class="text-base leading-9 flex flex-wrap sm:flex-row overflow-x-auto gap-x-2"
         title="Contract Addresses"
-        subtitle="Main Aligned contracts addresses"
+        subtitle="All Aligned contracts addresses"
       >
         <.link
           href="https://docs.alignedlayer.com/guides/6_contract_addresses"
@@ -30,38 +57,36 @@ defmodule ContractsComponent do
           target="_blank"
           rel="noopener noreferrer"
         >
-          View All <.icon name="hero-arrow-top-right-on-square-solid" class="size-3.5 mb-1" />
+          See more <.icon name="hero-arrow-top-right-on-square-solid" class="size-3.5 mb-1" />
         </.link>
         <div class="flex flex-col w-full">
-          <div class="flex flex-wrap gap-x-3 w-full justify-between">
-            <h3>
-              <.icon name="hero-cpu-chip" class="size-4 mb-0.5" /> Service Manager:
-            </h3>
-            <.a
-              href={"#{Helpers.get_etherescan_url()}/address/#{@service_manager_address}"}
-              class="hover:text-foreground/80"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <%= @service_manager_address %>
-            </.a>
-          </div>
-          <div class="flex flex-wrap gap-x-3 w-full justify-between">
-            <h3>
-              <.icon name="hero-wallet" class="size-4 mb-0.5" /> Batcher Payment Service:
-            </h3>
-            <.a
-              href={"#{Helpers.get_etherescan_url()}/address/#{@batcher_payment_service_address}"}
-              class="hover:text-foreground/80"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <%= @batcher_payment_service_address %>
-            </.a>
-          </div>
+          <%= for %{contract_name: contract_name, address: address} <- @contracts do %>
+            <.contract contract_name={contract_name} address={address} />
+          <% end %>
         </div>
       </.card>
     </div>
     """
   end
+
+  attr(:contract_name, :string)
+  attr(:address, :string)
+
+  def contract(assigns) do
+    ~H"""
+    <div class="flex flex-wrap gap-x-3 w-full justify-between">
+      <h3>
+        <%= @contract_name %>
+      </h3>
+      <.a
+        href={"#{Helpers.get_etherescan_url()}/address/#{@address}"}
+        class="hover:text-foreground/80"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <%= @address %>
+      </.a>
+    </div>
+    """
+  end
 end
diff --git a/explorer/lib/explorer_web/live/utils.ex b/explorer/lib/explorer_web/live/utils.ex
index 9d2a5b4d6..53c323597 100644
--- a/explorer/lib/explorer_web/live/utils.ex
+++ b/explorer/lib/explorer_web/live/utils.ex
@@ -136,12 +136,19 @@ defmodule ExplorerWeb.Helpers do
     end
   end
 
+  def get_aligned_contracts_addresses() do
+    aligned_config_file = System.get_env("ALIGNED_CONFIG_FILE")
+    {_, config_json_string} = File.read(aligned_config_file)
+    Jason.decode!(config_json_string) |> Map.get("addresses")
+  end
+
   def binary_to_hex_string(binary) do
     Utils.binary_to_hex_string(binary)
   end
 
   def is_stale?(batch) do
     ttl = Utils.batch_ttl_minutes()
+
     DateTime.add(batch.submission_timestamp, ttl, :minute)
     |> DateTime.before?(DateTime.utc_now())
   end
@@ -157,13 +164,13 @@ defmodule ExplorerWeb.Helpers do
 
   def enrich_batches(batches) do
     batches
-    |> Enum.map(
-      fn batch -> batch
+    |> Enum.map(fn batch ->
+      batch
       |> Map.merge(%{
         age: batch.submission_timestamp |> parse_timeago(),
         status: batch |> get_batch_status
       })
-      end)
+    end)
   end
 end
 

From 5eb30652903d2cc8418c21b9fdd837bf975f5f81 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:20:19 -0300
Subject: [PATCH 19/36] feat: show fee_per_proof in usd in batches table

---
 explorer/lib/explorer_web/components/batches_table.ex | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/components/batches_table.ex b/explorer/lib/explorer_web/components/batches_table.ex
index f49e9d7e2..3fc72b306 100644
--- a/explorer/lib/explorer_web/components/batches_table.ex
+++ b/explorer/lib/explorer_web/components/batches_table.ex
@@ -31,7 +31,15 @@ defmodule ExplorerWeb.BatchesTable do
       </:col>
 
       <:col :let={batch} label="Fee per proof">
-        <%= batch.fee_per_proof |> EthConverter.wei_to_eth(6) %> ETH
+        <%= case EthConverter.wei_to_usd(batch.fee_per_proof, 6) do %>
+          <% {:ok, usd} -> %>
+            <%= "#{usd} USD" %>
+          <% {:error, _} -> %>
+            <%= "N/A" %>
+        <% end %>
+        <.tooltip>
+          ~= <%= EthConverter.wei_to_eth(batch.fee_per_proof, 6) %> ETH
+        </.tooltip>
       </:col>
 
       <:col :let={batch} label="Number of proofs">

From cbcb4aa1d2b58b1f044b4bda0a59443c15a8c16a Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:31:10 -0300
Subject: [PATCH 20/36] chore: fetch as much as 15 batches in charts

---
 explorer/lib/explorer_web/live/pages/home/index.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 9d773554e..71750c0dc 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -58,7 +58,7 @@ defmodule ExplorerWeb.Home.Index do
   end
 
   def get_cost_per_proof_chart_data() do
-    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 100, order_by: :desc}))
+    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 15, order_by: :desc}))
 
     extra_data =
       %{
@@ -89,7 +89,7 @@ defmodule ExplorerWeb.Home.Index do
   end
 
   def get_batch_size_chart_data() do
-    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 100, order_by: :desc}))
+    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 15, order_by: :desc}))
 
     extra_data =
       %{

From 8a109ef6db609c8968a5831fbb6d42180674f4fd Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:33:45 -0300
Subject: [PATCH 21/36] fix: make the whole stat clickable if link is present

---
 .../live/pages/home/index.html.heex           | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 0d1c9be23..ff20b3633 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -9,21 +9,25 @@
       <%= for %{title: title, value: value, tooltip_text: tooltip_text, link: link} <- @stats do %>
         <div>
           <.link
+            navigate={link}
             class={[
-              "mb-2 text-md text-muted-foreground",
-              link != nil && "hover:underline",
+              "group",
               link == nil && "cursor-default pointer-events-none"
             ]}
-            navigate={link}
           >
-            <%= title %>
+            <p class={[
+              "mb-2 text-md text-muted-foreground",
+              link != nil && "group-hover:underline"
+            ]}>
+              <%= title %>
+            </p>
+            <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
+            <%= if tooltip_text do %>
+              <.tooltip>
+                <%= tooltip_text %>
+              </.tooltip>
+            <% end %>
           </.link>
-          <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
-          <%= if tooltip_text do %>
-            <.tooltip>
-              <%= tooltip_text %>
-            </.tooltip>
-          <% end %>
         </div>
       <% end %>
     </.card_background>

From 9c494afecbeb59871de45595aeea21702faca978 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:42:19 -0300
Subject: [PATCH 22/36] fix: tooltip names mixing

---
 explorer/assets/vendor/charts/batch_size.js     | 1 +
 explorer/assets/vendor/charts/cost_per_proof.js | 1 +
 explorer/assets/vendor/charts/tooltip.js        | 8 +++++---
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/explorer/assets/vendor/charts/batch_size.js b/explorer/assets/vendor/charts/batch_size.js
index 91027dbee..e3bcdc6e2 100644
--- a/explorer/assets/vendor/charts/batch_size.js
+++ b/explorer/assets/vendor/charts/batch_size.js
@@ -23,6 +23,7 @@ export const batchSizeCustomOptions = (options, data) => {
 
 	options.plugins.tooltip.external = (context) =>
 		alignedTooltip(context, {
+			name: "batch-size",
 			title: "Batch size",
 			items: [
 				{ title: "Cost", id: "cost" },
diff --git a/explorer/assets/vendor/charts/cost_per_proof.js b/explorer/assets/vendor/charts/cost_per_proof.js
index e38ab1039..014f5a791 100644
--- a/explorer/assets/vendor/charts/cost_per_proof.js
+++ b/explorer/assets/vendor/charts/cost_per_proof.js
@@ -23,6 +23,7 @@ export const costPerProofCustomOptions = (options, data) => {
 
 	options.plugins.tooltip.external = (context) =>
 		alignedTooltip(context, {
+			name: "cost-per-proof",
 			title: "Cost per proof",
 			items: [
 				{ title: "Cost", id: "cost" },
diff --git a/explorer/assets/vendor/charts/tooltip.js b/explorer/assets/vendor/charts/tooltip.js
index 52486fa5e..adfa22cf1 100644
--- a/explorer/assets/vendor/charts/tooltip.js
+++ b/explorer/assets/vendor/charts/tooltip.js
@@ -26,6 +26,7 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  *
  * @param {Object} context - The chart.js context, typically passed as `this` within chart hooks.
  * @param {Object} params - An object containing configuration for the tooltip.
+ * @param {Object} params.name - A string that serves as an identifier for the tooltip.
  * @param {string} params.title - The title text to display in the tooltip.
  * @param {Array} params.items - An array of items (with ids) to be displayed inside the tooltip.
  * @param {Array} params.onTooltipClick - A callback that receives `tooltipModel` and gets triggered when the tooltip is clicked.
@@ -36,6 +37,7 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  *
  * @example
  * alignedTooltip(context, {
+ *   name: "my-chart",
  *   title: "Tooltip Title",
  *   items: [{ title: "Cost", id: "cost_id" }, { title: "Timestamp", id: "timestamp_id" }],
  *   onTooltipClick: (tooltipModel) => {
@@ -58,15 +60,15 @@ const tooltipComponent = ({ title, isTooltipClickable, items }) => `
  */
 export const alignedTooltip = (
 	context,
-	{ title, items, onTooltipClick, onTooltipUpdate }
+	{ name, title, items, onTooltipClick, onTooltipUpdate }
 ) => {
 	const tooltipModel = context.tooltip;
-	let tooltipEl = document.getElementById("chartjs-tooltip");
+	let tooltipEl = document.getElementById(`chartjs-tooltip-${name}`);
 	if (!tooltipEl) {
 		tooltipEl = document.createElement("div");
 		tooltipEl.style = "transition: opacity 0.3s;";
 		tooltipEl.style = "transition: left 0.1s;";
-		tooltipEl.id = "chartjs-tooltip";
+		tooltipEl.id = `chartjs-tooltip-${name}`;
 		tooltipEl.innerHTML = tooltipComponent({
 			title,
 			isTooltipClickable: !!onTooltipClick,

From a30f4446cf84c5b6ceb84e8a48603a91824255b8 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:48:29 -0300
Subject: [PATCH 23/36] fix: batch size tooltip data

---
 explorer/assets/vendor/charts/batch_size.js        |  7 +++----
 explorer/assets/vendor/charts/cost_per_proof.js    |  2 +-
 explorer/lib/explorer_web/live/pages/home/index.ex | 11 ++++++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/explorer/assets/vendor/charts/batch_size.js b/explorer/assets/vendor/charts/batch_size.js
index e3bcdc6e2..ed477f2f9 100644
--- a/explorer/assets/vendor/charts/batch_size.js
+++ b/explorer/assets/vendor/charts/batch_size.js
@@ -26,7 +26,7 @@ export const batchSizeCustomOptions = (options, data) => {
 			name: "batch-size",
 			title: "Batch size",
 			items: [
-				{ title: "Cost", id: "cost" },
+				{ title: "Fee per proof", id: "cost" },
 				{ title: "Age", id: "age" },
 				{ title: "Merkle root", id: "merkle_root" },
 				{ title: "Block number", id: "block_number" },
@@ -41,8 +41,7 @@ export const batchSizeCustomOptions = (options, data) => {
 			onTooltipUpdate: (tooltipModel) => {
 				const dataset = tooltipModel.dataPoints[0].dataset;
 				const idx = tooltipModel.dataPoints[0].dataIndex;
-
-				const cost = `${dataset.data[idx].y} USD`;
+				const amount_of_proofs = dataset.data[idx].y;
 				const age = dataset.age[idx];
 				const merkleRootHash = dataset.merkle_root[idx];
 				const merkle_root = `${merkleRootHash.slice(
@@ -50,7 +49,7 @@ export const batchSizeCustomOptions = (options, data) => {
 					6
 				)}...${merkleRootHash.slice(merkleRootHash.length - 4)}`;
 				const block_number = dataset.data[idx].x;
-				const amount_of_proofs = dataset.amount_of_proofs[idx];
+				const cost = `${dataset.fee_per_proof[idx]} USD`;
 
 				return {
 					cost,
diff --git a/explorer/assets/vendor/charts/cost_per_proof.js b/explorer/assets/vendor/charts/cost_per_proof.js
index 014f5a791..be1c0c9b3 100644
--- a/explorer/assets/vendor/charts/cost_per_proof.js
+++ b/explorer/assets/vendor/charts/cost_per_proof.js
@@ -26,7 +26,7 @@ export const costPerProofCustomOptions = (options, data) => {
 			name: "cost-per-proof",
 			title: "Cost per proof",
 			items: [
-				{ title: "Cost", id: "cost" },
+				{ title: "Fee per proof", id: "cost" },
 				{ title: "Age", id: "age" },
 				{ title: "Merkle root", id: "merkle_root" },
 				{ title: "Block number", id: "block_number" },
diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 71750c0dc..11b6d217c 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -94,7 +94,16 @@ defmodule ExplorerWeb.Home.Index do
     extra_data =
       %{
         merkle_root: Enum.map(batches, fn b -> b.merkle_root end),
-        amount_of_proofs: Enum.map(batches, fn b -> b.amount_of_proofs end),
+        fee_per_proof:
+          Enum.map(batches, fn b ->
+            case EthConverter.wei_to_usd(b.fee_per_proof, 2) do
+              {:ok, value} ->
+                value
+
+              {:error, _} ->
+                nil
+            end
+          end),
         age: Enum.map(batches, fn b -> Helpers.parse_timeago(b.submission_timestamp) end)
       }
 

From e223a6998f04772c9bc53694f2a55f87796b27ed Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Tue, 24 Dec 2024 17:52:29 -0300
Subject: [PATCH 24/36] fix: get_latest_batches impair between mount and update

---
 explorer/lib/explorer_web/live/pages/home/index.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 11b6d217c..9ec6763c3 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -132,7 +132,7 @@ defmodule ExplorerWeb.Home.Index do
 
   @impl true
   def handle_info(_, socket) do
-    latest_batches = Batches.get_latest_batches(%{amount: 5, order_by: :desc})
+    latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
 
     {:noreply,
      assign(

From de24d558fcd344c0d86da9ff23fcc534e82ce2b4 Mon Sep 17 00:00:00 2001
From: nicolau <marcosnicolau2003@gmail.com>
Date: Thu, 26 Dec 2024 14:04:13 -0300
Subject: [PATCH 25/36] refactor: rename /restakes routes for /restaked

---
 explorer/lib/explorer_web/components/assets_cta.ex     | 2 +-
 explorer/lib/explorer_web/components/footer.ex         | 2 +-
 explorer/lib/explorer_web/components/nav.ex            | 8 ++++----
 explorer/lib/explorer_web/live/pages/home/index.ex     | 4 ++--
 explorer/lib/explorer_web/live/pages/restakes/index.ex | 2 +-
 explorer/lib/explorer_web/router.ex                    | 4 ++--
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/explorer/lib/explorer_web/components/assets_cta.ex b/explorer/lib/explorer_web/components/assets_cta.ex
index 184885649..35cc452c6 100644
--- a/explorer/lib/explorer_web/components/assets_cta.ex
+++ b/explorer/lib/explorer_web/components/assets_cta.ex
@@ -25,7 +25,7 @@ defmodule AssetsCTAComponent do
             View all active operators
           </.tooltip>
         </.link>
-        <.link navigate={~p"/restakes"} class="flex-1 flex flex-col justify-start gap-0.5 group">
+        <.link navigate={~p"/restaked"} class="flex-1 flex flex-col justify-start gap-0.5 group">
           <div class="text-muted-foreground font-semibold flex gap-2 items-center">
             <h2>
               Total Restaked
diff --git a/explorer/lib/explorer_web/components/footer.ex b/explorer/lib/explorer_web/components/footer.ex
index eacc25a0c..072dd5625 100644
--- a/explorer/lib/explorer_web/components/footer.ex
+++ b/explorer/lib/explorer_web/components/footer.ex
@@ -10,7 +10,7 @@ defmodule FooterComponent do
           [
             {"Batches", "/batches"},
             {"Operators", "/operators"},
-            {"Restake", "/restakes"}
+            {"Restake", "/restaked"}
           ]},
          {"Social",
           [
diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index c421a623c..bce134b8e 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -83,9 +83,9 @@ defmodule NavComponent do
                 ExplorerWeb.Restake.Index
               ])
             }
-            navigate={~p"/restakes"}
+            navigate={~p"/restaked"}
           >
-            Restakes
+            Restaked
           </.link>
         </div>
       </div>
@@ -166,9 +166,9 @@ defmodule NavComponent do
                   ExplorerWeb.Restake.Index
                 ])
               }
-              navigate={~p"/restakes"}
+              navigate={~p"/restaked"}
             >
-              Restakes
+              Restaked
             </.link>
             <.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
               Docs
diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 9ec6763c3..e888903c6 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -49,10 +49,10 @@ defmodule ExplorerWeb.Home.Index do
         link: "/operators"
       },
       %{
-        title: "Total restake",
+        title: "Total restaked",
         value: "#{restaked_amount_usd} USD",
         tooltip_text: "~= #{restaked_amount_eth} ETH",
-        link: "/restakes"
+        link: "/restaked"
       }
     ]
   end
diff --git a/explorer/lib/explorer_web/live/pages/restakes/index.ex b/explorer/lib/explorer_web/live/pages/restakes/index.ex
index 40554b6d5..3bda8ad50 100644
--- a/explorer/lib/explorer_web/live/pages/restakes/index.ex
+++ b/explorer/lib/explorer_web/live/pages/restakes/index.ex
@@ -69,7 +69,7 @@ defmodule ExplorerWeb.Restakes.Index do
           <.table id="assets" rows={@assets}>
             <:col :let={asset} label="Token" class="text-left">
               <.link
-                navigate={~p"/restakes/#{asset.strategy_address}"}
+                navigate={~p"/restaked/#{asset.strategy_address}"}
                 class="flex gap-x-2 items-center group-hover:text-foreground/80"
               >
                 <img
diff --git a/explorer/lib/explorer_web/router.ex b/explorer/lib/explorer_web/router.ex
index d6be9c0a5..e85cb7491 100644
--- a/explorer/lib/explorer_web/router.ex
+++ b/explorer/lib/explorer_web/router.ex
@@ -41,8 +41,8 @@ defmodule ExplorerWeb.Router do
       live "/", Home.Index
       live "/batches/:merkle_root", Batch.Index
       live "/batches", Batches.Index
-      live "/restakes", Restakes.Index
-      live "/restakes/:address", Restake.Index
+      live "/restaked", Restakes.Index
+      live "/restaked/:address", Restake.Index
       live "/operators", Operators.Index
       live "/operators/:address", Operator.Index
       live "/search", Search.Index

From 043b8289b215e73290c2224a17759c71422c7da7 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 11:52:55 -0300
Subject: [PATCH 26/36] feat: yAxis show 0, min and max values

---
 explorer/assets/vendor/charts/batch_size.js   | 13 ++++-----
 .../assets/vendor/charts/cost_per_proof.js    | 15 ++++------
 explorer/assets/vendor/charts/helpers.js      | 29 +++++++++++++++++++
 .../lib/explorer_web/components/charts.ex     |  1 +
 4 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 explorer/assets/vendor/charts/helpers.js

diff --git a/explorer/assets/vendor/charts/batch_size.js b/explorer/assets/vendor/charts/batch_size.js
index ed477f2f9..9abbe0b5a 100644
--- a/explorer/assets/vendor/charts/batch_size.js
+++ b/explorer/assets/vendor/charts/batch_size.js
@@ -1,15 +1,12 @@
+import { yTickCallbackShowMinAndMaxValues } from "./helpers";
 import { alignedTooltip } from "./tooltip";
 
 export const batchSizeCustomOptions = (options, data) => {
 	// show only min and max values
-	options.scales.y.ticks.callback = (_value, index, values) => {
-		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
-		if (index === 0) return `${Math.min(...dataY)} proofs`;
-		if (index === values.length - 1) {
-			return `${Math.max(...dataY)} proofs`;
-		}
-		return "";
-	};
+	options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(
+		data,
+		(val) => `${val} proofs`
+	);
 
 	// show age min, mean and max age in x axis
 	options.scales.x.ticks.callback = (_value, index, values) => {
diff --git a/explorer/assets/vendor/charts/cost_per_proof.js b/explorer/assets/vendor/charts/cost_per_proof.js
index be1c0c9b3..e60438b13 100644
--- a/explorer/assets/vendor/charts/cost_per_proof.js
+++ b/explorer/assets/vendor/charts/cost_per_proof.js
@@ -1,15 +1,12 @@
+import { yTickCallbackShowMinAndMaxValues } from "./helpers";
 import { alignedTooltip } from "./tooltip";
 
 export const costPerProofCustomOptions = (options, data) => {
-	// show only min and max values
-	options.scales.y.ticks.callback = (_value, index, values) => {
-		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
-		if (index === 0) return `${Math.min(...dataY)} USD`;
-		if (index === values.length - 1) {
-			return `${Math.max(...dataY)} USD`;
-		}
-		return "";
-	};
+	// show only 0, min and max values
+	options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(
+		data,
+		(val) => `${val} USD`
+	);
 
 	// show age min, mean and max age in x axis
 	options.scales.x.ticks.callback = (_value, index, values) => {
diff --git a/explorer/assets/vendor/charts/helpers.js b/explorer/assets/vendor/charts/helpers.js
new file mode 100644
index 000000000..38da23ed8
--- /dev/null
+++ b/explorer/assets/vendor/charts/helpers.js
@@ -0,0 +1,29 @@
+export const findClosestIndex = (target, values) => {
+	let closestIndex = 0;
+	let smallestDiff = Math.abs(values[0] - target);
+	for (let i = 1; i < values.length; i++) {
+		const diff = Math.abs(values[i] - target);
+		if (diff < smallestDiff) {
+			closestIndex = i;
+			smallestDiff = diff;
+		}
+	}
+	return closestIndex;
+};
+
+export const yTickCallbackShowMinAndMaxValues =
+	(data, renderText) => (_value, index, values) => {
+		if (index === 0) return `0 USD`;
+
+		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
+		const sortedData = dataY.sort((a, b) => b - a);
+		const min = sortedData[0];
+		const max = sortedData[sortedData.length - 1];
+		const valsData = values.map((item) => item.value);
+		const idxClosestToMin = findClosestIndex(min, valsData);
+		const idxClosestToMax = findClosestIndex(max, valsData);
+
+		if (index == idxClosestToMin) return renderText(min);
+		if (index == idxClosestToMax) return renderText(max);
+		return "";
+	};
diff --git a/explorer/lib/explorer_web/components/charts.ex b/explorer/lib/explorer_web/components/charts.ex
index 2640727a7..a5c1f5aa7 100644
--- a/explorer/lib/explorer_web/components/charts.ex
+++ b/explorer/lib/explorer_web/components/charts.ex
@@ -106,6 +106,7 @@ defmodule ExplorerWeb.ChartComponents do
             },
             y: %{
               offset: false,
+              beginAtZero: true,
               ticks: %{
                 display: @show_ticks.y,
                 autoSkip: false,

From a2974747ca6d1b100aa5f2a95f959fcacc662225 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 12:25:18 -0300
Subject: [PATCH 27/36] fix: footer logo size

---
 explorer/lib/explorer_web/components/footer.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/explorer/lib/explorer_web/components/footer.ex b/explorer/lib/explorer_web/components/footer.ex
index 072dd5625..44cfac3d9 100644
--- a/explorer/lib/explorer_web/components/footer.ex
+++ b/explorer/lib/explorer_web/components/footer.ex
@@ -46,10 +46,10 @@ defmodule FooterComponent do
       >
         <div class="hidden sm:inline-block flex-1">
           <.link
-            class="text-md font-bold hover:scale-105 transform duration-150 active:scale-95"
+            class="text-xl font-medium hover:scale-105 transform duration-150 active:scale-95"
             navigate={~p"/"}
           >
-            🟩 <span class="text-foreground">Aligned Layer</span>
+            🟩 <span class="text-lg text-foreground ml-2">Aligned Layer</span>
           </.link>
         </div>
 

From 40c3c1775f840f56c62057d4cf8bbe1e256f1efa Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 12:41:51 -0300
Subject: [PATCH 28/36] fix: chart responsiveness when resizing

---
 explorer/assets/vendor/charts/index.js   | 10 +++++++++-
 explorer/assets/vendor/charts/tooltip.js |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/explorer/assets/vendor/charts/index.js b/explorer/assets/vendor/charts/index.js
index 2a99f932b..911230632 100644
--- a/explorer/assets/vendor/charts/index.js
+++ b/explorer/assets/vendor/charts/index.js
@@ -21,6 +21,7 @@ const applyOptionsByChartId = (id, options, data) => {
 export default {
 	mounted() {
 		this.initChart();
+		window.addEventListener("resize", this.resizeChart.bind(this));
 	},
 
 	updated() {
@@ -30,6 +31,7 @@ export default {
 	destroyed() {
 		if (this.chart) {
 			this.chart.destroy();
+			window.removeEventListener("resize", this.resizeChart.bind(this));
 		}
 	},
 
@@ -49,7 +51,7 @@ export default {
 			options,
 		});
 
-		this.chart.resize();
+		this.resizeChart();
 	},
 
 	reinitChart() {
@@ -58,4 +60,10 @@ export default {
 		}
 		this.initChart();
 	},
+
+	resizeChart() {
+		if (this.chart) {
+			this.chart.resize();
+		}
+	},
 };
diff --git a/explorer/assets/vendor/charts/tooltip.js b/explorer/assets/vendor/charts/tooltip.js
index adfa22cf1..57309fe99 100644
--- a/explorer/assets/vendor/charts/tooltip.js
+++ b/explorer/assets/vendor/charts/tooltip.js
@@ -83,6 +83,10 @@ export const alignedTooltip = (
 			tooltipEl.style.opacity = 0;
 			tooltipEl.style.zIndex = -1;
 		};
+		// this is needed to maintain responsiveness
+		window.addEventListener("resize", () => {
+			tooltipEl.remove();
+		});
 		if (onTooltipClick)
 			tooltipEl.querySelector(".chart-tooltip-dot").onclick = () =>
 				onTooltipClick(tooltipModel);

From fd15e8f5851a0792c49518e66cf32e70fbed5c24 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 12:42:13 -0300
Subject: [PATCH 29/36] docs: chart function yTickCallbackShowMinAndMaxValues

---
 explorer/assets/vendor/charts/helpers.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/explorer/assets/vendor/charts/helpers.js b/explorer/assets/vendor/charts/helpers.js
index 38da23ed8..ee73d0d2d 100644
--- a/explorer/assets/vendor/charts/helpers.js
+++ b/explorer/assets/vendor/charts/helpers.js
@@ -1,4 +1,4 @@
-export const findClosestIndex = (target, values) => {
+const findClosestIndex = (target, values) => {
 	let closestIndex = 0;
 	let smallestDiff = Math.abs(values[0] - target);
 	for (let i = 1; i < values.length; i++) {
@@ -11,9 +11,23 @@ export const findClosestIndex = (target, values) => {
 	return closestIndex;
 };
 
+/**
+ * A callback function to customize y-axis tick labels by showing only the zero, minimum and maximum data values.
+ *
+ * @param {Object} data - The chart data object containing datasets and their values.
+ * @param {Function} renderText - A function to format and render text for the tick labels.
+ * @returns {Function} - A callback function for Chart.js tick customization.
+ *
+ * The returned function compares the current tick index with the indices of the values closest
+ * to the minimum and maximum data points, and displays these values formatted using the
+ * `renderText` function.
+ *
+ * @example
+ * options.scales.y.ticks.callback = yTickCallbackShowMinAndMaxValues(data, (val) => `${val} USD`);
+ */
 export const yTickCallbackShowMinAndMaxValues =
 	(data, renderText) => (_value, index, values) => {
-		if (index === 0) return `0 USD`;
+		if (index === 0) return renderText(0);
 
 		const dataY = data.datasets[0].data.map((point) => parseFloat(point.y));
 		const sortedData = dataY.sort((a, b) => b - a);

From a9a0427b2fae523367f676341b105c67c24491c4 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 12:58:26 -0300
Subject: [PATCH 30/36] fix: avg_cost_per_proof tooltip

---
 .../lib/explorer_web/live/pages/home/index.html.heex   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index ff20b3633..6d315bfd9 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -22,12 +22,12 @@
               <%= title %>
             </p>
             <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
-            <%= if tooltip_text do %>
-              <.tooltip>
-                <%= tooltip_text %>
-              </.tooltip>
-            <% end %>
           </.link>
+          <%= if tooltip_text do %>
+            <.tooltip>
+              <%= tooltip_text %>
+            </.tooltip>
+          <% end %>
         </div>
       <% end %>
     </.card_background>

From 7b3e97a4a6a589342325f528b5d6dd3fa3e0660b Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 13:05:10 -0300
Subject: [PATCH 31/36] feat: network message on contracts component

---
 .../lib/explorer_web/components/contracts.ex  |  3 +-
 explorer/lib/explorer_web/components/nav.ex   | 35 +++++++------------
 .../live/pages/home/index.html.heex           |  2 +-
 explorer/lib/explorer_web/live/utils.ex       |  9 +++++
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/explorer/lib/explorer_web/components/contracts.ex b/explorer/lib/explorer_web/components/contracts.ex
index d5c753249..48652bf21 100644
--- a/explorer/lib/explorer_web/components/contracts.ex
+++ b/explorer/lib/explorer_web/components/contracts.ex
@@ -2,6 +2,7 @@ defmodule ContractsComponent do
   use ExplorerWeb, :live_component
 
   attr(:class, :string, default: nil)
+  attr(:host, :string, default: nil)
 
   @impl true
   def mount(socket) do
@@ -49,7 +50,7 @@ defmodule ContractsComponent do
       <.card
         inner_class="text-base leading-9 flex flex-wrap sm:flex-row overflow-x-auto gap-x-2"
         title="Contract Addresses"
-        subtitle="All Aligned contracts addresses"
+        subtitle={"All Aligned contracts addresses on #{Helpers.get_current_network_from_host(@host)}"}
       >
         <.link
           href="https://docs.alignedlayer.com/guides/6_contract_addresses"
diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index bce134b8e..ff29adb71 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -1,28 +1,19 @@
 defmodule NavComponent do
   use ExplorerWeb, :live_component
 
-  def get_current_network(host) do
-    case host do
-      "explorer.alignedlayer.com" -> "Mainnet"
-      "holesky.explorer.alignedlayer.com" -> "Holesky"
-      "stage.explorer.alignedlayer.com" -> "Stage"
-      _ -> "Devnet"
-    end
-  end
-
   def get_networks(current_network) do
     Helpers.get_aligned_networks()
-      |> Enum.filter(fn {name, _link} ->
-        case current_network do
-          # Filter dev networks if we are in mainnet or holesky
-          "Mainnet" -> name in ["Mainnet", "Holesky"]
-          "Holesky" -> name in ["Mainnet", "Holesky"]
-          _ -> true
-        end
-      end)
-      |> Enum.map(fn {name, link} ->
-        {name, "window.location.href='#{link}'"}
-      end)
+    |> Enum.filter(fn {name, _link} ->
+      case current_network do
+        # Filter dev networks if we are in mainnet or holesky
+        "Mainnet" -> name in ["Mainnet", "Holesky"]
+        "Holesky" -> name in ["Mainnet", "Holesky"]
+        _ -> true
+      end
+    end)
+    |> Enum.map(fn {name, link} ->
+      {name, "window.location.href='#{link}'"}
+    end)
   end
 
   @impl true
@@ -111,9 +102,9 @@ defmodule NavComponent do
           </.tooltip>
         </.badge>
         <.hover_dropdown_selector
-          current_value={get_current_network(@host)}
+          current_value={Helpers.get_current_network_from_host(@host)}
           variant="accent"
-          options={get_networks(get_current_network(@host))}
+          options={get_networks(Helpers.get_current_network_from_host(@host))}
           icon="hero-cube-transparent-micro"
         />
         <button
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 6d315bfd9..978621cb9 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -82,6 +82,6 @@
       <.empty_card_background text="No Batches To Display." />
     <% end %>
 
-    <.live_component module={ContractsComponent} id="contracts_card" class="" />
+    <.live_component module={ContractsComponent} id="contracts_card" class="" host={@host} />
   </div>
 </section>
diff --git a/explorer/lib/explorer_web/live/utils.ex b/explorer/lib/explorer_web/live/utils.ex
index 53c323597..25f2185a4 100644
--- a/explorer/lib/explorer_web/live/utils.ex
+++ b/explorer/lib/explorer_web/live/utils.ex
@@ -119,6 +119,15 @@ defmodule ExplorerWeb.Helpers do
       {"Devnet", "http://localhost:4000/"}
     ]
   end
+  
+  def get_current_network_from_host(host) do
+    case host do
+      "explorer.alignedlayer.com" -> "Mainnet"
+      "holesky.explorer.alignedlayer.com" -> "Holesky"
+      "stage.explorer.alignedlayer.com" -> "Stage"
+      _ -> "Devnet"
+    end
+  end
 
   @doc """
   Get the Etherscan URL based on the environment.

From 9e27416e4bc33c8846f3a98b039cdbe6f263b312 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 13:15:40 -0300
Subject: [PATCH 32/36] fix: searchbar text

---
 explorer/lib/explorer_web/components/search.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/components/search.ex b/explorer/lib/explorer_web/components/search.ex
index 33a062c34..0beff01fe 100644
--- a/explorer/lib/explorer_web/components/search.ex
+++ b/explorer/lib/explorer_web/components/search.ex
@@ -42,7 +42,7 @@ defmodule SearchComponent do
         id={"input_#{assigns.id}"}
         class="pr-10 w-full rounded-lg border-foreground/20 bg-card focus:border-foreground/20 focus:ring-accent text-sm"
         type="search"
-        placeholder="Search by batch hash, proof hash, address"
+        placeholder="Search batch by batch hash or proof hash"
         name="batch[merkle_root]"
       />
       <.icon name="hero-magnifying-glass-solid" class="absolute right-3 text-foreground/20 size-5 hover:text-foreground" />

From 22f42fff4b58641d42904b6e714e838940baa08b Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 15:14:51 -0300
Subject: [PATCH 33/36] fix: stats font size + total restaked in shorthand form

---
 explorer/lib/explorer_web/live/pages/home/index.ex | 14 +++++++++++++-
 .../explorer_web/live/pages/home/index.html.heex   |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index e888903c6..db5ce7c5a 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -20,7 +20,19 @@ defmodule ExplorerWeb.Home.Index do
     operators_registered = Operators.get_amount_of_operators()
 
     restaked_amount_eth = Restakings.get_restaked_amount_eth()
-    restaked_amount_usd = Restakings.get_restaked_amount_usd()
+
+    restaked_amount_usd =
+      case Restakings.get_restaked_amount_usd() do
+        nil ->
+          "0"
+
+        amount ->
+          amount
+          |> Decimal.new()
+          |> Decimal.to_integer()
+          |> Helpers.convert_number_to_shorthand()
+      end
+
     operator_latest_release = ReleasesHelper.get_latest_release()
 
     [
diff --git a/explorer/lib/explorer_web/live/pages/home/index.html.heex b/explorer/lib/explorer_web/live/pages/home/index.html.heex
index 978621cb9..18bb7687b 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.html.heex
+++ b/explorer/lib/explorer_web/live/pages/home/index.html.heex
@@ -21,7 +21,7 @@
             ]}>
               <%= title %>
             </p>
-            <h3 class="text-2xl text-foreground font-bold"><%= value %></h3>
+            <h3 class="text-2xl text-foreground font-bold" style="font-size: 1.6rem"><%= value %></h3>
           </.link>
           <%= if tooltip_text do %>
             <.tooltip>

From 76caaa3ce0d68530af9421668737456a22561981 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 15:31:49 -0300
Subject: [PATCH 34/36] fix: convert_number_to_shorthand

---
 explorer/lib/explorer_web/live/utils.ex | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/explorer/lib/explorer_web/live/utils.ex b/explorer/lib/explorer_web/live/utils.ex
index 25f2185a4..ab1d997a3 100644
--- a/explorer/lib/explorer_web/live/utils.ex
+++ b/explorer/lib/explorer_web/live/utils.ex
@@ -8,15 +8,13 @@ defmodule ExplorerWeb.Helpers do
   end
 
   def convert_number_to_shorthand(number) when number >= 1_000_000 do
-    "#{div(number, 1_000_000)}M"
-  end
-
-  def convert_number_to_shorthand(number) when number >= 10_000 do
-    "#{div(number, 10_000)}k"
+    formatted_number = Float.round(number / 1_000_000, 2)
+    "#{formatted_number}M"
   end
 
   def convert_number_to_shorthand(number) when number >= 1_000 do
-    "#{div(number, 1_000)}k"
+    formatted_number = Float.round(number / 1_000, 2)
+    "#{formatted_number}k"
   end
 
   def convert_number_to_shorthand(number) when number >= 0 do
@@ -119,7 +117,7 @@ defmodule ExplorerWeb.Helpers do
       {"Devnet", "http://localhost:4000/"}
     ]
   end
-  
+
   def get_current_network_from_host(host) do
     case host do
       "explorer.alignedlayer.com" -> "Mainnet"

From 4f6d2f46b9b7d30498e7a8b6027a39e2e17d9309 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 15:41:07 -0300
Subject: [PATCH 35/36] fix: increase charts amount of data

---
 .../lib/explorer_web/live/pages/home/index.ex | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index db5ce7c5a..1800ac0de 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -69,8 +69,9 @@ defmodule ExplorerWeb.Home.Index do
     ]
   end
 
-  def get_cost_per_proof_chart_data() do
-    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 15, order_by: :desc}))
+  def get_cost_per_proof_chart_data(amount) do
+    batches =
+      Enum.reverse(Batches.get_latest_batches(%{amount: amount, order_by: :desc}))
 
     extra_data =
       %{
@@ -100,8 +101,9 @@ defmodule ExplorerWeb.Home.Index do
     }
   end
 
-  def get_batch_size_chart_data() do
-    batches = Enum.reverse(Batches.get_latest_batches(%{amount: 15, order_by: :desc}))
+  def get_batch_size_chart_data(amount) do
+    batches =
+      Enum.reverse(Batches.get_latest_batches(%{amount: amount, order_by: :desc}))
 
     extra_data =
       %{
@@ -145,20 +147,22 @@ defmodule ExplorerWeb.Home.Index do
   @impl true
   def handle_info(_, socket) do
     latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
+    charts_query_limit = 20
 
     {:noreply,
      assign(
        socket,
        stats: get_stats(),
        latest_batches: latest_batches,
-       cost_per_proof_chart: get_cost_per_proof_chart_data(),
-       batch_size_chart_data: get_batch_size_chart_data()
+       cost_per_proof_chart: get_cost_per_proof_chart_data(charts_query_limit),
+       batch_size_chart_data: get_batch_size_chart_data(charts_query_limit)
      )}
   end
 
   @impl true
   def mount(_, _, socket) do
     latest_batches = Batches.get_latest_batches(%{amount: 10, order_by: :desc})
+    charts_query_limit = 20
 
     if connected?(socket), do: Phoenix.PubSub.subscribe(Explorer.PubSub, "update_views")
 
@@ -166,8 +170,8 @@ defmodule ExplorerWeb.Home.Index do
      assign(socket,
        stats: get_stats(),
        latest_batches: latest_batches,
-       cost_per_proof_chart: get_cost_per_proof_chart_data(),
-       batch_size_chart_data: get_batch_size_chart_data(),
+       cost_per_proof_chart: get_cost_per_proof_chart_data(charts_query_limit),
+       batch_size_chart_data: get_batch_size_chart_data(charts_query_limit),
        page_title: "Welcome"
      )}
   rescue

From fe5eb9c58d1da5995c35d6e302906754130f4e26 Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Mon, 30 Dec 2024 16:58:38 -0300
Subject: [PATCH 36/36] feat: stats show full number on hover

---
 .../lib/explorer_web/live/pages/home/index.ex | 21 ++++++++++++-------
 explorer/lib/explorer_web/live/utils.ex       | 13 +++++++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/explorer/lib/explorer_web/live/pages/home/index.ex b/explorer/lib/explorer_web/live/pages/home/index.ex
index 1800ac0de..b134998dc 100644
--- a/explorer/lib/explorer_web/live/pages/home/index.ex
+++ b/explorer/lib/explorer_web/live/pages/home/index.ex
@@ -28,24 +28,27 @@ defmodule ExplorerWeb.Home.Index do
 
         amount ->
           amount
-          |> Decimal.new()
-          |> Decimal.to_integer()
-          |> Helpers.convert_number_to_shorthand()
       end
 
+    restaked_amount_usd_shorthand =
+      restaked_amount_usd
+      |> Decimal.new()
+      |> Decimal.to_integer()
+      |> Helpers.convert_number_to_shorthand()
+
     operator_latest_release = ReleasesHelper.get_latest_release()
 
     [
       %{
         title: "Proofs verified",
         value: Helpers.convert_number_to_shorthand(verified_proofs),
-        tooltip_text: nil,
+        tooltip_text: "= #{Helpers.format_number(verified_proofs)} proofs",
         link: nil
       },
       %{
         title: "Total batches",
         value: Helpers.convert_number_to_shorthand(verified_batches),
-        tooltip_text: nil,
+        tooltip_text: "= #{Helpers.format_number(verified_batches)} batches",
         link: nil
       },
       %{
@@ -62,8 +65,12 @@ defmodule ExplorerWeb.Home.Index do
       },
       %{
         title: "Total restaked",
-        value: "#{restaked_amount_usd} USD",
-        tooltip_text: "~= #{restaked_amount_eth} ETH",
+        value: "#{restaked_amount_usd_shorthand} USD",
+        # Using HTML.raw to break paragraph line with <br>
+        tooltip_text:
+          Phoenix.HTML.raw(
+            "= #{Helpers.format_number(restaked_amount_usd)} USD<br>~= #{restaked_amount_eth} ETH"
+          ),
         link: "/restaked"
       }
     ]
diff --git a/explorer/lib/explorer_web/live/utils.ex b/explorer/lib/explorer_web/live/utils.ex
index ab1d997a3..79bbb4062 100644
--- a/explorer/lib/explorer_web/live/utils.ex
+++ b/explorer/lib/explorer_web/live/utils.ex
@@ -9,12 +9,11 @@ defmodule ExplorerWeb.Helpers do
 
   def convert_number_to_shorthand(number) when number >= 1_000_000 do
     formatted_number = Float.round(number / 1_000_000, 2)
-    "#{formatted_number}M"
+    "#{remove_trailing_zeros(formatted_number)}M"
   end
 
   def convert_number_to_shorthand(number) when number >= 1_000 do
-    formatted_number = Float.round(number / 1_000, 2)
-    "#{formatted_number}k"
+    "#{div(number, 1_000)}k"
   end
 
   def convert_number_to_shorthand(number) when number >= 0 do
@@ -23,6 +22,14 @@ defmodule ExplorerWeb.Helpers do
 
   def convert_number_to_shorthand(_number), do: "Invalid number"
 
+  defp remove_trailing_zeros(number) do
+    if Float.ceil(number) == Float.floor(number) do
+      Integer.to_string(trunc(number))
+    else
+      Float.to_string(Float.round(number, 2))
+    end
+  end
+
   def parse_timestamp(timestamp) do
     %{hour: hour, minute: minute, second: second, day: day, month: month, year: year} = timestamp