[PRO-144] SDK: Update in-app wallet icon in wide connect ui #8556
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 151127d 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 |
WalkthroughAdds a new InAppWalletIcon component and integrates it into the ConnectWallet UI, updates two icon components for color/stroke handling, exports defaultAuthOptions, adds Storybook stories demonstrating wide-modal and theme variants, and includes a patch changeset for the in-app wallet icon update. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (8)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used📓 Path-based instructions (6)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
packages/thirdweb/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{js,jsx,ts,tsx,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.stories.tsx📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.stories.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (1)packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx (3)
⏰ 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)
🔇 Additional comments (3)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
64-71: MakedefaultAuthOptionsimmutable (or at least protect against mutation).
Since this is now exported and reused, prefer a readonly export to prevent accidental mutation across imports (especially since the new icon code sorts options).-export const defaultAuthOptions: AuthOption[] = [ +export const defaultAuthOptions = [ "email", "phone", "google", "apple", "facebook", "passkey", -]; +] as const satisfies readonly AuthOption[];packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx (1)
12-23: Theme provider setup is redundant (nested providers).
Consider removing the meta decorator and relying onThemeSetupso Light/Dark stories are unambiguous.Also applies to: 127-141
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (2)
155-192: Handle unsupportedAuthOptions (avoid empty quadrants / blank icon).
If config includes options like"wallet"/"backend"(or any future additions), this returns null and the composite can look broken; consider filteringenabledAuthMethodsto supported options or providing a fallback icon.
19-22: Add explicit return types per TS/TSX guidelines.
E.g.: JSX.Element | nullforInAppWalletIconandAuthOptionIcon.Also applies to: 155-159
📜 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 (8)
.changeset/sixty-clubs-fix.md(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx(1 hunks)packages/thirdweb/src/stories/ConnectEmbed.stories.tsx(2 hunks)packages/thirdweb/src/stories/in-app-wallet-icon.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 TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components for documentation
Files:
packages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For new UI components, add Storybook stories (*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (2)
apps/dashboard/src/@/api/team/ecosystems.ts (1)
AuthOption(6-25)packages/thirdweb/src/wallets/types.ts (1)
AuthOption(50-50)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (1)
InAppWalletIcon(19-153)
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (4)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(25-25)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
defaultAuthOptions(64-71)packages/thirdweb/src/react/core/design-system/index.ts (3)
iconSize(166-176)spacing(142-154)radius(156-164)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx (1)
EmailIcon(3-23)
packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx (3)
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
defaultAuthOptions(64-71)packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (1)
InAppWalletIcon(19-153)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)
⏰ 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: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
.changeset/sixty-clubs-fix.md (1)
1-5: Changeset looks correct for a patch UI/icon update.packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx (1)
6-21: Color binding viacurrentColoris applied correctly.packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx (1)
3-21: SVG refactor is consistent withcurrentColortheming and looks safe.packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (1)
4-4: Story addition is a good integration check for the wide modal in-app icon behavior.Also applies to: 114-130
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
20-21: Conditional swap toInAppWalletIconfor in-app wallet is clean and localized.Also applies to: 66-81
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
📜 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 (8)
.changeset/sixty-clubs-fix.md(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx(1 hunks)packages/thirdweb/src/stories/ConnectEmbed.stories.tsx(2 hunks)packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/sixty-clubs-fix.md
🚧 Files skipped from review as they are similar to previous changes (4)
- packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
- packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx
- packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
- packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx
🧰 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 TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components for documentation
Files:
packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For new UI components, add Storybook stories (*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (1)
InAppWalletIcon(19-153)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
74-78: LGTM! Clean integration of InAppWalletIcon.The conditional rendering logic is correct, and the type assertion is safely guarded by the
wallet.idcheck.packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx (1)
26-125: Excellent story coverage for InAppWalletIcon variants.The story comprehensively demonstrates all authentication method combinations across single, dual, triple, and quad+ configurations in both light and dark themes. This provides strong visual regression testing coverage.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8556 +/- ##
==========================================
- Coverage 54.63% 54.49% -0.14%
==========================================
Files 921 922 +1
Lines 61193 61361 +168
Branches 4152 4150 -2
==========================================
+ Hits 33434 33441 +7
- Misses 27657 27818 +161
Partials 102 102
🚀 New features to boost your workflow:
|
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (2)
19-22: Add explicit return types for both components (per TS guidelines).-export function InAppWalletIcon(props: { +export function InAppWalletIcon(props: { client: ThirdwebClient; wallet: Wallet<"inApp">; -}) { +}): JSX.Element | null { // ... } -function AuthOptionIcon(props: { +function AuthOptionIcon(props: { authOption: AuthOption; client: ThirdwebClient; size: string; -}) { +}): JSX.Element | null { // ... }Also applies to: 158-162
164-173: Addalt=""for decorative social auth icons (a11y).<Img src={icon} width={props.size} height={props.size} client={props.client} + alt="" />
🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
64-71: ExporteddefaultAuthOptionsshould bereadonly(or frozen) to prevent accidental mutation.
Since it’s now a public export, consider making it immutable to avoid downstream.push()/.sort()surprises.-export const defaultAuthOptions: AuthOption[] = [ +export const defaultAuthOptions = Object.freeze([ "email", "phone", "google", "apple", "facebook", "passkey", -]; +]) satisfies readonly AuthOption[];packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
140-142: Add explicit return type foruppercaseFirstLetter(and consider a simpler signature).-function uppercaseFirstLetter(props: { text: string }) { +function uppercaseFirstLetter(props: { text: string }): string { return props.text.charAt(0).toUpperCase() + props.text.slice(1); }
📜 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 (8)
.changeset/sixty-clubs-fix.md(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(4 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx(1 hunks)packages/thirdweb/src/stories/ConnectEmbed.stories.tsx(2 hunks)packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- .changeset/sixty-clubs-fix.md
- packages/thirdweb/src/stories/in-app-wallet-icon.stories.tsx
🧰 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 TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsxpackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/stories/ConnectEmbed.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components for documentation
Files:
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For new UI components, add Storybook stories (*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
🧬 Code graph analysis (2)
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (2)
apps/dashboard/src/@/api/team/ecosystems.ts (1)
AuthOption(6-25)packages/thirdweb/src/wallets/types.ts (1)
AuthOption(50-50)
packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
ConnectEmbed(199-326)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)
⏰ 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: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx (1)
5-21: Nice improvement: switch tocurrentColor+ stroke-based SVG is consistent and easier to theme.
No concerns with the updated SVG structure;role="presentation"+ style-driven color keeps it flexible.packages/thirdweb/src/react/web/ui/ConnectWallet/icons/WalletDotIcon.tsx (1)
8-16: Color forwarding viastyle={{ color: props.color }}is the right move (pairs withcurrentColor).packages/thirdweb/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx (1)
19-36: Good:.slice()before.sort()avoids mutating shared auth options.
This resolves the “mutating exported/default arrays” footgun.packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
77-92: Nice: fall back toInAppWalletIconand keepalt=""for custom icon overrides.packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (1)
4-6: Stories look good for exercising wide modal + in-app auth permutations (google/github/mixed).Also applies to: 114-167
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the in-app wallet feature by updating icons, adding new components for different authentication methods, and improving the UI for wallet connection options.
### Detailed summary
- Updated the in-app wallet icon in the wide connect UI.
- Changed `defaultAuthOptions` from a constant to an exported variable.
- Modified `EmailIcon` component for better styling and structure.
- Added new functions for various modal configurations (`ConfiguredInAppWalletWideModal`, `GoogleLoginWideModal`, `GithubLoginWideModal`).
- Introduced `InAppWalletIcon` component to handle multiple authentication methods visually.
- Created comprehensive storybook examples for `InAppWalletIcon` with various authentication options.
> ✨ 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 an in-app wallet icon that displays available authentication methods and adapts layout for single vs. multiple options.
* **UI/UX Improvements**
* Updated wallet icon visuals and dynamic color handling for more consistent rendering in the connect modal.
* Simplified email icon visuals for clearer strokes.
* **Stories**
* Added Storybook examples showcasing the in-app wallet icon across themes and auth-option permutations.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
pro-144
branch
from
ea945bb to
151127d
Compare
PR-Codex overview
This PR focuses on enhancing the in-app wallet functionality and appearance within the
thirdweblibrary. It includes updates to wallet icons, the addition of new wallet connection options, and improvements to the UI for better user experience.Detailed summary
WalletDotIcon.tsxandEmailIcon.tsx.defaultAuthOptionsfrom a local variable to an exported constant inConnectWalletSocialOptions.tsx.ConnectEmbed.stories.tsx.InAppWalletIconcomponent to display authentication options dynamically.WalletEntryButtonto handle single authentication methods.InAppWalletIconshowcasing various authentication options.Summary by CodeRabbit
New Features
UI/UX Improvements
Stories
✏️ Tip: You can customize this high-level summary in your review settings.