[MNY-237] SDK: Update theme colors, minor UI tweaks #8305
Conversation
🦋 Changeset detectedLatest commit: f757e60 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughExported concrete theme objects ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~40 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8305 +/- ##
==========================================
+ Coverage 54.87% 54.89% +0.01%
==========================================
Files 919 919
Lines 60707 60677 -30
Branches 4127 4125 -2
==========================================
- Hits 33315 33310 -5
+ Misses 27290 27265 -25
Partials 102 102
🚀 New features to boost your workflow:
|
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: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/thirdweb/src/react/core/design-system/index.ts (1)
191-210: JSDoc typo: lightTheme docs mention "default dark theme"Update the description to “default light theme”.
- * Create a custom light theme object by using the default dark theme as a base and applying overrides. + * Create a custom light theme object by using the default light theme as a base and applying overrides.packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx (1)
63-69: Inline background overrides hover styles on secondary ButtonSetting style.backgroundColor prevents variant="secondary" hover background from applying. Also disabled styling expects data-disabled.
- style={{ - backgroundColor: theme.colors.tertiaryBg, - borderRadius: radius.lg, - padding: `${spacing.md} ${spacing.md}`, - textAlign: "left", - }} + style={{ + borderRadius: radius.lg, + padding: `${spacing.md} ${spacing.md}`, + textAlign: "left", + }} + data-disabled={!hasEnoughBalance}If you want a tertiary look even when enabled, prefer variant="ghost-solid" with hoverBg, or add a new variant, rather than forcing inline background.
🧹 Nitpick comments (5)
packages/thirdweb/src/react/core/design-system/index.ts (2)
211-217: Avoid leaking mutable shared object references from lightTheme()Returning the base object directly makes accidental mutation global. Return a shallow clone for safety.
export function lightTheme(overrides?: ThemeOverrides): Theme { if (!overrides) { - return lightThemeObj; + return { + ...lightThemeObj, + colors: { ...lightThemeObj.colors }, + }; } return applyThemeOverrides(lightThemeObj, overrides); }
238-244: Mirror clone behavior in darkTheme()Same rationale as lightTheme().
export function darkTheme(overrides?: ThemeOverrides): Theme { if (!overrides) { - return darkThemeObj; + return { + ...darkThemeObj, + colors: { ...darkThemeObj.colors }, + }; } return applyThemeOverrides(darkThemeObj, overrides); }packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (1)
120-149: Optional: add accessible labels for clarityConsider adding aria-labels so screen readers announce destination/action clearly, e.g., “Pay with card”.
- <Button + <Button + aria-label="Pay with card"packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx (2)
88-104: Align price text weight with theme changes; use Text propUse weight={500} instead of inline 600 to match updated typography and component API.
- <Text - color="primaryText" - size="sm" - style={{ fontWeight: 600, textWrap: "nowrap" }} -> + <Text color="primaryText" size="sm" weight={500} style={{ textWrap: "nowrap" }}>
135-203: Skeleton list OK; minor optional improvementsArray.from({ length: 10 }) reads clearer than new Array(10).fill(0). Also consider reducing duplicate inline styles via a small helper or shared SkeletonRow component.
- {new Array(10).fill(0).map((_, i) => ( + {Array.from({ length: 10 }).map((_, 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 (12)
.changeset/wise-actors-attack.md(1 hunks)packages/thirdweb/src/react/core/design-system/index.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx(4 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx(3 hunks)packages/thirdweb/src/react/web/ui/components/modalElements.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx(1 hunks)packages/thirdweb/src/stories/theme.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/stories/theme.stories.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.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/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/stories/theme.stories.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.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/ConnectWallet/screens/ReceiveFunds.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/components/modalElements.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsxpackages/thirdweb/src/stories/theme.stories.tsxpackages/thirdweb/src/react/core/design-system/index.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.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/theme.stories.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/wise-actors-attack.md
🧠 Learnings (5)
📚 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/theme.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/theme.stories.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/Bridge/payment-selection/WalletFiatSelection.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/Bridge/payment-selection/WalletFiatSelection.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/Bridge/payment-selection/WalletFiatSelection.tsx
🧬 Code graph analysis (9)
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx (1)
apps/dashboard/src/@/utils/usedapp-external.ts (1)
shortenString(3-7)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx (1)
packages/thirdweb/src/react/core/design-system/index.ts (2)
radius(156-164)spacing(142-154)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx (2)
packages/thirdweb/src/react/core/design-system/index.ts (2)
radius(156-164)spacing(142-154)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/stories/theme.stories.tsx (1)
packages/thirdweb/src/react/core/design-system/index.ts (3)
darkThemeObj(53-87)lightThemeObj(89-123)Theme(4-51)
packages/thirdweb/src/react/core/design-system/index.ts (1)
packages/thirdweb/src/exports/react.ts (1)
Theme(6-6)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (6)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(27-161)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(156-164)spacing(142-154)iconSize(166-176)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx (1)
WalletRow(21-81)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/CreditCardIcon.tsx (1)
CreditCardIcon(6-24)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (11)
packages/thirdweb/src/react/web/ui/components/modalElements.tsx (1)
8-19: LGTM! Typography refinements align with design system updates.The reduced font weight (600→500) and negative letter spacing create a more refined visual hierarchy for modal titles, consistent with the PR's design refresh.
packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx (1)
73-82: LGTM! Consistent typography update.The weight reduction from 600 to 500 aligns with the design system refresh applied across modal and screen titles throughout this PR.
.changeset/wise-actors-attack.md (1)
1-5: LGTM! Changeset correctly categorizes these changes as a patch release.The description accurately reflects the UI/styling refinements, and the patch version bump is appropriate for non-API changes.
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
78-84: LGTM! Typography adjustment aligns with PR-wide refinements.The reduced font weight (600→500) creates visual consistency with other text elements updated throughout this design refresh.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx (3)
43-57: LGTM! QR code size increased for better scannability.The increase from 310px to 350px (~13% larger) improves user experience for scanning wallet addresses. Given the modal context, this size should work well across viewports.
60-72: LGTM! Explicit parameter improves code clarity.The explicit
falseparameter makes the intent clear (use standard shortening, not extra-short), even though it matches the default behavior.
76-84: LGTM! Text sizing refinement.Adding
size="sm"to the instruction text creates appropriate visual hierarchy and aligns with the PR's typography updates.packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
271-275: LGTM! Vertical spacing refinement.Removing bottom padding (
pb="md") tightens the layout, likely to reduce excess whitespace. The horizontal padding and top padding remain intact.packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx (1)
117-127: LGTM! Button styling refinements.Border radius increased to
lg(12px) for more prominent rounded corners, and padding standardized using the design system token. These changes enhance visual consistency.packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx (2)
322-327: LGTM! More granular padding control.Replacing uniform padding (
p="md") with separate horizontal (px="lg") and vertical (py="md+") values provides better spacing control for this bottom section container.
696-718: LGTM! Subtle border refinement.Reducing the border width from 2px to 1px creates a lighter, less prominent outline for the "Show All Wallets" icon, aligning with the PR's visual refinements.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
Show resolved
Hide resolved
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on updating theme colors and making minor UI tweaks across various React components in the `thirdweb` package.
### Detailed summary
- Updated `weight` from `600` to `500` in multiple components' `Text`.
- Adjusted `border` styles in `Container` components.
- Modified padding and margin in several layout elements.
- Enhanced UI elements with consistent `letterSpacing` and `fontSize`.
- Added new theme stories for `darkThemeObj` and `lightThemeObj`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added Storybook theme showcase displaying color tokens and design system palette
- **Bug Fixes**
- Improved loading skeleton UI with better scrollable layout and visual consistency
- **Style**
- Refactored theme system with explicit color objects
- Updated button styling with adjusted border radius and padding
- Refined typography (font weights) across UI components
- Adjusted layout spacing and padding throughout Bridge and wallet components
- Increased QR code size for improved visibility
- **Chores**
- Added changeset documentation for patch release
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-237
branch
from
c37da0b to
f757e60
Compare
2 participants
PR-Codex overview
This PR focuses on updating theme colors and making minor UI tweaks across various React components in the
thirdwebpackage. It improves styling consistency and enhances the user interface.Detailed summary
weightfrom600to500in multiple components.borderfrom2pxto1pxinWalletSelector.tsx.sizeof QR code inReceiveFunds.tsxfrom310to350.letterSpacingto text styles.paddingandborderRadiusin several components.theme.stories.tsxfor dark and light themes.TokenSelectionloading skeleton structure.WalletFiatSelection.tsx.Summary by CodeRabbit