Skip to content

feat(currency-info): revamped new-UI token info layout - #583

Closed
bmc08gt wants to merge 1 commit into
feat-pushable-buy-flowfrom
feat-currency-info-v2
Closed

feat(currency-info): revamped new-UI token info layout#583
bmc08gt wants to merge 1 commit into
feat-pushable-buy-flowfrom
feat-currency-info-v2

Conversation

@bmc08gt

@bmc08gt bmc08gt commented Aug 15, 2026

Copy link
Copy Markdown
Collaborator

Revamps the token/currency info page for the new UI (BetaFlags.newUI), per the Figma frames 9121-14267, 9137-9119, 9137-9343 and the notes below them. The legacy layout is untouched for the old UI.

Stacked on #584 (pushable buy flow). Review that one first; this retargets to main once it merges.

Layout (top → bottom)

  • Hero bill card — reuses TokenCardView. Balance + appreciation pill when held; identity only when not.
  • Action tiles — Give / Convert / Withdraw, or a single Get when the token isn't held.
  • Recent — per-token activity preview (held tokens only); header opens the full history.
  • Market Cap — reuses CurrencyInfoMarketCapSection as-is (value + monthly delta live inside the interactive chart).
  • About — extracted into a reusable CurrencyInfoAboutSection (keeps ExpandableText expand/collapse) + social links.
  • Created-at footer.

Title bar

  • Leading Liquid Glass pill (icon, name, market cap) that appears only once the hero card's own title scrolls under the bar, tracked via onScrollGeometryChange.
  • The item is faded rather than inserted/removed — churning toolbar items mid-transition wedges nav-bar layout.
  • The capsule is drawn by the label (glassEffect(.regular, in: .capsule)) instead of the toolbar's platter: the system platter hugs its content and swallows most of the trailing inset the spec calls for. Measured against the spec — height 36pt (spec ~37), width 112pt (~107), trailing gap 21pt.
  • Label uses semantic .primary/.secondary so the glass applies the system's vibrancy and stays legible over a bright bill card scrolling beneath.
  • Top scroll edge set to .soft, so content fades under the bar instead of meeting a hard line. The bar background is deliberately left in place — hiding it removes the surface that effect renders into.

Behaviour

  • USDF / Dollars: Convert + Withdraw only (Give ships separately), no market-cap chart, no created date, not shareable; About sits under Recent. Title uses the mint's name, so it reads "Dollars".
  • Actions: Give → .give(mint); Convert / Get → the pushed buy flow (.buyCurrency, feat(buy): allow the buy flow to be pushed onto a host stack #584); Withdraw → .withdrawCurrency(mint), pre-selected.
  • Top-right keeps the existing share button (no overflow menu); hidden for USDF.
  • Per-token Recent loads through the view model (loadRecentActivities), keeping DB access out of the view.
  • Spacing on this screen and the wallet snaps to the 4pt grid (2/6/10 → 4/8/12).

Fixes found while iterating on device

  • Horizontal scrolling — the market-cap section cancelled the stack's inset with padding(.horizontal, -20), making that row wider than the viewport and letting the page pan sideways. Insets are now applied per section; the chart still bleeds edge to edge.

Testing

Built and run on the iPhone 17 simulator and on device (iOS 27). Driven with Maestro:

  • All three variants render correctly (held community token, USDF, not-held).
  • Title pill hidden at rest, revealed on scroll; measured against the spec.
  • Horizontal swipe now produces a pixel-identical frame (was panning); chart still spans the full width.

Follow-ups (deliberately not here)

  • Apple-Wallet expand transition from the wallet card (needs an overlay/matchedGeometryEffect architecture rather than a nav push).
  • Dollars "bill" hero art (rotate 90°, left = top-of-bill, USDF colours).
  • Recent rows reuse WalletActivityRow (single avatar) vs the frames' dual-token swap rows.
  • The token card's appreciation pill (6/2) is the one remaining off-grid value; left alone as it was ported to match the Figma card spec.

@bmc08gt
bmc08gt force-pushed the feat-currency-info-v2 branch from d7259f0 to eb529b7 Compare August 15, 2026 01:54
Behind BetaFlags.newUI, replace the currency info screen with the new layout:
a hero bill card, inline Give / Convert / Withdraw tiles (a single Get when the
token is not held), a per-token Recent preview, the reused market-cap chart,
the About block, and a created-at footer. The legacy layout is untouched.

- Actions: Give -> give; Convert / Get -> the pushed buy flow; Withdraw ->
  withdrawCurrency(mint) (pre-selected).
- USDF: Convert + Withdraw only, no market-cap chart, no created date, not
  shareable, and the title uses the mint name ("Dollars").
- Title bar: a leading Liquid Glass pill (icon, name, market cap) revealed only
  once the hero card title scrolls under the bar; the bar background is hidden
  and the top scroll edge softened so content scrolls beneath it.
- Reuse: CurrencyInfoMarketCapSection as-is; About extracted to
  CurrencyInfoAboutSection (keeps expand/collapse). Per-token Recent loads via
  the view model, keeping DB access out of the view.
- Spacing across this screen and the wallet snaps to the 4pt grid.

Builds on the pushable buy flow (.buyCurrency).
@bmc08gt
bmc08gt force-pushed the feat-currency-info-v2 branch from 5319c4f to 257ae64 Compare August 15, 2026 14:11
@bmc08gt
bmc08gt changed the base branch from main to feat-pushable-buy-flow August 15, 2026 14:11
@bmc08gt
bmc08gt deleted the branch feat-pushable-buy-flow August 15, 2026 14:14
@bmc08gt bmc08gt closed this Aug 15, 2026
@bmc08gt

bmc08gt commented Aug 15, 2026

Copy link
Copy Markdown
Collaborator Author

Superseded by #585 — same branch, rebased onto main after #584 merged. GitHub auto-closed this PR when its base branch (feat-pushable-buy-flow) was deleted on merge, and a closed PR cannot be reopened or retargeted.

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