From b2cfde64ab6b63b55e2f74b9940cdcc1252f6138 Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 30 May 2024 12:02:40 +0100 Subject: [PATCH 1/7] feat: add preference property to coinbaseWallet chore: simplify changeset example --- .changeset/little-adults-rhyme.md | 34 +++++++++++++++++++ packages/example/pages/_app.tsx | 20 ++++++++--- .../coinbaseWallet/coinbaseWallet.ts | 18 +++++++--- 3 files changed, 63 insertions(+), 9 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..87d16a08bd --- /dev/null +++ b/.changeset/little-adults-rhyme.md @@ -0,0 +1,34 @@ +--- +"@rainbow-me/rainbowkit": patch +"example": patch +--- + +Added `preference` property to `coinbaseWallet`. You can now enable coinbase smart wallet feature like so: + +```tsx +import { getDefaultConfig } from '@rainbow-me/rainbowkit'; +import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets'; +import { + arbitrum, + base, + mainnet, + optimism, + polygon, + sepolia, +} from 'wagmi/chains'; + +// Enable coinbase smart wallet feature +coinbaseWallet.preference = 'smartWalletOnly'; + +export const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + { + groupName: 'Popular', + wallets: [coinbaseWallet], + }, + ], + chains: [mainnet], +}); +``` \ No newline at end of file diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index bacc1f8ec2..0ac1235590 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -9,7 +9,6 @@ import { RainbowKitProvider, darkTheme, getDefaultConfig, - getDefaultWallets, lightTheme, midnightTheme, } from '@rainbow-me/rainbowkit'; @@ -27,6 +26,7 @@ import { bybitWallet, clvWallet, coin98Wallet, + coinbaseWallet, compassWallet, coreWallet, dawnWallet, @@ -42,6 +42,7 @@ import { kresusWallet, ledgerWallet, magicEdenWallet, + metaMaskWallet, mewWallet, nestWallet, oktoWallet, @@ -51,6 +52,7 @@ import { oneKeyWallet, phantomWallet, rabbyWallet, + rainbowWallet, ramperWallet, roninWallet, safeheronWallet, @@ -62,6 +64,7 @@ import { tokenaryWallet, trustWallet, uniswapWallet, + walletConnectWallet, xdefiWallet, zealWallet, zerionWallet, @@ -108,8 +111,6 @@ const RAINBOW_TERMS = 'https://rainbow.me/terms-of-use'; const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? 'YOUR_PROJECT_ID'; -const { wallets } = getDefaultWallets(); - const avalanche = { id: 43_114, name: 'Avalanche', @@ -146,6 +147,9 @@ const sei = { contracts: {}, } as const satisfies Chain; +// Enable coinbase smart wallet feature +coinbaseWallet.preference = 'smartWalletOnly'; + const config = getDefaultConfig({ appName: 'RainbowKit Demo', projectId, @@ -181,7 +185,15 @@ const config = getDefaultConfig({ : []), ], wallets: [ - ...wallets, + { + groupName: 'Popular', + wallets: [ + rainbowWallet, + coinbaseWallet, + metaMaskWallet, + walletConnectWallet, + ], + }, { groupName: 'Other', wallets: [ diff --git a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts index a560175645..848d136719 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,7 @@ export interface CoinbaseWalletOptions { appIcon?: string; } -export const coinbaseWallet = ({ - appName, - appIcon, -}: CoinbaseWalletOptions): Wallet => { +const wallet = ({ appName, appIcon }: CoinbaseWalletOptions): Wallet => { const getUri = (uri: string) => uri; const ios = isIOS(); @@ -97,6 +97,7 @@ export const coinbaseWallet = ({ const connector: CreateConnectorFn = coinbaseConnector({ appName, appLogoUrl: appIcon, + preference: coinbaseWallet.preference, }); return createConnector((config) => ({ @@ -106,3 +107,10 @@ export const coinbaseWallet = ({ }, }; }; + +export const coinbaseWallet = Object.assign< + typeof wallet, + { preference: CoinbaseWalletParameters<'4'>['preference'] } +>(wallet, { + preference: 'all', +}); From c7c2e283cc88713eae4055e49ad2f3e423135330 Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 30 May 2024 16:29:31 +0100 Subject: [PATCH 2/7] chore: set preference default value as undefined --- .../wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts index 848d136719..5f5378e83d 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts @@ -112,5 +112,5 @@ export const coinbaseWallet = Object.assign< typeof wallet, { preference: CoinbaseWalletParameters<'4'>['preference'] } >(wallet, { - preference: 'all', + preference: undefined, }); From 91dec27cfb77b8b710f9d3c138740c97f1a606be Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 30 May 2024 17:10:48 +0100 Subject: [PATCH 3/7] chore: use type instead of Object.assign --- .../coinbaseWallet/coinbaseWallet.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts index 5f5378e83d..8b60169c56 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts @@ -11,7 +11,12 @@ export interface CoinbaseWalletOptions { appIcon?: string; } -const wallet = ({ appName, appIcon }: CoinbaseWalletOptions): Wallet => { +type CoinbaseWallet = { + (params: CoinbaseWalletOptions): Wallet; + preference?: CoinbaseWalletParameters<'4'>['preference']; +}; + +export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => { const getUri = (uri: string) => uri; const ios = isIOS(); @@ -107,10 +112,3 @@ const wallet = ({ appName, appIcon }: CoinbaseWalletOptions): Wallet => { }, }; }; - -export const coinbaseWallet = Object.assign< - typeof wallet, - { preference: CoinbaseWalletParameters<'4'>['preference'] } ->(wallet, { - preference: undefined, -}); From fafd347011ee49beef2f0564ee3317a60d131ecd Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 30 May 2024 17:12:59 +0100 Subject: [PATCH 4/7] chore: switch from type to interface for CoinbaseWallet type --- .../wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts index 8b60169c56..ea82312c54 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/coinbaseWallet/coinbaseWallet.ts @@ -11,10 +11,10 @@ export interface CoinbaseWalletOptions { appIcon?: string; } -type CoinbaseWallet = { +interface CoinbaseWallet { (params: CoinbaseWalletOptions): Wallet; preference?: CoinbaseWalletParameters<'4'>['preference']; -}; +} export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => { const getUri = (uri: string) => uri; From fbe9388a932fea8f62c7638e339fe1a55481f05a Mon Sep 17 00:00:00 2001 From: MK Date: Thu, 30 May 2024 17:40:24 +0100 Subject: [PATCH 5/7] chore: replace preference to be all in example dApp chore: remove comment --- packages/example/pages/_app.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index 0ac1235590..1b54e5b94b 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -147,8 +147,7 @@ const sei = { contracts: {}, } as const satisfies Chain; -// Enable coinbase smart wallet feature -coinbaseWallet.preference = 'smartWalletOnly'; +coinbaseWallet.preference = 'all'; const config = getDefaultConfig({ appName: 'RainbowKit Demo', From 96ef7fd8affcfd3581e014487e1f0dbc2b6d60d0 Mon Sep 17 00:00:00 2001 From: Daniel Sinclair Date: Thu, 30 May 2024 16:08:51 -0400 Subject: [PATCH 6/7] chore: add changeset, update docs Co-authored-by: Wilson Cusack --- .changeset/little-adults-rhyme.md | 27 +++++++++------------ packages/rainbowkit/CHANGELOG.md | 2 -- site/data/en-US/docs/custom-wallet-list.mdx | 13 +++++++++- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/.changeset/little-adults-rhyme.md b/.changeset/little-adults-rhyme.md index 87d16a08bd..a501d6f3f2 100644 --- a/.changeset/little-adults-rhyme.md +++ b/.changeset/little-adults-rhyme.md @@ -3,32 +3,27 @@ "example": patch --- -Added `preference` property to `coinbaseWallet`. You can now enable coinbase smart wallet feature like so: +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 { getDefaultConfig } from '@rainbow-me/rainbowkit'; import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets'; -import { - arbitrum, - base, - mainnet, - optimism, - polygon, - sepolia, -} from 'wagmi/chains'; -// Enable coinbase smart wallet feature +// Enable Coinbase Smart Wallet for testing coinbaseWallet.preference = 'smartWalletOnly'; -export const config = getDefaultConfig({ - appName: 'RainbowKit demo', - projectId: 'YOUR_PROJECT_ID', +// 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], }, ], - chains: [mainnet], + /* ... */ }); -``` \ No newline at end of file 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/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 From ca1ef0596461406b0c7dd3e693df88cc90997dab Mon Sep 17 00:00:00 2001 From: Daniel Sinclair Date: Thu, 30 May 2024 16:15:21 -0400 Subject: [PATCH 7/7] fix: add to example dapp --- packages/example/src/wagmi.ts | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) 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: [