feat: support coinbase wallet sdk configuration (#2405)

* feat: support coinbase wallet sdk configuration

* chore: add notes to example dapp to update later

* fix: typed destructuring

fix: interface

* chore: tweak docs

* chore: changeset

---------

Co-authored-by: Daniel Sinclair <[email protected]>

Author: stephancill

.changeset/brave-kiwis-fix.md

@@ -0,0 +1,22 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+The `coinbaseWallet` connector now supports additional SDK configuration options to enable [Paymasters](https://docs.base.org/identity/smart-wallet/guides/paymasters) and [Sub Accounts](https://docs.base.org/identity/smart-wallet/guides/sub-accounts) for your dapp.
+
+```tsx
+import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
+
+// Configure Paymaster for gas sponsorship
+coinbaseWallet.paymasterUrls = {
+  [base.id]: '...'
+};
+
+// Enable Sub Accounts
+coinbaseWallet.subAccounts = {
+  enableAutoSubAccounts: true,
+  defaultSpendLimits: {
+    // ...
+  }
+};
+```

packages/example/src/wagmi.ts

@@ -131,6 +131,8 @@ const avalanche = {
 // Testing `preference` type
 coinbaseWallet.preference = 'all';
 
+// TODO: Add subAccounts, paymasterUrls
+
 export const config = getDefaultConfig({
   appName: 'RainbowKit Demo',
   projectId,

packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts

@@ -11,9 +11,14 @@ export interface CoinbaseWalletOptions {
   appIcon?: string;
 }
 
-interface CoinbaseWallet {
+// supports preference, paymasterUrls, subAccounts
+type AcceptedCoinbaseWalletParameters = Omit<
+  CoinbaseWalletParameters<'4'>,
+  'headlessMode' | 'version' | 'appName' | 'appLogoUrl'
+>;
+
+interface CoinbaseWallet extends AcceptedCoinbaseWalletParameters {
   (params: CoinbaseWalletOptions): Wallet;
-  preference?: CoinbaseWalletParameters<'4'>['preference'];
 }
 
 export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => {
@@ -99,10 +104,15 @@ export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => {
           },
         }),
     createConnector: (walletDetails: WalletDetailsParams) => {
+      // Extract all AcceptedCoinbaseWalletParameters from coinbaseWallet
+      // This approach avoids type errors for properties not yet in upstream connector
+      const { ...optionalConfig }: AcceptedCoinbaseWalletParameters =
+        coinbaseWallet as any;
+
       const connector: CreateConnectorFn = coinbaseConnector({
         appName,
         appLogoUrl: appIcon,
-        preference: coinbaseWallet.preference,
+        ...optionalConfig,
       });
 
       return createConnector((config) => ({

site/data/en-US/docs/custom-wallet-list.mdx

@@ -180,17 +180,31 @@ import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';
 
 This wallet connector supports both the Coinbase Wallet app and extension, as well as Coinbase Smart Wallet on Web.
 
-A `preference` argument is available to control whether Smart Wallet is enabled and available for users. Preference based behavior is documented [here](https://www.smartwallet.dev/sdk/makeWeb3Provider#parameters).
+A `preference` argument is available to control whether Smart Wallet is preferred or disabled for your users. Preference based behavior is documented [here](https://docs.base.org/identity/smart-wallet/technical-reference/sdk/#options-optional).
 
-Smart Wallet will be enabled by default with `all` in early June, without a further upgrade.
-
-Developers can test Smart Wallet with `sepolia` and `baseSepolia` chains today by setting `smartWalletOnly` and including `coinbaseWallet` in their wallet list like so:
+Additional configuration options for control of [Paymasters](https://docs.base.org/identity/smart-wallet/guides/paymasters) and [Sub Accounts](https://docs.base.org/identity/smart-wallet/guides/sub-accounts) can be found in the Coinbase Wallet SDK docs [here](https://docs.base.org/identity/smart-wallet/technical-reference/sdk#parameters).
 
 ```tsx
 import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
 
-// Enable Coinbase Smart Wallet for testing
+// Limit your dApp to only Smart Wallet
 coinbaseWallet.preference = 'smartWalletOnly';
+
+// Limit your dApp to the Coinbase Wallet app
+coinbaseWallet.preference = 'eoaOnly';
+
+// Configure the Paymaster for gas sponsorship
+coinbaseWallet.paymasterUrls: {
+  [base.id]: '...'
+}
+
+// Enable Sub Accounts
+coinbaseWallet.subAccounts: {
+  enableAutoSubAccounts: true,
+  defaultSpendLimits: {
+    ...
+  }
+}
 ```
 
 #### Coin98 Wallet