diff --git a/src/components/DaoCreator/StepButtons.tsx b/src/components/DaoCreator/StepButtons.tsx index 086f743260..512491695f 100644 --- a/src/components/DaoCreator/StepButtons.tsx +++ b/src/components/DaoCreator/StepButtons.tsx @@ -1,4 +1,5 @@ -import { Flex, Button } from '@chakra-ui/react'; +import { Flex, Button, Icon } from '@chakra-ui/react'; +import { CaretRight, CaretLeft } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; import { useFractal } from '../../providers/App/AppProvider'; @@ -40,21 +41,26 @@ export function StepButtons({ {prevStep && ( )} ); diff --git a/src/components/DaoCreator/StepWrapper.tsx b/src/components/DaoCreator/StepWrapper.tsx index cd5e04a606..ecce6a06b0 100644 --- a/src/components/DaoCreator/StepWrapper.tsx +++ b/src/components/DaoCreator/StepWrapper.tsx @@ -3,7 +3,6 @@ import { Trash } from '@phosphor-icons/react'; import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common'; import { BASE_ROUTES, DAO_ROUTES } from '../../constants/routes'; import { useFractal } from '../../providers/App/AppProvider'; import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider'; @@ -44,8 +43,8 @@ export function StepWrapper({ w="full" > {t(titleKey)} @@ -75,11 +74,10 @@ export function StepWrapper({ )} {shouldWrapChildren ? ( {children} diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx index 21617f2811..fd7d524973 100644 --- a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx +++ b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx @@ -1,11 +1,10 @@ -import { Alert, AlertTitle, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react'; -import { Info } from '@decent-org/fractal-ui'; +import { Alert, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react'; +import { WarningCircle } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { ICreationStepProps, CreatorSteps, VotingStrategyType } from '../../../types'; import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle'; import { BigIntInput } from '../../ui/forms/BigIntInput'; import { LabelComponent } from '../../ui/forms/InputComponent'; -import Divider from '../../ui/utils/Divider'; import { StepButtons } from '../StepButtons'; import { StepWrapper } from '../StepWrapper'; import { DAOCreateMode } from './EstablishEssentials'; @@ -15,141 +14,141 @@ export function AzoriusGovernance(props: ICreationStepProps) { const { t } = useTranslation(['daoCreate', 'common']); const minutes = t('minutes', { ns: 'common' }); return ( - - + - {t('titleProposalSettings', { ns: 'daoCreate' })} - - - setFieldValue('azorius.votingPeriod', valuePair)} - decimalPlaces={0} - min="1" - data-testid="govConfig-votingPeriod" - /> - {minutes} - - - {t('exampleVotingPeriod')} - - - {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? ( + {t('titleProposalSettings', { ns: 'daoCreate' })} setFieldValue('azorius.quorumPercentage', valuePair)} - max="100" + value={values.azorius.votingPeriod.bigintValue} + onChange={valuePair => setFieldValue('azorius.votingPeriod', valuePair)} decimalPlaces={0} - data-testid="govConfig-quorumPercentage" + min="1" + data-testid="govConfig-votingPeriod" /> - % + {minutes} + + {t('exampleVotingPeriod')} + - ) : ( + {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? ( + + + setFieldValue('azorius.quorumPercentage', valuePair)} + max="100" + decimalPlaces={0} + data-testid="govConfig-quorumPercentage" + /> + % + + + ) : ( + + setFieldValue('erc721Token.quorumThreshold', valuePair)} + decimalPlaces={0} + min="1" + data-testid="govConfig-quorumThreshold" + /> + + )} - setFieldValue('erc721Token.quorumThreshold', valuePair)} - decimalPlaces={0} - min="1" - data-testid="govConfig-quorumThreshold" - /> + + setFieldValue('azorius.timelock', valuePair)} + decimalPlaces={0} + data-testid="govConfig-timelock" + /> + {minutes} + + + {t('exampleTimelockPeriod')} + - )} - - - setFieldValue('azorius.timelock', valuePair)} - decimalPlaces={0} - data-testid="govConfig-timelock" - /> - {minutes} - - - {t('exampleTimelockPeriod')} - - - - - setFieldValue('azorius.executionPeriod', valuePair)} - decimalPlaces={0} - min="1" - data-testid="govModule-executionDetails" - /> - {minutes} - - - {t('exampleExecutionPeriod')} - - - - - + + setFieldValue('azorius.executionPeriod', valuePair)} + decimalPlaces={0} + min="1" + data-testid="govModule-executionDetails" + /> + {minutes} + + + {t('exampleExecutionPeriod')} + + + + {t('governanceDescription')} - - - - - - + + + + + ); } diff --git a/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx b/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx index 016531d09e..c36527e187 100644 --- a/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx +++ b/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx @@ -1,9 +1,10 @@ -import { Box, Flex, Grid, GridItem, Input, Button } from '@chakra-ui/react'; -import { AddPlus, Minus } from '@decent-org/fractal-ui'; +import { Box, Flex, Grid, GridItem, Input, IconButton } from '@chakra-ui/react'; +import { MinusCircle, Plus } from '@phosphor-icons/react'; import { Field, FieldAttributes, FormikErrors } from 'formik'; import { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; -import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common'; +import { zeroAddress } from 'viem'; +import { createAccountSubstring } from '../../../hooks/utils/useDisplayName'; import { ICreationStepProps, CreatorSteps, @@ -13,15 +14,12 @@ import { import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle'; import { BigIntInput } from '../../ui/forms/BigIntInput'; import { LabelComponent } from '../../ui/forms/InputComponent'; +import CeleryButtonWithIcon from '../../ui/utils/CeleryButtonWithIcon'; import Divider from '../../ui/utils/Divider'; import { StepButtons } from '../StepButtons'; import { StepWrapper } from '../StepWrapper'; import AzoriusNFTDetail from './AzoriusNFTDetail'; -const templateAreaTwoCol = '"content details"'; -const templateAreaSingleCol = `"content" - "details"`; - export default function AzoriusNFTDetails(props: ICreationStepProps) { const { transactionPending, isSubDAO, setFieldValue, values, isSubmitting, mode, errors } = props; const { t } = useTranslation('daoCreate'); @@ -41,180 +39,187 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) { }; return ( - - + - - - {t('titleNFTsParams')} - {values.erc721Token.nfts.map((nft, i) => { - const nftError = ( - errors?.erc721Token?.nfts as FormikErrors< - ERC721TokenConfig[] | undefined - > - )?.[i]; - const addressErrorMessage = - nftError?.tokenAddress && nft.tokenAddress.length - ? nftError.tokenAddress - : undefined; - const weightErrorMessage = - nftError?.tokenWeight && nftError.tokenWeight.value && nft.tokenWeight.value.length - ? nftError.tokenWeight.value - : undefined; + + + + {t('titleNFTsParams')} + {values.erc721Token.nfts.map((nft, i) => { + const nftError = ( + errors?.erc721Token?.nfts as FormikErrors< + ERC721TokenConfig[] | undefined + > + )?.[i]; + const addressErrorMessage = + nftError?.tokenAddress && nft.tokenAddress.length + ? nftError.tokenAddress + : undefined; + const weightErrorMessage = + nftError?.tokenWeight && + nftError.tokenWeight.value && + nft.tokenWeight.value.length + ? nftError.tokenWeight.value + : undefined; - const isFirstElement = i === 0; - return ( - - - - {({ field }: FieldAttributes) => ( - - setFieldValue(`erc721Token.nfts.${i}.tokenAddress`, e.target.value) + + + {({ field }: FieldAttributes) => ( + + setFieldValue(`erc721Token.nfts.${i}.tokenAddress`, e.target.value) + } + data-testid={`erc721Token.nfts.${i}.tokenAddressInput`} + minWidth="100%" + placeholder={createAccountSubstring(zeroAddress)} + /> + )} + + + + + + setFieldValue(`erc721Token.nfts.${i}.tokenWeight`, valuePair) } - data-testid={`erc721Token.nfts.${i}.tokenAddressInput`} - minWidth="100%" + data-testid={`erc721Token.nfts.${i}.tokenWeightInput`} + decimalPlaces={0} + isRequired + min="1" + placeholder="1" /> - )} - - - - - - setFieldValue(`erc721Token.nfts.${i}.tokenWeight`, valuePair) - } - data-testid={`erc721Token.nfts.${i}.tokenWeightInput`} - decimalPlaces={0} - isRequired - min="1" - /> - {values.erc721Token.nfts.length > 1 && ( - handleRemoveNFT(i)} - alignSelf={'center'} - /> - )} - - - - ); - })} - - - - - - - 1 && ( + } + variant="unstyled" + minWidth="auto" + color="lilac-0" + _disabled={{ opacity: 0.4, cursor: 'default' }} + sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }} + type="button" + onClick={() => handleRemoveNFT(i)} + mt="-0.25rem" + ml="0.5rem" + /> + )} + + + + ); + })} + + {t('addNFTButton')} + + + + - {t('titleNFTDetails')} - - {values.erc721Token.nfts.map((nft, i) => { - const nftError = ( - errors?.erc721Token?.nfts as FormikErrors< - ERC721TokenConfig[] | undefined - > - )?.[i]; - const addressErrorMessage = - nftError?.tokenAddress && nft.tokenAddress.length - ? nftError.tokenAddress - : undefined; - return ( - - - {i < values.erc721Token.nfts.length - 1 && } - - ); - })} - - - - + + {t('titleNFTDetails')} + + {values.erc721Token.nfts.map((nft, i) => { + const nftError = ( + errors?.erc721Token?.nfts as FormikErrors< + ERC721TokenConfig[] | undefined + > + )?.[i]; + const addressErrorMessage = + nftError?.tokenAddress && nft.tokenAddress.length + ? nftError.tokenAddress + : undefined; + return ( + + + {i < values.erc721Token.nfts.length - 1 && } + + ); + })} + + + + + + ); } diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx index bd73002b2a..883ae12d13 100644 --- a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx +++ b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx @@ -1,5 +1,6 @@ import { IconButton, Box } from '@chakra-ui/react'; -import { LabelWrapper, Minus } from '@decent-org/fractal-ui'; +import { LabelWrapper } from '@decent-org/fractal-ui'; +import { MinusCircle } from '@phosphor-icons/react'; import { Field, FieldAttributes } from 'formik'; import { useFormHelpers } from '../../../hooks/utils/useFormHelpers'; import { BigIntInput } from '../../ui/forms/BigIntInput'; @@ -32,6 +33,7 @@ export function AzoriusTokenAllocation({ {({ field }: FieldAttributes) => ( )} @@ -39,28 +41,25 @@ export function AzoriusTokenAllocation({ setFieldValue(`erc20Token.tokenAllocations.${index}.amount`, valuePair) } data-testid={'tokenVoting-tokenAllocationAmountInput-' + index} onKeyDown={restrictChars} + placeholder="100,000" /> {allocationLength > 1 ? ( } variant="unstyled" - minW="0" - color="gold.500" - _hover={{ color: 'gold.500-hover' }} - mt={2} - icon={ - - } + minWidth="auto" + color="lilac-0" + _disabled={{ opacity: 0.4, cursor: 'default' }} + sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }} type="button" onClick={() => remove(index)} data-testid={'tokenVoting-tokenAllocationRemoveButton-' + index} diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx index 6dfde6e9be..46a9401f1e 100644 --- a/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx +++ b/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx @@ -4,14 +4,13 @@ import { AccordionItem, AccordionPanel, Box, - Button, Grid, Text, } from '@chakra-ui/react'; -import { Gear, LabelWrapper } from '@decent-org/fractal-ui'; +import { LabelWrapper } from '@decent-org/fractal-ui'; +import { Plus, CaretDown, CaretRight } from '@phosphor-icons/react'; import { FieldArray, FormikErrors } from 'formik'; import { useTranslation } from 'react-i18next'; -import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common'; import { useFractal } from '../../../providers/App/AppProvider'; import { AzoriusGovernance, @@ -22,6 +21,7 @@ import { import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle'; import { BigIntInput } from '../../ui/forms/BigIntInput'; import { LabelComponent } from '../../ui/forms/InputComponent'; +import CeleryButtonWithIcon from '../../ui/utils/CeleryButtonWithIcon'; import { AzoriusTokenAllocation } from './AzoriusTokenAllocation'; export function AzoriusTokenAllocations(props: ICreationStepProps) { @@ -43,18 +43,8 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) { rowGap={2} data-testid="tokenVoting-tokenAllocations" > - - {t('titleAddress')} - - - {t('titleAmount')} - + {t('titleAddress')} + {t('titleAmount')} {/* EMPTY */} {values.erc20Token.tokenAllocations.map((tokenAllocation, index) => { @@ -91,45 +81,36 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) { })} {t('helperAllocations')} - + {canReceiveParentAllocations && ( {({ isExpanded }) => ( <> - + {isExpanded ? : } {t('advanced', { ns: 'common' })} - + - {t('titleSelectToken')} + {t('titleTokenSupply')} { @@ -154,12 +154,14 @@ export function AzoriusTokenDetails(props: ICreationStepProps) { ? errors.erc20Token.tokenImportAddress : undefined } + isRequired > {!isImportedVotesToken && !errors.erc20Token?.tokenImportAddress && ( @@ -167,17 +169,18 @@ export function AzoriusTokenDetails(props: ICreationStepProps) { gap={4} alignItems="center" > + {t('warningExistingToken')} - )} @@ -187,14 +190,28 @@ export function AzoriusTokenDetails(props: ICreationStepProps) { + {values.erc20Token.tokenCreationType === TokenCreationType.NEW && ( + + + + )} + ); } diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx index 2c0d700e75..a1eb89e933 100644 --- a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx +++ b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx @@ -3,7 +3,6 @@ import { Box, Input, RadioGroup } from '@chakra-ui/react'; import { LabelWrapper } from '@decent-org/fractal-ui'; 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'; import { createAccountSubstring } from '../../../hooks/utils/useDisplayName'; import { useFractal } from '../../../providers/App/AppProvider'; @@ -17,7 +16,6 @@ import { import { InputComponent, LabelComponent } from '../../ui/forms/InputComponent'; import { RadioWithText } from '../../ui/forms/Radio/RadioWithText'; import ExternalLink from '../../ui/links/ExternalLink'; -import Divider from '../../ui/utils/Divider'; import { StepButtons } from '../StepButtons'; import { StepWrapper } from '../StepWrapper'; @@ -86,114 +84,114 @@ export function EstablishEssentials(props: ICreationStepProps) { const { createOptions } = useNetworkConfig(); return ( - - setFieldValue('essentials.daoName', cEvent.target.value, true)} - onBlur={cEvent => setFieldValue('essentials.daoName', cEvent.target.value.trim(), true)} - disabled={daoNameDisabled} - placeholder={t('daoNamePlaceholder')} - testId="essentials-daoName" - /> - - + + setFieldValue('essentials.daoName', cEvent.target.value, true)} + onBlur={cEvent => setFieldValue('essentials.daoName', cEvent.target.value.trim(), true)} + disabled={daoNameDisabled} + placeholder={t('daoNamePlaceholder')} + testId="essentials-daoName" + /> + - - {createOptions.includes(GovernanceType.MULTISIG) && ( - - placeholder - link - - } - /> - )} - {createOptions.includes(GovernanceType.AZORIUS_ERC20) && ( - - placeholder - link - - } - /> - )} - {createOptions.includes(GovernanceType.AZORIUS_ERC721) && ( - - placeholder - link - - } - /> - )} - + + {createOptions.includes(GovernanceType.MULTISIG) && ( + + placeholder + link + + } + /> + )} + {createOptions.includes(GovernanceType.AZORIUS_ERC20) && ( + + placeholder + link + + } + /> + )} + {createOptions.includes(GovernanceType.AZORIUS_ERC721) && ( + + placeholder + link + + } + /> + )} + + + + + + handleSnapshotSpaceChange(cEvent.target.value)} + isDisabled={snapshotENSDisabled} + data-testid="essentials-snapshotENS" + placeholder="example.eth" + /> + - - - - - handleSnapshotSpaceChange(cEvent.target.value)} - isDisabled={snapshotENSDisabled} - data-testid="essentials-snapshotENS" - placeholder="example.eth" - /> - - - + - + ); } diff --git a/src/components/DaoCreator/formComponents/GuardDetails.tsx b/src/components/DaoCreator/formComponents/GuardDetails.tsx index 8be9f927d0..1c909ade99 100644 --- a/src/components/DaoCreator/formComponents/GuardDetails.tsx +++ b/src/components/DaoCreator/formComponents/GuardDetails.tsx @@ -1,5 +1,5 @@ -import { Text, InputGroup, InputRightElement, Flex, Alert, AlertTitle } from '@chakra-ui/react'; -import { Info } from '@decent-org/fractal-ui'; +import { Text, InputGroup, InputRightElement, Flex, Alert } from '@chakra-ui/react'; +import { Info } from '@phosphor-icons/react'; import { useEffect, useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { formatUnits } from 'viem'; @@ -119,160 +119,157 @@ function GuardDetails(props: ICreationStepProps) { : null; return ( - - + - {governanceFormType === GovernanceType.MULTISIG && ( - <> - {t('titleProposalSettings')} - - - setFieldValue('freeze.timelockPeriod', valuePair)} - decimalPlaces={0} - min="1" - data-testid="guardConfig-executionDetails" - /> - {minutes} - - + {governanceFormType === GovernanceType.MULTISIG && ( + <> + {t('titleProposalSettings')} + - {t('exampleTimelockPeriod')} - - - - - setFieldValue('freeze.executionPeriod', valuePair)} - decimalPlaces={0} - min="1" - data-testid="guardConfig-executionDetails" - /> - {minutes} - - + setFieldValue('freeze.timelockPeriod', valuePair)} + decimalPlaces={0} + min="1" + data-testid="guardConfig-executionDetails" + /> + {minutes} + + + {t('exampleTimelockPeriod')} + + + - {t('exampleExecutionPeriod')} - - - - )} - {t('titleFreezeParams')} - - setFieldValue('freeze.freezeVotesThreshold', valuePair)} - decimalPlaces={0} - data-testid="guardConfig-freezeVotesThreshold" - /> - - - - setFieldValue('freeze.freezeProposalPeriod', valuePair)} - decimalPlaces={0} - min="1" - data-testid="guardConfig-freezeProposalDuration" - /> - {minutes} - - + setFieldValue('freeze.executionPeriod', valuePair)} + decimalPlaces={0} + min="1" + data-testid="guardConfig-executionDetails" + /> + {minutes} + + + {t('exampleExecutionPeriod')} + + + + )} + {t('titleFreezeParams')} + - {t('exampleFreezeProposalPeriod')} - - - - setFieldValue('freeze.freezePeriod', valuePair)} + value={values.freeze.freezeVotesThreshold.bigintValue} + onChange={valuePair => setFieldValue('freeze.freezeVotesThreshold', valuePair)} decimalPlaces={0} - min="1" - data-testid="guardConfig-freezeDuration" + data-testid="guardConfig-freezeVotesThreshold" /> - - {minutes} - - + - {t('exampleFreezePeriod')} - - - - - + + setFieldValue('freeze.freezeProposalPeriod', valuePair)} + decimalPlaces={0} + min="1" + data-testid="guardConfig-freezeProposalDuration" + /> + {minutes} + + {t('exampleFreezeProposalPeriod')} + + + + + setFieldValue('freeze.freezePeriod', valuePair)} + decimalPlaces={0} + min="1" + data-testid="guardConfig-freezeDuration" + /> + + {minutes} + + + {t('exampleFreezePeriod')} + + + + + {t('freezeGuardDescription')} - - - - {showCustomNonce && ( - <> + + + {showCustomNonce && ( - - - )} - - - + )} + + + + ); } diff --git a/src/components/DaoCreator/formComponents/Multisig.tsx b/src/components/DaoCreator/formComponents/Multisig.tsx index c98c7cbdab..05fa8c9f36 100644 --- a/src/components/DaoCreator/formComponents/Multisig.tsx +++ b/src/components/DaoCreator/formComponents/Multisig.tsx @@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'; import { ICreationStepProps, CreatorSteps } from '../../../types'; import { AddressInput } from '../../ui/forms/EthAddressInput'; import { LabelComponent } from '../../ui/forms/InputComponent'; -import Divider from '../../ui/utils/Divider'; import { StepButtons } from '../StepButtons'; import { StepWrapper } from '../StepWrapper'; import { DAOCreateMode } from './EstablishEssentials'; @@ -71,98 +70,99 @@ export function Multisig(props: ICreationStepProps) { }; return ( - - + - - validateTotalSigners(value)} - > - - - - - validateNumber(value, 'multisig.signatureThreshold')} + - - - - + validateTotalSigners(value)} + > + + + - {values.multisig.trustedAddresses.map((trustedAddress, i) => { - const errorMessage = - errors?.multisig?.trustedAddresses?.[i] && trustedAddress.length - ? errors?.multisig?.trustedAddresses?.[i] - : null; + validateNumber(value, 'multisig.signatureThreshold')} + > + + + + + + {values.multisig.trustedAddresses.map((trustedAddress, i) => { + const errorMessage = + errors?.multisig?.trustedAddresses?.[i] && trustedAddress.length + ? errors?.multisig?.trustedAddresses?.[i] + : null; - return ( - - - - {({ field }: FieldAttributes) => ( - + + {({ field }: FieldAttributes) => ( + + )} + + {values.multisig.trustedAddresses.length > 1 && ( + + } + type="button" + onClick={async () => { + deleteIndex(i); + }} + data-testid={'multisig.numOfSigners-' + i} /> )} - - {values.multisig.trustedAddresses.length > 1 && ( - - } - type="button" - onClick={async () => { - deleteIndex(i); - }} - data-testid={'multisig.numOfSigners-' + i} - /> - )} - - - ); - })} - - - - + + + ); + })} + + + + - + ); } diff --git a/src/components/DaoCreator/formComponents/VotesTokenImport.tsx b/src/components/DaoCreator/formComponents/VotesTokenImport.tsx index 64cb0901ef..9ec0b7b88f 100644 --- a/src/components/DaoCreator/formComponents/VotesTokenImport.tsx +++ b/src/components/DaoCreator/formComponents/VotesTokenImport.tsx @@ -1,10 +1,9 @@ import { Flex, Input } from '@chakra-ui/react'; import { Field, FieldAttributes } from 'formik'; import { useTranslation } from 'react-i18next'; -import { CreatorSteps, ICreationStepProps } from '../../../types'; +import { ICreationStepProps } from '../../../types'; import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle'; import { LabelComponent } from '../../ui/forms/InputComponent'; -import { StepButtons } from '../StepButtons'; export function VotesTokenImport(props: ICreationStepProps) { const { values, handleChange } = props; @@ -19,15 +18,14 @@ export function VotesTokenImport(props: ICreationStepProps) { label={t('labelTokenName')} helper={t('helperTokenName')} isRequired - disabled={true} > {({ field }: FieldAttributes) => ( )} @@ -36,34 +34,27 @@ export function VotesTokenImport(props: ICreationStepProps) { label={t('labelTokenSymbol')} helper={t('helperTokenSymbol')} isRequired - disabled={true} > - ); } diff --git a/src/components/DaoCreator/formComponents/VotesTokenNew.tsx b/src/components/DaoCreator/formComponents/VotesTokenNew.tsx index d5b71e7936..d6f249ff11 100644 --- a/src/components/DaoCreator/formComponents/VotesTokenNew.tsx +++ b/src/components/DaoCreator/formComponents/VotesTokenNew.tsx @@ -2,13 +2,10 @@ import { Flex, Input } from '@chakra-ui/react'; import { Field, FieldAttributes } from 'formik'; import { useTranslation } from 'react-i18next'; import { useFormHelpers } from '../../../hooks/utils/useFormHelpers'; -import { ICreationStepProps, CreatorSteps } from '../../../types'; +import { ICreationStepProps } from '../../../types'; import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle'; import { BigIntInput } from '../../ui/forms/BigIntInput'; import { LabelComponent } from '../../ui/forms/InputComponent'; -import Divider from '../../ui/utils/Divider'; -import { StepButtons } from '../StepButtons'; -import { AzoriusTokenAllocations } from './AzoriusTokenAllocations'; export function VotesTokenNew(props: ICreationStepProps) { const { values, handleChange, setFieldValue } = props; @@ -31,6 +28,7 @@ export function VotesTokenNew(props: ICreationStepProps) { {...field} data-testid="tokenVoting-tokenNameInput" minWidth="50%" + placeholder="Name" /> )} @@ -46,6 +44,7 @@ export function VotesTokenNew(props: ICreationStepProps) { onChange={handleChange} maxLength={6} data-testid="tokenVoting-tokenSymbolInput" + placeholder="TKN" /> setFieldValue('erc20Token.tokenSupply', valuePair)} data-testid="tokenVoting-tokenSupplyInput" onKeyDown={restrictChars} + placeholder="100,000,000" /> - - - - ); } diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx index 274eb42ef1..ac7c1c8d0c 100644 --- a/src/components/ProposalBuilder/ProposalTransaction.tsx +++ b/src/components/ProposalBuilder/ProposalTransaction.tsx @@ -264,7 +264,7 @@ export default function ProposalTransaction({ _checked={{ bg: 'black-0', color: 'lilac--3', - borderWidth: '4px', + borderWidth: '6px', }} > @@ -324,7 +324,7 @@ export default function ProposalTransaction({ _checked={{ bg: 'black-0', color: 'lilac--3', - borderWidth: '4px', + borderWidth: '6px', }} > diff --git a/src/components/Proposals/ProposalActions/CastVote.tsx b/src/components/Proposals/ProposalActions/CastVote.tsx index 0a2117b5d0..29102bb074 100644 --- a/src/components/Proposals/ProposalActions/CastVote.tsx +++ b/src/components/Proposals/ProposalActions/CastVote.tsx @@ -198,7 +198,7 @@ function Vote({ _checked={{ bg: 'black-0', color: 'lilac--3', - borderWidth: '4px', + borderWidth: '6px', }} > {t(choice, { ns: 'common' })} diff --git a/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx index ce4f1d1da4..9142a996f1 100644 --- a/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx +++ b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx @@ -26,7 +26,7 @@ function Signer({ signer, disabled }: { signer: string; disabled: boolean }) { _checked={{ bg: 'black-0', color: 'lilac--3', - borderWidth: '0.30rem', + borderWidth: '6px', _hover: { color: 'lilac--4', diff --git a/src/components/ui/badges/SupportTooltip.tsx b/src/components/ui/badges/SupportTooltip.tsx index 2f695866c5..33dba46f9b 100644 --- a/src/components/ui/badges/SupportTooltip.tsx +++ b/src/components/ui/badges/SupportTooltip.tsx @@ -1,23 +1,25 @@ -import { Tooltip, TooltipProps } from '@chakra-ui/react'; -import { SupportQuestion } from '@decent-org/fractal-ui'; +import { Tooltip, TooltipProps, Icon } from '@chakra-ui/react'; +import { Icon as PhosphorIcon, Question } from '@phosphor-icons/react'; import { RefObject } from 'react'; import { TOOLTIP_MAXW } from '../../../constants/common'; import ModalTooltip from '../modals/ModalTooltip'; interface Props extends Omit { containerRef?: RefObject; + IconComponent?: PhosphorIcon; } /** * Displays a circle in question mark, along with the provided tooltip, via * the 'label' Tooltip prop. */ -export default function SupportTooltip({ containerRef, ...rest }: Props) { - const question = ( - ); @@ -29,7 +31,7 @@ export default function SupportTooltip({ containerRef, ...rest }: Props) { placement="top" {...rest} > - {question} + {icon} ); } @@ -41,7 +43,7 @@ export default function SupportTooltip({ containerRef, ...rest }: Props) { {...rest} color="white" > - {question} + {icon} ); } diff --git a/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx b/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx index 0ff179b2ff..da8e80766a 100644 --- a/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx +++ b/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx @@ -4,8 +4,8 @@ import { ReactNode } from 'react'; function ContentBoxTitle({ children }: { children: ReactNode }) { return ( {children} diff --git a/src/components/ui/forms/Radio/RadioWithText.tsx b/src/components/ui/forms/Radio/RadioWithText.tsx index 9e01d42c11..dbf5ec66df 100644 --- a/src/components/ui/forms/Radio/RadioWithText.tsx +++ b/src/components/ui/forms/Radio/RadioWithText.tsx @@ -27,20 +27,27 @@ export function RadioWithText({ data-testid={testId} type="radio" isDisabled={disabled} - textColor="gold.500" - colorScheme="blackAlpha" - borderColor="gold.500" + disabled={disabled} + bg="black-0" + color="lilac--3" + _disabled={{ bg: 'neutral-6', color: 'neutral-5' }} + _hover={{ bg: 'black-0', color: 'lilac--4' }} + _checked={{ + bg: 'black-0', + color: 'lilac--3', + borderWidth: '6px', + }} size="lg" value={value} > {label} @@ -48,13 +55,14 @@ export function RadioWithText({ )} {description} diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx index 433f63bfa1..1884767fa2 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx @@ -1,5 +1,5 @@ import { Box, Button, Flex, MenuItem, Text } from '@chakra-ui/react'; -import { CopySimple } from '@phosphor-icons/react/dist/ssr'; +import { CopySimple } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import useAvatar from '../../../../hooks/utils/useAvatar'; import { useCopyText } from '../../../../hooks/utils/useCopyText'; diff --git a/src/i18n/locales/en/daoCreate.json b/src/i18n/locales/en/daoCreate.json index 2259317215..b4e0e80550 100644 --- a/src/i18n/locales/en/daoCreate.json +++ b/src/i18n/locales/en/daoCreate.json @@ -1,5 +1,5 @@ { - "buttonCreate": "Create a Fractal", + "buttonCreate": "Create a DAO", "addNFTButton": "Import another token", "labelCreateSubDAOProposal": "Create a sub-Safe", "errorLowSignerThreshold": "Threshold must be greater than 0", @@ -30,8 +30,8 @@ "labelNFTWeight": "Weight", "helperNFTWeight": "How many votes is this token worth?", "labelVotingPeriod": "Voting Period", - "labelChooseGovernance": "Choose Governance", - "helperChooseGovernance": "What type of governance would you like?", + "labelChooseGovernance": "Select Governance", + "helperChooseGovernance": "How would you like to govern your DAO?", "exampleVotingPeriod": "10,080 minutes = 1 week", "helperVotingPeriod": "The length of time (in minutes) voting is allowed after proposal creation", "helperQuorum": "The percentage of total possible token votes required to vote on a proposal to make the result valid", @@ -58,7 +58,7 @@ "errorAllocation": "Invalid token allocation", "labelParentAllocation": "Parent token holder claiming", "helperParentAllocation": "The total number of tokens claimable by all parent token holders", - "labelAddAllocation": "+ Add Allocation", + "labelAddAllocation": "Add Allocation", "labelTokenName": "Token Name", "helperTokenName": "What is your governance token called?", "labelTokenSymbol": "Token Symbol", @@ -66,20 +66,20 @@ "labelTokenSupply": "Token Supply", "helperTokenSupply": "Total available tokens", "labelMultisigGov": "Safe Multisig", - "descMultisigGov": "Multisignature governance on a Safe{Wallet}", + "descMultisigGov": "Multi-signature governance on a Safe{Wallet}", "labelAzoriusErc20Gov": "Token Voting Safe", "descAzoriusErc20Gov": "ERC-20 token voting governance on a Safe{Wallet}", "labelAzoriusErc721Gov": "NFT Voting Safe", "descAzoriusErc721Gov": "Assign voting rights and ownership privileges to ERC-721 token holders", - "labelFractalName": "Fractal Name", - "daoNamePlaceholder": "Name of my Safe", - "helperFractalName": "What should we call your Safe{Wallet}?", + "labelDAOName": "DAO name", + "daoNamePlaceholder": "Name", + "helperDAOName": "What is your DAO called?", "titleProposalSettings": "Proposal Settings", "labelDeploySubDAO": "Create a sub-Safe Proposal", "labelDeployAzorius": "Create Azorius deployment Proposal", "titleAllocations": "Initial Token Allocations", "titleTokenParams": "Token Metadata", - "titleSelectToken": "Select Token", + "titleTokenSupply": "Token Supply", "titleAddress": "Address", "titleAmount": "Amount", "createSubDAOPendingToastMessage": "Creating your sub-Safe Proposal", @@ -87,7 +87,7 @@ "createSubDAOFailureToastMessage": "Deployment failed", "helperAllocations": "Unallocated tokens will be placed in your DAO's treasury", "labelSelectToken": "Select Token", - "helperSelectToken": "Create a new token or use an existing ERC-20 token for your DAO's governance", + "helperSelectToken": "Create a new token or use an existing ERC-20 token.", "radioLabelNewToken": "New Token", "radioLabelExistingToken": "Existing Token", "helperNewToken": "Create a new ERC-20 token to vote with", @@ -95,7 +95,7 @@ "warningExistingToken": "This token must be wrapped in order to be used as a voting token", "warningExistingTokenTooltip": "Fractal will deploy a new ERC-20 governance token to wrap this one. Holders can deposit their tokens to vote with or withdraw them at any time.", "snapshot": "Snapshot", - "snapshotHelper": "Does your Safe have a Snapshot space?", + "snapshotHelper": "Does your DAO have a Snapshot space?", "tooltipMultisig": "Multisig is useful when you only have a small group of decision makers that all need to sign a transaction for it pass. <1>Learn more", "tooltipTokenVoting": "Token Voting is a method to give a larger group of ERC-20 token holders governance power to propose and vote on transactions. <1>Learn more", "toastDisconnected": "Connect an account to proceed!", diff --git a/src/i18n/locales/uk/daoCreate.json b/src/i18n/locales/uk/daoCreate.json index 9f559eda3d..bdfa9082fc 100644 --- a/src/i18n/locales/uk/daoCreate.json +++ b/src/i18n/locales/uk/daoCreate.json @@ -11,7 +11,6 @@ "titleSafeConfig": "Конфігурація Multisig", "titleSignerConfig": "Параметри підписантів", "titleGovConfig": "Скласти систему управління", - "labelSelectToken": "Обрати Токен", "labelVotingPeriod": "Період голосування", "labelChooseGovernance": "Обрати систему управління", "helperChooseGovernance": "Яку схему управління ви б хотіли?", @@ -32,7 +31,7 @@ "labelFreezePeriod": "Період заморозки", "exampleFreezePeriod": "10080 хвилин = 1 тиждень", "errorDuplicateAddress": "Така адреса вже додана", - "labelAddAllocation": "+ Додати Розподілення", + "labelAddAllocation": "Додати Розподілення", "labelTokenName": "Ім'я токену", "helperTokenName": "Як ваш токен голосування буде називатись?", "labelTokenSymbol": "Символ токену", @@ -40,7 +39,7 @@ "labelTokenSupply": "Загальний випуск", "helperTokenSupply": "Загальна кількість доступних токенів", "descAzoriusGov": "Схема управління голосуванням ERC-20 токенами на контракті Safe{Wallet} гаманцю", - "labelFractalName": "Ім'я Fractal-у", + "labelDAOName": "Ім'я DAO", "titleProposalSettings": "Налаштування пропозицій", "titleAllocations": "Первинне розподілення токенів", "titleTokenParams": "Метадані токену", diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 2d68e728bb..3a07e134fe 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -167,7 +167,13 @@ export default function HomePage() { + }