[MNY-303] Various UI/UX Improvements in Bridge components #8388
Conversation
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
🦋 Changeset detectedLatest commit: 763d3de 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Member
Author
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. |
Contributor
WalkthroughMinor UI/UX updates across Bridge components: reduced typography weights, token selector gained "All Tokens" / "Your Tokens" tabs with per-tab paging, icon fallbacks for missing images, CopyIcon refactored to a Button, receipts now render per-transaction explorer links and copy actions; Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant SelectTokenUI
participant AllTokens
participant YourTokens
User->>SelectTokenUI: Open token selector
SelectTokenUI->>AllTokens: Load first page (limit:100)
SelectTokenUI->>YourTokens: Load first page (limit:50)
alt Viewing "All Tokens"
User->>AllTokens: Click "Load more"
AllTokens->>AllTokens: showMore() -> increase visible items
else Viewing "Your Tokens"
User->>YourTokens: Click "Load more"
YourTokens->>YourTokens: showMore() -> increase visible items
end
User->>SelectTokenUI: Select token
SelectTokenUI-->>User: Return selected token
sequenceDiagram
autonumber
participant User
participant PaymentReceipt
participant TransactionEntry
participant Explorer
User->>PaymentReceipt: Open completed payment
PaymentReceipt->>PaymentReceipt: Iterate status.transactions
loop per transaction
PaymentReceipt->>TransactionEntry: Render hash, timestamp, chain, amounts
TransactionEntry->>TransactionEntry: Render CopyIcon (Button)
TransactionEntry->>Explorer: Render external explorer Link
alt User clicks CopyIcon
User->>TransactionEntry: Click
TransactionEntry-->>User: Copy tx hash to clipboard
else User clicks Link
User->>Explorer: Open external explorer URL
end
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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 |
Contributor
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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/payment-success/PaymentReceipt.tsx (1)
24-35: Add TSDoc and explicit return types per coding guidelines.The coding guidelines for
packages/thirdweb/**/*.{ts,tsx}require:
- Comprehensive TSDoc with at least one
@examplefor every public symbol- Explicit return type annotations
Missing documentation and return types:
TransactionInfointerface (lines 24-35)useTransactionInfohook (lines 50-119) - needs return type annotationCompletedStepDetailCardcomponent (lines 130-310) - needs return type annotationCompletedStepDetailCardPropsinterface (lines 121-125)PaymentReceitPropsinterface (lines 312-332)PaymentReceiptcomponent (lines 334-367) - needs return type annotationAs per coding guidelines
Example for the main export:
/** * Displays a detailed payment receipt showing completed transaction information. * * @example * ```tsx * <PaymentReceipt * preparedQuote={quote} * completedStatuses={statuses} * onBack={() => setScreen('success')} * windowAdapter={window} * /> * ``` * * @beta */ export function PaymentReceipt({ preparedQuote, completedStatuses, onBack, windowAdapter, }: PaymentReceitProps): JSX.Element { // ... implementation }Also applies to: 50-119, 130-310, 312-332, 334-367
📜 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 (14)
.changeset/wild-steaks-agree.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx(18 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx(3 hunks)packages/thirdweb/src/react/web/ui/components/Spacer.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- .changeset/wild-steaks-agree.md
- packages/thirdweb/src/react/web/ui/components/Spacer.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
- packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
🧠 Learnings (43)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7307
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:324-346
Timestamp: 2025-06-09T15:15:02.350Z
Learning: In the move-funds functionality, MananTank prefers having both individual toast.promise notifications for each token transfer AND batch summary toasts, even though this creates multiple notifications. This dual notification approach is acceptable for the move-funds user experience.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-06-26T19:46:04.024Z
Learnt from: gregfromstl
Repo: thirdweb-dev/js PR: 7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-09-18T20:09:57.064Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8069
File: apps/playground-web/src/app/bridge/swap-widget/components/types.ts:3-12
Timestamp: 2025-09-18T20:09:57.064Z
Learning: The SwapWidgetPlaygroundOptions type should not include persistTokenSelections - the playground intentionally hardcodes persistTokenSelections={false} and doesn't expose it as a configurable option to users.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client Components must start with `'use client'`; handle interactivity with hooks and browser APIs
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-06-06T23:46:08.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-07-02T20:04:53.982Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/webhook-metrics.tsx:40-40
Timestamp: 2025-07-02T20:04:53.982Z
Learning: The Spinner component imported from "@/components/ui/Spinner/Spinner" in the dashboard accepts a className prop, not a size prop. The correct usage is <Spinner className="size-4" />, not <Spinner size="sm" />. The component defaults to "size-4" if no className is provided.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Unified `Wallet` and `Account` interfaces in wallet architecture
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-05-29T10:49:52.981Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx:26-43
Timestamp: 2025-05-29T10:49:52.981Z
Learning: In React image components, conditional rendering of the entire image container (e.g., `{props.image && <Img />}`) serves a different purpose than fallback handling. The conditional prevents rendering any image UI when no image metadata exists, while the fallback prop handles cases where image metadata exists but the image fails to load. This pattern is intentional to distinguish between "no image intended" vs "image intended but failed to load".
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-08-09T15:37:30.990Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7822
File: apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx:22-31
Timestamp: 2025-08-09T15:37:30.990Z
Learning: The Img component at apps/dashboard/src/@/components/blocks/Img.tsx properly handles empty string src values by immediately setting status to "fallback" and converting empty strings to undefined in the img element's src attribute, preventing unnecessary network requests.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client-side data fetching: wrap calls in React Query with descriptive, stable `queryKeys` and set sensible `staleTime/cacheTime` (≥ 60s default); keep tokens secret via internal routes or server actions
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
📚 Learning: 2025-08-28T19:32:53.229Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7939
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx:50-60
Timestamp: 2025-08-28T19:32:53.229Z
Learning: The Button component in packages/ui/src/components/button.tsx has type="button" as the default when no type prop is explicitly provided. This means explicitly adding type="button" to Button components is redundant unless a different type (like "submit") is specifically needed.
Applied to files:
packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
🧬 Code graph analysis (10)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (2)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx (1)
FiatValue(15-55)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-14)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(74-123)TokenBalance(42-60)packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(27-161)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (3)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx (1)
getFiatCurrencyIcon(103-108)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (1)
iconSize(166-176)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (2)
iconSize(166-176)radius(156-164)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx (7)
packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)packages/thirdweb/src/react/core/design-system/index.ts (2)
radius(156-164)spacing(142-154)packages/thirdweb/src/react/web/ui/components/basic.tsx (3)
Container(80-193)Line(70-75)ModalHeader(36-68)packages/thirdweb/src/react/web/ui/components/text.tsx (2)
Text(18-34)Link(46-64)packages/thirdweb/src/react/web/ui/components/ChainName.tsx (1)
shorterChainName(32-40)packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx (1)
CopyIcon(12-60)packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)
packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (2)
iconSize(166-176)radius(156-164)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/components/CopyIcon.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)
⏰ 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: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx (1)
103-119: LGTM! Consistent fallback UI improves UX.The addition of the fallback gradient for the chain icon matches the existing token icon fallback pattern (lines 63-70), ensuring visual consistency when icons fail to load. The empty string guard on line 103 correctly triggers the fallback behavior, and the dimensions properly use
iconSize.smto match the Img component's width/height props.packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
222-222: LGTM! Typography weight adjustment aligns with broader UI consistency improvements.The reduction from weight 600 to 500 creates a more balanced visual hierarchy, consistent with similar typography updates across the Bridge components in this PR.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (1)
50-61: LGTM! Centralized icon sizing improves maintainability.The computed
iconSizeValueeliminates duplication and ensures consistent icon sizing across WalletImage and OutlineWalletIcon. The gap reduction from "md" to "sm" tightens the layout appropriately.packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (1)
174-213: LGTM! Icon fallback and responsive sizing enhance UX.The gradient fallback provides a polished experience when chain icons are unavailable, and the responsive
iconSizeValueensures appropriate sizing across mobile/desktop contexts. The empty string forsrcis correctly handled by the Img component's fallback mechanism.packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)
71-94: LGTM! FiatValue component extraction improves code organization.Replacing inline fiat rendering with the dedicated FiatValue component promotes reusability and maintains consistent fiat display behavior across the Bridge UI.
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
94-144: LGTM! Spacing and text refinements improve professional appearance.The increased spacing from "xxl" to "3xl" and the text change from "Payment Complete" to "Payment Successful" (removing the exclamation) create a more polished, professional success screen.
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (1)
66-290: LGTM! Consistent typography and icon sizing improvements.The weight reduction from 600 to 500 and icon size increase from "md" to "lg" align with the broader UI consistency effort across Bridge components. The added layout comments improve code readability.
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (2)
53-111: LGTM! Pagination limits and search reset logic are well-implemented.The separate constants for ALL_TOKENS_LIMIT (100) and OWNED_TOKENS_LIMIT (50) align with PR objectives. The
setSearchcallback correctly resets both limits when the user changes their search, ensuring fresh pagination state.
468-709: LGTM! Tab implementation provides excellent UX for token selection.The "All Tokens" / "Your Tokens" tab UI addresses the PR objective perfectly, with proper active state management, per-tab loading states, and individual "Load More" buttons. The TabButton component's ghost-solid variant with bottom-border active state is clean and intuitive.
packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx (1)
24-58: LGTM! Button component migration improves accessibility and styling.Replacing the div wrapper with a Button component removes the need for manual keyboard handling (Enter/Space), as Button natively provides this accessibility. The addition of "secondaryText" color for the default state improves icon visibility, and the ghost-solid variant with
radius.smborder follows design system conventions.packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx (6)
13-13: LGTM! Import updates are appropriate.The new imports (
radius,spacing,Line,CopyIcon,Link) are all properly utilized in the component.Also applies to: 17-17, 19-19, 22-22
135-139: LGTM! Correct React Query v5+ API usage.The change from
isLoadingtoisPendingaligns with React Query v5+ conventions.
153-153: LGTM! Styling improvements align with design system.The font weight reduction (600 → 500) matches the PR objectives, and all styling uses appropriate design system tokens.
Also applies to: 161-161, 167-167, 172-186
190-190: LGTM! Layout and labeling improvements enhance clarity.The Line separator and explicit labels ("Origin Chain", "Destination Chain") improve the visual hierarchy and make the transaction details clearer.
Also applies to: 208-252
254-272: LGTM! Clean Payment ID display with copy functionality.The CopyIcon integration provides a good user experience for copying the payment ID.
341-364: LGTM! Container layout improvements enhance UX.The scroll container with height constraints (
maxHeight: 500px,minHeight: 400px) provides better handling for varying numbers of transactions, and the spacing adjustments improve the overall visual hierarchy.
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
Outdated
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
Show resolved
Hide resolved
Contributor
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 various UI/UX improvements across multiple components in the `thirdweb` package, particularly enhancing visual consistency and user interaction within the Bridge and Token Selection components.
### Detailed summary
- Adjusted font weights in several components from `600` to `500`.
- Updated `Spacer` component usage for consistent spacing.
- Enhanced `TokenSelection` UI with tabbed navigation for "All Tokens" and "Your Tokens".
- Added fallback images for icons in `TokenAndChain` and `ChainButton`.
- Refactored `CopyIcon` to use a `Button` instead of a `div` for better accessibility.
- Improved loading states and skeletons in `TokenSelectionScreen`.
- Simplified conditional rendering for transaction details in `PaymentReceipt`.
> ✨ 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
* **New Features**
* Token selection: separate "All Tokens" and "Your Tokens" tabs with per-tab paging and "Load More"
* Payment receipts: per-transaction explorer links and copy-to-clipboard controls
* Enhanced success/details views showing expanded per-transaction status entries
* **UI/UX Improvements**
* Refined typography weights across Bridge screens for clearer hierarchy
* Adjusted icon sizing and added visual fallbacks for missing chain/token icons
* Improved spacing, alignment, scrolling and containment in Bridge layouts
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-303
branch
from
7a1e4c1 to
763d3de
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (1)
191-209: Replace hardcoded color with theme token in gradient fallback.The fallback gradient uses a hardcoded
"white"color instead of a theme color token, creating inconsistency with the design system used throughout the codebase.Apply this diff to use a theme color:
fallback={ <Container color="secondaryText"> <Container style={{ - background: `linear-gradient(45deg, white, ${theme.colors.accentText})`, + background: `linear-gradient(45deg, ${theme.colors.secondaryButtonBg}, ${theme.colors.accentText})`, borderRadius: radius.full, width: `${iconSizeValue}px`, height: `${iconSizeValue}px`, }} /> </Container> }As per coding guidelines
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (1)
673-713: Consider ARIA tab attributes for enhanced accessibility.The current implementation is functionally accessible via the
Buttoncomponent, but adding proper ARIA tab attributes would improve semantics for assistive technologies.Optionally apply this diff:
function TabButton(props: { isSelected: boolean; onSelect: () => void; label: string; }) { const theme = useCustomTheme(); return ( <div style={{ paddingBottom: "4px", position: "relative", }} + role="tab" + aria-selected={props.isSelected} > <Button variant="ghost-solid" onClick={props.onSelect}And add
role="tablist"to the parent Container at line 541:<Container flex="row" gap="xs" px="md" style={{ borderBottom: `1px solid ${theme.colors.borderColor}` }} + role="tablist" >
📜 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 (14)
.changeset/wild-steaks-agree.md(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx(18 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx(3 hunks)packages/thirdweb/src/react/web/ui/components/Spacer.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx
- .changeset/wild-steaks-agree.md
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
- packages/thirdweb/src/react/web/ui/components/Spacer.tsx
- packages/thirdweb/src/react/web/ui/components/CopyIcon.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/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
- packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
🧠 Learnings (38)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7307
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:324-346
Timestamp: 2025-06-09T15:15:02.350Z
Learning: In the move-funds functionality, MananTank prefers having both individual toast.promise notifications for each token transfer AND batch summary toasts, even though this creates multiple notifications. This dual notification approach is acceptable for the move-funds user experience.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-06-26T19:46:04.024Z
Learnt from: gregfromstl
Repo: thirdweb-dev/js PR: 7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-06-09T15:15:02.350Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7307
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:324-346
Timestamp: 2025-06-09T15:15:02.350Z
Learning: In the move-funds functionality, MananTank prefers having both individual toast.promise notifications for each token transfer AND batch summary toasts, even though this creates multiple notifications. This dual notification approach is acceptable for the move-funds user experience.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-10-01T22:32:18.080Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8169
File: packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx:95-107
Timestamp: 2025-10-01T22:32:18.080Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in packages/thirdweb/src/react/**/*.{ts,tsx} files, do not suggest adding TSDoc blocks to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client-side data fetching: wrap calls in React Query with descriptive, stable `queryKeys` and set sensible `staleTime/cacheTime` (≥ 60s default); keep tokens secret via internal routes or server actions
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client Components must start with `'use client'`; handle interactivity with hooks and browser APIs
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-05-29T10:49:52.981Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx:26-43
Timestamp: 2025-05-29T10:49:52.981Z
Learning: In React image components, conditional rendering of the entire image container (e.g., `{props.image && <Img />}`) serves a different purpose than fallback handling. The conditional prevents rendering any image UI when no image metadata exists, while the fallback prop handles cases where image metadata exists but the image fails to load. This pattern is intentional to distinguish between "no image intended" vs "image intended but failed to load".
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-08-09T15:37:30.990Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7822
File: apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx:22-31
Timestamp: 2025-08-09T15:37:30.990Z
Learning: The Img component at apps/dashboard/src/@/components/blocks/Img.tsx properly handles empty string src values by immediately setting status to "fallback" and converting empty strings to undefined in the img element's src attribute, preventing unnecessary network requests.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-09-18T20:09:57.064Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8069
File: apps/playground-web/src/app/bridge/swap-widget/components/types.ts:3-12
Timestamp: 2025-09-18T20:09:57.064Z
Learning: The SwapWidgetPlaygroundOptions type should not include persistTokenSelections - the playground intentionally hardcodes persistTokenSelections={false} and doesn't expose it as a configurable option to users.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-06-06T23:46:08.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-02T20:04:53.982Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/webhook-metrics.tsx:40-40
Timestamp: 2025-07-02T20:04:53.982Z
Learning: The Spinner component imported from "@/components/ui/Spinner/Spinner" in the dashboard accepts a className prop, not a size prop. The correct usage is <Spinner className="size-4" />, not <Spinner size="sm" />. The component defaults to "size-4" if no className is provided.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx (8)
packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)packages/thirdweb/src/react/core/design-system/index.ts (2)
radius(156-164)spacing(142-154)packages/thirdweb/src/react/web/ui/components/basic.tsx (3)
Container(80-193)Line(70-75)ModalHeader(36-68)packages/thirdweb/src/react/web/ui/components/text.tsx (2)
Text(18-34)Link(46-64)packages/thirdweb/src/react/web/ui/components/ChainName.tsx (1)
shorterChainName(32-40)packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx (1)
CopyIcon(12-60)packages/thirdweb/src/exports/utils.ts (1)
shortenHex(150-150)packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (2)
iconSize(166-176)radius(156-164)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (7)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-14)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(74-123)TokenBalance(42-60)packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/core/design-system/index.ts (2)
spacing(142-154)fontSize(132-140)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(27-161)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). (7)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
222-222: LGTM — Typography weight update aligns with design system.The font weight reduction from 600 to 500 is consistent with the broader UI/UX improvements across Bridge components mentioned in the PR objectives.
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (1)
174-175: LGTM — Responsive icon sizing improves consistency.The
iconSizeValuecomputation based onisMobileunifies icon sizing logic and makes the component more maintainable.packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx (3)
135-139: LGTM — Simplified loading state improves UX.The switch from
isLoadingtoisPendingfollows standard React Query patterns, and the simplified skeleton (single element vs. multiple elements) provides a cleaner loading experience.
274-307: LGTM — Transaction hash rendering meets PR objectives.The per-transaction rendering with copyable hashes and explorer links directly addresses the PR objective: "Include transaction hashes in the UI with links to the project's transaction page and make hashes copyable."
121-125: The review comment is incorrect and can be disregarded.
CompletedStepDetailCardis an internal component not exported from the module. Removing theonCopyToClipboardprop is an internal refactoring and does not constitute a breaking change for external API consumers. OnlyPaymentReceiptis exported from this file, makingCompletedStepDetailCardPropsan internal implementation detail rather than part of the public API surface requiring changelog documentation.Likely an incorrect or invalid review comment.
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx (2)
1-1: LGTM! Pagination setup is well-structured.The per-tab pagination limits (100 for all tokens, 50 for owned tokens) align with the PR objectives. The
setSearchcallback correctly resets both limits when the search changes, ensuring pagination starts fresh with each new search query.Also applies to: 53-54, 61-64, 107-111
116-134: LGTM! Well-structured data flow enables per-tab pagination.The enriched token data structures (
data,isFetching,showMore) cleanly separate concerns and enable independent pagination control for each tab. The owned tokens pagination uses the API'shasMoresignal (line 119), while all tokens use a length-based heuristic (line 129) — both approaches are appropriate for their respective data sources.
Comment on lines
+470
to
+478
| const [activeTab, setActiveTab] = useState<"owned" | "all">("all"); | ||
| const showSkeletons = | ||
| (props.allTokens.isFetching && activeTab === "all") || | ||
| (props.ownedTokens.isFetching && activeTab === "owned"); | ||
|
|
||
| const showNoTokensFound = | ||
| (activeTab === "all" && noAllTokensFound) || | ||
| (activeTab === "owned" && noOwnedTokensFound); | ||
|
|
Contributor
There was a problem hiding this comment.
Reset tab to "All Tokens" when wallet disconnects.
If the user switches to the "Your Tokens" tab and then disconnects their wallet, activeTab remains "owned" even though the tabs are hidden. The component then renders the owned-tokens branch (lines 582–597), which displays "No Tokens Found" instead of falling back to the all-tokens list. This creates a confusing experience when the wallet disconnects.
Apply this diff to reset the tab when the wallet disconnects:
+import { useCallback, useEffect, useMemo, useState } from "react";Then add this effect inside TokenSelectionScreen:
useEffect(() => {
if (!props.isWalletConnected && activeTab === "owned") {
setActiveTab("all");
}
}, [props.isWalletConnected, activeTab]);🤖 Prompt for AI Agents
In packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
around lines 470 to 478, activeTab can remain "owned" after the wallet
disconnects (tabs get hidden) causing the component to render the owned-tokens
branch and show "No Tokens Found"; add a useEffect that watches
props.isWalletConnected and activeTab and, if props.isWalletConnected is false
and activeTab === "owned", calls setActiveTab("all") to reset to the All Tokens
tab so the UI falls back correctly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
PR-Codex overview
This PR focuses on various UI/UX improvements across the
thirdwebcomponents, including adjustments to font weights, styling enhancements, and the addition of fallback options for images. It aims to refine the overall user experience in the Bridge components.Detailed summary
flexShrink: 0toSpacercomponent.weightfrom600to500in multipleTextcomponents.TokenAndChainandTokenSelection.SuccessScreenandPaymentReceipt.TokenSelectionfor better token management.Skeletoncomponents for loading states.Summary by CodeRabbit
New Features
UI/UX Improvements