Skip to content

Commit d319392

Browse files
MarcosNicolauMarcosNicolau
committed
feat: nav selector for operators and restakes
1 parent 7736b8d commit d319392

4 files changed

Lines changed: 176 additions & 146 deletions

File tree

‎explorer/lib/explorer_web/components/agg_proofs_table.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ defmodule ExplorerWeb.AggProofsTable do
2323
</:col>
2424
<:col :let={proof} label="Age">
2525
<span class="md:px-0" title={proof.age}>
26-
<%= proof.age %>
26+
<%= proof.age %>
2727
</span>
2828
</:col>
2929
<:col :let={proof} label="Block Number">

‎explorer/lib/explorer_web/components/nav.ex‎

Lines changed: 159 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -27,123 +27,32 @@ defmodule NavComponent do
2727
@impl true
2828
def render(assigns) do
2929
~H"""
30-
<nav class={
31-
classes([
32-
"flex fixed justify-center items-center w-full",
33-
"border-b border-foreground/10 backdrop-blur-lg backdrop-saturate-200"
34-
])
35-
}
36-
style="z-index: 1"
30+
<nav
31+
class={
32+
classes([
33+
"flex fixed justify-center items-center w-full",
34+
"border-b border-foreground/10 backdrop-blur-lg backdrop-saturate-200"
35+
])
36+
}
37+
style="z-index: 1"
3738
>
38-
<div class={classes(["gap-5 mx-4 top-0 p-3 z-50",
39-
"flex justify-between items-center w-full"])} style="max-width: 1200px;">
40-
<div class="gap-x-6 flex">
41-
<.link
42-
class="hover:scale-105 transform duration-150 active:scale-95 text-3xl"
43-
navigate={~p"/"}
44-
>
45-
🟩 <span class="sr-only">Aligned Explorer Home</span>
46-
</.link>
47-
<div class={["items-center gap-5 hidden md:inline-flex"]}>
39+
<div
40+
class={classes(["gap-5 mx-4 top-0 p-3 z-50", "flex justify-between items-center w-full"])}
41+
style="max-width: 1200px;"
42+
>
43+
<div class="gap-x-6 flex">
4844
<.link
49-
class={
50-
active_view_class(assigns.socket.view, [
51-
ExplorerWeb.Batches.Index,
52-
ExplorerWeb.Batch.Index
53-
])
54-
}
55-
navigate={~p"/batches"}
45+
class="hover:scale-105 transform duration-150 active:scale-95 text-3xl"
46+
navigate={~p"/"}
5647
>
57-
Batches
48+
🟩 <span class="sr-only">Aligned Explorer Home</span>
5849
</.link>
59-
<.link
60-
class={
61-
active_view_class(assigns.socket.view, [
62-
ExplorerWeb.AggProofs.Index,
63-
ExplorerWeb.AggProof.Index
64-
])
65-
}
66-
navigate={~p"/aggregated_proofs"}
67-
>
68-
Aggregation
69-
</.link>
70-
<.link
71-
class={
72-
active_view_class(assigns.socket.view, [
73-
ExplorerWeb.Operators.Index,
74-
ExplorerWeb.Operator.Index
75-
])
76-
}
77-
navigate={~p"/operators"}
78-
>
79-
Operators
80-
</.link>
81-
<.link
82-
class={
83-
active_view_class(assigns.socket.view, [
84-
ExplorerWeb.Restakes.Index,
85-
ExplorerWeb.Restake.Index
86-
])
87-
}
88-
navigate={~p"/restaked"}
89-
>
90-
Restaked
91-
</.link>
92-
</div>
93-
</div>
94-
<div style="max-width: 600px; width: 100%;">
95-
<.live_component module={SearchComponent} id="nav_search" />
96-
</div>
97-
<div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden lg:[&>a]:inline-block">
98-
<.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
99-
Docs
100-
</.link>
101-
<.link
102-
class="hover:text-foreground"
103-
target="_blank"
104-
href="https://github.com/yetanotherco/aligned_layer"
105-
>
106-
GitHub
107-
</.link>
108-
<DarkMode.button theme={@theme} />
109-
<.badge :if={@latest_release != nil} class="hidden md:inline">
110-
<%= @latest_release %>
111-
<.tooltip>
112-
Latest Aligned version
113-
</.tooltip>
114-
</.badge>
115-
<.hover_dropdown_selector
116-
current_value={Helpers.get_current_network_from_host(@host)}
117-
variant="accent"
118-
options={get_networks(Helpers.get_current_network_from_host(@host))}
119-
icon="hero-cube-transparent-micro"
120-
/>
121-
<button
122-
class="md:hidden z-50"
123-
id="menu-toggle"
124-
phx-click={toggle_menu()}
125-
aria-label="Toggle hamburger menu"
126-
>
127-
<.icon name="hero-bars-3" class="toggle-open" />
128-
<.icon name="hero-x-mark" class="toggle-close hidden" />
129-
</button>
130-
<div
131-
id="menu-overlay"
132-
class="fixed inset-0 bg-background/90 z-40 hidden min-h-dvh animate-in fade-in"
133-
phx-click={toggle_menu()}
134-
>
135-
<div class="h-full flex flex-col gap-y-10 text-2xl justify-end items-center p-12">
136-
<.badge :if={@latest_release != nil}>
137-
<%= @latest_release %>
138-
</.badge>
50+
<div class={["items-center gap-5 hidden md:inline-flex"]}>
13951
<.link
14052
class={
141-
classes([
142-
active_view_class(assigns.socket.view, [
143-
ExplorerWeb.Batches.Index,
144-
ExplorerWeb.Batch.Index
145-
]),
146-
"text-foreground/80 hover:text-foreground font-semibold"
53+
active_view_class(assigns.socket.view, [
54+
ExplorerWeb.Batches.Index,
55+
ExplorerWeb.Batch.Index
14756
])
14857
}
14958
navigate={~p"/batches"}
@@ -153,40 +62,160 @@ defmodule NavComponent do
15362
<.link
15463
class={
15564
active_view_class(assigns.socket.view, [
156-
ExplorerWeb.Operators.Index,
157-
ExplorerWeb.Operator.Index
65+
ExplorerWeb.AggProofs.Index,
66+
ExplorerWeb.AggProof.Index
15867
])
15968
}
160-
navigate={~p"/operators"}
69+
navigate={~p"/aggregated_proofs"}
16170
>
162-
Operators
71+
Aggregation
16372
</.link>
164-
<.link
73+
<.nav_links_dropdown
74+
title="Restaking"
16575
class={
16676
active_view_class(assigns.socket.view, [
77+
ExplorerWeb.Operators.Index,
78+
ExplorerWeb.Operator.Index,
16779
ExplorerWeb.Restakes.Index,
16880
ExplorerWeb.Restake.Index
16981
])
17082
}
171-
navigate={~p"/restaked"}
172-
>
173-
Restaked
174-
</.link>
175-
<.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
176-
Docs
177-
</.link>
83+
,
84+
links={[
85+
{"Operators", ~p"/operators",
86+
active_view_class(assigns.socket.view, [
87+
ExplorerWeb.Operators.Index,
88+
ExplorerWeb.Operator.Index
89+
])},
90+
{"Tokens", ~p"/restaked",
91+
active_view_class(assigns.socket.view, [
92+
ExplorerWeb.Restakes.Index,
93+
ExplorerWeb.Restake.Index
94+
])}
95+
]}
96+
/>
97+
</div>
98+
</div>
99+
<div style="max-width: 600px; width: 100%;">
100+
<.live_component module={SearchComponent} id="nav_search" />
101+
</div>
102+
<div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden lg:[&>a]:inline-block">
103+
<.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
104+
Docs
105+
</.link>
106+
<.link
107+
class="hover:text-foreground"
108+
target="_blank"
109+
href="https://github.com/yetanotherco/aligned_layer"
110+
>
111+
GitHub
112+
</.link>
113+
<DarkMode.button theme={@theme} />
114+
<.badge :if={@latest_release != nil} class="hidden md:inline">
115+
<%= @latest_release %>
116+
<.tooltip>
117+
Latest Aligned version
118+
</.tooltip>
119+
</.badge>
120+
<.hover_dropdown_selector
121+
current_value={Helpers.get_current_network_from_host(@host)}
122+
variant="accent"
123+
options={get_networks(Helpers.get_current_network_from_host(@host))}
124+
icon="hero-cube-transparent-micro"
125+
/>
126+
<button
127+
class="md:hidden z-50"
128+
id="menu-toggle"
129+
phx-click={toggle_menu()}
130+
aria-label="Toggle hamburger menu"
131+
>
132+
<.icon name="hero-bars-3" class="toggle-open" />
133+
<.icon name="hero-x-mark" class="toggle-close hidden" />
134+
</button>
135+
<div
136+
id="menu-overlay"
137+
class="fixed inset-0 bg-background/90 z-40 hidden min-h-dvh animate-in fade-in"
138+
phx-click={toggle_menu()}
139+
>
140+
<div class="h-full flex flex-col gap-y-10 text-2xl justify-end items-center p-12">
141+
<.badge :if={@latest_release != nil}>
142+
<%= @latest_release %>
143+
</.badge>
144+
<.link
145+
class={
146+
classes([
147+
active_view_class(assigns.socket.view, [
148+
ExplorerWeb.Batches.Index,
149+
ExplorerWeb.Batch.Index
150+
]),
151+
"text-foreground/80 hover:text-foreground font-semibold"
152+
])
153+
}
154+
navigate={~p"/batches"}
155+
>
156+
Batches
157+
</.link>
158+
<.link
159+
class="hover:text-foreground"
160+
target="_blank"
161+
href="https://docs.alignedlayer.com"
162+
>
163+
Docs
164+
</.link>
165+
<.link
166+
class="hover:text-foreground"
167+
target="_blank"
168+
href="https://github.com/yetanotherco/aligned_layer"
169+
>
170+
GitHub
171+
</.link>
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
</nav>
177+
"""
178+
end
179+
180+
@doc """
181+
Renders a dropdown on hover component with links.
182+
"""
183+
attr(:title, :list, doc: "the selector title")
184+
attr(:class, :list, doc: "class for selector")
185+
attr(:links, :string, doc: "the links to render: (name, link, class)")
186+
187+
def nav_links_dropdown(assigns) do
188+
~H"""
189+
<div class="relative group">
190+
<div class="flex items-center gap-2">
191+
<p class={classes(["cursor-default", @class])}><%= @title %></p>
192+
</div>
193+
194+
<div
195+
class="opacity-0 pointer-events-none absolute transition-all w-full group-hover:opacity-100 group-hover:pointer-events-auto pt-2"
196+
style="min-width: 150px;"
197+
>
198+
<div class="p-5 w-full bg-card border border-muted-foreground/30 rounded-lg flex flex-col justify-center items-center gap-5">
199+
<%= for {name, route, class} <- @links do %>
178200
<.link
179-
class="hover:text-foreground"
180-
target="_blank"
181-
href="https://github.com/yetanotherco/aligned_layer"
201+
class={
202+
classes([
203+
"group/link text-card-foreground w-full flex items-center justify-between",
204+
class
205+
])
206+
}
207+
navigate={route}
182208
>
183-
GitHub
209+
<%= name %>
210+
<.icon
211+
name="hero-chevron-right"
212+
class="text-foreground/80 transition duration-300 group-hover/link:translate-x-1 group-hover/link:text-foreground h-5 w-5"
213+
/>
184214
</.link>
185-
</div>
215+
<% end %>
186216
</div>
187217
</div>
188-
</div>
189-
</nav>
218+
</div>
190219
"""
191220
end
192221

‎explorer/lib/explorer_web/live/pages/agg_proof/index.html.heex‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
/>
2222
</p>
2323
</div>
24-
24+
2525
<div>
2626
<h3>
2727
Status:
@@ -34,7 +34,7 @@
3434
</h3>
3535
<p><%= @agg_proof.number_of_proofs %></p>
3636
</div>
37-
37+
3838
<div>
3939
<h3>
4040
Proofs included:
@@ -71,7 +71,7 @@
7171
<.divider />
7272
<div>
7373
<h3>
74-
Block Number:
74+
Block Number:
7575
</h3>
7676
<.a
7777
target="_blank"
@@ -86,7 +86,7 @@
8686
</div>
8787
<div>
8888
<h3>
89-
Transaction Hash:
89+
Transaction Hash:
9090
</h3>
9191
<.a
9292
target="_blank"
@@ -98,9 +98,9 @@
9898
</.a>
9999
</div>
100100

101-
<div>
101+
<div>
102102
<h3>
103-
Blob versioned hash:
103+
Blob versioned hash:
104104
</h3>
105105
<.a
106106
target="_blank"

0 commit comments

Comments
 (0)