From fea278accbe341598894c5492c7795b7fd59dbab Mon Sep 17 00:00:00 2001 From: MK <53529533+magiziz@users.noreply.github.com> Date: Thu, 30 May 2024 23:23:55 +0100 Subject: [PATCH] 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 * fix: add to example dapp --------- Co-authored-by: Daniel Sinclair Co-authored-by: Wilson Cusack --- .changeset/little-adults-rhyme.md | 29 +++++++++++++++++++ packages/example/src/wagmi.ts | 26 ++++++++++++----- packages/rainbowkit/CHANGELOG.md | 2 -- .../coinbaseWallet/coinbaseWallet.ts | 16 ++++++---- site/data/en-US/docs/custom-wallet-list.mdx | 13 ++++++++- 5 files changed, 70 insertions(+), 16 deletions(-) create mode 100644 .changeset/little-adults-rhyme.md diff --git a/.changeset/little-adults-rhyme.md b/.changeset/little-adults-rhyme.md new file mode 100644 index 0000000000..a501d6f3f2 --- /dev/null +++ b/.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], + }, + ], + /* ... */ +}); diff --git a/packages/example/src/wagmi.ts b/packages/example/src/wagmi.ts index ae414018e4..bf7b7b7d6b 100644 --- a/packages/example/src/wagmi.ts +++ b/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: [ diff --git a/packages/rainbowkit/CHANGELOG.md b/packages/rainbowkit/CHANGELOG.md index c65e8ccfc2..f0c4bf68b6 100644 --- a/packages/rainbowkit/CHANGELOG.md +++ b/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. diff --git a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts index a560175645..ea82312c54 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts +++ b/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) => ({ diff --git a/site/data/en-US/docs/custom-wallet-list.mdx b/site/data/en-US/docs/custom-wallet-list.mdx index 0a3942b2cb..d5fe6c479e 100644 --- a/site/data/en-US/docs/custom-wallet-list.mdx +++ b/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