Add SwapWidget in SDK, add in dashboard, BuyWidget UI improvements #8044
Conversation
🦋 Changeset detectedLatest commit: b1f23a2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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.
|
WalkthroughAdds a new SwapWidget (UI, hooks, types, storage, stories) and exports it; introduces many UI/design-system and modal title props changes; updates payment flows to use paymentMethod.action; adds analytics for token swaps; integrates a combined Buy+Swap embed in the dashboard; adds a package-level Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant SwapWidget
participant SwapUI
participant QuoteSvc as useSwapQuote
participant Preview as PaymentDetails
participant Runner as StepRunner
participant BridgeAPI
User->>SwapWidget: Open widget
SwapWidget->>SwapUI: Render token inputs and selectors
User->>SwapUI: Select tokens / enter amount
SwapUI->>QuoteSvc: Request quote (periodic refetch)
QuoteSvc-->>SwapUI: Quote / prepared request
User->>SwapUI: Trigger Swap (onSwap)
SwapWidget->>Preview: Show preview (title/confirm label)
User->>Preview: Confirm
Preview->>Runner: Execute (uses paymentMethod.action for request.type)
Runner->>BridgeAPI: Submit bridge request
BridgeAPI-->>Runner: Status/result
alt success
Runner-->>SwapWidget: onComplete
SwapWidget->>User: Success screen
else failure
Runner-->>SwapWidget: onError
SwapWidget->>User: Error banner
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ 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)
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. |
size-limit report 📦
|
Codecov Report❌ Patch coverage is ❌ Your patch check has failed because the patch coverage (17.56%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #8044 +/- ##
==========================================
- Coverage 56.51% 56.48% -0.03%
==========================================
Files 904 904
Lines 58865 58988 +123
Branches 4170 4173 +3
==========================================
+ Hits 33269 33321 +52
- Misses 25491 25562 +71
Partials 105 105
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/thirdweb/src/bridge/types/Chain.ts (1)
42-43: Add required TSDoc for public alias per package guidelinesPublic symbols here must include TSDoc with an example and a custom stability tag.
Add docs:
+ +/** + * Alias of {@link Chain} used across the Bridge UI/API surface. + * @beta + * @public + * @example + * import type { BridgeChain } from "thirdweb/bridge"; + * function onSelect(chain: BridgeChain) { + * console.log(chain.chainId, chain.name); + * } + */ export type BridgeChain = Chain;packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
36-106: Add TSDoc or mark internal for exported UI primitivesPer repo guidelines, exported symbols in packages/thirdweb need TSDoc with an example or an explicit @internal. Please annotate Label, Input, and InputContainer.
-export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => { +/** + * @internal + */ +export const Input = /* @__PURE__ */ StyledInput<InputProps>((props) => {packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
26-157: Add TSDoc or mark internal for Button exportsPlease annotate Button, ButtonLink, and IconButton per packages/thirdweb guidelines.
-export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => { +/** + * @internal + */ +export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
37-41: Fix “undefinedpx” sizing when width/height are omittedwidthPx/heightPx produce invalid values if props are undefined. Provide safe defaults.
- const widthPx = `${props.width}px`; - const heightPx = `${props.height || props.width}px`; + const DEFAULT_SIZE = "24px"; + const widthPx = props.width ? `${props.width}px` : undefined; + const heightPx = props.height + ? `${props.height}px` + : props.width + ? `${props.width}px` + : DEFAULT_SIZE;
🧹 Nitpick comments (51)
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsx (3)
3-16: Forward SVG props and add a sane default size.Enable consumers to pass className/aria-label/etc. and avoid undefined width/height.
-export const ArrowUpDownIcon: IconFC = (props) => { +export const ArrowUpDownIcon: IconFC = ({ size = 24, ...props }) => { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" - strokeWidth="2" + strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" - role="presentation" - width={props.size} - height={props.size} + role="presentation" + width={size} + height={size} + {...props} >
13-16: A11y: mark decorative SVGs as hidden to AT (or provide an accessible name).If this icon is purely decorative, prefer aria-hidden and prevent focus; if it conveys meaning, pass an aria-label via props and keep role="img".
- role="presentation" + aria-hidden="true" + focusable="false"
3-3: Add TSDoc with a custom tag per packages/thirdweb policy.Mark as @internal if not part of the public API; otherwise add an @example.
+/** + * Up/down arrows icon used in wallet/bridge UIs. + * @internal + */ export const ArrowUpDownIcon: IconFC = ({ size = 24, ...props }) => {packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (3)
97-98: Add missing period for consistency and polish.The preceding testnet message ends with a period. Mirror that here.
- This token or chain is not supported by the Bridge + This token or chain is not supported by the Bridge.
30-40: Don’t use React Query for a side-effect-only analytics ping.Using
useQueryhere adds caching semantics and a static key that won’t re-fire if props change within the same mount. PreferuseEffect(or auseMutation) tied to the relevant deps.-import { useQuery } from "@tanstack/react-query"; +import { useEffect } from "react"; @@ - useQuery({ - queryFn: () => { - trackPayEvent({ - chainId: chain.id, - client, - event: "ub:ui:unsupported_token", - fromToken: tokenAddress, - }); - }, - queryKey: ["unsupported_token"], - }); + useEffect(() => { + trackPayEvent({ + chainId: chain.id, + client, + event: "ub:ui:unsupported_token", + fromToken: tokenAddress, + }); + }, [chain.id, client, tokenAddress]);If you must keep React Query, at least include
chain.idandtokenAddressin thequeryKeyand setstaleTime: Infinity.
25-25: Add explicit return type to match TS guidelines.Declare the component’s return type for clarity and tooling.
-export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) { +export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps): JSX.Element {packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
20-21: Smoother height animation and consistency with DS transitionsConsider ease-in-out and explicitly hint painting for slightly smoother expansion; also centralize duration/timing as a design token to keep consistent across components.
Apply this minimal tweak:
- transition: "height 210ms ease", + transition: "height 210ms ease-in-out", + willChange: "height",packages/thirdweb/package.json (1)
344-345: Avoid duplicating tsc invocation between lint and typecheckYou can route lint to call the new typecheck script for one source of truth.
Update scripts:
- "lint": "knip && biome check ./src && tsc --project ./tsconfig.build.json --module nodenext --moduleResolution nodenext --noEmit", + "lint": "knip && biome check ./src && pnpm typecheck", "typedoc": "node scripts/typedoc.mjs && node scripts/parse.mjs", "typecheck": "tsc --project ./tsconfig.build.json --module nodenext --moduleResolution nodenext --noEmit",packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
18-26: Hide decorative skeletons from assistive techMarking as decorative avoids noisy announcements while loading.
- <SkeletonDiv + <SkeletonDiv + aria-hidden className={props.className || ""} color={props.color} style={{ height: props.height, width: props.width || "auto", ...props.style, }} />packages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.ts (1)
1-3: Make chain-name cleanup more robustLimit removal to trailing “Mainnet”, handle case/parentheses, and avoid returning empty strings.
-export function cleanedChainName(name: string) { - return name.replace("Mainnet", ""); -} +export function cleanedChainName(name: string) { + const cleaned = name.replace(/\s*\(?Mainnet\)?$/i, "").trim(); + return cleaned.length > 0 ? cleaned : name; +}Happy to add a tiny test matrix (e.g., "Ethereum Mainnet", "Mainnet", "Zora (Mainnet)", "Arbitrum mainnet").
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
120-127: Hover styling fine; improve transition and default backgroundUse transparent (clearer intent) and animate background for smoother UX.
- transition: "border 200ms ease", + transition: "border 200ms ease, background 200ms ease, color 200ms ease", ... - if (props.variant === "ghost-solid") { + if (props.variant === "ghost-solid") { return { "&:hover": { background: theme.colors.tertiaryBg, }, - border: "1px solid transparent", + background: "transparent", + border: "1px solid transparent", }; }packages/thirdweb/src/pay/convert/type.ts (1)
36-60: Optional: disambiguate $-prefixed localesConsider locale-specific prefixes (e.g., HK$, CA$, A$) if UI needs clarity across multiple “$” currencies.
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (1)
1-37: Mark hooks as internalThese widget-specific hooks should be annotated to avoid being treated as public API.
-export function useTokens(options: { +/** + * @internal + */ +export function useTokens(options: {packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
164-177: Simplify background color helperAll branches return the same color; collapse the switch.
- const getStepBackgroundColor = ( - status: "pending" | "executing" | "completed" | "failed", - ) => { - switch (status) { - case "completed": - return theme.colors.tertiaryBg; - case "executing": - return theme.colors.tertiaryBg; - case "failed": - return theme.colors.tertiaryBg; - default: - return theme.colors.tertiaryBg; - } - }; + const getStepBackgroundColor = () => theme.colors.tertiaryBg;packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (2)
5-12: Include client in queryKey; set a sane cache policyPrevents cross-client cache bleed and reduces refetch churn.
-export function useBridgeChains(client: ThirdwebClient) { - return useQuery({ - queryKey: ["bridge-chains"], - queryFn: () => { - return chains({ client }); - }, - }); -} +export function useBridgeChains(client: ThirdwebClient) { + return useQuery({ + queryKey: ["bridge-chains", client.clientId], + staleTime: 5 * 60 * 1000, + queryFn: () => chains({ client }), + }); +}
5-12: Mark internalThis is widget plumbing, not a public SDK surface.
-export function useBridgeChains(client: ThirdwebClient) { +/** + * @internal + */ +export function useBridgeChains(client: ThirdwebClient) {packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx (3)
17-28: Make icon decorative and click‑throughSet the search icon to be ignored by screen readers and not intercept pointer events.
<Container color="secondaryText"> <MagnifyingGlassIcon width={iconSize.md} height={iconSize.md} + aria-hidden="true" style={{ position: "absolute", left: spacing.sm, top: "50%", transform: "translateY(-50%)", + pointerEvents: "none", }} /> </Container>
30-38: Avoid magic number; improve a11yCompute left padding from tokens, set proper input type, and add an accessible label.
<Input - variant="outline" + variant="outline" + type="search" placeholder={props.placeholder} value={props.value} style={{ - paddingLeft: "44px", + paddingLeft: `calc(${spacing.sm} + ${iconSize.md}px + ${spacing.xs})`, }} - onChange={(e) => props.onChange(e.target.value)} + aria-label={props.placeholder} + onChange={(e) => props.onChange(e.target.value)} />
6-10: Add explicit types per guidelinesAdd a props alias and explicit return type for the component.
-export function SearchInput(props: { - value: string; - onChange: (value: string) => void; - placeholder: string; -}) { +type SearchInputProps = { + value: string; + onChange: (value: string) => void; + placeholder: string; +}; + +export function SearchInput(props: SearchInputProps): JSX.Element {packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsx (2)
19-39: Loading story renders a non-functional “Load More” buttonPassing a no-op showMore causes the button to render while loading. Omit it in the loading story.
-export function ChainLoading() { +export function ChainLoading(): JSX.Element { @@ - showMore={() => {}} setSearch={() => {}} />
42-53: Add explicit return types to storiesAlign with explicit return types guideline.
-export function WithData() { +export function WithData(): JSX.Element {packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx (3)
13-17: Add explicit return type-export function SelectChainButton(props: { +export function SelectChainButton(props: { selectedChain: BridgeChain; client: ThirdwebClient; onClick: () => void; -}) { +}): JSX.Element {
19-31: Button semantics and accessibilityEnsure it doesn’t submit forms and is labeled for screen readers.
<Button variant="secondary" fullWidth + type="button" + aria-label="Select chain" style={{ justifyContent: "flex-start", fontWeight: 500, fontSize: fontSize.md, padding: `${spacing.sm} ${spacing.sm}`, minHeight: "48px", }}
32-39: Alt text and name cleanupProvide alt text and trim the cleaned name to avoid trailing spaces.
<Img src={props.selectedChain.icon} client={props.client} width={iconSize.lg} height={iconSize.lg} + alt={cleanedChainName(props.selectedChain.name).trim()} /> - <span> {cleanedChainName(props.selectedChain.name)} </span> + <span> {cleanedChainName(props.selectedChain.name).trim()} </span>packages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsx (2)
19-33: Add explicit return type-export function WithData() { +export function WithData(): JSX.Element {
35-51: Add explicit return type-export function Loading() { +export function Loading(): JSX.Element {packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx (3)
13-15: Add explicit return type-export function BasicUsage() { +export function BasicUsage(): JSX.Element {
17-19: Add explicit return type-export function CurrencySet() { +export function CurrencySet(): JSX.Element {
21-23: Add explicit return type-export function LightMode() { +export function LightMode(): JSX.Element {packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
60-66: Remove unused/ineffective flex propertyjustifyItems has no effect on flex containers.
style={{ alignItems: "center", display: "inline-flex", flexShrink: 0, - justifyItems: "center", position: "relative", }}packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (3)
45-51: Grammar/clarity in Account Abstraction section.Small wording fixes for correctness and tone.
- * Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options. - * - * This allows to sponsor gas fees for your user's transaction using the thirdweb account abstraction infrastructure. + * Enable Account Abstraction for all wallets. This connects to the user's smart account based on the connected personal wallet and the given options. + * + * This allows you to sponsor gas fees for your user's transactions using thirdweb's Account Abstraction infrastructure.
121-126: Minor grammar: article before “All Wallets”.- * By default, ConnectButton modal shows a "All Wallets" button that shows a list of 500+ wallets. + * By default, the ConnectButton modal shows an "All Wallets" button that lists 500+ wallets.
129-134: Typo: “Ethererum” → “Ethereum”.- * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to + * Enable SIWE (Sign in with Ethereum) by passing an object of type `SiweAuthOptions` topackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx (1)
25-70: Add explicit return types for story exports.Keep TSX explicit per repo guidelines.
-export function ChainLoading() { +export function ChainLoading(): JSX.Element { ... }-export function Disconnected() { +export function Disconnected(): JSX.Element { ... }packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (3)
19-26: Rename prop type to match component purpose and add return types.Type name says “BuyToken” but this is a chain selector. Also add explicit return types.
-type SelectBuyTokenProps = { +type SelectBridgeChainProps = { onBack: () => void; client: ThirdwebClient; onSelectChain: (chain: BridgeChain) => void; selectedChain: BridgeChain | undefined; }; -export function SelectBridgeChain(props: SelectBuyTokenProps) { +export function SelectBridgeChain(props: SelectBridgeChainProps): JSX.Element { ... } export function SelectBridgeChainUI( - props: SelectBuyTokenProps & { + props: SelectBridgeChainProps & { isPending: boolean; chains: BridgeChain[]; onSelectChain: (chain: BridgeChain) => void; selectedChain: BridgeChain | undefined; - }, -) { + }, +): JSX.Element {Also applies to: 39-46
95-99: Provide keys instead of suppressing lints on skeleton list.-{props.isPending && - new Array(20).fill(0).map(() => ( - // biome-ignore lint/correctness/useJsxKeyInIterable: ok - <ChainButtonSkeleton /> - ))} +{props.isPending && + new Array(20).fill(0).map((_, i) => <ChainButtonSkeleton key={`sk-${i}`} />)}
156-163: Add accessible alt text for chain icons.- <Img + <Img src={props.chain.icon} client={props.client} width={iconSize.lg} height={iconSize.lg} + alt={`${cleanedChainName(props.chain.name)} icon`} />packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
65-70: Make className optional in SwapWidgetContainer props.It’s currently required but can be undefined.
-export function SwapWidgetContainer(props: { - theme: SwapWidgetProps["theme"]; - className: string | undefined; +export function SwapWidgetContainer(props: { + theme: SwapWidgetProps["theme"]; + className?: string;
28-30: Type annotate useActiveWalletInfo() with the exported type.Improves readability and avoids structural drift.
-import type { SwapWidgetConnectOptions } from "./types.js"; +import type { ActiveWalletInfo, SwapWidgetConnectOptions } from "./types.js";-function useActiveWalletInfo() { +function useActiveWalletInfo(): ActiveWalletInfo | undefined {Also applies to: 266-280
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (3)
500-541: Add an accessible label to the switch button control.- <SwitchButtonInner + <SwitchButtonInner + aria-label="Swap selected tokens" variant="outline" onClick={(e) => {
435-467: Alt text for token/chain images.- <Img + <Img src={props.selectedToken.iconUri || ""} client={props.client} width={iconSize.lg} height={iconSize.lg} + alt={`${props.selectedToken.symbol} token icon`} style={{ borderRadius: radius.full, }} /> ... - <Img + <Img src={props.chain.icon} client={props.client} width={iconSize.sm} height={iconSize.sm} + alt={`${cleanedChainName(props.chain.name)} icon`} style={{ borderRadius: radius.full, }} />Also applies to: 459-467
50-58: Explicit return types for exported components.Keep function return types explicit for TSX per guidelines.
-export function SwapUI(props: SwapUIProps) { +export function SwapUI(props: SwapUIProps): JSX.Element {-export function SwapUIBase( +export function SwapUIBase( props: SwapUIProps & { onSelectToken: (type: "buy" | "sell") => void }, -) +) : JSX.Element-function TokenSection(props: { +function TokenSection(props: { ... -}) { +}): JSX.Element {Also applies to: 98-101, 321-331
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx (4)
34-39: Graceful default chain fallback when preferred chain not presentDefaulting to chainId 1 may return undefined if it’s not in the list. Fallback to first available.
- return chains.find((chain) => chain.chainId === (activeChainId || 1)); + return ( + chains.find((chain) => chain.chainId === (activeChainId || 1)) ?? + chains[0] + );
45-46: Right-size pagination: start smaller and increment predictablylimit=1000 is heavy for initial render. Start smaller and grow linearly to reduce query/render cost.
- const [limit, setLimit] = useState(1000); + const [limit, setLimit] = useState(50); @@ - tokensQuery.data?.length === limit + tokensQuery.data?.length === limit ? () => { - setLimit(limit * 2); + setLimit(limit + 50); } : undefinedAlso applies to: 95-99
175-183: Address comparison should be case-insensitiveNormalize both addresses to avoid false negatives.
- isSelected={props.selectedToken?.address === token.address} + isSelected={ + props.selectedToken + ? props.selectedToken.address.toLowerCase() === + token.address.toLowerCase() + : false + }
197-201: Add keys for skeleton rowsPrevents React diff churn even if lint is suppressed.
- {props.isPending && - new Array(20).fill(0).map(() => ( - // biome-ignore lint/correctness/useJsxKeyInIterable: ok - <TokenButtonSkeleton /> - ))} + {props.isPending && + new Array(20).fill(0).map((_, i) => ( + <TokenButtonSkeleton key={i} /> + ))}packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx (5)
41-46: Graceful default chain fallback when preferred chain not presentMirror buy-side fix to avoid undefined default when chainId 1 isn’t available.
- return chains.find((chain) => chain.chainId === (chainId || 1)); + return ( + chains.find((chain) => chain.chainId === (chainId || 1)) ?? chains[0] + );
247-276: Reuse shared SearchInput to remove duplicated markupUse the shared SearchInput component for consistency and less DOM noise. Add the import and replace the inline block.
+import { SearchInput } from "./SearchInput.js";- <Container px="md"> - <div - style={{ - position: "relative", - }} - > - <Container color="secondaryText"> - <MagnifyingGlassIcon - width={iconSize.md} - height={iconSize.md} - style={{ - position: "absolute", - left: spacing.sm, - top: "50%", - transform: "translateY(-50%)", - }} - /> - </Container> - - <Input - variant="outline" - placeholder="Search by Token or Address" - value={props.search} - style={{ - paddingLeft: "44px", - }} - onChange={(e) => props.setSearch(e.target.value)} - /> - </div> - </Container> + <Container px="md"> + <SearchInput + value={props.search} + onChange={props.setSearch} + placeholder="Search by Token or Address" + /> + </Container>Also applies to: 1-33
470-471: Use locale-aware currency formattingImproves readability and i18n.
- {usdValue < 0.01 ? "~$0.00" : `$${usdValue.toFixed(2)}`} + {usdValue < 0.01 + ? "~$0.00" + : usdValue.toLocaleString(undefined, { + style: "currency", + currency: "USD", + maximumFractionDigits: 2, + })}
281-289: Consider virtualization for long listsHeight-locked, scrollable lists of balances can render many rows; virtualize to keep perf smooth on slower devices.
319-323: Add keys for skeleton rowsSame nit as buy-side.
- {props.isPending && - new Array(20).fill(0).map(() => ( - // biome-ignore lint/correctness/useJsxKeyInIterable: ok - <TokenButtonSkeleton /> - ))} + {props.isPending && + new Array(20).fill(0).map((_, i) => ( + <TokenButtonSkeleton key={i} /> + ))}
📜 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 (31)
packages/thirdweb/package.json(1 hunks)packages/thirdweb/src/bridge/types/Chain.ts(1 hunks)packages/thirdweb/src/pay/convert/type.ts(1 hunks)packages/thirdweb/src/react/core/design-system/index.ts(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.ts(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/Img.tsx(5 hunks)packages/thirdweb/src/react/web/ui/components/Skeleton.tsx(2 hunks)packages/thirdweb/src/react/web/ui/components/Spinner.tsx(2 hunks)packages/thirdweb/src/react/web/ui/components/basic.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/buttons.tsx(3 hunks)packages/thirdweb/src/react/web/ui/components/formElements.tsx(2 hunks)packages/thirdweb/src/react/web/ui/components/text.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/BuyWidget.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/components/Spinner.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.tspackages/thirdweb/src/react/web/ui/components/DynamicHeight.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/components/text.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.tspackages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/components/Img.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/bridge/types/Chain.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.tspackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/components/formElements.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsxpackages/thirdweb/src/pay/convert/type.tspackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/components/Skeleton.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/components/Spinner.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.tspackages/thirdweb/src/react/web/ui/components/DynamicHeight.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/components/text.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.tspackages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/components/Img.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/bridge/types/Chain.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.tspackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/components/formElements.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsxpackages/thirdweb/src/pay/convert/type.tspackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/components/Skeleton.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/components/Spinner.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.tspackages/thirdweb/src/react/web/ui/components/DynamicHeight.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/components/text.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.tspackages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/components/Img.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/bridge/types/Chain.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.tspackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/components/formElements.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsxpackages/thirdweb/src/pay/convert/type.tspackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/components/Skeleton.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx
**/types.ts
📄 CodeRabbit inference engine (AGENTS.md)
Provide and re‑use local type barrels in a
types.tsfile
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
packages/thirdweb/package.json
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Pull‑request titles must start with the affected workspace in brackets (e.g., [SDK], [Dashboard], [Portal], [Playground])
📚 Learning: 2025-07-02T20:04:53.982Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/components/Spinner.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#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/use-bridge-chains.tspackages/thirdweb/src/react/web/ui/components/Img.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#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/use-bridge-chains.tspackages/thirdweb/src/react/web/ui/components/Img.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#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/swap-widget/use-bridge-chains.ts
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#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/ConnectWallet/icons/ArrowUpDownIcon.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.stories.tsx : For new UI components, add Storybook stories (`*.stories.tsx`) alongside the code
Applied to files:
packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.{stories,test}.{tsx,ts} : Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
Applied to files:
packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsxpackages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsx
📚 Learning: 2025-05-29T10:49:52.981Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/components/Img.tsx
📚 Learning: 2025-08-09T15:37:30.990Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/components/Img.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/components/Img.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to **/*.test.{ts,tsx} : Keep tests deterministic and side‑effect free; use Vitest
Applied to files:
packages/thirdweb/package.json
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.test.{ts,tsx} : Keep tests deterministic and side-effect free
Applied to files:
packages/thirdweb/package.json
📚 Learning: 2025-06-26T19:46:04.024Z
Learnt from: gregfromstl
PR: thirdweb-dev/js#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/pay/convert/type.ts
📚 Learning: 2025-08-28T19:32:53.229Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/buttons.tsx
🧬 Code graph analysis (17)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx (5)
packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)packages/thirdweb/src/react/core/design-system/index.ts (3)
fontSize(164-172)spacing(174-185)iconSize(197-206)packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
Img(12-126)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.ts (1)
cleanedChainName(1-3)
packages/thirdweb/src/stories/Bridge/Swap/SelectBuyToken.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx (2)
SelectBuyTokenUI(105-240)SelectBuyToken(41-103)packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
SwapWidgetContainer(65-84)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/components/Img.tsx (3)
packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(77-178)packages/thirdweb/src/react/core/design-system/index.ts (1)
radius(187-195)
packages/thirdweb/src/stories/Bridge/Swap/SelectChain.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (2)
SelectBridgeChain(26-37)SelectBridgeChainUI(39-118)packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
SwapWidgetContainer(65-84)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (2)
packages/thirdweb/src/wallets/types.ts (1)
AppMetadata(3-20)packages/thirdweb/src/bridge/types/Chain.ts (1)
Chain(5-40)
packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
SwapWidget(45-63)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (1)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
packages/thirdweb/src/react/core/design-system/index.ts (1)
Theme(49-96)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (15)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (2)
ActiveWalletInfo(137-141)SwapWidgetConnectOptions(25-135)packages/thirdweb/src/react/core/design-system/index.ts (5)
Theme(49-96)radius(187-195)fontSize(164-172)spacing(174-185)iconSize(197-206)packages/thirdweb/src/pay/convert/type.ts (2)
SupportedFiatCurrency(27-27)getFiatSymbol(29-34)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx (1)
SelectBuyToken(41-103)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx (1)
SelectSellToken(48-67)packages/thirdweb/src/exports/utils.ts (2)
toUnits(39-39)toTokens(39-39)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(77-178)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
Input(36-106)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-12)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
Img(12-126)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.ts (1)
cleanedChainName(1-3)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/ArrowUpDownIcon.tsx (1)
ArrowUpDownIcon(3-23)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (1)
packages/thirdweb/src/exports/utils.ts (1)
isAddress(148-148)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx (3)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(77-178)packages/thirdweb/src/react/core/design-system/index.ts (2)
iconSize(197-206)spacing(174-185)packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
Input(36-106)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx (10)
packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-12)packages/thirdweb/src/react/web/ui/components/basic.tsx (3)
Container(77-178)ModalHeader(35-65)Line(67-72)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx (1)
SearchInput(6-41)packages/thirdweb/src/react/core/design-system/index.ts (3)
spacing(174-185)iconSize(197-206)fontSize(164-172)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
Img(12-126)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/utils.ts (1)
cleanedChainName(1-3)
packages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx (3)
SelectSellToken(48-67)SelectSellTokenConnectedUI(190-362)SelectSellTokenDisconnectedUI(69-120)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
ActiveWalletInfo(137-141)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
SwapWidgetContainer(65-84)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-sell-token.tsx (12)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
ActiveWalletInfo(137-141)packages/thirdweb/src/react/web/ui/components/basic.tsx (3)
Container(77-178)ModalHeader(35-65)Line(67-72)packages/thirdweb/src/react/core/design-system/index.ts (4)
radius(187-195)iconSize(197-206)spacing(174-185)fontSize(164-172)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-12)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (2)
useTokenBalances(71-115)TokenBalance(39-57)packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
Spinner(11-36)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx (1)
SelectChainButton(13-47)packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
Input(36-106)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)packages/thirdweb/src/pay/convert/get-token.ts (1)
getToken(6-37)packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
Img(12-126)packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (15)
packages/thirdweb/src/react/core/design-system/index.ts (1)
Theme(49-96)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapWidgetConnectOptions(25-135)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(441-466)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-12)packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
Spinner(11-36)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (1)
SwapUI(50-96)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(87-173)packages/thirdweb/src/exports/utils.ts (1)
toTokens(39-39)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(57-398)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(66-404)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx (13)
packages/thirdweb/src/bridge/types/Chain.ts (1)
BridgeChain(42-42)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts (1)
useBridgeChains(5-12)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts (1)
useTokens(7-37)packages/thirdweb/src/react/web/ui/components/basic.tsx (3)
Container(77-178)ModalHeader(35-65)Line(67-72)packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
Spinner(11-36)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SelectChainButton.tsx (1)
SelectChainButton(13-47)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SearchInput.tsx (1)
SearchInput(6-41)packages/thirdweb/src/react/core/design-system/index.ts (4)
radius(187-195)spacing(174-185)fontSize(164-172)iconSize(197-206)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)packages/thirdweb/src/pay/convert/get-token.ts (1)
getToken(6-37)packages/thirdweb/src/react/web/ui/components/Img.tsx (1)
Img(12-126)packages/thirdweb/src/react/web/ui/components/Skeleton.tsx (1)
Skeleton(10-28)
🪛 Gitleaks (8.27.2)
packages/thirdweb/src/stories/BuyWidget.stories.tsx
[high] 31-31: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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: 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: Socket Security: Pull Request Alerts
- GitHub Check: Analyze (javascript)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx
Outdated
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-buy-token.tsx
Outdated
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx
Outdated
Show resolved
Hide resolved
packages/thirdweb/src/stories/Bridge/Swap/SelectSellToken.stories.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
159-229: Add the required custom TSDoc tag to the publicSwapWidget.Public symbols under packages/thirdweb must include a custom tag (e.g.,
@beta). Keep return type as-is per maintainer preference./** * A widget for swapping tokens with cross-chain support + * @beta * * @param props - Props of type [`SwapWidgetProps`](https://portal.thirdweb.com/references/typescript/v5/SwapWidgetProps) to configure the SwapWidget component.
396-407: Bug: assigning prepared result where a Quote is required.
screen.quoteexpectsBuy.quote.Result | Sell.quote.Resultbutdata.resultis a prepared result. PaymentDetails receivesquote: screen.quote, so this is a type/shape mismatch.Apply this change here:
setScreen({ id: "2:preview", buyToken: data.buyToken, sellToken: data.sellToken, sellTokenBalance: data.sellTokenBalance, mode: data.mode, preparedQuote: data.result, request: data.request, - quote: data.result, + quote: data.quote, });And plumb the non‑prepared quote from SwapUI:
- In swap-ui.tsx, extend the
onSwappayload to includequote: Buy.quote.Result | Sell.quote.Result.- In the preparedResult branch of
useSwapQuote, return the associated quote (if not already available, fetch/retain it alongsideprepare).If the prepared payload already includes a
quotefield, pass that through instead of re-fetching.
🧹 Nitpick comments (3)
apps/dashboard/src/@/analytics/report.ts (1)
331-341: Fix JSDoc for “cancelled” event (not an error case).Second bullet references errors; adjust to reflect cancellations.
- * - To track number of cancelled asset purchases from the token page - * - To track the errors that users encounter when trying to purchase an asset + * - To track number of cancelled asset purchases from the token page + * - To understand where/when users abandon the purchase flowpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
355-359: LocalStorage persistence: safe but noisy when both tokens are undefined.
setLastUsedTokens({ buyToken, sellToken })is called even when both areundefined; the schema likely rejects and no-ops. Optional: guard to skip writes when both unset to avoid unnecessary work.useEffect(() => { - setLastUsedTokens({ buyToken, sellToken }); + if (buyToken || sellToken) { + setLastUsedTokens({ buyToken, sellToken }); + } }, [buyToken, sellToken]);
488-496: Open TODO: clarifyhasPaymentId.Either expose as a prop or remove the TODO if not needed; leaving TODOs in public surface UI can rot.
📜 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 (4)
.changeset/lucky-turtles-smell.md(1 hunks)apps/dashboard/src/@/analytics/report.ts(2 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧰 Additional context used
📓 Path-based instructions (7)
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/lucky-turtles-smell.md
**/*.{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:
apps/dashboard/src/@/analytics/report.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/analytics/report.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/src/@/analytics/report.ts
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/src/@/analytics/report.ts: Checkreport.tsbefore adding a new analytics event to avoid duplicates
Analytics naming: event name as<subject> <verb>; helper function asreport<Subject><Verb>(PascalCase)
Each analytics helper must include a JSDoc header (Why/Owner), accept a single typedpropertiesobject, and forward it unchanged toposthog.capture
Files:
apps/dashboard/src/@/analytics/report.ts
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/swap-widget/SwapWidget.tsx
🧠 Learnings (11)
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
.changeset/lucky-turtles-smell.md
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Analytics naming: event name as `<subject> <verb>`; helper function as `report<Subject><Verb>` (PascalCase)
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Analytics event name: human-readable `<subject> <verb>` (e.g., "contract deployed"); function: `report<Subject><Verb>` (PascalCase)
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Review `src/@/analytics/report.ts` before adding analytics events to check for duplicates
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Check `report.ts` before adding a new analytics event to avoid duplicates
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/src/@/analytics/report.ts : Each analytics helper must include a JSDoc header (Why/Owner), accept a single typed `properties` object, and forward it unchanged to `posthog.capture`
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/src/@/analytics/report.ts : Mandatory JSDoc: explain Why the event exists and Who owns it (`username`).
Applied to files:
apps/dashboard/src/@/analytics/report.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#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/SwapWidget.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to packages/thirdweb/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one compiling `example` and a custom tag (`beta`, `internal`, `experimental`, etc.)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
📚 Learning: 2025-09-03T23:35:50.476Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.476Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (13)
packages/thirdweb/src/react/core/design-system/index.ts (1)
Theme(49-96)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (3)
SwapWidgetConnectOptions(26-135)SwapPreparedQuote(154-157)TokenSelection(149-152)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(441-466)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (1)
BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(25-32)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts (1)
useActiveWalletInfo(7-21)packages/thirdweb/src/exports/utils.ts (1)
getAddress(147-147)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/storage.ts (2)
getLastUsedTokens(23-41)setLastUsedTokens(43-56)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/swap-ui.tsx (1)
SwapUI(112-406)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)
⏰ 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). (1)
- GitHub Check: Unit Tests
🔇 Additional comments (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
446-468: Callback wiring looks correct.onCancel/onComplete forward to external callbacks and drive screen transitions as expected.
apps/dashboard/src/@/analytics/report.ts (2)
261-299: Approve — naming follows " " and helpers accept a single typed object; no duplicate events found. Repo search returns only the captures in apps/dashboard/src/@/analytics/report.ts.
253-260: Type looks good; confirm upstream normalization of addresses.TokenSwapParams is declared in apps/dashboard/src/@/analytics/report.ts; repo search found no call sites that normalize buyTokenAddress/sellTokenAddress — verify callers send EIP‑55 checksummed or consistently lower‑cased addresses to avoid analytics cardinality explosions. If normalization is done here, normalize a copy (do not mutate the original) and document the exception to the "forward unchanged" guideline.
github-actions
bot
added
the
Playground
MananTank
changed the title
MananTank
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/playground-web/src/app/payments/components/types.ts (1)
41-45: Prefer optional properties overstring | undefinedUse
?for optional fields; it’s clearer and avoids explicitundefinedunions.- title: string | undefined; - image: string | undefined; - description: string | undefined; - buttonLabel: string | undefined; + title?: string; + image?: string; + description?: string; + buttonLabel?: string;apps/playground-web/src/app/payments/components/LeftSection.tsx (2)
153-161: Replace unsafe type assertion with a small runtime guard (and single source of truth).Casting
value as SupportedFiatCurrencytrusts uncontrolled input from the Select. Add a whitelist guard to avoid impossible states and keep types honest.Apply this diff to the handler:
- onValueChange={(value) => { - setOptions((v) => ({ - ...v, - payOptions: { - ...v.payOptions, - currency: value as SupportedFiatCurrency, - }, - })); - }} + onValueChange={(value) => { + if (!SUPPORTED_CURRENCIES.has(value as SupportedFiatCurrency)) { + console.warn("Unsupported currency:", value); + return; + } + setOptions((v) => ({ + ...v, + payOptions: { + ...v.payOptions, + currency: value as SupportedFiatCurrency, + }, + })); + }}Add this near the imports to define an explicit, typed set (keeps JSX list and validation in sync):
// Single source of truth for allowed currencies in this UI: const SUPPORTED_CURRENCIES = new Set<SupportedFiatCurrency>([ "USD","EUR","GBP","JPY","KRW","CNY","INR","NOK","SEK","CHF","AUD","CAD", "NZD","MXN","BRL","CLP","CZK","DKK","HKD","HUF","IDR","ILS","ISK", ]);
35-41: Add explicit return type to the component to match repo TypeScript guidelines.Declare
: JSX.Elementon the component definition.-export function LeftSection(props: { +export function LeftSection(props: { options: BridgeComponentsPlaygroundOptions; setOptions: React.Dispatch< React.SetStateAction<BridgeComponentsPlaygroundOptions> >; lockedWidget?: "buy" | "checkout" | "transaction"; -}) { +}): JSX.Element {
📜 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)
apps/playground-web/src/app/payments/components/LeftSection.tsx(2 hunks)apps/playground-web/src/app/payments/components/types.ts(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 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:
apps/playground-web/src/app/payments/components/LeftSection.tsxapps/playground-web/src/app/payments/components/types.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/playground-web/src/app/payments/components/LeftSection.tsxapps/playground-web/src/app/payments/components/types.ts
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/playground-web/src/app/payments/components/LeftSection.tsxapps/playground-web/src/app/payments/components/types.ts
**/types.ts
📄 CodeRabbit inference engine (AGENTS.md)
Provide and re‑use local type barrels in a
types.tsfile
Files:
apps/playground-web/src/app/payments/components/types.ts
🧠 Learnings (1)
📚 Learning: 2025-06-26T19:46:04.024Z
Learnt from: gregfromstl
PR: thirdweb-dev/js#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:
apps/playground-web/src/app/payments/components/types.ts
🧬 Code graph analysis (2)
apps/playground-web/src/app/payments/components/LeftSection.tsx (1)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
apps/playground-web/src/app/payments/components/types.ts (1)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
⏰ 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). (4)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/playground-web/src/app/payments/components/types.ts (2)
31-31: LGTM: safer currency typingNarrowing to the literal union improves type safety in the playground.
5-31: De-duplicate currency semantics — reuse the canonical SupportedFiatCurrencyReplace the local CURRENCIES/type with the package's canonical SupportedFiatCurrency to avoid drift.
Apply:
@@ import type { ThemeOverrides } from "thirdweb/react"; import type { Address } from "thirdweb/utils"; +import type { SupportedFiatCurrency as TWSupportedFiatCurrency } from "thirdweb/pay/convert/type"; @@ -type SupportedFiatCurrency = (typeof CURRENCIES)[number]; +type SupportedFiatCurrency = TWSupportedFiatCurrency;Canonical export is at packages/thirdweb/src/pay/convert/type.ts — verify the import path and adjust if it's re-exported under a different public path.
apps/playground-web/src/app/payments/components/LeftSection.tsx (1)
30-30: Don't deep‑import types from dist — use the public pay exportSupportedFiatCurrency is declared at packages/thirdweb/src/pay/convert/type.ts and packages/thirdweb/package.json includes a "./pay" export, but I couldn't find a public re‑export of SupportedFiatCurrency in source.
- If thirdweb/pay already exports it: replace the deep import with
import type { SupportedFiatCurrency } from "thirdweb/pay";- If not: re‑export SupportedFiatCurrency from the pay public entry (e.g., packages/thirdweb/src/pay/index.ts or packages/thirdweb/src/exports/pay.ts) and then switch this import.
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. |
PR-Codex overview
This PR focuses on enhancing the
thirdweblibrary by introducing new components and functionalities related to token swapping and bridging, alongside various UI improvements and bug fixes.Detailed summary
BridgeChaintype inChain.ts.cleanedChainNamefunction for formatting chain names.SwapWidgetcomponent for token swapping.ConnectButton,Modal, and various UI components with new titles and properties.paymentMachine.ts.BuyAndSwapEmbedcomponent to support both buying and swapping tokens.PaymentDetailsto handle new props for better flexibility.Summary by CodeRabbit
New Features
UI / Style
Analytics
Documentation
Chores