Merge Optimism on Smart Escrow feature to main (#151)

* Upgrade accounting page for moloch v3 (#149) * Add v2 and v3 panels for each tab (#131) Co-authored-by: growindiedev <[email protected]> * PR for #132 (#138) * organise memos in one hook * split useAccounting into useAccountingV2 & useAccountingV3 * Remove useAccounting hook --------- Co-authored-by: ECWireless <[email protected]> * needs clean up * cleaned up useAccountingV3 * [WIP] Accounting Fixes + Transaction Data (#141) * fix issue * fetch tx data * proposal data * wip * wip2 * fetch all transactions * use bigint for calculating sum of in/out flows * transactions * cache results * display member & proposal & proposal link * fix proposals * fix type * cleanup * set balancesWithPricesV3 data for csv export fix * add elapsed days and ragequit shares * add in/out/balance USD * rename * fix types * token symbol value --------- Co-authored-by: vidvidvid <[email protected]> * render v3 spoils in spoils table (#148) * remove V2 data from accounting and fixed type and export errors * fetch smartInvoices and add query to fecth raids * create formatSpoils function and raids query mvp * unsuccessful attempt to fetch raids in useAccountingV3 * fetch invoice and raids and map them together using formatSpoils * render formatted spoils in spoilsTable * clean up useAccountingV3 & useFormattedDataV3 * cleanup accounting.tsx * change file names for useFormattedData to useFormattedAccountingV3 * Minor tweaks --------- Co-authored-by: growindiedev <[email protected]> Co-authored-by: Abhishek Ranjan <[email protected]> Co-authored-by: Sero <[email protected]> Co-authored-by: vidvidvid <[email protected]> * Add invoices table and allow for Optimism chain invoices (#147) * Add invoices table * Remove unused remote schemas * Add Optimism to escrow network config * Prompt user to switch chain if unsupported * Add warnings for Optimism and Mainnet chains * Prevent RIP escrow on Optimism * Ensure that user is always on the right chain * Restrict to native USDC on Optimism * Add insert invoice to Hasura functionality * Add created_at and updated_at columns * Ensure create escrow link allows chain selection * Add chain ID to escrow confirmation * Render chain ID name to raid and escrow pages * Format amounts with correct decimals --------- Co-authored-by: growindiedev <[email protected]> Co-authored-by: Abhishek Ranjan <[email protected]> Co-authored-by: Sero <[email protected]> Co-authored-by: vidvidvid <[email protected]>
raid-guild · Aug 11, 2024 · 418f339 · 418f339
1 parent 6e2b23d
commit 418f339
Show file tree

Hide file tree

Showing 57 changed files with 738 additions and 298 deletions.
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
@@ -22,5 +22,7 @@ NEXT_PUBLIC_WC_PROJECT_ID=
 GITHUB_API_TOKEN=
 GITHUB_API_URL='https://api.github.com/graphql'
 
+PINATA_JWT=
+
 # create one for prod here: https://thegraph.com/studio/
-NEXT_PUBLIC_THE_GRAPH_API_KEY=
+NEXT_PUBLIC_THE_GRAPH_API_KEY=
diff --git a/apps/frontend/components/Escrow/DepositFunds.tsx b/apps/frontend/components/Escrow/DepositFunds.tsx
@@ -81,12 +81,12 @@ const DepositFunds = ({
       : tokenBalance?.formatted;
   const decimals =
     paymentType?.value === PAYMENT_TYPES.NATIVE ? 18 : tokenBalance?.decimals;
-  const hasAmount =
-    balance >= BigInt(amount) * BigInt(10) ** BigInt(decimals || 0);
+  const hasAmount = balance >= parseUnits(amount, decimals);
 
   const { handleDeposit, isLoading, isReady } = useDeposit({
     invoice,
     amount,
+    decimals,
     hasAmount, // (+ gas)
     paymentType: paymentType?.value,
   });
@@ -112,9 +112,12 @@ const DepositFunds = ({
 
     setValue(
       'checked',
-      depositedMilestones(BigInt(deposited) + parseUnits(amount, 18), amounts)
+      depositedMilestones(
+        BigInt(deposited) + parseUnits(amount, decimals),
+        amounts
+      )
     );
-  }, [amount, deposited, amounts, setValue]);
+  }, [amount, amounts, decimals, deposited, setValue]);
 
   return (
     <VStack w='100%' spacing='1rem'>
@@ -136,7 +139,7 @@ const DepositFunds = ({
       </Text>
       <VStack spacing='0.5rem' align='center'>
         {_.map(amounts, (a: number, i: number) => (
-          <HStack>
+          <HStack key={`milestone-${i}`}>
             <Checkbox
               mx='auto'
               key={i.toString()}
@@ -156,7 +159,7 @@ const DepositFunds = ({
                     ? totAmount - BigInt(deposited)
                     : BigInt(0);
 
-                setValue('amount', formatUnits(newAmount, 18));
+                setValue('amount', formatUnits(newAmount, decimals));
               }}
               color='yellow.300'
               border='none'
@@ -166,7 +169,7 @@ const DepositFunds = ({
             >
               <Text>
                 Payment #{i + 1} -{'  '}
-                {commify(formatUnits(BigInt(a), 18))}{' '}
+                {commify(formatUnits(BigInt(a), decimals))}{' '}
                 {parseTokenAddress(chainId, token)}
               </Text>
             </Checkbox>
@@ -224,7 +227,7 @@ const DepositFunds = ({
             )}
           </Flex>
         </Flex>
-        {BigInt(amount) * BigInt(10) ** BigInt(decimals || 0) > due && (
+        {parseUnits(amount, decimals) > due && (
           <Alert bg='purple.900' borderRadius='md' mt={4}>
             <AlertIcon color='primary.300' />
             <AlertTitle fontSize='sm'>
@@ -245,7 +248,7 @@ const DepositFunds = ({
             <Text fontWeight='bold'>Total Deposited</Text>
             <Text>
               {`${commify(
-                formatUnits(BigInt(deposited), 18)
+                formatUnits(BigInt(deposited), decimals)
               )} ${parseTokenAddress(chainId, token)}`}
             </Text>
           </VStack>
@@ -254,7 +257,7 @@ const DepositFunds = ({
           <VStack>
             <Text fontWeight='bold'>Total Due</Text>
             <Text>
-              {`${formatUnits(BigInt(due), 18)} ${parseTokenAddress(
+              {`${formatUnits(BigInt(due), decimals)} ${parseTokenAddress(
                 chainId,
                 token
               )}`}
@@ -266,7 +269,7 @@ const DepositFunds = ({
             <Text fontWeight='bold'>Your Balance</Text>
             <Text>
               {`${_.toNumber(displayBalance).toFixed(2)} ${
-                paymentType === 0
+                paymentType?.value === PAYMENT_TYPES.TOKEN
                   ? parseTokenAddress(chainId, token)
                   : TOKEN_DATA.nativeSymbol
               }`}

diff --git a/apps/frontend/components/Escrow/EscrowConfirmation.tsx b/apps/frontend/components/Escrow/EscrowConfirmation.tsx
@@ -7,9 +7,9 @@ import {
   Tooltip,
 } from '@raidguild/design-system';
 import { IRaid } from '@raidguild/dm-types';
-import { commify } from '@raidguild/dm-utils';
+import { chainsMap, commify } from '@raidguild/dm-utils';
 import { useEscrowZap, useRegister } from '@raidguild/escrow-hooks';
-import { GANGGANG_MULTISIG } from '@raidguild/escrow-utils';
+import { GANGGANG_MULTISIG, NETWORK_CONFIG } from '@raidguild/escrow-utils';
 import _ from 'lodash';
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { UseFormReturn } from 'react-hook-form';
@@ -153,7 +153,9 @@ const EscrowConfirmation = ({
     {
       label: 'Arbitration Provider',
       value: daoSplit ? (
-        'LexDAO'
+        Object.keys(NETWORK_CONFIG[chainId].RESOLVERS).map(
+          (key) => NETWORK_CONFIG[chainId].RESOLVERS[key]?.name
+        )[0]
       ) : (
         <Tooltip
           label='No DAO split'
@@ -180,6 +182,14 @@ const EscrowConfirmation = ({
     <Card as={Flex} variant='filled' direction='column' minWidth='50%'>
       <Stack spacing={6} w='100%'>
         <Stack>
+          <Flex justify='space-between'>
+            <Text fontWeight='bold' variant='textOne'>
+              Chain
+            </Text>
+            <Text variant='textOne' color='yellow.500'>
+              {chainsMap(chainId)?.name}
+            </Text>
+          </Flex>
           {_.map(_.compact(invoiceDetails), ({ label, value }) => (
             <Flex justify='space-between' key={label}>
               <Text fontWeight='bold' variant='textOne'>

diff --git a/apps/frontend/components/Escrow/EscrowDetailsForm.tsx b/apps/frontend/components/Escrow/EscrowDetailsForm.tsx
@@ -11,17 +11,18 @@ import {
   Stack,
 } from '@raidguild/design-system';
 import { IRaid } from '@raidguild/dm-types';
-import { SUPPORTED_NETWORKS } from '@raidguild/escrow-gql';
-import { GANGGANG_MULTISIG, Invoice } from '@raidguild/escrow-utils';
+import { unsupportedNetwork } from '@raidguild/escrow-gql';
+import {
+  GANGGANG_MULTISIG,
+  Invoice,
+  NETWORK_CONFIG,
+} from '@raidguild/escrow-utils';
 import _ from 'lodash';
 import { useEffect } from 'react';
 import { useForm, UseFormReturn } from 'react-hook-form';
 import { useChainId } from 'wagmi';
 import * as Yup from 'yup';
 
-const unsupportedNetwork = (chainId: number) =>
-  !_.includes(SUPPORTED_NETWORKS, chainId);
-
 export const sevenDaysFromNow = () => {
   const localDate = new Date();
   localDate.setDate(localDate.getDate() + 7);
@@ -172,7 +173,13 @@ const EscrowDetailsForm = ({
           <Input
             name='resolver'
             label='Arbitration Provider'
-            value={localDaoSplit ? 'LexDAO' : 'RaidGuild DAO'}
+            value={
+              localDaoSplit
+                ? Object.keys(NETWORK_CONFIG[chainId].RESOLVERS).map(
+                    (key) => NETWORK_CONFIG[chainId].RESOLVERS[key]?.name
+                  )[0]
+                : 'RaidGuild DAO'
+            }
             localForm={localForm}
             isDisabled
           />

diff --git a/apps/frontend/components/Escrow/EscrowSuccess.tsx b/apps/frontend/components/Escrow/EscrowSuccess.tsx
@@ -47,8 +47,8 @@ const EscrowSuccess = ({ raidId, txHash }: { raidId: string; txHash: Hex }) => {
     setAddresses(decodedAddresses);
     // update raid record with new invoice address
     if (!raidId) return;
-    updateRaidInvoice(raidId, _.nth(decodedAddresses, 3));
-  }, [txData, raidId]);
+    updateRaidInvoice(chainId, raidId, _.nth(decodedAddresses, 3));
+  }, [chainId, txData, raidId]);
 
   // const { onCopy } = useClipboard(
   //   `https://${window.location.hostname}/escrow/${raidId}`

diff --git a/apps/frontend/components/Escrow/InvoiceMetaDetails.tsx b/apps/frontend/components/Escrow/InvoiceMetaDetails.tsx
@@ -1,4 +1,16 @@
-import { Flex, HStack, Stack, Text, Tooltip } from '@raidguild/design-system';
+import {
+  Flex,
+  HStack,
+  Image,
+  Stack,
+  Text,
+  Tooltip,
+} from '@raidguild/design-system';
+import {
+  chainIdToIconMap,
+  chainsMap,
+  networkToIdMap,
+} from '@raidguild/dm-utils';
 import { getResolverInfo, Invoice } from '@raidguild/escrow-utils';
 import _ from 'lodash';
 import { useMemo } from 'react';
@@ -46,6 +58,19 @@ const InvoiceMetaDetails = ({
 
   return (
     <Stack mt='2rem' w='100%'>
+      <Flex justifyContent='space-between' fontSize='sm'>
+        <Text fontFamily='texturina' fontWeight='bold'>
+          Chain:
+        </Text>
+        <HStack>
+          <Text>{chainsMap(networkToIdMap(invoice.network)).name}</Text>
+          <Image
+            alt={invoice.network}
+            boxSize='18px'
+            src={chainIdToIconMap(networkToIdMap(invoice.network))}
+          />
+        </HStack>
+      </Flex>
       <Flex justifyContent='space-between' fontSize='sm'>
         <Text fontWeight='bold' fontFamily='texturina'>
           Safety Valve Date:

diff --git a/apps/frontend/components/Escrow/InvoicePaymentDetails.tsx b/apps/frontend/components/Escrow/InvoicePaymentDetails.tsx
@@ -24,6 +24,7 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
     released,
     total,
     token,
+    tokenMetadata: { decimals },
     address: invoiceAddress,
     isLocked,
     disputes,
@@ -73,7 +74,7 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
         >
           <Text variant='textOne'>Total Project Amount</Text>
           <Text variant='textOne'>
-            {commify(formatUnits(BigInt(total), 18))}{' '}
+            {commify(formatUnits(BigInt(total), decimals))}{' '}
             {parseTokenAddress(chainId, token)}
           </Text>
         </HStack>
@@ -151,10 +152,9 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
                   variant='textOne'
                   textAlign='right'
                   fontWeight='500'
-                >{`${commify(formatUnits(BigInt(amt), 18))} ${parseTokenAddress(
-                  chainId,
-                  invoice.token
-                )}`}</Text>
+                >{`${commify(
+                  formatUnits(BigInt(amt), decimals)
+                )} ${parseTokenAddress(chainId, invoice.token)}`}</Text>
               </HStack>
             </Flex>
           ))}
@@ -164,21 +164,21 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
         <HStack mt='1rem' mb='.2rem' justifyContent='space-between'>
           <Text variant='textOne'>Total Deposited</Text>
           <Text variant='textOne'>
-            {commify(formatUnits(deposited, 18))}{' '}
+            {commify(formatUnits(deposited, decimals))}{' '}
             {parseTokenAddress(chainId, invoice.token)}
           </Text>
         </HStack>
         <HStack justifyContent='space-between' mb='.2rem'>
           <Text variant='textOne'>Total Released</Text>
           <Text variant='textOne'>
-            {commify(formatUnits(BigInt(released), 18))}{' '}
+            {commify(formatUnits(BigInt(released), decimals))}{' '}
             {parseTokenAddress(chainId, invoice.token)}
           </Text>
         </HStack>
         <HStack justifyContent='space-between'>
           <Text variant='textOne'>Remaining Amount Due</Text>
           <Text variant='textOne'>
-            {commify(formatUnits(due, 18))}{' '}
+            {commify(formatUnits(due, decimals))}{' '}
             {parseTokenAddress(chainId, invoice.token)}
           </Text>
         </HStack>
@@ -198,7 +198,7 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
                 <Text>Remaining Balance</Text>
                 <Text textAlign='right'>{`${formatUnits(
                   balance,
-                  18
+                  decimals
                 )} ${parseTokenAddress(chainId, invoice.token)}`}</Text>{' '}
               </>
             ) : (
@@ -208,7 +208,10 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
                   {!isReleasable && 'Total Due Today'}
                 </Text>
                 <Text textAlign='right'>{`${commify(
-                  formatUnits(isReleasable ? amount : amount - balance, 18)
+                  formatUnits(
+                    isReleasable ? amount : amount - balance,
+                    decimals
+                  )
                 )} ${parseTokenAddress(chainId, invoice.token)}`}</Text>
               </>
             )}
@@ -227,7 +230,7 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
               <Text>Amount Locked</Text>
               <Text textAlign='right'>{`${formatUnits(
                 balance,
-                18
+                decimals
               )} ${parseTokenAddress(chainId, invoice.token)}`}</Text>
             </Flex>
             <Text fontFamily='texturina' color='purpleLight'>
@@ -261,7 +264,7 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
                   resolution.resolutionFee
                   ? resolution.resolutionFee
                   : 0,
-                18
+                decimals
               )} ${parseTokenAddress(chainId, invoice.token)}`}</Text>
             </Flex>
             <Flex
@@ -292,22 +295,22 @@ const InvoicePaymentDetails = ({ invoice }: { invoice: Invoice }) => {
                   <Text textAlign='right' color='purpleLight'>
                     {`${formatUnits(
                       BigInt(resolution.resolutionFee),
-                      18
+                      decimals
                     )} ${parseTokenAddress(chainId, invoice.token)} to `}
                     <AccountLink address={resolver} chainId={chainId} />
                   </Text>
                 )}
                 <Text textAlign='right' color='purpleLight'>
                   {`${formatUnits(
                     BigInt(resolution.clientAward),
-                    18
+                    decimals
                   )} ${parseTokenAddress(chainId, invoice.token)} to `}
                   <AccountLink address={client} chainId={chainId} />
                 </Text>
                 <Text textAlign='right' color='purpleLight'>
                   {`${formatUnits(
                     BigInt(resolution.providerAward),
-                    18
+                    decimals
                   )} ${parseTokenAddress(chainId, invoice.token)} to `}
                   <AccountLink address={invoice.provider} chainId={chainId} />
                 </Text>

diff --git a/apps/frontend/components/Escrow/LockFunds.tsx b/apps/frontend/components/Escrow/LockFunds.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Flex,
   Heading,
-  Image,
   Link,
   Spinner,
   Text,
@@ -25,7 +24,6 @@ import { useForm } from 'react-hook-form';
 import { formatUnits, Hex } from 'viem';
 import { useChainId } from 'wagmi';
 
-import LockImage from '../../assets/lock.svg';
 import AccountLink from './shared/AccountLink';
 
 const parseTokenAddress = (chainId: number, address: Hex) => {
@@ -54,12 +52,12 @@ const LockFunds = ({
 
   const fee = formatUnits(
     resolutionRate === 0 ? BigInt(0) : BigInt(balance) / BigInt(resolutionRate),
-    18
+    invoice.tokenMetadata.decimals
   );
   const feeDisplay = `${fee} ${parseTokenAddress(chainId, token)}`;
 
   const disputeReason = useDebounce(watch('disputeReason'), 250);
-  const amount = formatUnits(BigInt(balance), 18);
+  const amount = formatUnits(BigInt(balance), invoice.tokenMetadata.decimals);
 
   // const onSuccess = () => {
   //   // handle tx success
@@ -175,10 +173,10 @@ const LockFunds = ({
         textTransform='uppercase'
         variant='solid'
       >
-        {`Lock ${formatUnits(BigInt(balance), 18)} ${parseTokenAddress(
-          chainId,
-          token
-        )}`}
+        {`Lock ${formatUnits(
+          BigInt(balance),
+          invoice.tokenMetadata.decimals
+        )} ${parseTokenAddress(chainId, token)}`}
       </Button>
       {isKnownResolver(chainId, resolver) && (
         <Link