Skip to content

UI: withdrawal crypto flow - #67

Merged
piggydoughnut merged 26 commits into
mainfrom
ui/withdrawal-crypto
Oct 12, 2026
Merged

piggydoughnut merged 26 commits into
mainfrom
ui/withdrawal-crypto

Conversation

@piggydoughnut

@piggydoughnut piggydoughnut commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor

What this changes

Screenshot 2026-09-25 at 7 40 25 PM

How it was tested

Screenshots / recording (if any)

Checklist

  • pnpm typecheck and pnpm typecheck:packages pass
  • pnpm test passes
  • pnpm format:check passes (run pnpm format to fix)
  • pnpm build succeeds (and pnpm build:worker if the worker changed)
  • Scope is one concern, and unrelated changes are not bundled in
  • Docs/comments updated where the change touches behaviour, config, or an endpoint shape
  • No Co-Authored-By: trailers in commits (they fail the paritytech CLA check)
  • No secrets, seeds, or private keys added to the repo

Related

The designs cap a top-up at $5,000 ("Maximum 5,000 $CASH" on the Add
funds frame) but a withdrawal at $2,000, so withdrawalSelectorConfig
overrides only the maximum while provider, routes and minimum stay
shared.

groupAmountDigits writes the thousands-separated form every screen
shows, leaving the keypad ungrouped string as typed.
The top-up amount screen carried everything inline; the pieces any
amount screen needs now stand alone: the route pills, the fitted
amount display, the keypad (owning its disabled look), the tappable
purse pill, and FundingAmountShell — the frame of header, pills,
scrolling column, error band, keypad wiring and bottom-anchored CTA,
with the screen's own middle band coming in through a slot. The shell
guards the continue emit itself, so the gate never rests on the
button's disabled attribute alone.

The display and the pill speak CashAmount: the symbol and the
small-caps ticker come from the one treatment, so neither takes a
spelling prop, and the caret rides CashAmount's slot between the
number and the ticker. useAmountFit measures the one span the
treatment leaves — symbol, ticker and caret all ride the scale.

The route-availability rule moves next to the other selection rules as
isFundingRouteAvailable, read by every component instead of each
keeping its own. The shell screen takes an amount-screen component so
another flow can draw the same contract to its own frames.
WithdrawAmountScreen draws the shared shell to the withdrawal frames:
the amount in CashAmount's treatment, the purse pill offering the
balance as an amount the keypad can take, and the line underneath
naming whichever bound the amount broke.

assessWithdrawalAmount reads that line and the CTA gate from one
reading. The configured bounds come through fundingAmountStatus — the
same reading the shell's createFundingSelection takes — so the gate
and the shell can never drift on what the bounds mean; the function
keeps only what is its own: the empty/zero hint (which the shared
pipeline would file as a breach), the purse bound the shell does not
know, and the wording. The bounds report in the frames' order — the
configured maximum before the purse — and the gate fails closed while
the purse is unknown, open only where there is provably none.
usePurseBalance speaks in named states — unknown, none, known — so
loading and no-purse can never swap at the seam; the page maps each
state to its prop reading by name (unknown holds the pill's skeleton
and the gate closed, none shows no pill, only a known balance is
offered). A failed read retries on its own, 2s/5s/15s and then a 30s
walk, and once the quick ladder is spent the screen says so — "Your
balance couldn't be read. Retrying…" in the band the route errors take
— healing itself when a read lands.

The page re-reads the purse whenever the user returns from a package
or a watched withdrawal, so the pill never offers what a completed
withdrawal already took, and the purse's read state carries into the
launch skeleton so the column holds its shape while loading.
The notice line travels as the pieces CashAmount draws — lead, range
opener, figure — so the shell writes both screens' lines in the one
treatment, and the purse crosses as the base units usePurseBalance
read, truncated to the keypad's scale only at the gate and the pill.
@piggydoughnut
piggydoughnut marked this pull request as draft September 25, 2026 06:28
@github-actions

github-actions Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

pr67-getcash.paseo · logs

https://pr67-getcash.paseo.li

@piggydoughnut piggydoughnut changed the title UI/withdrawal crypto [UI: withdrawal input merge first] UI: withdrawal crypto flow Sep 25, 2026
@piggydoughnut
piggydoughnut marked this pull request as ready for review September 25, 2026 08:41
@piggydoughnut
piggydoughnut changed the base branch from ui/withdrawal to main September 29, 2026 23:00
@piggydoughnut piggydoughnut changed the title [UI: withdrawal input merge first] UI: withdrawal crypto flow UI: withdrawal crypto flow Sep 29, 2026
Comment thread app/components/withdraw/WithdrawJourneyScreen.vue
Comment thread app/components/withdraw/WithdrawJourneyScreen.vue
Comment thread app/components/withdraw/WithdrawSummaryScreen.vue Outdated

@minato-32 minato-32 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM !!

@piggydoughnut
piggydoughnut merged commit ab53f11 into main Oct 12, 2026
5 checks passed
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.

2 participants