feat(checkout): embed checkout inline in playground and polish funding UI#830
Merged
Merged
Conversation
…g UI - widget-checkout: add an `inline` (non-modal) render mode to LifiWidgetCheckout/CheckoutModal so the checkout can be embedded in a page instead of a centered modal overlay; hide the header close button in inline mode. The inline panel inherits the host widget theme's card appearance (radius, drop-shadow) while keeping its own layout so the internal scroll works on tall pages. - widget-checkout: fix the connected "Pay from Wallet" icon — resolve it via getConnectorIcon (falls back to the hosted wallet SVG), and render the disconnected-style GenericIconWrap glyph when no icon is available. - widget-playground: render the checkout inline in the Checkout preview (replacing the DEPOSIT button placeholder) and default the checkout destination to USDC on Base.
|
Contributor
✅ E2E Dev Smoke — passing
4 passed · 0 failed · 0 skipped · 22s |
Contributor
E2E Playground results
Details
📥 Download full HTML report (open the run → Artifacts → |
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.
Which Linear task is linked to this PR?
N/A
Why was it implemented this way?
Three small, related improvements to the checkout experience (all in private packages — no changeset needed):
Inline checkout embed (playground). The playground's Checkout preview showed a
DEPOSITbutton that opened the checkout as a centered modal overlay (which dimmed the whole page).@lifi/widget-checkoutwas modal-only, so a new opt-ininlineprop was added toLifiWidgetCheckout/CheckoutModalthat renders the panel in-flow (no<Modal>/backdrop) and hides the header close button. The inline panel inherits only the host widget theme's card appearance (theme.container→ border-radius + drop-shadow), matching the standard widget, while keeping its own structural layout (display:flex/maxHeight/overflow:hidden) so the internal scroll chain still engages on tall pages (e.g. the deposit-address screen). Spreading the wholetheme.containerwas avoided because it pulls in layout props (display/height) that broke the flex-scroll and clipped tall content.Connected wallet icon fix. The connected "Pay from Wallet" row read
account.connector?.icon, which isundefinedfor the widget's custom EVM SDK connectors (metaMask/coinbase/walletConnect/…), leaving a near-invisible avatar. It now resolves through the existinggetConnectorIconhelper (getWalletIcon(id) || connector.icon) and, when no icon is available, renders the sameGenericIconWrapblack glyph used by the disconnected state.Default checkout destination → USDC on Base (playground demo default).
Visual showcase (Screenshots or Videos)
Checkout now renders inline in the playground preview as a proper elevated card (white-on-grey, 16px radius,
drop-shadow(0 8px 32px rgba(0,0,0,0.08))— identical to the standard widget), with a working close-button-less header, correct connected-wallet icon, and internal scrolling on tall pages.Checklist before requesting a review
Verification:
check:types+ Biome pass;@lifi/widget-checkouttests 196/196; inline embed, shadow, scroll, and the connected wallet icon confirmed in the running playground.