Upgrade wagmi, viem, rainbowkit

components/TokenInfo.tsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import { Button } from '@raidguild/design-system';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import useBalances from '../hooks/useBalances';
 
 export interface TokenInfoProps {
   deposit: boolean;
 }
 
 const TokenInfo: React.FC<TokenInfoProps> = ({ deposit }) => {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const { ethBalance, wethBalance } = useBalances();
 
   const symbol = chain?.nativeCurrency?.symbol;
 
   return (
     <Button variant='ghost'>
-      {`${deposit ? '' : 'W'}${symbol} Balance: ${
-        deposit ? ethBalance?.slice(0, 6) || 0 : wethBalance?.slice(0, 6) || 0
-      }`}
+      {`${deposit ? '' : 'W'}${symbol} Balance: ${deposit ? ethBalance?.slice(0, 6) || 0 : wethBalance?.slice(0, 6) || 0
+        }`}
     </Button>
   );
 };

components/WrapperForm.tsx

@@ -13,7 +13,9 @@ import {
   NumberInputField,
   NumberInputStepper,
   Text,
+  useToast,
 } from '@raidguild/design-system';
+import { useAccount } from 'wagmi';
 import React from 'react';
 import { Controller, FieldValues, useForm } from 'react-hook-form';
 import { FiAlertTriangle } from 'react-icons/fi';
@@ -37,6 +39,8 @@ export interface WrapperFormProps {
 const WrapperForm: React.FC<WrapperFormProps> = ({ action }) => {
   const { ethBalance, wethBalance } = useBalances();
   const { gasLimitEther } = useGasFee();
+  const { chain } = useAccount()
+  const toast = useToast()
 
   const localForm = useForm<FieldValues>({
     defaultValues: {
@@ -54,8 +58,8 @@ const WrapperForm: React.FC<WrapperFormProps> = ({ action }) => {
     formState: { errors },
   } = localForm;
 
-  const { writeDeposit } = useDeposit(watch('amount'));
-  const { writeWithdraw } = useWithdraw(watch('amount'));
+  const { writeDeposit, depositConfig, isSuccessDeposit, isPendingDeposit, isErrorDeposit } = useDeposit(watch('amount'));
+  const { writeWithdraw, withdrawConfig, isSuccessWithdraw, isPendingWithdraw, isErrorWithdraw } = useWithdraw(watch('amount'));
 
   const handleSetMax: any = (): void => {
     const eth = +ethBalance;
@@ -69,8 +73,26 @@ const WrapperForm: React.FC<WrapperFormProps> = ({ action }) => {
   };
 
   const onSubmit = async () => {
-    if (action === 'deposit' && writeDeposit) writeDeposit();
-    else if (action === 'withdraw' && writeWithdraw) writeWithdraw();
+    if (action === 'deposit' && writeDeposit && depositConfig) writeDeposit(depositConfig.request);
+    else if (action === 'withdraw' && writeWithdraw && withdrawConfig) writeWithdraw(withdrawConfig.request);
+    if (isSuccessDeposit) {
+      toast.success({
+        title: `Success! Wrapped ${chain?.nativeCurrency?.symbol || 'ETH'}`,
+        isClosable: true,
+      });
+    }
+    if (isPendingDeposit) {
+      toast.loading({
+        title: 'Pending Transaction...',
+        isClosable: true,
+      });
+    }
+    if (isErrorDeposit) {
+      toast.error({
+        title: 'Error... transaction reverted...',
+        isClosable: true,
+      });
+    }
   };
 
   const customValidations = {

hooks/useBalances.ts

@@ -1,22 +1,17 @@
-import { useAccount, useBalance, useNetwork } from 'wagmi';
+import { useAccount, useBalance } from 'wagmi';
 import { wethAddrs } from '../utils/contracts';
 
 const useBalances = () => {
-  const { address } = useAccount();
-  const { chain } = useNetwork();
+  const { address, chain } = useAccount();
 
-  const contractAddress = wethAddrs?.[chain?.network || 'homestead'];
+  const contractAddress = wethAddrs?.[chain?.id || 'homestead'];
 
   const getEthBalance = useBalance({
     address,
-    enabled: contractAddress?.length !== 0,
-    watch: true,
   });
 
   const getWethBalance = useBalance({
     address,
-    enabled: contractAddress?.length !== 0,
-    watch: true,
     token: contractAddress,
   });
 

hooks/useDeposit.tsx

@@ -3,70 +3,44 @@ import { useDebounce } from 'usehooks-ts';
 import { parseEther } from 'viem';
 import {
   useAccount,
-  useContractWrite,
-  useNetwork,
-  usePrepareContractWrite,
-  useWaitForTransaction,
+  useWriteContract,
+  useSimulateContract,
+  useWaitForTransactionReceipt,
 } from 'wagmi';
 
 import WethAbi from '../contracts/wethAbi.json';
 import { wethAddrs } from '../utils/contracts';
 
 const useDeposit = (inputBalance: number) => {
-  const { address } = useAccount();
-  const { chain } = useNetwork();
+  const { address, chain } = useAccount();
   const toast = useToast();
 
   const debouncedValue = useDebounce(inputBalance, 500);
 
-  const contractAddress = wethAddrs?.[chain?.network || 'homestead'];
+  const contractAddress = wethAddrs?.[chain?.id || 'homestead'];
 
-  const { config } = usePrepareContractWrite({
+  const { data: depositConfig } = useSimulateContract({
     address: contractAddress || '',
     abi: WethAbi,
     functionName: 'deposit',
-    enabled: Boolean(debouncedValue),
     account: address,
     value: BigInt(parseEther(debouncedValue.toString() || '0')),
-    onSuccess(data: any) {
-      return data;
-    },
-    onError(error: any) {
-      return error;
-    },
   });
 
-  const { write: writeDeposit, data: dataDeposit } = useContractWrite({
-    ...config,
-    request: config.request,
-    onSuccess() {
-      toast.success({
-        title: 'Pending Transaction...',
-        isClosable: true,
-      });
-    },
-    onError() {
-      toast.error({
-        title: 'Error... transaction reverted...',
-        isClosable: true,
-      });
-    },
-  });
+  const { writeContract: writeDeposit, data: dataDeposit, isPending: isPendingDeposit, isError: isErrorDeposit, isSuccess: isSuccessDeposit } = useWriteContract();
 
-  const { status: statusDeposit } = useWaitForTransaction({
-    hash: dataDeposit?.hash,
-    onSuccess: () => {
-      toast.success({
-        title: `Success! Wrapped ${chain?.nativeCurrency?.symbol || 'ETH'}`,
-        isClosable: true,
-      });
-    },
+  const { status: statusDeposit } = useWaitForTransactionReceipt({
+    hash: dataDeposit,
   });
 
   return {
+    depositConfig,
     writeDeposit,
     dataDeposit,
     statusDeposit,
+    isSuccessDeposit,
+    isPendingDeposit,
+    isErrorDeposit
   };
 };
 

hooks/useWithdraw.tsx

@@ -2,65 +2,42 @@ import { useToast } from '@raidguild/design-system';
 import { useDebounce } from 'usehooks-ts';
 import { parseEther } from 'viem';
 import {
-  useContractWrite,
-  useNetwork,
-  usePrepareContractWrite,
-  useWaitForTransaction,
+  useAccount,
+  useWriteContract,
+  useSimulateContract,
+  useWaitForTransactionReceipt,
 } from 'wagmi';
 
 import WethAbi from '../contracts/wethAbi.json';
 import { wethAddrs } from '../utils/contracts';
 
 const useWithdraw = (inputBalance: number) => {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
   const toast = useToast();
   const debouncedValue = useDebounce(inputBalance, 500);
-  const contractAddress = wethAddrs?.[chain?.network || 'homestead'];
+  const contractAddress = wethAddrs?.[chain?.id || 'homestead'];
 
-  const { config } = usePrepareContractWrite({
+  const { data: withdrawConfig } = useSimulateContract({
     address: contractAddress || '',
     abi: WethAbi,
     functionName: 'withdraw',
-    enabled: Boolean(debouncedValue),
     args: [BigInt(parseEther(debouncedValue.toString() || '0'))],
-    onSuccess(data: any): any {
-      return data;
-    },
-    onError(error: any): any {
-      return error;
-    },
   });
 
-  const { write: writeWithdraw, data: dataWithdraw } = useContractWrite({
-    ...config,
-    request: config.request,
-    onSuccess() {
-      toast.success({
-        title: 'Transaction pending...',
-      });
-    },
-    onError(error: any) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-      toast.error({
-        title: 'Error... transaction reverted...',
-      });
-    },
-  });
+  const { writeContract: writeWithdraw, data: dataWithdraw, isPending: isPendingWithdraw, isSuccess: isSuccessWithdraw, isError: isErrorWithdraw } = useWriteContract();
 
-  const { status: statusWithdraw } = useWaitForTransaction({
-    hash: dataWithdraw?.hash,
-    onSuccess: () => {
-      toast.success({
-        title: `Success! Unwrapped ${chain?.nativeCurrency?.symbol || 'ETH'}`,
-      });
-    },
+  const { status: statusWithdraw } = useWaitForTransactionReceipt({
+    hash: dataWithdraw,
   });
 
   return {
+    withdrawConfig,
     writeWithdraw,
     dataWithdraw,
     statusWithdraw,
+    isSuccessWithdraw,
+    isPendingWithdraw,
+    isErrorWithdraw
   };
 };
 

package.json

@@ -11,15 +11,16 @@
   },
   "dependencies": {
     "@raidguild/design-system": "^0.5.0",
-    "@rainbow-me/rainbowkit": "^1.3.0",
+    "@rainbow-me/rainbowkit": "^2.0.2",
+    "@tanstack/react-query": "^5.28.4",
     "next": "^14.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.38.0",
     "react-icons": "^4.6.0",
     "usehooks-ts": "^2.9.1",
-    "viem": "^1.19.15",
-    "wagmi": "^1.4.12"
+    "viem": "^2.8.10",
+    "wagmi": "^2.5.7"
   },
   "devDependencies": {
     "@types/node": "18.11.5",

pages/_app.tsx

@@ -8,15 +8,17 @@ import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import Head from 'next/head';
 import { wagmiConfig } from '@/utils/wagmiConfig';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 import React from 'react';
-import { chains } from '@/utils/chains';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 interface AppProps {
   Component: any;
   pageProps: any;
 }
 
+const queryClient = new QueryClient();
+
 const App = ({ Component, pageProps }: AppProps) => (
   <>
     <Head>
@@ -30,11 +32,13 @@ const App = ({ Component, pageProps }: AppProps) => (
     <ChakraProvider theme={defaultTheme} resetCSS>
       <ColorModeScript initialColorMode='dark' />
       <Fonts />
-      <WagmiConfig config={wagmiConfig}>
-        <RainbowKitProvider chains={chains} theme={darkTheme()}>
-          <Component {...pageProps} />
-        </RainbowKitProvider>
-      </WagmiConfig>
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitProvider theme={darkTheme()}>
+            <Component {...pageProps} />
+          </RainbowKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
     </ChakraProvider>
   </>
 );

pages/index.tsx

@@ -9,7 +9,7 @@ import {
   BuiltByRaidGuild,
 } from '@raidguild/design-system';
 import '@rainbow-me/rainbowkit/styles.css';
-import { useAccount, useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 import { WrapperForm, Header, ConnectWallet } from '@/components';
 
 export interface AppProps {
@@ -21,8 +21,7 @@ export interface AppProps {
  */
 const App: React.FC<AppProps> = ({ children }: AppProps) => {
   const [deposit, setDeposit] = useState<boolean>(true);
-  const { isConnected } = useAccount();
-  const { chain } = useNetwork();
+  const { isConnected, chain } = useAccount();
 
   const onButtonSelection = (index: number) => {
     switch (index) {
@@ -39,7 +38,7 @@ const App: React.FC<AppProps> = ({ children }: AppProps) => {
   };
 
   return (
-    <Flex h='100vh' w='100vw' maxW='100%' background='gray.800' overflow={'scroll'}>
+    <Flex h='100vh' w='100vw' maxW='100%' background='gray.800' overflow='scroll'>
       <Container centerContent maxW='80ch'>
         <Header>
           <Spacer />