Skip to content

feat(widget): add redesigned amount input cards for jumper modes#776

Draft
effie-ms wants to merge 3 commits into
feat/header-tabs-storefrom
feat/amount-input-cards
Draft

feat(widget): add redesigned amount input cards for jumper modes#776
effie-ms wants to merge 3 commits into
feat/header-tabs-storefrom
feat/amount-input-cards

Conversation

@effie-ms

@effie-ms effie-ms commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Which Linear task is linked to this PR?

EMB-452

Why was it implemented this way?

This adds a redesigned amount input as Send/Receive cards, rendered exclusively in jumper-simple and jumper-advanced widget modes. All other modes (default, split, refuel, custom) continue using the existing SelectChainAndToken + AmountInput unchanged, so the redesign is fully scoped to the new modes and carries no regression risk for existing integrators.

  • Send card (SendAmountCard): large editable input with adaptive font sizing, token pill selector, percentage chips (25/50/75/Max), fiat/token toggle, and wallet balance display.
  • Receive card (ReceiveAmountCard): read-only amount from the best route with fiat/token toggle, token pill selector, and skeleton loading state.
  • Swap button (SwapButton): vertical swap arrow between the cards (hidden in refuel mode), replicating ReverseTokensButton logic rather than duplicating it.
  • The cards are composed via AmountInputCardPair and rendered conditionally from MainPage based on mode, keeping the existing layout path untouched for other modes.

New components

  • AmountInputCard/SendAmountCard, ReceiveAmountCard, AmountInputCardPair, PercentageChips, BalanceDisplay, FiatValueToggle, shared styles
  • SwapButton/ — swap arrow with overlapping card design
  • TokenPillButton/ — compact pill-shaped token selector with selected/unselected variants

Builds on the Jumper modes / HeaderTabsStore work in #775 (EMB-451); this branch is based on feat/header-tabs-store.

Visual showcase (Screenshots or Videos)

TODO: add screenshots/GIFs of Send & Receive cards in jumper-simple and jumper-advanced (light + dark mode).

Test plan

  • Visual check in playground with jumper-simple mode — switch all tabs (Swap & Bridge, Private, Gas)
  • Visual check in playground with jumper-advanced mode — switch all tabs (Swap, Bridge, Limit)
  • Token selection via pill button navigates to picker and displays selected token
  • Swap button reverses from/to tokens; hidden on Gas tab
  • Percentage chips set correct amounts with gas deduction on native tokens
  • Fiat/token toggle works on both Send and Receive cards
  • Large numbers auto-scale font size without changing card height
  • Non-jumper modes (default, split, refuel, custom) render unchanged
  • Dark mode renders correctly

Checklist before requesting a review

  • I have performed a self-review and testing of my code.
  • This pull request is focused and addresses a single problem.
  • If this PR modifies the Widget API or adds new features that require documentation, I have updated the documentation in the public-docs repository.

@effie-ms effie-ms marked this pull request as draft June 11, 2026 11:39
@changeset-bot

changeset-bot Bot commented Jun 12, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 53fa01e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@effie-ms effie-ms self-assigned this Jun 15, 2026
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