chore: update viem and wagmi to latest version (#1) (#3)

chore: wagmi, rainbowkit, viem updates

tests: rainbokit 2.x breaking changes updates

fix: injected wallet for empty projectId logic

fix: wallets type error - projectid not required rainbowWallet nor walletConnect

fix: caret removed

fix: group imports

chore: update viem and wagmi to latest version (#1)

fix: yarn libs error

.env.example

@@ -1,3 +1,3 @@
 VITE_RPC_URL= # Example: https://localhost:8545
-VITE_PROJECT_ID= # ProjectId from walletConnect
+VITE_PROJECT_ID= # Example API from WalletConnect: ""
 VITE_ALCHEMY_KEY= # API key from Alchemy 

package.json

@@ -24,12 +24,13 @@
  "src/**/*.{js,jsx,ts,tsx,css,scss,md,html}": "prettier --write --ignore-unknown"
  },
  "dependencies": {
- "@rainbow-me/rainbowkit": "1.0.9",
+ "@rainbow-me/rainbowkit": "2.0.2",
+ "@tanstack/react-query": "5.28.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-router-dom": "6.15.0",
- "viem": "1.19.15",
- "wagmi": "1.4.12"
+ "viem": "2.8.6",
+ "wagmi": "2.5.7"
  },
  "devDependencies": {
  "@defi-wonderland/crypto-husky-checks": "1.3.0",

src/main.tsx

@@ -2,62 +2,62 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 
-import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { injectedWallet, rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';
-import { connectorsForWallets } from '@rainbow-me/rainbowkit';
-
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
-import { alchemyProvider } from 'wagmi/providers/alchemy';
-import { publicProvider } from 'wagmi/providers/public';
+import '@rainbow-me/rainbowkit/styles.css';
+import { RainbowKitProvider, connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { rainbowWallet, walletConnectWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets';
+import { WagmiProvider, http, createConfig } from 'wagmi';
 import { localhost } from 'wagmi/chains';
 
-import { customTheme } from '~/components';
 import { getConfig } from './config';
-import { App } from '~/App';
-
-import '@rainbow-me/rainbowkit/styles.css';
 
-const { PROJECT_ID, ALCHEMY_KEY } = getConfig();
+import { App } from '~/App';
+import { customTheme } from '~/components';
 
-const { chains, publicClient } = configureChains(
- [localhost],
- [alchemyProvider({ apiKey: ALCHEMY_KEY }), publicProvider()],
- { batch: { multicall: true } },
-);
+const { PROJECT_ID } = getConfig();
 
 const getWallets = () => {
  if (PROJECT_ID) {
- return [
- injectedWallet({ chains }),
- rainbowWallet({ projectId: PROJECT_ID, chains }),
- walletConnectWallet({ projectId: PROJECT_ID, chains }),
- ];
+ return [injectedWallet, rainbowWallet, walletConnectWallet];
  } else {
- return [injectedWallet({ chains })];
+ return [injectedWallet];
  }
 };
 
-const connectors = connectorsForWallets([
+const connectors = connectorsForWallets(
+ [
+ {
+ groupName: 'Recommended',
+ wallets: getWallets(),
+ },
+ ],
  {
- groupName: 'Recommended',
- wallets: getWallets(),
+ appName: 'Web3 React boilerplate',
+ projectId: PROJECT_ID,
  },
-]);
+);
 
-const wagmiConfig = createConfig({
- autoConnect: true,
+const config = createConfig({
+ chains: [localhost],
+ transports: {
+ [localhost.id]: http(),
+ },
+ batch: { multicall: true },
  connectors,
- publicClient,
 });
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
- <WagmiConfig config={wagmiConfig}>
- <RainbowKitProvider theme={customTheme} chains={chains}>
- <HashRouter>
- <App />
- </HashRouter>
- </RainbowKitProvider>
- </WagmiConfig>
+ <WagmiProvider config={config}>
+ <QueryClientProvider client={queryClient}>
+ <RainbowKitProvider theme={customTheme}>
+ <HashRouter>
+ <App />
+ </HashRouter>
+ </RainbowKitProvider>
+ </QueryClientProvider>
+ </WagmiProvider>
  </React.StrictMode>,
 );

src/tests/test-utils.tsx

@@ -3,45 +3,49 @@
 import React from 'react';
 import { afterEach } from 'vitest';
 import { HashRouter } from 'react-router-dom';
-import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
-import { localhost } from 'wagmi/chains';
-import { publicProvider } from 'wagmi/providers/public';
+import { RainbowKitProvider, connectorsForWallets } from '@rainbow-me/rainbowkit';
 import { injectedWallet } from '@rainbow-me/rainbowkit/wallets';
-import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiProvider, http, createConfig } from 'wagmi';
+import { localhost } from 'wagmi/chains';
 
 // testing
 import { cleanup, render } from '@testing-library/react';
 
-const { chains, publicClient } = configureChains(
- [localhost],
+const connectors = connectorsForWallets(
  [
- // alchemyProvider({ apiKey: VITE_ALCHEMY_KEY! }),
- publicProvider(),
+ {
+ groupName: 'Recommended',
+ wallets: [injectedWallet],
+ },
  ],
-);
-
-const connectors = connectorsForWallets([
  {
- groupName: 'Recommended',
- wallets: [injectedWallet({ chains })],
+ appName: 'Web3 React boilerplate',
+ projectId: '',
  },
-]);
+);
 
-const wagmiConfig = createConfig({
- autoConnect: true,
+const config = createConfig({
+ chains: [localhost],
+ transports: {
+ [localhost.id]: http(),
+ },
+ batch: { multicall: true },
  connectors,
- publicClient,
 });
 
+const queryClient = new QueryClient();
+
 const AllTheProviders = ({ children }: { children: React.ReactElement }) => {
  // wrap provider(s) here if needed
  return (
- <WagmiConfig config={wagmiConfig}>
- <RainbowKitProvider chains={chains}>
- <HashRouter>{children}</HashRouter>
- </RainbowKitProvider>
- </WagmiConfig>
+ <WagmiProvider config={config}>
+ <QueryClientProvider client={queryClient}>
+ <RainbowKitProvider>
+ <HashRouter>{children}</HashRouter>
+ </RainbowKitProvider>
+ </QueryClientProvider>
+ </WagmiProvider>
  );
 };