[BLD-286] SDK: add stable classNames to elements in Connect UI #8065
Conversation
🦋 Changeset detectedLatest commit: e882c09 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.
|
WalkthroughPatch introduces Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ConnectButton
participant ConnectModal
participant WalletSelector
participant InAppWalletSelectionUI
User->>ConnectButton: Click
ConnectButton->>ConnectModal: Open (tw-modal__connect-wallet)
ConnectModal->>WalletSelector: Render
Note over WalletSelector: New: direct import/render<br/>(lazy/Suspense removed)
WalletSelector->>InAppWalletSelectionUI: Render in-app path
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
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/ConnectWallet/Details.tsx (1)
739-749: Add rel="noopener noreferrer" to external links opened with target="_blank"Anchor opens a new tab without rel, which risks reverse‑tabnabbing — add rel="noopener noreferrer".
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx (lines 739-749)
- <MenuLink + <MenuLink className="tw-request-testnet-funds-button" as="a" href={ chainFaucetsQuery.faucets ? chainFaucetsQuery.faucets[0] : "#" } + rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", }} target="_blank" >
- Also missing rel on other target="_blank" usages: packages/thirdweb/src/react/web/ui/ConnectWallet/TransactionsScreen.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/PoweredByTW.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/TOS.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/StartScreen.tsx, and the Link in Details.tsx (around line 1248).
🧹 Nitpick comments (19)
packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
25-25: Allow consumers to append classes; merge withcls.Hardcoding a single class blocks future className extension. Add an optional
classNameprop and compose withtw-spinner.Apply this diff in place:
- className="tw-spinner" + className={cls("tw-spinner", props.className)}And also apply outside this hunk:
@@ -import { StyledCircle, StyledSvg } from "../design-system/elements.js"; +import { StyledCircle, StyledSvg } from "../design-system/elements.js"; +import { cls } from "../../utils/cls.js"; @@ -export const Spinner: React.FC<{ +export const Spinner: React.FC<{ size: keyof typeof iconSize; style?: React.CSSProperties; color?: keyof Theme["colors"]; + className?: string; }> = (props) => {packages/thirdweb/.storybook/global.css (1)
14-17: Scope the debug outline to an opt‑in attribute to avoid accidental wide impact.Keep it commented, or scope it to Storybook root with an attribute to prevent accidental check‑ins:
/* Debug TW hooks only when enabled on root */ /* [data-debug-tw] [class*="tw-"] { outline: 1px dotted yellow !important; } */packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx (2)
164-176: Docs: advise scoping overrides under the root hook.Recommend scoping CSS to
.tw-connect-walletto reduce bleed:.tw-connect-wallet .tw-back-button { background-color: red !important; }
368-386: Useclsinstead of manual concatenation to avoid stray spaces and keep consistency.Current concatenation can yield double spaces and diverges from the new
clshelper.Apply these diffs in place:
- const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`; + const combinedClassName = cls(props.connectButton?.className, TW_CONNECT_WALLET);- const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`; + const combinedClassName = cls(props.connectButton?.className, TW_CONNECT_WALLET);- const combinedClassName = `${props.connectButton?.className || ""} ${TW_CONNECT_WALLET}`; + const combinedClassName = cls(props.connectButton?.className, TW_CONNECT_WALLET);Also add the import at the top (outside this hunk):
+import { cls } from "../../utils/cls.js";Also applies to: 475-508, 515-531
packages/thirdweb/src/react/web/ui/components/OTPInput.tsx (1)
24-24: ExposeclassNameand compose withtw-hook.Let consumers extend styles and use the shared
clshelper.Apply this change in place:
- <OTPInputContainer className="tw-otp-input-container"> + <OTPInputContainer className={cls("tw-otp-input-container", props.className)}>And apply outside this hunk:
@@ -import { Container } from "./basic.js"; +import { Container } from "./basic.js"; +import { cls } from "../../utils/cls.js"; @@ -export function OTPInput(props: { +export function OTPInput(props: { digits: number; isInvalid?: boolean; value: string; setValue: (value: string) => void; onEnter: () => void; + className?: string; }) {Optional tidy (keeps prop aligned with behavior):
- <InputOTP - maxLength={6} + <InputOTP + maxLength={props.digits}packages/thirdweb/src/react/web/ui/components/modalElements.tsx (1)
29-33: Add accessible label to the back button.Improves a11y for screen readers.
- <IconButton + <IconButton className="tw-back-button" onClick={props.onClick} + aria-label="Back" style={{ transform: "translateX(-25%)", ...props.style }} type="button" >packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx (1)
60-63: Namespace the button hook under the screen to avoid collisions.Aligns with BEM‑ish pattern used elsewhere (
tw-send-funds-screen__*).- <WalletAddressContainer - onClick={onCopy} - className="tw-copy-address-button" - > + <WalletAddressContainer + onClick={onCopy} + className="tw-receive-funds-screen__copy-address-button" + >packages/thirdweb/src/react/web/utils/cls.ts (1)
11-13: Tighten types and ignore empty strings.This matches common
clsxsemantics without adding a dep.-export function cls(...classes: (string | unknown)[]) { - return classes.filter((v) => typeof v === "string").join(" "); -} +export function cls( + ...classes: Array<string | false | null | undefined> +): string { + return classes.filter((v): v is string => typeof v === "string" && v.length > 0).join(" "); +}packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (2)
165-176: Doc note: caution against overusing !importantGood guidance. Consider adding one line advising users to scope overrides under a stable root class (see next comment) before resorting to !important.
283-287: Add a stable root hook class to EmbedContainer in both statesRight now the loading branch has a hook (tw-widget-loading), but the steady-state container only forwards props.className. Add a stable base like tw-connect-embed to both branches so downstream CSS doesn’t have to pass a className just to target the root.
@@ - <EmbedContainer - modalSize={modalSize} - className={cls("tw-widget-loading", props.className)} - style={props.style} - > + <EmbedContainer + modalSize={modalSize} + className={cls("tw-connect-embed tw-widget-loading", props.className)} + style={props.style} + > @@ - <EmbedContainer - className={props.className} + <EmbedContainer + className={cls("tw-connect-embed", props.className)} modalSize={modalSize} style={props.style} >Also applies to: 445-447
packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx (2)
253-258: Make error messages screen-reader friendlyAdd ARIA to announce errors without user focus changes.
- <Text + <Text + role="alert" + aria-live="polite" center color="danger" size="sm" className="tw-invalid-code-text" > @@ - <Text + <Text + role="alert" + aria-live="polite" center color="danger" size="sm" className="tw-screen-error" > @@ - <Text + <Text + role="alert" + aria-live="polite" center color="danger" size="sm" className="tw-screen-error" > @@ - <Text + <Text + role="alert" + aria-live="polite" center color="danger" size="sm" className="tw-screen-error" >Also applies to: 268-272, 281-286, 323-327
353-359: Expose disabled state for accessibility on ResendThe click handler is omitted during countdown, but the control isn’t announced as disabled. Add aria-disabled (and optionally data-countdown) for clarity.
- <LinkButton + <LinkButton onClick={countdown === 0 ? sendEmailOrSms : undefined} style={{ cursor: countdown > 0 ? "default" : "pointer", opacity: countdown > 0 ? 0.5 : 1, }} className="tw-resend-button" + aria-disabled={countdown > 0} + data-countdown={countdown} type="button" >packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx (1)
75-102: Minor a11y: reflect disabled and announce failures
- Copy Link: expose disabled state via ARIA when URI is missing.
- Failed title: announce via ARIA to assistive tech.
- <Button + <Button className="tw-copy-link-button" disabled={props.qrCodeUri === undefined} onClick={() => { @@ style={{ cursor: props.qrCodeUri === undefined ? "default" : "pointer", fontSize: "12px", opacity: props.qrCodeUri === undefined ? 0.5 : 1, }} + aria-disabled={props.qrCodeUri === undefined} variant="link" > @@ - <Text + <Text + role="alert" + aria-live="polite" center color="primaryText" size="lg" className="tw-screen-title" data-status="failed" >Also applies to: 132-138
packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx (1)
73-80: Announce connection status changes to screen readersAdd aria-live for dynamic status, and role=status for semantic intent.
- <Text + <Text + role="status" + aria-live="polite" center color="primaryText" size="lg" weight={600} className="tw-screen-title" data-status={props.errorConnecting ? "failed" : "in-progress"} >packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx (1)
171-181: Align title hook with others and remove trailing whitespaceAdd data-status to the title (failed vs in-progress) and drop the extra space.
- <Text + <Text center color="primaryText" size="lg" - className="tw-screen-title" + className="tw-screen-title" + data-status={status === "failed" ? "failed" : "in-progress"} > {status === "failed" ? error || locale.signingScreen.failedToSignIn - : locale.signingScreen.inProgress}{" "} + : locale.signingScreen.inProgress} </Text>packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx (1)
199-203: Confirm Modal merges base and custom classesAssuming Modal composes className with its base (e.g., "tw-modal"), this hook is good. If it replaces the base, please merge with cls to avoid losing default styles.
If needed, ensure Modal does:
className={cls("tw-modal", props.className)}packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx (1)
61-62: Tests: consider adding data-testid as a fallbackSelector update is fine. To decouple tests from styling hooks, also expose a
data-testidon the button and query it here as primary, keeping the class selector as a secondary check.packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx (1)
149-150: Add a stable base class to the content containerForwarding
classNameis good. For consistency with the PR goal (“stable class hooks”), also include a default base class and merge viacls.Apply:
- <Container className={props.className}> + <Container className={cls("tw-network-selector", props.className)}>And add the import:
+import { cls } from "../../utils/cls.js";Also applies to: 368-369
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
26-26: Expose and forward className (nice); add a default base hookForwarding is correct. Recommend adding an always-present base class for stable targeting in addition to consumer overrides.
+import { cls } from "../../utils/cls.js"; ... - <WalletButtonEl - className={props.className} + <WalletButtonEl + className={cls("tw-wallet-entry-button", props.className)} data-active={props.isActive}Also applies to: 60-61
📜 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 (32)
.changeset/nice-owls-double.md(1 hunks)packages/thirdweb/.storybook/global.css(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx(10 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(3 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx(3 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx(8 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx(7 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx(2 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/Modal.tsx(3 hunks)packages/thirdweb/src/react/web/ui/components/OTPInput.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/Spinner.tsx(1 hunks)packages/thirdweb/src/react/web/ui/components/basic.tsx(4 hunks)packages/thirdweb/src/react/web/ui/components/modalElements.tsx(1 hunks)packages/thirdweb/src/react/web/utils/cls.ts(1 hunks)packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx(2 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx(9 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx(3 hunks)packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx(8 hunks)packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx(5 hunks)packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx(1 hunks)packages/thirdweb/src/stories/ConnectEmbed.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/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsxpackages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsxpackages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/components/OTPInput.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/components/Spinner.tsxpackages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.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/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsxpackages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsxpackages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/components/OTPInput.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/components/Spinner.tsxpackages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.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/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsxpackages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsxpackages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/components/OTPInput.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/components/Spinner.tsxpackages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsxpackages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Place tests alongside code:foo.ts↔foo.test.ts
Use real function invocations with stub data in tests; avoid brittle mocks
Use Mock Service Worker (MSW) for fetch/HTTP call interception in tests
Keep tests deterministic and side-effect free
UseFORKED_ETHEREUM_CHAINfor mainnet interactions andANVIL_CHAINfor isolated tests
**/*.test.{ts,tsx}: Co‑locate tests asfoo.test.ts(x)next to the implementation
Use real function invocations with stub data; avoid brittle mocks
Use MSW to intercept HTTP calls for network interactions; mock only hard‑to‑reproduce scenarios
Keep tests deterministic and side‑effect free; use Vitest
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx
.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/nice-owls-double.md
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
🧠 Learnings (26)
📓 Common learnings
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/**/*.{tsx,jsx} : Combine class names via `cn`, expose `className` prop if useful.
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).
📚 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 apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/ui/components/OTPInput.tsxpackages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsxpackages/thirdweb/src/react/web/ui/components/basic.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.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/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.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/**/*.{tsx,jsx} : Add `className` to the root element of every component for external overrides.
Applied to files:
packages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/ui/components/basic.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 : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsxpackages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.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}/**/*.tsx : Expose a `className` prop on the root element of every component
Applied to files:
packages/thirdweb/src/react/web/ui/components/Modal.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsxpackages/thirdweb/src/react/web/ui/components/basic.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}/**/*.{ts,tsx} : Merge class names with `cn()` from `@/lib/utils` for conditional classes
Applied to files:
packages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/components/basic.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/**/*.{tsx,jsx} : Combine class names via `cn`, expose `className` prop if useful.
Applied to files:
packages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/components/basic.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/**/*.{tsx,jsx} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
packages/thirdweb/src/react/web/utils/cls.tspackages/thirdweb/src/react/web/ui/components/basic.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/wallets/** : Unified `Wallet` and `Account` interfaces in wallet architecture
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.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/**/*.{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/ConnectWallet/ConnectButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
📚 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-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/ConnectEmbed.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/ConnectEmbed.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/ConnectEmbed.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/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.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 : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.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/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/ConnectWallet/WalletSelector.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 : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
📚 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:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.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}/**/*.{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/ConnectWallet/WalletSelector.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}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.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 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/ConnectWallet/WalletSelector.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/**/*.{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/ConnectWallet/WalletSelector.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/**/*.{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/components/basic.tsx
🧬 Code graph analysis (16)
packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (1)
spacing(174-186)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(26-157)
packages/thirdweb/src/react/web/ui/components/Modal.tsx (1)
packages/thirdweb/src/react/web/utils/cls.ts (1)
cls(11-13)
packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/utils/cls.ts (1)
cls(11-13)
packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (3)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
ConnectEmbed(198-325)packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx (1)
ConnectButton(301-424)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
WalletEntryButton(25-95)
packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
packages/thirdweb/src/react/web/utils/cls.ts (1)
cls(11-13)
⏰ 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: Lint Packages
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (21)
packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx (1)
559-564: PassingclassNametoModallooks good.This satisfies the new styling hook for the sign‑in modal. No issues.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx (1)
38-38: Screen‑level hook looks good.
tw-receive-funds-screenprovides a clear namespace for overrides.packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx (1)
209-214: LGTM: stable hooks for OTP screen and titleRoot and title hooks look good and match the project pattern.
Also applies to: 227-229
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx (1)
14-15: LGTM: className passthroughForwarding className to Button is consistent with the rest of the UI.
Also applies to: 21-21
packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx (1)
43-48: LGTM: added hooks across scan screen statesConsistent tw- hooks for root, buttons, description, and error states.
Also applies to: 76-77, 110-114, 132-138, 143-148, 165-166
packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx (1)
34-39: LGTM: consistent screen hooks and status data attributeMatches the rest of the PR’s pattern.
Also applies to: 73-80, 115-119
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx (1)
183-192: LGTM: description hook during signingtw-screen-description is consistent with other screens.
packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx (1)
16-18: LGTM: className passthrough to InputContainerEnables external styling; no behavior change.
Also applies to: 67-67
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx (1)
121-121: LGTM — stable modal hook added
className="tw-modal__connect-wallet"provides a clear, stable hook without behavior changes.packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (1)
71-71: LGTM — stable modal hook added
className="tw-modal__view-transaction"aligns with the new modal class strategy.packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx (1)
157-162: LGTM — screen-level hook added
className="tw-social-login-screen"on the root Container is consistent with the new pattern.packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx (1)
94-99: LGTM — screen-level hook added
className="tw-guest-login-screen"applied consistently on the root Container.packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx (1)
72-77: LGTM — WalletEntryButton forwards classNameDeclares className?: string and passes props.className to the root element (packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx:25, 59–61).
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx (1)
104-105: LGTM — NetworkSelectorContent accepts and applies className
NetworkSelectorContentProps includesclassName?: stringand the component's root Container rendersclassName={props.className}in packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx, so the TokenSelector usage is valid.packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx (1)
958-959: LGTM: modal-level hook added
tw-modal__switch-networkprovides a clear, stable scope for styling/QA.packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx (1)
575-580: LGTM: comprehensive, scoped class hooksGood coverage: highlight actions, view/manage/disconnect, network switcher, and modal scope (
tw-modal__wallet-details). Names are consistent and composable.Also applies to: 583-596, 613-626, 638-657, 689-701, 707-717, 722-733, 770-785, 1012-1013, 1056-1057
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx (1)
201-213: LGTM: clear, stable hooks across Wallet SelectorHeader, primary CTA, “get started” container, wallet items, and “show all” affordances now have stable classes. Good for QA/theming.
Also applies to: 221-230, 234-251, 490-491, 636-636, 656-670
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (1)
8-33: LGTM: Storybook coverage addedUseful permutations; decorator with a floating ConnectButton aids manual testing.
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
40-46: LGTM:classNamesupport and default header hookModalHeader now reliably exposes
tw-headerwhile allowing overrides; Container forwardsclassName. Matches the PR’s styling‑hook goals.Also applies to: 100-101, 184-184
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx (1)
173-177: LGTM — no stale SendFunds selectors foundrg search for "tw-sendfunds-screen-send-button|tw_sendfunds_screen_send_button|sendfunds" returned only SendFunds components, stories, and tests; no hits for the old button-class selectors.
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
361-362: LGTM — approving changesInputSelectionUI forwards props.className to InputContainer and WalletTypeRowButton forwards props.className to Button; StyledDiv/StyledButton are built on styled.div / styled.button so className reaches the DOM.
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| "thirdweb": patch | |||
There was a problem hiding this comment.
🧩 Analysis chain
Changeset bump likely incorrect (API surface changed).
This PR appears to make Modal require a className prop. That’s a public API change and should be a minor bump per our rules, unless we revert to a non‑breaking optional prop. Pick one:
- Option A (versioning): bump to minor.
- Option B (code): make
classNameoptional and default internally so this remains patch.
Apply this diff for Option A:
-"thirdweb": patch
+"thirdweb": minorRun to confirm whether className is required and that all usages pass it:
🏁 Script executed:
#!/bin/bash
set -e
echo "Check Modal prop type:"
rg -nC2 -g 'packages/thirdweb/**/Modal.tsx' -P 'export (const|function)\s+Modal\b'
echo "Find <Modal> without className:"
rg -nP --type tsx -g 'packages/thirdweb/**' '<Modal(?![^>]*\bclassName=)'Length of output: 527
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "==== Modal.tsx (head) ===="
sed -n '1,240p' packages/thirdweb/src/react/web/ui/components/Modal.tsx || true
echo
echo "==== className occurrences inside Modal.tsx ===="
rg -n 'className' packages/thirdweb/src/react/web/ui/components/Modal.tsx || true
echo
echo "==== Scanning all TSX files for <Modal opening tags (reports if className present) ===="
python3 - <<'PY'
import re,glob
open_tag_re = re.compile(r'<Modal\b(.*?>)', re.DOTALL)
for path in glob.glob('packages/thirdweb/**/*.tsx', recursive=True):
try:
text = open(path,'r',encoding='utf-8').read()
except Exception:
continue
for m in re.finditer(r'<Modal\b', text):
start = m.start()
match = open_tag_re.search(text, pos=start)
lineno = text.count('\n', 0, start) + 1
if not match:
snippet = text[start:start+200].replace('\n','')
print(f"{path}:{lineno}: could not capture opening tag; snippet: {snippet}")
continue
tag = '<Modal' + match.group(1)
has = 'className=' in tag
tag_one_line = tag.replace('\n','')
print(f"{path}:{lineno}: className_present={has} tag={tag_one_line}")
PYLength of output: 8874
Bump changeset to minor — Modal's className prop is now required.
Modal's props declare className: string (required). Found usages without className in:
- packages/thirdweb/src/react/native/ui/connect/ConnectButton.tsx:157
- packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx:64
Choose one:
- Option A (versioning): bump to minor — apply:
-"thirdweb": patch
+"thirdweb": minor- Option B (code): make
className?: stringand default internally to keep a patch.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "thirdweb": patch | |
| "thirdweb": minor |
| shadow, | ||
| spacing, | ||
| } from "../../../core/design-system/index.js"; | ||
| import { cls } from "../../utils/cls.js"; |
There was a problem hiding this comment.
🧩 Analysis chain
Modal className now required — verify all call sites or make optional
Making className required can break internal consumers that didn’t pass it. Either verify all usages are updated or make it optional and default to the base class.
Apply this minimal softening (keeps behavior, reduces churn):
-export const Modal: React.FC<{
+export const Modal: React.FC<{
@@
- className: string;
+ className?: string;No logic change needed since cls("tw-modal", props.className) already tolerates undefined.
Run to find any <Modal> without a className prop:
Naming note (very minor): current convention uses tw-modal__xyz. If these are modal variants (not elements), tw-modal--xyz (BEM modifier) may read clearer. Not blocking.
Also applies to: 37-37, 95-95
🏁 Script executed:
#!/bin/bash
# Finds <Modal ...> open tags missing className in packages/thirdweb
rg -nPU '(?s)<Modal\b(?![^>]*\bclassName=)[^>]*>' packages/thirdweb --type tsx -C2Length of output: 83
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching for <Modal> tags missing className in packages/thirdweb..."
# Collect files that contain "<Modal" (tsx files)
if command -v rg >/dev/null 2>&1; then
mapfile -t files < <(rg -l --type tsx "<Modal" packages/thirdweb || true)
else
mapfile -t files < <(find packages/thirdweb -type f -name '*.tsx' -print0 | xargs -0 grep -Il "<Modal" || true)
fi
if [ ${#files[@]} -eq 0 ]; then
echo "NO_MODAL_TAGS_FOUND"
exit 0
fi
# For each file, slurp and find opening <Modal ...> tags that do NOT include className=
for f in "${files[@]}"; do
perl -0777 -ne '
while (/<Modal\b([^>]*)>/gs) {
$attrs = $1;
if ($attrs !~ /className\s*=/) {
$start = $-[0];
$pre = substr($_, 0, $start);
$line_num = ($pre =~ tr/\n//) + 1;
printf("%s:%d\n", $ARGV, $line_num);
print $& . "\n\n";
}
}
' -- "$f"
doneLength of output: 153
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== 1) Locate Modal component file ==="
modal=$(find packages/thirdweb -type f -name 'Modal.tsx' -print -quit || true)
if [ -n "$modal" ]; then
echo "FOUND: $modal"
echo "---- head of $modal ----"
sed -n '1,220p' "$modal" || true
else
echo "Modal.tsx not found under packages/thirdweb"
fi
echo
echo "=== 2) Find all files under packages/thirdweb containing '<Modal' and check if opening tag includes className ==="
files=$(grep -IlR "<Modal" packages/thirdweb || true)
if [ -z "${files}" ]; then
echo "NO_FILES_WITH_MODAL_FOUND"
exit 0
fi
echo "$files" | while IFS= read -r file; do
printf "\n--- %s ---\n" "$file"
grep -n -C2 "<Modal" "$file" || true
perl -0777 -ne '
while (/<Modal\b([^>]*)>/gs) {
$attrs = $1;
$start = $-[0];
$pre = substr($_,0,$start);
$line_num = ($pre =~ tr/\n//) + 1;
printf("%s:%d\n", $ARGV, $line_num);
print $& . "\n";
if ($attrs =~ /className\s*=/) {
print "HAS_CLASSNAME\n\n";
} else {
print "MISSING_CLASSNAME\n\n";
}
}
' -- "$file" || true
done
exit 0Length of output: 24971
Make Modal.className optional or update callers
Modal's props currently require className; at least one web caller omits it — packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx:64. Change the prop to optional (runtime unchanged — cls tolerates undefined) or add className at the caller.
-export const Modal: React.FC<{
+export const Modal: React.FC<{
@@
- className: string;
+ className?: string;Committable suggestion skipped: line range outside the PR's diff.
| "use client"; | ||
| import { ChevronLeftIcon } from "@radix-ui/react-icons"; | ||
| import { lazy, Suspense, useEffect, useRef, useState } from "react"; | ||
| import { useEffect, useRef, useState } from "react"; |
There was a problem hiding this comment.
Reintroduce lazy loading for InAppWalletSelectionUI (perf regression)
Switching from lazy to eager import pulls the in‑app flow into the initial bundle and penalizes TTI for users who never open it. Restore code-splitting with Suspense.
-import { useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";-import InAppWalletSelectionUI from "../../wallets/in-app/InAppWalletSelectionUI.js";
+const InAppWalletSelectionUI = lazy(
+ () => import("../../wallets/in-app/InAppWalletSelectionUI.js"),
+);
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";- {wallet.id === "inApp" && props.size === "compact" ? (
- <InAppWalletSelectionUI
+ {wallet.id === "inApp" && props.size === "compact" ? (
+ <Suspense fallback={<LoadingScreen />}>
+ <InAppWalletSelectionUI
chain={props.chain}
client={props.client}
connectLocale={props.connectLocale}
disabled={props.disabled}
- done={() => props.done(wallet)}
+ done={() => props.done(wallet)}
goBack={props.goBack}
recommendedWallets={props.recommendedWallets}
- select={() => props.selectWallet(wallet)}
+ select={() => props.selectWallet(wallet)}
size={props.size}
wallet={wallet as Wallet<"inApp">}
- />
+ />
+ </Suspense>
) : (Also applies to: 21-21, 622-633
🤖 Prompt for AI Agents
In packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx around
lines 3 (and similarly at 21 and 622-633), the eager import of
InAppWalletSelectionUI caused a perf regression by pulling the in-app flow into
the initial bundle; restore code-splitting by replacing the direct import with
React.lazy(() => import(...)) and wrap its usage in a <Suspense fallback={...}>
(provide a lightweight spinner/placeholder) so the component is loaded only when
needed; ensure TypeScript types are preserved (use default export or adjust
import) and update any tests/SSR guards if necessary to avoid rendering lazy on
the server.
PR-Codex overview
This PR focuses on adding
tw-class names to various UI components in thethirdwebpackage for better styling control and consistency.Detailed summary
tw-class names toSpinner,Modal,ConnectModal,OTPInput, and various other components.global.cssfor debugging purposes.InputSelectionUIandWalletTypeRowButtonwith new class properties.ReceiveFunds,SendFunds, andConnectingScreenby adding specifictw-classes.ConnectButton,DetailsModal, and other components to utilize new class names for better styling.Summary by CodeRabbit