Merge pull request #2017 from decentdao/release/v0.2.4

Release/v0.2.4
decentdao · Jun 14, 2024 · 1d52462 · 1d52462
2 parents ce51e94 + 760cf4d
commit 1d52462
Show file tree

Hide file tree

Showing 90 changed files with 748 additions and 494 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "decent-interface",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.10",

diff --git a/public/images/input-error.svg b/public/images/input-error.svg
diff --git a/src/assets/theme/components/button/button.base.ts b/src/assets/theme/components/button/button.base.ts
@@ -8,6 +8,7 @@ const baseStyle = defineStyle({
   display: 'flex',
   justifyContent: 'center',
   gap: '4px',
+  transition: 'all ease-out 300ms',
   _disabled: {
     cursor: 'default',
   },

diff --git a/src/assets/theme/components/input/input.base.ts b/src/assets/theme/components/input/input.base.ts
@@ -12,6 +12,15 @@ const disabled = {
   },
 };
 
+const invalid = {
+  borderColor: 'red-0',
+  bg: 'red--3',
+  color: 'red-1',
+  _placeholder: {
+    color: 'red-0',
+  },
+};
+
 const loading = {};
 
 const baseStyle = definePartsStyle({
@@ -24,14 +33,7 @@ const baseStyle = definePartsStyle({
     transitionDuration: 'normal',
     transitionProperty: 'common',
     width: '100%',
-    _invalid: {
-      borderColor: 'red-0',
-      bg: 'red--3',
-      color: 'red-1',
-      _placeholder: {
-        color: 'red-0',
-      },
-    },
+    _invalid: invalid,
     _placeholder: {
       color: 'neutral-5',
     },
@@ -49,6 +51,10 @@ const baseStyle = definePartsStyle({
         ...disabled,
         _loading: loading,
       },
+      _invalid: {
+        ...invalid,
+        borderColor: 'red-1',
+      },
     },
     _disabled: {
       ...disabled,
@@ -58,14 +64,7 @@ const baseStyle = definePartsStyle({
       outline: 'none',
       borderColor: 'neutral-4',
       boxShadow: '0px 0px 0px 3px #534D58',
-      _invalid: {
-        borderColor: 'red-0',
-        bg: 'red--3',
-        color: 'red-1',
-        _placeholder: {
-          color: 'red-0',
-        },
-      },
+      _invalid: invalid,
       _disabled: {
         ...disabled,
         _loading: loading,

diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
@@ -31,7 +31,7 @@ export function AzoriusGovernance(props: ICreationStepProps) {
 
   useEffect(() => {
     if (showCustomNonce === undefined && safe && mode === DAOCreateMode.EDIT) {
-      setFieldValue('multisig.customNonce', safe.nonce);
+      setFieldValue('multisig.customNonce', safe.nextNonce);
       setShowCustomNonce(true);
     }
   }, [setFieldValue, safe, showCustomNonce, mode]);

diff --git a/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx b/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx
@@ -118,6 +118,7 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) {
                             data-testid={`erc721Token.nfts.${i}.tokenAddressInput`}
                             minWidth="100%"
                             placeholder={createAccountSubstring(zeroAddress)}
+                            isInvalid={!!addressErrorMessage}
                           />
                         )}
                       </Field>
@@ -148,6 +149,7 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) {
                           isRequired
                           min="1"
                           placeholder="1"
+                          isInvalid={!!weightErrorMessage}
                         />
                         {values.erc721Token.nfts.length > 1 && (
                           <IconButton

diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx
@@ -1,6 +1,7 @@
 import { IconButton, Box } from '@chakra-ui/react';
 import { MinusCircle } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
+import { useTranslation } from 'react-i18next';
 import { useFormHelpers } from '../../../hooks/utils/useFormHelpers';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { AddressInput } from '../../ui/forms/EthAddressInput';
@@ -25,6 +26,7 @@ export function AzoriusTokenAllocation({
   allocationLength,
 }: ITokenAllocations) {
   const { restrictChars } = useFormHelpers();
+  const { t } = useTranslation('daoCreate');
 
   return (
     <>
@@ -33,13 +35,14 @@ export function AzoriusTokenAllocation({
           {({ field }: FieldAttributes<any>) => (
             <AddressInput
               {...field}
+              isInvalid={!!addressErrorMessage}
               marginTop="-0.25rem" // Freaking LabelWrapper
               data-testid={'tokenVoting-tokenAllocationAddressInput-' + index}
             />
           )}
         </Field>
       </LabelWrapper>
-      <LabelWrapper errorMessage={amountErrorMessage}>
+      <LabelWrapper errorMessage={!amountInputValue ? t('errorNoAllocation') : amountErrorMessage}>
         <BigIntInput
           marginTop="-0.25rem" // Freaking LabelWrapper
           value={amountInputValue}
@@ -49,6 +52,7 @@ export function AzoriusTokenAllocation({
           data-testid={'tokenVoting-tokenAllocationAmountInput-' + index}
           onKeyDown={restrictChars}
           placeholder="100,000"
+          isInvalid={!!amountInputValue && !!amountErrorMessage}
         />
       </LabelWrapper>
       {allocationLength > 1 ? (

diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx
@@ -99,43 +99,43 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) {
                   borderBottom="none"
                   my="1.5rem"
                 >
-                  {({ isExpanded }) => (
-                    <>
-                      <AccordionButton
-                        p={0}
-                        textStyle="display-lg"
-                        color="lilac-0"
-                      >
-                        {isExpanded ? <CaretDown /> : <CaretRight />}
-                        {t('advanced', { ns: 'common' })}
-                      </AccordionButton>
-                      <AccordionPanel p={0}>
-                        <LabelComponent
-                          label={t('labelParentAllocation')}
-                          helper={t('helperParentAllocation')}
-                          isRequired={false}
+                  {({ isExpanded }) => {
+                    const allocationErrorMessage = (
+                      values.erc20Token.parentAllocationAmount?.bigintValue &&
+                      (errors.erc20Token?.parentAllocationAmount as any)
+                    )?.value;
+
+                    return (
+                      <>
+                        <AccordionButton
+                          p={0}
+                          textStyle="display-lg"
+                          color="lilac-0"
                         >
-                          <LabelWrapper
-                            errorMessage={
-                              (
-                                values.erc20Token.parentAllocationAmount?.bigintValue &&
-                                (errors.erc20Token?.parentAllocationAmount as any)
-                              )?.value
-                            }
+                          {isExpanded ? <CaretDown /> : <CaretRight />}
+                          {t('advanced', { ns: 'common' })}
+                        </AccordionButton>
+                        <AccordionPanel p={0}>
+                          <LabelComponent
+                            label={t('labelParentAllocation')}
+                            helper={t('helperParentAllocation')}
+                            isRequired={false}
                           >
-                            <BigIntInput
-                              data-testid="tokenVoting-parentTokenAllocationInput"
-                              value={values.erc20Token.parentAllocationAmount?.bigintValue}
-                              onChange={valuePair =>
-                                setFieldValue('erc20Token.parentAllocationAmount', valuePair)
-                              }
-                              isInvalid={false}
-                            />
-                          </LabelWrapper>
-                        </LabelComponent>
-                      </AccordionPanel>
-                    </>
-                  )}
+                            <LabelWrapper errorMessage={allocationErrorMessage}>
+                              <BigIntInput
+                                data-testid="tokenVoting-parentTokenAllocationInput"
+                                value={values.erc20Token.parentAllocationAmount?.bigintValue}
+                                onChange={valuePair =>
+                                  setFieldValue('erc20Token.parentAllocationAmount', valuePair)
+                                }
+                                isInvalid={!!allocationErrorMessage}
+                              />
+                            </LabelWrapper>
+                          </LabelComponent>
+                        </AccordionPanel>
+                      </>
+                    );
+                  }}
                 </AccordionItem>
               </Accordion>
             )}

diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx
@@ -105,6 +105,11 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
     updateImportFields();
   }, [updateImportFields]);
 
+  const tokenImportAddressErrorMessage =
+    values.erc20Token.tokenImportAddress && errors?.erc20Token?.tokenImportAddress
+      ? errors.erc20Token.tokenImportAddress
+      : undefined;
+
   return (
     <>
       <StepWrapper
@@ -160,18 +165,13 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
               />
               {values.erc20Token.tokenCreationType === TokenCreationType.IMPORTED && (
                 <>
-                  <LabelWrapper
-                    errorMessage={
-                      values.erc20Token.tokenImportAddress && errors?.erc20Token?.tokenImportAddress
-                        ? errors.erc20Token.tokenImportAddress
-                        : undefined
-                    }
-                  >
+                  <LabelWrapper errorMessage={tokenImportAddressErrorMessage}>
                     <Input
                       name="erc20Token.tokenImportAddress"
                       onChange={handleChange}
                       value={values.erc20Token.tokenImportAddress}
                       placeholder={createAccountSubstring(zeroAddress)}
+                      isInvalid={!!tokenImportAddressErrorMessage}
                       isRequired
                     />
                   </LabelWrapper>

diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
@@ -169,6 +169,7 @@ export function EstablishEssentials(props: ICreationStepProps) {
               isDisabled={snapshotENSDisabled}
               data-testid="essentials-snapshotENS"
               placeholder="example.eth"
+              isInvalid={!!errors?.essentials?.snapshotENS}
             />
           </LabelWrapper>
         </LabelComponent>

diff --git a/src/components/DaoCreator/formComponents/GuardDetails.tsx b/src/components/DaoCreator/formComponents/GuardDetails.tsx
@@ -45,7 +45,7 @@ function GuardDetails(props: ICreationStepProps) {
 
   useEffect(() => {
     if (showCustomNonce === undefined && !dao?.isAzorius && isSubDAO && safe) {
-      setFieldValue('multisig.customNonce', safe.nonce);
+      setFieldValue('multisig.customNonce', safe.nextNonce);
       setShowCustomNonce(true);
     }
   }, [isSubDAO, azoriusContractAddress, type, setFieldValue, safe, dao, showCustomNonce]);

diff --git a/src/components/DaoCreator/formComponents/Multisig.tsx b/src/components/DaoCreator/formComponents/Multisig.tsx
@@ -85,11 +85,13 @@ export function Multisig(props: ICreationStepProps) {
           <LabelComponent
             label={t('labelSigners')}
             helper={t('helperSigners')}
+            errorMessage={errors.multisig?.numOfSigners}
             isRequired
           >
             <NumberInput
               value={values.multisig.numOfSigners}
               onChange={value => validateTotalSigners(value)}
+              isInvalid={!!errors.multisig?.numOfSigners}
             >
               <NumberInputField data-testid="safeConfig-numberOfSignerInput" />
             </NumberInput>
@@ -105,6 +107,7 @@ export function Multisig(props: ICreationStepProps) {
             <NumberInput
               value={values.multisig.signatureThreshold}
               onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
+              isInvalid={!!errors.multisig?.signatureThreshold}
             >
               <NumberInputField data-testid="safeConfig-thresholdInput" />
             </NumberInput>
@@ -135,6 +138,7 @@ export function Multisig(props: ICreationStepProps) {
                           {({ field }: FieldAttributes<any>) => (
                             <AddressInput
                               {...field}
+                              isInvalid={!!errorMessage}
                               data-testid={'safeConfig-signer-' + i}
                             />
                           )}

diff --git a/src/components/DaoCreator/formComponents/VotesTokenImport.tsx b/src/components/DaoCreator/formComponents/VotesTokenImport.tsx
@@ -48,6 +48,7 @@ export function VotesTokenImport(props: ICreationStepProps) {
         helper={t('helperTokenSupply')}
         isRequired
       >
+        {/* @todo: this allows alphanumeric input. intentional? */}
         <Input
           value={values.erc20Token.tokenSupply.bigintValue?.toString()}
           onChange={handleChange}

diff --git a/src/components/ProposalBuilder/ProposalDetails.tsx b/src/components/ProposalBuilder/ProposalDetails.tsx
@@ -4,7 +4,7 @@ import { Fragment, PropsWithChildren, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
-import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
+import { CeleryTextLink } from '../ui/utils/CeleryTextLink';
 import Divider from '../ui/utils/Divider';
 import '../../assets/css/Markdown.css';
 
@@ -69,7 +69,7 @@ export default function ProposalTemplateDetails({
         <HStack justifyContent="space-between">
           <Text color="neutral-7">{t('proposalTemplateDescription')}</Text>
           {proposalMetadata.description && (
-            <CeleryButtonWithIcon
+            <CeleryTextLink
               onClick={() => setDescriptionCollapsed(prevState => !prevState)}
               text={t(descriptionCollapsed ? 'show' : 'hide', { ns: 'common' })}
             />

diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx
@@ -83,6 +83,7 @@ export default function ProposalTransaction({
           </HStack>
         }
         errorMessage={transaction.targetAddress && txAddressError ? txAddressError : undefined}
+        isInvalid={!!transaction.targetAddress && !!txAddressError}
         value={transaction.targetAddress}
         testId="transaction.targetAddress"
         onChange={e =>
@@ -125,6 +126,7 @@ export default function ProposalTransaction({
             </HStack>
           }
           errorMessage={transaction.functionName && txFunctionError ? txFunctionError : undefined}
+          isInvalid={!!transaction.functionName && !!txFunctionError}
           testId="transaction.functionName"
         />
       </Box>

diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx
@@ -160,7 +160,7 @@ export function ProposalBuilder({
                       ) : (
                         <ProposalTransactionsForm
                           pendingTransaction={pendingCreateTx}
-                          safeNonce={safe?.nonce}
+                          safeNonce={safe?.nextNonce}
                           mode={mode}
                           {...formikProps}
                         />

diff --git a/src/components/ProposalTemplates/ProposalTemplateCard.tsx b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
@@ -52,7 +52,7 @@ export default function ProposalTemplateCard({
     }
   }, [navigate, daoAddress, addressPrefix]);
 
-  const nonce = safe?.nonce;
+  const nonce = safe?.nextNonce;
   const handleRemoveTemplate = useCallback(async () => {
     const proposalData = await prepareRemoveProposalTemplateProposal(templateIndex);
     if (!!proposalData) {

diff --git a/src/components/Proposals/AzoriusDetails/index.tsx b/src/components/Proposals/AzoriusDetails/index.tsx
@@ -4,7 +4,7 @@ import { AzoriusProposal } from '../../../types';
 import { ProposalDetailsGrid } from '../../ui/containers/ProposalDetailsGrid';
 import { useProposalCountdown } from '../../ui/proposal/useProposalCountdown';
 import { ProposalInfo } from '../ProposalInfo';
-import ProposalSummary from '../ProposalSummary';
+import { AzoriusProposalSummary } from '../ProposalSummary';
 import ProposalVotes from '../ProposalVotes';
 
 export function AzoriusProposalDetails({ proposal }: { proposal: AzoriusProposal }) {
@@ -21,7 +21,7 @@ export function AzoriusProposalDetails({ proposal }: { proposal: AzoriusProposal
         <ProposalVotes proposal={proposal} />
       </GridItem>
       <GridItem maxW={CONTENT_MAXW}>
-        <ProposalSummary proposal={proposal} />
+        <AzoriusProposalSummary proposal={proposal} />
       </GridItem>
     </ProposalDetailsGrid>
   );