From 5d89f3d143738dcd64e2765a4db2fe0551db899d Mon Sep 17 00:00:00 2001 From: Daniel Sinclair Date: Sat, 10 Feb 2024 17:14:13 -0500 Subject: [PATCH] docs: v2 migration guides, docs, changesets (#1697) * chore: changsets and docs from #1601 * merge: @daniel/migration-guide-v2 * chore: update docs * chore: update docs with new APIs and wagmi v2 changes * chore: update changesets * chore: update changesets * chore: update changesets * chore: update 2.x.x wagmi version * fix: use single quote instead of double quote * fix: use single quote instead of double quote #2 * fix: refactor custom-wallets.mdx * chore: small tweak * chore: update introduction video * fix: remove chains prop from migration guide * chore: update custom wallets, chains and installation sections * chore: update custom chains * chore: update custom wallet list * chore: tweak * chore: update custom chains and tweak stuff * chore: tweak changeset and migration * chore: update rainbow button guide * chore: update docs and tweak changesets * chore: rainbowkit to major version 2.x.x changeset change * chore: update sitemap * fix: missing tanstack/react-query installs * fix: missing @tanstack/react-query imports * fix: create-rainbowkit minor bump * fix: simplify changeset and migration guide * fix: rainbow button changeset * fix: removed beta link from changeset * fix: removed beta callout * fix: peer references * fix: remove incorrect file * fix: tweak * fix: chains docs * fix: latest reference * fix: tanstack, injectedWallet references * fix: intro * fix: duplicate tanstack install reference * fix: rainbow button readme * fix: wallet connectors reference * fix: queryclientprovider reference * fix: imports for connectorsforwallets * fix: favor viem@2.x * fix: migrate migration guide to guide article * chore: update sitemap --------- Co-authored-by: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com> --- .changeset/clean-yaks-bake.md | 7 + .changeset/loud-carrots-check.md | 97 ++++++ .changeset/silent-maps-kneel.md | 54 ++++ .changeset/soft-hotels-joke.md | 9 + .changeset/stale-ears-rescue.md | 7 + packages/rainbow-button/README.md | 20 +- site/data/en-US/docs/authentication.mdx | 24 +- site/data/en-US/docs/chains.mdx | 77 +++-- .../data/en-US/docs/custom-authentication.mdx | 30 +- site/data/en-US/docs/custom-chains.mdx | 62 ++-- site/data/en-US/docs/custom-wallet-list.mdx | 239 +++++++-------- site/data/en-US/docs/custom-wallets.mdx | 202 ++++++------- site/data/en-US/docs/installation.mdx | 60 ++-- site/data/en-US/docs/introduction.mdx | 4 +- site/data/en-US/docs/migration-guide.mdx | 195 ++++++++++++ site/data/en-US/guides/rainbow-button.mdx | 49 +++- .../data/en-US/guides/rainbowkit-wagmi-v2.mdx | 277 +++++++++--------- site/public/sitemap-0.xml | 6 +- 18 files changed, 880 insertions(+), 539 deletions(-) create mode 100644 .changeset/clean-yaks-bake.md create mode 100644 .changeset/loud-carrots-check.md create mode 100644 .changeset/silent-maps-kneel.md create mode 100644 .changeset/soft-hotels-joke.md create mode 100644 .changeset/stale-ears-rescue.md diff --git a/.changeset/clean-yaks-bake.md b/.changeset/clean-yaks-bake.md new file mode 100644 index 0000000000..69de472a54 --- /dev/null +++ b/.changeset/clean-yaks-bake.md @@ -0,0 +1,7 @@ +--- +"@rainbow-me/rainbowkit-siwe-next-auth": minor +--- + +RainbowKit has reached v2 alongside [wagmi](https://wagmi.sh), which includes [breaking changes](https://wagmi.sh/react/guides/migrate-from-v1-to-v2). + +`0.4.x` now requires `@rainbow-me/rainbowkit` v2, specifically: `2.x.x`. diff --git a/.changeset/loud-carrots-check.md b/.changeset/loud-carrots-check.md new file mode 100644 index 0000000000..30668c295f --- /dev/null +++ b/.changeset/loud-carrots-check.md @@ -0,0 +1,97 @@ +--- +"@rainbow-me/rainbowkit": major +--- + +**Breaking:** + +The [wagmi](https://wagmi.sh) and [viem](https://viem.sh) peer dependencies have reached `2.x.x` with breaking changes. + +Follow the steps below to migrate. + +**1. Upgrade RainbowKit, `wagmi`, and `viem` to their latest versions** + +```bash +npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x +``` + +**2. Install `@tanstack/react-query` peer dependency** + +With Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) is now a required peer dependency. + +Install it with the following command: + +```bash +npm i @tanstack/react-query +``` + +**3. Upgrade your RainbowKit and Wagmi configurations** + +```diff + import '@rainbow-me/rainbowkit/styles.css' + ++ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +- import { createPublicClient, http } from 'viem' +- import { WagmiConfig } from 'wagmi' ++ import { WagmiProvider, http } from 'wagmi' +- import { configureChains, createConfig } from 'wagmi' + import { mainnet } from 'wagmi/chains' + import { RainbowKitProvider } from '@rainbow-me/rainbowkit' +- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit' ++ import { getDefaultConfig } from '@rainbow-me/rainbowkit' + + /* getDefaultWallets is now optional */ +- const { wallets } = getDefaultWallets({ +- appName: 'RainbowKit demo', +- projectId: 'YOUR_PROJECT_ID', +- chains, +- }) + + /* connectorsForWallets is now optional */ +- const connectors = connectorsForWallets([...wallets]) + +- const { chains, publicClient } = configureChains( +- [mainnet, sepolia], +- [publicProvider(), publicProvider()], +- ) + +- const config = createConfig({ +- autoConnect: true, +- publicClient, +- }) + + /* New API that includes Wagmi's createConfig and bundles getDefaultWallets and connectorsForWallets */ ++ const config = getDefaultConfig({ ++ appName: 'RainbowKit demo', ++ projectId: 'YOUR_PROJECT_ID', ++ chains: [mainnet], ++ transports: { ++ [mainnet.id]: http(), ++ }, ++ }) + ++ const queryClient = new QueryClient() + + const App = () => { + return ( +- ++ ++ +- ++ + {/* Your App */} + ++ +- ++ + ) + } +``` + +[You can read an in-depth migration guide here](https://rainbowkit.com/guides/rainbowkit-wagmi-v2). + +**4. Check for breaking changes in `wagmi` and `viem`** + +If you use `wagmi` hooks and `viem` actions in your dApp, you will need to follow the migration guides for v2: + +- [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2) +- [Viem v2 Breaking Changes](https://viem.sh/docs/migration-guide.html#_2-x-x-breaking-changes) diff --git a/.changeset/silent-maps-kneel.md b/.changeset/silent-maps-kneel.md new file mode 100644 index 0000000000..6be7f0a885 --- /dev/null +++ b/.changeset/silent-maps-kneel.md @@ -0,0 +1,54 @@ +--- +"@rainbow-me/rainbow-button": minor +--- + +**Breaking:** + +The [wagmi](https://wagmi.sh) and [viem](https://viem.sh) peer dependencies have reached `2.x.x` with breaking changes. + +Follow the steps below to migrate. + +**1. Upgrade Rainbow Button, `wagmi`, and `viem` to their latest versions**** + +```bash +npm i @rainbow-me/rainbow-button@2 wagmi@2 viem@2.x +``` + +**2. Install `@tanstack/react-query` peer dependency** + +With Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) is now a required peer dependency. + +Install it with the following command: + +```bash +npm i @tanstack/react-query +``` + +**3. Upgrade your Rainbow Button and Wagmi configurations** + +`RainbowConnector` is now `rainbowConnector`, and requires `appName` and no longer accepts the `chains` parameter. + +```diff +- import { RainbowConnector } from '@rainbow-me/rainbow-button' ++ import { rainbowConnector } from '@rainbow-me/rainbow-button' + import { createConfig } from 'wagmi' + + const config = createConfig({ +- connectors: [new RainbowConnector({ chains, projectId })], ++ connectors: [ ++ rainbowConnector({ ++ appName: "RainbowKit demo", ++ projectId: "YOUR_PROJECT_ID", ++ }), ++ ], + }) +``` + +Follow the [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2) for additional configuration changes. + +**4. Check for breaking changes in `wagmi` and `viem`** + +If you use `wagmi` hooks and `viem` actions in your dApp, you will need to follow the full migration guides for v2: + +- [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2) +- [Viem v2 Breaking Changes](https://viem.sh/docs/migration-guide.html#_2-x-x-breaking-changes) \ No newline at end of file diff --git a/.changeset/soft-hotels-joke.md b/.changeset/soft-hotels-joke.md new file mode 100644 index 0000000000..733ceaedb4 --- /dev/null +++ b/.changeset/soft-hotels-joke.md @@ -0,0 +1,9 @@ +--- +"@rainbow-me/create-rainbowkit": minor +--- + +Migrated template to Wagmi v2 with the following package changes: + +- updated `wagmi` from `1.4.x` to `^2.0.0` +- updated `viem` from `1.21.x` to `^2.0.0` +- added `@tanstack/react-query` dependency with version `^5` diff --git a/.changeset/stale-ears-rescue.md b/.changeset/stale-ears-rescue.md new file mode 100644 index 0000000000..dc191615e6 --- /dev/null +++ b/.changeset/stale-ears-rescue.md @@ -0,0 +1,7 @@ +--- +"site": patch +--- + +- Added migration guide for `@rainbow-me/rainbowkit` `2.x.x` breaking changes. +- Updated all documentation section to include the latest Wagmi, Viem and TanStack Query usage +- Added migration guide for `2.x.x` breaking changes diff --git a/packages/rainbow-button/README.md b/packages/rainbow-button/README.md index ca833b7c41..c01bcc0ff4 100644 --- a/packages/rainbow-button/README.md +++ b/packages/rainbow-button/README.md @@ -12,10 +12,10 @@ This package is designed to be installed independent of [RainbowKit](https://www ### Install -Install the `@rainbow-me/rainbow-button` package and its peer dependencies, [wagmi](https://wagmi.sh/) and [viem](https://viem.sh/). +Install the `@rainbow-me/rainbow-button` package and its peer dependencies, [wagmi](https://wagmi.sh/), [viem](https://viem.sh/), and [@tanstack/react-query](https://tanstack.com/query/v5). ```bash -npm install @rainbow-me/rainbow-button wagmi viem +npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query ``` ### Import @@ -34,7 +34,7 @@ import { createConfig, WagmiConfig } from 'wagmi'; ### Adopt the connector -The `RainbowConnector` supports connecting with Rainbow just like wagmi's native `MetaMaskConnector` from `wagmi/connectors/metaMask`. +The `RainbowConnector` supports connecting with Rainbow just like Wagmi's native `MetaMaskConnector` from `wagmi/connectors/metaMask`. Create an instance of the `RainbowConnector` and provide it in your wagmi config `connectors` list. Supply your `chains` list and your WalletConnect v2 `projectId`. You can obtain a `projectId` from [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in). This is absolutely free and only takes a few minutes. @@ -47,16 +47,18 @@ const config = createConfig({ ### Wrap providers -Wrap your application with `RainbowButtonProvider` and `WagmiConfig`. +Wrap your application with `RainbowButtonProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), and [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider). ```tsx const App = () => { return ( - - - {/* Your App */} - - + + + + {/* Your App */} + + + ); }; ``` diff --git a/site/data/en-US/docs/authentication.mdx b/site/data/en-US/docs/authentication.mdx index a7718eeb1b..cba0823ec2 100644 --- a/site/data/en-US/docs/authentication.mdx +++ b/site/data/en-US/docs/authentication.mdx @@ -41,7 +41,13 @@ import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; import { SessionProvider } from 'next-auth/react'; import type { Session } from 'next-auth'; import { AppProps } from 'next/app'; -import { WagmiConfig } from 'wagmi'; +import { WagmiProvider } from 'wagmi'; +import { + QueryClientProvider, + QueryClient, +} from "@tanstack/react-query"; + +const queryClient = new QueryClient(); export default function App({ Component, @@ -50,15 +56,17 @@ export default function App({ session: Session; }>) { return ( - + - - - - - + + + + + + + - + ; ); } ``` diff --git a/site/data/en-US/docs/chains.mdx b/site/data/en-US/docs/chains.mdx index fa79674d42..8ac0d33fc1 100644 --- a/site/data/en-US/docs/chains.mdx +++ b/site/data/en-US/docs/chains.mdx @@ -7,74 +7,69 @@ description: Customizing chains ## Customizing chains -The `chains` prop on `RainbowKitProvider` defines which chains are available for the user to select. - RainbowKit is designed to integrate with [wagmi’s `chain` object](https://wagmi.sh/react/chains). Check out the list of supported chains [here](https://wagmi.sh/react/chains#supported-chains). -> For more detail about the `chain` object, or to see examples when creating a custom chain definition, see the [source code for wagmi’s `chain` object](https://github.com/wagmi-dev/references/blob/main/packages/chains/src/types.ts). - -Your chain config can be defined in a single array provided to [`configureChains`](https://wagmi.sh/react/providers/configuring-chains). - -```tsx -import { RainbowKitProvider, Chain } from '@rainbow-me/rainbowkit'; -import { configureChains } from 'wagmi'; -import { mainnet, optimism, zora } from 'wagmi/chains'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; - -const { chains } = configureChains( - [mainnet, optimism, zora], - [ - alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), - publicProvider(), - ] -); - -const App = () => { - return ( - - {/* ... */} - - ); -}; -``` - ### Customizing the initial chain -By default, RainbowKit will connect to the first chain in your `chains` array to ensure users aren't immediately presented with the "Wrong network" state. This behavior can be customized via the `initialChain` prop. +By default, RainbowKit will connect to the first chain supplied to Wagmi. This behavior can be customized via the `initialChain` prop. The initial chain can be configured using a chain ID. ```tsx - + ``` As a convenience, you can also pass a chain object. ```tsx - + ``` -### Custom chain icons +### Custom chain metadata + +Several chain icons and backgrounds are provided by default, but you can customize the icon and background for each chain using the `iconUrl` and `iconBackground` properties. + +Example with `getDefaultConfig` + +```tsx +import { mainnet, optimism } from 'wagmi/chains'; + +const config = getDefaultConfig({ + chains: [ + { + ...mainnet, + iconBackground: '#000', + iconUrl: 'https://example.com/icons/ethereum.png', + }, + { + ...optimism, + iconBackground: '#ff0000', + iconUrl: 'https://example.com/icons/optimism.png', + }, + ], +}); +``` -Several chain icons are provided by default, but you can customize the icon for each chain using the iconUrl property. +Example with `createConfig` ```tsx -import { Chain, mainnet, optimism } from 'wagmi/chains'; +import { mainnet, optimism } from 'wagmi/chains'; +import { Chain } from '@rainbow-me/rainbowkit'; -const defaultChains: Chain[] = [ +const chains: readonly [Chain, ...Chain[]] = [ { ...mainnet, + iconBackground: '#000', iconUrl: 'https://example.com/icons/ethereum.png', }, { ...optimism, + iconBackground: '#ff0000', iconUrl: 'https://example.com/icons/optimism.png', }, ]; -const { chains } = configureChains(defaultChains, [ - alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), - publicProvider(), -]); +const config = createConfig({ + chains, +}); ``` diff --git a/site/data/en-US/docs/custom-authentication.mdx b/site/data/en-US/docs/custom-authentication.mdx index bea7e472cd..57069317ac 100644 --- a/site/data/en-US/docs/custom-authentication.mdx +++ b/site/data/en-US/docs/custom-authentication.mdx @@ -68,12 +68,18 @@ import { RainbowKitProvider, } from '@rainbow-me/rainbowkit'; import { AppProps } from 'next/app'; -import { WagmiConfig } from 'wagmi'; +import { WagmiProvider } from 'wagmi'; +import { + QueryClientProvider, + QueryClient, +} from "@tanstack/react-query"; const authenticationAdapter = createAuthenticationAdapter({ /* See above... */ }); +const queryClient = new QueryClient(); + export default function App({ Component, pageProps }: AppProps) { // You'll need to resolve AUTHENTICATION_STATUS here // using your application's authentication system. @@ -81,16 +87,18 @@ export default function App({ Component, pageProps }: AppProps) { // 'unauthenticated' or 'authenticated'. return ( - - - - - - - + + + + + + + + + ); } ``` diff --git a/site/data/en-US/docs/custom-chains.mdx b/site/data/en-US/docs/custom-chains.mdx index 72b3fe6d03..b81ad6e598 100644 --- a/site/data/en-US/docs/custom-chains.mdx +++ b/site/data/en-US/docs/custom-chains.mdx @@ -7,33 +7,33 @@ description: Create a custom chain ## Create a custom chain -You can use the `Chain` type to help you create a custom chain. Then, pass that to the [`configureChains` function](https://wagmi.sh/docs/providers/configuring-chains). +You can use the `Chain` type to help you create a custom chain. Then, pass that to `getDefaultConfig` or Wagmi's [`createConfig`](https://wagmi.sh/core/api/createConfig#createconfig). For example, here's how you can create an Avalanche chain for [avax.network](https://avax.network). ```tsx -import { Chain, getDefaultWallets } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { + RainbowKitProvider, + getDefaultConfig, + Chain, +} from '@rainbow-me/rainbowkit'; +import { WagmiProvider } from 'wagmi'; +import { + QueryClientProvider, + QueryClient, +} from "@tanstack/react-query"; -const avalanche: Chain = { +const avalanche = { id: 43_114, name: 'Avalanche', - network: 'avalanche', - iconUrl: 'https://example.com/icon.svg', + iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', iconBackground: '#fff', - nativeCurrency: { - decimals: 18, - name: 'Avalanche', - symbol: 'AVAX', - }, + nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 }, rpcUrls: { - public: { http: ['https://api.avax.network/ext/bc/C/rpc'] }, default: { http: ['https://api.avax.network/ext/bc/C/rpc'] }, }, blockExplorers: { default: { name: 'SnowTrace', url: 'https://snowtrace.io' }, - etherscan: { name: 'SnowTrace', url: 'https://snowtrace.io' }, }, contracts: { multicall3: { @@ -41,35 +41,25 @@ const avalanche: Chain = { blockCreated: 11_907_934, }, }, - testnet: false, -}; - -const { provider, chains } = configureChains( - [avalanche], - [publicProvider()] -); +} as const satisfies Chain; -const { connectors } = getDefaultWallets({ +const config = getDefaultConfig({ appName: 'My RainbowKit App', projectId: 'YOUR_PROJECT_ID', - chains, + chains: [avalanche], }); -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - provider, -}); +const queryClient = new QueryClient(); const App = () => { return ( - - - {/* Your App */} - - + + + + {/* Your App */} + + + ); }; -``` - -Learn more about [configuring chains](https://wagmi.sh/docs/providers/configuring-chains). +``` \ No newline at end of file diff --git a/site/data/en-US/docs/custom-wallet-list.mdx b/site/data/en-US/docs/custom-wallet-list.mdx index e7b166103f..ad7d535193 100644 --- a/site/data/en-US/docs/custom-wallet-list.mdx +++ b/site/data/en-US/docs/custom-wallet-list.mdx @@ -19,46 +19,44 @@ import { rainbowWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, mainnet } from 'wagmi'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; -const { chains } = configureChains( - [mainnet], +const connectors = connectorsForWallets( [ - alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), - publicProvider(), - ] -); - -const connectors = connectorsForWallets([ + { + groupName: 'Recommended', + wallets: [rainbowWallet, walletConnectWallet], + }, + ], { - groupName: 'Recommended', - wallets: [ - rainbowWallet({ projectId, chains }), - walletConnectWallet({ projectId, chains }), - ], - }, -]); + appName: 'My RainbowKit App', + projectId: 'YOUR_PROJECT_ID', + } +); ``` -You can then pass your connectors to `wagmi`'s `createConfig`. +You can then pass your connectors to Wagmi's `createConfig`. + +```tsx +import { connectorsForWallets } from '@rainbow-me/rainbowkit'; +import { createConfig } from 'wagmi'; -```tsx line=1,4-99 -import { createConfig, WagmiConfig } from 'wagmi'; -... -const connectors = connectorsForWallets([ /* ... */ ]); +const connectors = connectorsForWallets(/* ... */); -const wagmiConfig = createConfig({ +const config = createConfig({ connectors, + {/* Wagmi config */} }); +const queryClient = new QueryClient(); + const App = () => ( - - - {/* Your App */} - - + + + + {/* Your App */} + + + ); ``` @@ -81,19 +79,26 @@ import { walletConnectWallet } from '@rainbow-me/rainbowkit/wallets'; walletConnectWallet(options: { projectId: string; - chains: Chain[]; options?: { - qrcodeModalOptions?: { - desktopLinks?: string[]; - mobileLinks?: string[]; + qrModalOptions?: { + desktopWallets?: DesktopWallet[]; + mobileWallets?: MobileWallet[]; }; } }); ``` -Additional documentation for supported `options` can be found [here](https://docs.walletconnect.com/1.0/quick-start/dapps/web3-provider#optional). +##### Injected Wallet + +This is a fallback wallet option designed for scenarios where `window.ethereum` exists but hasn’t been provided by another wallet in the list. This wallet will automatically hide itself from the list when the fallback is not necessary or if there is no injected wallet available. + +**It's recommended that you always include this wallet in the list to ensure all injected wallets are supported.** -In preparation for the migration to WalletConnect v2, the `options` for Web3Modal v2 are also supported. Reference the [Ethereum Provider docs](https://docs.walletconnect.com/2.0/javascript/providers/ethereum#initialization). The required `projectId` is automatically pre-populated by RainbowKit. +```tsx +import { injectedWallet } from '@rainbow-me/rainbowkit/wallets'; + +injectedWallet(); +``` ### Specific Wallets @@ -106,7 +111,6 @@ import { argentWallet } from '@rainbow-me/rainbowkit/wallets'; argentWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -117,7 +121,6 @@ import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets'; bitgetWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -125,9 +128,9 @@ bitgetWallet(options: { ```tsx import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets'; + bifrostWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -136,9 +139,15 @@ bifrostWallet(options: { ```tsx import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets'; -bitskiWallet(options: { - chains: Chain[]; -}); +bitskiWallet(); +``` + +#### Brave Wallet + +```tsx +import { braveWallet } from '@rainbow-me/rainbowkit/wallets'; + +braveWallet(); ``` #### Coinbase Wallet @@ -148,7 +157,6 @@ import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets'; coinbaseWallet(options: { appName: string; - chains: Chain[]; }); ``` @@ -159,7 +167,6 @@ import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets'; coin98Wallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -170,7 +177,6 @@ import { coreWallet } from '@rainbow-me/rainbowkit/wallets'; coreWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -179,18 +185,15 @@ coreWallet(options: { ```tsx import { dawnWallet } from '@rainbow-me/rainbowkit/wallets'; -dawnWallet(options: { - chains: Chain[]; -}); +dawnWallet(); ``` #### Enkrypt Wallet ```tsx import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets'; -enkryptWallet(options: { - chains: Chain[]; -}); + +enkryptWallet(); ``` #### FoxWallet @@ -200,7 +203,6 @@ import { foxWallet } from '@rainbow-me/rainbowkit/wallets'; foxWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -208,18 +210,17 @@ foxWallet(options: { ```tsx import { frameWallet } from '@rainbow-me/rainbowkit/wallets'; -frameWallet(options: { - chains: Chain[]; -}); + +frameWallet(); ``` #### Frontier Wallet ```tsx import { frontierWallet } from '@rainbow-me/rainbowkit/wallets'; + frontierWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -230,8 +231,6 @@ import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets'; ledgerWallet(options: { projectId: string; - chains: Chain[]; - infuraId?: string; }); ``` @@ -242,7 +241,6 @@ import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets'; imTokenWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -253,7 +251,6 @@ import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'; metaMaskWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -261,9 +258,8 @@ metaMaskWallet(options: { ```tsx import { mewWallet } from '@rainbow-me/rainbowkit/wallets'; -mewWallet(options: { - chains: Chain[]; -}); + +mewWallet(); ``` #### OKX Wallet @@ -273,7 +269,6 @@ import { okxWallet } from '@rainbow-me/rainbowkit/wallets'; okxWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -284,7 +279,6 @@ import { omniWallet } from '@rainbow-me/rainbowkit/wallets'; omniWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -293,9 +287,7 @@ omniWallet(options: { ```tsx import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets'; -oneKeyWallet(options: { - chains: Chain[]; -}); +oneKeyWallet(); ``` #### Phantom @@ -303,9 +295,7 @@ oneKeyWallet(options: { ```tsx import { phantomWallet } from '@rainbow-me/rainbowkit/wallets'; -phantomWallet(options: { - chains: Chain[]; -}); +phantomWallet(); ``` #### Rabby Wallet @@ -313,9 +303,7 @@ phantomWallet(options: { ```tsx import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets'; -rabbyWallet(options: { - chains: Chain[]; -}); +rabbyWallet(); ``` #### Rainbow @@ -325,18 +313,23 @@ import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets'; rainbowWallet(options: { projectId: string; - chains: Chain[]; }); ``` +#### Safe (Gnosis Safe) + +```tsx +import { safeWallet } from '@rainbow-me/rainbowkit/wallets'; + +safeWallet(); +``` + #### Safeheron ```tsx import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets'; -safeheronWallet(options: { - chains: Chain[]; -}); +safeheronWallet(); ``` #### Taho @@ -344,9 +337,7 @@ safeheronWallet(options: { ```tsx import { tahoWallet } from '@rainbow-me/rainbowkit/wallets'; -tahoWallet(options: { - chains: Chain[]; -}); +tahoWallet(); ``` #### Talisman @@ -354,9 +345,7 @@ tahoWallet(options: { ```tsx import { talismanWallet } from '@rainbow-me/rainbowkit/wallets'; -talismanWallet(options: { - chains: Chain[]; -}); +talismanWallet(); ``` #### Tokenary @@ -364,9 +353,7 @@ talismanWallet(options: { ```tsx import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets'; -tokenaryWallet(options: { - chains: Chain[]; -}); +tokenaryWallet(); ``` #### TokenPocket @@ -376,7 +363,6 @@ import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets'; tokenPocketWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -387,7 +373,6 @@ import { trustWallet } from '@rainbow-me/rainbowkit/wallets'; trustWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -398,7 +383,6 @@ import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets'; uniswapWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -407,9 +391,7 @@ uniswapWallet(options: { ```tsx import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets'; -xdefiWallet(options: { - chains: Chain[]; -}); +xdefiWallet(); ``` #### Zerion @@ -419,7 +401,6 @@ import { zerionWallet } from '@rainbow-me/rainbowkit/wallets'; zerionWallet(options: { projectId: string; - chains: Chain[]; }); ``` @@ -438,15 +419,15 @@ import { walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets'; -const connectors = connectorsForWallets([ - { - groupName: 'Recommended', - wallets: [ - metaMaskWallet({ projectId, chains }), - walletConnectWallet({ projectId, chains }), - ], - }, -]); +const connectors = connectorsForWallets( + [ + { + groupName: 'Recommended', + wallets: [metaMaskWallet, walletConnectWallet], + }, + ], + { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' }, +); ``` Show Rainbow, MetaMask and Coinbase along with generic fallback wallets. @@ -460,17 +441,20 @@ import { walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets'; -const connectors = connectorsForWallets([ - { - groupName: 'Suggested', - wallets: [ - rainbowWallet({ projectId, chains }), - metaMaskWallet({ projectId, chains }), - coinbaseWallet({ chains, appName: 'My RainbowKit App' }), - walletConnectWallet({ projectId, chains }), - ], - }, -]); +const connectors = connectorsForWallets( + [ + { + groupName: 'Suggested', + wallets: [ + rainbowWallet, + metaMaskWallet, + coinbaseWallet, + walletConnectWallet, + ], + }, + ], + { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' }, +); ``` > Reminder: The order of the `wallets` array defines the order in which wallets will be displayed in the UI. @@ -490,20 +474,17 @@ import { walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets'; -const connectors = connectorsForWallets([ - { - groupName: 'Recommended', - wallets: [ - rainbowWallet({ projectId, chains }), - metaMaskWallet({ projectId, chains }), - ], - }, - { - groupName: 'Others', - wallets: [ - coinbaseWallet({ chains, appName: 'My RainbowKit App' }), - walletConnectWallet({ projectId, chains }), - ], - }, -]); +const connectors = connectorsForWallets( + [ + { + groupName: 'Recommended', + wallets: [rainbowWallet, metaMaskWallet], + }, + { + groupName: 'Others', + wallets: [coinbaseWallet, walletConnectWallet], + }, + ], + { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' }, +); ``` diff --git a/site/data/en-US/docs/custom-wallets.mdx b/site/data/en-US/docs/custom-wallets.mdx index 4fb5a79223..40383bbf29 100644 --- a/site/data/en-US/docs/custom-wallets.mdx +++ b/site/data/en-US/docs/custom-wallets.mdx @@ -27,6 +27,12 @@ The `Wallet` function type is provided to help you define your own custom wallet type: 'string', description: 'Human-readable wallet name', }, + { + name: 'rdns', + required: false, + type: 'string', + description: 'RDNS for wallet which supports EIP6963', + }, { name: 'shortName', required: false, @@ -87,6 +93,44 @@ The `Wallet` function type is provided to help you define your own custom wallet description: 'Function for providing the connector instance and configuration for different connection methods, described below', }, + { + name: 'mobile', + required: false, + type: '{ getUri?: (uri: string) => string }', + typeSimple: 'object', + description: + 'Function for resolving a mobile wallet connection URI', + }, + { + name: 'desktop', + required: false, + type: '{ getUri?: (uri: string) => string }', + typeSimple: 'object', + description: 'Function for resolving a desktop app deep link', + }, + { + name: 'qrCode', + required: false, + type: "{ getUri: (uri: string) => string, instructions?: { learnMoreUrl: string, steps: Array<{ step: 'install' | 'create' | 'scan', title: string, description: string }> }}}", + typeSimple: 'object', + description: + 'Object containing a function for resolving the QR code URI, plus optional mobile wallet setup instructions', + }, + { + name: 'extension', + required: false, + type: "{ instructions?: { learnMoreUrl: string, steps: Array<{ step: 'install' | 'create' | 'scan', title: string, description: string }> }}}", + typeSimple: 'object', + description: + 'Object containing optional browser extension setup instructions', + }, + { + name: 'createConnector', + required: true, + type: "createConnector: (details: WalletDetailsParams) => CreateConnectorFn", + typeSimple: '(details: WalletDetailsParams) => CreateConnectorFn', + description: 'Function for providing the connector instance', + }, ]} /> @@ -160,66 +204,18 @@ The `Wallet` function type is provided to help you define your own custom wallet ]} /> -### RainbowKitConnector properties - -The following properties are defined on the return value of the `createConnector` function. - - Promise }', - typeSimple: 'object', - description: - 'Function for resolving a mobile wallet connection URI', - }, - { - name: 'desktop', - required: false, - type: '{ getUri?: () => Promise }', - typeSimple: 'object', - description: 'Function for resolving a desktop app deep link', - }, - { - name: 'qrCode', - required: false, - type: "{ getUri: () => Promise, instructions?: { learnMoreUrl: string, steps: Array<{ step: 'install' | 'create' | 'scan', title: string, description: string }> }}}", - typeSimple: 'object', - description: - 'Object containing a function for resolving the QR code URI, plus optional mobile wallet setup instructions', - }, - { - name: 'extension', - required: false, - type: "{ instructions?: { learnMoreUrl: string, steps: Array<{ step: 'install' | 'create' | 'scan', title: string, description: string }> }}}", - typeSimple: 'object', - description: - 'Object containing optional browser extension setup instructions', - }, - ]} -/> - ### Examples For example, to create a custom wallet using WalletConnect: ```tsx -import { - Chain, - Wallet, - getWalletConnectConnector, -} from '@rainbow-me/rainbowkit'; +import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit'; export interface MyWalletOptions { projectId: string; - chains: Chain[]; } -export const rainbow = ({ - chains, - projectId, -}: MyWalletOptions): Wallet => ({ +export const rainbow = ({ projectId }: MyWalletOptions): Wallet => ({ id: 'my-wallet', name: 'My Wallet', iconUrl: 'https://my-image.xyz', @@ -230,73 +226,55 @@ export const rainbow = ({ chrome: 'https://chrome.google.com/webstore/detail/my-wallet', qrCode: 'https://my-wallet/qr', }, - createConnector: () => { - const connector = getWalletConnectConnector({ projectId, chains }); - - return { - connector, - mobile: { - getUri: async () => { - const provider = await connector.getProvider(); - const uri = await new Promise(resolve => - provider.once('display_uri', resolve) - ); - return uri; + mobile: { + getUri: (uri: string) => uri, + }, + qrCode: { + getUri: (uri: string) => uri, + instructions: { + learnMoreUrl: 'https://my-wallet/learn-more', + steps: [ + { + description: + 'We recommend putting My Wallet on your home screen for faster access to your wallet.', + step: 'install', + title: 'Open the My Wallet app', }, - }, - qrCode: { - getUri: async () => { - const provider = await connector.getProvider(); - const uri = await new Promise(resolve => - provider.once('display_uri', resolve) - ); - return uri; + { + description: + 'After you scan, a connection prompt will appear for you to connect your wallet.', + step: 'scan', + title: 'Tap the scan button', }, - instructions: { - learnMoreUrl: 'https://my-wallet/learn-more', - steps: [ - { - description: - 'We recommend putting My Wallet on your home screen for faster access to your wallet.', - step: 'install', - title: 'Open the My Wallet app', - }, - { - description: - 'After you scan, a connection prompt will appear for you to connect your wallet.', - step: 'scan', - title: 'Tap the scan button', - }, - ], + ], + }, + }, + extension: { + instructions: { + learnMoreUrl: 'https://my-wallet/learn-more', + steps: [ + { + description: + 'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.', + step: 'install', + title: 'Install the My Wallet extension', }, - }, - extension: { - instructions: { - learnMoreUrl: 'https://my-wallet/learn-more', - steps: [ - { - description: - 'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.', - step: 'install', - title: 'Install the My Wallet extension', - }, - { - description: - 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.', - step: 'create', - title: 'Create or Import a Wallet', - }, - { - description: - 'Once you set up your wallet, click below to refresh the browser and load up the extension.', - step: 'refresh', - title: 'Refresh your browser', - }, - ], + { + description: + 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.', + step: 'create', + title: 'Create or Import a Wallet', }, - }, - }; + { + description: + 'Once you set up your wallet, click below to refresh the browser and load up the extension.', + step: 'refresh', + title: 'Refresh your browser', + }, + ], + }, }, + createConnector: getWalletConnectConnector({ projectId }), }); ``` diff --git a/site/data/en-US/docs/installation.mdx b/site/data/en-US/docs/installation.mdx index f1c93d69d8..49fe8f770f 100644 --- a/site/data/en-US/docs/installation.mdx +++ b/site/data/en-US/docs/installation.mdx @@ -25,26 +25,26 @@ Alternatively, you can manually integrate RainbowKit into your existing project. ### Manual setup -Install RainbowKit and its peer dependencies, [wagmi](https://wagmi.sh/) and [viem](https://viem.sh). +Install RainbowKit and its peer dependencies, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), and [@tanstack/react-query](https://tanstack.com/query/v5). ```bash -npm install @rainbow-me/rainbowkit wagmi@1 viem@1 +npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query ``` > Note: RainbowKit is a [React](https://reactjs.org/) library. #### Import -Import RainbowKit and wagmi. +Import RainbowKit, Wagmi and TanStack Query. ```tsx import '@rainbow-me/rainbowkit/styles.css'; import { - getDefaultWallets, + getDefaultConfig, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; +import { WagmiProvider } from 'wagmi'; import { mainnet, polygon, @@ -53,56 +53,46 @@ import { base, zora, } from 'wagmi/chains'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; +import { + QueryClientProvider, + QueryClient, +} from "@tanstack/react-query"; ``` #### Configure -Configure your desired chains and generate the required connectors. You will also need to setup a `wagmi` config. +Configure your desired chains and generate the required connectors. You will also need to setup a `wagmi` config. If your dApp uses server side rendering (SSR) make sure to set `ssr` to `true`. > Note: Every dApp that relies on WalletConnect now needs to obtain a `projectId` from [WalletConnect Cloud](https://cloud.walletconnect.com/). This is absolutely free and only takes a few minutes. ```tsx line=4-99 ... -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; - -const { chains, publicClient } = configureChains( - [mainnet, polygon, optimism, arbitrum, base, zora], - [ - alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), - publicProvider() - ] -); - -const { connectors } = getDefaultWallets({ +import { getDefaultConfig } from '@rainbow-me/rainbowkit'; + +const config = getDefaultConfig({ appName: 'My RainbowKit App', projectId: 'YOUR_PROJECT_ID', - chains + chains: [mainnet, polygon, optimism, arbitrum, base, zora], + ssr: true, // If your dApp uses server side rendering (SSR) }); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient -}) ``` -[Read more about configuring chains & providers with `wagmi`](https://wagmi.sh/docs/providers/configuring-chains). - #### Wrap providers -Wrap your application with `RainbowKitProvider` and [`WagmiConfig`](https://wagmi.sh/docs/provider). +Wrap your application with `RainbowKitProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), and [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider). ```tsx +const queryClient = new QueryClient(); + const App = () => { return ( - - - {/* Your App */} - - + + + + {/* Your App */} + + + ); }; ``` diff --git a/site/data/en-US/docs/introduction.mdx b/site/data/en-US/docs/introduction.mdx index 2066cc77a1..f78daf8d67 100644 --- a/site/data/en-US/docs/introduction.mdx +++ b/site/data/en-US/docs/introduction.mdx @@ -7,7 +7,7 @@ description: The best way to connect a wallet 🌈 ## The best way to connect a wallet 🌈 -