Extract reusable sablier proposal builder constants

src/components/ProposalBuilder/ProposalDetails.tsx

@@ -25,7 +25,7 @@ export function TransactionValueContainer({ children }: PropsWithChildren<{}>) {
   );
 }
 
-export default function ProposalTemplateDetails({
+export default function ProposalDetails({
   values,
   mode,
 }: FormikProps<CreateProposalForm | CreateSablierProposalForm> & { mode: ProposalBuilderMode }) {

src/components/ProposalBuilder/ProposalStream.tsx

@@ -18,25 +18,13 @@ import { useTranslation } from 'react-i18next';
 import { erc20Abi, formatUnits, getContract, isAddress } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
-import { Stream, Tranche } from '../../types/proposalBuilder';
+import { Stream } from '../../types/proposalBuilder';
 import { scrollToBottom } from '../../utils/ui';
 import { BigIntInput } from '../ui/forms/BigIntInput';
 import ExampleLabel from '../ui/forms/ExampleLabel';
 import { InputComponent, LabelComponent } from '../ui/forms/InputComponent';
 import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
-
-const SECONDS_IN_DAY = 60 * 60 * 24;
-
-export const DEFAULT_TRANCHE: Tranche = {
-  amount: {
-    value: '0',
-    bigintValue: 0n,
-  },
-  duration: {
-    value: (SECONDS_IN_DAY * 14).toString(),
-    bigintValue: BigInt(SECONDS_IN_DAY * 14),
-  },
-};
+import { DEFAULT_TRANCHE, SECONDS_IN_DAY } from './constants';
 
 export function ProposalStream({
   stream,

src/components/ProposalBuilder/ProposalStreams.tsx

@@ -14,21 +14,8 @@ import { useTranslation } from 'react-i18next';
 import { Stream } from '../../types/proposalBuilder';
 import { scrollToBottom } from '../../utils/ui';
 import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
-import { DEFAULT_TRANCHE, ProposalStream } from './ProposalStream';
-
-const DEFAULT_STREAM: Stream = {
-  type: 'tranched',
-  tokenAddress: '',
-  recipientAddress: '',
-  startDate: new Date(),
-  tranches: [DEFAULT_TRANCHE],
-  totalAmount: {
-    value: '0',
-    bigintValue: 0n,
-  },
-  cancelable: true,
-  transferable: false,
-};
+import { ProposalStream } from './ProposalStream';
+import { DEFAULT_STREAM } from './constants';
 
 export function ProposalStreams({
   pendingTransaction,

src/components/ProposalBuilder/StepButtons.tsx

@@ -36,8 +36,8 @@ export default function StepButtons(props: StepButtonsProps) {
   }
 
   // @dev these prevStepUrl and nextStepUrl calculation is done this way to universally build URL for the next/prev steps both for proposal builder and proposal template builder
-  const prevStepUrl = `${location.pathname.replace(`${CreateProposalSteps.TRANSACTIONS}`, `${CreateProposalSteps.METADATA}`)}${location.search}`;
-  const nextStepUrl = `${location.pathname.replace(`${CreateProposalSteps.METADATA}`, `${CreateProposalSteps.TRANSACTIONS}`)}${location.search}`;
+  const prevStepUrl = `${location.pathname.replace(`${mode === ProposalBuilderMode.SABLIER ? CreateProposalSteps.STREAMS : CreateProposalSteps.TRANSACTIONS}`, `${CreateProposalSteps.METADATA}`)}${location.search}`;
+  const nextStepUrl = `${location.pathname.replace(`${CreateProposalSteps.METADATA}`, `${mode === ProposalBuilderMode.SABLIER ? CreateProposalSteps.STREAMS : CreateProposalSteps.TRANSACTIONS}`)}${location.search}`;
 
   return (
     <Flex

src/components/ProposalBuilder/constants.ts

@@ -1,4 +1,4 @@
-import { CreateProposalTransaction } from '../../types/proposalBuilder';
+import { CreateProposalTransaction, Stream, Tranche } from '../../types/proposalBuilder';
 
 export const DEFAULT_PROPOSAL_TRANSACTION: CreateProposalTransaction = {
   targetAddress: '',
@@ -21,3 +21,40 @@ export const DEFAULT_PROPOSAL = {
   },
   transactions: [DEFAULT_PROPOSAL_TRANSACTION],
 };
+
+export const SECONDS_IN_DAY = 60 * 60 * 24;
+
+export const DEFAULT_TRANCHE: Tranche = {
+  amount: {
+    value: '0',
+    bigintValue: 0n,
+  },
+  duration: {
+    value: (SECONDS_IN_DAY * 14).toString(),
+    bigintValue: BigInt(SECONDS_IN_DAY * 14),
+  },
+};
+
+export const DEFAULT_STREAM: Stream = {
+  type: 'tranched',
+  tokenAddress: '',
+  recipientAddress: '',
+  startDate: new Date(),
+  tranches: [DEFAULT_TRANCHE],
+  totalAmount: {
+    value: '0',
+    bigintValue: 0n,
+  },
+  cancelable: true,
+  transferable: false,
+};
+
+export const DEFAULT_SABLIER_PROPOSAL = {
+  nonce: undefined,
+  proposalMetadata: {
+    title: '',
+    description: '',
+  },
+  streams: [DEFAULT_STREAM],
+  transactions: []
+};

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

@@ -5,7 +5,7 @@ import { useCallback, useEffect } from 'react';
 import { Address, encodeFunctionData, erc20Abi, getAddress, Hash, zeroAddress } from 'viem';
 import SablierV2BatchAbi from '../../../../../assets/abi/SablierV2Batch';
 import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
-import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
+import { DEFAULT_SABLIER_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
 import { useHeaderHeight } from '../../../../../constants/common';
 import { analyticsEvents } from '../../../../../insights/analyticsEvents';
@@ -112,7 +112,7 @@ export function SafeSablierProposalCreatePage() {
 
   return (
     <ProposalBuilder
-      initialValues={{ ...DEFAULT_PROPOSAL, nonce: safe.nextNonce }}
+      initialValues={{ ...DEFAULT_SABLIER_PROPOSAL, nonce: safe.nextNonce }}
       mode={ProposalBuilderMode.SABLIER}
       prepareProposalData={prepareProposalData}
     />