From 4ed8b13caad1f34bd8898b71cb9af627a3d4c875 Mon Sep 17 00:00:00 2001 From: Alec Savvy Date: Tue, 7 Oct 2025 21:26:29 -0600 Subject: [PATCH 1/8] dev setup --- pkg/console/cmd/main.go | 70 +++-------------------------------------- pkg/console/console.go | 6 ++-- 2 files changed, 8 insertions(+), 68 deletions(-) diff --git a/pkg/console/cmd/main.go b/pkg/console/cmd/main.go index 5ad7d02d..1e40a01b 100644 --- a/pkg/console/cmd/main.go +++ b/pkg/console/cmd/main.go @@ -1,19 +1,13 @@ package main import ( - "context" - "fmt" "log" - "os" - "path/filepath" - "time" "github.com/AudiusProject/audiusd/pkg/common" "github.com/AudiusProject/audiusd/pkg/console" "github.com/AudiusProject/audiusd/pkg/etl" "github.com/AudiusProject/audiusd/pkg/sdk" - "github.com/testcontainers/testcontainers-go" - "github.com/testcontainers/testcontainers-go/wait" + "go.uber.org/zap" ) func main() { @@ -21,19 +15,14 @@ func main() { logger.Info("Starting Console") - // Start postgres container with volume - dbURL, err := startPostgres(context.Background()) - if err != nil { - log.Fatalf("Failed to start postgres: %s", err) - } + // Connect to postgres from Makefile (port 5444) + dbURL := "postgres://postgres:postgres@0.0.0.0:5444/audiusd?sslmode=disable" logger.Info("pgURL", "url", dbURL) - // wait for postgres to be ready - time.Sleep(5 * time.Second) - auds := sdk.NewAudiusdSDK("rpc.audius.engineering") + auds := sdk.NewAudiusdSDK("creatornode.audius.co") - etl := etl.NewETLService(auds.Core, nil) + etl := etl.NewETLService(auds.Core, zap.NewNop()) etl.SetDBURL(dbURL) etl.SetCheckReadiness(false) @@ -45,52 +34,3 @@ func main() { log.Fatal(err) } } - -func startPostgres(ctx context.Context) (string, error) { - pguser := "postgres" - pgpass := "postgres" - pgdb := "audiusd" - - // Get current working directory and create absolute path for postgres data - cwd, err := os.Getwd() - if err != nil { - return "", fmt.Errorf("failed to get current working directory: %w", err) - } - - postgresDataPath := filepath.Join(cwd, "tmp", "postgres-data") - - // Create the directory if it doesn't exist - if err := os.MkdirAll(postgresDataPath, 0755); err != nil { - return "", fmt.Errorf("failed to create postgres data directory: %w", err) - } - - req := testcontainers.ContainerRequest{ - Image: "postgres:15", - Name: "audiusd-console-postgres", - ExposedPorts: []string{"15432:5432/tcp"}, - Env: map[string]string{ - "POSTGRES_USER": pguser, - "POSTGRES_PASSWORD": pgpass, - "POSTGRES_DB": pgdb, - }, - WaitingFor: wait.ForListeningPort("5432/tcp"), - } - - postgresC, err := testcontainers.GenericContainer(ctx, testcontainers.GenericContainerRequest{ - ContainerRequest: req, - Started: true, - Reuse: true, - }) - if err != nil { - return "", fmt.Errorf("failed to start container: %w", err) - } - - host, err := postgresC.Host(ctx) - if err != nil { - return "", fmt.Errorf("failed to get container host: %w", err) - } - - // Use fixed port 15432 for consistent TablePlus connections - dsn := fmt.Sprintf("postgres://%s:%s@%s:15432/%s?sslmode=disable", pguser, pgpass, host, pgdb) - return dsn, nil -} diff --git a/pkg/console/console.go b/pkg/console/console.go index 3fd08c3f..8c2a2b7a 100644 --- a/pkg/console/console.go +++ b/pkg/console/console.go @@ -58,11 +58,11 @@ func NewConsole(etl *etl.ETLService, e *echo.Echo, env string) *Console { switch env { case "prod", "production", "mainnet": - trustedNodeURL = "rpc.audius.engineering" + trustedNodeURL = "creatornode.audius.co" case "staging", "stage", "testnet": - trustedNodeURL = "rpc.staging.audius.engineering" + trustedNodeURL = "creatornode11.staging.audius.co" case "dev": - trustedNodeURL = "rpc.dev.audius.engineering" + trustedNodeURL = "node2.oap.devnet" } return &Console{ From ae0b7e9aa7de3f44a5735d9a644a4c7c235030ed Mon Sep 17 00:00:00 2001 From: Alec Savvy Date: Tue, 7 Oct 2025 22:23:11 -0600 Subject: [PATCH 2/8] darker colors --- pkg/console/assets/css/output.css | 165 +++--------------- pkg/console/templates/layouts/base.templ | 4 +- pkg/console/templates/layouts/base_templ.go | 6 +- pkg/console/templates/layouts/frame.templ | 10 +- pkg/console/templates/layouts/frame_templ.go | 4 +- pkg/console/templates/pages/account.templ | 20 +-- pkg/console/templates/pages/account_templ.go | 20 +-- pkg/console/templates/pages/block.templ | 6 +- pkg/console/templates/pages/block_templ.go | 6 +- pkg/console/templates/pages/blocks.templ | 10 +- pkg/console/templates/pages/blocks_templ.go | 10 +- pkg/console/templates/pages/dashboard.templ | 36 ++-- .../templates/pages/dashboard_templ.go | 32 ++-- pkg/console/templates/pages/hello_templ.go | 2 +- pkg/console/templates/pages/rollups.templ | 10 +- pkg/console/templates/pages/rollups_templ.go | 10 +- pkg/console/templates/pages/transaction.templ | 24 +-- .../templates/pages/transaction_templ.go | 24 +-- .../templates/pages/transactions.templ | 12 +- .../templates/pages/transactions_templ.go | 12 +- pkg/console/templates/pages/validator.templ | 10 +- .../templates/pages/validator_templ.go | 10 +- pkg/console/templates/pages/validators.templ | 34 ++-- .../templates/pages/validators_templ.go | 60 ++++--- .../templates/pages/validators_uptime.templ | 36 ++-- .../pages/validators_uptime_templ.go | 36 ++-- pkg/console/templates/string.templ | 8 +- pkg/console/templates/string_templ.go | 26 +-- pkg/console/templates/time.templ | 4 +- pkg/console/templates/time_templ.go | 18 +- 30 files changed, 285 insertions(+), 380 deletions(-) diff --git a/pkg/console/assets/css/output.css b/pkg/console/assets/css/output.css index e28294cc..c5eff3b5 100644 --- a/pkg/console/assets/css/output.css +++ b/pkg/console/assets/css/output.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { @@ -12,7 +12,6 @@ --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); - --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-orange-100: oklch(95.4% 0.038 75.164); @@ -61,7 +60,7 @@ --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); - --color-gray-950: oklch(13% 0.028 261.692); + --color-stone-700: oklch(37.4% 0.01 67.558); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; @@ -88,7 +87,6 @@ --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-wide: 0.025em; - --tracking-wider: 0.05em; --leading-relaxed: 1.625; --radius-sm: 0.25rem; --radius-md: 0.375rem; @@ -235,6 +233,9 @@ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } :-moz-ui-invalid { box-shadow: none; } @@ -258,9 +259,6 @@ .absolute { position: absolute; } - .fixed { - position: fixed; - } .relative { position: relative; } @@ -273,9 +271,6 @@ .top-0 { top: calc(var(--spacing) * 0); } - .top-1 { - top: calc(var(--spacing) * 1); - } .top-1\/2 { top: calc(1/2 * 100%); } @@ -300,9 +295,6 @@ .bottom-full { bottom: 100%; } - .left-1 { - left: calc(var(--spacing) * 1); - } .left-1\/2 { left: calc(1/2 * 100%); } @@ -423,9 +415,6 @@ .h-5 { height: calc(var(--spacing) * 5); } - .h-6 { - height: calc(var(--spacing) * 6); - } .h-8 { height: calc(var(--spacing) * 8); } @@ -450,9 +439,6 @@ .w-0 { width: calc(var(--spacing) * 0); } - .w-1 { - width: calc(var(--spacing) * 1); - } .w-1\/2 { width: calc(1/2 * 100%); } @@ -495,9 +481,6 @@ .w-4\/5 { width: calc(4/5 * 100%); } - .w-5 { - width: calc(var(--spacing) * 5); - } .w-5\/6 { width: calc(5/6 * 100%); } @@ -510,9 +493,6 @@ .w-10 { width: calc(var(--spacing) * 10); } - .w-11 { - width: calc(var(--spacing) * 11); - } .w-11\/12 { width: calc(11/12 * 100%); } @@ -552,30 +532,16 @@ .flex-none { flex: none; } - .flex-shrink { - flex-shrink: 1; - } .flex-shrink-0 { flex-shrink: 0; } .table-auto { table-layout: auto; } - .border-collapse { - border-collapse: collapse; - } - .-translate-x-1 { - --tw-translate-x: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } - .-translate-y-1 { - --tw-translate-y: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); @@ -604,9 +570,6 @@ .cursor-pointer { cursor: pointer; } - .resize { - resize: both; - } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -698,13 +661,6 @@ margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-2 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); - } - } .space-x-3 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -719,13 +675,6 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-6 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); - } - } .truncate { overflow: hidden; text-overflow: ellipsis; @@ -811,18 +760,12 @@ .border-gray-700 { border-color: var(--color-gray-700); } - .border-red-400 { - border-color: var(--color-red-400); - } .border-red-500 { border-color: var(--color-red-500); } .border-transparent { border-color: transparent; } - .border-white { - border-color: var(--color-white); - } .border-white\/20 { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -832,9 +775,6 @@ .border-t-gray-900 { border-top-color: var(--color-gray-900); } - .bg-black { - background-color: var(--color-black); - } .bg-black\/20 { background-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -914,27 +854,15 @@ --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-r { - --tw-gradient-position: to right in oklab; - background-image: linear-gradient(var(--tw-gradient-stops)); - } .from-gray-50 { --tw-gradient-from: var(--color-gray-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } - .from-white { - --tw-gradient-from: var(--color-white); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } .via-gray-50 { --tw-gradient-via: var(--color-gray-50); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } - .to-gray-100 { - --tw-gradient-to: var(--color-gray-100); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); @@ -969,9 +897,6 @@ .px-30 { padding-inline: calc(var(--spacing) * 30); } - .py-0 { - padding-block: calc(var(--spacing) * 0); - } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } @@ -1142,9 +1067,6 @@ .text-red-600 { color: var(--color-red-600); } - .text-red-700 { - color: var(--color-red-700); - } .text-red-800 { color: var(--color-red-800); } @@ -1187,10 +1109,6 @@ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } @@ -1204,10 +1122,6 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1450,52 +1364,29 @@ border-top-color: var(--color-gray-700); } } - .dark\:bg-black { + .dark\:bg-\[\#000000\] { @media (prefers-color-scheme: dark) { - background-color: var(--color-black); + background-color: #000000; } } - .dark\:bg-blue-900 { + .dark\:bg-\[\#141414\] { @media (prefers-color-scheme: dark) { - background-color: var(--color-blue-900); - } - } - .dark\:bg-gray-100 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-100); - } - } - .dark\:bg-gray-600 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-600); - } - } - .dark\:bg-gray-700 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-700); - } - } - .dark\:bg-gray-800 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-800); + background-color: #141414; } } - .dark\:bg-gray-800\/90 { + .dark\:bg-\[\#141414\]\/90 { @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent); - } + background-color: color-mix(in oklab, #141414 90%, transparent); } } - .dark\:bg-gray-900 { + .dark\:bg-blue-900 { @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-900); + background-color: var(--color-blue-900); } } - .dark\:bg-gray-950 { + .dark\:bg-gray-100 { @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-950); + background-color: var(--color-gray-100); } } .dark\:bg-green-900 { @@ -1518,6 +1409,11 @@ background-color: var(--color-red-900); } } + .dark\:bg-stone-700 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-stone-700); + } + } .dark\:from-gray-800 { @media (prefers-color-scheme: dark) { --tw-gradient-from: var(--color-gray-800); @@ -1531,12 +1427,6 @@ --tw-gradient-stops: var(--tw-gradient-via-stops); } } - .dark\:to-gray-900 { - @media (prefers-color-scheme: dark) { - --tw-gradient-to: var(--color-gray-900); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - } .dark\:\!text-gray-400 { @media (prefers-color-scheme: dark) { color: var(--color-gray-400) !important; @@ -1664,6 +1554,15 @@ } } } + .dark\:hover\:bg-stone-700 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-stone-700); + } + } + } + } .dark\:hover\:\!text-gray-300 { @media (prefers-color-scheme: dark) { &:hover { @@ -1927,11 +1826,6 @@ inherits: false; initial-value: 0 0 #0000; } -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} @property --tw-blur { syntax: "*"; inherits: false; @@ -2094,7 +1988,6 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; - --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; diff --git a/pkg/console/templates/layouts/base.templ b/pkg/console/templates/layouts/base.templ index 1ed38475..2b6ef5dd 100644 --- a/pkg/console/templates/layouts/base.templ +++ b/pkg/console/templates/layouts/base.templ @@ -4,7 +4,7 @@ import "fmt" templ Base(pageTitle string) { - { fmt.Sprintf("%s | Audius Explorer", pageTitle) } + { fmt.Sprintf("%s | Open Audio Explorer", pageTitle) } @@ -15,7 +15,7 @@ templ Base(pageTitle string) { - + @Frame(pageTitle) { { children... } } diff --git a/pkg/console/templates/layouts/base_templ.go b/pkg/console/templates/layouts/base_templ.go index 89ae1c1d..71f38c2d 100644 --- a/pkg/console/templates/layouts/base_templ.go +++ b/pkg/console/templates/layouts/base_templ.go @@ -36,15 +36,15 @@ func Base(pageTitle string) templ.Component { return templ_7745c5c3_Err } var templ_7745c5c3_Var2 string - templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s | Audius Explorer", pageTitle)) + templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s | Open Audio Explorer", pageTitle)) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/base.templ`, Line: 7, Col: 57} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/base.templ`, Line: 7, Col: 61} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/pkg/console/templates/layouts/frame.templ b/pkg/console/templates/layouts/frame.templ index 2c15d422..4438fbd4 100644 --- a/pkg/console/templates/layouts/frame.templ +++ b/pkg/console/templates/layouts/frame.templ @@ -14,11 +14,11 @@ templ Frame(pageTitle string) {
Audius Logo -
Audius Explorer
+
Open Audio Explorer
-
+
Dashboard Validators Uptime @@ -34,7 +34,7 @@ templ Frame(pageTitle string) {
@@ -52,7 +52,7 @@ templ Frame(pageTitle string) {
-
+

Recent Proposers