Skip to content

Commit

Permalink
Eliminate CreateProposal and use ProposalBuilder instead
Browse files Browse the repository at this point in the history
  • Loading branch information
@mudrila
mudrila committed Apr 8, 2024
1 parent 9fd2565 commit 392eeea
Show file tree
Hide file tree
Showing 29 changed files with 178 additions and 925 deletions.
33 changes: 18 additions & 15 deletions src/components/ProposalBuilder/ProposalDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { CreateProposalForm } from '../../types/proposalBuilder';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import Markdown from '../ui/proposal/Markdown';
import '../../assets/css/Markdown.css';

Expand All @@ -30,7 +30,8 @@ export function TransactionValueContainer({

export default function ProposalTemplateDetails({
values: { proposalMetadata, transactions },
}: FormikProps<CreateProposalForm>) {
mode,
}: FormikProps<CreateProposalForm> & { mode: ProposalBuilderMode }) {
const { t } = useTranslation(['proposalTemplate', 'proposal']);
const trimmedTitle = proposalMetadata.title?.trim();

Expand All @@ -51,19 +52,21 @@ export default function ProposalTemplateDetails({
<Text color="grayscale.500">{t('previewTitle')}</Text>
<Text textAlign="right">{trimmedTitle}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('previewThumnbail')}</Text>
{trimmedTitle && (
<Avatar
size="sm"
w="28px"
h="28px"
name={trimmedTitle}
borderRadius="4px"
getInitials={(title: string) => title.slice(0, 2)}
/>
)}
</HStack>
{mode === 'template' && (
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('previewThumnbail')}</Text>
{trimmedTitle && (
<Avatar
size="sm"
w="28px"
h="28px"
name={trimmedTitle}
borderRadius="4px"
getInitials={(title: string) => title.slice(0, 2)}
/>
)}
</HStack>
)}
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
<Markdown
Expand Down
29 changes: 23 additions & 6 deletions src/components/ProposalBuilder/ProposalMetadata.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@ import { Button, Divider, VStack } from '@chakra-ui/react';
import { FormikProps } from 'formik';
import { useTranslation } from 'react-i18next';
import { CreateProposalState } from '../../types';
import { CreateProposalForm } from '../../types/proposalBuilder';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';

export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
setFormState: (state: CreateProposalState) => void;
mode: ProposalBuilderMode;
}

export default function ProposalMetadata({
values: { proposalMetadata },
setFieldValue,
errors: { proposalMetadata: proposalMetadataError },
setFormState,
mode,
}: ProposalMetadataProps) {
const { t } = useTranslation(['proposalTemplate', 'common']);
const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
const isProposalMode = mode === 'proposal';

return (
<>
Expand All @@ -25,8 +28,14 @@ export default function ProposalMetadata({
mt={4}
>
<InputComponent
label={t('proposalTemplateTitle')}
helper={t('proposalTemplateTitleHelperText')}
label={
isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')
}
helper={
isProposalMode
? t('proposalTitleHelper', { ns: 'proposal' })
: t('proposalTemplateTitleHelperText')
}
isRequired
value={proposalMetadata.title}
onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
Expand All @@ -35,9 +44,17 @@ export default function ProposalMetadata({
maxLength={50}
/>
<TextareaComponent
label={t('proposalTemplateDescription')}
label={
isProposalMode
? t('proposalDescription', { ns: 'proposal' })
: t('proposalTemplateDescription')
}
subLabel={t('')}
helper={t('proposalTemplateDescriptionHelperText')}
helper={
isProposalMode
? t('proposalDescriptionHelper', { ns: 'proposal' })
: t('proposalTemplateDescriptionHelperText')
}
isRequired={false}
value={proposalMetadata.description}
onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
Expand Down
77 changes: 44 additions & 33 deletions src/components/ProposalBuilder/ProposalTransaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 { CreateProposalTransaction } from '../../types/proposalBuilder';
import { CreateProposalTransaction, ProposalBuilderMode } from '../../types/proposalBuilder';
import ABISelector, { ABIElement } from '../ui/forms/ABISelector';
import ExampleLabel from '../ui/forms/ExampleLabel';
import { BigNumberComponent, InputComponent } from '../ui/forms/InputComponent';
Expand All @@ -15,6 +15,7 @@ interface ProposalTransactionProps {
txAddressError?: string;
txFunctionError?: string;
setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
mode: ProposalBuilderMode;
}

export default function ProposalTransaction({
Expand All @@ -24,7 +25,9 @@ export default function ProposalTransaction({
txAddressError,
txFunctionError,
setFieldValue,
mode,
}: ProposalTransactionProps) {
const isProposalMode = mode === 'proposal';
const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
const handleABISelectorChange = useCallback(
(value: ABIElement) => {
Expand Down Expand Up @@ -170,34 +173,38 @@ export default function ProposalTransaction({
alignItems="center"
mt={4}
>
<InputComponent
label={t('labelParameterLabel', { ns: 'proposalTemplate' })}
helper=""
isRequired={!parameter.value}
value={parameter.label || ''}
onChange={e =>
setFieldValue(
`transactions.${transactionIndex}.parameters.${i}.label`,
e.target.value,
)
}
disabled={transactionPending || !!parameter.value}
testId={`transactions.${transactionIndex}.parameters.${i}.label`}
subLabel={
<HStack>
<Text>{t('helperParameterLabel', { ns: 'proposalTemplate' })}</Text>
</HStack>
}
gridContainerProps={{
display: 'inline-flex',
flexWrap: 'wrap',
width: '30%',
}}
inputContainerProps={{
width: '100%',
}}
/>
<Text>{t('or', { ns: 'common' })}</Text>
{!isProposalMode && (
<>
<InputComponent
label={t('labelParameterLabel', { ns: 'proposalTemplate' })}
helper=""
isRequired={!parameter.value}
value={parameter.label || ''}
onChange={e =>
setFieldValue(
`transactions.${transactionIndex}.parameters.${i}.label`,
e.target.value,
)
}
disabled={transactionPending || !!parameter.value}
testId={`transactions.${transactionIndex}.parameters.${i}.label`}
subLabel={
<HStack>
<Text>{t('helperParameterLabel', { ns: 'proposalTemplate' })}</Text>
</HStack>
}
gridContainerProps={{
display: 'inline-flex',
flexWrap: 'wrap',
width: '30%',
}}
inputContainerProps={{
width: '100%',
}}
/>
<Text>{t('or', { ns: 'common' })}</Text>
</>
)}
<InputComponent
label={t('labelParameterValue', { ns: 'proposalTemplate' })}
helper=""
Expand All @@ -214,9 +221,11 @@ export default function ProposalTransaction({
<HStack wordBreak="break-all">
<Text>
{t('example', { ns: 'common' })}: <ExampleLabel>value</ExampleLabel>
<Text as="span">
{t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })}
</Text>
{!isProposalMode && (
<Text as="span">
{t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })}
</Text>
)}
</Text>
</HStack>
}
Expand Down Expand Up @@ -282,7 +291,9 @@ export default function ProposalTransaction({
<Text>{`${t('example', { ns: 'common' })}:`}</Text>
<ExampleLabel>{'1.2'}</ExampleLabel>
</HStack>
<Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
{!isProposalMode && (
<Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
)}
</VStack>
}
errorMessage={undefined}
Expand Down
9 changes: 8 additions & 1 deletion src/components/ProposalBuilder/ProposalTransactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ import { FormikErrors, FormikProps } from 'formik';
import { Dispatch, SetStateAction } from 'react';
import { useTranslation } from 'react-i18next';
import { BigNumberValuePair } from '../../types';
import { CreateProposalForm, CreateProposalTransaction } from '../../types/proposalBuilder';
import {
CreateProposalForm,
CreateProposalTransaction,
ProposalBuilderMode,
} from '../../types/proposalBuilder';
import ProposalTransaction from './ProposalTransaction';

interface ProposalTransactionsProps extends FormikProps<CreateProposalForm> {
pendingTransaction: boolean;
expandedIndecies: number[];
setExpandedIndecies: Dispatch<SetStateAction<number[]>>;
mode: ProposalBuilderMode;
}
export default function ProposalTransactions({
values: { transactions },
Expand All @@ -27,6 +32,7 @@ export default function ProposalTransactions({
pendingTransaction,
expandedIndecies,
setExpandedIndecies,
mode,
}: ProposalTransactionsProps) {
const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);

Expand Down Expand Up @@ -105,6 +111,7 @@ export default function ProposalTransactions({
transactionIndex={index}
setFieldValue={setFieldValue}
transactionPending={pendingTransaction}
mode={mode}
/>
</AccordionPanel>
</Box>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ProposalBuilder/ProposalTransactionsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FormikProps } from 'formik';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CreateProposalState } from '../../types';
import { CreateProposalForm } from '../../types/proposalBuilder';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import { scrollToBottom } from '../../utils/ui';
import ProposalTransactions from './ProposalTransactions';
import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
Expand All @@ -14,6 +14,7 @@ interface ProposalTransactionsFormProps extends FormikProps<CreateProposalForm>
setFormState: (state: CreateProposalState) => void;
canUserCreateProposal?: boolean;
safeNonce?: number;
mode: ProposalBuilderMode;
}

export default function ProposalTransactionsForm(props: ProposalTransactionsFormProps) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProposalBuilder/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const DEFAULT_PROPOSAL_TRANSACTION: CreateProposalTransaction = {
],
};

export const DEFAULT_PROPOSAL_TEMPLATE = {
export const DEFAULT_PROPOSAL = {
nonce: undefined,
proposalMetadata: {
title: '',
Expand Down
26 changes: 17 additions & 9 deletions src/components/ProposalBuilder/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,22 @@ import { useNavigate } from 'react-router-dom';
import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
import { DAO_ROUTES, BASE_ROUTES } from '../../constants/routes';
import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal';
import useCreateProposalTemplateSchema from '../../hooks/schemas/createProposalTemplate/useCreateProposalTemplateSchema';
import useCreateProposalSchema from '../../hooks/schemas/proposalBuilder/useCreateProposalSchema';
import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
import { useFractal } from '../../providers/App/AppProvider';
import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
import { CreateProposalState, ProposalExecuteData } from '../../types';
import { CreateProposalForm } from '../../types/proposalBuilder';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import { CustomNonceInput } from '../ui/forms/CustomNonceInput';
import PageHeader from '../ui/page/Header/PageHeader';
import ProposalDetails from './ProposalDetails';
import ProposalMetadata from './ProposalMetadata';
import ProposalTransactionsForm from './ProposalTransactionsForm';
import { DEFAULT_PROPOSAL_TEMPLATE } from './constants';

interface IProposalBuilder {
mode: 'proposal' | 'template';
mode: ProposalBuilderMode;
prepareProposalData: (values: CreateProposalForm) => Promise<ProposalExecuteData | undefined>;
initialValues: typeof DEFAULT_PROPOSAL_TEMPLATE;
initialValues: CreateProposalForm;
}

const templateAreaTwoCol = '"content details"';
Expand All @@ -47,7 +46,7 @@ export default function ProposalBuilder({
const { addressPrefix } = useNetworkConfig();
const { submitProposal, pendingCreateTx } = useSubmitProposal();
const { canUserCreateProposal } = useCanUserCreateProposal();
const { createProposalTemplateValidation } = useCreateProposalTemplateSchema();
const { createProposalValidation } = useCreateProposalSchema();

const successCallback = () => {
if (daoAddress) {
Expand All @@ -58,7 +57,7 @@ export default function ProposalBuilder({

return (
<Formik<CreateProposalForm>
validationSchema={createProposalTemplateValidation}
validationSchema={createProposalValidation}
initialValues={initialValues}
enableReinitialize
onSubmit={async values => {
Expand Down Expand Up @@ -88,7 +87,11 @@ export default function ProposalBuilder({
<form onSubmit={handleSubmit}>
<Box>
<PageHeader
title={t(isProposalMode ? 'createProposal' : 'createProposalTemplate')}
title={
isProposalMode
? t('createProposal', { ns: 'proposal' })
: t('createProposalTemplate', { ns: 'proposalTemplate' })
}
breadcrumbs={
isProposalMode
? [
Expand Down Expand Up @@ -148,6 +151,7 @@ export default function ProposalBuilder({
{formState === CreateProposalState.METADATA_FORM ? (
<ProposalMetadata
setFormState={setFormState}
mode={mode}
{...formikProps}
/>
) : (
Expand All @@ -173,6 +177,7 @@ export default function ProposalBuilder({
canUserCreateProposal={canUserCreateProposal}
pendingTransaction={pendingCreateTx}
safeNonce={safe?.nonce}
mode={mode}
{...formikProps}
/>
</>
Expand All @@ -184,7 +189,10 @@ export default function ProposalBuilder({
area="details"
w="100%"
>
<ProposalDetails {...formikProps} />
<ProposalDetails
{...formikProps}
mode={mode}
/>
</GridItem>
</Grid>
</Box>
Expand Down
Loading

0 comments on commit 392eeea

Please sign in to comment.