From f57162cf3e9b64dbdca234904e77300f636e9268 Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Fri, 15 Nov 2024 10:44:03 +0700 Subject: [PATCH] move to hard dependency --- packages/connectors/package.json | 7 +++--- packages/connectors/src/exports/index.ts | 2 +- packages/connectors/src/thirdweb.test.ts | 3 +-- packages/connectors/src/thirdweb.ts | 29 ++++++++++++------------ pnpm-lock.yaml | 8 +++---- site/shared/connectors/thirdweb.md | 16 ++++++------- 6 files changed, 31 insertions(+), 34 deletions(-) diff --git a/packages/connectors/package.json b/packages/connectors/package.json index 41cfdc1d5d..e1c484df52 100644 --- a/packages/connectors/package.json +++ b/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/wallet-sdk@3.9.3" + "cbw-sdk": "npm:@coinbase/wallet-sdk@3.9.3", + "thirdweb": "5.68.0" }, "devDependencies": { "@wagmi/core": "workspace:*", - "msw": "^2.4.9", - "thirdweb": "5.68.0" + "msw": "^2.4.9" }, "contributors": ["awkweb.eth ", "jxom.eth "], "funding": "https://github.com/sponsors/wevm", diff --git a/packages/connectors/src/exports/index.ts b/packages/connectors/src/exports/index.ts index b9a2927b7e..35d494772f 100644 --- a/packages/connectors/src/exports/index.ts +++ b/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' diff --git a/packages/connectors/src/thirdweb.test.ts b/packages/connectors/src/thirdweb.test.ts index c7420bdb0b..670d629af6 100644 --- a/packages/connectors/src/thirdweb.test.ts +++ b/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) diff --git a/packages/connectors/src/thirdweb.ts b/packages/connectors/src/thirdweb.ts index 42c4c5ff27..4528745ee8 100644 --- a/packages/connectors/src/thirdweb.ts +++ b/packages/connectors/src/thirdweb.ts @@ -1,5 +1,5 @@ import { type CreateConnectorFn, createConnector } from '@wagmi/core' -import { defineChain } from 'thirdweb' +import { createThirdwebClient, defineChain } from 'thirdweb' import { EIP1193, type InAppWalletConnectionOptions, @@ -7,27 +7,31 @@ import { 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 & + 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', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7195705fd0..e057dbe52a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -204,6 +204,9 @@ importers: cbw-sdk: specifier: npm:@coinbase/wallet-sdk@3.9.3 version: '@coinbase/wallet-sdk@3.9.3' + thirdweb: + specifier: 5.68.0 + version: 5.68.0(@types/node@20.12.10)(@types/react-dom@18.3.0)(@types/react@18.3.1)(@vitest/ui@2.1.1(vitest@2.1.1))(bufferutil@4.0.8)(encoding@0.1.13)(happy-dom@15.7.4)(ioredis@5.3.2)(msw@2.4.9(typescript@5.5.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.31.0)(typescript@5.5.4)(utf-8-validate@5.0.10)(zod@3.22.4) devDependencies: '@wagmi/core': specifier: workspace:* @@ -211,9 +214,6 @@ importers: msw: specifier: ^2.4.9 version: 2.4.9(typescript@5.5.4) - thirdweb: - specifier: 5.68.0 - version: 5.68.0(@types/node@20.12.10)(@types/react-dom@18.3.0)(@types/react@18.3.1)(@vitest/ui@2.1.1(vitest@2.1.1))(bufferutil@4.0.8)(encoding@0.1.13)(happy-dom@15.7.4)(ioredis@5.3.2)(msw@2.4.9(typescript@5.5.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.31.0)(typescript@5.5.4)(utf-8-validate@5.0.10)(zod@3.22.4) packages/core: dependencies: @@ -14203,7 +14203,7 @@ snapshots: assertion-error: 2.0.1 check-error: 2.1.1 deep-eql: 5.0.2 - loupe: 3.1.1 + loupe: 3.1.2 pathval: 2.0.0 chalk@2.4.2: diff --git a/site/shared/connectors/thirdweb.md b/site/shared/connectors/thirdweb.md index 0b0e89096f..4e9bf8ef76 100644 --- a/site/shared/connectors/thirdweb.md +++ b/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] }) ```