[Dashboard]: Fix: Remove in-app wallet connection option on payment page #7934
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds multi-wallet connection support by passing a new connectOptions prop to CheckoutWidget in PayPageWidget.client.tsx, configuring connectors for MetaMask, Rabby, OKX Wallet, and WalletConnect, and enabling showAllWallets. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant P as PayPageWidget
participant C as CheckoutWidget
participant W as Wallet Connectors
participant N as Network/Provider
U->>P: Open Pay Page
P->>C: Render with connectOptions { wallets[], showAllWallets: true }
C->>U: Display wallet list (MetaMask, Rabby, OKX, WalletConnect)
U->>C: Select wallet
C->>W: Initialize chosen connector
alt Successful connection
W->>N: Establish session
N-->>W: Session established
W-->>C: Connection details
C-->>P: Ready state with wallet context
else Error/Cancel
W-->>C: Error/Rejected
C-->>U: Show error/cancel state
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7934 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58592 58592
Branches 4143 4143
=======================================
Hits 33126 33126
Misses 25360 25360
Partials 106 106
🚀 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: 1
🧹 Nitpick comments (1)
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx (1)
8-8: Import looks correct; wallet ids are valid. Consider centralizing the allowlist.
createWalletimport is right, and the ids used below match thirdweb docs. Centralizing them in a module-scopeallowedWalletsarray avoids re-allocations on re-renders and keeps AutoConnect/Checkout in sync. (portal.thirdweb.com)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
🧠 Learnings (2)
📚 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:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.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:
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
⏰ 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). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
gregfromstl
deleted the
greg/mny-121-remove-inapp-wallet-options-on-payment-links
branch
| createWallet("io.metamask"), | ||
| createWallet("io.rabby"), | ||
| createWallet("com.okex.wallet"), | ||
| createWallet("walletConnect"), |
There was a problem hiding this comment.
can you add rainbow pls :D
PR-Codex overview
This PR enhances the
PayPageWidgetcomponent by adding support for multiple wallet connections in theCheckoutWidget, improving user accessibility for payment options.Detailed summary
createWalletfromthirdweb/wallets.connectOptionstoCheckoutWidget:io.metamask,io.rabby,com.okex.wallet, andwalletConnect.showAllWalletstotrue.Summary by CodeRabbit