diff --git a/.changeset/bright-suns-rush.md b/.changeset/bright-suns-rush.md new file mode 100644 index 0000000000..9bd32a9c6e --- /dev/null +++ b/.changeset/bright-suns-rush.md @@ -0,0 +1,5 @@ +--- +"@wagmi/connectors": minor +--- + +Added `preference` object for Coinbase Wallet connector. diff --git a/packages/connectors/src/coinbaseWallet.ts b/packages/connectors/src/coinbaseWallet.ts index 0d1257dd48..8793703f8a 100644 --- a/packages/connectors/src/coinbaseWallet.ts +++ b/packages/connectors/src/coinbaseWallet.ts @@ -1,7 +1,7 @@ import type { - CoinbaseWalletSDK, Preference, ProviderInterface, + createCoinbaseWalletSDK, } from '@coinbase/wallet-sdk' import { ChainNotConfiguredError, @@ -62,14 +62,16 @@ export function coinbaseWallet( type Version4Parameters = Mutable< Omit< - ConstructorParameters[0], - 'appChainIds' // set via wagmi config + Parameters[0], + | 'appChainIds' // set via wagmi config + | 'preference' > & { + // TODO(v3): Remove `Preference['options']` /** * Preference for the type of wallet to display. * @default 'all' */ - preference?: Preference['options'] | undefined + preference?: Preference['options'] | Compute | undefined } > @@ -79,7 +81,6 @@ function version4(parameters: Version4Parameters) { close?(): void } - let sdk: CoinbaseWalletSDK | undefined let walletProvider: Provider | undefined let accountsChanged: Connector['onAccountsChanged'] | undefined @@ -171,27 +172,23 @@ function version4(parameters: Version4Parameters) { }, async getProvider() { if (!walletProvider) { - // Unwrapping import for Vite compatibility. - // See: https://github.com/vitejs/vite/issues/9703 - const CoinbaseWalletSDK = await (async () => { - const SDK = await import('@coinbase/wallet-sdk') - if ( - typeof SDK.CoinbaseWalletSDK !== 'function' && - typeof SDK.default === 'function' - ) - return SDK.default - return SDK.CoinbaseWalletSDK + const preference = (() => { + if (typeof parameters.preference === 'string') + return { options: parameters.preference } + return { + ...parameters.preference, + options: parameters.preference?.options ?? 'all', + } })() - sdk = new CoinbaseWalletSDK({ + const { createCoinbaseWalletSDK } = await import('@coinbase/wallet-sdk') + const sdk = createCoinbaseWalletSDK({ ...parameters, appChainIds: config.chains.map((x) => x.id), + preference, }) - walletProvider = sdk.makeWeb3Provider({ - ...parameters, - options: parameters.preference ?? 'all', - }) + walletProvider = sdk.getProvider() } return walletProvider diff --git a/site/shared/connectors/coinbaseWallet.md b/site/shared/connectors/coinbaseWallet.md index 176741f15b..3e84e3b97a 100644 --- a/site/shared/connectors/coinbaseWallet.md +++ b/site/shared/connectors/coinbaseWallet.md @@ -106,7 +106,45 @@ const connector = coinbaseWallet({ }) ``` -### version +::: warning +Passing `preference` as a string is deprecated and will be removed in the next major version. Instead you should use [`preference#options`](#options). +::: + +```ts-vue +import { coinbaseWallet } from '{{connectorsPackageName}}' + +const connector = coinbaseWallet({ + appName: 'My Wagmi App', + preference: { // [!code focus] + options: 'smartWalletOnly' // [!code focus] + }, // [!code focus] +}) +``` + +#### attribution + +`` { auto?: boolean | undefined; dataSuffix?: `0x${string}` | undefined } `` + +This option only applies to Coinbase Smart Wallet. When a valid data suffix is supplied, it is appended to the `initCode` and `executeBatch` calldata. Coinbase Smart Wallet expects a 16 byte hex string. If the data suffix is not a 16 byte hex string, the Smart Wallet will ignore the property. If auto is true, the Smart Wallet will generate a 16 byte hex string from the apps origin. + +#### keysUrl + +`string` + +- The URL for the keys popup. +- By default, `https://keys.coinbase.com/connect` is used for production. Use `https://keys-dev.coinbase.com/connect` for development environments. + +#### options + +`"all" | "eoaOnly" | "smartWalletOnly"` + +Preference for the type of wallet to display. + +- `'eoaOnly'`: Uses EOA Browser Extension or Mobile Coinbase Wallet. +- `'smartWalletOnly'`: Displays Smart Wallet popup. +- `'all'` (default): Supports both `'eoaOnly'` and `'smartWalletOnly'` based on context. + +### version - Coinbase Wallet SDK version - Defaults to `'4'`. If [`headlessMode: true`](#headlessmode), defaults to `'3'`.