Skip to content

Conversation

@0xFirekeeper
Copy link
Member

@0xFirekeeper 0xFirekeeper commented Oct 31, 2025

Introduces Epic Games ('epic') as a supported authentication provider across dashboard, portal, playground, and analytics chart components. Adds the EpicIcon SVG, updates type definitions, test coverage, and icon mapping to support the new provider.


PR-Codex overview

This PR introduces Epic Games authentication support across various components and files in the codebase, enhancing the authentication options available to users.

Detailed summary

  • Added epic to authentication options in multiple files.
  • Updated AuthList.tsx, ConnectWalletSocialOptions.tsx, and others to include epic.
  • Created EPIC_ICON SVG for the Epic Games logo.
  • Modified functions to handle epic in authentication workflows.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

  • New Features

    • Integrated Epic Games as a new social login/auth provider across web, native, and dashboard UIs
    • Added Line and TikTok as additional social authentication providers
    • Added corresponding icons and UI options for the new providers
  • Tests

    • Added/updated tests to cover the newly supported authentication providers

Introduces Epic Games ('epic') as a supported authentication provider across dashboard, portal, playground, and analytics chart components. Adds the EpicIcon SVG, updates type definitions, test coverage, and icon mapping to support the new provider.
@0xFirekeeper 0xFirekeeper requested review from a team as code owners October 31, 2025 23:03
@0xFirekeeper 0xFirekeeper added the DO NOT MERGE This pull request is still in progress and is not ready to be merged. label Oct 31, 2025
@changeset-bot
Copy link

changeset-bot bot commented Oct 31, 2025

🦋 Changeset detected

Latest commit: dbe9f50

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
thirdweb Patch
@thirdweb-dev/nebula Patch
@thirdweb-dev/wagmi-adapter Patch
wagmi-inapp Patch

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

@vercel
Copy link

vercel bot commented Oct 31, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
docs-v2 Ready Ready Preview Comment Nov 6, 2025 11:17pm
nebula Ready Ready Preview Comment Nov 6, 2025 11:17pm
thirdweb_playground Ready Ready Preview Comment Nov 6, 2025 11:17pm
thirdweb-www Ready Ready Preview Comment Nov 6, 2025 11:17pm
wallet-ui Ready Ready Preview Comment Nov 6, 2025 11:17pm

@github-actions github-actions bot added Dashboard Involves changes to the Dashboard. Playground Changes involving the Playground codebase. Portal Involves changes to the Portal (docs) codebase. packages SDK Involves changes to the thirdweb SDK labels Oct 31, 2025
@graphite-app
Copy link
Contributor

graphite-app bot commented Oct 31, 2025

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

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
Copy link
Contributor

coderabbitai bot commented Oct 31, 2025

Walkthrough

Adds Epic Games ("epic") as a new authentication provider across type definitions, UI components, icon assets, OAuth sign-in paths, and native/web in-app wallet connectors.

Changes

Cohort / File(s) Summary
Changeset
\.changeset/beige-candles-happen.md
Adds a changeset documenting a patch for the "thirdweb" scope introducing Epic Games Authentication.
Type definitions
apps/dashboard/src/@/api/team/ecosystems.ts, packages/thirdweb/src/wallets/in-app/core/authentication/types.ts, packages/thirdweb/src/wallets/types.ts
Adds "epic" / "Epic" to AuthOption/AuthProvider unions and inserts "epic" into socialAuthOptions.
Icon assets
packages/thirdweb/src/react/core/utils/walletIcon.ts, packages/thirdweb/src/react/core/utils/walletIcon.test.ts, packages/thirdweb/src/react/native/ui/icons/svgs.ts
Adds an epic icon mapping and data URI; introduces EPIC_ICON export (duplicated declaration appears in diff) and test case for getSocialIcon("epic").
Web/native UI components
packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx, packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx, packages/thirdweb/src/react/native/ui/components/WalletImage.tsx, packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
Adds epic label/icon mappings and OAuth login path handling; maps EPIC_ICON for native UI and handles "epic" in getOauthLoginPath.
In-app wallet connectors
packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts, packages/thirdweb/src/wallets/in-app/native/native-connector.ts
Adds "epic" to switch branches routing to existing OAuth/social auth flows (loginWithOauth / socialAuth) for web and native connectors.
Dashboard / Portal UI
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx, apps/portal/src/components/Document/AuthList.tsx, apps/portal/src/components/Document/AuthMethodsTabs.tsx
Includes epic in auth option arrays and adds AuthMethodsTabs entries (and union types) for line, tiktok, and epic, with OAuth descriptions and generated code snippets updated.
Playground & Stories
apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx, apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx, packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
Adds epic to arrays of in-app wallet auth methods used for rendering/stories.

Sequence Diagram(s)

sequenceDiagram
  participant UI as App UI / Story / Form
  participant Connector as InApp Wallet Connector (web/native)
  participant OAuth as Epic OAuth Provider
  participant Callback as App Callback Handler
  participant SocialAuth as socialAuth/loginWithOauth

  Note over UI,Connector: User selects "Epic" and initiates sign-in
  UI->>Connector: authenticate("epic")
  alt web/native routes to OAuth flow
    Connector->>OAuth: build & open OAuth URL (redirect)
    OAuth-->>Callback: redirect with auth code
    Callback->>Connector: receive callback (code/state)
    Connector->>SocialAuth: exchange code -> token / finalize auth
    SocialAuth-->>UI: auth result (success/failure)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas to review closely:

  • packages/thirdweb/src/react/native/ui/icons/svgs.ts — duplicate EPIC_ICON declarations in diff.
  • apps/portal/src/components/Document/AuthMethodsTabs.tsx — verify all generated code snippets and provider maps for line, tiktok, and epic.
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts and packages/thirdweb/src/wallets/in-app/native/native-connector.ts — confirm "epic" cases mirror existing OAuth flow (redirect URLs, state handling, error paths).
  • packages/thirdweb/src/react/core/utils/walletIcon.ts — ensure data URI size/format and test expectations align.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check ❓ Inconclusive The PR description provides a clear overview of changes but does not follow the repository's template format with required sections like testing information. Reorganize the description to follow the template structure: add '[packages/SDK/Dashboard/Portal]' prefix to the title format, include a 'Notes for the reviewer' section, and add a 'How to test' section documenting testing approach.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main change—adding Epic Games as a new authentication provider across the codebase.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch firekeeper/epic

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9d71fa5 and dbe9f50.

📒 Files selected for processing (3)
  • 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)
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/wallets/in-app/native/native-connector.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). (2)
  • GitHub Check: Size
  • GitHub Check: Unit Tests

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 31, 2025

size-limit report 📦

Path Size
@thirdweb-dev/nexus (esm) 104.88 KB (0%)
@thirdweb-dev/nexus (cjs) 316.6 KB (0%)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8ef418c and de77de1.

📒 Files selected for processing (19)
  • .changeset/beige-candles-happen.md (1 hunks)
  • apps/dashboard/src/@/api/team/ecosystems.ts (1 hunks)
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx (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/components/Document/AuthList.tsx (1 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/stories/ConnectEmbed.stories.tsx (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)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{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 @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose

**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from @/types where applicable
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size

Files:

  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/wallets/types.ts
  • apps/portal/src/components/Document/AuthList.tsx
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • apps/dashboard/src/@/api/team/ecosystems.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
  • packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
  • packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)

Files:

  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/wallets/types.ts
  • apps/portal/src/components/Document/AuthList.tsx
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • apps/dashboard/src/@/api/team/ecosystems.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
  • packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
  • packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
packages/thirdweb/src/wallets/**

📄 CodeRabbit inference engine (CLAUDE.md)

packages/thirdweb/src/wallets/**: Unified Wallet and Account interfaces 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/core/authentication/types.ts
  • packages/thirdweb/src/wallets/types.ts
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
**/types.ts

📄 CodeRabbit inference engine (AGENTS.md)

Provide and re‑use local type barrels in a types.ts file

Files:

  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/wallets/types.ts
packages/thirdweb/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling @example and a custom tag (@beta, @internal, @experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g., const { jsPDF } = await import("jspdf"))

Files:

  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/wallets/types.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
  • packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
  • packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
**/*.stories.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

For new UI components, add Storybook stories (*.stories.tsx) alongside the code

Files:

  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.test.{ts,tsx}: Place tests alongside code: foo.tsfoo.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
Use FORKED_ETHEREUM_CHAIN for mainnet interactions and ANVIL_CHAIN for isolated tests

**/*.test.{ts,tsx}: Co‑locate tests as foo.test.ts(x) next to the implementation
Use real function invocations with stub data; avoid brittle mocks
Use MSW to intercept HTTP calls for network interactions; mock only hard‑to‑reproduce scenarios
Keep tests deterministic and side‑effect free; use Vitest

Files:

  • packages/thirdweb/src/react/core/utils/walletIcon.test.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
Use NavLink for internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Use cn() from @/lib/utils for conditional class logic
Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components (Node edge): Start files with import "server-only";
Client Components (browser): Begin files with 'use client';
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header – never embed tokens in URLs
Return typed results (e.g., Project[], User[]) – avoid any
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys for React Query cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • apps/dashboard/src/@/api/team/ecosystems.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from @/components/ui/_ (e.g., Button, Input, Tabs, Card)
Use NavLink for internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names with cn() from @/lib/utils for conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start with import "server-only"; use next/headers, server‑only env, heavy data fetching, and redirect() where appropriate
Client Components must start with 'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: call getAuthToken() from cookies, send Authorization: Bearer <token> header, and return typed results (avoid any)
Client-side data fetching: wrap calls in React Query with descriptive, stable queryKeys and set sensible staleTime/cacheTime (≥ 60s default); keep tokens secret via internal routes or server actions
Do not import posthog-js in server components (client-side only)

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • apps/dashboard/src/@/api/team/ecosystems.ts
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
apps/{dashboard,playground}/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Expose a className prop on the root element of every component

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
apps/{dashboard,playground}/**/*.stories.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Add Storybook stories (*.stories.tsx) alongside new UI components

Files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
.changeset/*.md

📄 CodeRabbit inference engine (AGENTS.md)

.changeset/*.md: Each change in packages/* must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API

Files:

  • .changeset/beige-candles-happen.md
🧠 Learnings (18)
📓 Common learnings
Learnt from: CR
Repo: thirdweb-dev/js PR: 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)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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:

  • packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/wallets/types.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
  • packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components

Applied to files:

  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.

Applied to files:

  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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:

  • packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
  • packages/thirdweb/src/wallets/types.ts
  • apps/portal/src/components/Document/AuthList.tsx
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
  • packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
  • packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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:

  • packages/thirdweb/src/wallets/types.ts
  • packages/thirdweb/src/react/core/utils/walletIcon.test.ts
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 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/core/utils/walletIcon.test.ts
  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

Applied to files:

  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 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]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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:

  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • packages/thirdweb/src/react/core/utils/walletIcon.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
  • packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
  • apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)

Applied to files:

  • apps/dashboard/src/@/icons/brand-icons/EpicIcon.tsx
  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 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.tsx
  • packages/thirdweb/src/wallets/in-app/native/native-connector.ts
  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.

Applied to files:

  • packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to packages/thirdweb/exports/** : Export all public API via `packages/thirdweb/exports/`, grouped by feature

Applied to files:

  • packages/thirdweb/src/react/native/ui/icons/svgs.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to .changeset/*.md : Each change in `packages/*` must include a changeset for the appropriate package

Applied to files:

  • .changeset/beige-candles-happen.md
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to .changeset/*.md : Version bump rules: patch for non‑API changes; minor for new/modified public API

Applied to files:

  • .changeset/beige-candles-happen.md
📚 Learning: 2025-06-18T02:13:34.500Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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.ts
🧬 Code graph analysis (3)
packages/thirdweb/src/react/core/utils/walletIcon.test.ts (1)
packages/thirdweb/src/react/core/utils/walletIcon.ts (2)
  • getSocialIcon (81-122)
  • socialIcons (52-67)
packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx (1)
packages/thirdweb/src/react/native/ui/icons/svgs.ts (1)
  • EPIC_ICON (158-161)
packages/thirdweb/src/react/native/ui/components/WalletImage.tsx (1)
packages/thirdweb/src/react/native/ui/icons/svgs.ts (1)
  • EPIC_ICON (158-161)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
  • GitHub Check: Build Packages
  • GitHub Check: Size
  • GitHub Check: Unit Tests
  • GitHub Check: Lint Packages
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (21)
.changeset/beige-candles-happen.md (1)

1-5: Consider using a minor version bump instead of patch.

Adding a new authentication provider expands the public API surface (new auth option in types, new icon exports, new OAuth flow support). Per the coding guidelines, minor version bumps are appropriate for new/modified public API, while patches are for non-API changes.

Note: This PR is labeled "DO NOT MERGE" - ensure all validation is complete before merging.

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)

122-122: LGTM!

The Epic login method label follows the established pattern and integrates cleanly with the existing social authentication options.

packages/thirdweb/src/stories/ConnectEmbed.stories.tsx (1)

76-111: LGTM!

Good practice to include Epic in the comprehensive story that demonstrates all authentication methods.

packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts (1)

47-47: LGTM!

Epic correctly added to the OAuth login path routing, following the same pattern as other social authentication providers.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/analytics/chart/InAppWalletUsersChartCard.stories.tsx (1)

90-90: LGTM!

Epic correctly added to the authentication methods used in analytics chart stories.

apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx (1)

23-23: LGTM!

Epic added to the playground's in-app wallet authentication methods, enabling developers to test the new provider.

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts (1)

106-106: LGTM!

"Epic" correctly added to the AuthProvider union type with proper capitalization, consistent with other OAuth providers like "Google", "Apple", and "Facebook".

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx (2)

14-14: LGTM!

EPIC_ICON imported correctly from the svgs module.


110-111: LGTM!

Epic case added to the auth provider image mapping, following the established pattern for other social authentication providers.

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/auth-options-form.client.tsx (1)

61-62: Epic provider surfaces in dashboard form.

The options list now reflects the new AuthOption union, so the form can expose Epic without extra wiring. Nicely aligned with the shared types.

apps/portal/src/components/Document/AuthList.tsx (1)

18-28: Portal docs list Epic as a supported login.

Good to see the demo inventory updated alongside the new provider so readers won’t miss it.

packages/thirdweb/src/react/core/utils/walletIcon.test.ts (1)

58-60: Test coverage for Epic icon mapping added.

Thanks for pinning the new provider in the regression suite; this keeps future icon refactors honest.

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx (1)

35-74: Native social icon map covers Epic.

Importing EPIC_ICON and wiring it into socialIcons keeps the RN surface aligned with web. Looks great.

packages/thirdweb/src/wallets/types.ts (1)

30-32: Social auth union now includes Epic.

The shared type surface matches the new provider, so consumers get proper autocomplete and guards.

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts (1)

341-344: Web connector handles Epic OAuth.

Adding epic to both authenticate and connect keeps the flow consistent with other social providers—no gaps spotted.

Also applies to: 415-420

packages/thirdweb/src/wallets/in-app/native/native-connector.ts (1)

202-204: Native connector recognizes Epic strategy.

Epic plugs into the existing socialAuth path alongside the other providers—nice and tidy.

packages/thirdweb/src/react/native/ui/icons/svgs.ts (1)

158-162: Epic SVG asset exported.

The new EPIC_ICON export gives native surfaces the right artwork; matches the import wired elsewhere.

apps/dashboard/src/@/api/team/ecosystems.ts (1)

24-25: LGTM! Clean type extension.

The addition of "epic" to the AuthOption union type is consistent with the existing pattern and properly integrates Epic Games authentication support.

packages/thirdweb/src/react/core/utils/walletIcon.ts (3)

34-35: LGTM! Icon URI definition follows the established pattern.

The epicIconUri constant is defined consistently with other social icon URIs in this file.


66-66: LGTM! socialIcons mapping updated correctly.

The epic icon is properly added to the exported socialIcons object, maintaining consistency with other social authentication providers.


105-106: LGTM! Switch case properly handles Epic provider.

The epic case is correctly implemented in getSocialIcon(), enabling proper icon retrieval for Epic Games authentication.

@vercel vercel bot temporarily deployed to Preview – nebula October 31, 2025 23:13 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground October 31, 2025 23:13 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 October 31, 2025 23:13 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui October 31, 2025 23:13 Inactive
Extended the AuthMethodsTabs component to include Line, TikTok, and Epic Games as new OAuth authentication methods. Updated all relevant type definitions, UI labels, and provider mappings to support these new options.
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground November 6, 2025 23:02 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb-www November 6, 2025 23:02 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui November 6, 2025 23:02 Inactive
@vercel vercel bot temporarily deployed to Preview – nebula November 6, 2025 23:02 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Dashboard Involves changes to the Dashboard. packages Playground Changes involving the Playground codebase. Portal Involves changes to the Portal (docs) codebase. SDK Involves changes to the thirdweb SDK

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants