Skip to content

Commit 1ac7d2a

Browse files
glpecileglpecile
authored
feat(explorer): add social features and other improvements (#580)
1 parent 315d9ab commit 1ac7d2a

24 files changed

Lines changed: 198 additions & 118 deletions

File tree

‎explorer/.env.dev‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ DB_HOST=localhost
1414

1515
# Config file
1616
ALIGNED_CONFIG_FILE="../contracts/script/output/devnet/alignedlayer_deployment_output.json"
17+
18+
# Debug
19+
DEBUG_ERRORS=true

‎explorer/.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ DB_HOST=<db_host>
1414

1515
# Config file
1616
ALIGNED_CONFIG_FILE="<aligned_config_file>"
17+
18+
# Debug
19+
DEBUG_ERRORS=<true|false>

‎explorer/config/config.exs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ config :explorer, ExplorerWeb.Endpoint,
1616
adapter: Bandit.PhoenixAdapter,
1717
render_errors: [
1818
formats: [html: ExplorerWeb.ErrorHTML, json: ExplorerWeb.ErrorJSON],
19-
layout: false
19+
root_layout: {ExplorerWeb.Layouts, :root}
2020
],
2121
pubsub_server: Explorer.PubSub,
2222
live_view: [signing_salt: "XkOXIXZ0"]

‎explorer/config/dev.exs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ config :explorer, ExplorerWeb.Endpoint,
1212
http: [ip: {127, 0, 0, 1}, port: 4000],
1313
check_origin: false,
1414
code_reloader: true,
15-
debug_errors: true,
15+
debug_errors: System.get_env("DEBUG_ERRORS") || false,
1616
secret_key_base: "Ar8XKULLilwSeaCoCwlrv0KVM8dhzo97yhNOZi5e5wXlk7O0UdjZJJbuyzJx1YuX",
1717
watchers: [
1818
esbuild: {Esbuild, :install_and_run, [:explorer, ~w(--sourcemap=inline --watch)]},

‎explorer/config/runtime.exs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ if config_env() == :prod do
3333
You can generate one by calling: mix phx.gen.secret
3434
"""
3535

36-
host = System.get_env("PHX_HOST") || "explorer.alignedlayer.com"
36+
host = System.get_env("PHX_HOST") || "http://localhost:4000"
3737
port = String.to_integer(System.get_env("PORT") || "4000")
3838

3939
config :explorer, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,21 @@ defmodule ExplorerWeb.CoreComponents do
244244
"""
245245
end
246246

247+
@doc """
248+
Root background component.
249+
"""
250+
slot :inner_block, default: nil
251+
252+
def root_background(assigns) do
253+
~H"""
254+
<div class="bg-[url(/images/home.webp)] bg-cover min-h-screen">
255+
<main class="px-4 sm:px-6 lg:px-8 pt-20 pb-8 selection:bg-primary/80">
256+
<%= render_slot(@inner_block) %>
257+
</main>
258+
</div>
259+
"""
260+
end
261+
247262
@doc """
248263
Renders a card background.
249264
"""

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ defmodule DarkMode do
99
phx-update="ignore"
1010
phx-hook="DarkThemeToggle"
1111
class="text-foreground hover:bg-foreground/10 rounded-lg text-sm p-2 drop-shadow-md"
12+
aria-label="Toggle dark/light mode"
1213
>
1314
<svg
1415
id="theme-toggle-dark-icon"
@@ -17,6 +18,7 @@ defmodule DarkMode do
1718
viewBox="0 0 20 20"
1819
xmlns="http://www.w3.org/2000/svg"
1920
>
21+
<title>Toggle light mode</title>
2022
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
2123
</svg>
2224
@@ -27,6 +29,7 @@ defmodule DarkMode do
2729
viewBox="0 0 20 20"
2830
xmlns="http://www.w3.org/2000/svg"
2931
>
32+
<title>Toggle dark mode</title>
3033
<path
3134
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
3235
fill-rule="evenodd"

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

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,5 @@
1-
<nav class="px-4 sm:px-6 lg:px-8 fixed top-0 w-full inline-flex justify-between p-3 border-b border-foreground/10 backdrop-blur-md backdrop-saturate-200 z-50">
2-
<div class="flex items-center gap-8 [&>a]:drop-shadow-md">
3-
<.link class="text-3xl hover:scale-105 transform duration-150 active:scale-95" navigate={~p"/"}>
4-
🟩
5-
<span class="sr-only">Aligned Explorer</span>
6-
</.link>
7-
<.link class="text-foreground/80 hover:text-foreground font-semibold" navigate={~p"/batches"}>
8-
Batches
9-
</.link>
10-
<.live_component module={SearchComponent} id="nav_search" />
11-
</div>
12-
<div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden sm:[&>a]:inline-block [&>a]:drop-shadow-md">
13-
<a
14-
class="hover:text-foreground"
15-
target="_blank"
16-
href="https://x.com/alignedlayer"
17-
>
18-
@alignedlayer
19-
</a>
20-
<a
21-
class="hover:text-foreground"
22-
target="_blank"
23-
href="https://github.com/yetanotherco/aligned_layer"
24-
>
25-
GitHub
26-
</a>
27-
<DarkMode.button />
28-
</div>
29-
</nav>
30-
<div class="bg-[url(/images/home.png)] bg-cover min-h-screen">
1+
<.live_component module={NavComponent} id="navbar" />
2+
<.root_background>
313
<.flash_group flash={@flash} />
32-
<main class="px-4 sm:px-6 lg:px-8 pt-20 pb-8 selection:bg-primary/80">
33-
<%= @inner_content %>
34-
</main>
35-
</div>
4+
<%= @inner_content %>
5+
</.root_background>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
defmodule NavComponent do
2+
use ExplorerWeb, :live_component
3+
4+
@impl true
5+
def render(assigns) do
6+
~H"""
7+
<nav class="px-4 sm:px-6 lg:px-8 fixed top-0 w-full inline-flex justify-between p-3 border-b border-foreground/10 backdrop-blur-md backdrop-saturate-200 z-50">
8+
<div class="flex items-center gap-8 [&>a]:drop-shadow-md">
9+
<.link
10+
class="text-3xl hover:scale-105 transform duration-150 active:scale-95"
11+
navigate={~p"/"}
12+
>
13+
🟩 <span class="sr-only">Aligned Explorer</span>
14+
</.link>
15+
<.link class="text-foreground/80 hover:text-foreground font-semibold" navigate={~p"/batches"}>
16+
Batches
17+
</.link>
18+
<.live_component module={SearchComponent} id="nav_search" />
19+
</div>
20+
<div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden sm:[&>a]:inline-block [&>a]:drop-shadow-md">
21+
<a class="hover:text-foreground" target="_blank" href="https://x.com/alignedlayer">
22+
@alignedlayer
23+
</a>
24+
<a
25+
class="hover:text-foreground"
26+
target="_blank"
27+
href="https://github.com/yetanotherco/aligned_layer"
28+
>
29+
GitHub
30+
</a>
31+
<DarkMode.button />
32+
</div>
33+
</nav>
34+
"""
35+
end
36+
end

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
defmodule SearchComponent do
22
use ExplorerWeb, :live_component
33

4-
# do live redirect
4+
@impl true
55
def handle_event("search_batch", %{"batch" => batch_params}, socket) do
66
batch_merkle_root = Map.get(batch_params, "merkle_root")
77
is_batch_merkle_root_valid = String.match?(batch_merkle_root, ~r/^0x[a-fA-F0-9]+$/)
@@ -21,6 +21,7 @@ defmodule SearchComponent do
2121

2222
attr :class, :string, default: nil
2323

24+
@impl true
2425
def render(assigns) do
2526
~H"""
2627
<form

0 commit comments

Comments
 (0)