Implement progress stepper bar in create DAO workflow

src/components/DaoCreator/StepWrapper.tsx

@@ -6,32 +6,70 @@ import { useNavigate } from 'react-router-dom';
 import { BASE_ROUTES, DAO_ROUTES } from '../../constants/routes';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
+import { CreatorSteps } from '../../types';
 import PageHeader from '../ui/page/Header/PageHeader';
 import { DAOCreateMode } from './formComponents/EstablishEssentials';
 
 interface IStepWrapper {
-  titleKey: string;
   isSubDAO?: boolean;
   isFormSubmitting?: boolean;
   shouldWrapChildren?: boolean;
   children: ReactNode;
   mode: DAOCreateMode;
+  allSteps: CreatorSteps[];
+  stepNumber: number;
+}
+
+function Step({ index, stepNumber, label }: { index: number; stepNumber: number; label: string }) {
+  return (
+    <Box width="100%">
+      <Box
+        height="4px"
+        bg={stepNumber === index ? 'lilac-0' : 'neutral-6'}
+        borderRadius="full"
+      ></Box>
+      <Text
+        mx="0.25rem"
+        mt="0.5rem"
+        color={stepNumber === index ? 'white-0' : 'neutral-6'}
+      >
+        {index}. {label}
+      </Text>
+    </Box>
+  );
 }
 
 export function StepWrapper({
-  titleKey,
   isSubDAO,
   isFormSubmitting,
   children,
   mode,
+  allSteps,
+  stepNumber,
   shouldWrapChildren = true,
 }: IStepWrapper) {
   const { safe } = useDaoInfoStore();
   const { addressPrefix } = useNetworkConfig();
-  const { t } = useTranslation(['daoCreate']);
+  const { t } = useTranslation(['breadcrumbs']);
   const navigate = useNavigate();
 
   const isEdit = mode === DAOCreateMode.EDIT;
+
+  let title = '';
+  switch (mode) {
+    case DAOCreateMode.ROOTDAO:
+      title = t('createNewDAO');
+      break;
+    case DAOCreateMode.SUBDAO:
+      title = t('createSubDAO');
+      break;
+    case DAOCreateMode.EDIT:
+      title = t('editDAO');
+      break;
+    default:
+      throw new Error('Invalid DAO create mode');
+  }
+
   return (
     <Box>
       {isEdit ? (
@@ -44,17 +82,17 @@ export function StepWrapper({
               textStyle="heading-large"
               color="white-0"
             >
-              {t(titleKey)}
+              {title}
             </Text>
           </Flex>
         </Box>
       ) : (
         <PageHeader
-          title={t(titleKey)}
+          title={title}
           hasDAOLink={!!isSubDAO}
           breadcrumbs={[
             {
-              terminus: t(!isSubDAO ? 'buttonCreate' : 'labelCreateSubDAOProposal'),
+              terminus: title,
               path: '',
             },
           ]}
@@ -71,6 +109,47 @@ export function StepWrapper({
           }}
         />
       )}
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        width="100%"
+        mb="2rem"
+        gap="0.25rem"
+      >
+        {allSteps.map((step, index) => {
+          let label = '';
+          switch (step) {
+            case CreatorSteps.ESSENTIALS:
+              label = t('titleGetStarted', { ns: 'daoCreate' });
+              break;
+            case CreatorSteps.ERC20_DETAILS:
+              label = t('titleConfigureERC20', { ns: 'daoCreate' });
+              break;
+            case CreatorSteps.ERC721_DETAILS:
+              label = t('titleConfigureERC721', { ns: 'daoCreate' });
+              break;
+            case CreatorSteps.MULTISIG_DETAILS:
+              label = t('titleConfigureMultisig', { ns: 'daoCreate' });
+              break;
+            case CreatorSteps.AZORIUS_DETAILS:
+              label = t('titleGovConfig', { ns: 'daoCreate' });
+              break;
+            case CreatorSteps.FREEZE_DETAILS:
+              label = t('titleGuardConfig', { ns: 'daoCreate' });
+              break;
+            default:
+              throw new Error('Invalid step');
+          }
+          return (
+            <Step
+              key={index}
+              index={index + 1}
+              stepNumber={stepNumber}
+              label={label}
+            />
+          );
+        })}
+      </Flex>
       {shouldWrapChildren ? (
         <Box
           mt="1.5rem"

src/components/DaoCreator/formComponents/AzoriusGovernance.tsx

@@ -103,9 +103,10 @@ export function AzoriusGovernance(props: ICreationStepProps) {
     <>
       <StepWrapper
         mode={mode}
-        titleKey="titleGovConfig"
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
+        allSteps={props.steps}
+        stepNumber={3}
       >
         <Flex
           flexDirection="column"

src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx

@@ -39,7 +39,8 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) {
         mode={mode}
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
-        titleKey="titleNFTConfig"
+        allSteps={props.steps}
+        stepNumber={2}
         shouldWrapChildren={false}
       >
         <Grid

src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx

@@ -111,7 +111,8 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
         mode={mode}
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
-        titleKey="titleAzoriusConfig"
+        allSteps={props.steps}
+        stepNumber={2}
       >
         <Flex
           flexDirection="column"

src/components/DaoCreator/formComponents/EstablishEssentials.tsx

@@ -55,7 +55,7 @@ export function EstablishEssentials(props: ICreationStepProps) {
   // If in governance edit mode and snapshot URL is already set, disable the field
   const snapshotENSDisabled = isEdit && !!subgraphInfo?.daoSnapshotENS;
 
-  const handleGovernanceChange = (value: string) => {
+  const handleGovernanceChange = (value: GovernanceType) => {
     if (value === GovernanceType.AZORIUS_ERC20) {
       setFieldValue('azorius.votingStrategyType', VotingStrategyType.LINEAR_ERC20);
     } else if (value === GovernanceType.AZORIUS_ERC721) {
@@ -87,7 +87,8 @@ export function EstablishEssentials(props: ICreationStepProps) {
         mode={mode}
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
-        titleKey="titleEssentials"
+        allSteps={props.steps}
+        stepNumber={1}
       >
         <InputComponent
           label={t('labelDAOName')}

src/components/DaoCreator/formComponents/GuardDetails.tsx

@@ -89,7 +89,8 @@ function GuardDetails(props: ICreationStepProps) {
         mode={mode}
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
-        titleKey="titleGuardConfig"
+        allSteps={props.steps}
+        stepNumber={governanceFormType === GovernanceType.MULTISIG ? 3 : 4}
       >
         <Flex
           flexDirection="column"

src/components/DaoCreator/formComponents/Multisig.tsx

@@ -37,7 +37,8 @@ export function Multisig(props: ICreationStepProps) {
         mode={mode}
         isSubDAO={isSubDAO}
         isFormSubmitting={!!isSubmitting || transactionPending}
-        titleKey="titleMultisigSafeConfig"
+        allSteps={props.steps}
+        stepNumber={2}
       >
         <Flex
           flexDirection="column"

src/i18n/locales/en/breadcrumbs.json

@@ -1,4 +1,6 @@
 {
+  "createNewDAO": "Create New DAO",
+  "createSubDAO": "Create SubDAO",
   "headerTitle": "{{daoName}} {{subject}}",
   "proposals": "All Proposals",
   "proposalNew": "Create Proposal",
@@ -9,7 +11,7 @@
   "proposalTemplates": "Proposal Templates",
   "proposalTemplate": "{{proposalTemplateTitle}}",
   "proposalTemplateNew": "Create Proposal Template",
-  "modifyGovernance": "Modify Governance",
+  "editDAO": "Edit DAO",
   "parentLink": "Parent-Safe",
   "settings": "Settings"
 }

src/i18n/locales/en/daoCreate.json

@@ -1,18 +1,16 @@
 {
-  "buttonCreate": "Create DAO",
   "addNFTButton": "Import another token",
-  "labelCreateSubDAOProposal": "Create a child Safe",
   "errorMinSigners": "Number of owners must be greater than 0.",
   "errorLowSignerThreshold": "Threshold must be greater than 0",
   "errorHighSignerThreshold": "Threshold must be less than number of owners.",
   "labelSigThreshold": "Threshold",
   "helperSigThreshold": "Number of signers needed to approve a proposal.",
   "titleSignerAddresses": "Owners",
   "subTitleSignerAddresses": "These users will be able to submit and approve proposals.",
-  "titleEssentials": "Get Started",
-  "titleAzoriusConfig": "Configure Token",
-  "titleNFTConfig": "Configure NFT Voting",
-  "titleMultisigSafeConfig": "Configure Multisig",
+  "titleGetStarted": "Get Started",
+  "titleConfigureERC20": "Configure ERC-20 Token",
+  "titleConfigureERC721": "Configure ERC-721 NFTs",
+  "titleConfigureMultisig": "Configure Multisig",
   "titleSignerConfig": "Signer Parameters",
   "titleGovConfig": "Governance Parameters",
   "titleFunding": "Add Funding",
@@ -76,7 +74,7 @@
   "labelDAOName": "Name",
   "daoNamePlaceholder": "Name",
   "helperDAOName": "What is your DAO called?",
-  "labelDeploySubDAO": "Create a child Safe proposal",
+  "labelDeploySubDAO": "Create SubDAO proposal",
   "labelDeployAzorius": "Create Azorius deployment proposal",
   "titleAllocations": "Allocations",
   "titleProposers": "Whitelisted Proposers",

src/i18n/locales/en/proposalMetadata.json

@@ -1,5 +1,5 @@
 {
-  "createChildSafe": "Create a child Safe",
+  "createChildSafe": "Create a SubDAO",
   "clawbackProposal": "Clawback Proposal",
   "clawbackDescription": "Transfer all funds from the targeted child Safe to the parent Safe ",
   "createProposalTemplateTitle": "Create Proposal Template",

src/pages/dao/edit/governance/SafeEditGovernancePage.tsx

@@ -74,7 +74,7 @@ export function SafeEditGovernancePage() {
         }}
         breadcrumbs={[
           {
-            terminus: t('modifyGovernance', { ns: 'breadcrumbs' }),
+            terminus: t('editDAO', { ns: 'breadcrumbs' }),
             path: '',
           },
         ]}