feat(explorer): add relevant aligned contracts in home screen (yetanotherco#735)

Author: glpecile

explorer/lib/explorer/aligned_layer_service_manager.ex

@@ -48,6 +48,11 @@ defmodule AlignedLayerServiceManager do
                                          |> Map.get("addresses")
                                          |> Map.get("alignedLayerServiceManager")
 
+  @batcher_payment_service_address Jason.decode!(config_json_string)
+                                         |> Map.get("addresses")
+                                         |> Map.get("batcherPaymentService")
+
+
   @gas_per_proof Jason.decode!(payment_service_json_string)
                  |> Map.get("amounts")
                  |> Map.get("gasPerProof")
@@ -67,6 +72,10 @@ defmodule AlignedLayerServiceManager do
     @aligned_layer_service_manager_address
   end
 
+  def get_batcher_payment_service_address() do
+    @batcher_payment_service_address
+  end
+
   def get_latest_block_number() do
     {:ok, num} = Ethers.current_block_number()
     num

explorer/lib/explorer_web/components/contracts.ex

@@ -0,0 +1,58 @@
+defmodule ContractsComponent do
+  use ExplorerWeb, :live_component
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     assign(socket,
+       service_manager_address:
+         AlignedLayerServiceManager.get_aligned_layer_service_manager_address(),
+       batcher_payment_service_address:
+         AlignedLayerServiceManager.get_batcher_payment_service_address(),
+       network: System.get_env("ENVIRONMENT")
+     )}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="relative sm:col-span-3 truncate">
+      <.card
+        inner_class="text-base leading-9 flex flex-wrap sm:flex-row overflow-x-auto gap-x-2"
+        title="Contract Addresses"
+      >
+        <.link
+          href="https://docs.alignedlayer.com/guides/6_contract_addresses"
+          class="absolute top-4 right-5 hover:underline font-medium text-muted-foreground capitalize text-sm"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          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={"https://#{@network |> String.replace(~r/holesky/, "holesky.") |> String.replace(~r/mainnet/, "")}etherscan.io/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={"https://#{@network |> String.replace(~r/holesky/, "holesky.") |> String.replace(~r/mainnet/, "")}etherscan.io/address/#{@batcher_payment_service_address}"}
+          class="hover:text-foreground/80"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <%= @batcher_payment_service_address %>
+        </.a>
+      </.card>
+    </div>
+    """
+  end
+end

explorer/lib/explorer_web/components/core_components.ex

@@ -334,7 +334,7 @@ defmodule ExplorerWeb.CoreComponents do
       <.card_background class={@class}>
         <h2 class="font-medium text-muted-foreground capitalize group-hover:underline truncate">
           <%= @title %>
-          <.icon name="hero-arrow-top-right-on-square-solid mb-1" class="size-4" />
+          <.icon name="hero-arrow-top-right-on-square-solid" class="size-4" />
         </h2>
         <span class={["text-4xl font-bold slashed-zero", @inner_class]}>
           <%= render_slot(@inner_block) %>

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

@@ -17,25 +17,21 @@
       0
     <% end %>
   </.card_link>
-  <.card_link
-    href={
-      "https://#{@network |> String.replace(~r/holesky/, "holesky.") |> String.replace(~r/mainnet/, "")}etherscan.io/address/#{@service_manager_address}"
-    }
-    title="verified batches"
-  >
+  <.card title="verified batches">
     <%= if @verified_batches != :empty do %>
       <%= @verified_batches |> Utils.format_number() %>
     <% else %>
       0
     <% end %>
-  </.card_link>
+  </.card>
   <.card title="Verified Proofs" class="-mt-0.5 md:mt-0">
     <%= if @verified_proofs != :empty do %>
       <%= @verified_proofs |> Utils.format_number() %>
     <% else %>
       0
     <% end %>
   </.card>
+  <.live_component module={ContractsComponent} id="contracts_card" />
   <%= if @latest_batches != :empty and @latest_batches != [] do %>
     <.card
       class="relative sm:col-span-3 w-full flex flex-col space-y-1"
@@ -44,7 +40,7 @@
     >
       <.link
         navigate={~p"/batches"}
-        class="absolute top-4 right-5 hover:underline font-medium text-muted-foreground capitaliz text-sm"
+        class="absolute top-4 right-5 hover:underline font-medium text-muted-foreground capitalize text-sm"
       >
         View All
       </.link>