[MNY-314] SDK: Token Selection UX improvements in SwapWidget #8552
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 5ec84bd 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 |
WalkthroughAdds automatic token selection logic to SwapWidget: when a user selects a buy or sell token without an existing counterpart token, the complementary token is automatically set to the native token of the selected token's chain. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. |
MananTank
force-pushed
the
mny-331
branch
2 times, most recently
from
ba6f15d to
724a4cb
Compare
size-limit report 📦
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8552 +/- ##
=======================================
Coverage 54.63% 54.63%
=======================================
Files 921 921
Lines 61193 61193
Branches 4150 4152 +2
=======================================
Hits 33434 33434
Misses 27657 27657
Partials 102 102
🚀 New features to boost your workflow:
|
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on improving the user experience in the `SwapWidget` by automatically selecting the native token when no sell or buy token is selected.
### Detailed summary
- Added logic to set the `sellToken` as the native token of the buy token's chain if no sell token is selected.
- Added logic to set the `buyToken` as the native token of the sell token's chain if no buy token is selected.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
mny-314
branch
from
f29733f to
5ec84bd
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (1)
287-298: LGTM!The sell-token auto-selection correctly mirrors the buy-token logic, maintaining consistency and symmetry in the user experience.
Optional: Consider extracting the auto-selection logic.
The token auto-selection logic is duplicated between lines 252-260 and 289-297. While the duplication is minimal and the current implementation is clear, you could optionally extract it into a helper function if similar patterns emerge elsewhere in the codebase:
function autoSelectComplementaryToken(params: { selectedToken: TokenSelection; complementaryToken: TokenSelection | undefined; setComplementaryToken: (token: TokenSelection | undefined) => void; }) { if ( !params.complementaryToken && params.selectedToken.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS.toLowerCase() ) { params.setComplementaryToken({ tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS), chainId: params.selectedToken.chainId, }); } }Then call it in both handlers:
// In buy token selection: autoSelectComplementaryToken({ selectedToken: token, complementaryToken: props.sellToken, setComplementaryToken: props.setSellToken, }); // In sell token selection: autoSelectComplementaryToken({ selectedToken: token, complementaryToken: props.buyToken, setComplementaryToken: props.setBuyToken, });This is purely a maintainability consideration and not required for the current scope.
📜 Review details
Configuration used: CodeRabbit 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.
📒 Files selected for processing (2)
.changeset/eager-loops-obey.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin 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/Bridge/swap-widget/swap-ui.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/Bridge/swap-widget/swap-ui.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 lintbefore committing, ensure there are no linting errors
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.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/Bridge/swap-widget/swap-ui.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (2)
apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)packages/thirdweb/src/exports/thirdweb.ts (1)
NATIVE_TOKEN_ADDRESS(31-31)
⏰ 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). (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
.changeset/eager-loops-obey.md (1)
1-5: LGTM!The changeset follows the correct format and accurately describes the UX improvement.
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (2)
9-9: LGTM!The imports are appropriate for the token auto-selection feature.
NATIVE_TOKEN_ADDRESSenables native token detection, andgetAddressensures address normalization.Also applies to: 12-12
250-261: LGTM!The auto-selection logic correctly handles the UX improvement:
- Only fills when sell token is unselected
- Skips auto-fill if the buy token is native (avoiding confusing native-to-native swaps on the same chain)
- Sets sell token to the native token of the buy token's chain, reducing user clicks
PR-Codex overview
This PR focuses on improving the token selection user experience in the
SwapWidgetby automatically setting the sell or buy token to the native token of the respective chain when no token is selected.Detailed summary
sellTokento the native token of the buy token's chain if not selected.buyTokento the native token of the sell token's chain if not selected.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.