diff --git a/apps/frontend/components/DataTable.tsx b/apps/frontend/components/DataTable.tsx index ef34280..2b13182 100644 --- a/apps/frontend/components/DataTable.tsx +++ b/apps/frontend/components/DataTable.tsx @@ -63,10 +63,7 @@ const DataTable = ({ const [sorting, setSorting] = useState(sort); const [columnFilters, setColumnFilters] = useState([]); 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({ diff --git a/apps/frontend/components/Escrow/DepositFunds.tsx b/apps/frontend/components/Escrow/DepositFunds.tsx index d31bf9c..2245a1a 100644 --- a/apps/frontend/components/Escrow/DepositFunds.tsx +++ b/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) }, diff --git a/apps/frontend/components/Escrow/EscrowConfirmation.tsx b/apps/frontend/components/Escrow/EscrowConfirmation.tsx index 9799ac4..2f653d6 100644 --- a/apps/frontend/components/Escrow/EscrowConfirmation.tsx +++ b/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( diff --git a/apps/frontend/components/Escrow/EscrowSuccess.tsx b/apps/frontend/components/Escrow/EscrowSuccess.tsx index 9451049..ed1b1a4 100644 --- a/apps/frontend/components/Escrow/EscrowSuccess.tsx +++ b/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(); // [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)); diff --git a/apps/frontend/components/Escrow/ReceiverSplits.tsx b/apps/frontend/components/Escrow/ReceiverSplits.tsx index 6163160..8a9923b 100644 --- a/apps/frontend/components/Escrow/ReceiverSplits.tsx +++ b/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]); diff --git a/apps/frontend/components/Escrow/ZapAddresses.tsx b/apps/frontend/components/Escrow/ZapAddresses.tsx index 641aa34..77dd95a 100644 --- a/apps/frontend/components/Escrow/ZapAddresses.tsx +++ b/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 || []; diff --git a/apps/frontend/components/MemberAvatar.tsx b/apps/frontend/components/MemberAvatar.tsx index 5f787e3..fd0abc1 100644 --- a/apps/frontend/components/MemberAvatar.tsx +++ b/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 diff --git a/apps/frontend/components/RaidUpdates.tsx b/apps/frontend/components/RaidUpdates.tsx index 9627d34..fc38c86 100644 --- a/apps/frontend/components/RaidUpdates.tsx +++ b/apps/frontend/components/RaidUpdates.tsx @@ -17,43 +17,41 @@ const RaidUpdate: React.FC = ({ update, member, createdAt, -}: RaidUpdateProps) => { - return ( - <> +}: RaidUpdateProps) => ( + <> + - - - {update} + {update} + + + {member.name} @{' '} + {/* Changed 'smaller' to 'sm' */} + + {createdAt && format(new Date(createdAt), 'Pp')} - - {member.name} @{' '} - {/* Changed 'smaller' to 'sm' */} - - {createdAt && format(new Date(createdAt), 'Pp')} - - - + - - - ); -}; + + + +); export default RaidUpdate; diff --git a/apps/frontend/components/SiteLayoutPublic.tsx b/apps/frontend/components/SiteLayoutPublic.tsx index 5a9b858..1a1573c 100644 --- a/apps/frontend/components/SiteLayoutPublic.tsx +++ b/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(); diff --git a/apps/frontend/contexts/SplitsContext.tsx b/apps/frontend/contexts/SplitsContext.tsx index 70da2a9..f25382c 100644 --- a/apps/frontend/contexts/SplitsContext.tsx +++ b/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, diff --git a/apps/frontend/pages/_app.tsx b/apps/frontend/pages/_app.tsx index 5a28912..801643e 100644 --- a/apps/frontend/pages/_app.tsx +++ b/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) => { }} /> - + - - - + + + - - - + + + - + ); }; diff --git a/apps/frontend/pages/api/auth/[...nextauth].ts b/apps/frontend/pages/api/auth/[...nextauth].ts index d881772..d5f677a 100644 --- a/apps/frontend/pages/api/auth/[...nextauth].ts +++ b/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, }, callbacks: { jwt: async ({ token }) => { diff --git a/apps/frontend/pages/escrow/[raidId].tsx b/apps/frontend/pages/escrow/[raidId].tsx index 691b145..994197d 100644 --- a/apps/frontend/pages/escrow/[raidId].tsx +++ b/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 = ({ switchNetwork(raid.invoice.chainId)} + onClick={() => switchChain({ chainId: raid.invoice.chainId })} _hover={{ cursor: 'pointer', textDecor: 'underline' }} > {chainsMap(raid.invoice.chainId).name} diff --git a/apps/frontend/pages/escrow/index.tsx b/apps/frontend/pages/escrow/index.tsx index b33c514..d3e95cd 100644 --- a/apps/frontend/pages/escrow/index.tsx +++ b/apps/frontend/pages/escrow/index.tsx @@ -23,7 +23,7 @@ import Link from 'next/link'; import { useSession } from 'next-auth/react'; import { NextSeo } from 'next-seo'; import { useForm } from 'react-hook-form'; -import { useChainId, useSwitchNetwork } from 'wagmi'; +import { useChainId, useSwitchChain } from 'wagmi'; import { optimism } from 'wagmi/chains'; import SiteLayoutPublic from '../../components/SiteLayoutPublic'; @@ -73,7 +73,7 @@ export const Escrow = () => { const token = _.get(session, 'token'); const chainId = useChainId(); - const { switchNetwork } = useSwitchNetwork(); + const { switchChain } = useSwitchChain(); const localForm = useForm(); const { watch } = localForm; const raidId = watch('raidId'); @@ -153,7 +153,7 @@ export const Escrow = () => { - -