[SDK] Add apechain to supported chains and Add Glyph Wallet Connector #8034
Conversation
🦋 Changeset detectedLatest commit: 78066d1 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 |
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. |
WalkthroughAdds Ape Chain and Curtis chain definitions and exports; includes Ape Chain in playground connect components; introduces a Glyph (Privy CAC) wallet integration with constants, connector, and wallet factory, wired into wallet creation and re-exported; updates thirdweb package dependencies and adds a changeset entry. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App
participant createWallet
participant GlyphFactory as Glyph Wallet Factory
participant Privy as Privy CAC
participant Provider as EIP-1193 Provider
App->>createWallet: createWallet({ id: "io.useglyph", ... })
createWallet-->>GlyphFactory: construct glyph wallet (chains, options)
GlyphFactory->>Privy: toPrivyWalletConnector(appId, details, chains)
Note right of Privy #d3e8ff: Selects prod or staging appId based on options
GlyphFactory-->>App: { walletId: "io.useglyph", getProvider }
App->>Provider: getProvider(chainId)
Provider-->>App: EIP-1193 provider instance
sequenceDiagram
autonumber
participant DApp
participant Wallet as Glyph Wallet
participant Privy as Privy CAC
participant Chain as RPC/Chain
DApp->>Wallet: connect()
Wallet->>Privy: init session (appId, metadata)
alt success
Privy-->>Wallet: session + signer
Wallet->>Chain: provider requests (eth_*)
Chain-->>Wallet: responses
Wallet-->>DApp: connected (accounts, chainId)
else error
Privy-->>Wallet: error
Wallet-->>DApp: propagate error
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@shubham-yuga is attempting to deploy a commit to the thirdweb Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
bot
added
Playground
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx (1)
1-4: Add 'use client' directive (hooks + localStorage require Client Component).This file uses React hooks and browser APIs; without
'use client', Next.js will treat it as a Server Component and error.Apply at the top of the file:
+'use client'; + import { abstractWallet } from "@abstract-foundation/agw-react/thirdweb"; import { XIcon } from "lucide-react"; import { usePathname } from "next/navigation"; import { useEffect, useState } from "react";
🧹 Nitpick comments (17)
.changeset/six-zebras-move.md (1)
5-5: Broaden the changeset description to include Ape Chain (and Curtis if applicable)Call out new chain exports so consumers see the added surface area in the changelog.
-Added Glyph Wallet Connector to CreateWallet function +Add Glyph wallet connector to `createWallet` and export new chains: +- `apechain` (mainnet) +- `curtis` (testnet)apps/playground-web/src/components/styled-connect-button.tsx (1)
30-43: Keep chain ordering consistent across componentsThis component lists testnets first; StyledConnectEmbed lists mainnets first. Aligning order reduces UX friction.
apps/playground-web/src/components/styled-connect-embed.tsx (1)
39-52: Match chain ordering with StyledConnectButtonConsider same mainnet/testnet ordering in both places to avoid visual churn when toggling UIs.
packages/thirdweb/src/wallets/create-wallet.ts (2)
17-17: Avoid pulling heavy deps into the initial bundleIf glyph-wallet brings in Privy/Wagmi, ensure those are dynamically imported inside glyph-wallet’s connect path (similar to how Coinbase lazily imports its popup util). Static top-level imports can defeat tree-shaking.
190-196: Confirm wallet ID consistency for GlyphcreateWallet switches on
"io.useglyph", while Glyph connector metadata may use"io.useglyph.privy". Mismatched IDs can break icon/metadata resolution and MIPD lookups.If inconsistent, standardize to a single ID (e.g.,
"io.useglyph") across:
- glyph constants/connector metadata
- wallet-ids generator
- UI lists
I can propose a patch once the intended canonical ID is confirmed.
packages/thirdweb/src/wallets/native/create-wallet.ts (2)
13-13: Ensure glyph wallet lazily loads heavy deps on native tooIf glyph-wallet.ts imports large libs, move them behind the connect call via dynamic import to keep RN bundle lean.
90-96: Verify Glyph wallet ID alignment in native pathSame potential ID inconsistency as web. Confirm the canonical ID and align generator/metadata.
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx (5)
37-41: Add explicit return type to exported component.Conform to repo TS guidelines by annotating the function’s return type.
-export function RightSection(props: { +export function RightSection(props: { connectOptions: ConnectPlaygroundOptions; tab?: string; -}) { +}): JSX.Element {
238-263: Type returned wallets and avoid implicit any.Annotate return type for consistency.
-function getWallets(connectOptions: ConnectPlaygroundOptions) { +function getWallets(connectOptions: ConnectPlaygroundOptions): ReturnType<typeof createWallet>[] {
264-277: Annotate BackgroundPattern return type.-function BackgroundPattern() { +function BackgroundPattern(): JSX.Element {
279-307: Annotate TabButtons props and return type.-function TabButtons(props: { +function TabButtons(props: { tabs: Array<{ name: string; isActive: boolean; onClick: () => void; }>; -}) { +}): JSX.Element {
29-29: Prefer alias import for UI primitives in apps/playground-web.Guideline: import from "@/components/ui/*" instead of long relatives.
-import { Button } from "../../../../components/ui/button"; +import { Button } from "@/components/ui/button";packages/thirdweb/src/chains/chain-definitions/curtis.ts (1)
15-16: Quote style consistency.Minor: use double quotes to match surrounding style.
- nativeCurrency: { name: 'ApeCoin', symbol: 'APE', decimals: 18 }, + nativeCurrency: { name: "ApeCoin", symbol: "APE", decimals: 18 },packages/thirdweb/src/wallets/glyph/constants.ts (2)
5-12: Add TSDoc and align connector id with wallet id.Docs + ensure
idmatches the walletId (“io.useglyph”) unless a separate id is required for wagmi. If distinct, leave a comment explaining.-export const glyphConnectorDetails = { +/** + * Metadata for the Glyph connector used across UIs. + * @beta + */ +export const glyphConnectorDetails = { - id: 'io.useglyph.privy', + // If a distinct id is required by Privy, keep ".privy"; otherwise align with walletId "io.useglyph". + id: "io.useglyph", name: 'Glyph', iconUrl: GLYPH_ICON_URL, iconBackground: '#ffffff', shortName: 'Glyph', type: 'injected', } as const;
3-3: Host icon on first‑party CDN or bundle locally.Third‑party host (ibb.co) may be unreliable or blocked.
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (2)
31-41: Lazy‑load the Privy connector to keep default bundles lean.Per package guidelines, load heavy deps on demand.
-function glyphWalletConnector(options?: { +async function importPrivy() { + const mod = await import("@privy-io/cross-app-connect/rainbow-kit"); + return mod.toPrivyWalletConnector; +} + +function glyphWalletConnector(options?: { useStagingTenant?: boolean }): CreateConnectorFn { const { useStagingTenant } = options ?? {}; - return (params) => { - const connector = toPrivyWalletConnector({ + return (params) => { + const connectorFactory = async () => (await importPrivy())({ iconUrl: glyphConnectorDetails.iconUrl, id: useStagingTenant ? STAGING_GLYPH_APP_ID : GLYPH_APP_ID, name: glyphConnectorDetails.name - })(params); + }); + const base = { + getProvider: async (p?: { chainId?: number }) => + (await (await connectorFactory())(params)).getProvider(p), + // spread the rest after creation in later calls + } as any; + // Create once to populate properties + const connector = (async () => (await connectorFactory())(params))();Note: You can simplify by deferring creation until first use; the key is avoiding top‑level static import.
43-51: Default chainId fallback: prefer provided chains over hardcoding.Hardcoding
apechain.idas fallback can mismatch the configured set.- const chainId = parameters?.chainId ?? params.chains?.[0]?.id ?? apechain.id; + const chainId = parameters?.chainId ?? params.chains?.[0]?.id ?? mainnet.id;Or throw if no chains configured to avoid surprising defaults.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
.changeset/six-zebras-move.md(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(5 hunks)apps/playground-web/src/components/styled-connect-button.tsx(2 hunks)apps/playground-web/src/components/styled-connect-embed.tsx(2 hunks)packages/thirdweb/package.json(2 hunks)packages/thirdweb/src/chains/chain-definitions/apechain.ts(1 hunks)packages/thirdweb/src/chains/chain-definitions/curtis.ts(1 hunks)packages/thirdweb/src/exports/chains.ts(1 hunks)packages/thirdweb/src/wallets/create-wallet.ts(2 hunks)packages/thirdweb/src/wallets/glyph/constants.ts(1 hunks)packages/thirdweb/src/wallets/glyph/glyph-wallet.ts(1 hunks)packages/thirdweb/src/wallets/native/create-wallet.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{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
**/*.{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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/chains/chain-definitions/apechain.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.tspackages/thirdweb/src/exports/chains.tspackages/thirdweb/src/chains/chain-definitions/curtis.tsapps/playground-web/src/components/styled-connect-button.tsxpackages/thirdweb/src/wallets/glyph/constants.tsapps/playground-web/src/components/styled-connect-embed.tsxpackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.tsapps/playground-web/src/app/wallets/sign-in/button/RightSection.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/chains/chain-definitions/apechain.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.tspackages/thirdweb/src/exports/chains.tspackages/thirdweb/src/chains/chain-definitions/curtis.tsapps/playground-web/src/components/styled-connect-button.tsxpackages/thirdweb/src/wallets/glyph/constants.tsapps/playground-web/src/components/styled-connect-embed.tsxpackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.tsapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
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@exampleand 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/chains/chain-definitions/apechain.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.tspackages/thirdweb/src/exports/chains.tspackages/thirdweb/src/chains/chain-definitions/curtis.tspackages/thirdweb/src/wallets/glyph/constants.tspackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.ts
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/glyph/glyph-wallet.tspackages/thirdweb/src/wallets/glyph/constants.tspackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.ts
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/chains.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
packages/thirdweb/package.json
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/six-zebras-move.md
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/playground-web/src/components/styled-connect-button.tsxapps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
🧠 Learnings (8)
📚 Learning: 2025-06-06T23:46:08.795Z
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`.
Applied to files:
packages/thirdweb/src/chains/chain-definitions/apechain.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:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts.changeset/six-zebras-move.mdpackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.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/** : Support for in-app wallets (social/email login)
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts.changeset/six-zebras-move.mdpackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.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:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts.changeset/six-zebras-move.mdpackages/thirdweb/src/wallets/native/create-wallet.tspackages/thirdweb/src/wallets/create-wallet.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/exports/chains.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/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Applied to files:
packages/thirdweb/src/wallets/native/create-wallet.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:
packages/thirdweb/src/wallets/create-wallet.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} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/chains/chain-definitions/apechain.ts (1)
packages/thirdweb/src/exports/chains.ts (2)
apechain(5-5)defineChain(93-93)
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (1)
packages/thirdweb/src/wallets/glyph/constants.ts (3)
glyphConnectorDetails(5-12)STAGING_GLYPH_APP_ID(1-1)GLYPH_APP_ID(2-2)
packages/thirdweb/src/chains/chain-definitions/curtis.ts (1)
packages/thirdweb/src/exports/chains.ts (2)
curtis(6-6)defineChain(93-93)
packages/thirdweb/src/wallets/create-wallet.ts (1)
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (1)
glyphWalletTW(91-91)
🔇 Additional comments (10)
apps/playground-web/src/components/styled-connect-button.tsx (1)
6-7: LGTM: Ape Chain wired into importsapps/playground-web/src/components/styled-connect-embed.tsx (1)
6-7: LGTM: Ape Chain addedpackages/thirdweb/src/exports/chains.ts (1)
5-6: LGTM: New chain exports surfaced in public APIRe-exports look correct and positioned before the pre-defined block.
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx (5)
7-7: LGTM: importing apechain for playground chains.
130-135: LGTM: added apechain to ConnectButton chains.Ensure related ConnectEmbed instances also include apechain (they do below).
190-190: LGTM: wrapper class reorder is harmless.
219-219: LGTM: icon size utility added.
288-288: LGTM: class order tweak in TabButtons container.packages/thirdweb/src/chains/chain-definitions/curtis.ts (1)
6-17: Consider adding RPC endpoints; many consumers expectrpcURLs.If
defineChainconsumers (viem/thirdweb client) require RPC, missingrpccan break providers.Proposed addition (verify URLs):
export const curtis = /* @__PURE__ */ defineChain({ + rpc: [ + // TODO: confirm final public RPC(s) + "https://rpc.curtis.apechain.com", + ], blockExplorers: [If RPC is intentionally omitted because thirdweb injects RPCs, please confirm and ignore.
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (1)
53-58: Connector id/name consistency.You set
glyphConnectorDetails.id(currently ".privy") andwalletId: "io.useglyph". Confirm consumers don’t rely on a single id; otherwise unify.- id: glyphConnectorDetails.id + id: "io.useglyph"
…I Feedback Resolution.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (4)
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (4)
33-46: TSDoc: correct imports in example and add required custom tag.Use a chain that viem actually exports in the wagmi example, and add
@beta./** * Create a wagmi connector for the Glyph Global Wallet. @@ - * import { createConfig, http } from "wagmi"; - * import { apeChain } from "wagmi/chains"; - * import { glyphWalletWagmiConnector } from "thirdweb/wallets/glyph" + * import { createConfig, http } from "wagmi"; + * import { mainnet } from "wagmi/chains"; + * import { glyphWalletWagmiConnector } from "thirdweb/wallets"; @@ - * chains: [apeChain], + * chains: [mainnet], @@ - * [apeChain.id]: http(), + * [mainnet.id]: http(), @@ * ssr: true, * }); + * @beta */
97-114: Align default chains with corrected imports and naming.Use
apechain(thirdweb) instead ofapeChainand ensureabstract/curtiscome from thirdweb exports.- chains: chains ?? [ - apeChain, - curtis, - mainnet, - base, - arbitrum, - polygon, - optimism, - abstract, - sepolia, - baseSepolia, - optimismSepolia, - arbitrumSepolia, - ], + chains: chains ?? [ + apechain, + curtis, + mainnet, + base, + arbitrum, + polygon, + optimism, + abstract, + sepolia, + baseSepolia, + optimismSepolia, + arbitrumSepolia, + ],
82-96: TSDoc: import path should use “thirdweb/wallets” aggregator and add@beta.Update the example to match public API conventions.
/** * Create a thirdweb wallet for Glyph Global Wallet @@ * ```tsx * import { createThirdwebClient } from "thirdweb"; - * import { glyphWalletTW } from "thirdweb/wallets/glyph" + * import { glyphWalletTW } from "thirdweb/wallets"; @@ * <ConnectButton client={client} wallets=[glyphWalletTW()]> * ``` + * @beta */
5-18: Fix chain imports: don’t mix thirdweb custom chains with viem; use thirdweb exports for custom chains.
viem/chainsdoesn’t exportapeChainorcurtis, andabstractshould come from thirdweb. Import standard chains from viem, and custom chains from thirdweb exports. Also update symbol casing toapechain.-import { - abstract, - apeChain, - arbitrum, - arbitrumSepolia, - base, - baseSepolia, - curtis, - mainnet, - optimism, - optimismSepolia, - polygon, - sepolia, -} from "viem/chains"; +import { + arbitrum, + arbitrumSepolia, + base, + baseSepolia, + mainnet, + optimism, + optimismSepolia, + polygon, + sepolia, +} from "viem/chains"; +import { apechain, curtis, abstract } from "../../exports/chains.js";
🧹 Nitpick comments (3)
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (3)
1-4: Optional: consider lazy-loading the Privy connector if bundle size is sensitive.If this file is included in common bundles, dynamically import
@privy-io/cross-app-connect/rainbow-kitinside the factory to reduce initial bytes. This would require restructuring sinceCreateConnectorFncreation is synchronous; if you go this route, defer the dynamic import to the connector’s async methods (e.g.,connect,getProvider). Otherwise, fine to keep as-is.If you want to evaluate impact, we can compare bundle size before/after with a measurement script.
1-124: Split into two single-responsibility modules (style guideline).Repo guideline suggests one stateless function per file. Consider:
- glyph-wagmi-connector.ts → exports glyphWalletWagmiConnector
- glyph-wallet.ts → exports glyphWalletTW (wrapper)
3-3: Avoid importing from@wagmi/core/internal.
@wagmi/core/internalisn’t a public API and may change without notice. I didn’t find an existing emitter utility in the repo—extract this into a local emitter helper (e.g. wrap Node.jsEventEmitteror usemitt) and import that instead.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
.changeset/six-zebras-move.md(1 hunks)packages/thirdweb/package.json(2 hunks)packages/thirdweb/src/chains/chain-definitions/apechain.ts(1 hunks)packages/thirdweb/src/chains/chain-definitions/curtis.ts(1 hunks)packages/thirdweb/src/exports/wallets/glyph.ts(1 hunks)packages/thirdweb/src/wallets/glyph/constants.ts(1 hunks)packages/thirdweb/src/wallets/glyph/glyph-wallet.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/thirdweb/src/wallets/glyph/constants.ts
- packages/thirdweb/src/chains/chain-definitions/curtis.ts
- packages/thirdweb/src/chains/chain-definitions/apechain.ts
- packages/thirdweb/package.json
- .changeset/six-zebras-move.md
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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
**/*.{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@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless 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/exports/wallets/glyph.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.ts
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/wallets/glyph.ts
**/*.{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/exports/wallets/glyph.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.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@exampleand 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/exports/wallets/glyph.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.ts
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/glyph/glyph-wallet.ts
🧠 Learnings (9)
📚 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:
packages/thirdweb/src/exports/wallets/glyph.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.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:
packages/thirdweb/src/exports/wallets/glyph.tspackages/thirdweb/src/wallets/glyph/glyph-wallet.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/** : Support for in-app wallets (social/email login)
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.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/wallets/glyph/glyph-wallet.ts
📚 Learning: 2025-06-06T23:46:08.795Z
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`.
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to 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.)
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.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/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to packages/thirdweb/**/*.{ts,tsx} : Comment only ambiguous logic; avoid restating TypeScript in prose
Applied to files:
packages/thirdweb/src/wallets/glyph/glyph-wallet.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:
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts
🧬 Code graph analysis (1)
packages/thirdweb/src/wallets/glyph/glyph-wallet.ts (2)
packages/thirdweb/src/wallets/glyph/constants.ts (3)
glyphConnectorDetails(8-15)STAGING_GLYPH_APP_ID(2-2)GLYPH_APP_ID(4-4)packages/thirdweb/src/chains/chain-definitions/curtis.ts (1)
curtis(7-18)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/thirdweb/package.json (2)
20-20: Pin@privy-io/cross-app-connectto an exact version to avoid accidental minor updates.Use an exact version (aligns with most deps here) and consider dynamic import to keep CAC out of the initial bundle.
Apply:
- "@privy-io/cross-app-connect": "^0.2.3", + "@privy-io/cross-app-connect": "0.2.3",Quick checks:
#!/bin/bash # 1) Ensure no top-level static imports that bloat bundles rg -nP --type=ts --type=tsx -C2 $'^(import\\s+.+\\s+from\\s+[\'"]@privy-io/cross-app-connect[\'"])' # 2) Prefer dynamic imports rg -nP --type=ts --type=tsx -C2 "import\\(['\"]@privy-io/cross-app-connect['\"]\\)"
29-29: Lock@wagmi/coreand verify distribution strategy (runtime dep vs peer).
- Prefer exact pin for reproducibility.
- If apps are expected to bring their own wagmi, consider making it a peer (optionally optional) to avoid duplicate copies; otherwise ensure it’s dynamically imported.
- "@wagmi/core": "^2.17.2", + "@wagmi/core": "2.17.2",Repo scan:
#!/bin/bash # Static imports (should be avoided in core entrypoints) rg -nP --type=ts --type=tsx -C2 "from ['\"]@wagmi/core['\"]" # Dynamic imports (preferred in connector init paths) rg -nP --type=ts --type=tsx -C2 "import\\(['\"]@wagmi/core['\"]\\)" # Check if also listed as a peer (to prevent dupes in host apps) jq -r '.peerDependencies["@wagmi/core"] // "NOT_PEERED"' packages/thirdweb/package.json
🧹 Nitpick comments (1)
packages/thirdweb/package.json (1)
319-347: Add size-limit budgets to track bundle impact of Glyph + Wagmi.Guideline: track budgets via package.json#size-limit. You already have the tool + script; add budgets to gate regressions.
Example (tune paths/limits to your targets):
"scripts": { "size": "size-limit", ... }, + "size-limit": [ + { "name": "thirdweb ESM", "path": "dist/esm/exports/thirdweb.js", "limit": "160 KB" }, + { "name": "wallets ESM", "path": "dist/esm/exports/wallets.js", "limit": "90 KB" } + ],Verification:
#!/bin/bash # Confirm size-limit config exists and list entries jq '.["size-limit"] // [] | length' packages/thirdweb/package.json jq '.["size-limit"]' packages/thirdweb/package.json
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/thirdweb/package.json(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
packages/thirdweb/package.json
| export { | ||
| glyphWalletTW, | ||
| glyphWalletWagmiConnector, | ||
| } from "../../wallets/glyph/glyph-wallet.js"; |
There was a problem hiding this comment.
hm these should be in their own package, not directly baked into the thirdweb package. Same thing we do with abstract global wallet.
| @@ -25,6 +26,7 @@ | |||
| "@tanstack/react-query": "5.81.5", | |||
| "@thirdweb-dev/engine": "workspace:*", | |||
| "@thirdweb-dev/insight": "workspace:*", | |||
| "@wagmi/core": "^2.17.2", | |||
There was a problem hiding this comment.
yeah these dependencies cannot be here. Needs to be its own package and users will install both your package and thirdweb together. Check how we do it for abstract
As discussed here, this is the second part of adding Glyph support to Thirdweb.
How to test?
Go to playground and choose Glyph Wallet from the Extra wallets option. Should be able to login.
PR-Codex overview
This PR adds support for the
Glyphwallet connector to thecreateWalletfunction. It introduces new chains,apechainandcurtis, and exports relevant connectors and constants.Detailed summary
glyphWalletTWandglyphWalletWagmiConnectorexports fromglyph-wallet.js.apechain(mainnet) andcurtis(testnet) chains.glyphWalletWagmiConnectorfunction for wallet connection.createWalletto include theGlyphwallet option.Summary by CodeRabbit
New Features
Style
Documentation
Chores