Skip to content

Conversation

@MananTank
Copy link
Member

@MananTank MananTank commented Dec 18, 2025


PR-Codex overview

This PR focuses on improving the Payment Details UI for bridge widget components in the thirdweb package, enhancing layout, styling, and functionality.

Detailed summary

  • Adjusted padding in TokenBalanceRow.tsx.
  • Replaced OutlineWalletIcon with a styled Container in WalletRow.tsx.
  • Updated borderRadius and borderBottom styles in PaymentOverview.tsx.
  • Enhanced StepConnectorArrow styles and added iconSize for ChevronDownIcon.
  • Modified OutlineWalletIcon definition to accept size, color, and style props.
  • Refactored cryptoPaymentMethod and ethCryptoPaymentMethod structures for clarity.
  • Updated PaymentDetails.tsx styles, including gap, borderRadius, and button styles.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

  • Bug Fixes
    • Improved bridge payment details UI with enhanced spacing, borders, and styling
    • Updated wallet row display with better visual presentation when disconnected
    • Refined typography and color usage across payment interface components
    • Enhanced border radius and padding consistency throughout bridge widget

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Dec 18, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
docs-v2 Ready Ready Preview, Comment Dec 18, 2025 7:50pm
nebula Ready Ready Preview, Comment Dec 18, 2025 7:50pm
thirdweb_playground Ready Ready Preview, Comment Dec 18, 2025 7:50pm
thirdweb-www Ready Ready Preview, Comment Dec 18, 2025 7:50pm
wallet-ui Ready Ready Preview, Comment Dec 18, 2025 7:50pm

@linear
Copy link

linear bot commented Dec 18, 2025

@changeset-bot
Copy link

changeset-bot bot commented Dec 18, 2025

🦋 Changeset detected

Latest commit: 9e13bd0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
thirdweb Patch
@thirdweb-dev/nebula Patch
@thirdweb-dev/wagmi-adapter Patch
wagmi-inapp Patch

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 18, 2025

Walkthrough

This 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

Cohort / File(s) Summary
Bridge Payment UI Styling
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
Updated button and container styling with consolidated design-system imports. Increased gaps and padding from sm to md/md+, replaced borderRadius from lg/md to xl/full, applied 1px borders, updated icon sizes to iconSize.lg, changed button variant from accent to primary with full borderRadius, and adjusted text weights and color tokens (primaryText, secondaryText).
ConnectWallet Icon & Component Updates
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
Updated OutlineWalletIcon component signature from IconFC type alias to explicit props object with added style support. StepConnector now uses design-system imports for iconSize and radius, replacing hard-coded values. WalletRow adds bordered placeholder container styling for disconnected wallet state.
Test Data Restructuring
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
Converted PaymentMethod test fixtures from JSON-parsed objects to direct object literals with restructured shape: added action and hasEnoughBalance fields, moved pricing from priceUsd to originToken.prices with USD key.
Release Metadata
.changeset/yummy-squids-rush.md
Added changeset entry documenting patch release for Payment Details UI improvements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • OutlineWalletIcon.tsx warrants brief attention: verify the explicit props type definition is correct and that the style prop forwarding integrates properly with existing SVG rendering.
  • PaymentDetails.stories.tsx test data migration: confirm the new PaymentMethod object structure matches the expected type and that all required fields are present.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 2 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Linked Issues check ❓ Inconclusive The linked issue MNY-341 contains no detailed requirements; the PR changes align with the general objective of Payment Details UI improvements across multiple components. Verify that the specific UI improvements in the linked issue match all code changes in the PR, or provide detailed requirements in the issue.
Out of Scope Changes check ❓ Inconclusive Changes are focused on UI styling and component props for Payment Details and related bridge widget components, with one change to OutlineWalletIcon's public API signature. Review the OutlineWalletIcon API change to ensure it doesn't break existing consumers or if this API change was intentional and documented.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The PR title '[MNY-341] Payment Details UI improvements' clearly summarizes the main change—improving the Payment Details UI—and is concise and specific.
Description check ✅ Passed The PR description includes a PR-Codex-generated overview with detailed summary of changes, though the template's 'Notes for the reviewer' and 'How to test' sections are not filled with custom content.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch mny-341

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9383ccd and 9e13bd0.

📒 Files selected for processing (8)
  • .changeset/yummy-squids-rush.md (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (5 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (2 hunks)
  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoid any and unknown in TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.) in TypeScript

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose

Files:

  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
packages/thirdweb/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g. const { jsPDF } = await import("jspdf");)

Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)

Files:

  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (AGENTS.md)

Biome governs formatting and linting; its rules live in biome.json. Run pnpm fix & pnpm lint before committing, ensure there are no linting errors

Files:

  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Lazy-import optional features; avoid top-level side-effects

Files:

  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
  • packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
**/*.stories.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Add Storybook stories (*.stories.tsx) alongside new UI components for documentation

Files:

  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
**/*.stories.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

For new UI components, add Storybook stories (*.stories.tsx) alongside the code

Files:

  • packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
🧬 Code graph analysis (6)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
  • Container (80-193)
packages/thirdweb/src/react/core/design-system/index.ts (2)
  • radius (156-164)
  • iconSize (166-176)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
  • Container (80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx (1)
  • OutlineWalletIcon (4-35)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (5)
packages/thirdweb/src/react/core/design-system/index.ts (3)
  • radius (156-164)
  • spacing (142-154)
  • iconSize (166-176)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
  • Container (80-193)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
  • Text (18-34)
packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
  • Spacer (6-15)
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
  • Button (27-161)
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)
packages/thirdweb/src/react/core/design-system/index.ts (1)
  • spacing (142-154)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (1)
  • radius (156-164)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
  • Container (80-193)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
  • PaymentMethod (33-48)
packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
  • STORY_MOCK_WALLET (90-90)
⏰ 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)
  • GitHub Check: Unit Tests
  • GitHub Check: Size
  • GitHub Check: Lint Packages
🔇 Additional comments (15)
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)

36-36: LGTM: Consistent padding improvement.

The updated padding ensures symmetrical spacing and aligns with the broader design token standardization across the Payment Details UI.

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx (2)

3-6: LGTM: Design token imports consolidated.

Adding iconSize and radius imports enables dynamic sizing based on design-system tokens, improving maintainability and consistency.


16-17: LGTM: Cohesive visual refinements.

The changes improve the connector's visual integration:

  • Tighter margins (-12px vs -10px) create better visual flow between payment steps
  • secondaryText color reduces prominence for a supporting UI element
  • radius.full with padding creates a properly circular container
  • iconSize["sm+"] (20px) provides appropriate icon scaling

Also applies to: 25-25, 30-31, 34-34

packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx (1)

4-8: LGTM: Enhanced icon component flexibility.

The explicit props definition and style forwarding improve component flexibility without impacting external consumers (component is marked @internal).

Also applies to: 17-17

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (1)

62-82: LGTM: Polished disconnected wallet placeholder.

The bordered, rounded container improves the visual presentation when no wallet is connected, using design-system tokens for consistency.

.changeset/yummy-squids-rush.md (1)

1-5: LGTM: Changeset properly documents the patch.

The changeset correctly identifies this as a patch-level change for Payment Details UI improvements.

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (3)

50-50: LGTM: Increased border radius for visual softness.

The change from radius.lg (12px) to radius.xl (20px) creates a more modern, rounded appearance for the payment overview containers.

Also applies to: 125-125


58-58: LGTM: Expanded padding for better spacing.

The vertical padding increase from spacing.sm (12px) to spacing.md (16px) improves visual breathing room and content readability.

Also applies to: 91-91, 133-133


60-60: LGTM: Dashed borders for visual distinction.

The change from solid to dashed borders helps visually separate the wallet row from the payment method section while maintaining hierarchy.

Also applies to: 135-135

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (5)

7-11: LGTM: Consolidated design-system imports.

Bringing in iconSize alongside existing tokens supports the dynamic sizing updates throughout this component.


271-271: LGTM: Adjusted vertical spacing.

Reducing the spacer from spacing.lg (24px) to spacing.md (16px) creates tighter, more cohesive vertical rhythm in the payment details layout.

Also applies to: 408-408


313-313: LGTM: Route steps container styling refresh.

The updated gap (md+), border radius (xl), and padding values create a more polished, spacious presentation for multi-step routes.

Also applies to: 317-318, 330-330


337-350: LGTM: Enhanced step badge and typography.

The step index badge now uses iconSize.lg for consistent sizing, radius.full for circular appearance, and secondaryText color for appropriate visual weight. The weight={500} on step titles adds appropriate emphasis.

Also applies to: 359-359


412-419: LGTM: Button styling improvements.

The variant change from accent to primary follows design-system semantics for primary actions, and radius.full creates a modern pill-shaped button.

packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (1)

24-62: LGTM: Clearer payment method structure.

The direct object literals are more maintainable than the previous JSON.parse(JSON.stringify(...)) pattern. The structure now explicitly shows the nested prices object and additional fields (action, balance, hasEnoughBalance) that match the PaymentMethod type definition.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • TEAM-0000: Entity not found: Issue - Could not find referenced Issue.

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added packages SDK Involves changes to the thirdweb SDK labels Dec 18, 2025
Copy link
Member Author


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 18, 2025

size-limit report 📦

Path Size
@thirdweb-dev/nexus (esm) 105.66 KB (0%)
@thirdweb-dev/nexus (cjs) 319.47 KB (0%)

@codecov
Copy link

codecov bot commented Dec 18, 2025

Codecov Report

❌ Patch coverage is 8.77193% with 52 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.50%. Comparing base (9383ccd) to head (9e13bd0).

Files with missing lines Patch % Lines
...eb/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx 0.00% 20 Missing ⚠️
...t/web/ui/Bridge/payment-details/PaymentDetails.tsx 5.26% 18 Missing ⚠️
.../web/ui/Bridge/payment-details/PaymentOverview.tsx 0.00% 7 Missing ⚠️
...i/ConnectWallet/screens/Buy/swap/StepConnector.tsx 14.28% 6 Missing ⚠️
...src/react/web/ui/Bridge/common/TokenBalanceRow.tsx 0.00% 1 Missing ⚠️
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              
Flag Coverage Δ
packages 54.50% <8.77%> (+0.03%) ⬆️
Files with missing lines Coverage Δ
...t/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx 100.00% <100.00%> (ø)
...src/react/web/ui/Bridge/common/TokenBalanceRow.tsx 11.11% <0.00%> (ø)
...i/ConnectWallet/screens/Buy/swap/StepConnector.tsx 16.12% <14.28%> (+3.22%) ⬆️
.../web/ui/Bridge/payment-details/PaymentOverview.tsx 5.07% <0.00%> (ø)
...t/web/ui/Bridge/payment-details/PaymentDetails.tsx 3.70% <5.26%> (-0.05%) ⬇️
...eb/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx 15.29% <0.00%> (-4.41%) ⬇️

... and 9 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

packages SDK Involves changes to the thirdweb SDK

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants