feat(explorer): add tx link and block to etherscan and other misc changes and improvements (#279)

Co-authored-by: MauroFab <maurotoscano2@gmail.com>
Co-authored-by: NicolasRampoldi <58613770+NicolasRampoldi@users.noreply.github.com>
Co-authored-by: Mauro Toscano <12560266+MauroToscano@users.noreply.github.com>

Author: 3 people

README.md

@@ -12,8 +12,8 @@
   - [Local Devnet Setup](#local-devnet-setup)
   - [Deploying Aligned Contracts to Holesky or Testnet](#deploying-aligned-contracts-to-holesky-or-testnet)
   - [Metrics](#metrics)
-  - [Notes on project creation / devnet deployment](#notes-on-project-creation--devnet-deployment)
   - [Explorer](#explorer)
+  - [Notes on project creation / devnet deployment](#notes-on-project-creation--devnet-deployment)
   - [Tests](#tests)
   - [FAQ](#faq)
 
@@ -405,7 +405,6 @@ To start the operator with a custom configuration, run:
 make operator_start CONFIG_FILE=<path_to_config_file>
 ```
 
-
 ### Batcher
 
 #### Config
@@ -491,7 +490,6 @@ cd batcher/client/ && cargo run --release -- \
 --proof_generator_addr <proof_generator_addr>
 ```
 
-
 ### Task Sender
 
 #### Config
@@ -600,7 +598,7 @@ go run task_sender/cmd/main.go loop-tasks
 
 ## Deploying Aligned Contracts to Holesky or Testnet
 
-### Eigenlayer Contracts: Anvil 
+### Eigenlayer Contracts: Anvil
 
 If EigenLayer contracts change, the anvil state needs to be updated with:
 
@@ -621,7 +619,6 @@ These contracts are not deployed by Aligned. Current EigenLayer contracts:
 - [Holesky Contracts](https://github.com/Layr-Labs/eigenlayer-contracts/blob/testnet-holesky/script/configs/holesky/Holesky_current_deployment.config.json)
 - [Mainnet Contracts](https://github.com/Layr-Labs/eigenlayer-contracts/blob/mainnet/script/configs/mainnet/Mainnet_current_deployment.config.json)
 
-
 ### Aligned Contracts: Anvil
 
 When changing Aligned contracts, the anvil state needs to be updated with:
@@ -680,6 +677,7 @@ You can find an example config file in `contracts/script/deploy/config/holesky/a
 ### Bindings
 
 Also make sure to re-generate the Go smart contract bindings:
+
 ```bash
 make bindings
 ```
@@ -716,36 +714,9 @@ To install Prometheus, you can follow the instructions on the [official website]
 To install Grafana, you can follow the instructions on the [official website](https://grafana.com/docs/grafana/latest/setup-grafana/installation/).
 
 
-## Notes on project creation / devnet deployment
-
-Eigenlayer middleware was installed as a submodule with:
-
-```sh
-mkdir contracts
-cd contacts
-forge init . --no-commit
-forge install Layr-Labs/eigenlayer-middleware@mainnet
-```
-
-Then to solve the issue <https://github.com/Layr-Labs/eigenlayer-middleware/issues/229>, we changed it to:
-
-```forge install yetanotherco/eigenlayer-middleware@yac-mainnet --no-commit```
-
-As soon as it gets fixed in mainnet we can revert it.
-
-Base version of middleware used is ```7229f2b```.
-
-The script to initialize the devnet can be found on  ```contracts/scripts/anvil```.
+## Explorer
 
-The addresses of the relevant contracts after running the anvil script is dumped on ```contracts/script/output/devnet```.
-
-The state is backuped on ```contracts/scripts/anvil/state```.
-
-Eigenlayer contract deployment is almost the same as the EigenLayer contract deployment on mainnet. Changes are described on the file.
-
-
-##  Explorer
-### Requirements
+### Minimum Requirements
 
 - [Erlang 26](https://github.com/asdf-vm/asdf-erlang)
 - [Elixir 1.16.2](https://elixir-ko.github.io/install.html), compiled with OTP 26
@@ -767,10 +738,10 @@ Create a `.env` file in the `/explorer` directory of the project. The `.env` fil
 | -------- | ----------- |
 | `RPC_URL` | The RPC URL of the network you want to connect to. |
 | `ENVIRONMENT` | The environment you want to run the application in. It can be `devnet`, `holesky` or `mainnet`. |
+| `PHX_HOST` | The host URL where the Phoenix server will be running. |
 
 ```make run_explorer```
 
-
 ### Send example data
 
 If you want to have some data to see on it, you can start our infinite task sender, which will constantly send new proofs to the batcher.
@@ -779,6 +750,35 @@ If you want to have some data to see on it, you can start our infinite task send
 make batcher_send_burst_groth16
 ```
 
+
+## Notes on project creation / devnet deployment
+
+Eigenlayer middleware was installed as a submodule with:
+
+```sh
+mkdir contracts
+cd contacts
+forge init . --no-commit
+forge install Layr-Labs/eigenlayer-middleware@mainnet
+```
+
+Then to solve the issue <https://github.com/Layr-Labs/eigenlayer-middleware/issues/229>, we changed it to:
+
+```forge install yetanotherco/eigenlayer-middleware@yac-mainnet --no-commit```
+
+As soon as it gets fixed in mainnet we can revert it.
+
+Base version of middleware used is ```7229f2b```.
+
+The script to initialize the devnet can be found on  ```contracts/scripts/anvil```.
+
+The addresses of the relevant contracts after running the anvil script is dumped on ```contracts/script/output/devnet```.
+
+The state is backuped on ```contracts/scripts/anvil/state```.
+
+Eigenlayer contract deployment is almost the same as the EigenLayer contract deployment on mainnet. Changes are described on the file.
+
+
 ## Tests
 
 To run the go tests
@@ -787,11 +787,12 @@ To run the go tests
 make test
 ```
 
-# Verify Proofs
 
-## SP1
+## Verify Proofs
 
-### Dependencies
+### SP1
+
+#### Dependencies
 This guide assumes that:
 - sp1 prover installed (instructions [here](https://succinctlabs.github.io/sp1/getting-started/install.html))
 - sp1 project to generate the proofs (instructions [here](https://succinctlabs.github.io/sp1/generating-proofs/setup.html))
@@ -800,7 +801,7 @@ This guide assumes that:
     git clone https://github.com/yetanotherco/aligned_layer.git
     ```
 
-### How to generate a proof
+#### How to generate a proof
 
 > AlignedLayer only verifies SP1 in compressed version. 
 > You can check you are using compressed by opening script/src/main.rs
@@ -813,7 +814,7 @@ Then, run the following command to generate a proof:
 cargo run --release
 ```
 
-### How to get the proof verified by AlignedLayer
+#### How to get the proof verified by AlignedLayer
 
 After generating the proof, you will have to find two different files:
 - proof file: usually found under `script` directory, with the name `proof.json` or similar
@@ -831,6 +832,7 @@ cargo run --release -- \
 --proof_generator_addr <proof_generator_addr>
 ```
 
+
 ## FAQ
 
 ### What is the objective of Aligned?

explorer/.env.dev

@@ -1,2 +1,3 @@
 RPC_URL=http://localhost:8545
 ENVIRONMENT=devnet
+PHX_HOST=http://localhost:4000

explorer/.env.example

@@ -1,2 +1,3 @@
 RPC_URL=<rpc_url>
 ENVIRONMENT=<devnet|holesky|mainnet>
+PHX_HOST=<phx_host_url>

explorer/config/runtime.exs

@@ -33,7 +33,7 @@ if config_env() == :prod do
       You can generate one by calling: mix phx.gen.secret
       """
 
-  host = System.get_env("PHX_HOST") || "example.com"
+  host = System.get_env("PHX_HOST") || "explorer.alignedlayer.com"
   port = String.to_integer(System.get_env("PORT") || "4000")
 
   config :explorer, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")

explorer/lib/explorer_web/components/core_components.ex

@@ -281,6 +281,9 @@ defmodule ExplorerWeb.CoreComponents do
     """
   end
 
+  @doc """
+    Renders an arrow icon.
+  """
   attr :class, :string, default: nil
 
   def right_arrow(assigns) do
@@ -292,6 +295,21 @@ defmodule ExplorerWeb.CoreComponents do
     """
   end
 
+  @doc """
+    Renders an anchor tag.
+  """
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(href target)
+  slot :inner_block, default: nil
+
+  def a(assigns) do
+    ~H"""
+    <.link class={["underline underline-offset-4 font-medium	after:content-['↗'] hover:after:content-['→'] transition-all duration-150", @class]} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </.link>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 

explorer/lib/explorer_web/components/layouts/app.html.heex

@@ -7,7 +7,7 @@
       Batches
     </a>
   </div>
-  <div class="flex items-center gap-4 font-semibold leading-6 text-foreground/80">
+  <div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden sm:[&>a]:inline-block">
     <a class="hover:text-foreground" target="_blank" href="https://x.com/alignedlayer">
       @alignedlayer
     </a>

explorer/lib/explorer_web/components/layouts/root.html.heex

@@ -10,7 +10,7 @@
     <%!-- Description --%>
     <meta
       name="description"
-      content="Explore the Aligned verification layer with Aligned Exlporer. Keep track of every task, block, its response and any other relevant information of Aligned!"
+      content="Explore every aligned proof batch with Aligned Explorer!"
     />
     <%!-- Emoji favicon --%>
     <link
@@ -23,7 +23,7 @@
     <meta property="og:title" content="Aligned Explorer" />
     <meta
       property="og:description"
-      content="Explore the Aligned verification layer with Aligned Exlporer. Keep track of every task, block, its response and any other relevant information of Aligned!"
+      content="Explore every aligned proof batch with Aligned Explorer!"
     />
     <meta property="og:image" content={~p"/images/hero.jpeg"} />
     <!-- Twitter -->
@@ -32,7 +32,7 @@
     <meta property="twitter:title" content="Aligned Explorer" />
     <meta
       property="twitter:description"
-      content="Explore the Aligned verification layer with Aligned Exlporer. Keep track of every task, block, its response and any other relevant information of Aligned!"
+      content="Explore every aligned proof batch with Aligned Explorer!"
     />
     <meta property="twitter:image" content={~p"/images/hero.jpeg"} />
     <meta name="csrf-token" content={get_csrf_token()} />

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

@@ -3,14 +3,14 @@
     <h1 class="text-5xl font-bold font-foreground">Batch Details</h1>
     <.card
       class="px-6 py-5 min-h-fit flex flex-col rounded-3xl"
-      inner_class="font-semibold inline-flex flex-col text-base gap-y-2"
+      inner_class="font-semibold inline-flex flex-col text-base gap-y-2 text-muted-foreground [&>span]:text-foreground [&>a]:text-foreground"
     >
       Merkle Root Hash: <span class="break-all font-normal"><%= @merkle_root %></span>
-      Address: <span class="break-all font-normal"><%= @newBatchInfo.address %></span>
       Block Hash: <span class="break-all font-normal"><%= @newBatchInfo.block_hash %></span>
-      Block Number: <span class="break-all font-normal"><%= @newBatchInfo.block_number %></span>
+      Block Number: <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/block/#{@newBatchInfo.block_number}"}  class="break-all font-normal"><%= @newBatchInfo.block_number %></.a>
       Transaction Hash:
-      <span class="break-all font-normal"><%= @newBatchInfo.transaction_hash %></span>
+      <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/tx/#{@newBatchInfo.transaction_hash}"} class="break-all font-normal"><%= @newBatchInfo.transaction_hash %></.a>
+      Aligned Contract Address: <.a target="_blank" rel="noopener" href={"https://holesky.etherscan.io/address/#{@newBatchInfo.address}"} class="break-all font-normal"><%= @newBatchInfo.address %></.a>
     </.card>
   <% else %>
     <div class="flex flex-col space-y-6 justify-center grow relative text-center">
@@ -23,11 +23,11 @@
         alt="block not found"
         src={~p"/images/not-found.jpeg"}
       />
-      <a href="/">
+      <.link navigate={~p"/"}>
         <.button>
           Go Home
         </.button>
-      </a>
+      </.link>
     </div>
   <% end %>
 </div>

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

@@ -16,15 +16,15 @@
           <%= for batch <- @batches do %>
             <tr class="text-foreground gap-y-2 [&>th]:pt-3">
               <th class="text-left">
-                <a href={"/batches/#{batch.batch_merkle_root}"} class="group">
+                <.link navigate={~p"/batches/#{batch.batch_merkle_root}"} class="group">
                   <span
                     title={batch.batch_merkle_root}
                     class="inline-flex gap-x-3 col-span-2 items-center group-hover:text-foreground/80"
                   >
                     <%= Utils.shorten_block_hash(batch.batch_merkle_root) %>
                     <.right_arrow />
                   </span>
-                </a>
+                </.link>
               </th>
 
               <th class="font-normal group-hover:text-foreground/80">
@@ -49,11 +49,11 @@
         </tbody>
       </table>
     </.card_background>
-    <a href={"?page=#{@current_page + 1}"}>
+    <.link navigate={~p"/batches?page=#{@current_page + 1}"}>
       <.button class="text-muted-foreground flex self-center">
         Show More
       </.button>
-    </a>
+    </.link>
   <% else %>
     <p class="text-lg">No batches found</p>
   <% end %>

explorer/lib/explorer_web/live/pages/home/index.ex

@@ -22,8 +22,6 @@ defmodule ExplorerWeb.Home.Index do
   def mount(_, _, socket) do
     verified_batches = get_verified_batches_count()
 
-    shorthand_verified_batches = Utils.convert_number_to_shorthand(verified_batches)
-
     operators_registered = get_operators_registered()
 
     latest_batches =
@@ -33,7 +31,7 @@ defmodule ExplorerWeb.Home.Index do
 
     {:ok,
      assign(socket,
-       verified_batches: shorthand_verified_batches,
+       verified_batches: verified_batches,
        operators_registered: operators_registered,
        latest_batches: latest_batches,
        page_title: "Welcome"