move to hard dependency

packages/connectors/package.json

@@ -37,7 +37,6 @@
   "peerDependencies": {
     "@wagmi/core": "workspace:*",
     "typescript": ">=5.0.4",
-    "thirdweb": "^5.68.0",
     "viem": "2.x"
   },
   "peerDependenciesMeta": {
@@ -54,12 +53,12 @@
     "@safe-global/safe-apps-provider": "0.18.4",
     "@safe-global/safe-apps-sdk": "9.1.0",
     "@walletconnect/ethereum-provider": "2.17.0",
-    "cbw-sdk": "npm:@coinbase/[email protected]"
+    "cbw-sdk": "npm:@coinbase/[email protected]",
+    "thirdweb": "5.68.0"
   },
   "devDependencies": {
     "@wagmi/core": "workspace:*",
-    "msw": "^2.4.9",
-    "thirdweb": "5.68.0"
+    "msw": "^2.4.9"
   },
   "contributors": ["awkweb.eth <[email protected]>", "jxom.eth <[email protected]>"],
   "funding": "https://github.com/sponsors/wevm",

packages/connectors/src/exports/index.ts

@@ -20,6 +20,6 @@ export {
   walletConnect,
 } from '../walletConnect.js'
 
-export { inAppWallet } from '../thirdweb.js'
+export { type InAppWalletParameters, inAppWallet } from '../thirdweb.js'
 
 export { version } from '../version.js'

packages/connectors/src/thirdweb.test.ts

@@ -1,7 +1,6 @@
 import { config } from '@wagmi/test'
 import { expect, test } from 'vitest'
 
-import { createThirdwebClient } from 'thirdweb'
 import { inAppWallet } from './thirdweb.js'
 
 /**
@@ -11,7 +10,7 @@ import { inAppWallet } from './thirdweb.js'
  */
 test('setup', () => {
   const connectorFn = inAppWallet({
-    client: createThirdwebClient({ clientId: 'testClientId' }),
+    clientId: 'testClientId',
     strategy: 'google',
   })
   const connector = config._internal.connectors.setup(connectorFn)

packages/connectors/src/thirdweb.ts

@@ -1,33 +1,37 @@
 import { type CreateConnectorFn, createConnector } from '@wagmi/core'
-import { defineChain } from 'thirdweb'
+import { createThirdwebClient, defineChain } from 'thirdweb'
 import {
   EIP1193,
   type InAppWalletConnectionOptions,
   ecosystemWallet,
   inAppWallet as thirdwebInAppWallet,
 } from 'thirdweb/wallets'
 import type { InAppWalletCreationOptions } from 'thirdweb/wallets/in-app'
+import type { Prettify } from 'viem'
 import type { Address } from 'viem/accounts'
 
+export type InAppWalletParameters = Prettify<
+  Omit<InAppWalletConnectionOptions, 'client'> &
+    InAppWalletCreationOptions & {
+      clientId: string
+      ecosystemId?: `ecosystem.${string}`
+    }
+>
+
 /**
  * Connect to an in-app wallet using the auth strategy of your choice.
  * @param args - Options for the in-app wallet connection.
  * @returns A wagmi connector.
  * @example
  * ```ts
- * import { createThirdwebClient } from "thirdweb";
  * import { http, createConfig } from "wagmi";
  * import { inAppWallet } from "@wagmi/connectors";
  *
- * const client = createThirdwebClient({
- *   clientId: "...",
- * })
- *
  * export const config = createConfig({
  *  chains: [sepolia],
  *  connectors: [
  *    inAppWallet({
- *      client,
+ *      clientId: "...",
  *      strategy: "google",
  *   }),
  *  ],
@@ -37,13 +41,10 @@ import type { Address } from 'viem/accounts'
  * });
  * ```
  */
-export function inAppWallet(
-  args: InAppWalletConnectionOptions &
-    InAppWalletCreationOptions & { ecosystemId?: `ecosystem.${string}` },
-): CreateConnectorFn {
-  const { client, ecosystemId } = args
-  const wallet = ecosystemId
-    ? ecosystemWallet(ecosystemId, { partnerId: args.partnerId })
+export function inAppWallet(args: InAppWalletParameters): CreateConnectorFn {
+  const client = createThirdwebClient({ clientId: args.clientId })
+  const wallet = args.ecosystemId
+    ? ecosystemWallet(args.ecosystemId, { partnerId: args.partnerId })
     : thirdwebInAppWallet(args)
   return createConnector((config) => ({
     id: 'in-app-wallet',

site/shared/connectors/thirdweb.md

@@ -15,17 +15,16 @@ import { inAppWallet } from '{{connectorsPackageName}}'
 
 ## Usage
 
-```ts-vue{3,10}
+You will need a free clientId from [thirdweb](https://thirdweb.com) to use this connector.
+
+```ts-vue{3,7}
 import { createConfig, http } from '{{packageName}}'
 import { mainnet, sepolia } from '{{packageName}}/chains'
 import { inAppWallet } from '{{connectorsPackageName}}'
-import { createThirdwebClient } from 'thirdweb'
-
-const client = createThirdwebClient({ clientId: "..." })
 
 export const config = createConfig({
   chains: [mainnet, sepolia],
-  connectors: [inAppWallet({ client, strategy: "google" })],
+  connectors: [inAppWallet({ clientId: "...", strategy: "google" })],
   transports: {
     [mainnet.id]: http(),
     [sepolia.id]: http(),
@@ -43,14 +42,13 @@ Check out the [thirdweb developer portal](https://portal.thirdweb.com/typescript
 
 ### client
 
-The `ThirdwebClient` instance to use for authentication.
+The `clientId` to use for authentication. Obtain one from [thirdweb](https://thirdweb.com).
 
 ```ts-vue
 import { inAppWallet } from '{{connectorsPackageName}}'
-import { createThirdwebClient } from 'thirdweb'
 
 const connector = inAppWallet({
-  client: createThirdwebClient({ clientId: "..." }), // [!code focus]
+  clientId: "...", // [!code focus]
   strategy: "google",
 })
 ```
@@ -63,7 +61,7 @@ The strategy to use for authentication, options include `"email"`, `"phone"`, `"
 import { inAppWallet } from '{{connectorsPackageName}}'
 
 const connector = inAppWallet({
-  client,
+  clientId: "...",
   strategy: "google", // [!code focus]
 })
 ```