Merge branch 'reskin/refactor-root-reskin' into reskin/dao-info-cards

decentdao · Apr 23, 2024 · 30fa18d · 30fa18d
2 parents 735cfc8 + a52966f
commit 30fa18d
Show file tree

Hide file tree

Showing 75 changed files with 733 additions and 1,457 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "fractal-interface",
   "private": true,
   "dependencies": {
+    "@adraffy/ens-normalize": "^1.10.1",
     "@apollo/client": "^3.7.10",
     "@chakra-ui/react": "^2.8.2",
     "@decent-org/fractal-ui": "^0.2.5",

diff --git a/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx b/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx
diff --git a/src/components/CreateProposalTemplate/constants.ts b/src/components/CreateProposalTemplate/constants.ts
diff --git a/src/components/DaoCreator/constants.ts b/src/components/DaoCreator/constants.ts
@@ -13,7 +13,7 @@ export const initialState: CreatorFormState = {
   essentials: {
     daoName: '',
     governance: GovernanceType.MULTISIG,
-    snapshotURL: '',
+    snapshotENS: '',
   },
   erc20Token: {
     tokenCreationType: TokenCreationType.NEW,

diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx
@@ -10,7 +10,7 @@ interface ITokenAllocations {
   setFieldValue: (field: string, value: any) => void;
   addressErrorMessage: string | null;
   amountErrorMessage: string | null;
-  amountInputValue: bigint | undefined;
+  amountInputValue?: bigint;
   allocationLength: number;
 }
 

diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
@@ -1,6 +1,7 @@
+import { ens_normalize } from '@adraffy/ens-normalize';
 import { Box, Divider, Input, RadioGroup } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { URL_DOCS_GOV_TYPES } from '../../../constants/url';
@@ -29,23 +30,29 @@ export function EstablishEssentials(props: ICreationStepProps) {
   const { t } = useTranslation(['daoCreate', 'common']);
   const { values, setFieldValue, isSubmitting, transactionPending, isSubDAO, errors, mode } = props;
 
+  const [isSnapshotSpaceValid, setSnapshotSpaceValid] = useState(true);
+
   const {
-    node: { daoName, daoSnapshotURL, daoAddress },
+    node: { daoName, daoSnapshotENS, daoAddress },
   } = useFractal();
 
   const isEdit = mode === DAOCreateMode.EDIT;
 
   useEffect(() => {
     if (isEdit) {
       setFieldValue('essentials.daoName', daoName, false);
-      if (createAccountSubstring(daoAddress!) !== daoName)
-        setFieldValue('essentials.snapshotURL', daoSnapshotURL || '', false);
+      if (createAccountSubstring(daoAddress!) !== daoName) {
+        // Pre-fill the snapshot URL form field when editing
+        setFieldValue('essentials.snapshotENS', daoSnapshotENS || '', false);
+      }
     }
-  }, [setFieldValue, mode, daoName, daoSnapshotURL, isEdit, daoAddress]);
+  }, [setFieldValue, mode, daoName, daoSnapshotENS, isEdit, daoAddress]);
 
   const daoNameDisabled =
     isEdit && !!daoName && !!daoAddress && createAccountSubstring(daoAddress) !== daoName;
-  const snapshotURLDisabled = isEdit && !!daoSnapshotURL;
+
+  // If in governance edit mode and snapshot URL is already set, disable the field
+  const snapshotENSDisabled = isEdit && !!daoSnapshotENS;
 
   const handleGovernanceChange = (value: string) => {
     if (value === GovernanceType.AZORIUS_ERC20) {
@@ -57,6 +64,24 @@ export function EstablishEssentials(props: ICreationStepProps) {
     setFieldValue('essentials.governance', value);
   };
 
+  const handleSnapshotSpaceChange = (value: string) => {
+    setFieldValue('essentials.snapshotENS', value, true);
+
+    // If there's no input in the snapshot URL field, we don't need to check if it's valid
+    if (!value) {
+      setSnapshotSpaceValid(true);
+      return;
+    }
+
+    try {
+      ens_normalize(value);
+      setSnapshotSpaceValid(true);
+    } catch (error) {
+      console.log(error);
+      setSnapshotSpaceValid(false);
+    }
+  };
+
   const { createOptions } = useNetworkConfig();
 
   return (
@@ -160,14 +185,13 @@ export function EstablishEssentials(props: ICreationStepProps) {
         helper={t('snapshotHelper')}
         isRequired={false}
       >
-        <LabelWrapper errorMessage={errors?.essentials?.snapshotURL}>
+        <LabelWrapper errorMessage={errors?.essentials?.snapshotENS}>
           <Input
-            value={values.essentials.snapshotURL}
-            onChange={cEvent => setFieldValue('essentials.snapshotURL', cEvent.target.value, true)}
-            isDisabled={snapshotURLDisabled}
-            data-testid="essentials-snapshotURL"
+            value={values.essentials.snapshotENS}
+            onChange={cEvent => handleSnapshotSpaceChange(cEvent.target.value)}
+            isDisabled={snapshotENSDisabled}
+            data-testid="essentials-snapshotENS"
             placeholder="example.eth"
-            maxLength={30}
           />
         </LabelWrapper>
       </LabelComponent>
@@ -179,6 +203,7 @@ export function EstablishEssentials(props: ICreationStepProps) {
       <StepButtons
         {...props}
         isNextDisabled={
+          !isSnapshotSpaceValid ||
           values.essentials.daoName.length === 0 || // TODO formik should do this, not sure why it's enabled on first pass
           (isEdit && values.essentials.governance === GovernanceType.MULTISIG)
         }

diff --git a/src/components/DaoCreator/index.tsx b/src/components/DaoCreator/index.tsx
@@ -29,6 +29,7 @@ function DaoCreator({
         onSubmit={async values => {
           const choosenGovernance = values.essentials.governance;
           const freezeGuard = isSubDAO ? values.freeze : undefined;
+
           switch (choosenGovernance) {
             case GovernanceType.MULTISIG: {
               const data = await prepareMultisigFormData({

diff --git a/...posalTemplate/ProposalTemplateDetails.tsx → ...nents/ProposalBuilder/ProposalDetails.tsx b/...posalTemplate/ProposalTemplateDetails.tsx → ...nents/ProposalBuilder/ProposalDetails.tsx
@@ -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 { CreateProposalTemplateForm } from '../../types/createProposalTemplate';
+import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
 import '../../assets/css/Markdown.css';
 
@@ -29,10 +29,11 @@ export function TransactionValueContainer({
 }
 
 export default function ProposalTemplateDetails({
-  values: { proposalTemplateMetadata, transactions },
-}: FormikProps<CreateProposalTemplateForm>) {
+  values: { proposalMetadata, transactions },
+  mode,
+}: FormikProps<CreateProposalForm> & { mode: ProposalBuilderMode }) {
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
-  const trimmedTitle = proposalTemplateMetadata.title?.trim();
+  const trimmedTitle = proposalMetadata.title?.trim();
 
   return (
     <Box
@@ -51,23 +52,25 @@ 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 === ProposalBuilderMode.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
-            content={proposalTemplateMetadata.description}
+            content={proposalMetadata.description}
             collapsedLines={2}
           />
         </HStack>