Refactor Proposal Creation Pages to Standardize Step Button Handling

- Updated the `metadataStepButtons` function in multiple proposal creation pages to a unified `stepButtons` function, enhancing clarity and consistency in button state management. - Refactored the `ProposalBuilder` component to align with the new step button handling approach, ensuring a more modular and maintainable code structure. - Improved the user experience by ensuring that button states are derived from clear and standardized props across different proposal types. These changes aim to enhance the organization and readability of the proposal creation process, particularly in managing step button states.
decentdao · Jan 22, 2025 · 3bdb460 · 3bdb460
1 parent ca5fb8c
commit 3bdb460
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 43 deletions.
diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx
@@ -25,7 +25,6 @@ import { Crumb } from '../ui/page/Header/Breadcrumbs';
 import PageHeader from '../ui/page/Header/PageHeader';
 import ProposalDetails from './ProposalDetails';
 import ProposalMetadata, { ProposalMetadataTypeProps } from './ProposalMetadata';
-import StepButtons, { CreateProposalButton, PreviousButton } from './StepButtons';
 
 export function ShowNonceInputOnMultisig({
   nonce,
@@ -67,7 +66,7 @@ interface ProposalBuilderProps {
   pageHeaderButtonClickHandler: () => void;
   proposalMetadataTypeProps: ProposalMetadataTypeProps;
   actionsExperience: JSX.Element | null;
-  metadataStepButtons: ({
+  stepButtons: ({
     formErrors,
     createProposalBlocked,
   }: {
@@ -79,7 +78,6 @@ interface ProposalBuilderProps {
     | null;
   templateDetails: ((title: string) => JSX.Element) | null;
   streamsDetails: ((streams: Stream[]) => JSX.Element) | null;
-  prevStepUrl: string;
   prepareProposalData: (values: CreateProposalForm) => Promise<ProposalExecuteData | undefined>;
   initialValues: CreateProposalForm;
   contentRoute: (
@@ -95,11 +93,10 @@ export function ProposalBuilder({
   pageHeaderButtonClickHandler,
   proposalMetadataTypeProps,
   actionsExperience,
-  metadataStepButtons,
+  stepButtons,
   transactionsDetails,
   templateDetails,
   streamsDetails,
-  prevStepUrl,
   initialValues,
   prepareProposalData,
   contentRoute,
@@ -238,18 +235,10 @@ export function ProposalBuilder({
                       </Routes>
                     </Box>
                     {actionsExperience}
-                    <StepButtons
-                      metadataStepButtons={metadataStepButtons({
-                        formErrors: !!formikProps.errors.proposalMetadata,
-                        createProposalBlocked: createProposalButtonDisabled,
-                      })}
-                      transactionsStepButtons={
-                        <>
-                          <PreviousButton prevStepUrl={prevStepUrl} />
-                          <CreateProposalButton isDisabled={createProposalButtonDisabled} />
-                        </>
-                      }
-                    />
+                    {stepButtons({
+                      formErrors: !!formikProps.errors.proposalMetadata,
+                      createProposalBlocked: createProposalButtonDisabled,
+                    })}
                   </Flex>
                 </GridItem>
                 <GridItem

diff --git a/src/pages/dao/proposal-templates/new/SafeCreateProposalTemplatePage.tsx b/src/pages/dao/proposal-templates/new/SafeCreateProposalTemplatePage.tsx
@@ -9,7 +9,11 @@ import {
 } from '../../../../components/ProposalBuilder/ProposalDetails';
 import { TEMPLATE_PROPOSAL_METADATA_TYPE_PROPS } from '../../../../components/ProposalBuilder/ProposalMetadata';
 import ProposalTransactionsForm from '../../../../components/ProposalBuilder/ProposalTransactionsForm';
-import { NextButton } from '../../../../components/ProposalBuilder/StepButtons';
+import StepButtons, {
+  CreateProposalButton,
+  NextButton,
+  PreviousButton,
+} from '../../../../components/ProposalBuilder/StepButtons';
 import { DEFAULT_PROPOSAL } from '../../../../components/ProposalBuilder/constants';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { logError } from '../../../../helpers/errorLogging';
@@ -93,11 +97,27 @@ export function SafeCreateProposalTemplatePage() {
     navigate(DAO_ROUTES.proposalTemplates.relative(addressPrefix, safe?.address ?? ''));
   };
 
-  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
+  const stepButtons = ({
+    formErrors,
+    createProposalBlocked,
+  }: {
+    formErrors: boolean;
+    createProposalBlocked: boolean;
+  }) => {
     return (
-      <NextButton
-        nextStepUrl={nextStepUrl}
-        isDisabled={formErrors}
+      <StepButtons
+        metadataStepButtons={
+          <NextButton
+            nextStepUrl={nextStepUrl}
+            isDisabled={formErrors}
+          />
+        }
+        transactionsStepButtons={
+          <>
+            <PreviousButton prevStepUrl={prevStepUrl} />
+            <CreateProposalButton isDisabled={createProposalBlocked} />
+          </>
+        }
       />
     );
   };
@@ -109,11 +129,10 @@ export function SafeCreateProposalTemplatePage() {
       pageHeaderButtonClickHandler={pageHeaderButtonClickHandler}
       proposalMetadataTypeProps={TEMPLATE_PROPOSAL_METADATA_TYPE_PROPS(t)}
       actionsExperience={null}
-      metadataStepButtons={metadataStepButtons}
+      stepButtons={stepButtons}
       transactionsDetails={transactions => <TransactionsDetails transactions={transactions} />}
       templateDetails={title => <TemplateDetails title={title} />}
       streamsDetails={null}
-      prevStepUrl={prevStepUrl}
       initialValues={initialProposalTemplate}
       prepareProposalData={prepareProposalTemplateProposal}
       contentRoute={(formikProps, pendingCreateTx, nonce) => {

diff --git a/src/pages/dao/proposals/actions/new/SafeProposalWithActionsCreatePage.tsx b/src/pages/dao/proposals/actions/new/SafeProposalWithActionsCreatePage.tsx
@@ -11,7 +11,10 @@ import { ProposalActionCard } from '../../../../../components/ProposalBuilder/Pr
 import { TransactionsDetails } from '../../../../../components/ProposalBuilder/ProposalDetails';
 import { DEFAULT_PROPOSAL_METADATA_TYPE_PROPS } from '../../../../../components/ProposalBuilder/ProposalMetadata';
 import ProposalTransactionsForm from '../../../../../components/ProposalBuilder/ProposalTransactionsForm';
-import { CreateProposalButton } from '../../../../../components/ProposalBuilder/StepButtons';
+import StepButtons, {
+  CreateProposalButton,
+  PreviousButton,
+} from '../../../../../components/ProposalBuilder/StepButtons';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
 import { AddActions } from '../../../../../components/ui/modals/AddActions';
@@ -130,8 +133,18 @@ export function SafeProposalWithActionsCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = ({ createProposalBlocked }: { createProposalBlocked: boolean }) => {
-    return <CreateProposalButton isDisabled={createProposalBlocked} />;
+  const stepButtons = ({ createProposalBlocked }: { createProposalBlocked: boolean }) => {
+    return (
+      <StepButtons
+        metadataStepButtons={<CreateProposalButton isDisabled={createProposalBlocked} />}
+        transactionsStepButtons={
+          <>
+            <PreviousButton prevStepUrl={prevStepUrl} />
+            <CreateProposalButton isDisabled={createProposalBlocked} />
+          </>
+        }
+      />
+    );
   };
 
   return (
@@ -145,12 +158,11 @@ export function SafeProposalWithActionsCreatePage() {
       pageHeaderBreadcrumbs={pageHeaderBreadcrumbs}
       pageHeaderButtonClickHandler={pageHeaderButtonClickHandler}
       actionsExperience={<ActionsExperience />}
-      metadataStepButtons={metadataStepButtons}
+      stepButtons={stepButtons}
       transactionsDetails={transactions => <TransactionsDetails transactions={transactions} />}
       templateDetails={null}
       streamsDetails={null}
       proposalMetadataTypeProps={DEFAULT_PROPOSAL_METADATA_TYPE_PROPS(t)}
-      prevStepUrl={prevStepUrl}
       prepareProposalData={prepareProposal}
       contentRoute={(formikProps, pendingCreateTx, nonce) => {
         return (

diff --git a/src/pages/dao/proposals/new/SafeProposalCreatePage.tsx b/src/pages/dao/proposals/new/SafeProposalCreatePage.tsx
@@ -7,7 +7,11 @@ import { ProposalBuilder, ShowNonceInputOnMultisig } from '../../../../component
 import { TransactionsDetails } from '../../../../components/ProposalBuilder/ProposalDetails';
 import { DEFAULT_PROPOSAL_METADATA_TYPE_PROPS } from '../../../../components/ProposalBuilder/ProposalMetadata';
 import ProposalTransactionsForm from '../../../../components/ProposalBuilder/ProposalTransactionsForm';
-import { NextButton } from '../../../../components/ProposalBuilder/StepButtons';
+import StepButtons, {
+  CreateProposalButton,
+  NextButton,
+  PreviousButton,
+} from '../../../../components/ProposalBuilder/StepButtons';
 import { DEFAULT_PROPOSAL } from '../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../components/ui/loaders/BarLoader';
 import { useHeaderHeight } from '../../../../constants/common';
@@ -62,11 +66,27 @@ export function SafeProposalCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
+  const stepButtons = ({
+    formErrors,
+    createProposalBlocked,
+  }: {
+    formErrors: boolean;
+    createProposalBlocked: boolean;
+  }) => {
     return (
-      <NextButton
-        nextStepUrl={nextStepUrl}
-        isDisabled={formErrors}
+      <StepButtons
+        metadataStepButtons={
+          <NextButton
+            nextStepUrl={nextStepUrl}
+            isDisabled={formErrors}
+          />
+        }
+        transactionsStepButtons={
+          <>
+            <PreviousButton prevStepUrl={prevStepUrl} />
+            <CreateProposalButton isDisabled={createProposalBlocked} />
+          </>
+        }
       />
     );
   };
@@ -79,11 +99,10 @@ export function SafeProposalCreatePage() {
       pageHeaderButtonClickHandler={pageHeaderButtonClickHandler}
       proposalMetadataTypeProps={DEFAULT_PROPOSAL_METADATA_TYPE_PROPS(t)}
       actionsExperience={null}
-      metadataStepButtons={metadataStepButtons}
+      stepButtons={stepButtons}
       transactionsDetails={transactions => <TransactionsDetails transactions={transactions} />}
       templateDetails={null}
       streamsDetails={null}
-      prevStepUrl={prevStepUrl}
       prepareProposalData={prepareProposal}
       contentRoute={(formikProps, pendingCreateTx, nonce) => {
         return (

diff --git a/src/pages/dao/proposals/new/sablier/SafeSablierProposalCreatePage.tsx b/src/pages/dao/proposals/new/sablier/SafeSablierProposalCreatePage.tsx
@@ -13,7 +13,11 @@ import {
 import { StreamsDetails } from '../../../../../components/ProposalBuilder/ProposalDetails';
 import { DEFAULT_PROPOSAL_METADATA_TYPE_PROPS } from '../../../../../components/ProposalBuilder/ProposalMetadata';
 import { ProposalStreams } from '../../../../../components/ProposalBuilder/ProposalStreams';
-import { NextButton } from '../../../../../components/ProposalBuilder/StepButtons';
+import StepButtons, {
+  CreateProposalButton,
+  NextButton,
+  PreviousButton,
+} from '../../../../../components/ProposalBuilder/StepButtons';
 import { DEFAULT_SABLIER_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
 import { useHeaderHeight } from '../../../../../constants/common';
@@ -142,11 +146,27 @@ export function SafeSablierProposalCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
+  const stepButtons = ({
+    formErrors,
+    createProposalBlocked,
+  }: {
+    formErrors: boolean;
+    createProposalBlocked: boolean;
+  }) => {
     return (
-      <NextButton
-        nextStepUrl={nextStepUrl}
-        isDisabled={formErrors}
+      <StepButtons
+        metadataStepButtons={
+          <NextButton
+            nextStepUrl={nextStepUrl}
+            isDisabled={formErrors}
+          />
+        }
+        transactionsStepButtons={
+          <>
+            <PreviousButton prevStepUrl={prevStepUrl} />
+            <CreateProposalButton isDisabled={createProposalBlocked} />
+          </>
+        }
       />
     );
   };
@@ -159,11 +179,10 @@ export function SafeSablierProposalCreatePage() {
       pageHeaderButtonClickHandler={pageHeaderButtonClickHandler}
       proposalMetadataTypeProps={DEFAULT_PROPOSAL_METADATA_TYPE_PROPS(t)}
       actionsExperience={null}
-      metadataStepButtons={metadataStepButtons}
+      stepButtons={stepButtons}
       transactionsDetails={null}
       templateDetails={null}
       streamsDetails={streams => <StreamsDetails streams={streams} />}
-      prevStepUrl={prevStepUrl}
       prepareProposalData={prepareProposalData}
       contentRoute={(formikProps, pendingCreateTx, nonce) => {
         return (