Skip to content

feat(wallet): v2 token cards + collapsing stack - #560

Merged
bmc08gt merged 6 commits into
feat/v2-ui-nav-shellfrom
feat/v2-ui-token-cards
Aug 12, 2026
Merged

bmc08gt merged 6 commits into
feat/v2-ui-nav-shellfrom
feat/v2-ui-token-cards

Conversation

@bmc08gt

@bmc08gt bmc08gt commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

What

Phase 2 of the v2 UI port (Android #1209): token cards + collapsing stack for the v2 Wallet tab, plus the fixes that came out of review.

Stacked on #559 (v2 nav shell) — review/merge that first; this targets it.

Changes

  • TokenCardView — bill-style card: horizontal gradient from the token's bill-customization colors, USDF gold, dark-green fallback; icon + name, appreciation pill, autosizing balance.
  • TokenCardStack — fanning deck that collapses into a tightening deck then scrolls off, driven by a scrolled-past offset. Reimplemented with offset placement (not SwiftUI's Layout) for the iOS 15 target.
  • WalletScreen — the v2 Wallet tab: big-balance header over the card stack, card tap → currency info, add-money, no top bar (per Figma).
  • Collapse tracking via UIScrollView.contentOffset (KVO) — SwiftUI GeometryReader preferences in scroll content only fire at layout, not during scroll, so the deck never collapsed; the KVO bridge (ScrollOffsetReader) updates every frame. Verified with real drag gestures (Maestro).
  • Tab bar sized to spec — 32pt icons, 58pt bar height, ~318pt pill width (Figma node 8966:1557).

Testing

  • xcodebuild build: SUCCEEDED.
  • Ran on simulator (logged-in): per-token gradients, USDF gold, always-on appreciation pills (zero → +$0.00), autosizing balances.
  • Collapse verified with Maestro real drag-scrolls — cards progressively deck at the top.

@bmc08gt
bmc08gt force-pushed the feat/v2-ui-token-cards branch 2 times, most recently from 57f65e0 to 0ff24cf Compare August 12, 2026 14:44
Port Android's TokenCard/TokenCardStack:

- TokenCardView — a bill-style card painting a horizontal gradient from the
  token's bill-customization colors (USDF's fixed gold, a dark-green fallback),
  with the token icon + name, an appreciation pill, and an autosizing balance.
- TokenCardStack — a fanning deck that collapses then scrolls off as the list
  scrolls, driven by a scrolled-past offset. Reimplemented with offset placement
  (not SwiftUI's Layout) to keep the iOS 15 deployment target.
- Session.billColors(for:) resolves a mint's stored bill palette.
The v2 Wallet tab now renders the big-balance header (reused BalanceHeaderButton
+ appreciation) over the collapsing TokenCardStack, tapping a card into currency
info, with an add-money affordance and empty state. Balances are projected to
card data once per change (resolving each token's bill colors) rather than per
body eval. HomeTabView's Wallet tab switches from the embedded BalanceScreen to
WalletScreen. The appreciation pill always shows; a rounds-to-zero value reads
as positive (+$0.00), never -$0.00.
- Hide the navigation bar on the v2 Wallet root (per Figma) so the balance
  header sits directly under the status bar; pushed destinations keep theirs.
- Rework the TokenCardStack scroll tracking from a named coordinate space (which
  wasn't updating scrolledPast, so the deck never collapsed) to global
  coordinates: an outer GeometryReader captures the fixed viewport top and the
  stack reports its global top as it scrolls, giving a reliable scrolled-past
  offset that drives the collapse.
The collapse never fired because a GeometryReader in scroll content only emits
its preference at layout time, not during scroll (confirmed: the offset
preference fired exactly once and stayed 0 through a full scroll) — so
scrolledPast was always 0. Drive it instead from the underlying
UIScrollView.contentOffset via KVO (ScrollOffsetReader), which updates every
scroll frame. The collapse threshold is the measured header height, so the deck
tightens once the stack reaches the top.
The bar was undersized: 26pt icons in a ~50pt bar. Match the Figma tab bar
(node 8966:1557) — 32pt icons in 50pt items (9pt vertical padding) inside the
4pt-padded capsule, for a 58pt overall height.
Inset the bar ~42pt per side (was 20pt) so it renders ~318pt wide on the 402pt
reference frame, matching the floating pill in the Figma.
@bmc08gt
bmc08gt force-pushed the feat/v2-ui-token-cards branch from 0ff24cf to 613d21c Compare August 12, 2026 14:53
@bmc08gt
bmc08gt merged commit de836d5 into main Aug 12, 2026
@bmc08gt
bmc08gt deleted the feat/v2-ui-token-cards branch August 27, 2026 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant