Use new init method + expose preference object (#4409)

* createCoinbaseWalletSDK + expose preference * lint * spread the preference object * refactor: types * chore: changeset * docs: up --------- Co-authored-by: Tom Meagher <[email protected]>
wevm · Nov 15, 2024 · 7ca62b4 · 7ca62b4
1 parent ee33fb4
commit 7ca62b4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 21 deletions.
diff --git a/.changeset/bright-suns-rush.md 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
@@ -1,7 +1,7 @@
 import type {
-  CoinbaseWalletSDK,
   Preference,
   ProviderInterface,
+  createCoinbaseWalletSDK,
 } from '@coinbase/wallet-sdk'
 import {
   ChainNotConfiguredError,
@@ -62,14 +62,16 @@ export function coinbaseWallet<version extends Version>(
 
 type Version4Parameters = Mutable<
   Omit<
-    ConstructorParameters<typeof CoinbaseWalletSDK>[0],
-    'appChainIds' // set via wagmi config
+    Parameters<typeof createCoinbaseWalletSDK>[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<Preference> | 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
@@ -106,7 +106,45 @@ const connector = coinbaseWallet({
 })
 ```
 
-### version <Badge text=">=2.9.0" />
+::: 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 <Badge text=">=2.13.0" />
+
+`` { 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 <Badge text=">=2.13.0" />
+
+`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 <Badge text=">=2.13.0" />
+
+`"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 <Badge text=">=2.13.0" />
 
 - Coinbase Wallet SDK version
 - Defaults to `'4'`. If [`headlessMode: true`](#headlessmode), defaults to `'3'`.