builder todo: deployments.ts and WalletDisplay.ts

gitcoinco · Jun 4, 2024 · ee030b0 · ee030b0
1 parent 7d8a576
commit ee030b0
Show file tree

Hide file tree

Showing 16 changed files with 464 additions and 243 deletions.
diff --git a/packages/builder/package.json b/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",
@@ -83,8 +84,8 @@
     "typescript": "^5.3.3",
     "url": "^0.11.0",
     "verify-env": "*",
-    "viem": "^1.5.3",
-    "wagmi": "^0.12.19",
+    "viem": "^2.13.1",
+    "wagmi": "^2.9.8",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11",
     "zod": "^3.22.4"

diff --git a/packages/builder/src/components/application/Form.tsx b/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<

diff --git a/packages/builder/src/components/base/NetworkForm.tsx b/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;

diff --git a/packages/builder/src/components/base/NetworkSelector.tsx b/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";

diff --git a/packages/builder/src/components/base/NetworkSwitchModal.tsx b/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);
       }

diff --git a/packages/builder/src/components/base/ProjectForm.tsx b/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>();

diff --git a/packages/builder/src/components/base/WalletDisplay.tsx b/packages/builder/src/components/base/WalletDisplay.tsx
@@ -18,18 +18,18 @@ 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 });
     },
   });
 
+  const { address, isConnected } = useAccount();
+
   const avatarBg = isConnected ? "green.500" : "red.500";
 
   return (

diff --git a/packages/builder/src/components/grants/Edit.tsx b/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) });
     }
   };
 

diff --git a/packages/builder/src/components/grants/Landing.tsx b/packages/builder/src/components/grants/Landing.tsx
@@ -1,6 +1,7 @@
+import { providers } from "ethers";
 import { useSelector, useDispatch } from "react-redux";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useAccount, useProvider, useSigner, useNetwork } from "wagmi";
+import { useAccount } from "wagmi";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { RootState } from "../../reducers";
@@ -46,9 +47,9 @@ function Landing() {
     web3Initializing: state.web3.initializing,
   }));
   const { address, isConnected } = useAccount();
-  const { chain } = useNetwork();
-  const provider = useProvider();
-  const { data: signer } = useSigner();
+  const { chain } = useAccount();
+  const provider = new providers.Web3Provider(window.ethereum, chain?.id);
+  const signer = provider.getSigner(address);
 
   // dispatch initializeWeb3 when address changes
   useEffect(() => {

diff --git a/packages/builder/src/components/rounds/Show.tsx b/packages/builder/src/components/rounds/Show.tsx
@@ -4,7 +4,7 @@ import { RoundCategory, useDataLayer } from "data-layer";
 import { useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import { useSwitchNetwork } from "wagmi";
+import { useSwitchChain } from "wagmi";
 import { useAlloVersion } from "common/src/components/AlloVersionSwitcher";
 import { AlloVersion } from "data-layer/dist/data-layer.types";
 import { loadAllChainsProjects } from "../../actions/projects";
@@ -124,7 +124,7 @@ function ShowRound() {
   const params = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { switchNetwork } = useSwitchNetwork();
+  const { switchChain } = useSwitchChain();
 
   const { roundId, chainId } = params;
 
@@ -277,8 +277,8 @@ function ShowRound() {
   }, [props.projectsStatus, dispatch]);
 
   const onSwitchNetwork = () => {
-    if (switchNetwork) {
-      switchNetwork(props.roundChainId);
+    if (switchChain) {
+      switchChain({ chainId: props.roundChainId });
     }
   };
 

diff --git a/packages/builder/src/index.tsx b/packages/builder/src/index.tsx
@@ -1,5 +1,6 @@
 import "./browserPatches";
 
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ChakraProvider } from "@chakra-ui/react";
 import { datadogRum } from "@datadog/browser-rum";
 import { ReduxRouter } from "@lagunovsky/redux-react-router";
@@ -10,7 +11,7 @@ import { DataLayer, DataLayerProvider } from "data-layer";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { Navigate, Route, Routes } from "react-router";
-import { WagmiConfig } from "wagmi";
+import { WagmiProvider } from "wagmi";
 import AlloWrapper from "./utils/AlloWrapper";
 import ErrorBoundary from "./components/ErrorBoundary";
 import Layout from "./components/Layout";
@@ -28,7 +29,7 @@ import { slugs } from "./routes";
 import setupStore from "./store";
 import "./styles/index.css";
 import initDatadog from "./utils/datadog";
-import wagmiClient, { chains } from "./utils/wagmi";
+import queryClient, { config } from "./utils/wagmi";
 import initTagmanager from "./tagmanager";
 
 const dataLayerConfig = new DataLayer({
@@ -105,42 +106,44 @@ if (pathname && pathname !== window.location.pathname) {
 
 root.render(
   <ErrorBoundary>
-    <WagmiConfig client={wagmiClient}>
-      <RainbowKitProvider chains={chains} theme={gtcLightTheme} coolMode>
-        <ChakraProvider resetCSS={false}>
-          <Provider store={store}>
-            <AlloWrapper>
-              <DataLayerProvider client={dataLayerConfig}>
-                <ReduxRouter history={history} store={store}>
-                  <Layout>
-                    <Routes>
-                      <Route
-                        path={slugs.root}
-                        element={<Navigate to={slugs.grants} />}
-                      />
-                      <Route path={slugs.grants} element={<ProjectsList />} />
-                      <Route path={slugs.project} element={<Project />} />
-                      <Route path={slugs.newGrant} element={<NewProject />} />
-                      <Route path={slugs.edit} element={<EditProject />} />
-                      <Route path={slugs.round} element={<RoundShow />} />
-                      <Route
-                        path={slugs.roundApplication}
-                        element={<RoundApply />}
-                      />
-                      <Route
-                        path={slugs.roundApplicationView}
-                        element={<ViewApplication />}
-                      />
-                      <Route path="*" element={<PageNotFound />} />
-                    </Routes>
-                  </Layout>
-                </ReduxRouter>
-              </DataLayerProvider>
-            </AlloWrapper>
-          </Provider>
-        </ChakraProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider theme={gtcLightTheme} coolMode>
+          <ChakraProvider resetCSS={false}>
+            <Provider store={store}>
+              <AlloWrapper>
+                <DataLayerProvider client={dataLayerConfig}>
+                  <ReduxRouter history={history} store={store}>
+                    <Layout>
+                      <Routes>
+                        <Route
+                          path={slugs.root}
+                          element={<Navigate to={slugs.grants} />}
+                        />
+                        <Route path={slugs.grants} element={<ProjectsList />} />
+                        <Route path={slugs.project} element={<Project />} />
+                        <Route path={slugs.newGrant} element={<NewProject />} />
+                        <Route path={slugs.edit} element={<EditProject />} />
+                        <Route path={slugs.round} element={<RoundShow />} />
+                        <Route
+                          path={slugs.roundApplication}
+                          element={<RoundApply />}
+                        />
+                        <Route
+                          path={slugs.roundApplicationView}
+                          element={<ViewApplication />}
+                        />
+                        <Route path="*" element={<PageNotFound />} />
+                      </Routes>
+                    </Layout>
+                  </ReduxRouter>
+                </DataLayerProvider>
+              </AlloWrapper>
+            </Provider>
+          </ChakraProvider>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   </ErrorBoundary>
 );
 

diff --git a/packages/builder/src/utils/AlloWrapper.tsx b/packages/builder/src/utils/AlloWrapper.tsx
@@ -10,13 +10,15 @@ import {
 } from "common";
 import { getConfig } from "common/src/config";
 import { useEffect, useState } from "react";
-import { useNetwork, useProvider, useSigner } from "wagmi";
+import { useAccount } from "wagmi";
 import { AlloVersionProvider } from "common/src/components/AlloVersionSwitcher";
+import { providers } from "ethers";
 
 function AlloWrapper({ children }: { children: JSX.Element | JSX.Element[] }) {
-  const { chain } = useNetwork();
-  const web3Provider = useProvider();
-  const { data: signer } = useSigner();
+  const { chain, address } = useAccount();
+  const web3Provider = new providers.Web3Provider(window.ethereum, chain?.id);
+  const signer = web3Provider.getSigner(address);
+
   const chainID = chain?.id;
 
   const [backend, setBackend] = useState<Allo | null>(null);