add support for escrow proposal type

Author: dan13ram

apps/web/package.json

@@ -20,6 +20,7 @@
     "@fontsource/londrina-solid": "^4.5.9",
     "@rainbow-me/rainbowkit": "^1.3.1",
     "@sentry/nextjs": "^7.105.0",
+    "@smartinvoicexyz/constants": "^0.1.17",
     "@types/lodash": "^4.14.186",
     "@types/react-portal": "^4.0.4",
     "@types/tinycolor2": "^1.4.3",
@@ -32,6 +33,7 @@
     "axios": "^0.27.2",
     "bignumber.js": "^9.1.0",
     "blocklist": "workspace:*",
+    "bs58": "^5.0.0",
     "dayjs": "^1.11.3",
     "flatpickr": "^4.6.13",
     "formik": "^2.2.9",

apps/web/src/components/Fields/Date.tsx

@@ -5,6 +5,7 @@ import React, { ReactElement } from 'react'
 
 import {
   defaultFieldsetStyle,
+  defaultHelperTextStyle,
   defaultInputErrorMessageStyle,
   defaultInputErrorStyle,
   defaultInputLabelStyle,
@@ -18,6 +19,7 @@ interface DateProps {
   formik: FormikProps<any>
   id: string
   errorMessage: string | FormikErrors<any> | string[] | undefined | FormikErrors<any>[]
+  helperText?: string
   value: any
   altFormat?: string
   dateFormat?: string
@@ -34,6 +36,7 @@ const Date: React.FC<DateProps> = (
     formik,
     id,
     errorMessage,
+    helperText,
     autoSubmit,
     value,
     placeholder,
@@ -70,10 +73,10 @@ const Date: React.FC<DateProps> = (
       {inputLabel && <label className={defaultInputLabelStyle}>{inputLabel}</label>}
       {errorMessage && (
         <Box
-          position={'absolute'}
           right={'x2'}
-          top={'x8'}
-          fontSize={12}
+          top={'x15'}
+          pt={'x4'}
+          fontSize={14}
           className={defaultInputErrorMessageStyle}
         >
           {errorMessage as string}
@@ -89,6 +92,17 @@ const Date: React.FC<DateProps> = (
         readOnly={true}
         disabled={disabled}
       />
+      {helperText && (
+        <Box
+          right={'x2'}
+          top={'x15'}
+          pt={'x4'}
+          fontSize={14}
+          className={defaultHelperTextStyle}
+        >
+          {helperText}
+        </Box>
+      )}
     </Box>
   )
 }

apps/web/src/components/Home/accordian/AccordionItem.tsx

@@ -6,9 +6,10 @@ import { Icon } from 'src/components/Icon'
 
 import { accordionItem, accordionName } from '../../../styles/home.css'
 
-const AccordionItem: React.FC<{ title: string; description: ReactElement }> = (
-  { title, description }
-) => {
+const AccordionItem: React.FC<{
+  title: string | ReactElement
+  description: ReactElement
+}> = ({ title, description }) => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false)
   const variants = {
     initial: {

apps/web/src/components/Home/accordian/index.tsx

@@ -3,9 +3,9 @@ import React, { ReactElement } from 'react'
 
 import AccordionItem from './AccordionItem'
 
-const Accordion: React.FC<{ items: { title: string; description: ReactElement }[] }> = ({
-  items,
-}) => {
+const Accordion: React.FC<{
+  items: { title: string | ReactElement; description: ReactElement }[]
+}> = ({ items }) => {
   return (
     <Stack>
       {items?.map((item, key) => (

apps/web/src/components/Icon/assets/escrow.svg

@@ -19,6 +19,7 @@ import Dash from './assets/dash.svg'
 import Discord from './assets/discord.svg'
 import Dots from './assets/dots.svg'
 import Download from './assets/download.svg'
+import Escrow from './assets/escrow.svg'
 import Eth from './assets/eth.svg'
 import External from './assets/external-16.svg'
 import Github from './assets/github.svg'
@@ -84,6 +85,7 @@ export const icons = {
   share: Share,
   warning: Warning,
   'warning-16': Warning16,
+  escrow: Escrow,
 }
 
 export type IconType = keyof typeof icons

apps/web/src/components/Icon/icons.ts

@@ -26,6 +26,7 @@ const SWR_KEYS = {
   ENCODED_DAO_METADATA: 'encoded-dao-metadata',
   DAO_MIGRATED: 'dao-migrated',
   DAO_NEXT_AND_PREVIOUS_TOKENS: 'dao-next-and-previous-tokens',
+  IPFS: 'ipfs',
   DYNAMIC: {
     MY_DAOS(str: string) {
       return `my-daos-${str}`

apps/web/src/constants/swrKeys.ts

@@ -23,6 +23,7 @@ import { AddressType, CHAIN_ID } from 'src/typings'
 
 import { BuilderTransaction, useProposalStore } from '../../stores'
 import { prepareProposalTransactions } from '../../utils/prepareTransactions'
+import { useEscrowFormStore } from '../TransactionForm/Escrow/EscrowUtils'
 import { Transactions } from './Transactions'
 import { ERROR_CODE, FormValues, validationSchema } from './fields'
 
@@ -69,6 +70,7 @@ export const ReviewProposalForm = ({
   const [simulating, setSimulating] = useState<boolean>(false)
   const [simulations, setSimulations] = useState<Array<Simulation>>([])
   const [proposing, setProposing] = useState<boolean>(false)
+  const { clear: clearEscrowForm } = useEscrowFormStore()
 
   const { data: votes, isLoading } = useContractRead({
     address: addresses?.token as AddressType,
@@ -178,6 +180,7 @@ export const ReviewProposalForm = ({
           .then(() => {
             setProposing(false)
             clearProposal()
+            clearEscrowForm()
           })
       } catch (err: any) {
         setProposing(false)

apps/web/src/modules/create-proposal/components/ReviewProposalForm/ReviewProposalForm.tsx

@@ -0,0 +1,163 @@
+import { Stack } from '@zoralabs/zord'
+import { useCallback } from 'hono/jsx'
+import { uploadFile } from 'ipfs-service'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { encodeFunctionData, formatEther } from 'viem'
+
+import SWR_KEYS from 'src/constants/swrKeys'
+import { ProposalsResponse } from 'src/data/subgraph/requests/proposalsQuery'
+import { getProposals } from 'src/data/subgraph/requests/proposalsQuery'
+import { TransactionType } from 'src/modules/create-proposal/constants'
+import { useProposalStore } from 'src/modules/create-proposal/stores'
+import { getChainFromLocalStorage } from 'src/utils/getChainFromLocalStorage'
+
+import EscrowForm from './EscrowForm'
+import { EscrowFormValues } from './EscrowForm.schema'
+import { useEscrowFormStore } from './EscrowUtils'
+import {
+  KLEROS_ARBITRATION_PROVIDER,
+  createEscrowData,
+  deployEscrowAbi,
+  getEscrowBundler,
+} from './EscrowUtils'
+
+export const Escrow: React.FC = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [ipfsUploadError, setIpfsUploadError] = useState<Error | null>(null)
+
+  const { query, isReady } = useRouter()
+
+  const { id: chainId } = getChainFromLocalStorage()
+
+  const addTransaction = useProposalStore((state) => state.addTransaction)
+
+  const { data } = useSWR<ProposalsResponse>(
+    isReady ? [SWR_KEYS.PROPOSALS, chainId, query.token, '0'] : null,
+    (_, chainId, token, page) => getProposals(chainId, token, 1, Number(0))
+  )
+
+  const lastProposalId = data?.proposals?.[0]?.proposalNumber ?? 0
+
+  const { formValues } = useEscrowFormStore()
+
+  const handleEscrowTransaction = useCallback(
+    async (values: EscrowFormValues) => {
+      const ipfsDataToUpload = {
+        title: 'Proposal #' + (lastProposalId + 1),
+        description: window?.location.href.replace(
+          '/proposal/create',
+          '/vote/' + lastProposalId + 1
+        ),
+        endDate: new Date(
+          values.milestones[values.milestones.length - 1].endDate
+        ).getTime(),
+        milestones: values.milestones.map((x, index) => ({
+          id: 'milestone-00' + index,
+          title: x.title,
+          description: x.description,
+          endDate: new Date(x.endDate).getTime() / 1000, // in seconds
+          createdAt: Date.now() / 1000, // in seconds
+          startDate: Date.now() + 7 * 86400, // set start date 7 days from submission in seconds
+          resolverType: 'kleros',
+          totalAmount: values.milestones.reduce((acc, x) => acc + x.amount, 0),
+          klerosCourt: 1,
+          arbitrationProvider: KLEROS_ARBITRATION_PROVIDER,
+          ...(x.mediaType && x.mediaUrl
+            ? {
+              documents: [
+                {
+                  id: 'doc-001',
+                  type: 'ipfs',
+                  src: x.mediaUrl,
+                  mimeType: x.mediaType,
+                  createdAt: new Date().getTime() / 1000,
+                },
+              ],
+            }
+            : {}),
+        })),
+      }
+
+      const jsonDataToUpload = JSON.stringify(ipfsDataToUpload, null, 2)
+      const fileToUpload = new File([jsonDataToUpload], 'escrow-data.json', {
+        type: 'application/json',
+      })
+
+      let cid: string, uri: string;
+
+      try {
+        console.log('Uploading to IPFS...')
+        setIsSubmitting(true)
+        const response = await uploadFile(fileToUpload, {
+          cache: true,
+          onProgress: (progress) => {
+            console.log(`Upload progress: ${progress}%`)
+          },
+        })
+        cid = response.cid
+        uri = response.uri
+        setIsSubmitting(false)
+        setIpfsUploadError(null)
+        console.log('IPFS upload successful. CID:', cid, 'URI:', uri)
+      } catch (err: any) {
+        console.log('IPFS upload error:', err)
+        setIsSubmitting(false)
+        setIpfsUploadError(
+          new Error(
+            `Sorry, there was an error with our file uploading service. ${err?.message}`
+          )
+        )
+        return
+      }
+
+      // create bundler transaction data
+      const escrowData = createEscrowData(values, cid, chainId)
+      const milestoneAmounts = values.milestones.map((x) => x.amount * 10 ** 18)
+      const fundAmount = milestoneAmounts.reduce((acc, x) => acc + x, 0)
+
+      console.log(milestoneAmounts, fundAmount)
+
+      const escrow = {
+        target: getEscrowBundler(chainId),
+        functionSignature: 'deployEscrow()',
+        calldata: encodeFunctionData({
+          abi: deployEscrowAbi,
+          functionName: 'deployEscrow',
+          args: [milestoneAmounts, escrowData, fundAmount],
+        }),
+        value: formatEther(BigInt(fundAmount)),
+      }
+
+      try {
+        // add 2.5s delay here before adding to queue
+        setTimeout(
+          () =>
+            addTransaction({
+              type: TransactionType.ESCROW,
+              summary: `Create and fund new Escrow with ${formatEther(
+                BigInt(fundAmount)
+              )} ETH`,
+              transactions: [escrow],
+            }),
+          2500
+        )
+      } catch (err) {
+        console.log('Error', err)
+      }
+      setIsSubmitting(false)
+    },
+    [formValues]
+  )
+
+  return (
+    <Stack>
+      <EscrowForm
+        onSubmit={handleEscrowTransaction}
+        isSubmitting={isSubmitting}
+      />
+      {ipfsUploadError?.message && <div>Error: {ipfsUploadError.message}</div>}
+    </Stack>
+  )
+}

apps/web/src/modules/create-proposal/components/TransactionForm/Escrow/Escrow.tsx

@@ -0,0 +1,60 @@
+import { Box, Stack, Text } from '@zoralabs/zord'
+import { useFormikContext } from 'formik'
+import { useBalance } from 'wagmi'
+
+import { useDaoStore } from 'src/modules/dao'
+import { useLayoutStore } from 'src/stores'
+import { useChainStore } from 'src/stores/useChainStore'
+
+import { EscrowFormValues } from './EscrowForm.schema'
+
+export default function EscrowDetailsDisplay() {
+  const { values } = useFormikContext<EscrowFormValues>()
+  const isMobile = useLayoutStore((x) => x.isMobile)
+
+  const { treasury } = useDaoStore((state) => state.addresses)
+  const chain = useChainStore((x) => x.chain)
+  const { data: treasuryBalance } = useBalance({
+    address: treasury,
+    chainId: chain.id,
+  })
+
+  const totalEscrowAmount = values?.milestones
+    .map((x) => x.amount)
+    .reduce((acc, x) => acc + x, 0)
+  return (
+    <Box
+      position={isMobile ? 'relative' : 'absolute'}
+      style={{
+        height: '100%',
+        maxWidth: isMobile ? '100%' : '50%',
+      }}
+      top={'x0'}
+      right={'x0'}
+    >
+      <Stack position={'sticky'} top={'x20'} right={'x0'} gap={'x5'} align="flex-end">
+        {Number(totalEscrowAmount) > Number(treasuryBalance?.formatted) && (
+          <Text variant="paragraph-sm" color="negative">
+            Escrow amount exceeding treasury balance
+          </Text>
+        )}
+        <Box>
+          <Text fontSize={12} color="text4" style={{ fontWeight: 'bold' }}>
+            Total Escrow Amount
+          </Text>
+          <Text variant="heading-sm" style={{ fontWeight: 'bold' }}>
+            {totalEscrowAmount ?? '0.00'} ETH
+          </Text>
+        </Box>
+        <Box style={{ textAlign: 'right' }}>
+          <Text fontSize={12} color="text4" style={{ fontWeight: 'bold' }}>
+            Escrow Service by
+          </Text>
+          <Text variant="heading-sm" style={{ fontWeight: 'bold' }}>
+            SmartInvoice
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  )
+}