diff --git a/apps/web/k8s/overlays/hanzo/brand.json b/apps/web/k8s/overlays/hanzo/brand.json index 839ac88b..460a47bf 100644 --- a/apps/web/k8s/overlays/hanzo/brand.json +++ b/apps/web/k8s/overlays/hanzo/brand.json @@ -27,7 +27,7 @@ "faviconUrl": "/brands/hanzo.svg", "primaryColor": "#FFFFFF", "defaultChainId": 36963, - "supportedChainIds": [36963, 36911, 96369, 200200, 1, 42161, 8453, 137], + "supportedChainIds": [36963, 36911, 1, 42161, 8453, 137], "walletConnectProjectId": "", "insightsHost": "", "insightsApiKey": "", @@ -46,7 +46,7 @@ }, "chains": { "defaultChainId": 36963, - "supported": [36963, 36911, 96369, 200200, 1, 42161, 8453, 137] + "supported": [36963, 36911, 1, 42161, 8453, 137] }, "rpc": { "36963": "https://api.hanzo.ai/mainnet/ext/bc/C/rpc", diff --git a/apps/web/k8s/overlays/lux/brand.json b/apps/web/k8s/overlays/lux/brand.json index 7edd8bb8..943b02fd 100644 --- a/apps/web/k8s/overlays/lux/brand.json +++ b/apps/web/k8s/overlays/lux/brand.json @@ -27,7 +27,7 @@ "faviconUrl": "/brands/lux.svg", "primaryColor": "#FFFFFF", "defaultChainId": 96369, - "supportedChainIds": [96369, 96368, 200200, 36963, 36911, 494949, 1, 42161, 8453, 137, 43114], + "supportedChainIds": [96369, 96368, 1, 42161, 8453, 137, 43114], "walletConnectProjectId": "", "insightsHost": "", "insightsApiKey": "", @@ -46,7 +46,7 @@ }, "chains": { "defaultChainId": 96369, - "supported": [96369, 96368, 200200, 36963, 36911, 494949, 1, 42161, 8453, 137, 43114] + "supported": [96369, 96368, 1, 42161, 8453, 137, 43114] }, "rpc": { "96369": "https://api.lux.network/mainnet/ext/bc/C/rpc", diff --git a/apps/web/k8s/overlays/zoo/brand.json b/apps/web/k8s/overlays/zoo/brand.json index 79e1002f..c5c334a8 100644 --- a/apps/web/k8s/overlays/zoo/brand.json +++ b/apps/web/k8s/overlays/zoo/brand.json @@ -27,7 +27,7 @@ "faviconUrl": "/brands/zoo.svg", "primaryColor": "#FFFFFF", "defaultChainId": 200200, - "supportedChainIds": [200200, 200201, 96369, 36963, 1, 42161, 8453, 137], + "supportedChainIds": [200200, 200201, 1, 42161, 8453, 137], "walletConnectProjectId": "", "insightsHost": "", "insightsApiKey": "", @@ -46,7 +46,7 @@ }, "chains": { "defaultChainId": 200200, - "supported": [200200, 200201, 96369, 36963, 1, 42161, 8453, 137] + "supported": [200200, 200201, 1, 42161, 8453, 137] }, "rpc": { "200200": "https://api.zoo.network/rpc", diff --git a/apps/web/public/brands/hanzo.svg b/apps/web/public/brands/hanzo.svg index cf1a153a..8e8f240d 100644 --- a/apps/web/public/brands/hanzo.svg +++ b/apps/web/public/brands/hanzo.svg @@ -1,4 +1,10 @@ - - + + + + + + + + diff --git a/apps/web/public/brands/lux.svg b/apps/web/public/brands/lux.svg index 6f9b0063..c5d54897 100644 --- a/apps/web/public/brands/lux.svg +++ b/apps/web/public/brands/lux.svg @@ -1,4 +1,5 @@ - - + + + diff --git a/apps/web/public/brands/zoo.svg b/apps/web/public/brands/zoo.svg index f40b404c..312b87ae 100644 --- a/apps/web/public/brands/zoo.svg +++ b/apps/web/public/brands/zoo.svg @@ -1,4 +1,16 @@ - - - + + + + + + + + + + + + + + + diff --git a/apps/web/src/lib/gui-stub.tsx b/apps/web/src/lib/gui-stub.tsx index 23fd5110..b10d390a 100644 --- a/apps/web/src/lib/gui-stub.tsx +++ b/apps/web/src/lib/gui-stub.tsx @@ -20,7 +20,17 @@ type CSSish = React.CSSProperties & { [k: string]: any } function tokenize(v: any): string | undefined { if (v === undefined || v === null) return undefined if (typeof v === "number") return `${v}px` - if (typeof v === "string" && v.startsWith("$")) return `var(--${v.slice(1)})` + if (typeof v === "string" && v.startsWith("$")) { + const t = v.slice(1) + // Numeric Tamagui space/size token ($3, $6, $10, $0.5) → px on a 4px + // scale. These are NOT CSS vars (loadBrandConfig only sets named color + // vars like --accent1), so mapping them to `var(--3)` silently dropped + // every gap/padding/fontSize — the source of the "button blob" (no gap) + // and top-anchored card. Resolve them to real pixels instead. + if (/^-?\d*\.?\d+$/.test(t)) return `${parseFloat(t) * 4}px` + // Named theme token ($neutral2, $accent1) → CSS var set by loadBrandConfig. + return `var(--${t})` + } return String(v) } diff --git a/apps/web/src/screens/auth/Welcome.tsx b/apps/web/src/screens/auth/Welcome.tsx index e2894b79..4c31f3cc 100644 --- a/apps/web/src/screens/auth/Welcome.tsx +++ b/apps/web/src/screens/auth/Welcome.tsx @@ -1,13 +1,70 @@ /** * First-launch splash. Two paths: create new wallet, or import existing. * Foundation router mounts this at /auth. + * + * Styled with plain inline styles + brand CSS vars (the same pattern as + * AppShell / Callback / Download) rather than @hanzo/gui primitives: the + * gui-stub's Tamagui token props do not carry a working flex/centering + * contract, which left the card top-anchored and the CTAs gap-less. This + * screen owns its layout so it renders correctly on every brand + breakpoint. */ -import { Link } from "react-router-dom" -import { Button, Card, Text, YStack } from "@hanzo/gui" +import { useNavigate } from "react-router-dom" import { brand, getIamConfig } from "@luxfi/wallet-brand" import { useSession } from "../../store/session" +const wrap: React.CSSProperties = { + // Fill the AppShell content row (viewport minus header + main padding) and + // center the card so there is no empty void beneath it on desktop. + minHeight: "calc(100vh - 140px)", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + gap: 20, + padding: 16, + boxSizing: "border-box", +} + +const card: React.CSSProperties = { + width: "100%", + maxWidth: 380, + display: "flex", + flexDirection: "column", + gap: 12, + padding: 24, + borderRadius: 14, + background: "var(--surface2, #f9f9f9)", + border: "1px solid var(--surface3, #e5e5e5)", + boxSizing: "border-box", +} + +const buttonBase: React.CSSProperties = { + width: "100%", + minHeight: 44, + padding: "12px 16px", + borderRadius: 10, + fontSize: 15, + fontWeight: 600, + cursor: "pointer", + fontFamily: "inherit", +} + +const primaryButton: React.CSSProperties = { + ...buttonBase, + background: "var(--accent1, #000)", + color: "var(--surface1, #fff)", + border: "1px solid var(--accent1, #000)", +} + +const outlinedButton: React.CSSProperties = { + ...buttonBase, + background: "transparent", + color: "var(--neutral1, #111)", + border: "1px solid var(--surface3, #d4d4d4)", +} + export default function Welcome() { + const navigate = useNavigate() const login = useSession((s) => s.login) const status = useSession((s) => s.status) // Account login is additive — only offered when the brand has an IdP wired. @@ -16,42 +73,48 @@ export default function Welcome() { const idpName = brand.shortName || brand.name || "Lux" return ( - - - {brand.walletName || "▼"} - - +
+ {brand.logoUrl ? ( + + ) : null} +

+ {brand.walletName || "Wallet"} +

+

{brand.description || "Self-custodial wallet for the Lux ecosystem."} - +

- - - - - - - - - {accountLoginEnabled ? ( - - ) : null} - - - +
+ + + {accountLoginEnabled ? ( + + ) : null} +
+
) }