Update rainbow dependencies

packages/builder/package.json

@@ -19,7 +19,7 @@
     "@lagunovsky/redux-react-router": "^2.2.0",
     "@pinata/sdk": "^1.1.26",
     "@playwright/test": "^1.41.1",
-    "@rainbow-me/rainbowkit": "^0.12.18",
+    "@rainbow-me/rainbowkit": "^2.1.2",
     "@redux-devtools/extension": "^3.2.3",
     "@rsbuild/core": "^0.4.1",
     "@rsbuild/plugin-react": "^0.3.11",
@@ -29,6 +29,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@tanstack/query-core": "4.22.0",
+    "@tanstack/react-query": "^5.40.0",
     "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -82,9 +83,9 @@
     "ts-jest": "^27.0",
     "typescript": "^5.3.3",
     "url": "^0.11.0",
-    "verify-env": "*",
-    "viem": "^1.5.3",
-    "wagmi": "^0.12.19",
+    "verify-env": "^1.0.0",
+    "viem": "^2.13.1",
+    "wagmi": "^2.9.8",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11",
     "zod": "^3.22.4"

packages/builder/src/__tests__/components/application/Form.test.tsx

@@ -301,7 +301,7 @@ describe("<Form />", () => {
         expect(
           screen.getByText(
             // eslint-disable-next-line max-len
-            "It looks like the payout wallet address you have provided may not be a valid multi-sig on the undefined network. Please update your payout wallet address before proceeding."
+            "It looks like the payout wallet address you have provided may not be a valid multi-sig on the Ethereum network. Please update your payout wallet address before proceeding."
           )
         ).toBeInTheDocument()
       );

packages/builder/src/__tests__/components/rounds/Show.test.tsx

@@ -26,8 +26,8 @@ jest.mock("react-router-dom", () => ({
 
 jest.mock("wagmi", () => ({
   ...jest.requireActual("wagmi"),
-  useSwitchNetwork: () => ({
-    switchNetwork: jest.fn(),
+  useSwitchChain: () => ({
+    switchChain: jest.fn(),
   }),
   useNetwork: () => ({
     chain: jest.fn(),

packages/builder/src/actions/projects.ts

@@ -1,3 +1,4 @@
+import { getChains } from "common";
 import { datadogRum } from "@datadog/browser-rum";
 import { getConfig } from "common/src/config";
 import {
@@ -6,7 +7,6 @@ import {
   ProjectApplicationWithRound,
 } from "data-layer";
 import { Dispatch } from "redux";
-import { global } from "../global";
 import { RootState } from "../reducers";
 import { ProjectStats } from "../reducers/projects";
 import { transformAndDispatchProject } from "./grantsMetadata";
@@ -233,8 +233,7 @@ export const loadProjects =
 export const loadAllChainsProjects =
   (dataLayer: DataLayer, withMetaData?: boolean) =>
   async (dispatch: Dispatch) => {
-    const { web3Provider } = global;
-    const chainIds = web3Provider?.chains?.map((chain) => chain.id as number);
+    const chainIds = getChains().map((chain) => chain.id as number);
     if (chainIds) {
       dispatch(projectsLoading(chainIds));
       dispatch<any>(loadProjects(chainIds, dataLayer, withMetaData));
@@ -262,12 +261,7 @@ export const fetchProjectApplications =
     });
 
     try {
-      const { web3Provider } = global;
-      if (!web3Provider?.chains) {
-        return;
-      }
-
-      const chainIds = web3Provider.chains.map((chain) => chain.id);
+      const chainIds = getChains().map((chain) => chain.id);
 
       const legacyProjectId = await dataLayer.getLegacyProjectId({
         projectId,

packages/builder/src/components/application/Form.tsx

@@ -19,7 +19,7 @@ import { getChainById } from "common";
 import { Fragment, useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import { useNetwork } from "wagmi";
+import { useChains } from "wagmi";
 import { ValidationError } from "yup";
 import { resetApplicationError } from "../../actions/roundApplication";
 import useValidateCredential from "../../hooks/useValidateCredential";
@@ -83,7 +83,7 @@ export default function Form({
 }) {
   const dispatch = useDispatch();
   const dataLayer = useDataLayer();
-  const { chains } = useNetwork();
+  const chains = useChains();
   const { version } = getConfig().allo;
 
   const [projectApplications, setProjectApplications] = useState<

packages/builder/src/components/base/NetworkForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { shallowEqual, useSelector } from "react-redux";
-import { useSwitchNetwork } from "wagmi";
+import { useSwitchChain } from "wagmi";
 import { RootState } from "../../reducers";
 import { ChangeHandlers, ProjectFormStatus } from "../../types";
 import { Select } from "../grants/inputs";
@@ -22,7 +22,7 @@ function NetworkForm({
     props.currentChain
   );
   const [showModal, setShowModal] = useState<boolean>(false);
-  const { chains } = useSwitchNetwork();
+  const { chains } = useSwitchChain();
 
   const handleNetworkSelect = async (e: ChangeHandlers) => {
     const { value } = e.target;

packages/builder/src/components/base/NetworkSelector.tsx

@@ -1,8 +1,8 @@
 import { Avatar, Menu, MenuButton, Tag, TagLabel } from "@chakra-ui/react";
-import { useNetwork } from "wagmi";
+import { useAccount } from "wagmi";
 
 export default function NetworkSelector(): JSX.Element {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
 
   // todo: set this based on current chain
   const colorScheme: string = "white";

packages/builder/src/components/base/NetworkSwitchModal.tsx

@@ -1,6 +1,6 @@
 // import colors from "../../styles/colors";
 import { useMemo } from "react";
-import { useSwitchNetwork } from "wagmi";
+import { useSwitchChain } from "wagmi";
 import { BaseModal } from "./BaseModal";
 import Button, { ButtonVariants } from "./Button";
 
@@ -17,16 +17,16 @@ export default function NetworkSwitchModal({
   toggleModal,
   onSwitch,
 }: NetworkSwitchModalProps) {
-  const { chains, switchNetworkAsync } = useSwitchNetwork();
+  const { chains, switchChainAsync } = useSwitchChain();
 
   const networkName = useMemo(
     () => chains.find((i) => i.id === networkId)?.name as string,
     [networkId, chains]
   );
 
   const handleNetworkSwitch = async () => {
-    if (switchNetworkAsync) {
-      await switchNetworkAsync(networkId);
+    if (switchChainAsync && networkId) {
+      await switchChainAsync({ chainId: Number(networkId) });
       if (onSwitch) {
         onSwitch(networkId);
       }

packages/builder/src/components/base/ProjectForm.tsx

@@ -1,7 +1,7 @@
 import { datadogRum } from "@datadog/browser-rum";
 import { useEffect, useRef, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import { useNetwork } from "wagmi";
+import { useConfig } from "wagmi";
 import { ValidationError } from "yup";
 import { metadataImageSaved, metadataSaved } from "../../actions/projectForm";
 import { RootState } from "../../reducers";
@@ -42,7 +42,7 @@ function ProjectForm({
   const [feedback, setFeedback] = useState([
     { title: "", type: "none", message: "" },
   ]);
-  const { chains } = useNetwork();
+  const { chains } = useConfig();
 
   const [, setLogoImg] = useState<Blob | undefined>();
   const [, setBannerImg] = useState<Blob | undefined>();

packages/builder/src/components/base/WalletDisplay.tsx

@@ -18,18 +18,20 @@ import { shortAddress, isValidAddress } from "../../utils/wallet";
 export default function WalletDisplay(): JSX.Element {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { address, isConnected } = useAccount();
   const { disconnect } = useDisconnect({
-    onSuccess() {
-      dispatch(web3AccountDisconnected(""));
-      navigate(slugs.root);
-      //
-    },
-    onError(error) {
-      dispatch({ type: "WEB3_ERROR", error });
+    mutation: {
+      onSuccess: () => {
+        dispatch(web3AccountDisconnected(""));
+        navigate(slugs.root);
+      },
+      onError: (error) => {
+        dispatch({ type: "WEB3_ERROR", error });
+      },
     },
   });
 
+  const { address, isConnected } = useAccount();
+
   const avatarBg = isConnected ? "green.500" : "red.500";
 
   return (

packages/builder/src/components/base/__tests__/NetworkForm.test.tsx

@@ -1,44 +1,18 @@
-import React from "react";
 import "@testing-library/jest-dom";
 import { act, fireEvent, screen } from "@testing-library/react";
-import * as wagmi from "wagmi";
 import { Store } from "redux";
-import { mainnet } from "wagmi/chains";
 import NetworkForm from "../NetworkForm";
 import setupStore from "../../../store";
 import { renderWrapped } from "../../../utils/test_utils";
 import { web3ChainIDLoaded } from "../../../actions/web3";
 import { RootState } from "../../../reducers";
 import { ProjectFormStatus } from "../../../types";
 
-const chains = [mainnet];
-
 describe("NetworkForm", () => {
   let store: Store<RootState>;
-  let switchNetworkAsync:
-    | ((chainId_?: number | undefined) => Promise<wagmi.Chain>)
-    | undefined;
 
   beforeEach(() => {
     store = setupStore();
-
-    jest.spyOn(wagmi, "useSwitchNetwork").mockReturnValue({
-      chains,
-      data: undefined,
-      error: null,
-      isError: false,
-      isIdle: false,
-      isLoading: false,
-      isSuccess: false,
-      pendingChainId: undefined,
-      reset(): void {
-        throw new Error("Function not implemented.");
-      },
-      status: "error",
-      switchNetwork: undefined,
-      variables: undefined,
-      switchNetworkAsync,
-    });
   });
 
   it("should render", () => {

packages/builder/src/components/base/__tests__/NetworkSwitchModal.test.tsx

@@ -1,52 +1,22 @@
-import React from "react";
 import { act, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import * as wagmi from "wagmi";
 import { Store } from "redux";
-import { mainnet } from "wagmi/chains";
+import "wagmi";
 import NetworkSwitchModal from "../NetworkSwitchModal";
 import { renderWrapped } from "../../../utils/test_utils";
 import setupStore from "../../../store";
 import { RootState } from "../../../reducers/index";
 
-const chains = [mainnet];
-
 describe("NetworkSwitchModal", () => {
   let store: Store<RootState>;
   let toggleModal: () => null;
   let onSwitch: (networkId?: number) => void;
-  let switchNetworkAsync:
-    | ((chainId_?: number | undefined) => Promise<wagmi.Chain>)
-    | undefined;
 
   beforeEach(() => {
     store = setupStore();
     toggleModal = jest.fn();
-    switchNetworkAsync = jest
-      .fn()
-      .mockImplementation((chainId_?: number | undefined) =>
-        chains.find((i) => chainId_ === i.id)
-      );
     onSwitch = jest.fn();
 
-    jest.spyOn(wagmi, "useSwitchNetwork").mockReturnValue({
-      chains,
-      data: undefined,
-      error: null,
-      isError: false,
-      isIdle: false,
-      isLoading: false,
-      isSuccess: false,
-      pendingChainId: undefined,
-      reset(): void {
-        throw new Error("Function not implemented.");
-      },
-      status: "error",
-      switchNetwork: undefined,
-      variables: undefined,
-      switchNetworkAsync,
-    });
-
     renderWrapped(
       <NetworkSwitchModal
         modalOpen
@@ -75,15 +45,14 @@ describe("NetworkSwitchModal", () => {
     expect(toggleModal).toBeCalledTimes(1);
   });
 
-  it("Button click > 'Switch Network' > should call switchNetworkAsync & onSwitch", async () => {
+  it("Button click > 'Switch Network' > should call switchChainAsync & onSwitch", async () => {
     const modal = screen.getByTestId("network-switch-modal");
     const switchBtn = modal.querySelector(".switch-button") as Element;
 
     await act(async () => {
       switchBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(switchNetworkAsync).toBeCalledTimes(1);
     expect(onSwitch).toBeCalledTimes(1);
   });
 });

packages/builder/src/components/grants/Edit.tsx

@@ -2,7 +2,7 @@ import { useDataLayer } from "data-layer";
 import { useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { useSwitchNetwork } from "wagmi";
+import { useSwitchChain } from "wagmi";
 import { getChainById } from "common";
 import { fetchGrantData } from "../../actions/grantsMetadata";
 import {
@@ -27,7 +27,7 @@ function EditProject() {
   const dataLayer = useDataLayer();
   const params = useParams();
   const dispatch = useDispatch();
-  const { switchNetwork } = useSwitchNetwork();
+  const { switchChain } = useSwitchChain();
 
   const [modalOpen, toggleModal] = useState(false);
   const [formStatus, setFormStatus] = useState<ProjectFormStatus>(
@@ -53,8 +53,8 @@ function EditProject() {
   const isOnProjectChain = Number(props.chainId) === Number(params.chainId);
 
   const onSwitchNetwork = () => {
-    if (switchNetwork) {
-      switchNetwork(Number(params.chainId));
+    if (switchChain) {
+      switchChain({ chainId: Number(params.chainId) });
     }
   };