Some cleanup work to close up PRD offshoot issues

src/components/DaoCreator/formComponents/AzoriusGovernance.tsx

@@ -1,27 +1,22 @@
 import {
   Alert,
   Box,
-  Button,
   Flex,
   FormControl,
-  HStack,
   InputGroup,
   InputRightElement,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
   Switch,
   Text,
 } from '@chakra-ui/react';
-import { Minus, Plus, WarningCircle } from '@phosphor-icons/react';
-import { useCallback, useEffect, useMemo, useState, memo } from 'react';
+import { WarningCircle } from '@phosphor-icons/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { FractalModuleType, ICreationStepProps, VotingStrategyType } from '../../../types';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { CustomNonceInput } from '../../ui/forms/CustomNonceInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
+import { NumberStepperInput } from '../../ui/forms/NumberStepperInput';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import useStepRedirect from '../hooks/useStepRedirect';
@@ -34,38 +29,6 @@ function DayStepperInput({
   inputValue: number;
   onInputChange: (val: number) => void;
 }) {
-  const MemoizedNumberStepperInput = memo(
-    ({ value, onChange }: { value?: string | number; onChange: (val: string) => void }) => {
-      const stepperButton = (direction: 'inc' | 'dec') => (
-        <Button
-          variant="secondary"
-          borderColor="neutral-3"
-          p="0.5rem"
-          size="md"
-        >
-          {direction === 'inc' ? <Plus size="1.5rem" /> : <Minus size="1.5rem" />}
-        </Button>
-      );
-
-      return (
-        <NumberInput
-          value={value}
-          onChange={onChange}
-          min={0}
-          focusInputOnChange
-          w="100%"
-        >
-          <HStack gap="0.25rem">
-            <NumberDecrementStepper>{stepperButton('dec')}</NumberDecrementStepper>
-            <NumberInputField min={0} />
-            <NumberIncrementStepper>{stepperButton('inc')}</NumberIncrementStepper>
-          </HStack>
-        </NumberInput>
-      );
-    },
-  );
-  MemoizedNumberStepperInput.displayName = 'MemoizedNumberInput';
-
   const { t } = useTranslation('common');
 
   return (
@@ -76,7 +39,7 @@ function DayStepperInput({
         gap="0.5rem"
       >
         <Text color="neutral-7">{t('days', { ns: 'common' })}</Text>
-        <MemoizedNumberStepperInput
+        <NumberStepperInput
           value={inputValue}
           onChange={val => onInputChange(Number(val))}
         />

src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx

@@ -40,7 +40,7 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) {
             <Grid
               gridTemplateColumns="1fr 35% 2rem"
               columnGap={4}
-              rowGap={2}
+              rowGap={8}
               data-testid="tokenVoting-tokenAllocations"
             >
               <Text>{t('titleAddress')}</Text>
@@ -80,9 +80,11 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) {
                 );
               })}
             </Grid>
+
             <Text
               color="neutral-7"
               textStyle="helper-text-base"
+              mt={4}
             >
               {t('helperAllocations')}
             </Text>

src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx

@@ -1,12 +1,11 @@
-import { Box, Flex, Input, RadioGroup, Text } from '@chakra-ui/react';
-import { Info } from '@phosphor-icons/react';
+import { Box, Flex, Input, RadioGroup } from '@chakra-ui/react';
+import { useFormikContext } from 'formik';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { erc20Abi, getContract, isAddress, zeroAddress } from 'viem';
 import { usePublicClient, useWalletClient } from 'wagmi';
 import { createAccountSubstring } from '../../../hooks/utils/useGetAccountName';
-import { ICreationStepProps, TokenCreationType } from '../../../types';
-import SupportTooltip from '../../ui/badges/SupportTooltip';
+import { CreatorFormState, ICreationStepProps, TokenCreationType } from '../../../types';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import LabelWrapper from '../../ui/forms/LabelWrapper';
 import { RadioWithText } from '../../ui/forms/Radio/RadioWithText';
@@ -30,23 +29,17 @@ function TokenConfigDisplay(props: ICreationStepProps) {
 }
 
 export function AzoriusTokenDetails(props: ICreationStepProps) {
-  const {
-    transactionPending,
-    isSubDAO,
-    setFieldValue,
-    values,
-    errors,
-    handleChange,
-    isSubmitting,
-    mode,
-  } = props;
+  const { transactionPending, isSubDAO, setFieldValue, errors, handleChange, isSubmitting, mode } =
+    props;
 
   const { t } = useTranslation('daoCreate');
   const { data: walletClient } = useWalletClient();
   const publicClient = usePublicClient();
 
+  const { values, touched, setTouched } = useFormikContext<CreatorFormState>();
+
   const { checkVotesToken } = usePrepareFormData();
-  const [isImportedVotesToken, setIsImportedVotesToken] = useState<boolean>();
+  const [isImportedVotesToken, setIsValidERC20VotesToken] = useState<boolean>();
 
   useStepRedirect({ values });
   const updateImportFields = useCallback(async () => {
@@ -84,14 +77,14 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
       if (!isVotesToken) {
         setFieldValue('erc20Token.tokenName', 'Wrapped ' + name, true);
         setFieldValue('erc20Token.tokenSymbol', 'W' + symbol, true);
-        setIsImportedVotesToken(false);
+        setIsValidERC20VotesToken(false);
       } else {
-        setIsImportedVotesToken(true);
+        setIsValidERC20VotesToken(true);
         setFieldValue('erc20Token.tokenName', name, true);
         setFieldValue('erc20Token.tokenSymbol', symbol, true);
       }
     } else {
-      setIsImportedVotesToken(undefined);
+      setIsValidERC20VotesToken(undefined);
     }
   }, [
     checkVotesToken,
@@ -106,10 +99,15 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
     updateImportFields();
   }, [updateImportFields]);
 
-  const tokenImportAddressErrorMessage =
-    values.erc20Token.tokenImportAddress && errors?.erc20Token?.tokenImportAddress
-      ? errors.erc20Token.tokenImportAddress
-      : undefined;
+  let tokenErrorMsg = '';
+
+  if (touched.erc20Token?.tokenImportAddress) {
+    console.log(errors?.erc20Token?.tokenImportAddress);
+
+    tokenErrorMsg =
+      errors?.erc20Token?.tokenImportAddress ||
+      (!isImportedVotesToken ? t('errorNotVotingToken') : '');
+  }
 
   return (
     <>
@@ -162,35 +160,25 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
           </RadioGroup>
           {values.erc20Token.tokenCreationType === TokenCreationType.IMPORTED && (
             <>
-              <LabelWrapper errorMessage={tokenImportAddressErrorMessage}>
+              <LabelWrapper errorMessage={tokenErrorMsg}>
                 <Input
                   name="erc20Token.tokenImportAddress"
-                  onChange={handleChange}
+                  onChange={e => {
+                    setTouched({
+                      erc20Token: {
+                        tokenImportAddress: true,
+                      },
+                      ...touched,
+                    });
+
+                    handleChange(e);
+                  }}
                   value={values.erc20Token.tokenImportAddress}
                   placeholder={createAccountSubstring(zeroAddress)}
-                  isInvalid={!!tokenImportAddressErrorMessage}
+                  isInvalid={!!tokenErrorMsg}
                   isRequired
                 />
               </LabelWrapper>
-              {isImportedVotesToken === false && !errors.erc20Token?.tokenImportAddress && (
-                <Flex
-                  gap={4}
-                  alignItems="center"
-                >
-                  <SupportTooltip
-                    IconComponent={Info}
-                    label={t('warningExistingTokenTooltip')}
-                    color="neutral-7"
-                  />
-                  <Text
-                    color="neutral-7"
-                    textStyle="helper-text-base"
-                    whiteSpace="pre-wrap"
-                  >
-                    {t('warningExistingToken')}
-                  </Text>
-                </Flex>
-              )}
             </>
           )}
         </Flex>

src/components/DaoCreator/formComponents/Multisig.tsx

@@ -1,20 +1,12 @@
-import {
-  Text,
-  Flex,
-  Grid,
-  IconButton,
-  NumberInput,
-  NumberInputField,
-  Icon,
-  Button,
-} from '@chakra-ui/react';
+import { Text, Flex, Grid, IconButton, Icon, Button } from '@chakra-ui/react';
 import { MinusCircle, Plus } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { ICreationStepProps } from '../../../types';
 import { AddressInput } from '../../ui/forms/EthAddressInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
 import LabelWrapper from '../../ui/forms/LabelWrapper';
+import { NumberStepperInput } from '../../ui/forms/NumberStepperInput';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import useStepRedirect from '../hooks/useStepRedirect';
@@ -119,6 +111,17 @@ export function Multisig(props: ICreationStepProps) {
                                 (_, index) => index !== i,
                               ),
                             });
+
+                            // If this removal causes the threshold to be higher than the number of signers, adjust the threshold
+                            if (
+                              values.multisig.signatureThreshold! >
+                              values.multisig.numOfSigners! - 1
+                            ) {
+                              setFieldValue(
+                                'multisig.signatureThreshold',
+                                values.multisig.numOfSigners! - 1,
+                              );
+                            }
                           }}
                           data-testid={'multisig.numOfSigners-' + i}
                         />
@@ -139,13 +142,10 @@ export function Multisig(props: ICreationStepProps) {
             isRequired
           >
             {/* @todo replace with stepper input */}
-            <NumberInput
-              value={values.multisig.signatureThreshold}
+            <NumberStepperInput
               onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
-              isInvalid={!!errors.multisig?.signatureThreshold}
-            >
-              <NumberInputField data-testid="safeConfig-thresholdInput" />
-            </NumberInput>
+              value={values.multisig.signatureThreshold}
+            />
           </LabelComponent>
         </Flex>
       </StepWrapper>

src/components/ui/forms/EthAddressInput.tsx

@@ -15,7 +15,7 @@ export function AddressInput({ value, onChange, ...rest }: InputProps) {
     () =>
       debounce((event: ChangeEvent<HTMLInputElement>) => {
         if (onChange) onChange(event);
-      }, 300),
+      }, 500),
     [onChange],
   );
 

src/components/ui/forms/NumberStepperInput.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  HStack,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+} from '@chakra-ui/react';
+import { Plus, Minus } from '@phosphor-icons/react';
+
+export function NumberStepperInput({
+  value,
+  onChange,
+}: {
+  value?: string | number;
+  onChange: (val: string) => void;
+}) {
+  const stepperButton = (direction: 'inc' | 'dec') => (
+    <Button
+      variant="secondary"
+      borderColor="neutral-3"
+      p="0.5rem"
+      size="md"
+    >
+      {direction === 'inc' ? <Plus size="1.5rem" /> : <Minus size="1.5rem" />}
+    </Button>
+  );
+
+  return (
+    <NumberInput
+      value={value}
+      onChange={onChange}
+      min={0}
+      focusInputOnChange
+      w="100%"
+    >
+      <HStack gap="0.25rem">
+        <NumberDecrementStepper>{stepperButton('dec')}</NumberDecrementStepper>
+        <NumberInputField min={0} />
+        <NumberIncrementStepper>{stepperButton('inc')}</NumberIncrementStepper>
+      </HStack>
+    </NumberInput>
+  );
+}

src/components/ui/links/ExternalLink.tsx

@@ -65,7 +65,6 @@ export default function ExternalLink({
     grey: {
       hover: {
         bg: 'neutral-2',
-        borderColor: 'neutral-4',
       },
       active: {
         bg: 'neutral-5',
@@ -112,7 +111,6 @@ export default function ExternalLink({
         gap="0.25rem"
         borderRadius="625rem"
         borderColor="transparent"
-        borderWidth="1px"
         _hover={
           isTextLink ? textLinkStyles[styleVariant].hover : pillLinkStyles[styleVariant].hover
         }
@@ -126,6 +124,7 @@ export default function ExternalLink({
         {...rest}
       >
         <Flex
+          padding="0.25rem 0.75rem"
           gap="0.25rem"
           mx="-0.75rem"
           alignItems="center"