feat: add preference property to coinbaseWallet (#2017)

* feat: add preference property to coinbaseWallet

chore: simplify changeset example

* chore: set preference default value as undefined

* chore: use type instead of Object.assign

* chore: switch from type to interface for CoinbaseWallet type

* chore: replace preference to be all in example dApp

chore: remove comment

* chore: add changeset, update docs

Co-authored-by: Wilson Cusack <wilson.cusack@coinbase.com>

* fix: add to example dapp

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>
Co-authored-by: Wilson Cusack <wilson.cusack@coinbase.com>

.changeset/little-adults-rhyme.md

@@ -0,0 +1,29 @@
+---
+"@rainbow-me/rainbowkit": patch
+"example": patch
+---
+
+The `coinbaseWallet` wallet connector now has a `preference` argument to control whether Smart Wallet is enabled and available for users. Preference based behavior is documented [here](https://www.smartwallet.dev/sdk/makeWeb3Provider#parameters).
+
+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` like so:
+
+```tsx
+import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
+
+// Enable Coinbase Smart Wallet for testing
+coinbaseWallet.preference = 'smartWalletOnly';
+
+// You must manually specify your wallet list with `wallets` in 
+// `getDefaultConfig` or `connectorsForWallets` to assign the preference
+const config = getDefaultConfig({
+  /* ... */
+  wallets: [
+    {
+      groupName: 'Popular',
+      wallets: [coinbaseWallet],
+    },
+  ],
+  /* ... */
+});

packages/example/src/wagmi.ts

@@ -1,8 +1,4 @@
-import {
-  type Chain,
-  getDefaultConfig,
-  getDefaultWallets,
-} from '@rainbow-me/rainbowkit';
+import { type Chain, getDefaultConfig } from '@rainbow-me/rainbowkit';
 import {
   argentWallet,
   bifrostWallet,
@@ -13,6 +9,7 @@ import {
   bybitWallet,
   clvWallet,
   coin98Wallet,
+  coinbaseWallet,
   compassWallet,
   coreWallet,
   dawnWallet,
@@ -28,6 +25,7 @@ import {
   kresusWallet,
   ledgerWallet,
   magicEdenWallet,
+  metaMaskWallet,
   mewWallet,
   nestWallet,
   oktoWallet,
@@ -37,6 +35,7 @@ import {
   oneKeyWallet,
   phantomWallet,
   rabbyWallet,
+  rainbowWallet,
   ramperWallet,
   roninWallet,
   safeheronWallet,
@@ -48,6 +47,7 @@ import {
   tokenaryWallet,
   trustWallet,
   uniswapWallet,
+  walletConnectWallet,
   xdefiWallet,
   zealWallet,
   zerionWallet,
@@ -81,8 +81,6 @@ import {
 const projectId =
   process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? 'YOUR_PROJECT_ID';
 
-const { wallets } = getDefaultWallets();
-
 const avalanche = {
   id: 43_114,
   name: 'Avalanche',
@@ -119,6 +117,10 @@ const sei = {
   contracts: {},
 } as const satisfies Chain;
 
+// Enable Smart Wallet and EOA
+// Testing `preference` type
+coinbaseWallet.preference = 'all';
+
 export const config = getDefaultConfig({
   appName: 'RainbowKit Demo',
   projectId,
@@ -154,7 +156,15 @@ export const config = getDefaultConfig({
       : []),
   ],
   wallets: [
-    ...wallets,
+    {
+      groupName: 'Popular',
+      wallets: [
+        rainbowWallet,
+        coinbaseWallet,
+        metaMaskWallet,
+        walletConnectWallet,
+      ],
+    },
     {
       groupName: 'Other',
       wallets: [

packages/rainbowkit/CHANGELOG.md

@@ -17,8 +17,6 @@
 
   Smart Wallet and the underlying smart contract is fully compatible with Wagmi, but dApps need to ensure that their offchain signature validation is [ERC-6492](https://eips.ethereum.org/EIPS/eip-6492) compliant to support smart contract wallets. Follow [this guide](https://www.smartwallet.dev/guides/signature-verification) for more information.
 
-  Smart Wallet is currently only available for testnets while using RainbowKit in a local development environment. Support for Mainnet and full production rollout will occur automatically later this month.
-
   Coinbase Wallet users on desktop and mobile will now interact with a new connection flow in RainbowKit alongside Smart Wallet.
 
 - 90d6931: Introduced the Enhanced Provider to handle fallback resolutions when a Mainnet provider transport is unavailable.

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

@@ -1,5 +1,8 @@
 import { CreateConnectorFn, createConnector } from 'wagmi';
-import { coinbaseWallet as coinbaseConnector } from 'wagmi/connectors';
+import {
+  CoinbaseWalletParameters,
+  coinbaseWallet as coinbaseConnector,
+} from 'wagmi/connectors';
 import { isIOS } from '../../../utils/isMobile';
 import { Wallet, WalletDetailsParams } from '../../Wallet';
 
@@ -8,10 +11,12 @@ export interface CoinbaseWalletOptions {
   appIcon?: string;
 }
 
-export const coinbaseWallet = ({
-  appName,
-  appIcon,
-}: CoinbaseWalletOptions): Wallet => {
+interface CoinbaseWallet {
+  (params: CoinbaseWalletOptions): Wallet;
+  preference?: CoinbaseWalletParameters<'4'>['preference'];
+}
+
+export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => {
   const getUri = (uri: string) => uri;
   const ios = isIOS();
 
@@ -97,6 +102,7 @@ export const coinbaseWallet = ({
       const connector: CreateConnectorFn = coinbaseConnector({
         appName,
         appLogoUrl: appIcon,
+        preference: coinbaseWallet.preference,
       });
 
       return createConnector((config) => ({

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

@@ -146,10 +146,21 @@ import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';
 import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
 ```
 
-#### Coinbase Wallet
+#### Coinbase
+
+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).
+
+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:
 
 ```tsx
 import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
+
+// Enable Coinbase Smart Wallet for testing
+coinbaseWallet.preference = 'smartWalletOnly';
 ```
 
 #### Compass Wallet