update web3 packages

apps/frontend/components/DataTable.tsx

@@ -63,10 +63,7 @@ const DataTable = ({
   const [sorting, setSorting] = useState<SortingState>(sort);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState(
-    Object.assign(
-      {},
-      ...columns.map((c) => ({ [c.id]: !c.meta?.hidden ?? true }))
-    )
+    Object.assign({}, ...columns.map((c) => ({ [c.id]: !c.meta?.hidden })))
   );
 
   const table = useReactTable({

apps/frontend/components/Escrow/DepositFunds.tsx

@@ -94,7 +94,7 @@ const DepositFunds = ({
   const depositHandler = async () => {
     const result = await handleDeposit();
     if (!result) return;
-    setTransaction(result.hash);
+    setTransaction(result);
   };
   const paymentTypeOptions = [
     { value: PAYMENT_TYPES.TOKEN, label: parseTokenAddress(chainId, token) },

apps/frontend/components/Escrow/EscrowConfirmation.tsx

@@ -5,17 +5,18 @@ import {
   Stack,
   Text,
   Tooltip,
+  useToast,
 } from '@raidguild/design-system';
 import { IRaid } from '@raidguild/dm-types';
 import { chainsMap, commify } from '@raidguild/dm-utils';
 import { useEscrowZap, useRegister } from '@raidguild/escrow-hooks';
 import { GANGGANG_MULTISIG, NETWORK_CONFIG } from '@raidguild/escrow-utils';
+import { WriteContractReturnType } from '@wagmi/core';
 import _ from 'lodash';
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { Hex, zeroAddress } from 'viem';
 import { useChainId } from 'wagmi';
-import { WriteContractResult } from 'wagmi/dist/actions';
 
 import AccountLink from './shared/AccountLink';
 
@@ -33,6 +34,7 @@ const EscrowConfirmation = ({
   backStep: () => void;
 }) => {
   const { watch } = escrowForm;
+  const toast = useToast();
   const {
     client,
     provider,
@@ -98,18 +100,37 @@ const EscrowConfirmation = ({
     projectTeamSplit: raidPartySplit,
     daoSplit,
     enabled: !canRegisterDirectly,
-    onSuccess: (tx: WriteContractResult) => setTxHash(tx?.hash),
+    onSuccess: (tx: WriteContractReturnType) => setTxHash(tx),
   });
 
   const createInvoice = async () => {
     if (canRegisterDirectly) {
       await writeAsync?.();
+      // move to next step
+      updateStep();
     } else {
-      await writeEscrowZap?.();
+      try {
+        await writeEscrowZap?.();
+        // move to next step
+        updateStep();
+      } catch (error) {
+        if (error?.message?.match(/User rejected/)) {
+          /* eslint-disable no-console */
+          console.error('Transaction rejected by user', error);
+          toast.error({
+            title: 'Transaction Rejected',
+            description: 'Transaction was rejected. Please try again.',
+          });
+        } else {
+          /* eslint-disable no-console */
+          console.error('Transaction failed:', error);
+          toast.error({
+            title: 'Transaction Failed',
+            description: error.message,
+          });
+        }
+      }
     }
-
-    // move to next step
-    updateStep();
   };
 
   const total = _.sumBy(

apps/frontend/components/Escrow/EscrowSuccess.tsx

@@ -14,7 +14,7 @@ import { updateRaidInvoice } from '@raidguild/escrow-utils';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { decodeAbiParameters, Hex } from 'viem';
-import { useChainId, useWaitForTransaction } from 'wagmi';
+import { useChainId, useWaitForTransactionReceipt } from 'wagmi';
 
 import ChakraNextLink from '../ChakraNextLink';
 import ZapAddresses from './ZapAddresses';
@@ -23,7 +23,7 @@ const EscrowSuccess = ({ raidId, txHash }: { raidId: string; txHash: Hex }) => {
   const [addresses, setAddresses] = useState<Hex[]>(); // [safe, projectTeamSplit, daoSplit, escrow]
   const chainId = useChainId();
 
-  const { data: txData } = useWaitForTransaction({
+  const { data: txData } = useWaitForTransactionReceipt({
     hash: txHash,
   });
 
@@ -43,8 +43,8 @@ const EscrowSuccess = ({ raidId, txHash }: { raidId: string; txHash: Hex }) => {
         { name: 'escrow', type: 'address' },
       ] as { name: string; type: string }[],
       localAddresses
-    ) as Hex[];
-    setAddresses(decodedAddresses);
+    ) as unknown as Hex[];
+    setAddresses(decodedAddresses as Hex[]);
     // update raid record with new invoice address
     if (!raidId) return;
     updateRaidInvoice(chainId, raidId, _.nth(decodedAddresses, 3));

apps/frontend/components/Escrow/ReceiverSplits.tsx

@@ -51,7 +51,7 @@ const NestedSplit = ({
     const activeBalances = _.get(splitEarnings, 'activeBalances');
     if (!activeBalances || !activeBalances[WXDAI_ADDRESS]) return '0';
     return handleFormattedBalance(
-      formatUnits(activeBalances[WXDAI_ADDRESS], 18) || '0'
+      activeBalances[WXDAI_ADDRESS].formattedAmount || '0'
     );
   }, [splitEarnings]);
 
@@ -170,7 +170,7 @@ const ReceiverSplits = ({
     const activeBalances = _.get(splitEarnings, 'activeBalances');
     if (!activeBalances || !activeBalances[WXDAI_ADDRESS]) return '0';
     return handleFormattedBalance(
-      formatUnits(activeBalances[WXDAI_ADDRESS], 18)
+      activeBalances[WXDAI_ADDRESS].formattedAmount || '0'
     );
   }, [splitEarnings]);
 

apps/frontend/components/Escrow/ZapAddresses.tsx

@@ -1,7 +1,7 @@
 import { Card, Heading, Stack, Text } from '@raidguild/design-system';
 import React from 'react';
 import { Hex, zeroAddress } from 'viem';
-import { useNetwork } from 'wagmi';
+import { useAccount } from 'wagmi';
 
 import Link from '../ChakraNextLink';
 
@@ -16,7 +16,7 @@ const ZapAddresses = ({
   addresses: Hex[];
   raidId: string;
 }) => {
-  const { chain } = useNetwork();
+  const { chain } = useAccount();
 
   if (!addresses) return null;
   const [safe, projectTeamSplit, daoSplit, escrow] = addresses || [];

apps/frontend/components/MemberAvatar.tsx

@@ -25,13 +25,15 @@ const MemberAvatar = ({
   const { data: ensName } = useEnsName({
     address,
     chainId: 1,
-    enabled: !!address,
+    query: { enabled: !!address },
   });
   const { data: ensAvatar } = useEnsAvatar({
     name: ensName,
     chainId: 1,
-    enabled: !!ensName,
-    cacheTime: 60000, // Cache time in milliseconds
+    query: {
+      enabled: !!ensName,
+      gcTime: 60000, // Cache time in milliseconds
+    },
   });
 
   // State for Blockies Avatar

apps/frontend/components/RaidUpdates.tsx

@@ -17,43 +17,41 @@ const RaidUpdate: React.FC<RaidUpdateProps> = ({
   update,
   member,
   createdAt,
-}: RaidUpdateProps) => {
-  return (
-    <>
+}: RaidUpdateProps) => (
+  <>
+    <Flex
+      direction='row'
+      width='100%'
+      alignItems='space-between' /* Changed 'space-apart' to 'space-between' */
+      justifyContent='space-between'
+      marginY={2}
+    >
       <Flex
-        direction='row'
-        width='100%'
-        alignItems='space-between' /* Changed 'space-apart' to 'space-between' */
+        gap={4}
+        direction={['column', null, null, null]}
+        alignItems='flex-start'
         justifyContent='space-between'
-        marginY={2}
+        width='100%'
       >
-        <Flex
-          gap={4}
-          direction={['column', null, null, null]}
-          alignItems='flex-start'
-          justifyContent='space-between'
-          width='100%'
+        <Text
+          color='white'
+          as='p'
+          fontSize='md'
+          maxWidth={['95%', null, null, null]}
         >
-          <Text
-            color='white'
-            as='p'
-            fontSize='md'
-            maxWidth={['95%', null, null, null]}
-          >
-            {update}
+          {update}
+        </Text>
+        <HStack spacing={1} color='gray.100'>
+          <Text fontSize='sm'>{member.name} @</Text>{' '}
+          {/* Changed 'smaller' to 'sm' */}
+          <Text fontSize='sm'>
+            {createdAt && format(new Date(createdAt), 'Pp')}
           </Text>
-          <HStack spacing={1} color='gray.100'>
-            <Text fontSize='sm'>{member.name} @</Text>{' '}
-            {/* Changed 'smaller' to 'sm' */}
-            <Text fontSize='sm'>
-              {createdAt && format(new Date(createdAt), 'Pp')}
-            </Text>
-          </HStack>
-        </Flex>
+        </HStack>
       </Flex>
-      <Divider color='blackAlpha' size='sm' />
-    </>
-  );
-};
+    </Flex>
+    <Divider color='blackAlpha' size='sm' />
+  </>
+);
 
 export default RaidUpdate;

apps/frontend/components/SiteLayoutPublic.tsx

@@ -5,7 +5,7 @@ import { Flex, Heading, Spinner, Stack } from '@raidguild/design-system';
 import _ from 'lodash';
 import { useRouter } from 'next/router';
 import React, { ReactNode, useEffect, useState } from 'react';
-import { useAccount, useConfig, useConnect, useNetwork } from 'wagmi';
+import { useAccount, useConfig, useConnect } from 'wagmi';
 
 import CommandPalette from './CommandPalette';
 import Footer from './Footer';
@@ -78,13 +78,12 @@ const SiteLayoutPublic = ({
   children,
   minHeight = '100vh',
 }: SiteLayoutPublicProps) => {
-  const { chain } = useNetwork();
   const { pathname } = useRouter();
 
   // Copied as it is from 'SiteLayout.tsx'
   // TODO handle autoconnect
   const [isAutoConnecting, setIsAutoConnecting] = useState(false);
-  const { address } = useAccount();
+  const { address, chain } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const client = useConfig();
 

apps/frontend/contexts/SplitsContext.tsx

@@ -1,14 +1,12 @@
 import { SplitsProvider } from '@0xsplits/splits-sdk-react';
-import { chainsMap } from '@raidguild/dm-utils';
+import {
+  chainsMap,
+  publicClient as wagmiPublicClient,
+} from '@raidguild/dm-utils';
 import { ReactNode, useMemo } from 'react';
-import { createPublicClient, http } from 'viem';
 
 export const publicClient = (chainId: number) =>
-  chainId &&
-  createPublicClient({
-    chain: chainsMap(chainId),
-    transport: http(),
-  });
+  chainId && wagmiPublicClient({ chainId });
 
 const SplitsContext = ({
   chainId = 100,

apps/frontend/pages/_app.tsx

@@ -4,7 +4,7 @@ import '@rainbow-me/rainbowkit/styles.css';
 import 'react-datepicker/dist/react-datepicker.css'; // trouble processing this css in the DS pkg currently
 
 import { RGThemeProvider } from '@raidguild/design-system';
-import { chains, wagmiConfig } from '@raidguild/dm-utils';
+import { wagmiConfig } from '@raidguild/dm-utils';
 import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
 import {
@@ -17,7 +17,7 @@ import { AppProps } from 'next/app';
 import { SessionProvider } from 'next-auth/react';
 import { DefaultSeo } from 'next-seo';
 import React from 'react';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 
 import { OverlayContextProvider } from '../contexts/OverlayContext';
 
@@ -67,24 +67,24 @@ const App = ({ Component, pageProps }: AppProps) => {
         }}
       />
 
-      <WagmiConfig config={wagmiConfig}>
+      <WagmiProvider config={wagmiConfig}>
         <SessionProvider
           session={pageProps.session}
           refetchInterval={8 * 60 * 1000}
           refetchOnWindowFocus={false}
         >
-          <RainbowKitSiweNextAuthProvider>
-            <RainbowKitProvider chains={chains || []} theme={darkTheme()}>
-              <QueryClientProvider client={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            <RainbowKitSiweNextAuthProvider>
+              <RainbowKitProvider theme={darkTheme()}>
                 <OverlayContextProvider>
                   <Component {...pageProps} />
                   <ReactQueryDevtools initialIsOpen={false} />
                 </OverlayContextProvider>
-              </QueryClientProvider>
-            </RainbowKitProvider>
-          </RainbowKitSiweNextAuthProvider>
+              </RainbowKitProvider>
+            </RainbowKitSiweNextAuthProvider>
+          </QueryClientProvider>
         </SessionProvider>
-      </WagmiConfig>
+      </WagmiProvider>
     </RGThemeProvider>
   );
 };

apps/frontend/pages/api/auth/[...nextauth].ts

@@ -7,7 +7,8 @@ import {
   siweCredentials,
 } from '@raidguild/dm-utils';
 import { NextApiRequest, NextApiResponse } from 'next';
-import NextAuth from 'next-auth';
+import NextAuth, { Awaitable } from 'next-auth';
+import { JWT, JWTDecodeParams } from 'next-auth/jwt';
 import CredentialsProvider from 'next-auth/providers/credentials';
 
 const { NEXTAUTH_SECRET } = process.env;
@@ -28,7 +29,9 @@ export const authOptions: NextAuthOptions = {
     secret: NEXTAUTH_SECRET,
     encode: encodeAuth,
     // used any because not sure how to type this
-    decode: decodeAuth as any,
+    decode: decodeAuth as unknown as (
+      params: JWTDecodeParams
+    ) => Awaitable<JWT>,
   },
   callbacks: {
     jwt: async ({ token }) => {

apps/frontend/pages/escrow/[raidId].tsx

@@ -21,7 +21,7 @@ import { useSession } from 'next-auth/react';
 import { NextSeo } from 'next-seo';
 import { useMemo } from 'react';
 import { FaExternalLinkAlt } from 'react-icons/fa';
-import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 
 import ChakraNextLink from '../../components/ChakraNextLink';
 import InvoiceButtonManager from '../../components/Escrow/InvoiceButtonManager';
@@ -43,9 +43,8 @@ const Escrow = ({
   raidId: string;
   serverSession: SessionOptions;
 }) => {
-  const { address } = useAccount();
-  const { chain } = useNetwork();
-  const { switchNetwork } = useSwitchNetwork();
+  const { address, chain } = useAccount();
+  const { switchChain } = useSwitchChain();
   const { data: session } = useSession() || { data: serverSession };
   const token = _.get(session, 'token');
 
@@ -126,7 +125,7 @@ const Escrow = ({
                 <Text
                   as='span'
                   color='red'
-                  onClick={() => switchNetwork(raid.invoice.chainId)}
+                  onClick={() => switchChain({ chainId: raid.invoice.chainId })}
                   _hover={{ cursor: 'pointer', textDecor: 'underline' }}
                 >
                   {chainsMap(raid.invoice.chainId).name}