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/examples/with-create-react-app/package.json b/examples/with-create-react-app/package.json index fe499dccc5..f9ff1dca86 100644 --- a/examples/with-create-react-app/package.json +++ b/examples/with-create-react-app/package.json @@ -15,8 +15,9 @@ "react": "^18.2.0", "typescript": "^5.0.4", "util": "0.12.4", - "viem": "~1.21.4", - "wagmi": "~1.4.13", + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1", "web-vitals": "^2.1.4", "buffer": "npm:buffer@6.0.3" }, @@ -45,4 +46,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/examples/with-create-react-app/src/index.tsx b/examples/with-create-react-app/src/index.tsx index a826756332..b29625285c 100644 --- a/examples/with-create-react-app/src/index.tsx +++ b/examples/with-create-react-app/src/index.tsx @@ -1,13 +1,11 @@ +import '@rainbow-me/rainbowkit/styles.css'; import './polyfills'; import './index.css'; -import '@rainbow-me/rainbowkit/styles.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; import reportWebVitals from './reportWebVitals'; - -import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -19,9 +17,12 @@ import { } from 'wagmi/chains'; import App from './App'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + chains: [ mainnet, polygon, optimism, @@ -30,33 +31,23 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.REACT_APP_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const { connectors } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId: 'YOUR_PROJECT_ID', - chains, -}); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, }); const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); +const queryClient = new QueryClient(); + root.render( - - - - - + + + + + + + ); diff --git a/examples/with-next-app-i18n/app/[locale]/providers.tsx b/examples/with-next-app-i18n/app/[locale]/providers.tsx index 2781cecbd1..031772e3ab 100644 --- a/examples/with-next-app-i18n/app/[locale]/providers.tsx +++ b/examples/with-next-app-i18n/app/[locale]/providers.tsx @@ -4,16 +4,15 @@ import * as React from 'react'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, Locale, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -23,9 +22,14 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + chains: [ mainnet, polygon, optimism, @@ -34,51 +38,30 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + ssr: true, }); -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); -export function Providers( - { children, locale }: - { children: React.ReactNode, locale: Locale } -) { - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => setMounted(true), []); +export function Providers({ + children, + locale, +}: { + children: React.ReactNode; + locale: Locale; +}) { return ( - - - {mounted && children} - - + + + {children} + + ); } diff --git a/examples/with-next-app-i18n/package.json b/examples/with-next-app-i18n/package.json index c4449153ea..b473635251 100644 --- a/examples/with-next-app-i18n/package.json +++ b/examples/with-next-app-i18n/package.json @@ -14,8 +14,9 @@ "next-intl": "^2.20.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -28,4 +29,4 @@ "engines": { "node": ">=16.8.0" } -} \ No newline at end of file +} diff --git a/examples/with-next-app/app/providers.tsx b/examples/with-next-app/app/providers.tsx index 8287b075f0..d9d0cc3434 100644 --- a/examples/with-next-app/app/providers.tsx +++ b/examples/with-next-app/app/providers.tsx @@ -4,15 +4,13 @@ import * as React from 'react'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; import { arbitrum, base, @@ -22,9 +20,22 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + chains: [ mainnet, polygon, optimism, @@ -33,48 +44,17 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, + ssr: true, }); -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); export function Providers({ children }: { children: React.ReactNode }) { - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => setMounted(true), []); return ( - - - {mounted && children} - - + + + {children} + + ); } diff --git a/examples/with-next-app/package.json b/examples/with-next-app/package.json index 6395bb5c04..cf7dcd77c5 100644 --- a/examples/with-next-app/package.json +++ b/examples/with-next-app/package.json @@ -13,8 +13,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -27,4 +28,4 @@ "engines": { "node": ">=16.8.0" } -} \ No newline at end of file +} diff --git a/examples/with-next-custom-button/package.json b/examples/with-next-custom-button/package.json index be70f280a3..fc22e7506d 100644 --- a/examples/with-next-custom-button/package.json +++ b/examples/with-next-custom-button/package.json @@ -13,8 +13,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -23,4 +24,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/examples/with-next-custom-button/pages/_app.tsx b/examples/with-next-custom-button/pages/_app.tsx index 0b6568f43a..5a3d460987 100644 --- a/examples/with-next-custom-button/pages/_app.tsx +++ b/examples/with-next-custom-button/pages/_app.tsx @@ -5,15 +5,14 @@ import type { AppProps } from 'next/app'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -23,9 +22,21 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + chains: [ mainnet, polygon, optimism, @@ -34,47 +45,20 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, + ssr: true, }); -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/examples/with-next-mint-nft/package.json b/examples/with-next-mint-nft/package.json index d1f75838d9..6b5f1911c1 100644 --- a/examples/with-next-mint-nft/package.json +++ b/examples/with-next-mint-nft/package.json @@ -14,8 +14,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -24,4 +25,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/examples/with-next-mint-nft/pages/_app.tsx b/examples/with-next-mint-nft/pages/_app.tsx index d1ff715e70..af929773bc 100644 --- a/examples/with-next-mint-nft/pages/_app.tsx +++ b/examples/with-next-mint-nft/pages/_app.tsx @@ -5,17 +5,16 @@ import type { AppProps } from 'next/app'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, + getDefaultConfig, + Chain, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet } from '@rainbow-me/rainbowkit/wallets'; -import { createConfig, configureChains, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; -import { Chain } from 'wagmi/chains'; +import { WagmiProvider } from 'wagmi'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const rinkeby: Chain = { id: 4, name: 'Rinkeby', - network: 'rinkeby', nativeCurrency: { name: 'Rinkeby Ether', symbol: 'ETH', decimals: 18 }, rpcUrls: { alchemy: { http: ['https://eth-rinkeby.alchemyapi.io/v2'] }, @@ -39,48 +38,33 @@ const rinkeby: Chain = { testnet: true, }; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [rinkeby], - [publicProvider()] -); +const { wallets } = getDefaultWallets(); -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit Mint NFT Demo', - projectId, - chains, +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet], + }, + ], + chains: [rinkeby], + ssr: true, }); -const demoAppInfo = { - appName: 'RainbowKit Mint NFT Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/examples/with-next-mint-nft/pages/index.tsx b/examples/with-next-mint-nft/pages/index.tsx index 59872e0fd9..0e9077d49c 100644 --- a/examples/with-next-mint-nft/pages/index.tsx +++ b/examples/with-next-mint-nft/pages/index.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import Image from 'next/legacy/image'; +import Image from 'next/image'; import { ConnectButton } from '@rainbow-me/rainbowkit'; import type { NextPage } from 'next'; import { useAccount, - useContractRead, - useContractWrite, - usePrepareContractWrite, - useWaitForTransaction, + useReadContract, + useWaitForTransactionReceipt, + useWriteContract, } from 'wagmi'; import { abi } from '../contract-abi'; import FlipCard, { BackCard, FrontCard } from '../components/FlipCard'; @@ -24,31 +23,28 @@ const Home: NextPage = () => { const [totalMinted, setTotalMinted] = React.useState(0n); const { isConnected } = useAccount(); - const { config: contractWriteConfig } = usePrepareContractWrite({ - ...contractConfig, - functionName: 'mint', - }); - const { - data: mintData, - write: mint, - isLoading: isMintLoading, + data: hash, + writeContract: mint, + isPending: isMintLoading, isSuccess: isMintStarted, error: mintError, - } = useContractWrite(contractWriteConfig); + } = useWriteContract(); - const { data: totalSupplyData } = useContractRead({ + const { data: totalSupplyData } = useReadContract({ ...contractConfig, functionName: 'totalSupply', - watch: true, }); const { data: txData, isSuccess: txSuccess, error: txError, - } = useWaitForTransaction({ - hash: mintData?.hash, + } = useWaitForTransactionReceipt({ + hash, + query: { + enabled: !!hash, + }, }); React.useEffect(() => { @@ -88,7 +84,12 @@ const Home: NextPage = () => { className="button" data-mint-loading={isMintLoading} data-mint-started={isMintStarted} - onClick={() => mint?.()} + onClick={() => + mint?.({ + ...contractConfig, + functionName: 'mint', + }) + } > {isMintLoading && 'Waiting for approval'} {isMintStarted && 'Minting...'} @@ -126,7 +127,7 @@ const Home: NextPage = () => {

View on{' '} - + Etherscan

diff --git a/examples/with-next-rainbow-button/package.json b/examples/with-next-rainbow-button/package.json index 10749a6a69..e13d1d9f8d 100644 --- a/examples/with-next-rainbow-button/package.json +++ b/examples/with-next-rainbow-button/package.json @@ -13,8 +13,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", diff --git a/examples/with-next-rainbow-button/pages/_app.tsx b/examples/with-next-rainbow-button/pages/_app.tsx index 62bd5dc679..475ff7f46d 100644 --- a/examples/with-next-rainbow-button/pages/_app.tsx +++ b/examples/with-next-rainbow-button/pages/_app.tsx @@ -1,33 +1,39 @@ -import "../styles/global.css"; -import "@rainbow-me/rainbow-button/styles.css"; -import type { AppProps } from "next/app"; -import { configureChains, createConfig, WagmiConfig } from "wagmi"; -import { mainnet } from "wagmi/chains"; -import { publicProvider } from "wagmi/providers/public"; -import { RainbowButtonProvider, RainbowConnector } from "@rainbow-me/rainbow-button"; - -const { chains, publicClient, webSocketPublicClient } = configureChains( - [mainnet], - [publicProvider()] -); - -const projectId = "YOUR_PROJECT_ID"; +import '../styles/global.css'; +import '@rainbow-me/rainbow-button/styles.css'; +import type { AppProps } from 'next/app'; +import { createConfig, http, WagmiProvider } from 'wagmi'; +import { mainnet } from 'wagmi/chains'; +import { + RainbowButtonProvider, + rainbowConnector, +} from '@rainbow-me/rainbow-button'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const config = createConfig({ - autoConnect: true, - // @ts-ignore - TODO: resolve wagmi/viem issue - connectors: [new RainbowConnector({ chains, projectId })], - publicClient, - webSocketPublicClient, + connectors: [ + rainbowConnector({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + }), + ], + chains: [mainnet], + transports: { + [mainnet.id]: http(), + }, + ssr: true, }); +const queryClient = new QueryClient(); + function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/examples/with-next-rainbow-button/pages/index.tsx b/examples/with-next-rainbow-button/pages/index.tsx index 921b4e603b..92cb9c5fe6 100644 --- a/examples/with-next-rainbow-button/pages/index.tsx +++ b/examples/with-next-rainbow-button/pages/index.tsx @@ -1,16 +1,11 @@ - -import type { NextPage } from "next"; -import { useEffect, useState } from "react"; -import { useAccount, useDisconnect } from "wagmi"; -import { RainbowButton } from "@rainbow-me/rainbow-button"; +import type { NextPage } from 'next'; +import { useAccount, useDisconnect } from 'wagmi'; +import { RainbowButton } from '@rainbow-me/rainbow-button'; const Home: NextPage = () => { const { isConnected } = useAccount(); const { disconnect } = useDisconnect(); - const [isMounted, setIsMounted] = useState(false); - useEffect(() => setIsMounted(true), []); - return (
{ }} > - {isMounted && isConnected && } + {isConnected && }
- ) + ); }; export default Home; diff --git a/examples/with-next-siwe-iron-session/package.json b/examples/with-next-siwe-iron-session/package.json index e56f4f3eda..930fb19852 100644 --- a/examples/with-next-siwe-iron-session/package.json +++ b/examples/with-next-siwe-iron-session/package.json @@ -16,8 +16,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "siwe": "^2.1.4", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -26,4 +27,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/examples/with-next-siwe-iron-session/pages/_app.tsx b/examples/with-next-siwe-iron-session/pages/_app.tsx index 269a6a5d50..04f30df7f3 100644 --- a/examples/with-next-siwe-iron-session/pages/_app.tsx +++ b/examples/with-next-siwe-iron-session/pages/_app.tsx @@ -8,18 +8,17 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, createAuthenticationAdapter, RainbowKitAuthenticationProvider, AuthenticationStatus, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -30,9 +29,21 @@ import { zora, } from 'wagmi/chains'; import { SiweMessage } from 'siwe'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + chains: [ mainnet, polygon, optimism, @@ -41,39 +52,10 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, + ssr: true, }); -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { const fetchingStatusRef = useRef(false); @@ -163,15 +145,17 @@ export default function App({ Component, pageProps }: AppProps) { }, []); return ( - - - - - - - + + + + + + + + + ); } diff --git a/examples/with-next-siwe-next-auth/package.json b/examples/with-next-siwe-next-auth/package.json index 503e8473d0..de87815735 100644 --- a/examples/with-next-siwe-next-auth/package.json +++ b/examples/with-next-siwe-next-auth/package.json @@ -17,8 +17,9 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "siwe": "^2.1.4", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -27,4 +28,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/examples/with-next-siwe-next-auth/pages/_app.tsx b/examples/with-next-siwe-next-auth/pages/_app.tsx index 74e93be032..b2423987cf 100644 --- a/examples/with-next-siwe-next-auth/pages/_app.tsx +++ b/examples/with-next-siwe-next-auth/pages/_app.tsx @@ -5,15 +5,14 @@ import type { AppProps } from 'next/app'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -30,9 +29,21 @@ import { RainbowKitSiweNextAuthProvider, GetSiweMessageOptions, } from '@rainbow-me/rainbowkit-siwe-next-auth'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + chains: [ mainnet, polygon, optimism, @@ -41,44 +52,15 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, -}); - -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, + ssr: true, }); const getSiweMessageOptions: GetSiweMessageOptions = () => ({ statement: 'Sign in to the RainbowKit + SIWE example app', }); +const queryClient = new QueryClient(); + export default function App({ Component, pageProps, @@ -87,15 +69,17 @@ export default function App({ }>) { return ( - - - - - - - + + + + + + + + + ); } diff --git a/examples/with-next-wallet-button/package.json b/examples/with-next-wallet-button/package.json index 89135e907e..d871702e4d 100644 --- a/examples/with-next-wallet-button/package.json +++ b/examples/with-next-wallet-button/package.json @@ -13,8 +13,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", diff --git a/examples/with-next-wallet-button/pages/_app.tsx b/examples/with-next-wallet-button/pages/_app.tsx index e7292946c1..4be145d3c7 100644 --- a/examples/with-next-wallet-button/pages/_app.tsx +++ b/examples/with-next-wallet-button/pages/_app.tsx @@ -1,51 +1,57 @@ -import "../styles/global.css"; -import "@rainbow-me/rainbowkit/styles.css"; -import type { AppProps } from "next/app"; -import { configureChains, createConfig, WagmiConfig } from "wagmi"; -import { mainnet } from "wagmi/chains"; -import { publicProvider } from "wagmi/providers/public"; -import { RainbowKitProvider } from "@rainbow-me/rainbowkit"; -import { connectorsForWallets } from "@rainbow-me/rainbowkit"; -import { metaMaskWallet, rainbowWallet } from "@rainbow-me/rainbowkit/wallets"; -import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet"; -import { WalletConnectConnector } from "wagmi/connectors/walletConnect"; +import '../styles/global.css'; +import '@rainbow-me/rainbowkit/styles.css'; +import type { AppProps } from 'next/app'; +import { createConfig, http, WagmiProvider } from 'wagmi'; +import { + connectorsForWallets, + RainbowKitProvider, +} from '@rainbow-me/rainbowkit'; +import { coinbaseWallet, walletConnect } from 'wagmi/connectors'; +import { mainnet } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { metaMaskWallet, rainbowWallet } from '@rainbow-me/rainbowkit/wallets'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [mainnet], - [publicProvider()] -); +const projectId = 'YOUR_PROJECT_ID'; -const projectId = "YOUR_PROJECT_ID"; +const appName = 'RainbowKit demo'; -const connectors = connectorsForWallets([ - rainbowWallet({ projectId, chains }), - metaMaskWallet({ projectId, chains }), -]); +const connectors = connectorsForWallets( + [{ groupName: 'Popular', wallets: [metaMaskWallet, rainbowWallet] }], + { + projectId, + appName, + }, +); const config = createConfig({ - autoConnect: true, connectors: [ ...connectors, - new CoinbaseWalletConnector({ - options: { - appName: 'RainbowKit Example', - }, + coinbaseWallet({ + appName, + }), + walletConnect({ + projectId, }), - new WalletConnectConnector({ - options: { projectId }, - }) ], - publicClient, - webSocketPublicClient, + chains: [mainnet], + transports: { + [mainnet.id]: http(), + }, + multiInjectedProviderDiscovery: false, + ssr: true, }); +const queryClient = new QueryClient(); + function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/examples/with-next-wallet-button/pages/index.tsx b/examples/with-next-wallet-button/pages/index.tsx index 7f12c987c5..d6ee5d9cfa 100644 --- a/examples/with-next-wallet-button/pages/index.tsx +++ b/examples/with-next-wallet-button/pages/index.tsx @@ -1,18 +1,13 @@ import type { NextPage } from "next"; -import { useEffect, useState } from "react"; import { useAccount, useConnect, useDisconnect } from "wagmi"; import { WalletButton } from "@rainbow-me/rainbowkit"; const Home: NextPage = () => { const { isConnected } = useAccount(); const { disconnect } = useDisconnect(); - const { connectors, connect } = useConnect(); const wagmiConnectors = connectors.slice(2); - const [isMounted, setIsMounted] = useState(false); - useEffect(() => setIsMounted(true), []); - return (
{ display: "flex", alignItems: "center", flexDirection: "column", - gap: 14 + gap: 14, }} > - + + {({ ready, connect, connector }) => { return ( - ); }} - {isMounted && wagmiConnectors.map((connector) => ( - ))} - {isMounted && isConnected && ( - + + {isConnected && ( + )}
diff --git a/examples/with-next/package.json b/examples/with-next/package.json index d3c3737ba0..e394d35b03 100644 --- a/examples/with-next/package.json +++ b/examples/with-next/package.json @@ -13,8 +13,9 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/node": "^18.19.3", @@ -23,4 +24,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/examples/with-next/pages/_app.tsx b/examples/with-next/pages/_app.tsx index 3f60dfbd7c..f5bd59c6db 100644 --- a/examples/with-next/pages/_app.tsx +++ b/examples/with-next/pages/_app.tsx @@ -6,16 +6,15 @@ import { useRouter } from 'next/router'; import { RainbowKitProvider, getDefaultWallets, - connectorsForWallets, Locale, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; import { argentWallet, trustWallet, ledgerWallet, } from '@rainbow-me/rainbowkit/wallets'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -25,9 +24,21 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const { wallets } = getDefaultWallets(); + +const config = getDefaultConfig({ + appName: 'RainbowKit demo', + projectId: 'YOUR_PROJECT_ID', + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [argentWallet, trustWallet, ledgerWallet], + }, + ], + chains: [ mainnet, polygon, optimism, @@ -36,48 +47,21 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const projectId = 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - projectId, - chains, + ssr: true, }); -const demoAppInfo = { - appName: 'Rainbowkit Demo', -}; - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ projectId, chains }), - trustWallet({ projectId, chains }), - ledgerWallet({ projectId, chains }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const queryClient = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { const { locale } = useRouter() as { locale: Locale }; return ( - - - - - + + + + + + + ); } diff --git a/examples/with-remix/app/root.tsx b/examples/with-remix/app/root.tsx index ef56547352..825a00a6da 100644 --- a/examples/with-remix/app/root.tsx +++ b/examples/with-remix/app/root.tsx @@ -18,11 +18,10 @@ import type { import { RainbowKitProvider, ConnectButton, - getDefaultWallets, + getDefaultConfig, } from '@rainbow-me/rainbowkit'; -import type { Chain } from 'wagmi'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { WagmiProvider } from 'wagmi'; +import type { Chain } from 'wagmi/chains'; import { arbitrum, base, @@ -35,6 +34,7 @@ import { import globalStylesUrl from './styles/global.css'; import rainbowStylesUrl from '@rainbow-me/rainbowkit/styles.css'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; type Env = { PUBLIC_ENABLE_TESTNETS?: string }; @@ -63,6 +63,8 @@ export const loader: LoaderFunction = () => { return json(data); }; +const queryClient = new QueryClient(); + export default function App() { const { ENV } = useLoaderData(); @@ -73,21 +75,21 @@ export default function App() { const [{ config, chains }] = useState(() => { const testChains = ENV.PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []; - const { chains, publicClient } = configureChains( - [mainnet, polygon, optimism, arbitrum, base, zora, ...testChains], - [publicProvider()] - ); + const chains: readonly [Chain, ...Chain[]] = [ + mainnet, + polygon, + optimism, + arbitrum, + base, + zora, + ...testChains, + ]; - const { connectors } = getDefaultWallets({ + const config = getDefaultConfig({ appName: 'RainbowKit Remix Example', projectId: 'YOUR_PROJECT_ID', chains, - }); - - const config = createConfig({ - autoConnect: true, - connectors, - publicClient, + ssr: true, }); return { @@ -104,20 +106,22 @@ export default function App() { {config && chains ? ( - - -
- -
- - - + + + +
+ +
+ + + + ) : null} diff --git a/examples/with-remix/package.json b/examples/with-remix/package.json index 8d7b5a7f13..571cd8ceda 100644 --- a/examples/with-remix/package.json +++ b/examples/with-remix/package.json @@ -17,8 +17,9 @@ "buffer-polyfill": "npm:buffer@^6.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@remix-run/dev": "^1.5.1", @@ -32,4 +33,4 @@ "node": ">=14" }, "version": "0.0.78" -} \ No newline at end of file +} diff --git a/examples/with-vite/package.json b/examples/with-vite/package.json index f11cc2d1d6..88496a4b47 100644 --- a/examples/with-vite/package.json +++ b/examples/with-vite/package.json @@ -13,8 +13,9 @@ "buffer": "^6.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5", + "@tanstack/react-query": "^5.18.1" }, "devDependencies": { "@types/react": "^18.2.43", @@ -23,4 +24,4 @@ "typescript": "^5.0.4", "vite": "^5.0.7" } -} \ No newline at end of file +} diff --git a/examples/with-vite/src/main.tsx b/examples/with-vite/src/main.tsx index 4eda6e6476..e20d6ee5a8 100644 --- a/examples/with-vite/src/main.tsx +++ b/examples/with-vite/src/main.tsx @@ -5,41 +5,27 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; -import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; -import { - arbitrum, - base, - mainnet, - optimism, - polygon, - zora, -} from 'wagmi/chains'; +import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { WagmiProvider } from 'wagmi'; +import { arbitrum, base, mainnet, optimism, polygon, zora } from 'wagmi/chains'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -const { chains, publicClient } = configureChains( - [mainnet, polygon, optimism, arbitrum, base, zora], - [publicProvider()] -); - -const { connectors } = getDefaultWallets({ +const config = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', - chains, + chains: [mainnet, polygon, optimism, arbitrum, base, zora], }); -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, -}); +const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - - + + + + + + + + , ); diff --git a/package.json b/package.json index 0b625e4ee3..32e7367a03 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "changeset": "changeset", "clean": "rm -rf ./packages/rainbowkit/dist && rm -rf ./packages/rainbowkit-siwe-next-auth/dist && rm -rf ./packages/rainbow-button/dist && rm -rf ./packages/create-rainbowkit/dist && rm -rf ./packages/rainbowkit/node_modules && pnpm install", "clean:untracked": "git clean -fxd && pnpm install", - "release": "pnpm release:verify-git && pnpm release:build && changeset publish", + "release": "pnpm release:verify-git && pnpm release:build && changeset publish --tag main", "release:verify-git": "git diff --exit-code && git rev-parse --abbrev-ref HEAD | grep \"main\"", "release:build": "pnpm clean && pnpm lint && pnpm test && MINIFY_CSS=true pnpm --recursive --parallel --filter \"!*-app\" build && cp README.md packages/rainbowkit/README.md", "release:test": "pnpm release:build && pnpm --filter example dev", @@ -43,11 +43,10 @@ "devDependencies": { "@biomejs/biome": "1.4.1", "@changesets/cli": "2.27.1", + "@tanstack/react-query": "^5.18.1", "@commitlint/cli": "^18.4.3", "@commitlint/config-conventional": "^18.4.3", "@lavamoat/preinstall-always-fail": "^2.0.0", - "@tanstack/query-core": "^4.28.0", - "@tanstack/react-query": "^4.28.0", "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", @@ -56,7 +55,6 @@ "@types/react-dom": "^18.2.17", "@vanilla-extract/esbuild-plugin": "^2.3.1", "@vanilla-extract/vite-plugin": "^3.9.3", - "@wagmi/core": "~1.4.13", "autoprefixer": "^10.4.16", "esbuild": "^0.14.39", "esbuild-plugin-replace": "^1.4.0", @@ -73,14 +71,14 @@ "react-dom": "^18.2.0", "recursive-readdir-files": "^2.3.1", "typescript": "^5.0.4", - "viem": "~1.21.4", + "viem": "^2.7.3", "vitest": "^0.33.0", - "wagmi": "~1.4.13" + "wagmi": "^2.5.5" }, - "packageManager": "pnpm@8.14.0", + "packageManager": "pnpm@8.14.1", "pnpm": { "onlyBuiltDependencies": [ "esbuild" ] } -} \ No newline at end of file +} diff --git a/packages/create-rainbowkit/generated-test-app/package.json b/packages/create-rainbowkit/generated-test-app/package.json index 832e5dd776..16eedbac7f 100644 --- a/packages/create-rainbowkit/generated-test-app/package.json +++ b/packages/create-rainbowkit/generated-test-app/package.json @@ -10,11 +10,12 @@ }, "dependencies": { "@rainbow-me/rainbowkit": "workspace:*", + "@tanstack/react-query": "^5.18.1", "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5" }, "devDependencies": { "@types/node": "^18.19.3", diff --git a/packages/create-rainbowkit/generated-test-app/pages/_app.tsx b/packages/create-rainbowkit/generated-test-app/pages/_app.tsx index ad8f05fd86..54436fbaff 100644 --- a/packages/create-rainbowkit/generated-test-app/pages/_app.tsx +++ b/packages/create-rainbowkit/generated-test-app/pages/_app.tsx @@ -2,9 +2,8 @@ import '../styles/globals.css'; import '@rainbow-me/rainbowkit/styles.css'; import type { AppProps } from 'next/app'; -import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -14,9 +13,12 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const config = getDefaultConfig({ + appName: 'RainbowKit App', + projectId: 'YOUR_PROJECT_ID', + chains: [ mainnet, polygon, optimism, @@ -25,29 +27,20 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const { connectors } = getDefaultWallets({ - appName: 'RainbowKit App', - projectId: 'YOUR_PROJECT_ID', - chains, + ssr: true, }); -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const client = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/packages/create-rainbowkit/package.json b/packages/create-rainbowkit/package.json index 94962ed8f0..8f160ece65 100644 --- a/packages/create-rainbowkit/package.json +++ b/packages/create-rainbowkit/package.json @@ -1,7 +1,7 @@ { "name": "@rainbow-me/create-rainbowkit", "description": "Scaffold a new RainbowKit project", - "version": "0.2.11", + "version": "0.3.0-beta.6", "files": [ "dist", "templates" diff --git a/packages/create-rainbowkit/templates/next-app/package.json b/packages/create-rainbowkit/templates/next-app/package.json index cd44072dda..b8daf6f79e 100644 --- a/packages/create-rainbowkit/templates/next-app/package.json +++ b/packages/create-rainbowkit/templates/next-app/package.json @@ -10,11 +10,12 @@ }, "dependencies": { "@rainbow-me/rainbowkit": "workspace:*", + "@tanstack/react-query": "^5.18.1", "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5" }, "devDependencies": { "@types/node": "^18.19.3", @@ -23,4 +24,4 @@ "eslint-config-next": "^14.0.4", "typescript": "^5.0.4" } -} \ No newline at end of file +} diff --git a/packages/create-rainbowkit/templates/next-app/pages/_app.tsx b/packages/create-rainbowkit/templates/next-app/pages/_app.tsx index ad8f05fd86..54436fbaff 100644 --- a/packages/create-rainbowkit/templates/next-app/pages/_app.tsx +++ b/packages/create-rainbowkit/templates/next-app/pages/_app.tsx @@ -2,9 +2,8 @@ import '../styles/globals.css'; import '@rainbow-me/rainbowkit/styles.css'; import type { AppProps } from 'next/app'; -import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -import { configureChains, createConfig, WagmiConfig } from 'wagmi'; -import { publicProvider } from 'wagmi/providers/public'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; import { arbitrum, base, @@ -14,9 +13,12 @@ import { sepolia, zora, } from 'wagmi/chains'; +import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const config = getDefaultConfig({ + appName: 'RainbowKit App', + projectId: 'YOUR_PROJECT_ID', + chains: [ mainnet, polygon, optimism, @@ -25,29 +27,20 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []), ], - [publicProvider()] -); - -const { connectors } = getDefaultWallets({ - appName: 'RainbowKit App', - projectId: 'YOUR_PROJECT_ID', - chains, + ssr: true, }); -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, -}); +const client = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { return ( - - - - - + + + + + + + ); } diff --git a/packages/create-rainbowkit/tsconfig.json b/packages/create-rainbowkit/tsconfig.json index 916c2687d7..249b419276 100644 --- a/packages/create-rainbowkit/tsconfig.json +++ b/packages/create-rainbowkit/tsconfig.json @@ -1,10 +1,10 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "preserveSymlinks": true, "target": "ES2020", + "preserveSymlinks": false, "outDir": "dist" }, "include": ["src", "templates"], "exclude": ["node_modules"], -} +} \ No newline at end of file diff --git a/packages/example/package.json b/packages/example/package.json index 2b2b66ded6..a8ba0b5506 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -8,14 +8,15 @@ "@rainbow-me/rainbowkit": "workspace:*", "@rainbow-me/rainbowkit-siwe-next-auth": "workspace:*", "@rainbow-me/rainbow-button": "workspace:*", + "@tanstack/react-query": "^5.18.1", "ethers": "^5.6.8", "next": "^14.0.4", "next-auth": "4.24.5", "react": "^18.2.0", "react-dom": "^18.2.0", "siwe": "^2.1.4", - "viem": "~1.21.4", - "wagmi": "~1.4.13" + "viem": "^2.7.3", + "wagmi": "^2.5.5" }, "scripts": { "dev": "next dev", @@ -25,4 +26,4 @@ "keywords": [], "author": "", "license": "ISC" -} \ No newline at end of file +} diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index 17868121f3..36dccea964 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -3,11 +3,12 @@ import './global.css'; import { AvatarComponent, + type Chain, DisclaimerComponent, Locale, RainbowKitProvider, - connectorsForWallets, darkTheme, + getDefaultConfig, getDefaultWallets, lightTheme, midnightTheme, @@ -53,18 +54,14 @@ import { zerionWallet, } from '@rainbow-me/rainbowkit/wallets'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { Session } from 'next-auth'; import { SessionProvider, signOut } from 'next-auth/react'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; -import { - WagmiConfig, - configureChains, - createConfig, - useDisconnect, -} from 'wagmi'; +import { useEffect, useState } from 'react'; +import { WagmiProvider, useDisconnect } from 'wagmi'; import { arbitrum, arbitrumSepolia, @@ -83,14 +80,40 @@ import { zora, zoraSepolia, } from 'wagmi/chains'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; + import { AppContextProps } from '../lib/AppContextProps'; const RAINBOW_TERMS = 'https://rainbow.me/terms-of-use'; -const { chains, publicClient, webSocketPublicClient } = configureChains( - [ +const projectId = + process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? 'YOUR_PROJECT_ID'; + +const { wallets } = getDefaultWallets(); + +const avalanche = { + id: 43_114, + name: 'Avalanche', + iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', + iconBackground: '#fff', + nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 }, + rpcUrls: { + default: { http: ['https://api.avax.network/ext/bc/C/rpc'] }, + }, + blockExplorers: { + default: { name: 'SnowTrace', url: 'https://snowtrace.io' }, + }, + contracts: { + multicall3: { + address: '0xca11bde05977b3631167028862be2a173976ca11', + blockCreated: 11_907_934, + }, + }, +} as const satisfies Chain; + +const config = getDefaultConfig({ + appName: 'RainbowKit Demo', + projectId, + chains: [ mainnet, polygon, optimism, @@ -99,6 +122,7 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( zora, bsc, zkSync, + avalanche, ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [ goerli, @@ -112,69 +136,49 @@ const { chains, publicClient, webSocketPublicClient } = configureChains( ] : []), ], - [ - alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_ID ?? '' }), - publicProvider(), + wallets: [ + ...wallets, + { + groupName: 'Other', + wallets: [ + argentWallet, + bifrostWallet, + bitgetWallet, + bitskiWallet, + clvWallet, + coin98Wallet, + coreWallet, + dawnWallet, + desigWallet, + enkryptWallet, + foxWallet, + frameWallet, + frontierWallet, + imTokenWallet, + ledgerWallet, + mewWallet, + oktoWallet, + okxWallet, + omniWallet, + oneKeyWallet, + phantomWallet, + rabbyWallet, + safeheronWallet, + safepalWallet, + subWallet, + tahoWallet, + talismanWallet, + tokenPocketWallet, + tokenaryWallet, + trustWallet, + uniswapWallet, + xdefiWallet, + zealWallet, + zerionWallet, + ], + }, ], -); - -const projectId = - process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? 'YOUR_PROJECT_ID'; - -const { wallets } = getDefaultWallets({ - appName: 'RainbowKit demo', - chains, - projectId, -}); - -const connectors = connectorsForWallets([ - ...wallets, - { - groupName: 'Other', - wallets: [ - argentWallet({ chains, projectId }), - bifrostWallet({ chains, projectId }), - bitgetWallet({ chains, projectId }), - bitskiWallet({ chains }), - clvWallet({ chains, projectId }), - coin98Wallet({ chains, projectId }), - coreWallet({ chains, projectId }), - dawnWallet({ chains }), - desigWallet({ chains }), - enkryptWallet({ chains }), - foxWallet({ chains, projectId }), - frameWallet({ chains }), - frontierWallet({ chains, projectId }), - imTokenWallet({ chains, projectId }), - ledgerWallet({ chains, projectId }), - mewWallet({ chains }), - oktoWallet({ chains, projectId }), - okxWallet({ chains, projectId }), - omniWallet({ chains, projectId }), - oneKeyWallet({ chains }), - phantomWallet({ chains }), - rabbyWallet({ chains }), - safeheronWallet({ chains }), - safepalWallet({ chains, projectId }), - subWallet({ chains, projectId }), - tahoWallet({ chains }), - talismanWallet({ chains }), - tokenaryWallet({ chains }), - tokenPocketWallet({ chains, projectId }), - trustWallet({ chains, projectId }), - uniswapWallet({ chains, projectId }), - xdefiWallet({ chains }), - zealWallet({ chains }), - zerionWallet({ chains, projectId }), - ], - }, -]); - -const wagmiConfig = createConfig({ - autoConnect: true, - connectors, - publicClient, - webSocketPublicClient, + ssr: true, }); const demoAppInfo = { @@ -308,7 +312,6 @@ function RainbowKitApp({ ...(showDisclaimer && { disclaimer: DisclaimerDemo }), }} avatar={customAvatar ? CustomAvatar : undefined} - chains={chains} locale={locale} coolMode={coolModeEnabled} initialChain={selectedInitialChainId} @@ -479,7 +482,7 @@ function RainbowKitApp({ } value={selectedInitialChainId ?? 'default'} > - {[undefined, ...chains].map((chain) => ( + {[undefined, ...config.chains].map((chain) => (