feat(design): iOS-26 glass pass — AssetPage, dashboards, dialogs#269
Merged
Conversation
… rows, overlays
New CSS utilities scoped to .v3-* class names so existing screens stay
untouched. Each token has a single responsibility:
.v3-glass-card — page-level surface (low-opacity fill + blur).
.v3-glass-card-overlay — popover/dropdown variant with near-solid fill
so menus over busy content stay legible.
.v3-glass-pill — pill-shaped glass for toggles + action buttons.
.v3-glass-row — hairline row separator + hover state for lists.
.v3-glass-chip — inline chip surface for tags / status badges.
.v3-glass-orb — radial glow utility for icon orbs.
Consumed by AssetPage, DefiPositionsPanel, EvmAddressSelector, PinEntry,
SendForm, WalletSelector and the new ChainPickerDialog. Background of the
page itself stays the existing graphite — only the surfaces shift.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
… pills Header - Wrap the chain identity row in its own .v3-glass-card so it reads as a pill alongside the rest of the panels. - Synced badge moves inline next to the chain name (.v3-glass-chip), the duplicate ETH symbol and right-column duplicate badge are removed. - Balance + USD now sit on one baseline-aligned row (tabular-nums) with a smaller chain symbol and a `title` tooltip showing full precision. - Multi-address total folds into a single subdued mono line below. - Chain icon: drop the dark backplate and colored glow → hairline ring. Action row - Receive/Send/Swap/Privacy pills neutralised — no brand colours. Inactive: muted text on transparent; active: white text on 6% fill with a 14% hairline; hover: subtle white-4% fill. Icons inherit currentColor. - Account selector now lives inline with the pill row (compact variant) so the AssetPage is tighter vertically. Content + lists - Main content card uses .v3-glass-card (replaces the linear-gradient ink stack). - Tokens + DeFi positions render inside .v3-glass-card surfaces. - Per-row treatment: hard bordered boxes → transparent rows with a .v3-glass-row hairline + a 2px chain-tint left edge for funded rows, orange for spam, red for hidden. Gap drops to 0 so rows feel like one table. DefiPositionsPanel - Glass-row layout to match tokens. - Surfaces absolute amount + USD side by side: looks at pos.balance first, falls back to single-constituent token amount, then combines multi-leg labels. Full-precision balance available via `title` on hover. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…unts EvmAddressSelector - New `compact` prop renders a single trigger button shaped like the design study (#N · Account #N · 0x…), opens a glass popover listing every account with ✓ on the selected one and an "+ Add account" row. - Click-outside and Escape close the menu. Address snippets use a brighter shade (--text-2) so they stay legible on the overlay variant. - Default (chip-row) layout is preserved for any other caller. DefiPositionToken / server merge - Extend the shared DefiPositionToken shape with optional `balance` and `balanceUsd` so the panel can surface the absolute amount alongside USD when the server reports per-constituent figures. - Forward the new fields in both server-merge attribution sites in src/bun/index.ts; older server responses degrade to USD-only. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
SendForm - Available balance is now centered, label-as-overline; the black-card surround is gone — the figure itself is the focal point. Balance is passed through formatBalance + carries a `title` tooltip with full precision. - Recipient / Amount / labeled inputs lose their solid ink-0 fills. Each input is transparent with a hairline border that brightens on hover and lifts to gold on focus (subtle white-2% inner fill while focused). Same treatment applied to the shared LabeledInput helper. PinEntry - Backdrop: heavier blur (20px) + low-opacity graphite scrim instead of the flat gray 30%-black wash. Content behind reads as soft-frosted. - Modal card: true glass — translucent fill (linear-gradient white tint over rgba(16,16,21,0.62)) + 32px backdrop blur + gold halo shadow. - PIN strip + 9-grid buttons: transparent fills, soft 10%-white borders, per-button backdrop blur so each cell is its own glass pill. Hover brings a gold-tinted glass; active still snaps to full gold. - Backspace pill matches the digit buttons; Unlock retains gold but gains a soft gold-glow on hover. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
WalletSelector - The dropdown blended into the sidebar behind it because the wallet rows share structure with chain rows (icon + label + hex + USD). Push the popover to a near-solid linear-gradient fill with a 28px backdrop blur, brighter border, layered drop shadow. - "WALLETS" header now sits above a hairline divider with a small wallet glyph + bolder type, so the menu reads as a distinct surface. App ambient glow - The full-screen radial behind everything was emitting a 22%-gold wash that read as a yellow cast across the whole UI. Drop the gold stop to 6% and the teal mid-stop to 3% so the lighting is still subtly warm without dominating. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…ck-only drill Sidebar - Hide built-in chains with zero balance. The current sidebar listed Monad, Hyperliquid, Mayachain et al as "No balance" filler rows; they now live behind a "+ Add a blockchain · N" tile at the end of the list. Picking one promotes it (sticks in sidebar) AND drills in. - Click is no longer a toggle: clicking the active chain stays drilled instead of unselecting. Use the explicit "All Chains" row to leave. ChainPickerDialog (new) - Glass modal with a 2/3/4-col responsive grid of empty-balance chains (icon, name, symbol). Distinct from AddChainDialog, which keeps its role for adding *custom* EVM chains via Pioneer's registry. Drilled-chain center — aggregate fallback - When the selected EVM account is empty but the chain aggregate has funds on a different account, surface the aggregate USD + native total AND offer one-click "switch account" chips for each funded address. No more "$0.00 — No <chain> balance yet" when the sidebar clearly shows balance for the same chain. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Position bug - SwapDialog mounts INSIDE the AssetPage subtree, which used to set `transform: translateY(…)` via the .v3-page-enter animation. CSS spec says a non-`none` transform on an ancestor becomes the containing block for `position: fixed` descendants — so the dialog's `inset: 0` was being anchored to the AssetPage's box (which lives below the TopNav), making the dialog drop to the bottom half of the viewport. - Rewrite the .v3-page-enter keyframe to use opacity only — no transform on the page root ever. Fixed-position overlays mounted inside the page now anchor to the viewport again. Glass styling - Both SwapDialog branches (main dialog + "not supported" prompt) now use the same iOS-26 glass treatment as PinEntry: graphite scrim with 20px backdrop blur for the dim layer, translucent fill + blur(32px) saturate(160%) on the modal card, soft white border, layered drop shadow. Old `linear-gradient(ink-2 → ink-1)` + mint glow shadow retired. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…e USD - AssetSelector now stacks icon-over-symbol-over-name and centers the whole block within the column. Each token reads as a visual focal point of its half of the swap instead of a left-aligned cluster. - MAX button shrinks to match the ETH / \$ segmented selector's height (h="22px", py="0.5", lineHeight="1") so the action row reads as a single 22px-tall horizontal control instead of mismatched chips. - Amount input + ≈ USD-equivalent now sit side by side on one Flex. The converted value pulls right onto the same baseline (whiteSpace no-wrap so it doesn't break), and the click-to-flip-mode affordance is preserved. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Vendored from sktbrd's fork PR #265 (
sktbrd/keepkey-vault-defi@feat/asset-page-glass-style), rebased onto currentdevelop(post #267/#268 sign-gating merges) and brought into this repo. All 9 commits preserved with original authorship (@sktbrd / xvlad).What's in it
iOS-26 "glass" design pass:
.v3-glass-*) for cards, pills, rows, overlays (tokens.css)Rebase notes
shared/types.tsoverlaps develop, in a different region (feat(design): iOS-26 glass pass — AssetPage, dashboards, dialogs #265 addsDefiPosition.balance/balanceUsd~line 161; develop's fix(rest): gate message-sign routes through the Vault approval overlay #267 addedEthMessageDecodedInfo.standard~line 459). 3-way merge is automatic.minimatchbaseline error).Supersedes #265.