Refactor Proposal Creation Pages to Standardize Metadata Step Button …

…Handling

- Updated the `metadataStepButtons` function in multiple proposal creation pages to accept an object with `formErrors` and `createProposalBlocked` parameters, enhancing clarity and consistency in button state management.
- Refactored the `ProposalBuilder` component to align with the new metadata 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.

src/components/ProposalBuilder/index.tsx

@@ -67,7 +67,13 @@ interface ProposalBuilderProps {
   pageHeaderButtonClickHandler: () => void;
   proposalMetadataTypeProps: ProposalMetadataTypeProps;
   actionsExperience: JSX.Element | null;
-  metadataStepButtons: (isDisabled: boolean) => JSX.Element;
+  metadataStepButtons: ({
+    formErrors,
+    createProposalBlocked,
+  }: {
+    formErrors: boolean;
+    createProposalBlocked: boolean;
+  }) => JSX.Element;
   transactionsDetails:
     | ((transactions: CreateProposalTransaction<BigIntValuePair>[]) => JSX.Element)
     | null;
@@ -233,13 +239,10 @@ export function ProposalBuilder({
                     </Box>
                     {actionsExperience}
                     <StepButtons
-                      metadataStepButtons={metadataStepButtons(
-                        // TODO: This is a hack. This is specifically what this PR is trying to fix/avoid.
-                        // We need to figure out a better way to handle this.
-                        actionsExperience === null
-                          ? !!formikProps.errors.proposalMetadata
-                          : createProposalButtonDisabled,
-                      )}
+                      metadataStepButtons={metadataStepButtons({
+                        formErrors: !!formikProps.errors.proposalMetadata,
+                        createProposalBlocked: createProposalButtonDisabled,
+                      })}
                       transactionsStepButtons={
                         <>
                           <PreviousButton prevStepUrl={prevStepUrl} />

src/pages/dao/proposal-templates/new/SafeCreateProposalTemplatePage.tsx

@@ -93,11 +93,11 @@ export function SafeCreateProposalTemplatePage() {
     navigate(DAO_ROUTES.proposalTemplates.relative(addressPrefix, safe?.address ?? ''));
   };
 
-  const metadataStepButtons = (isDisabled: boolean) => {
+  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
     return (
       <NextButton
         nextStepUrl={nextStepUrl}
-        isDisabled={isDisabled}
+        isDisabled={formErrors}
       />
     );
   };

src/pages/dao/proposals/actions/new/SafeProposalWithActionsCreatePage.tsx

@@ -130,8 +130,8 @@ export function SafeProposalWithActionsCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = (isDisabled: boolean) => {
-    return <CreateProposalButton isDisabled={isDisabled} />;
+  const metadataStepButtons = ({ createProposalBlocked }: { createProposalBlocked: boolean }) => {
+    return <CreateProposalButton isDisabled={createProposalBlocked} />;
   };
 
   return (

src/pages/dao/proposals/new/SafeProposalCreatePage.tsx

@@ -62,11 +62,11 @@ export function SafeProposalCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = (isDisabled: boolean) => {
+  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
     return (
       <NextButton
         nextStepUrl={nextStepUrl}
-        isDisabled={isDisabled}
+        isDisabled={formErrors}
       />
     );
   };

src/pages/dao/proposals/new/sablier/SafeSablierProposalCreatePage.tsx

@@ -142,11 +142,11 @@ export function SafeSablierProposalCreatePage() {
     navigate(DAO_ROUTES.proposals.relative(addressPrefix, safe.address));
   };
 
-  const metadataStepButtons = (isDisabled: boolean) => {
+  const metadataStepButtons = ({ formErrors }: { formErrors: boolean }) => {
     return (
       <NextButton
         nextStepUrl={nextStepUrl}
-        isDisabled={isDisabled}
+        isDisabled={formErrors}
       />
     );
   };