[Portal] simplify get started wallet documentation #7466
Merged
+244
−580
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 updates rename a sidebar section from "Onboard Users" to "User Wallets" and significantly simplify the wallet integration documentation. The documentation now focuses on using the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI (React/React Native)
participant inAppWallet
participant Wallet Service
User->>UI (React/React Native): Clicks "Connect with Google"
UI (React/React Native)->>inAppWallet: connect({ strategy: "google" })
inAppWallet->>Wallet Service: Initiate Google OAuth flow
Wallet Service-->>inAppWallet: Return authentication result
inAppWallet-->>UI (React/React Native): Provide connected wallet/account
UI (React/React Native)-->>User: Show connected wallet address
Possibly related PRs
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ 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. |
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: 1
🔭 Outside diff range comments (1)
apps/portal/src/app/connect/sidebar.tsx (1)
6-12: Consolidate/connect/in-app-walletunderwalletSlug
The sidebar still defines a standaloneinAppSlugat/connect/in-app-walletalongside the new/connect/wallet/in-app-wallettree. This leads to duplicate navigation entries and potential 404s. Please remove the old slug and update all references to use${walletSlug}/in-app-wallet.• apps/portal/src/app/connect/sidebar.tsx (lines 6–12):
– Delete or comment outconst inAppSlug = "/connect/in-app-wallet";
– Change anyinAppSlugusage to\${walletSlug}/in-app-wallet`• Review any docs/navigation components that reference/connect/in-app-walletand point them at/connect/wallet/in-app-walletinstead • Once everything’s migrated, remove theapps/portal/src/app/connect/in-app-wallet` directory or add a redirect to the new path- // TODO: move the following two slugs to walletSlug with updated docs - const inAppSlug = "/connect/in-app-wallet"; + // in-app-wallet routes have been moved under walletSlug + // const inAppSlug = "/connect/in-app-wallet";
♻️ Duplicate comments (1)
apps/portal/src/app/connect/wallet/get-started/page.mdx (1)
273-281: Same async issue in React-Native sectionReplicate the fix above for the React-Native example to keep the docs compilable.
- await connect(() => { + await connect(async () => { await wallet.connect({ client, // your thirdweb client strategy: "google", // or any other auth strategy }); return wallet; });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/portal/src/app/connect/sidebar.tsx(1 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
List of files the instruction was applied to:
apps/portal/src/app/connect/sidebar.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/portal/src/app/connect/sidebar.tsx (2)
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
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:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
apps/portal/src/app/connect/wallet/get-started/page.mdx (21)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
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#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-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
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: MananTank
PR: thirdweb-dev/js#7332
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nft-drop-claim.tsx:82-90
Timestamp: 2025-06-13T13:03:41.732Z
Learning: The thirdweb `contract` object is serializable and can safely be used in contexts (e.g., React-Query keys) that require serializable values.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Use pnpm as the package manager and Turborepo for monorepo management.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: For multi-platform support, provide platform-specific exports and adapters (e.g., React Native, Node.js, Wagmi, Ethers).
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts:41-44
Timestamp: 2025-05-27T19:56:16.920Z
Learning: When reviewing hooks that use environment variables like NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID for API calls, MananTank prefers not to add explicit validation checks for these variables, trusting they will be set in the deployment environment.
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: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Files for components should be named in PascalCase and use the '.client.tsx' suffix if interactive.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: jnsdls
PR: thirdweb-dev/js#7363
File: apps/dashboard/src/app/(app)/layout.tsx:63-74
Timestamp: 2025-06-18T02:01:06.006Z
Learning: In Next.js applications, instrumentation files (instrumentation.ts or instrumentation-client.ts) placed in the src/ directory are automatically handled by the framework and included in the client/server bundles without requiring manual imports. The framework injects these files as part of the build process.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use React Query ('@tanstack/react-query') for all client-side data fetching to leverage caching and query management.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use client components for interactive UI, components that rely on hooks, browser APIs, or require fast transitions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Prefer composable UI primitives (Button, Input, Select, Tabs, Card, Sidebar, Separator, Badge) over custom markup for maintainability and design consistency.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
size-limit report 📦
|
joaquim-verges
force-pushed
the
Rename_Onboard_Users_to_User_Wallets_and_simplify_wallet_documentation
branch
from
b197a82 to
f6c6093
Compare
joaquim-verges
force-pushed
the
Rename_Onboard_Users_to_User_Wallets_and_simplify_wallet_documentation
branch
from
f6c6093 to
bad5f99
Compare
joaquim-verges
force-pushed
the
Rename_Onboard_Users_to_User_Wallets_and_simplify_wallet_documentation
branch
from
bad5f99 to
f1188a3
Compare
joaquim-verges
force-pushed
the
Rename_Onboard_Users_to_User_Wallets_and_simplify_wallet_documentation
branch
from
f1188a3 to
b112600
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (1)
1-15: Remove now-unused imports (build will fail in strict mode)
EcosystemSocialConfig,getSocialIcon, andUserIconare imported but never referenced after the rewrite.
Unused imports in MDX are still emitted into the compiled JS bundle and will trigger ESLint/TypeScript errors.-import {UserIcon} from 'lucide-react' -… -import EcosystemSocialConfig from '../assets/social-config.png' -import { getSocialIcon } from "thirdweb/wallets/in-app";
🧹 Nitpick comments (4)
apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx (1)
68-75: Clarify placeholder keys or provide a concrete snippet
metadataandexecutionModeare left as bare identifiers here.
Readers coming straight from the docs are likely to copy/paste this block and will hit TS errors because the example does not show the shape of those objects.Consider in-lining a minimal but valid structure (as done later in the “Usage” section) or add a short comment such as:
metadata: { name: "My dApp", icon: "…" }, executionMode: { mode: "EIP7702", sponsorGas: true },apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (1)
18-18: Branding & case consistency
thirdwebshould be capitalised as “Thirdweb” at the beginning of the sentence.apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx (2)
1-14: Large set of unused imports after content rewrite
Tabs*,AuthList,ArticleIconCard,Stack,Steps, andStepare not referenced anywhere below. These imports will be tree-shaken only in production builds; during development they cause ESLint/TypeScript warnings.Remove or re-use them to avoid noise.
81-82: Comma missing – minor readability fix“…methods to support which will be reflected…”
Add a comma after “support”:
“…methods to support, which will be reflected…”
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/portal/src/app/connect/sidebar.tsx(1 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(18 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx(1 hunks)apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx(10 hunks)apps/portal/src/app/typescript/v5/getting-started/page.mdx(3 hunks)apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx(2 hunks)apps/portal/src/app/typescript/v5/supported-wallets/page.mdx(1 hunks)packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts(2 hunks)packages/thirdweb/src/wallets/in-app/native/native-connector.ts(1 hunks)packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/typescript/v5/supported-wallets/page.mdx
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/portal/src/app/connect/sidebar.tsx
- packages/thirdweb/src/wallets/in-app/native/native-connector.ts
- packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
- packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts
- apps/portal/src/app/typescript/v5/getting-started/page.mdx
- apps/portal/src/app/connect/wallet/get-started/page.mdx
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (2)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx (3)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
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: 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.
apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx (4)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
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: 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-25T02:13:08.257Z
Learning: For multi-platform support, provide platform-specific exports and adapters (e.g., React Native, Node.js, Wagmi, Ethers).
apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx (13)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
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:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
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: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
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-25T02:13:08.257Z
Learning: For multi-platform support, provide platform-specific exports and adapters (e.g., React Native, Node.js, Wagmi, Ethers).
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: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx:40-42
Timestamp: 2025-06-24T21:37:26.869Z
Learning: MananTank confirmed that loginRedirect function calls Next.js redirect internally, so no return statement is needed after calling loginRedirect() as it handles flow control internally by throwing an exception.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
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.
🪛 LanguageTool
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
[misspelling] ~18-~18: This word is normally spelled as one.
Context: ...e. For every user, thirdweb generates a non-custodial wallet behi...
(EN_COMPOUNDS_NON_CUSTODIAL)
apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx
[uncategorized] ~81-~81: A comma might be missing here.
Context: ...stomize which authentication methods to support which will be reflected in the UI, as w...
(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
Comment on lines
88
to
+95
| const client = createThirdwebClient({ clientId }); | ||
| const wallet = inAppWallet(); | ||
| const wallet = inAppWallet({ | ||
| // enable gasless transactions for the wallet | ||
| executionMode: { | ||
| mode: "EIP7702", | ||
| sponsorGas: true, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Missing import for createThirdwebClient and stale variable name clientId
- The snippet calls
createThirdwebClientbut doesn’t import it, which will throw when copied verbatim. - PR-wide terminology was changed from client id to project secret key—using
clientIdhere re-introduces the old term.
-import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
+import { ThirdwebProvider, ConnectButton, createThirdwebClient } from "thirdweb/react";
-const client = createThirdwebClient({ clientId });
+const client = createThirdwebClient({ secretKey });🏁 Script executed:
#!/bin/bash
set -e
echo "Searching for createThirdwebClient occurrences..."
rg -n "createThirdwebClient"
echo ""
echo "Searching for 'secretKey' in codebase..."
rg -n "secretKey"
echo ""
echo "Searching for 'clientId' usage..."
rg -n "clientId"Length of output: 158595
🏁 Script executed:
#!/bin/bash
echo "Displaying import and setup context (lines 1-40):"
sed -n '1,40p' apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
echo -e "\nDisplaying snippet context around lines 78-100:"
sed -n '78,100p' apps/portal/src/app/typescript/v5/in-app-wallet/page.mdxLength of output: 1902
Add missing import for createThirdwebClient and keep clientId
The code block calls createThirdwebClient but it isn’t imported. Also, for client-side in-app wallets you should continue to pass your publishable key (clientId), not the server-only secretKey.
• File: apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
• Location: top of the Usage section (around line 78)
Suggested diff:
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
+import { createThirdwebClient } from "thirdweb";
import { inAppWallet } from "thirdweb/wallets";
const client = createThirdwebClient({ clientId });📝 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 client = createThirdwebClient({ clientId }); | |
| const wallet = inAppWallet(); | |
| const wallet = inAppWallet({ | |
| // enable gasless transactions for the wallet | |
| executionMode: { | |
| mode: "EIP7702", | |
| sponsorGas: true, | |
| }, | |
| }); | |
| import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; | |
| import { createThirdwebClient } from "thirdweb"; | |
| import { inAppWallet } from "thirdweb/wallets"; | |
| const client = createThirdwebClient({ clientId }); | |
| const wallet = inAppWallet({ | |
| // enable gasless transactions for the wallet | |
| executionMode: { | |
| mode: "EIP7702", | |
| sponsorGas: true, | |
| }, | |
| }); |
🤖 Prompt for AI Agents
In apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx around lines 78 to
95, the function createThirdwebClient is used but not imported, and the clientId
variable is missing. Add an import statement for createThirdwebClient at the top
of the Usage section near line 78, and ensure that clientId is defined and
passed to createThirdwebClient instead of using a server-only secretKey. This
will fix the missing import and correctly use the publishable clientId for
client-side wallet initialization.
Comment on lines
+1
to
+5
| import { Breadcrumb, createMetadata } from "@doc"; | ||
| import { WalletCard, WalletCardGrid } from "@/components/others/WalletCard"; | ||
| import SmartWalletIcon from "@public/icons/wallets/smartwallet.svg"; | ||
| import EmbeddedWalletIcon from "@public/icons/wallets/embeddedwallet.svg"; | ||
| import { AllSupportedWallets } from "@/components/others/AllSupportedWallets"; |
There was a problem hiding this comment.
Strip obsolete imports introduced by the page simplification
Breadcrumb, WalletCard, WalletCardGrid, SmartWalletIcon, and EmbeddedWalletIcon are no longer used. Keeping them increases bundle size and may break the build under noUnusedLocals.
-import { Breadcrumb, createMetadata } from "@doc";
-import { WalletCard, WalletCardGrid } from "@/components/others/WalletCard";
-import SmartWalletIcon from "@public/icons/wallets/smartwallet.svg";
-import EmbeddedWalletIcon from "@public/icons/wallets/embeddedwallet.svg";
+import { createMetadata } from "@doc";📝 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
| import { Breadcrumb, createMetadata } from "@doc"; | |
| import { WalletCard, WalletCardGrid } from "@/components/others/WalletCard"; | |
| import SmartWalletIcon from "@public/icons/wallets/smartwallet.svg"; | |
| import EmbeddedWalletIcon from "@public/icons/wallets/embeddedwallet.svg"; | |
| import { AllSupportedWallets } from "@/components/others/AllSupportedWallets"; | |
| import { createMetadata } from "@doc"; | |
| import { AllSupportedWallets } from "@/components/others/AllSupportedWallets"; |
🤖 Prompt for AI Agents
In apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx
at lines 1 to 5, remove the unused imports Breadcrumb, WalletCard,
WalletCardGrid, SmartWalletIcon, and EmbeddedWalletIcon as they are no longer
used in the file. This will reduce bundle size and prevent build errors related
to unused local imports.
b112600 to
7697ac6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (1)
18-20: Polish wording & punctuation for clarityA quick wording tweak makes the opener read more smoothly and fixes the LanguageTool punctuation warning.
-thirdweb supports various authentication methods: social logins, email and SMS, passkeys, and more. For every user, thirdweb generates a non-custodial [wallet](/connect/wallet/security) behind the scenes. +thirdweb supports multiple authentication methods—social logins, email & SMS, passkeys, and more. For every user, thirdweb generates a non-custodial [wallet](/connect/wallet/security) behind the scenes.apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx (2)
80-82: Missing comma → sentence is hard to parseAdd a comma after support and another before the final list item for readability.
-You can customize which authentication methods to support which will be reflected in the UI, as well as the app name, icon and image. +You can customize which authentication methods to support, which will be reflected in the UI, as well as the app name, icon, and image.
85-90: Import forcreateThirdwebClientis missing in the snippetWithout this import, copy-pasting the example fails with a
ReferenceError. Add the import so the snippet works out-of-the-box.-import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; -import { inAppWallet } from "thirdweb/wallets"; +import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; +import { inAppWallet } from "thirdweb/wallets"; +import { createThirdwebClient } from "thirdweb";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/portal/knip.json(1 hunks)apps/portal/src/app/connect/sidebar.tsx(1 hunks)apps/portal/src/app/connect/wallet/get-started/page.mdx(18 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx(2 hunks)apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx(1 hunks)apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx(10 hunks)apps/portal/src/app/typescript/v5/getting-started/page.mdx(3 hunks)apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx(2 hunks)apps/portal/src/app/typescript/v5/supported-wallets/page.mdx(1 hunks)packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts(2 hunks)packages/thirdweb/src/wallets/in-app/native/native-connector.ts(1 hunks)packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/knip.json
🚧 Files skipped from review as they are similar to previous changes (9)
- apps/portal/src/app/connect/sidebar.tsx
- packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
- packages/thirdweb/src/wallets/in-app/native/native-connector.ts
- packages/thirdweb/src/wallets/in-app/core/authentication/guest.ts
- apps/portal/src/app/typescript/v5/supported-wallets/page.mdx
- apps/portal/src/app/typescript/v5/in-app-wallet/page.mdx
- apps/portal/src/app/typescript/v5/getting-started/page.mdx
- apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx
- apps/portal/src/app/connect/wallet/get-started/page.mdx
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx (2)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Keep documentation focused on developer experience and practical usage, and surface breaking changes prominently in PR descriptions.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx (11)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
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: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
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-25T02:13:08.257Z
Learning: For multi-platform support, provide platform-specific exports and adapters (e.g., React Native, Node.js, Wagmi, Ethers).
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: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/page.tsx:40-42
Timestamp: 2025-06-24T21:37:26.869Z
Learning: MananTank confirmed that loginRedirect function calls Next.js redirect internally, so no return statement is needed after calling loginRedirect() as it handles flow control internally by throwing an exception.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
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.
🪛 LanguageTool
apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx
[misspelling] ~18-~18: This word is normally spelled as one.
Context: ...e. For every user, thirdweb generates a non-custodial wallet behi...
(EN_COMPOUNDS_NON_CUSTODIAL)
apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx
[uncategorized] ~81-~81: A comma might be missing here.
Context: ...stomize which authentication methods to support which will be reflected in the UI, as w...
(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
joaquim-verges
deleted the
Rename_Onboard_Users_to_User_Wallets_and_simplify_wallet_documentation
branch
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 updates to wallet functionalities and UI components in the
thirdwebplatform, enhancing user authentication methods and refining documentation across various app sections.Detailed summary
Onboard UserstoUser Walletsinsidebar.tsx.this.storageinweb-connector.tsandnative-connector.ts.executionModefor gasless transactions ininAppWalletinitialization.supported-walletsdocumentation to reflect external wallets.sign-in-methodsdocumentation.getting-starteddocumentation regarding project secret key.Summary by CodeRabbit
New Features
Documentation
inAppWalletwith social login strategies.Bug Fixes
Style