Add TikTok as auth method for In-App and Ecosystem Wallets #7817
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
Introduces TikTok as a new authentication provider across In-App and Ecosystem Wallets. Updates types, UI components, icon sets, documentation, and connector logic to support TikTok login.
🦋 Changeset detectedLatest commit: 015d096 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughTikTok has been added as a supported authentication provider across the codebase. This includes updates to type definitions, authentication logic, UI components, documentation, and icon assets to recognize and display TikTok as a login option for both In-App and Ecosystem Wallets, as well as corresponding tests and labels. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant AuthLogic
participant TikTok
User->>UI: Selects "Sign in with TikTok"
UI->>AuthLogic: Initiates TikTok auth flow
AuthLogic->>TikTok: Redirects/request OAuth login
TikTok-->>AuthLogic: Returns auth token
AuthLogic-->>UI: Confirms authentication
UI-->>User: Displays successful login
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were found. Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
Dashboard
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. |
![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 (6)
apps/dashboard/src/@/api/team/ecosystems.ts (1)
6-16: Add missing TikTok mappings across connectors and UI componentsAfter adding “tiktok” to the
AuthOptionunion, there are no downstream mappings for it. Please add the corresponding entries in these files to ensure runtime support:
- OAuth route
oauthSignIn.ts: handle TikTok’s sign-in path- Connector strategies
web-connector.ts&native-connector.ts: register the TikTok OAuth connector- Icon assets
walletIcon.ts&svgs.ts: include the TikTok logo and map it to “tiktok”- Social auth UI
ConnectWalletSocialOptions.tsx: render TikTok as a social login option- Dashboard forms
auth-options-form.client.tsx&AuthList.tsx: add TikTok to the list of selectable auth optionspackages/thirdweb/src/wallets/in-app/core/authentication/types.ts (1)
90-106: Add TikTok support to OAuthOption and both native/web connectorsTo fully integrate the new
AuthProvider = "TikTok", you still need to:• Extend the
OAuthOptionunion in
packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
– add'tiktok'.
• Include'tiktok'in yoursocialAuthOptionsarray (same file).
• Update the web connector (e.g.src/wallets/in-app/web/connectors/oauthConnector.tsoroauthSignIn.ts)
– mapAuthProvider: "TikTok"→ OAuthOption'tiktok'.
• Update the native connector (e.g.src/wallets/in-app/native/connectors/*)
– handle the new"TikTok"case and route to'tiktok'.Example diff in types.ts:
--- a/packages/thirdweb/src/wallets/in-app/core/authentication/types.ts +++ b/packages/thirdweb/src/wallets/in-app/core/authentication/types.ts @@ export type OAuthOption = - | 'google' - | 'facebook' + | 'google' + | 'facebook' + | 'tiktok' @@ export const socialAuthOptions = [ - 'facebook', + 'facebook', + 'tiktok', ] as const;And in your connector’s switch/mapping:
case AuthProvider.TikTok: - // TODO + return 'tiktok';apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx (1)
1-1: Mark as a Client ComponentThis component uses event handlers; in the App Router, it must start with 'use client'.
Apply:
+ 'use client'; import { ExternalLinkIcon } from "lucide-react";apps/portal/src/app/dotnet/wallets/providers/in-app-wallet/page.mdx (1)
111-114: Parameter doc: expand/neutralize supported OAuth listThis still enumerates only Google/Apple/Facebook. Either extend to include TikTok (and others) or reference the AuthProvider enum instead of hardcoding.
-### authProvider (optional) - -The OAuth provider to use for authentication. Supported values are `AuthProvider.Google`, `AuthProvider.Apple`, `AuthProvider.Facebook`. +### authProvider (optional) + +The OAuth provider to use for authentication. Supported values include common providers such as Google, Apple, Facebook, Telegram, Farcaster, LINE, GitHub, Twitch, Steam, TikTok. Refer to the `AuthProvider` enum for the full, up-to-date list.apps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx (1)
121-124: Parameter doc: include TikTok or reference enumKeep this aligned with supported providers.
-### authProvider (optional) - -The OAuth provider to use for authentication. Supported values are `AuthProvider.Google`, `AuthProvider.Apple`, `AuthProvider.Facebook`. +### authProvider (optional) + +The OAuth provider to use for authentication. Supported values include common providers such as Google, Apple, Facebook, Telegram, Farcaster, LINE, GitHub, Twitch, Steam, TikTok. Refer to the `AuthProvider` enum for the full, up-to-date list.packages/thirdweb/src/wallets/in-app/native/native-connector.ts (1)
202-213: Missing TikTok social auth implementation in native connectorThe new
case "tiktok"branch in
packages/thirdweb/src/wallets/in-app/native/native-connector.ts(lines 202–213)
callssocialAuth, but there is no TikTok strategy in
packages/thirdweb/src/wallets/in-app/native/auth/native-auth.ts(no “tiktok” references).Please either:
- Implement the TikTok flow in
socialAuth(e.g. add the OAuth endpoints/parameters for TikTok innative-auth.ts),- Or remove the
case "tiktok"branch until full native support is added.
🧹 Nitpick comments (14)
apps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdx (1)
21-21: Nit: brand casing and punctuationConsider fixing brand casing and punctuation on the socials line.
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, TikTok etc.) +- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, GitHub, Twitch, Steam, TikTok, etc.)Optionally, update “Line” to “LINE” if you follow strict brand styling across docs.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx (1)
82-101: LGTM on adding "tiktok"; improve label rendering for brand-correct casingThe addition of "tiktok" is correct and consistent with other entries. The current capitalization logic will render “Tiktok” and “Github”. Prefer explicit labels to preserve brand case (TikTok, GitHub, X, LINE).
Add a stable label map and use it in
pickRandomAuthMethod:+const AUTH_LABELS: Record<InAppWalletAuth, string> = { + google: "Google", + apple: "Apple", + facebook: "Facebook", + discord: "Discord", + line: "LINE", + x: "X", + tiktok: "TikTok", + coinbase: "Coinbase", + farcaster: "Farcaster", + telegram: "Telegram", + github: "GitHub", + twitch: "Twitch", + steam: "Steam", + guest: "Guest", + email: "Email", + phone: "Phone", + passkey: "Passkey", + wallet: "Wallet", +};-const pickRandomAuthMethod = () => { +const pickRandomAuthMethod = () => { const picked = authMethodsToPickFrom[ Math.floor(Math.random() * authMethodsToPickFrom.length) ] || "google"; - - const capitalized = picked.charAt(0).toUpperCase() + picked.slice(1); - return capitalized; + return AUTH_LABELS[picked] ?? "Google"; };apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx (1)
88-92: Avoid duplicate entries when enabling a methodGuard against adding the same method twice.
- else { - newInAppWallet.methods = [ - ...v.inAppWallet.methods, - method, - ]; - } + else { + if (!v.inAppWallet.methods.includes(method)) { + newInAppWallet.methods = [ + ...v.inAppWallet.methods, + method, + ]; + } + }apps/portal/src/app/dotnet/wallets/providers/in-app-wallet/page.mdx (1)
18-18: Brand casing: GitHubUse correct brand casing.
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, TikTok etc.) +- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, GitHub, Twitch, Steam, TikTok etc.)apps/portal/src/components/Document/AuthList.tsx (1)
37-38: Brand-correct display names (optional)Show proper brand casing for a few providers.
- {auth.charAt(0).toUpperCase() + auth.slice(1)} + {{ + tiktok: "TikTok", + github: "GitHub", + line: "LINE", + x: "X", + }[auth] ?? (auth.charAt(0).toUpperCase() + auth.slice(1))}apps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx (1)
18-18: Brand casing: GitHubUse correct brand casing in provider list.
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, TikTok etc.) +- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, GitHub, Twitch, Steam, TikTok etc.)packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx (2)
254-257: Type-safe error handling in onError (unknown → string).onError receives unknown (from react-query). Accessing error.message may type-error at compile-time and can throw at runtime if non-Error. Use a safe message extraction.
- onError: (error) => { - // TODO (rn) - handle error toast or input error border/label - Alert.alert("Error", error.message); - }, + onError: (error) => { + // TODO (rn) - handle error toast or input error border/label + const msg = + error instanceof Error + ? error.message + : typeof error === "string" + ? error + : "Something went wrong. Please try again."; + Alert.alert("Error", msg); + },
295-296: Redundant check for verificationCode.The condition duplicates itself. Trim and single-check to avoid accidental whitespace-only codes.
- if (!verificationCode || !verificationCode) return; + if (!verificationCode.trim()) return;apps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdx (1)
23-24: Fix brand casing: GitHub.Use “GitHub” instead of “Github” on the updated line for brand consistency.
-- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, Github, Twitch, Steam, TikTok etc.) +- Socials (Google, Apple, Facebook, Telegram, Farcaster, Line, GitHub, Twitch, Steam, TikTok, etc.)packages/thirdweb/src/react/native/ui/icons/svgs.ts (1)
140-148: Add preserveAspectRatio to avoid distortion; keep rendering consistent.The TikTok SVG has a non-square viewBox (848×594). When rendered into square sizes (e.g., 38×38), it can distort. Adding preserveAspectRatio ensures correct scaling without reworking paths.
-export const TIKTOK_ICON = `<svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 848 594" style="enable-background:new 0 0 848 594;" xml:space="preserve"> +export const TIKTOK_ICON = `<svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 848 594" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 848 594;" xml:space="preserve">packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts (1)
10-18: Brand-correct popup titles (TikTok, GitHub).Default capitalization produces “Tiktok” and “Github.” Special-case these for correct branding in the popup title.
function getBodyTitle(authOption: InAppWalletSocialAuth) { switch (authOption) { case "google": return "Sign In - Google Accounts"; + case "tiktok": + return "Sign In - TikTok"; + case "github": + return "Sign In - GitHub"; default: return `Sign In - ${authOption .slice(0, 1) .toUpperCase()}${authOption.slice(1)}`; } }packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
360-363: Use display label for aria-label (brand-casing & i18n)Current aria-label uses the raw key (e.g., "tiktok", "x"). Use
loginMethodsLabel[loginMethod]for proper casing/localization.- aria-label={`Login with ${loginMethod}`} + aria-label={`Login with ${loginMethodsLabel[loginMethod as SocialAuthOption]}`}apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx (1)
318-322: Brand-cased label for TikTokThe generic capitalization renders “Tiktok”. Special-case TikTok to preserve brand casing.
- {option === "siwe" - ? "Wallet" - : option.slice(0, 1).toUpperCase() + option.slice(1)} + {option === "siwe" + ? "Wallet" + : option === "tiktok" + ? "TikTok" + : option.slice(0, 1).toUpperCase() + option.slice(1)}packages/thirdweb/src/react/core/utils/walletIcon.ts (1)
78-116: Optional: De-duplicate provider mapping by reusingsocialIconsingetSocialIcon.Reduces maintenance burden as new providers (like TikTok) are added.
You can simplify to:
-export function getSocialIcon(provider: AuthOption | ({} & string)): string { - switch (provider) { - case "google": - return googleIconUri; - case "coinbase": - return coinbaseIconUri; - case "apple": - return appleIconUri; - case "facebook": - return facebookIconUri; - case "phone": - return phoneIcon; - case "email": - return emailIcon; - case "passkey": - return passkeyIcon; - case "discord": - return discordIconUri; - case "line": - return lineIconUri; - case "x": - return xIcon; - case "tiktok": - return tiktokIconUri; - case "farcaster": - return farcasterIconUri; - case "telegram": - return telegramIconUri; - case "twitch": - return twitchIconUri; - case "github": - return githubIconUri; - case "steam": - return steamIconUri; - case "guest": - return guestIcon; - default: - return genericWalletIcon; - } -} +export function getSocialIcon(provider: AuthOption | string): string { + // Prefer mapped social icons to avoid switch duplication + if (provider in socialIcons) { + return socialIcons[provider as keyof typeof socialIcons]; + } + switch (provider) { + case "phone": + return phoneIcon; + case "email": + return emailIcon; + case "passkey": + return passkeyIcon; + case "guest": + return guestIcon; + default: + return genericWalletIcon; + } +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/thirdweb/src/extensions/erc7579/__generated__/ModularAccountFactory/read/accountImplementation.tsis excluded by!**/__generated__/**packages/thirdweb/src/extensions/farcaster/__generated__/IIdGateway/write/registerFor.tsis excluded by!**/__generated__/**packages/thirdweb/src/extensions/farcaster/__generated__/IIdRegistry/read/CHANGE_RECOVERY_ADDRESS_TYPEHASH.tsis excluded by!**/__generated__/**
📒 Files selected for processing (25)
.changeset/slick-cups-joke.md(1 hunks)apps/dashboard/src/@/api/team/ecosystems.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx(1 hunks)apps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx(1 hunks)apps/portal/src/app/dotnet/wallets/providers/in-app-wallet/page.mdx(1 hunks)apps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdx(1 hunks)apps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdx(1 hunks)apps/portal/src/components/Document/AuthList.tsx(1 hunks)packages/thirdweb/src/extensions/erc721/lazyMinting/write/createDelayedRevealBatch.ts(0 hunks)packages/thirdweb/src/extensions/erc721/lazyMinting/write/reveal.test.ts(0 hunks)packages/thirdweb/src/extensions/erc721/write/sigMint.ts(0 hunks)packages/thirdweb/src/extensions/erc7702/account/sessionkey.test.ts(0 hunks)packages/thirdweb/src/react/core/utils/walletIcon.test.ts(1 hunks)packages/thirdweb/src/react/core/utils/walletIcon.ts(3 hunks)packages/thirdweb/src/react/native/ui/components/WalletImage.tsx(2 hunks)packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx(2 hunks)packages/thirdweb/src/react/native/ui/icons/svgs.ts(1 hunks)packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx(1 hunks)packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts(1 hunks)packages/thirdweb/src/wallets/in-app/core/authentication/types.ts(1 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)packages/thirdweb/src/wallets/types.ts(1 hunks)
💤 Files with no reviewable changes (4)
- packages/thirdweb/src/extensions/erc7702/account/sessionkey.test.ts
- packages/thirdweb/src/extensions/erc721/lazyMinting/write/reveal.test.ts
- packages/thirdweb/src/extensions/erc721/lazyMinting/write/createDelayedRevealBatch.ts
- packages/thirdweb/src/extensions/erc721/write/sigMint.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/wallets/in-app/web/lib/web-connector.tspackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tsapps/dashboard/src/@/api/team/ecosystems.tspackages/thirdweb/src/wallets/in-app/native/native-connector.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/wallets/in-app/web/lib/web-connector.tspackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tsapps/dashboard/src/@/api/team/ecosystems.tspackages/thirdweb/src/wallets/in-app/native/native-connector.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxapps/dashboard/src/@/api/team/ecosystems.ts
**/*.stories.tsx
📄 CodeRabbit Inference Engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
packages/thirdweb/src/wallets/**
📄 CodeRabbit Inference Engine (CLAUDE.md)
packages/thirdweb/src/wallets/**: UnifiedWalletandAccountinterfaces in wallet architecture
Support for in-app wallets (social/email login)
Smart wallets with account abstraction
EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Files:
packages/thirdweb/src/wallets/in-app/web/lib/web-connector.tspackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/wallets/in-app/native/native-connector.ts
**/*.test.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.test.{ts,tsx}: Place tests alongside code:foo.ts↔foo.test.ts
Use real function invocations with stub data in tests; avoid brittle mocks
Use Mock Service Worker (MSW) for fetch/HTTP call interception in tests
Keep tests deterministic and side-effect free
UseFORKED_ETHEREUM_CHAINfor mainnet interactions andANVIL_CHAINfor isolated tests
Files:
packages/thirdweb/src/react/core/utils/walletIcon.test.ts
🧠 Learnings (32)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
.changeset/slick-cups-joke.mdapps/portal/src/app/dotnet/wallets/providers/in-app-wallet/page.mdxapps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdxapps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdxapps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/wallets/in-app/web/lib/web-connector.tspackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/wallets/in-app/native/native-connector.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Applied to files:
.changeset/slick-cups-joke.mdapps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdxapps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdxapps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxpackages/thirdweb/src/wallets/in-app/web/lib/web-connector.tspackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Unified `Wallet` and `Account` interfaces in wallet architecture
Applied to files:
.changeset/slick-cups-joke.mdapps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdxapps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdxapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Smart wallets with account abstraction
Applied to files:
.changeset/slick-cups-joke.md
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Applied to files:
apps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdxapps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/portal/src/app/unity/v5/wallets/in-app-wallet/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxapps/portal/src/components/Document/AuthList.tsxapps/dashboard/src/@/api/team/ecosystems.tspackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `Authorization: Bearer` header – never embed tokens in URLs
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/wallets/in-app/core/authentication/types.tsapps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxapps/dashboard/src/@/api/team/ecosystems.tspackages/thirdweb/src/react/native/ui/icons/svgs.ts
📚 Learning: 2025-07-10T10:18:33.238Z
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.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxapps/dashboard/src/@/api/team/ecosystems.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Always call `getAuthToken()` to retrieve JWT from cookies on server side
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/portal/src/components/Document/AuthList.tsxapps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-06-10T00:50:20.795Z
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.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Always call `getAuthToken()` to get the JWT from cookies.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/portal/src/components/Document/AuthList.tsxapps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/@/analytics/report.ts : Review `src/@/analytics/report.ts` before adding analytics events to check for duplicates
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tsapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxapps/portal/src/components/Document/AuthList.tsxpackages/thirdweb/src/wallets/in-app/core/authentication/types.tspackages/thirdweb/src/wallets/types.tspackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/wallets/in-app/native/native-connector.tspackages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsxpackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/native/ui/components/WalletImage.tsxpackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-07T21:21:47.488Z
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.
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxpackages/thirdweb/src/react/core/utils/walletIcon.test.tspackages/thirdweb/src/react/native/ui/icons/svgs.tspackages/thirdweb/src/react/core/utils/walletIcon.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsxapps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsxapps/portal/src/components/Document/AuthList.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
Applied to files:
packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
📚 Learning: 2025-06-18T02:13:34.500Z
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.
Applied to files:
packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.tspackages/thirdweb/src/wallets/in-app/native/native-connector.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use Tailwind CSS only – no inline styles or CSS modules
Applied to files:
apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
📚 Learning: 2025-06-10T15:59:29.585Z
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/SocialUrls.tsx:24-25
Timestamp: 2025-06-10T15:59:29.585Z
Learning: In the SocialUrlsFieldset component in React Hook Form with TypeScript generics, when using useFieldArray with a generic form type T that extends WithSocialUrls, the type assertion `as unknown as UseFormReturn<WithSocialUrls>` is the preferred approach rather than trying to use `as keyof T`, because useFieldArray needs specific type information about the array field structure.
Applied to files:
packages/thirdweb/src/wallets/types.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.test.{ts,tsx} : Keep tests deterministic and side-effect free
Applied to files:
packages/thirdweb/src/react/core/utils/walletIcon.test.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.test.{ts,tsx} : Use `FORKED_ETHEREUM_CHAIN` for mainnet interactions and `ANVIL_CHAIN` for isolated tests
Applied to files:
packages/thirdweb/src/react/core/utils/walletIcon.test.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
Applied to files:
apps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Keep tokens secret via internal API routes or server actions
Applied to files:
apps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
Applied to files:
apps/dashboard/src/@/api/team/ecosystems.ts
📚 Learning: 2025-06-17T18:30:52.976Z
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.
Applied to files:
packages/thirdweb/src/react/core/utils/walletIcon.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
.changeset/slick-cups-joke.md (1)
1-5: Changeset looks correct and scoped.Patch bump for "thirdweb" with a concise summary is appropriate for adding a new auth method.
apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx (1)
22-22: TikTok method added — looks goodThe addition aligns with the new provider and existing patterns.
apps/portal/src/app/dotnet/wallets/providers/in-app-wallet/page.mdx (1)
18-18: Docs updated to include TikTok — good additionapps/portal/src/components/Document/AuthList.tsx (1)
17-17: TikTok added to authOptions — looks correctapps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx (1)
18-18: Docs updated to include TikTok — goodpackages/thirdweb/src/wallets/types.ts (1)
29-29: TikTok integration verified across all modulesAll occurrences of
"tiktok"have been added consistently:
- Social auth types (packages/thirdweb/src/wallets/types.ts:29)
- In-app native & web connectors (native-connector.ts, web-connector.ts)
- OAuth sign-in logic (oauthSignIn.ts)
- Icon utilities & tests (walletIcon.ts, walletIcon.test.ts)
- Documentation (portal MDX files)
- Web & native UI components (React and React Native)
No missing references detected—changes look complete.
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx (2)
42-45: TikTok icon import wired correctly.Importing TIKTOK_ICON from svgs aligns with the existing pattern for other providers.
71-72: TikTok icon mapping added as expected.socialIcons now includes tiktok → TIKTOK_ICON, so RNImage will render it properly.
packages/thirdweb/src/react/core/utils/walletIcon.test.ts (1)
54-56: Good coverage for TikTok icon retrieval.The test asserts getSocialIcon("tiktok") resolves to socialIcons.tiktok, consistent with other providers.
packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts (1)
46-50: TikTok OAuth path supported.Adding case "tiktok" to the switch correctly routes through getLoginUrl.
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)
121-121: TikTok label added — looks goodLabel aligns with other non-localized providers. Ensure TikTok is present in
socialAuthOptionsandsocialIcons(it appears to be handled elsewhere).apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx (1)
51-52: Added "tiktok" to selectable auth options — OKThis matches the extended
AuthOptiontype and icon retrieval.packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts (1)
340-351: TikTok integration validated across all flowsAll end-to-end wiring for “tiktok” has been confirmed:
- Types:
socialAuthOptionsandauthOptionsinclude"tiktok".- OAuth web sign-in:
oauthSignIn.tshandlescase "tiktok".- Web connector: both authenticate and connect switch statements in
web-connector.tsinclude"tiktok".- Native connector:
native-connector.tsswitch covers"tiktok".- Icons: TikTok icon URI in
walletIcon.tsandTIKTOK_ICONinsvgs.tsare defined and returned.No further fixes needed.
packages/thirdweb/src/react/native/ui/components/WalletImage.tsx (1)
24-28: RN wallet image now supports TikTok — LGTMImport and switch case are consistent with other providers.
Also applies to: 107-109
packages/thirdweb/src/react/core/utils/walletIcon.ts (2)
32-33: TikTok SVG data URI added — looks correct and consistent.Inline base64 follows existing pattern; no issues spotted.
63-64: AddedtiktoktosocialIconsmap — LGTM.
size-limit report 📦
|
Replaced the TikTok SVG data in both walletIcon.ts and svgs.ts with a new, more detailed SVG. This ensures consistency and improved visual quality for the TikTok icon across web and native platforms.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #7817 +/- ##
=======================================
Coverage 56.33% 56.34%
=======================================
Files 905 905
Lines 58821 58831 +10
Branches 4144 4148 +4
=======================================
+ Hits 33137 33146 +9
- Misses 25578 25579 +1
Partials 106 106
🚀 New features to boost your workflow:
|
joaquim-verges
approved these changes
Aug 12, 2025
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.
Introduces TikTok as a new authentication provider across In-App and Ecosystem Wallets. Updates types, UI components, icon sets, documentation, and connector logic to support TikTok login.
Closes BLD-72
PR-Codex overview
This PR introduces
TikTokas a new authentication method across various components and files, enhancing the wallet's social login options.Detailed summary
tiktokto authentication methods in several files.socialIconsto includeTIKTOK_ICON.Summary by CodeRabbit
New Features
Documentation
Tests