Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(explorer): new version integration #1683

Merged
merged 37 commits into from
Dec 30, 2024
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
789ab16
refactor: tables ui component
MarcosNicolau Dec 23, 2024
449225b
feat: number of proofs and fee per proof on batches table
MarcosNicolau Dec 23, 2024
b86ea43
refactor: spacing in table
MarcosNicolau Dec 23, 2024
295d002
feat: enlarge view and ditch grid for flex
MarcosNicolau Dec 23, 2024
5faeb5a
feat: new card style
MarcosNicolau Dec 23, 2024
9e8ab1e
feat: landing stats
MarcosNicolau Dec 23, 2024
b3901d0
feat: use new cards and various style fixes
MarcosNicolau Dec 23, 2024
6a64cc1
Merge remote-tracking branch 'origin/explorer-new-version' into feat/…
MarcosNicolau Dec 23, 2024
599576f
fix: chart responsiveness and remove uneeded dark-mode listener
MarcosNicolau Dec 23, 2024
205252c
chore: remove animations
MarcosNicolau Dec 23, 2024
a20d95b
fix: chart responsive when updating
MarcosNicolau Dec 23, 2024
28f5f19
fix: typo
MarcosNicolau Dec 23, 2024
f72d3e7
Update explorer/lib/explorer_web/live/pages/home/index.ex
uri-99 Dec 23, 2024
bf0b386
fix: details
uri-99 Dec 23, 2024
04fc5c3
feat: change chart type to bar
MarcosNicolau Dec 24, 2024
93b3911
style: place tooltip in top of bar
MarcosNicolau Dec 24, 2024
0a0f4fd
chore: elixir warnings
MarcosNicolau Dec 24, 2024
dd9823d
feat: links in stats
MarcosNicolau Dec 24, 2024
f83d334
feat: show all contract addresses
MarcosNicolau Dec 24, 2024
5eb3065
feat: show fee_per_proof in usd in batches table
MarcosNicolau Dec 24, 2024
cbcb4aa
chore: fetch as much as 15 batches in charts
MarcosNicolau Dec 24, 2024
8a109ef
fix: make the whole stat clickable if link is present
MarcosNicolau Dec 24, 2024
9c494af
fix: tooltip names mixing
MarcosNicolau Dec 24, 2024
a30f444
fix: batch size tooltip data
MarcosNicolau Dec 24, 2024
e223a69
fix: get_latest_batches impair between mount and update
MarcosNicolau Dec 24, 2024
de24d55
refactor: rename /restakes routes for /restaked
MarcosNicolau Dec 26, 2024
043b828
feat: yAxis show 0, min and max values
MarcosNicolau Dec 30, 2024
a297474
fix: footer logo size
MarcosNicolau Dec 30, 2024
40c3c17
fix: chart responsiveness when resizing
MarcosNicolau Dec 30, 2024
fd15e8f
docs: chart function yTickCallbackShowMinAndMaxValues
MarcosNicolau Dec 30, 2024
a9a0427
fix: avg_cost_per_proof tooltip
MarcosNicolau Dec 30, 2024
7b3e97a
feat: network message on contracts component
MarcosNicolau Dec 30, 2024
9e27416
fix: searchbar text
MarcosNicolau Dec 30, 2024
22f42ff
fix: stats font size + total restaked in shorthand form
MarcosNicolau Dec 30, 2024
76caaa3
fix: convert_number_to_shorthand
MarcosNicolau Dec 30, 2024
4f6d2f4
fix: increase charts amount of data
MarcosNicolau Dec 30, 2024
fe5eb9c
feat: stats show full number on hover
MarcosNicolau Dec 30, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions explorer/assets/vendor/charts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const applyOptionsByChartId = (id, options, data) => {
export default {
mounted() {
this.initChart();
window.addEventListener("theme-changed", this.reinitChart.bind(this));
},

updated() {
Expand All @@ -32,8 +31,6 @@ export default {
if (this.chart) {
this.chart.destroy();
}

window.removeEventListener("theme-changed", this.reinitChart.bind(this));
},

initChart() {
Expand All @@ -51,6 +48,8 @@ export default {
data,
options,
});

this.chart.resize();
},

reinitChart() {
Expand Down
2 changes: 0 additions & 2 deletions explorer/assets/vendor/dark_mode.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
});
};

Expand Down
2 changes: 1 addition & 1 deletion explorer/assets/vendor/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
13 changes: 13 additions & 0 deletions explorer/lib/explorer/models/batches.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
43 changes: 43 additions & 0 deletions explorer/lib/explorer_web/components/batches_table.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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={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(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="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>
"""
end
end
2 changes: 2 additions & 0 deletions explorer/lib/explorer_web/components/charts.ex
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ defmodule ExplorerWeb.ChartComponents do
}
chart_options={
Jason.encode!(%{
animation: false,
responsive: false,
maintainAspectRatio: false,
interaction: %{
mode: "index",
Expand Down
57 changes: 32 additions & 25 deletions explorer/lib/explorer_web/components/contracts.ex
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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"
Expand All @@ -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>
"""
Expand Down
154 changes: 80 additions & 74 deletions explorer/lib/explorer_web/components/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -522,13 +526,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
])
Expand All @@ -541,13 +558,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 %>
Expand Down Expand Up @@ -794,8 +814,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 =
Expand All @@ -804,58 +822,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 pb-5">
<%= 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]:pb-4 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 pr-10", @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

Expand Down
Loading