-
Notifications
You must be signed in to change notification settings - Fork 629
[MNY-341] Payment Details UI improvements #8576
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 9e13bd0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis pull request updates the Payment Details UI components in the Bridge and ConnectWallet widgets, applying a redesigned visual style using updated design tokens for spacing, borders, and typography. Additionally, test data for payment methods is restructured to match the new PaymentMethod data shape. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (8)
🧰 Additional context used📓 Path-based instructions (6)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
packages/thirdweb/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{js,jsx,ts,tsx,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.stories.tsx📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.stories.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (6)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (2)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (15)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
size-limit report 📦
|
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8576 +/- ##
==========================================
+ Coverage 54.47% 54.50% +0.03%
==========================================
Files 922 922
Lines 61361 61386 +25
Branches 4149 4171 +22
==========================================
+ Hits 33425 33459 +34
+ Misses 27835 27826 -9
Partials 101 101
🚀 New features to boost your workflow:
|

PR-Codex overview
This PR focuses on improving the Payment Details UI for bridge widget components in the
thirdwebpackage, enhancing layout, styling, and functionality.Detailed summary
paddinginTokenBalanceRow.tsx.OutlineWalletIconwith a styledContainerinWalletRow.tsx.borderRadiusandborderBottomstyles inPaymentOverview.tsx.StepConnectorArrowstyles and addediconSizeforChevronDownIcon.OutlineWalletIcondefinition to acceptsize,color, andstyleprops.cryptoPaymentMethodandethCryptoPaymentMethodstructures for clarity.PaymentDetails.tsxstyles, includinggap,borderRadius, and button styles.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.