feat(explorer): add operator version via tracker api (#879)

Co-authored-by: Urix <[email protected]>

Author: glpecile

docs/3_guides/6_setup_aligned.md

@@ -668,6 +668,7 @@ The `.env` file needs to contain the following variables:
 | `DB_HOST`             | The host URL where the postgres database will be running.                                       |
 | `ELIXIR_HOSTNAME`     | The hostname of your running elixir.                                                            |
 | `DEBUG_ERRORS`        | If you want to enable phoenix errors on your browser instead of a 500 page, set this to `true`. |
+| `TRACKER_API_URL`     | The URL of the aligned version each operator is running.                                        |
 
 Then you can run the explorer with this env file config by entering the following command:
 

explorer/.env.dev

@@ -17,3 +17,6 @@ ALIGNED_CONFIG_FILE="../contracts/script/output/devnet/alignedlayer_deployment_o
 
 # Debug
 DEBUG_ERRORS=true
+
+# Operator version tracker API
+TRACKER_API_URL=http://localhost:3030

explorer/.env.example

@@ -17,3 +17,6 @@ ALIGNED_CONFIG_FILE="<aligned_config_file>"
 
 # Debug
 DEBUG_ERRORS=<true|false>
+
+# Tracker API
+TRACKER_API_URL=<tracker_api_url>

explorer/config/config.exs

@@ -8,7 +8,8 @@
 import Config
 
 config :explorer,
-  generators: [timestamp_type: :utc_datetime]
+  generators: [timestamp_type: :utc_datetime],
+  tracker_api_url: System.get_env("TRACKER_API_URL")
 
 host = System.get_env("PHX_HOST") || "localhost"
 

explorer/lib/abi/AlignedLayerServiceManager.json

@@ -60,9 +60,14 @@ defmodule AlignedLayerServiceManager do
       |> Ethers.get_logs(fromBlock: fromBlock, toBlock: toBlock)
 
     case events do
-      {:ok, []} -> []
-      {:ok, list} -> Enum.map(list, &extract_new_batch_event_info/1)
-      {:error, reason} -> raise("Error fetching events: #{Map.get(reason, "message")}")
+      {:ok, []} ->
+        []
+
+      {:ok, list} ->
+        Enum.map(list, &extract_new_batch_event_info/1)
+
+      {:error, reason} ->
+        raise("Error fetching events: #{Map.get(reason, "message")}")
     end
   end
 
@@ -94,8 +99,9 @@ defmodule AlignedLayerServiceManager do
 
   def is_batch_responded(merkle_root) do
     event =
-      AlignedLayerServiceManager.EventFilters.batch_verified(Utils.string_to_bytes32(merkle_root))
-        |> Ethers.get_logs(fromBlock: @first_block)
+      Utils.string_to_bytes32(merkle_root)
+      |> AlignedLayerServiceManager.EventFilters.batch_verified()
+      |> Ethers.get_logs(fromBlock: @first_block)
 
     case event do
       {:error, reason} -> {:error, reason}
@@ -189,7 +195,6 @@ defmodule AlignedLayerServiceManager do
     batch_merkle_root = event |> Map.get(:topics_raw) |> Enum.at(1)
     sender_address = event |> Map.get(:data) |> Enum.at(0)
 
-
     {:ok,
      %BatchVerifiedInfo{
        address: event |> Map.get(:address),
@@ -228,5 +233,4 @@ defmodule AlignedLayerServiceManager do
         raise("Error fetching restakeable strategies: #{error}")
     end
   end
-
 end

explorer/lib/explorer/contract_managers/aligned_layer_service_manager.ex

@@ -85,6 +85,7 @@ defmodule Restakings do
     query = from r in Restakings,
       join: s in Strategies, on: r.strategy_address == s.strategy_address,
       where: r.operator_id == ^operator_id,
+      order_by: [desc: r.stake],
       select: %{
         restaking: r,
         strategy: %{

explorer/lib/explorer/models/restakings.ex

@@ -14,7 +14,7 @@ defmodule AssetsCTAComponent do
         <.link navigate={~p"/operators"} class="flex flex-col justify-start gap-0.5 group">
           <div class="text-muted-foreground font-semibold flex gap-2 items-center">
             <h2>
-              Total Active Operators
+              Registered Active Operators
             </h2>
             <.right_arrow />
           </div>

explorer/lib/explorer_web/components/assets_cta.ex

@@ -388,32 +388,64 @@ defmodule ExplorerWeb.CoreComponents do
   end
 
   @doc """
-    Renders a dynamic badge compoent.
+    Renders a badge component.
   """
   attr :class, :string, default: nil
-  attr :status, :boolean, default: true
-  attr :falsy_text, :string, default: "Pending"
-  attr :truthy_text, :string, default: "Verified"
+  attr :variant, :string, default: "accent"
   slot :inner_block, default: nil
 
-  def dynamic_badge(assigns) do
+  def badge(assigns) do
     ~H"""
     <span class={
       classes([
-        "px-3 py-1 rounded-full",
-        case @status do
-          true -> "text-accent-foreground bg-accent group-hover:bg-primary/80"
-          false -> "text-background bg-foreground group-hover:bg-foreground/80"
+        "px-3 py-1 rounded-full font-semibold",
+        case @variant do
+          "accent" -> "text-accent-foreground bg-accent group-hover:bg-accent/80"
+          "primary" -> "text-primary-foreground bg-primary group-hover:bg-primary/80"
+          "secondary" -> "text-secondary-foreground bg-secondary group-hover:bg-secondary/80"
+          "destructive" -> "text-destructive-foreground bg-destructive group-hover:bg-destructive/80"
+          "foreground" -> "text-background bg-foreground group-hover:bg-foreground/80"
+          "card" -> "text-card-foreground bg-card group-hover:bg-card/80"
+          _ -> "text-accent-foreground bg-accent group-hover:bg-accent/80"
         end,
         @class
       ])
     }>
+      <%= render_slot(@inner_block) %>
+    </span>
+    """
+  end
+
+  @doc """
+    Renders a dynamic badge compoent.
+  """
+  attr :class, :string, default: nil
+  attr :status, :boolean, default: true
+  attr :falsy_text, :string, default: "Pending"
+  attr :truthy_text, :string, default: "Verified"
+  slot :inner_block, default: nil
+
+  def dynamic_badge(assigns) do
+    ~H"""
+    <.badge
+      variant={
+        case @status do
+          true -> "accent"
+          false -> "foreground"
+        end
+      }
+      class={
+        classes([
+          @class
+        ])
+      }
+    >
       <%= case @status do
         true -> @truthy_text
         false -> @falsy_text
       end %>
       <%= render_slot(@inner_block) %>
-    </span>
+    </.badge>
     """
   end
 
@@ -708,6 +740,43 @@ defmodule ExplorerWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders an empty card background.
+
+  ## Examples
+
+      <.empty_card_background text="No users found" />
+
+  """
+  attr :class, :string, default: nil
+  attr :inner_text_class, :string, default: nil
+  attr :text, :string, default: nil
+  slot :inner_block
+
+  def empty_card_background(assigns) do
+    ~H"""
+    <.card_background class={
+      classes([
+        "overflow-x-auto min-h-[38.45rem] flex flex-col items-center justify-center gap-2",
+        @class
+      ])
+    }>
+      <p
+        :if={@text != nil}
+        class={
+          classes([
+            "text-lg text-muted-foreground",
+            @inner_text_class
+          ])
+        }
+      >
+        <%= @text %>
+      </p>
+      <%= render_slot(@inner_block) %>
+    </.card_background>
+    """
+  end
+
   @doc """
   Renders a data list.
 
@@ -735,30 +804,6 @@ defmodule ExplorerWeb.CoreComponents do
     """
   end
 
-  @doc """
-  Renders a back navigation link.
-
-  ## Examples
-
-      <.back navigate={~p"/posts"}>Back to posts</.back>
-  """
-  attr :navigate, :any, required: true
-  slot :inner_block, required: true
-
-  def back(assigns) do
-    ~H"""
-    <div class="mt-16">
-      <.link
-        navigate={@navigate}
-        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
-      >
-        <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
-        <%= render_slot(@inner_block) %>
-      </.link>
-    </div>
-    """
-  end
-
   @doc """
   Renders a [Heroicon](https://heroicons.com).
 

explorer/lib/explorer_web/components/core_components.ex

@@ -1,6 +1,11 @@
 defmodule NavComponent do
   use ExplorerWeb, :live_component
 
+  @impl true
+  def mount(socket) do
+    {:ok, assign(socket, latest_release: ReleasesHelper.get_latest_release())}
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -46,6 +51,12 @@ defmodule NavComponent do
           GitHub
         </.link>
         <DarkMode.button />
+        <.badge :if={@latest_release != nil} class="hidden md:inline">
+          <%= @latest_release %>
+          <.tooltip>
+            Latest Aligned version
+          </.tooltip>
+        </.badge>
         <button
           class="md:hidden z-50"
           id="menu-toggle"
@@ -61,6 +72,9 @@ defmodule NavComponent do
           phx-click={toggle_menu()}
         >
           <div class="h-full flex flex-col gap-y-10 text-2xl justify-end items-center p-12">
+            <.badge :if={@latest_release != nil}>
+              <%= @latest_release %>
+            </.badge>
             <.link
               class="text-foreground/80 hover:text-foreground font-semibold"
               navigate={~p"/batches"}