Refactor CreateProposalTemplateForm into generic ProposalBuilder

src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx → src/components/ProposalBuilder/ProposalDetails.tsx

@@ -3,7 +3,7 @@ import { FormikProps } from 'formik';
 import { Fragment, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
-import { CreateProposalTemplateForm } from '../../types/createProposalTemplate';
+import { CreateProposalForm } from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
 import '../../assets/css/Markdown.css';
 
@@ -29,10 +29,10 @@ export function TransactionValueContainer({
 }
 
 export default function ProposalTemplateDetails({
-  values: { proposalTemplateMetadata, transactions },
-}: FormikProps<CreateProposalTemplateForm>) {
+  values: { proposalMetadata, transactions },
+}: FormikProps<CreateProposalForm>) {
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
-  const trimmedTitle = proposalTemplateMetadata.title?.trim();
+  const trimmedTitle = proposalMetadata.title?.trim();
 
   return (
     <Box
@@ -67,7 +67,7 @@ export default function ProposalTemplateDetails({
         <HStack justifyContent="space-between">
           <Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
           <Markdown
-            content={proposalTemplateMetadata.description}
+            content={proposalMetadata.description}
             collapsedLines={2}
           />
         </HStack>

src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx → src/components/ProposalBuilder/ProposalMetadata.tsx

@@ -1,22 +1,20 @@
 import { Button, Divider, VStack } from '@chakra-ui/react';
 import { FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
-import {
-  CreateProposalTemplateForm,
-  CreateProposalTemplateFormState,
-} from '../../types/createProposalTemplate';
+import { CreateProposalState } from '../../types';
+import { CreateProposalForm } from '../../types/proposalBuilder';
 import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';
 
-export interface ProposalTemplateMetadataProps extends FormikProps<CreateProposalTemplateForm> {
-  setFormState: (state: CreateProposalTemplateFormState) => void;
+export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
+  setFormState: (state: CreateProposalState) => void;
 }
 
-export default function ProposalTemplateMetadata({
-  values: { proposalTemplateMetadata },
+export default function ProposalMetadata({
+  values: { proposalMetadata },
   setFieldValue,
-  errors: { proposalTemplateMetadata: proposalTemplateMetadataError },
+  errors: { proposalMetadata: proposalMetadataError },
   setFormState,
-}: ProposalTemplateMetadataProps) {
+}: ProposalMetadataProps) {
   const { t } = useTranslation(['proposalTemplate', 'common']);
 
   return (
@@ -30,8 +28,8 @@ export default function ProposalTemplateMetadata({
           label={t('proposalTemplateTitle')}
           helper={t('proposalTemplateTitleHelperText')}
           isRequired
-          value={proposalTemplateMetadata.title}
-          onChange={e => setFieldValue('proposalTemplateMetadata.title', e.target.value)}
+          value={proposalMetadata.title}
+          onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
           disabled={false}
           testId="metadata.title"
           maxLength={50}
@@ -41,8 +39,8 @@ export default function ProposalTemplateMetadata({
           subLabel={t('')}
           helper={t('proposalTemplateDescriptionHelperText')}
           isRequired={false}
-          value={proposalTemplateMetadata.description}
-          onChange={e => setFieldValue('proposalTemplateMetadata.description', e.target.value)}
+          value={proposalMetadata.description}
+          onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
           disabled={false}
           rows={12}
         />
@@ -54,8 +52,8 @@ export default function ProposalTemplateMetadata({
       />
       <Button
         w="100%"
-        onClick={() => setFormState(CreateProposalTemplateFormState.TRANSACTIONS_FORM)}
-        isDisabled={!!proposalTemplateMetadataError || !proposalTemplateMetadata.title}
+        onClick={() => setFormState(CreateProposalState.TRANSACTIONS_FORM)}
+        isDisabled={!!proposalMetadataError || !proposalMetadata.title}
       >
         {t('next', { ns: 'common' })}
       </Button>

src/components/CreateProposalTemplate/ProposalTemplateTransaction.tsx → src/components/ProposalBuilder/ProposalTransaction.tsx

@@ -2,29 +2,29 @@ import { VStack, HStack, Text, Box, Flex, IconButton } from '@chakra-ui/react';
 import { AddPlus, Minus } from '@decent-org/fractal-ui';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CreateProposalTemplateTransaction } from '../../types/createProposalTemplate';
+import { CreateProposalTransaction } from '../../types/proposalBuilder';
 import ABISelector, { ABIElement } from '../ui/forms/ABISelector';
 import ExampleLabel from '../ui/forms/ExampleLabel';
 import { BigNumberComponent, InputComponent } from '../ui/forms/InputComponent';
-import { DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION } from './constants';
+import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
-interface ProposalTemplateTransactionProps {
-  transaction: CreateProposalTemplateTransaction;
+interface ProposalTransactionProps {
+  transaction: CreateProposalTransaction;
   transactionIndex: number;
   transactionPending: boolean;
   txAddressError?: string;
   txFunctionError?: string;
   setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
 }
 
-export default function ProposalTemplateTransaction({
+export default function ProposalTransaction({
   transaction,
   transactionIndex,
   transactionPending,
   txAddressError,
   txFunctionError,
   setFieldValue,
-}: ProposalTemplateTransactionProps) {
+}: ProposalTransactionProps) {
   const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
   const handleABISelectorChange = useCallback(
     (value: ABIElement) => {
@@ -123,7 +123,7 @@ export default function ProposalTemplateTransaction({
                 onClick={() =>
                   setFieldValue(`transactions.${transactionIndex}.parameters`, [
                     ...transaction.parameters,
-                    DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION,
+                    DEFAULT_PROPOSAL_TRANSACTION,
                   ])
                 }
               >

src/components/CreateProposalTemplate/ProposalTemplateTransactions.tsx → src/components/ProposalBuilder/ProposalTransactions.tsx

@@ -12,25 +12,22 @@ import { FormikErrors, FormikProps } from 'formik';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BigNumberValuePair } from '../../types';
-import {
-  CreateProposalTemplateForm,
-  CreateProposalTemplateTransaction,
-} from '../../types/createProposalTemplate';
-import ProposalTemplateTransaction from './ProposalTemplateTransaction';
+import { CreateProposalForm, CreateProposalTransaction } from '../../types/proposalBuilder';
+import ProposalTransaction from './ProposalTransaction';
 
-interface ProposalTemplateTransactionsProps extends FormikProps<CreateProposalTemplateForm> {
+interface ProposalTransactionsProps extends FormikProps<CreateProposalForm> {
   pendingTransaction: boolean;
   expandedIndecies: number[];
   setExpandedIndecies: Dispatch<SetStateAction<number[]>>;
 }
-export default function ProposalTemplateTransactions({
+export default function ProposalTransactions({
   values: { transactions },
   errors,
   setFieldValue,
   pendingTransaction,
   expandedIndecies,
   setExpandedIndecies,
-}: ProposalTemplateTransactionsProps) {
+}: ProposalTransactionsProps) {
   const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
 
   const removeTransaction = (transactionIndex: number) => {
@@ -46,7 +43,7 @@ export default function ProposalTemplateTransactions({
     >
       {transactions.map((_, index) => {
         const txErrors = errors?.transactions?.[index] as
-          | FormikErrors<CreateProposalTemplateTransaction<BigNumberValuePair>>
+          | FormikErrors<CreateProposalTransaction<BigNumberValuePair>>
           | undefined;
         const txAddressError = txErrors?.targetAddress;
         const txFunctionError = txErrors?.functionName;
@@ -101,8 +98,8 @@ export default function ProposalTemplateTransactions({
                   )}
                 </HStack>
                 <AccordionPanel p={0}>
-                  <ProposalTemplateTransaction
-                    transaction={transactions[index]}
+                  <ProposalTransaction
+                    transaction={transactions[index] as CreateProposalTransaction}
                     txFunctionError={txFunctionError}
                     txAddressError={txAddressError}
                     transactionIndex={index}

src/components/CreateProposalTemplate/ProposalTemplateTransactionsForm.tsx → src/components/ProposalBuilder/ProposalTransactionsForm.tsx

@@ -3,24 +3,20 @@ import { Info } from '@decent-org/fractal-ui';
 import { FormikProps } from 'formik';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  CreateProposalTemplateForm,
-  CreateProposalTemplateFormState,
-} from '../../types/createProposalTemplate';
+import { CreateProposalState } from '../../types';
+import { CreateProposalForm } from '../../types/proposalBuilder';
 import { scrollToBottom } from '../../utils/ui';
-import ProposalTemplateTransactions from './ProposalTemplateTransactions';
-import { DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION } from './constants';
+import ProposalTransactions from './ProposalTransactions';
+import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
-interface ProposalTemplateTransactionsFormProps extends FormikProps<CreateProposalTemplateForm> {
+interface ProposalTransactionsFormProps extends FormikProps<CreateProposalForm> {
   pendingTransaction: boolean;
-  setFormState: (state: CreateProposalTemplateFormState) => void;
+  setFormState: (state: CreateProposalState) => void;
   canUserCreateProposal?: boolean;
   safeNonce?: number;
 }
 
-export default function ProposalTemplateTransactionsForm(
-  props: ProposalTemplateTransactionsFormProps,
-) {
+export default function ProposalTransactionsForm(props: ProposalTransactionsFormProps) {
   const {
     pendingTransaction,
     setFormState,
@@ -41,7 +37,7 @@ export default function ProposalTemplateTransactionsForm(
 
   return (
     <Box>
-      <ProposalTemplateTransactions
+      <ProposalTransactions
         expandedIndecies={expandedIndecies}
         setExpandedIndecies={setExpandedIndecies}
         {...props}
@@ -54,7 +50,7 @@ export default function ProposalTemplateTransactionsForm(
         <Button
           variant="text"
           onClick={() => {
-            setFieldValue('transactions', [...transactions, DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION]);
+            setFieldValue('transactions', [...transactions, DEFAULT_PROPOSAL_TRANSACTION]);
             setExpandedIndecies([transactions.length]);
             scrollToBottom();
           }}
@@ -85,7 +81,7 @@ export default function ProposalTemplateTransactionsForm(
             textStyle="text-md-mono-regular"
             color="gold.500"
             cursor="pointer"
-            onClick={() => setFormState(CreateProposalTemplateFormState.METADATA_FORM)}
+            onClick={() => setFormState(CreateProposalState.METADATA_FORM)}
             mb={4}
           >
             {t('back', { ns: 'common' })}

src/components/CreateProposalTemplate/constants.ts → src/components/ProposalBuilder/constants.ts

@@ -1,6 +1,6 @@
-import { CreateProposalTemplateTransaction } from '../../types/createProposalTemplate';
+import { CreateProposalTransaction } from '../../types/proposalBuilder';
 
-export const DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION: CreateProposalTemplateTransaction = {
+export const DEFAULT_PROPOSAL_TRANSACTION: CreateProposalTransaction = {
   targetAddress: '',
   ethValue: { value: '', bigNumberValue: undefined },
   functionName: '',
@@ -15,9 +15,9 @@ export const DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION: CreateProposalTemplateTransa
 
 export const DEFAULT_PROPOSAL_TEMPLATE = {
   nonce: undefined,
-  proposalTemplateMetadata: {
+  proposalMetadata: {
     title: '',
     description: '',
   },
-  transactions: [DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION],
+  transactions: [DEFAULT_PROPOSAL_TRANSACTION],
 };