[Docs] Redesign sidebar and update wallet documentation #7602
+1,715
−584
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes overhaul the wallet onboarding documentation and sidebar navigation, introducing new interactive components and restructuring content. A new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocsPage
participant AuthMethodsTabs
participant CodeClient
User->>DocsPage: Visits wallet creation/sign-in docs
DocsPage->>AuthMethodsTabs: Renders interactive auth/platform tabs
User->>AuthMethodsTabs: Selects auth method and platform
AuthMethodsTabs->>AuthMethodsTabs: Generates code snippet for selection
AuthMethodsTabs->>CodeClient: Displays code snippet
CodeClient-->>User: Shows syntax-highlighted example
sequenceDiagram
participant User
participant Sidebar
participant DocsSection
User->>Sidebar: Opens sidebar navigation
Sidebar-->>User: Shows reorganized links (Get Started, Guides, API References)
User->>Sidebar: Clicks a guide or reference link
Sidebar->>DocsSection: Navigates to selected documentation page
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (6)
🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx}Instructions used from: Sources:
🧠 Learnings (4)📓 Common learningsapps/portal/src/app/connect/in-app-wallet/custom-auth/configuration/page.mdx (21)apps/portal/src/app/connect/wallet/overview/page.mdx (18)apps/portal/src/components/Document/AuthMethodsTabs.tsx (22)🧬 Code Graph Analysis (1)apps/portal/src/components/Document/AuthMethodsTabs.tsx (2)
⏰ 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 (9)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
Portal
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 ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7602 +/- ##
=======================================
Coverage 56.45% 56.45%
=======================================
Files 906 906
Lines 58115 58115
Branches 4226 4226
=======================================
Hits 32810 32810
Misses 25195 25195
Partials 110 110
🚀 New features to boost your workflow:
|
size-limit report 📦
|
joaquim-verges
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/portal/src/app/connect/assets/test.jpgis excluded by!**/*.jpg
📒 Files selected for processing (6)
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx(1 hunks)apps/portal/src/app/connect/sidebar.tsx(4 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/overview/page.mdx(1 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx(1 hunks)apps/portal/src/components/Document/AuthMethodsTabs.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (9)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx (11)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Keep documentation focused on developer experience and practical usage
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
apps/portal/src/app/connect/sidebar.tsx (22)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components (Node edge): Start files with `import "server-only";`
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Implement redirect logic with `redirect()` from `next/navigation`
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:155-160
Timestamp: 2025-06-10T00:46:58.580Z
Learning: In the dashboard application, the route structure for team and project navigation is `/team/[team_slug]/[project_slug]/...` without a `/project/` segment. Contract links should be formatted as `/team/${teamSlug}/${projectSlug}/contract/${chainId}/${contractAddress}`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Access browser APIs (`localStorage`, `window`, `IntersectionObserver`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
apps/portal/src/app/connect/wallet/get-started/page.mdx (19)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Expose `className` prop on root element for overrides in UI components
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use Tailwind CSS only – no inline styles or CSS modules
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Implement redirect logic with `redirect()` from `next/navigation`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to packages/thirdweb/src/exports/**/*.{ts,tsx} : Export everything via `exports/` directory, grouped by feature in the public API of the SDK
apps/portal/src/app/connect/wallet/overview/page.mdx (13)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
apps/portal/src/components/Document/AuthMethodsTabs.tsx (14)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Use `Authorization: Bearer` header – never embed tokens in URLs
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Wrap calls in React Query (`@tanstack/react-query`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Always call `getAuthToken()` to retrieve JWT from cookies
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
🔇 Additional comments (18)
apps/portal/src/app/connect/wallet/get-started/page.mdx (3)
49-73: LGTM! Enhanced tab UI with consistent icon layout.The addition of icons to tab triggers with flexbox alignment significantly improves the visual hierarchy and user experience. The consistent styling pattern with
flex items-centerand icon sizing is well implemented.
598-601: Improved link clarity and specificity.The text updates provide better context - "Other auth strategies" clarifies the scope, and adding wallet examples "(e.g. MetaMask, WalletConnect, Coinbase Wallet, etc.)" helps users understand what external wallets means.
603-603: Better section title reflects actual content.Changing from "Explore Full SDK Documentation" to "Explore Full API References" more accurately describes the linked content and aligns with the updated URLs.
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (2)
16-24: Effective consolidation improves user experience.The title change from "Sign-In Methods" to "Create wallets" better reflects the content focus. Replacing multiple sections with the AuthMethodsTabs component provides a more interactive and streamlined experience for developers choosing authentication methods and platforms.
14-14: AuthMethodsTabs import is correct
Verified thatapps/portal/src/components/Document/AuthMethodsTabs.tsxexports a namedAuthMethodsTabsfunction. The importimport { AuthMethodsTabs } from "@/components/Document/AuthMethodsTabs"matches the export exactly. No changes required.
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx (3)
16-22: Clear focus on gas sponsorship improves clarity.The updated metadata accurately reflects the page's new focus on gas sponsorship rather than general account abstraction setup. This creates clearer expectations for users.
28-61: Simplified examples enhance developer experience.The tabbed interface provides clear, minimal examples for enabling gas sponsorship across different platforms. The TypeScript example with
executionModeconfiguration and .NET example withExecutionMode.EIP7702Sponsoredare concise and actionable.
24-64: Account Abstraction Docs Accessibility Confirmed
Verified that comprehensive account abstraction content remains available underapps/portal/src/app/connect/account-abstraction/:
- overview/page.mdx
- infrastructure/page.mdx
- guides/react/page.mdx
- guides/typescript/page.mdx
- faq/page.mdx
- sponsorship-rules/page.mdx
No further changes needed for gas sponsorship focus—users can navigate to full AA setup elsewhere in the sidebar.
apps/portal/src/app/connect/sidebar.tsx (4)
1-1: Icon import follows project conventions.The ZapIcon import from lucide-react follows the project's established pattern for lucide icons, as confirmed by the learnings about icon naming conventions.
17-20: Enhanced "Get Started" link improves discoverability.Adding the ZapIcon and updating the link to point to the specific get-started page creates a clear entry point for new users, improving the overall navigation experience.
32-70: Well-organized "Guides" section enhances navigation.The new Guides section logically groups related functionality - wallet creation, gas sponsorship, user management, and authentication. This improves discoverability and provides clear paths to key features.
328-339: Consistent API reference URL structure.The updated URLs align with the consolidated reference structure seen in other files, maintaining consistency across the documentation navigation.
apps/portal/src/app/connect/wallet/overview/page.mdx (5)
47-54: Enhanced metadata effectively positions thirdweb Connect.The updated title and description clearly communicate thirdweb Connect as a comprehensive web3 frontend toolkit, setting appropriate expectations for the expanded content.
56-72: Live playground section improves discoverability.Adding a dedicated playground section with external link icon provides immediate hands-on experience, enhancing the developer onboarding flow.
74-128: Comprehensive feature grid showcases platform capabilities.The expanded feature grid effectively communicates the breadth of thirdweb's wallet ecosystem - from non-custodial wallets to gas sponsorship to cross-platform support. The consistent icon usage and clear descriptions help developers understand available functionality.
130-151: Quick Starts section provides clear entry points.The SDK cards create immediate pathways for developers to get started with their preferred platform, improving the developer experience and reducing time-to-value.
159-166: Starter kits section encourages practical exploration.The GithubTemplateCard provides a direct path to practical examples and templates, helping developers move from concepts to implementation quickly.
apps/portal/src/components/Document/AuthMethodsTabs.tsx (1)
1-17: LGTM! Imports follow established patterns.The client-side component setup and imports align with the codebase conventions, including proper use of design system components and React Query for client-side state management.
Comment on lines
+610
to
+616
| href="/references/typescript/v5" | ||
| icon={TypeScriptIcon} | ||
| /> | ||
| <SDKCard title="React" href="/react/v5/getting-started" icon={ReactIcon} /> | ||
| <SDKCard title="React" href="/references/typescript/v5" icon={ReactIcon} /> | ||
| <SDKCard | ||
| title="React Native" | ||
| href="/react-native/v5/getting-started" | ||
| href="/references/typescript/v5" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify URL consolidation aligns with navigation structure.
The URLs for TypeScript, React, and React Native SDKs have been consolidated to /references/typescript/v5. Ensure these consolidated references provide adequate coverage for all three platforms.
🏁 Script executed:
#!/bin/bash
# Verify the consolidated TypeScript reference covers React and React Native adequately
echo "Checking if the unified TypeScript reference path exists and provides React/React Native examples..."
# Check if the consolidated reference path exists
fd -t f "page.mdx" apps/portal/src/app/references/typescript/v5/
# Search for React-specific content in the unified reference
rg -A 5 -B 5 "React|react" apps/portal/src/app/references/typescript/v5/ || echo "No React content found in unified reference"
# Search for React Native content
rg -A 5 -B 5 "React Native|react-native|ReactNative" apps/portal/src/app/references/typescript/v5/ || echo "No React Native content found in unified reference"Length of output: 964
Fix missing reference routes
It looks like the consolidated URL /references/typescript/v5 doesn’t exist under apps/portal/src/app/references, so all three SDK links (TypeScript, React, React Native) currently point to a dead route. Please either:
- Create the consolidated reference page at
apps/portal/src/app/references/typescript/v5/page.mdx
and add React/React Native sections, or - Update each
<SDKCard>href to an existing route, for example:- TypeScript →
/references/typescript/v5 - React →
/references/react/v5(or the correct version) - React Native →
/references/react-native/v5(or the correct version)
- TypeScript →
Targets to update (around lines 610–616 in apps/portal/src/app/connect/wallet/get-started/page.mdx):
- href="/references/typescript/v5" icon={TypeScriptIcon} />
+ href="/references/typescript/v5" icon={TypeScriptIcon} />
- <SDKCard title="React" href="/references/typescript/v5" icon={ReactIcon} />
+ <SDKCard title="React" href="/references/react/v5" icon={ReactIcon} />
- <SDKCard title="React Native" href="/references/typescript/v5" icon={ReactNativeIcon} />
+ <SDKCard title="React Native" href="/references/react-native/v5" icon={ReactNativeIcon} />Ensure each referenced page exists and includes appropriate examples for its platform before merging.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/portal/src/app/connect/wallet/get-started/page.mdx around lines 610 to
616, the href attributes for the SDKCard components all point to the
non-existent consolidated route /references/typescript/v5, causing dead links.
Fix this by either creating the consolidated page at
apps/portal/src/app/references/typescript/v5/page.mdx with React and React
Native sections included, or update each SDKCard href to point to their correct
existing routes such as /references/typescript/v5 for TypeScript,
/references/react/v5 for React, and /references/react-native/v5 for React
Native. Verify that each referenced page exists and contains appropriate content
before finalizing the changes.
Comment on lines
+378
to
+493
| const providerMap: Record<string, string> = { | ||
| google: "Google", | ||
| apple: "Apple", | ||
| facebook: "Facebook", | ||
| discord: "Discord", | ||
| x: "X", | ||
| telegram: "Telegram", | ||
| farcaster: "Farcaster", | ||
| github: "Github", | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract duplicate providerMap to reduce code duplication.
The providerMap object is duplicated in both getDotNetSnippet and getUnitySnippet functions.
Extract the providerMap as a constant:
+const authProviderMap: Record<string, string> = {
+ google: "Google",
+ apple: "Apple",
+ facebook: "Facebook",
+ discord: "Discord",
+ x: "X",
+ telegram: "Telegram",
+ farcaster: "Farcaster",
+ github: "Github",
+};
const getDotNetSnippet = (authMethod: AuthMethod): string => {
// ... existing code ...
case "github":
- const providerMap: Record<string, string> = {
- google: "Google",
- apple: "Apple",
- facebook: "Facebook",
- discord: "Discord",
- x: "X",
- telegram: "Telegram",
- farcaster: "Farcaster",
- github: "Github",
- };
- return baseSetup + `// ${providerMap[authMethod]} OAuth
-var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.${providerMap[authMethod]});
+ return baseSetup + `// ${authProviderMap[authMethod]} OAuth
+var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.${authProviderMap[authMethod]});Apply the same change to the getUnitySnippet function.
Also applies to: 460-469
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/AuthMethodsTabs.tsx around lines 378 to
387 and 460 to 469, the providerMap object is duplicated in both
getDotNetSnippet and getUnitySnippet functions. Extract the providerMap object
as a single constant outside these functions at the top of the file or in a
shared scope. Then, replace the duplicated providerMap declarations inside both
functions with references to this new constant to reduce code duplication and
improve maintainability.
Comment on lines
+351
to
+530
| const getDotNetSnippet = (authMethod: AuthMethod): string => { | ||
| const baseSetup = `using Thirdweb; | ||
|
|
||
| var client = ThirdwebClient.Create(clientId: "your-client-id"); | ||
| `; | ||
|
|
||
| switch (authMethod) { | ||
| case "email": | ||
| return baseSetup + `// Email authentication | ||
| var wallet = await InAppWallet.Create(client: client, email: "user@example.com"); | ||
| await wallet.SendOTP(); | ||
| var address = await wallet.LoginWithOtp("123456");`; | ||
|
|
||
| case "phone": | ||
| return baseSetup + `// Phone authentication | ||
| var wallet = await InAppWallet.Create(client: client, phoneNumber: "+1234567890"); | ||
| await wallet.SendOTP(); | ||
| var address = await wallet.LoginWithOtp("123456");`; | ||
|
|
||
| case "google": | ||
| case "apple": | ||
| case "facebook": | ||
| case "discord": | ||
| case "x": | ||
| case "telegram": | ||
| case "farcaster": | ||
| case "github": | ||
| const providerMap: Record<string, string> = { | ||
| google: "Google", | ||
| apple: "Apple", | ||
| facebook: "Facebook", | ||
| discord: "Discord", | ||
| x: "X", | ||
| telegram: "Telegram", | ||
| farcaster: "Farcaster", | ||
| github: "Github", | ||
| }; | ||
| return baseSetup + `// ${providerMap[authMethod]} OAuth | ||
| var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.${providerMap[authMethod]}); | ||
| var address = await wallet.LoginWithOauth( | ||
| isMobile: false, | ||
| browserOpenAction: (url) => { | ||
| var psi = new ProcessStartInfo { FileName = url, UseShellExecute = true }; | ||
| _ = Process.Start(psi); | ||
| }, | ||
| mobileRedirectScheme: "myapp://" | ||
| );`; | ||
|
|
||
| case "guest": | ||
| return baseSetup + `// Guest authentication | ||
| var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Guest); | ||
| var address = await wallet.LoginWithGuest();`; | ||
|
|
||
| case "jwt": | ||
| return baseSetup + `// Custom JWT authentication | ||
| var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.JWT); | ||
| var address = await wallet.LoginWithCustomAuth(jwt: "your-jwt-token");`; | ||
|
|
||
| case "auth_endpoint": | ||
| return baseSetup + `// Custom auth endpoint | ||
| var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.AuthEndpoint); | ||
| var address = await wallet.LoginWithAuthEndpoint(payload: "your-auth-payload");`; | ||
|
|
||
| case "wallet": | ||
| return baseSetup + `// External wallet authentication | ||
| var externalWallet = await PrivateKeyWallet.Create(client, "your-private-key"); | ||
| var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Siwe, siweSigner: externalWallet); | ||
| var address = await wallet.LoginWithSiwe(chainId: 1);`; | ||
|
|
||
| default: | ||
| return baseSetup + `// ${authMethod} authentication | ||
| var wallet = await InAppWallet.Create(client: client);`; | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing auth method implementations for platform consistency.
Several platforms are missing implementations for certain auth methods:
- .NET: Missing
passkeyimplementation - Unity: Missing
jwt,auth_endpoint, andpasskeyimplementations - Unreal: Minimal implementation for all methods
Would you like me to generate the missing implementations for these auth methods to ensure platform parity?
Also applies to: 426-510, 512-516
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/AuthMethodsTabs.tsx around lines 351 to
424, the .NET auth method implementations lack the 'passkey' method, and
similarly, Unity and Unreal platform implementations are missing or minimal for
'jwt', 'auth_endpoint', and 'passkey'. To fix this, add the missing 'passkey'
auth method implementation in the .NET switch statement following the existing
pattern, and ensure Unity and Unreal sections include full implementations for
'jwt', 'auth_endpoint', and 'passkey' to maintain platform consistency.
Comment on lines
+603
to
+717
| const queryClient = new QueryClient(); | ||
|
|
||
| export function AuthMethodsTabs() { | ||
| return ( | ||
| <QueryClientProvider client={queryClient}> | ||
| <AuthMethodsTabsContent /> | ||
| </QueryClientProvider> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Move QueryClient instantiation to avoid SSR issues.
Creating QueryClient at the module level can cause hydration mismatches and state sharing between requests in SSR environments.
Move the QueryClient instantiation inside the component:
-const queryClient = new QueryClient();
-
export function AuthMethodsTabs() {
+ const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
<AuthMethodsTabsContent />
</QueryClientProvider>
);
}Import useState from React at the top of the file if not already imported.
📝 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.
Suggested change
| const queryClient = new QueryClient(); | |
| export function AuthMethodsTabs() { | |
| return ( | |
| <QueryClientProvider client={queryClient}> | |
| <AuthMethodsTabsContent /> | |
| </QueryClientProvider> | |
| ); | |
| } | |
| import { useState } from 'react'; | |
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | |
| export function AuthMethodsTabs() { | |
| const [queryClient] = useState(() => new QueryClient()); | |
| return ( | |
| <QueryClientProvider client={queryClient}> | |
| <AuthMethodsTabsContent /> | |
| </QueryClientProvider> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/AuthMethodsTabs.tsx around lines 603 to
611, the QueryClient is instantiated at the module level, which can cause SSR
hydration mismatches and shared state issues. To fix this, move the QueryClient
instantiation inside the AuthMethodsTabs component using React's useState hook
to create it once per component instance. Also, ensure useState is imported from
React at the top of the file if not already present.
Comment on lines
196
to
455
| client={client} | ||
| wallets={[walletWithAuth]} | ||
| /> | ||
| ); | ||
| }`; | ||
|
|
||
| switch (authMethod) { | ||
| case "email": | ||
| return baseSetup + ` // Send OTP first | ||
| await preAuthenticate({ | ||
| client, | ||
| strategy: "email", | ||
| email: "user@example.com", | ||
| }); | ||
|
|
||
| // Then connect with verification code | ||
| await wallet.connect({ | ||
| client, | ||
| strategy: "email", | ||
| email: "user@example.com", | ||
| verificationCode: "123456", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "phone": | ||
| return baseSetup + ` // Send OTP first | ||
| await preAuthenticate({ | ||
| client, | ||
| strategy: "phone", | ||
| phoneNumber: "+1234567890", | ||
| }); | ||
|
|
||
| // Then connect with verification code | ||
| await wallet.connect({ | ||
| client, | ||
| strategy: "phone", | ||
| phoneNumber: "+1234567890", | ||
| verificationCode: "123456", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "google": | ||
| case "apple": | ||
| case "facebook": | ||
| case "discord": | ||
| case "x": | ||
| case "telegram": | ||
| case "farcaster": | ||
| case "github": | ||
| return baseSetup + ` await wallet.connect({ | ||
| client, | ||
| strategy: "${authMethod}", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "passkey": | ||
| return baseSetup + ` const hasPasskey = await hasStoredPasskey(client); | ||
| await wallet.connect({ | ||
| client, | ||
| strategy: "passkey", | ||
| type: hasPasskey ? "sign-in" : "sign-up", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "wallet": | ||
| return baseSetup + ` await wallet.connect({ | ||
| client, | ||
| strategy: "wallet", | ||
| wallet: createWallet("io.metamask"), | ||
| chain: sepolia, | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "guest": | ||
| return baseSetup + ` await wallet.connect({ | ||
| client, | ||
| strategy: "guest", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "jwt": | ||
| return baseSetup + ` await wallet.connect({ | ||
| client, | ||
| strategy: "jwt", | ||
| jwt: "your-jwt-token", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| case "auth_endpoint": | ||
| return baseSetup + ` await wallet.connect({ | ||
| client, | ||
| strategy: "auth_endpoint", | ||
| payload: "your-auth-payload", | ||
| }); | ||
| ` + baseEnding; | ||
|
|
||
| default: | ||
| return baseSetup + baseEnding; | ||
| } | ||
| }; |
There was a problem hiding this comment.
Add missing imports to React code snippets.
The React snippets are missing several imports that are present in the TypeScript snippets. Users copying these examples will encounter runtime errors.
Apply this diff to add the missing imports:
const getReactSnippet = (authMethod: AuthMethod): string => {
const baseSetup = `import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
+import { preAuthenticate, hasStoredPasskey } from "thirdweb/wallets/in-app";
+import { createWallet } from "thirdweb/wallets";
+import { sepolia } from "thirdweb/chains";
const client = createThirdwebClient({ clientId: "your-client-id" });Also add the missing ConnectButton import to line 232:
+import { ConnectButton } from "thirdweb/react";
+
// 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed)📝 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.
Suggested change
| const getReactSnippet = (authMethod: AuthMethod): string => { | |
| const baseSetup = `import { createThirdwebClient } from "thirdweb"; | |
| import { ThirdwebProvider, useConnect } from "thirdweb/react"; | |
| import { inAppWallet } from "thirdweb/wallets"; | |
| const client = createThirdwebClient({ clientId: "your-client-id" }); | |
| const wallet = inAppWallet(); | |
| // 1. Wrap your app with ThirdwebProvider | |
| function App() { | |
| return ( | |
| <ThirdwebProvider> | |
| <MyComponent /> | |
| </ThirdwebProvider> | |
| ); | |
| } | |
| // 2. Custom hook approach | |
| function MyComponent() { | |
| const { connect } = useConnect(); | |
| const handleLogin = async () => { | |
| await connect(async () => { | |
| `; | |
| const baseEnding = ` return wallet; | |
| }); | |
| }; | |
| return ( | |
| <button onClick={handleLogin}> | |
| Connect | |
| </button> | |
| ); | |
| } | |
| // 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) | |
| function PrebuiltUIExample() { | |
| const walletWithAuth = inAppWallet({ | |
| auth: { options: ["${authMethod}"] }, | |
| metadata: { | |
| name: "My App", | |
| icon: "https://example.com/icon.png", | |
| image: { | |
| src: "https://example.com/logo.png", | |
| alt: "My logo", | |
| width: 100, | |
| height: 100, | |
| }, | |
| }, | |
| }); | |
| return ( | |
| <ConnectButton | |
| client={client} | |
| wallets={[walletWithAuth]} | |
| /> | |
| ); | |
| }`; | |
| switch (authMethod) { | |
| case "email": | |
| return baseSetup + ` // Send OTP first | |
| await preAuthenticate({ | |
| client, | |
| strategy: "email", | |
| email: "user@example.com", | |
| }); | |
| // Then connect with verification code | |
| await wallet.connect({ | |
| client, | |
| strategy: "email", | |
| email: "user@example.com", | |
| verificationCode: "123456", | |
| }); | |
| ` + baseEnding; | |
| case "phone": | |
| return baseSetup + ` // Send OTP first | |
| await preAuthenticate({ | |
| client, | |
| strategy: "phone", | |
| phoneNumber: "+1234567890", | |
| }); | |
| // Then connect with verification code | |
| await wallet.connect({ | |
| client, | |
| strategy: "phone", | |
| phoneNumber: "+1234567890", | |
| verificationCode: "123456", | |
| }); | |
| ` + baseEnding; | |
| case "google": | |
| case "apple": | |
| case "facebook": | |
| case "discord": | |
| case "x": | |
| case "telegram": | |
| case "farcaster": | |
| case "github": | |
| return baseSetup + ` await wallet.connect({ | |
| client, | |
| strategy: "${authMethod}", | |
| }); | |
| ` + baseEnding; | |
| case "passkey": | |
| return baseSetup + ` const hasPasskey = await hasStoredPasskey(client); | |
| await wallet.connect({ | |
| client, | |
| strategy: "passkey", | |
| type: hasPasskey ? "sign-in" : "sign-up", | |
| }); | |
| ` + baseEnding; | |
| case "wallet": | |
| return baseSetup + ` await wallet.connect({ | |
| client, | |
| strategy: "wallet", | |
| wallet: createWallet("io.metamask"), | |
| chain: sepolia, | |
| }); | |
| ` + baseEnding; | |
| case "guest": | |
| return baseSetup + ` await wallet.connect({ | |
| client, | |
| strategy: "guest", | |
| }); | |
| ` + baseEnding; | |
| case "jwt": | |
| return baseSetup + ` await wallet.connect({ | |
| client, | |
| strategy: "jwt", | |
| jwt: "your-jwt-token", | |
| }); | |
| ` + baseEnding; | |
| case "auth_endpoint": | |
| return baseSetup + ` await wallet.connect({ | |
| client, | |
| strategy: "auth_endpoint", | |
| payload: "your-auth-payload", | |
| }); | |
| ` + baseEnding; | |
| default: | |
| return baseSetup + baseEnding; | |
| } | |
| }; | |
| // apps/portal/src/components/Document/AuthMethodsTabs.tsx | |
| const getReactSnippet = (authMethod: AuthMethod): string => { | |
| const baseSetup = `import { createThirdwebClient } from "thirdweb"; | |
| import { ThirdwebProvider, useConnect } from "thirdweb/react"; | |
| import { inAppWallet } from "thirdweb/wallets"; | |
| import { preAuthenticate, hasStoredPasskey } from "thirdweb/wallets/in-app"; | |
| import { createWallet } from "thirdweb/wallets"; | |
| import { sepolia } from "thirdweb/chains"; | |
| const client = createThirdwebClient({ clientId: "your-client-id" }); | |
| const wallet = inAppWallet(); | |
| // 1. Wrap your app with ThirdwebProvider | |
| function App() { | |
| return ( | |
| <ThirdwebProvider> | |
| <MyComponent /> | |
| </ThirdwebProvider> | |
| ); | |
| } | |
| // 2. Custom hook approach | |
| function MyComponent() { | |
| const { connect } = useConnect(); | |
| const handleLogin = async () => { | |
| await connect(async () => { | |
| `; | |
| const baseEnding = ` return wallet; | |
| }); | |
| }; | |
| return ( | |
| <button onClick={handleLogin}> | |
| Connect | |
| </button> | |
| ); | |
| // 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) | |
| import { ConnectButton } from "thirdweb/react"; | |
| function PrebuiltUIExample() { | |
| const walletWithAuth = inAppWallet({ | |
| auth: { options: ["\${authMethod}"] }, | |
| metadata: { | |
| name: "My App", | |
| icon: "https://example.com/icon.png", | |
| image: { | |
| src: "https://example.com/logo.png", | |
| alt: "My logo", | |
| width: 100, | |
| height: 100, | |
| }, | |
| }, | |
| }); | |
| return ( | |
| <ConnectButton | |
| client={client} | |
| wallets={[walletWithAuth]} | |
| /> | |
| ); | |
| }`; | |
| // ...switch/case for authMethod follows | |
| }; |
🤖 Prompt for AI Agents
In apps/portal/src/components/Document/AuthMethodsTabs.tsx between lines 196 and
349, the React code snippets lack necessary imports such as preAuthenticate,
hasStoredPasskey, createWallet, sepolia, and ConnectButton, which are used in
the snippet but not imported. To fix this, add these missing imports at the top
of the snippet, including the ConnectButton import specifically around line 232,
ensuring all referenced functions and components are properly imported to
prevent runtime errors when users copy the examples.
5c6b6b7 to
4468320
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/portal/src/app/connect/wallet/overview/page.mdx (3)
23-25: Remove unusedcn,Link, andButtonimportsThese three symbols are not referenced in the page. Keeping them adds dead code and will trigger ESLint/TypeScript
no-unused-varswarnings.-import { cn } from "@/lib/utils"; -import Link from "next/link"; -import { Button } from "@/components/ui/button";
28-45: Cull unused Lucide icons to keep the bundle leanOnly the following icons are actually rendered below:
ExternalLinkIcon,UserLockIcon,WalletCardsIcon,FuelIcon,MonitorCheckIcon,MonitorSmartphoneIcon,HandCoinsIcon,IdCardIcon,ShieldCheckIcon.The remaining imports (
WalletIcon,PencilIcon,PiggyBankIcon,GlobeIcon,ComponentIcon,CodeIcon,ApiIcon,WebhookIcon) are unused and should be removed.- WalletIcon, - PencilIcon, - ShieldCheckIcon, - PiggyBankIcon, - GlobeIcon, - ComponentIcon, - CodeIcon, - ApiIcon, - WebhookIcon, + ShieldCheckIcon, // keep
139-143: Use a dedicated React-Native icon for clarity
ReactIconis reused for the “React Native” quick-start card. If a distinctReactNativeIcon(or similar) exists in@/icons, prefer that to avoid confusing readers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/portal/src/app/connect/assets/test.jpgis excluded by!**/*.jpg
📒 Files selected for processing (6)
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx(1 hunks)apps/portal/src/app/connect/sidebar.tsx(4 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/overview/page.mdx(1 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx(1 hunks)apps/portal/src/components/Document/AuthMethodsTabs.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
- apps/portal/src/app/connect/wallet/get-started/page.mdx
- apps/portal/src/app/connect/account-abstraction/get-started/page.mdx
- apps/portal/src/components/Document/AuthMethodsTabs.tsx
- apps/portal/src/app/connect/sidebar.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
apps/portal/src/app/connect/wallet/overview/page.mdx (13)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
⏰ 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). (6)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
Comment on lines
+155
to
158
| Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). | ||
|
|
||
| ### Use Cases | ||
| <DocImage src={SupportedChains} /> | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add descriptive alt text to the supported-chains image
<DocImage> is rendered without an accessible description, which hurts screen-reader usability and SEO.
-<DocImage src={SupportedChains} />
+<DocImage src={SupportedChains} alt="Logos of all EVM chains supported by thirdweb wallets" />📝 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.
Suggested change
| Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). | |
| ### Use Cases | |
| <DocImage src={SupportedChains} /> | |
| Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk). | |
| <DocImage src={SupportedChains} alt="Logos of all EVM chains supported by thirdweb wallets" /> |
🤖 Prompt for AI Agents
In apps/portal/src/app/connect/wallet/overview/page.mdx around lines 155 to 158,
the <DocImage> component rendering the SupportedChains image lacks an alt
attribute, which reduces accessibility and SEO effectiveness. Add a descriptive
alt attribute to the <DocImage> tag that clearly describes the image content,
such as "Supported EVM compatible chains list," to improve screen-reader
usability and SEO.
4468320 to
4a4fb7b
Compare
joaquim-verges
force-pushed
the
_Connect_Redesign_sidebar_and_update_wallet_documentation
branch
from
4a4fb7b to
33bf4c5
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (4)
apps/portal/src/components/Document/AuthMethodsTabs.tsx (3)
709-709: Move QueryClient instantiation to avoid SSR hydration issues.Creating
QueryClientat the module level can cause hydration mismatches and state sharing between requests in SSR environments.
484-493: Extract duplicate providerMap to reduce code duplication.The
providerMapobject is duplicated in bothgetDotNetSnippetandgetUnitySnippetfunctions.Also applies to: 566-575
200-202: Add missing imports to React code snippets.The React snippets are missing several imports that are present in the TypeScript snippets, including
preAuthenticate,hasStoredPasskey,createWallet,sepolia, andConnectButton.Also applies to: 267-267
apps/portal/src/app/connect/wallet/overview/page.mdx (1)
157-157: Add descriptive alt text to the supported-chains image.The
<DocImage>component lacks an accessible description, which impacts screen-reader usability and SEO.-<DocImage src={SupportedChains} /> +<DocImage src={SupportedChains} alt="Logos of all EVM chains supported by thirdweb wallets" />
🧹 Nitpick comments (2)
apps/portal/src/components/Document/AuthMethodsTabs.tsx (2)
4-4: Consider explicit return type annotation for better TypeScript compliance.For better TypeScript compliance and documentation, consider adding explicit return type annotation to the React import.
-import React, { useState } from "react"; +import React, { useState } from "react";Note: Since React namespace is available in this project without explicit import, this follows the project's TypeScript configuration.
624-707: Consider breaking down component into smaller, focused modules.The
AuthMethodsTabsContentcomponent is quite large and handles multiple concerns. Consider extracting the auth method selection and platform tabs into separate components for better maintainability.This would improve:
- Code organization and readability
- Testability of individual components
- Reusability of auth method selection logic
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/portal/src/app/connect/assets/test.jpgis excluded by!**/*.jpg
📒 Files selected for processing (9)
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx(1 hunks)apps/portal/src/app/connect/in-app-wallet/custom-auth/configuration/page.mdx(6 hunks)apps/portal/src/app/connect/page.mdx(1 hunks)apps/portal/src/app/connect/sidebar.tsx(4 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/overview/page.mdx(1 hunks)apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx(1 hunks)apps/portal/src/components/Document/AuthMethodsTabs.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/connect/wallet/pregenerate-wallets/page.mdx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
- apps/portal/src/app/connect/wallet/get-started/page.mdx
- apps/portal/src/app/connect/sidebar.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
apps/portal/src/app/connect/page.mdx (16)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Access browser APIs (`localStorage`, `window`, `IntersectionObserver`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: joaquim-verges
PR: thirdweb-dev/js#7268
File: packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts:210-216
Timestamp: 2025-06-03T23:44:40.243Z
Learning: EIP7702 wallets do not need special handling for switching chains, unlike EIP4337 wallets which require reconnection when switching chains. In the switchChain method condition, EIP7702 should be intentionally excluded from the reconnection logic.
apps/portal/src/app/connect/in-app-wallet/custom-auth/configuration/page.mdx (21)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Use `Authorization: Bearer` header – never embed tokens in URLs
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Always call `getAuthToken()` to retrieve JWT from cookies
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Always call `getAuthToken()` to get the JWT from cookies.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
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.
Learnt from: MananTank
PR: thirdweb-dev/js#7285
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/uri-based-deploy.tsx:57-57
Timestamp: 2025-06-05T13:59:49.886Z
Learning: In the thirdweb dashboard Next.js app, when using loginRedirect() in server components, ensure to add a return statement after the redirect call to prevent further code execution and potential security issues.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Access browser APIs (`localStorage`, `window`, `IntersectionObserver`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Read cookies/headers with `next/headers`
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx (11)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Keep documentation focused on developer experience and practical usage
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
apps/portal/src/app/connect/wallet/overview/page.mdx (17)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Learnt from: arcoraven
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Learnt from: MananTank
PR: thirdweb-dev/js#7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Learnt from: joaquim-verges
PR: thirdweb-dev/js#7268
File: packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts:210-216
Timestamp: 2025-06-03T23:44:40.243Z
Learning: EIP7702 wallets do not need special handling for switching chains, unlike EIP4337 wallets which require reconnection when switching chains. In the switchChain method condition, EIP7702 should be intentionally excluded from the reconnection logic.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
apps/portal/src/components/Document/AuthMethodsTabs.tsx (22)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Use `Authorization: Bearer` header – never embed tokens in URLs
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Always call `getAuthToken()` to retrieve JWT from cookies
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Always call `getAuthToken()` to get the JWT from cookies.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Use descriptive, stable `queryKeys` for cache hits
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Wrap calls in React Query (`@tanstack/react-query`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Use React Query (`@tanstack/react-query`) for all client data fetching.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/pages/*.client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components (browser): Begin files with `'use client';`
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components (Node edge): Start files with `import "server-only";`
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
🧬 Code Graph Analysis (1)
apps/portal/src/components/Document/AuthMethodsTabs.tsx (2)
apps/playground-web/src/lib/utils.ts (1)
cn(5-7)apps/portal/src/components/Document/index.ts (4)
Tabs(4-4)TabsList(4-4)TabsTrigger(4-4)TabsContent(4-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
apps/portal/src/app/connect/in-app-wallet/custom-auth/configuration/page.mdx (3)
30-34: Excellent documentation structure with clear strategy separation.The tabbed interface effectively separates the JWT (OIDC) and auth_endpoint strategies, making it easier for developers to understand the differences and choose the appropriate approach.
60-130: Well-structured multi-platform code examples.The addition of tabbed code examples for TypeScript, React, and .NET provides comprehensive coverage for different development environments. The React examples properly demonstrate component structure with client and wallet initialization.
155-167: Clear endpoint specification enhances developer implementation.The detailed specification of the auth endpoint requirements, including the expected JSON payload and response fields, provides clear guidance for backend implementation.
apps/portal/src/app/connect/account-abstraction/get-started/page.mdx (3)
16-22: Focused metadata accurately reflects the simplified scope.The updated metadata clearly communicates that this page is specifically about gas sponsorship rather than general account abstraction, which aligns well with the streamlined content.
36-76: EIP-7702 approach is well-documented and technically sound.The EIP-7702 examples correctly demonstrate the
executionModeconfiguration for both TypeScript/React and .NET/Unity platforms. The explanation that this enables gasless transactions is accurate.
83-84: Clear explanation of EIP-4337 fallback scenario.The explanation that EIP-4337 is for chains that don't support EIP-7702 and creates a different address is technically accurate and helps developers understand when to use each approach.
apps/portal/src/app/connect/page.mdx (4)
47-73: Excellent multi-platform tab structure with visual icons.The tabbed interface with platform icons provides an intuitive way for developers to navigate to their preferred technology stack. The consistent structure across all tabs enhances usability.
239-242: Important Expo Go limitation clearly highlighted.The callout about Expo Go incompatibility is crucial information for React Native developers and is appropriately placed early in the React Native section.
356-425: Comprehensive Unity integration examples with practical code.The Unity section provides both basic wallet connection examples and more advanced in-app wallet implementations, giving developers multiple implementation pathways.
582-590: Good balance between C++ code and Blueprint guidance for Unreal.The Unreal section appropriately provides both C++ implementation details and guidance for Blueprint users, covering different developer preferences in the Unreal ecosystem.
apps/portal/src/app/connect/wallet/overview/page.mdx (3)
48-54: Updated branding reflects broader toolkit positioning.The rename from "thirdweb Wallets" to "thirdweb Connect" better represents the comprehensive nature of the frontend toolkit, aligning with the expanded feature set described in the content.
74-128: Feature grid effectively communicates wallet capabilities.The updated feature grid with icons provides a clear overview of the wallet system's capabilities, from non-custodial security to cross-platform support. The visual presentation enhances comprehension.
130-151: Quick start section provides clear developer pathways.The SDK cards linking to getting started guides for each platform create a clear onboarding flow for developers working in different environments.
joaquim-verges
force-pushed
the
_Connect_Redesign_sidebar_and_update_wallet_documentation
branch
from
33bf4c5 to
f240d42
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR focuses on updating the documentation for the
thirdwebSDK, enhancing clarity around wallet creation, authentication methods, and gas sponsorship, while also reorganizing content for better user guidance.Detailed summary
Callouttitle from 'Smart Wallet Address' to 'EIP-4337 Smart Wallet Address'.addressfield.ArticleIconCardcomponents withAuthMethodsTabs.Summary by CodeRabbit
New Features
Documentation
Style