[MNY-318] SDK: Remove tabs from token selection ui in SwapWidget #8501
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: b0eccf3 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 |
WalkthroughSwapWidget's token selection UI removes tab-based navigation, consolidates dual per-section limits into a single INITIAL_LIMIT with unified limit state, flattens token data into arrays, aggregates fetching state, and conditionally renders "Your Tokens" and "Other Tokens" sections with icons. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 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. |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
528-590: "Other Tokens" header condition likely should depend onotherTokensCurrently, the "Other Tokens" header is rendered only when
props.ownedTokens.length > 0(Line 566), not whenprops.otherTokensis non-empty. That means if a wallet has no owned tokens butotherTokensare available, the list renders without any section header.If the intent is to label the secondary list whenever there are "other" tokens, you likely want:
- {!props.isFetching && props.ownedTokens.length > 0 && ( + {!props.isFetching && props.otherTokens.length > 0 && ( <Container px="xs" py="xs" flex="row" gap="xs" center="y" color="secondaryText" style={{ marginTop: spacing.sm, }} > <CoinsIcon size="14" /> <Text size="sm" color="secondaryText" style={{ overflow: "unset", }} > Other Tokens </Text> </Container> )}If hiding this header when there are no owned tokens is intentional, consider adding a different label or comment to make that behavior explicit.
🧹 Nitpick comments (5)
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/SectionIcon.tsx (1)
3-21: Makesizeprop slightly more flexible to match other iconsTo keep this aligned with other icon components (like
WalletDotIcon) and avoid friction if callers pass numeric sizes, consider widening the prop type:-export const SectionIcon: React.FC<{ size: string }> = ({ size }) => { +export const SectionIcon: React.FC<{ size: number | string }> = ({ size }) => {If you have a shared
IconFCalias for icons in this folder, you could also typeSectionIconwith that for consistency.packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (4)
13-14: Use design-system icon sizes instead of hard-coded"14"You already import
iconSize, so these section headers can avoid magic numbers:- <WalletDotIcon size="14" /> + <WalletDotIcon size={iconSize.sm} /> ... - <CoinsIcon size="14" /> + <CoinsIcon size={iconSize.sm} />This keeps icon sizing consistent with the rest of the design system and easier to tweak centrally.
Also applies to: 528-547, 566-588
55-69: Unified pagination looks good; prefer functional state update forlimitThe shared
INITIAL_LIMIT+ singlelimitstate and resetting it on search is a nice simplification; wiringlimitinto both queries andshowMoreis clear.For the
showMorehandler, a functional state update is slightly safer against stale closures:showMore={ tokensQuery.data?.length === limit ? () => { - setLimit(limit + INITIAL_LIMIT); + setLimit((prev) => prev + INITIAL_LIMIT); } : undefined }This avoids depending on the captured
limitvalue if the handler ever gets reused across renders.Also applies to: 83-99, 112-119, 126-133, 607-617
158-167: Avoid mutating props when sorting token arraysAt Line 158 and Line 183 you call
.sortdirectly onprops.ownedTokensandotherTokens. SinceArray.prototype.sortmutates in place, this can lead to subtle bugs if those arrays are reused elsewhere or across renders.Safer pattern:
const sortedOwnedTokens = useMemo(() => { - return props.ownedTokens.sort((a, b) => { + return [...props.ownedTokens].sort((a, b) => { if (a.icon_uri && !b.icon_uri) return -1; if (!a.icon_uri && b.icon_uri) return 1; return 0; }); }, [props.ownedTokens]); const sortedOtherTokens = useMemo(() => { - return otherTokens.sort((a, b) => { + return [...otherTokens].sort((a, b) => { if (a.iconUri && !b.iconUri) return -1; if (!a.iconUri && b.iconUri) return 1; return 0; }); }, [otherTokens]);This keeps props immutable and avoids cross-render mutation of memoized arrays.
Also applies to: 169-179, 182-193
438-448: Verify sell vs buy variant behavior and copy requirements are satisfiedMNY-318 calls out differing behavior for sell (from) vs buy (to) token selection (sell: “Your Tokens” only, balanceless chains hidden, adjusted copy; buy: existing behavior).
TokenSelectionScreencurrently:
- Uses a fixed title and description (“Select Token”, “Select a token from the list or use the search”) regardless of context (Lines 450–466).
- Always derives
noTokensFoundfrom bothownedTokensandotherTokens(Lines 445–448, 619–632).- Relies on
ownedTokens/otherTokensprops but does not have an explicit variant flag.Please double-check that the caller of
SelectToken/TokenSelectionScreenpasses variant-specific props (e.g., omitsotherTokensfor the sell case and adjusts copy), or else consider threading avariant: "sell" | "buy"prop down so this component can:
- Hide or skip rendering the
otherTokenssection in the sell variant.- Adjust the header/description copy as per the spec.
- Potentially tweak the empty state text if needed.
If you’d like, I can sketch how to add a
variantprop and gateotherTokens+ copy on it.Also applies to: 450-467, 522-527, 619-632
📜 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 (3)
.changeset/rotten-loops-draw.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx(15 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/SectionIcon.tsx(1 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/ConnectWallet/icons/SectionIcon.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-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/ConnectWallet/icons/SectionIcon.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-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/ConnectWallet/icons/SectionIcon.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-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/ConnectWallet/icons/SectionIcon.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(74-121)TokenBalance(42-60)packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
TokenSelection(149-152)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx (1)
WalletDotIcon(6-22)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
⏰ 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: Vercel Agent Review
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
.changeset/rotten-loops-draw.md (1)
1-5: Changeset summary and patch bump look appropriateThe changeset correctly marks a patch release for
"thirdweb"and succinctly describes the token selection UI change. No issues here.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
Show resolved
Hide resolved
size-limit report 📦
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8501 +/- ##
==========================================
+ Coverage 54.62% 54.65% +0.03%
==========================================
Files 920 920
Lines 61142 61102 -40
Branches 4142 4144 +2
==========================================
+ Hits 33397 33398 +1
+ Misses 27643 27602 -41
Partials 102 102
🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
100-110: Pass search term touseTokenBalancesAPI or document the limitation.The owned tokens are filtered client-side (lines 100–110), while
tokensQuerypassesdebouncedSearchserver-side (line 86). TheuseTokenBalancesAPI endpoint does not accept a search parameter, so if a user owns more thanlimittokens, a search will only filter within the initially fetched batch and miss matching tokens beyond that boundary. Either extenduseTokenBalancesto accept and pass a search parameter to the API, or clearly document this limitation in the component.
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
445-448: LGTM: Correct empty state handling.The
noTokensFoundlogic correctly distinguishes between loading states and genuinely empty results. The loading skeleton approach is functional.Optional: Consider showing a loading indicator on the "Load More" button during pagination instead of replacing the entire list with skeletons, which would provide better continuity during "Load More" operations.
Also applies to: 522-526, 619-632
📜 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/rotten-loops-draw.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx(15 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .changeset/rotten-loops-draw.md
🧰 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/select-token-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/select-token-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/select-token-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/select-token-ui.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(74-121)TokenBalance(42-60)packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
TokenSelection(149-152)
⏰ 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: Size
- GitHub Check: Unit Tests
- GitHub Check: Vercel Agent Review
🔇 Additional comments (4)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (4)
13-14: LGTM: Clean consolidation of pagination constants.The icon imports support the new section headers, and unifying the token limits into a single
INITIAL_LIMITsimplifies the pagination logic.Also applies to: 55-55
64-69: LGTM: Clean search-triggered limit reset.Resetting the limit to
INITIAL_LIMITwhen the search term changes provides correct pagination behavior for new search results.
157-192: LGTM: Correct token deduplication and sorting.The logic properly constructs a Set of owned token identifiers and filters them from
allTokens, accounting for the different property names (token_address/chain_idvsaddress/chainId) between the two types. Sorting by icon presence improves visual consistency.
217-233: LGTM: Consistent prop passing across responsive variants.Both desktop and mobile code paths receive the same simplified data structure, maintaining consistency and reducing complexity.
Also applies to: 241-257
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
Show resolved
Hide resolved
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 enhancing the `SelectToken` component by simplifying token limit management, improving UI consistency, and refactoring token display logic. It also removes unnecessary tabs and optimizes the selection process for better user experience.
### Detailed summary
- Replaced constants `ALL_TOKENS_LIMIT` and `OWNED_TOKENS_LIMIT` with `INITIAL_LIMIT`.
- Unified token limit state management into a single `limit` state.
- Refactored token fetching and display logic to streamline data handling.
- Removed unnecessary tab UI for better clarity.
- Simplified the structure of token data handling in `SelectTokenUI`.
- Updated the rendering logic for owned and other tokens to improve performance and readability.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **UI Improvements**
* Redesigned token selection UI in SwapWidget: removed tab navigation and consolidated token lists into dedicated "Your Tokens" and "Other Tokens" sections for a clearer, more intuitive experience.
* **Bug Fixes**
* Enhanced search functionality to properly reset token filtering, improving responsiveness.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-318
branch
from
d9e3b24 to
b0eccf3
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (2)
64-69:showMoreignores owned-tokens pagination; extra owned tokens may be unreachable
showMoreis only enabled whentokensQuery.data?.length === limit, butownedTokensQueryis also paginated by the samelimit. IfownedTokensQuery.data?.tokens?.length === limitwhiletokensQuery.datais shorter, the “Load More” button will never appear, and users can’t access additional owned tokens beyond the first page.Consider updating the condition to account for both queries:
- showMore={ - tokensQuery.data?.length === limit - ? () => { - setLimit(limit + INITIAL_LIMIT); - } - : undefined - } + showMore={ + (tokensQuery.data?.length === limit || + ownedTokensQuery.data?.tokens?.length === limit) + ? () => { + setLimit(limit + INITIAL_LIMIT); + } + : undefined + }Also applies to: 82-99, 112-112, 117-119, 126-132
528-548: “Other Tokens” header condition should depend onotherTokenspresence, notownedTokensThe “Your Tokens” section correctly gates on
props.ownedTokens.length > 0, but the “Other Tokens” header currently usesprops.ownedTokens.length > 0as well. This causes two UX issues:
- If the user has no owned tokens but
otherTokens.length > 0, the “Other Tokens” header never shows, even though that’s what’s being listed.- If the user has owned tokens but no other tokens, the “Other Tokens” header appears with no items beneath it.
You can align the header with the list it labels:
- {!props.isFetching && props.ownedTokens.length > 0 && ( + {!props.isFetching && props.otherTokens.length > 0 && ( <ContainerThis way, “Other Tokens” appears whenever (and only when) there are
otherTokensto render, regardless of how many owned tokens exist.Also applies to: 550-565, 566-589, 591-605
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
157-168: Avoid mutating props/derived arrays when sorting; use copies instead
props.ownedTokens.sort(...)andotherTokens.sort(...)both mutate their input arrays. Mutating props is an anti-pattern and mutating memo inputs can lead to subtle bugs or confusing re-renders, even if it happens to work with the current data flow.You can keep the logic but sort copies:
- const sortedOwnedTokens = useMemo(() => { - return props.ownedTokens.sort((a, b) => { + const sortedOwnedTokens = useMemo(() => { + return [...props.ownedTokens].sort((a, b) => { if (a.icon_uri && !b.icon_uri) { return -1; } if (!a.icon_uri && b.icon_uri) { return 1; } return 0; }); }, [props.ownedTokens]); - const sortedOtherTokens = useMemo(() => { - return otherTokens.sort((a, b) => { + const sortedOtherTokens = useMemo(() => { + return [...otherTokens].sort((a, b) => { if (a.iconUri && !b.iconUri) { return -1; } if (!a.iconUri && b.iconUri) { return 1; } return 0; }); }, [otherTokens]);Also applies to: 169-180, 182-192
📜 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/rotten-loops-draw.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx(15 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/select-token-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/select-token-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/select-token-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/select-token-ui.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (7)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(74-121)TokenBalance(42-60)packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
TokenSelection(149-152)apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx (1)
WalletDotIcon(6-22)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
⏰ 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). (9)
- GitHub Check: Vercel Agent Review
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
.changeset/rotten-loops-draw.md (1)
1-5: Changeset format and content are appropriate.The changeset correctly identifies the package ("thirdweb") and assigns a "patch" bump, which is fitting for a UI refinement. The description accurately captures the primary user-facing change (removing tabs from token selection UI).
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
445-448: Loading / empty-state handling in TokenSelectionScreen looks consistentThe combined
isFetchingflag, skeleton placeholder rendering, “Load More” button, andnoTokensFoundcomputation (!isFetching && ownedTokens.length === 0 && otherTokens.length === 0) are coherent and should produce the expected UX for loading and empty search states.Also applies to: 522-527, 607-617, 619-632
PR-Codex overview
This PR focuses on improving the
SelectTokencomponent in the token selection UI of theSwapWidgetby removing tabs, consolidating token limits, and enhancing the handling of token lists.Detailed summary
INITIAL_LIMITvariable..datareferences.Summary by CodeRabbit
UI Improvements
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.