Claude/wallet deposit screens bb5155 - #2526
Merged
Merged
Conversation
"Add funds" used to open one long list of every funding method. It now opens a short "Deposit with" fork — Crypto or Cash — and each branch owns the methods underneath it: - Crypto -> "Receive crypto": the deposit address, plus connect wallet on desktop (thirdweb's connect modal is desktop-only, so a phone is offered the address alone). - Cash -> "Deposit with cash": USD through the virtual account, the local currencies through the onramp. Being a fork and nothing else is what lets the first step be a drawer on a phone: ResponsiveModal gains `mobilePresentation="drawer"`, backed by a new `nativePresentation` on DialogContent so iOS and Android anchor to the bottom the way web-mobile already could. Desktop is unchanged — both presentations are the usual centred modal there. The later steps keep the full-height sheet. The deposit address screen is rebuilt around chain and currency pills. The address is the user's Safe and is the same on every chain, so the pills do not change it: they decide which currencies are on offer, what the minimum transfer is, and which chain the QR is labelled for. Minimums live in one table in WalletDepositAddress/constants.ts — Ethereum asks for more because crediting a deposit costs gas on the source chain, and assets that are not worth ~$1 a unit carry their own override. Also narrows the disconnect reset in useDepositOption. It returned the modal to step 1 whenever thirdweb reported `disconnected` — the default state on desktop for anyone who has never connected a wallet — for every step not on a hand-maintained exclusion list, which the new screens would have been ejected from immediately. It now names the three steps that actually read the connection, so bank transfer, the onramp and the deposit address stay put. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Design QA on the deposit address screen: - The QR is clipped to a 20px radius instead of ending in hard corners. It gets a quiet zone to make room for that: the library keeps the element at `size` and scales the modules down, so the radius bites into background rather than into a finder pattern, which a scanner has to be able to locate. - A hairline divider separates the QR from the address. The card's inset moved from the card onto each half so the divider runs its full width. - The block under the card gained the padding the design gives it: 24px between the card, the copy and the buttons, and "Learn about deposits" joined the copy it belongs to rather than floating between the two. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The design puts each "Deposit with" row's icon cluster on its own line above the title, not beside it. Beside it, the cluster — which is three overlapping circles, far wider than the single glyph CardFundRow is built for — left the subtitle about 200px and wrapped "Transfer from your bank account or with local ramps" onto two cramped lines. Stacked, the text has the full width of the row. That is a different shape from CardFundRow rather than a variant of it, so it is its own component instead of a layout flag on the one the card and savings flows share. Desktop also goes from 420px to 480px. At 420 the 40px desktop inset left the content narrower than it gets on a phone, which is what made these screens look squeezed on the widest viewport. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…h rails Three from design review: - The picker list is positioned over the content instead of expanding in flow. Opening it used to push the QR and everything under it down the screen, which moved the thing the user is looking at. It now floats under the pills, lifted over the QR card with zIndex (the card is a later sibling and would otherwise paint on top), and tapping what it covers dismisses it. - The currency rows were showing no rails at all. They were reading only TransFi's live payment config, which is a request that can be pending, geo-refused or unavailable — and a currency row with no chips reads as a currency with no way to pay for it. The committed corridor list, the one the card funding screen already shows, is now the baseline and the live config refines it. - Desktop gets 24px more under the options on every screen in the flow; they end on a card or a button, and that sat too close to the edge. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
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
1 participant
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.
No description provided.