diff --git a/src/components/DaoCreator/StepWrapper.tsx b/src/components/DaoCreator/StepWrapper.tsx index ba9f45aa06..cd5e04a606 100644 --- a/src/components/DaoCreator/StepWrapper.tsx +++ b/src/components/DaoCreator/StepWrapper.tsx @@ -1,5 +1,5 @@ import { Box, Flex, Text } from '@chakra-ui/react'; -import { Trash } from '@decent-org/fractal-ui'; +import { Trash } from '@phosphor-icons/react'; import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx index bea29eaca5..21617f2811 100644 --- a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx +++ b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx @@ -1,18 +1,11 @@ -import { - Alert, - AlertTitle, - Divider, - Flex, - InputGroup, - InputRightElement, - Text, -} from '@chakra-ui/react'; +import { Alert, AlertTitle, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react'; import { Info } from '@decent-org/fractal-ui'; 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'; @@ -144,10 +137,7 @@ export function AzoriusGovernance(props: ICreationStepProps) { - + {t('addNFTButton')} - + {t('titleNFTDetails')} - + {values.erc721Token.nfts.map((nft, i) => { const nftError = ( errors?.erc721Token?.nfts as FormikErrors< @@ -211,13 +208,7 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) { nft={nft} hasAddressError={!!addressErrorMessage} /> - {i < values.erc721Token.nfts.length - 1 && ( - - )} + {i < values.erc721Token.nfts.length - 1 && } ); })} diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx index 0349479ea5..2c0d700e75 100644 --- a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx +++ b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx @@ -1,5 +1,5 @@ import { ens_normalize } from '@adraffy/ens-normalize'; -import { Box, Divider, Input, RadioGroup } from '@chakra-ui/react'; +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'; @@ -17,6 +17,7 @@ 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'; @@ -176,10 +177,7 @@ export function EstablishEssentials(props: ICreationStepProps) { - + - + - + {showCustomNonce && ( <> - + )} - + - + - + ) { +export function TransactionValueContainer({ children }: PropsWithChildren<{}>) { return ( {children} @@ -34,27 +30,34 @@ export default function ProposalTemplateDetails({ }: FormikProps & { mode: ProposalBuilderMode }) { const { t } = useTranslation(['proposalTemplate', 'proposal']); const trimmedTitle = proposalMetadata.title?.trim(); + const [descriptionCollapsed, setDescriptionCollapsed] = useState(true); return ( - {t('preview')} - + {t('preview')} + - {t('previewTitle')} - {trimmedTitle} + {t('previewTitle')} + + {trimmedTitle} + {mode === ProposalBuilderMode.TEMPLATE && ( - {t('previewThumnbail')} + {t('previewThumnbail')} {trimmedTitle && ( )} - {t('proposalTemplateDescription')} + {t('proposalTemplateDescription')} + {proposalMetadata.description && ( + + )} + + {!descriptionCollapsed && ( - - + )} + {transactions.map((transaction, i) => { const valueBiggerThanZero = transaction.ethValue.bigintValue ? transaction.ethValue.bigintValue > 0n : false; return ( - {t('labelTargetAddress', { ns: 'proposal' })} + {t('labelTargetAddress', { ns: 'proposal' })} {transaction.targetAddress && ( {transaction.targetAddress} )} - - {t('labelFunctionName', { ns: 'proposal' })} + + {t('labelFunctionName', { ns: 'proposal' })} {transaction.functionName && ( {transaction.functionName} )} {transaction.parameters.map((parameter, parameterIndex) => ( - {t('parameter')} + {t('parameter')} {parameter.signature && ( {parameter.signature} )} - - {!!parameter.label ? parameter.label : t('value')} - + {!!parameter.label ? parameter.label : t('value')} {(parameter.label || parameter.value) && ( - + {parameter.value || t('userInput')} )} ))} - + - {t('eth')} + {t('eth')} {valueBiggerThanZero ? transaction.ethValue.value : 'n/a'} diff --git a/src/components/ProposalBuilder/ProposalMetadata.tsx b/src/components/ProposalBuilder/ProposalMetadata.tsx index 65bc1b51ff..2a6e42bd94 100644 --- a/src/components/ProposalBuilder/ProposalMetadata.tsx +++ b/src/components/ProposalBuilder/ProposalMetadata.tsx @@ -1,79 +1,60 @@ -import { Button, Divider, VStack } from '@chakra-ui/react'; +import { VStack } from '@chakra-ui/react'; import { FormikProps } from 'formik'; import { useTranslation } from 'react-i18next'; -import { CreateProposalState } from '../../types'; import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder'; import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent'; export interface ProposalMetadataProps extends FormikProps { - setFormState: (state: CreateProposalState) => void; mode: ProposalBuilderMode; } export default function ProposalMetadata({ values: { proposalMetadata }, setFieldValue, - errors: { proposalMetadata: proposalMetadataError }, - setFormState, mode, }: ProposalMetadataProps) { const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']); const isProposalMode = mode === ProposalBuilderMode.PROPOSAL; return ( - <> - - setFieldValue('proposalMetadata.title', e.target.value)} - disabled={false} - testId="metadata.title" - maxLength={50} - /> - setFieldValue('proposalMetadata.description', e.target.value)} - disabled={false} - rows={12} - /> - - + setFieldValue('proposalMetadata.title', e.target.value)} + disabled={false} + testId="metadata.title" + maxLength={50} /> - - + setFieldValue('proposalMetadata.description', e.target.value)} + disabled={false} + rows={12} + /> + ); } diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx index 6793d61d1f..7f0a7c14fe 100644 --- a/src/components/ProposalBuilder/ProposalTransaction.tsx +++ b/src/components/ProposalBuilder/ProposalTransaction.tsx @@ -1,11 +1,27 @@ -import { VStack, HStack, Text, Box, Flex, IconButton } from '@chakra-ui/react'; -import { AddPlus, Minus } from '@decent-org/fractal-ui'; -import { useCallback } from 'react'; +import { + VStack, + HStack, + Text, + Box, + Flex, + Icon, + IconButton, + Button, + Accordion, + AccordionPanel, + AccordionItem, + AccordionButton, + Radio, +} from '@chakra-ui/react'; +import { Plus, MinusCircle, CaretDown, CaretRight } from '@phosphor-icons/react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CreateProposalTransaction, ProposalBuilderMode } from '../../types/proposalBuilder'; +import { scrollToBottom } from '../../utils/ui'; import ABISelector, { ABIElement } from '../ui/forms/ABISelector'; import ExampleLabel from '../ui/forms/ExampleLabel'; import { BigIntComponent, InputComponent } from '../ui/forms/InputComponent'; +import Divider from '../ui/utils/Divider'; import { DEFAULT_PROPOSAL_TRANSACTION } from './constants'; interface ProposalTransactionProps { @@ -29,6 +45,8 @@ export default function ProposalTransaction({ }: ProposalTransactionProps) { const isProposalMode = mode === ProposalBuilderMode.PROPOSAL; const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']); + const [expandedIndecies, setExpandedIndecies] = useState([0]); + const handleABISelectorChange = useCallback( (value: ABIElement) => { setFieldValue(`transactions.${transactionIndex}.functionName`, value.name); @@ -53,7 +71,8 @@ export default function ProposalTransaction({ @@ -71,212 +90,315 @@ export default function ProposalTransaction({ } /> {transaction.targetAddress && ( - + )} - - - - - setFieldValue(`transactions.${transactionIndex}.functionName`, e.target.value) - } - disabled={transactionPending} - subLabel={ - - {`${t('example', { ns: 'common' })}:`} - transfer - - } - errorMessage={transaction.functionName && txFunctionError ? txFunctionError : undefined} - testId="transaction.functionName" - /> - - {transaction.parameters.map((parameter, i) => ( - 1 ? 10 : 0 - } - > - {i === transaction.parameters.length - 1 && ( - - setFieldValue(`transactions.${transactionIndex}.parameters`, [ - ...transaction.parameters, - DEFAULT_PROPOSAL_TRANSACTION, - ]) - } - > - - - - - )} - + + + {t('functionHeader')} + + + setFieldValue(`transactions.${transactionIndex}.functionName`, e.target.value) + } + disabled={transactionPending} + subLabel={ + + {`${t('example', { ns: 'common' })}:`} + transfer + + } + errorMessage={transaction.functionName && txFunctionError ? txFunctionError : undefined} + testId="transaction.functionName" + /> + + + + {transaction.parameters.map((parameter, i) => ( + - - setFieldValue( - `transactions.${transactionIndex}.parameters.${i}.signature`, - e.target.value, - ) - } - disabled={transactionPending} - subLabel={ - - - {t('example', { ns: 'common' })}: address to{' '} - {t('or', { ns: 'common' })} uint amount - - - } - testId={`transactions.${transactionIndex}.parameters.${i}.signature`} - /> - - {!isProposalMode && ( - <> - - setFieldValue( - `transactions.${transactionIndex}.parameters.${i}.label`, - e.target.value, - ) - } - disabled={transactionPending || !!parameter.value} - testId={`transactions.${transactionIndex}.parameters.${i}.label`} - subLabel={ - - {t('helperParameterLabel', { ns: 'proposalTemplate' })} - - } - gridContainerProps={{ - display: 'inline-flex', - flexWrap: 'wrap', - width: '30%', - }} - inputContainerProps={{ - width: '100%', - }} - /> - {t('or', { ns: 'common' })} - - )} - - setFieldValue( - `transactions.${transactionIndex}.parameters.${i}.value`, - e.target.value, - ) - } - disabled={transactionPending || !!parameter.label} - subLabel={ - - - {t('example', { ns: 'common' })}: value - {!isProposalMode && ( - - {t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })} - - )} - + {({ isExpanded }) => ( + <> + + + { + setExpandedIndecies(indexArray => { + if (indexArray.includes(i)) { + const newTxArr = [...indexArray]; + newTxArr.splice(newTxArr.indexOf(i), 1); + return newTxArr; + } else { + return [...indexArray, i]; + } + }); + }} + p={0} + textStyle="display-lg" + color="lilac-0" + > + + + {isExpanded ? : } + {t('parameter')} {i + 1} + + + + {i !== 0 || transaction.parameters.length !== 1 ? ( + } + aria-label={t('removetransactionlabel')} + variant="unstyled" + onClick={() => + setFieldValue( + `transactions.${transactionIndex}.parameters`, + transaction.parameters.filter( + (parameterToRemove, parameterToRemoveIndex) => + parameterToRemoveIndex !== i, + ), + ) + } + minWidth="auto" + color="lilac-0" + _disabled={{ opacity: 0.4, cursor: 'default' }} + sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }} + disabled={transactionPending} + /> + ) : ( + + )} - } - testId={`transactions.${transactionIndex}.parameters.${i}.value`} - gridContainerProps={{ - display: 'inline-flex', - flexWrap: 'wrap', - flex: '1', - }} - inputContainerProps={{ - width: '100%', - }} - /> - - - {i !== 0 && ( - - setFieldValue( - `transactions.${transactionIndex}.parameters`, - transaction.parameters.filter( - (parameterToRemove, parameterToRemoveIndex) => parameterToRemoveIndex !== i, - ), - ) - } - > - - - - - )} - - ))} - + + + + + setFieldValue( + `transactions.${transactionIndex}.parameters.${i}.signature`, + e.target.value, + ) + } + disabled={transactionPending} + subLabel={ + + + {t('example', { ns: 'common' })}:{' '} + address to{' '} + {t('or', { ns: 'common' })}{' '} + uint amount + + + } + testId={`transactions.${transactionIndex}.parameters.${i}.signature`} + /> + + + {t('labelParameterValue', { ns: 'proposalTemplate' })} + + {!isProposalMode && ( + + { + event.preventDefault(); + }} + checked={!!parameter.label} + disabled={!parameter.signature || !!parameter.value} + isDisabled={!parameter.signature || !!parameter.value} + bg="black-0" + color="lilac--3" + size="md" + _disabled={{ bg: 'neutral-6', color: 'neutral-5' }} + _hover={{ bg: 'black-0', color: 'lilac--4' }} + _checked={{ + bg: 'black-0', + color: 'lilac--3', + borderWidth: '4px', + }} + > + + + {t('labelParameterLabel', { + ns: 'proposalTemplate', + })} + + + {t('labelParameterLabelHelper', { + ns: 'proposalTemplate', + })} + + + + } + isRequired={!!parameter.signature && !parameter.value} + value={parameter.label || ''} + placeholder={t('parameterLabelPlaceholder', { + ns: 'proposalTemplate', + })} + onChange={e => + setFieldValue( + `transactions.${transactionIndex}.parameters.${i}.label`, + e.target.value, + ) + } + disabled={transactionPending || !!parameter.value} + testId={`transactions.${transactionIndex}.parameters.${i}.label`} + subLabel={ + + + {t('helperParameterLabel', { ns: 'proposalTemplate' })} + + + } + /> + + )} + { + event.preventDefault(); + }} + checked={!!parameter.value} + disabled={!parameter.signature || !!parameter.label} + isDisabled={!parameter.signature || !!parameter.label} + bg="black-0" + color="lilac--3" + size="md" + _disabled={{ bg: 'neutral-6', color: 'neutral-5' }} + _hover={{ bg: 'black-0', color: 'lilac--4' }} + _checked={{ + bg: 'black-0', + color: 'lilac--3', + borderWidth: '4px', + }} + > + + + {t('labelParameterValueWithLabel', { + ns: 'proposalTemplate', + })} + + + {t('labelParameterLabelHelper', { + ns: 'proposalTemplate', + })} + + + + ) : undefined + } + isRequired={!!parameter.signature && !parameter.label} + helper={ + isProposalMode + ? t('helperFunctionParameterValue', { ns: 'proposalTemplate' }) + : undefined + } + value={parameter.value || ''} + placeholder="100" + onChange={e => + setFieldValue( + `transactions.${transactionIndex}.parameters.${i}.value`, + e.target.value, + ) + } + disabled={transactionPending || !!parameter.label} + subLabel={ + + + {t('example', { ns: 'common' })}:{' '} + 1.2 + + + } + testId={`transactions.${transactionIndex}.parameters.${i}.value`} + /> + + + + + + + {!isExpanded && ( + + )} + {i === transaction.parameters.length - 1 && ( + + )} + + )} + + ))} + + {`${t('example', { ns: 'common' })}:`} - {'1.2'} + 1.2 {!isProposalMode && ( {t('ethParemeterHelper', { ns: 'proposalTemplate' })} diff --git a/src/components/ProposalBuilder/ProposalTransactions.tsx b/src/components/ProposalBuilder/ProposalTransactions.tsx index eac985a805..4bba04bb31 100644 --- a/src/components/ProposalBuilder/ProposalTransactions.tsx +++ b/src/components/ProposalBuilder/ProposalTransactions.tsx @@ -1,13 +1,15 @@ import { Box, + Flex, Accordion, AccordionButton, AccordionItem, AccordionPanel, HStack, IconButton, + Text, } from '@chakra-ui/react'; -import { ArrowDown, ArrowRight, Minus } from '@decent-org/fractal-ui'; +import { MinusCircle, CaretDown, CaretRight } from '@phosphor-icons/react'; import { FormikErrors, FormikProps } from 'formik'; import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; @@ -59,13 +61,13 @@ export default function ProposalTransactions({ key={index} borderTop="none" borderBottom="none" + my="1.5rem" > {({ isExpanded }) => ( - {isExpanded ? : } - {t('transaction')} {index + 1} + + + {isExpanded ? : } + {t('transaction')} {index + 1} + + {index !== 0 || transactions.length !== 1 ? ( } + icon={} aria-label={t('removetransactionlabel')} variant="unstyled" onClick={() => removeTransaction(index)} minWidth="auto" - _hover={{ color: 'gold.500' }} + color="lilac-0" _disabled={{ opacity: 0.4, cursor: 'default' }} sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }} disabled={pendingTransaction} diff --git a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx index 25e267eb00..4eb8976cdb 100644 --- a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx +++ b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx @@ -1,18 +1,16 @@ -import { Button, Box, Flex, Text, VStack, Divider, Alert, AlertTitle } from '@chakra-ui/react'; -import { Info } from '@decent-org/fractal-ui'; +import { Button, Box, Icon } from '@chakra-ui/react'; +import { Plus } from '@phosphor-icons/react'; import { FormikProps } from 'formik'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { CreateProposalState } from '../../types'; import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder'; import { scrollToBottom } from '../../utils/ui'; +import Divider from '../ui/utils/Divider'; import ProposalTransactions from './ProposalTransactions'; import { DEFAULT_PROPOSAL_TRANSACTION } from './constants'; interface ProposalTransactionsFormProps extends FormikProps { pendingTransaction: boolean; - setFormState: (state: CreateProposalState) => void; - canUserCreateProposal?: boolean; safeNonce?: number; mode: ProposalBuilderMode; } @@ -20,11 +18,8 @@ interface ProposalTransactionsFormProps extends FormikProps export default function ProposalTransactionsForm(props: ProposalTransactionsFormProps) { const { pendingTransaction, - setFormState, setFieldValue, values: { transactions }, - errors: { transactions: transactionsError, nonce: nonceError }, - canUserCreateProposal, safeNonce, } = props; const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']); @@ -43,62 +38,28 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm setExpandedIndecies={setExpandedIndecies} {...props} /> - + - - - - - {t('transactionExecutionAlertMessage', { ns: 'proposal' })} - - - - - - - - - - + + {t('labelAddTransaction', { ns: 'proposal' })} + ); } diff --git a/src/components/ProposalBuilder/StateButtons.tsx b/src/components/ProposalBuilder/StateButtons.tsx new file mode 100644 index 0000000000..d6ff742443 --- /dev/null +++ b/src/components/ProposalBuilder/StateButtons.tsx @@ -0,0 +1,75 @@ +import { Flex, Button, Icon } from '@chakra-ui/react'; +import { CaretRight, CaretLeft } from '@phosphor-icons/react'; +import { FormikProps } from 'formik'; +import { Dispatch, SetStateAction } from 'react'; +import { useTranslation } from 'react-i18next'; +import { CreateProposalState } from '../../types'; +import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder'; + +interface StateButtonsProps extends FormikProps { + pendingTransaction: boolean; + formState: CreateProposalState; + setFormState: Dispatch>; + canUserCreateProposal?: boolean; + safeNonce?: number; + mode: ProposalBuilderMode; +} + +export default function StateButtons(props: StateButtonsProps) { + const { + pendingTransaction, + formState, + setFormState, + errors: { + transactions: transactionsError, + nonce: nonceError, + proposalMetadata: proposalMetadataError, + }, + canUserCreateProposal, + values: { proposalMetadata }, + } = props; + const { t } = useTranslation(['common', 'proposal']); + if (formState === CreateProposalState.METADATA_FORM) { + return ( + + ); + } + return ( + + + + + ); +} diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx index 57e2fc3038..cc1ec9cf46 100644 --- a/src/components/ProposalBuilder/index.tsx +++ b/src/components/ProposalBuilder/index.tsx @@ -1,10 +1,9 @@ -import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react'; -import { Trash } from '@decent-org/fractal-ui'; +import { Box, Flex, Grid, GridItem } from '@chakra-ui/react'; +import { Trash } from '@phosphor-icons/react'; import { Formik, FormikProps } from 'formik'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common'; import { DAO_ROUTES, BASE_ROUTES } from '../../constants/routes'; import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal'; import useCreateProposalSchema from '../../hooks/schemas/proposalBuilder/useCreateProposalSchema'; @@ -18,6 +17,7 @@ import PageHeader from '../ui/page/Header/PageHeader'; import ProposalDetails from './ProposalDetails'; import ProposalMetadata from './ProposalMetadata'; import ProposalTransactionsForm from './ProposalTransactionsForm'; +import StateButtons from './StateButtons'; interface IProposalBuilder { mode: ProposalBuilderMode; @@ -25,10 +25,6 @@ interface IProposalBuilder { initialValues: CreateProposalForm; } -const templateAreaTwoCol = '"content details"'; -const templateAreaSingleCol = `"content" - "details"`; - export default function ProposalBuilder({ mode, initialValues, @@ -42,6 +38,7 @@ export default function ProposalBuilder({ const navigate = useNavigate(); const { node: { daoAddress, safe }, + readOnly: { dao }, } = useFractal(); const { addressPrefix } = useNetworkConfig(); const { submitProposal, pendingCreateTx } = useSubmitProposal(); @@ -130,11 +127,11 @@ export default function ProposalBuilder({ /> @@ -145,44 +142,47 @@ export default function ProposalBuilder({ {formState === CreateProposalState.METADATA_FORM ? ( ) : ( - <> - - - {formikProps.values.proposalMetadata.title} - - formikProps.setFieldValue('nonce', newNonce)} - align="end" - /> - - - + )} + {formState === CreateProposalState.TRANSACTIONS_FORM && !dao?.isAzorius && ( + + formikProps.setFieldValue('nonce', newNonce)} + align="end" + /> + + )} + _title.slice(0, 2)} + textStyle="display-2xl" + color="white-0" /> } titleKey="titleManageProposalTemplate" @@ -120,10 +124,9 @@ export default function ProposalTemplateCard({ /> {title} diff --git a/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx b/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx index 7f7fe953e7..62ab9bde84 100644 --- a/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx +++ b/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Grid, GridItem, Text } from '@chakra-ui/react'; +import { Box, Grid, GridItem, Text } from '@chakra-ui/react'; import { format } from 'date-fns'; import { useTranslation } from 'react-i18next'; import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common'; @@ -8,6 +8,7 @@ import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats'; import { ActivityAddress } from '../../Activity/ActivityAddress'; import { Badge } from '../../ui/badges/Badge'; import ContentBox from '../../ui/containers/ContentBox'; +import Divider from '../../ui/utils/Divider'; function OwnerInfoRow({ owner, @@ -64,7 +65,7 @@ export function SignerDetails({ proposal }: { proposal: MultisigProposal }) { {t('signers')} - + {safe.owners.map(owner => ( {t('proposalSummaryTitle')} - + {t('proposalSummaryTitle')} - + )} - + {t('votesTitle', { ns: 'proposal' })} - + {t('proposalSummaryTitle')} - + - + {!!proposal.quorum && ( {t('votesTitle')} ({votes.length}) - + {t('clear', { ns: 'common' })} - + - + - + @@ -293,7 +289,6 @@ export function Assets() { {(showStakeButton || showUnstakeButton || showClaimETHButton) && ( <> diff --git a/src/components/pages/DAOTreasury/components/Transactions.tsx b/src/components/pages/DAOTreasury/components/Transactions.tsx index 0f5ccd08ff..03d3eecd47 100644 --- a/src/components/pages/DAOTreasury/components/Transactions.tsx +++ b/src/components/pages/DAOTreasury/components/Transactions.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, HStack, Image, Spacer, Text, Tooltip } from '@chakra-ui/react'; +import { Box, HStack, Image, Spacer, Text, Tooltip } from '@chakra-ui/react'; import { SquareSolidArrowDown, SquareSolidArrowUp } from '@decent-org/fractal-ui'; import { useTranslation } from 'react-i18next'; import { useDateTimeDisplay } from '../../../../helpers/dateTime'; @@ -7,6 +7,7 @@ import { TransferType, AssetTransfer } from '../../../../types'; import { DisplayAddress } from '../../../ui/links/DisplayAddress'; import EtherscanLinkAddress from '../../../ui/links/EtherscanLinkAddress'; import EtherscanLinkTransaction from '../../../ui/links/EtherscanLinkTransaction'; +import Divider from '../../../ui/utils/Divider'; import { TokenEventType, TransferDisplayData, @@ -99,7 +100,7 @@ function TransferRow({ displayData }: { displayData: TransferDisplayData }) { /> - {!displayData.isLast && } + {!displayData.isLast && } ); } diff --git a/src/components/pages/DaoSettings/components/Metadata/index.tsx b/src/components/pages/DaoSettings/components/Metadata/index.tsx index a73f123d3d..0e704a7468 100644 --- a/src/components/pages/DaoSettings/components/Metadata/index.tsx +++ b/src/components/pages/DaoSettings/components/Metadata/index.tsx @@ -1,5 +1,5 @@ import { ens_normalize } from '@adraffy/ens-normalize'; -import { Flex, Text, Button, Divider } from '@chakra-ui/react'; +import { Flex, Text, Button } from '@chakra-ui/react'; import { useState, useEffect, ChangeEventHandler } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; @@ -12,6 +12,7 @@ import { useFractal } from '../../../../../providers/App/AppProvider'; import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider'; import { ProposalExecuteData } from '../../../../../types'; import { InputComponent } from '../../../../ui/forms/InputComponent'; +import Divider from '../../../../ui/utils/Divider'; export default function MetadataContainer() { const [name, setName] = useState(''); @@ -164,11 +165,7 @@ export default function MetadataContainer() { width: '100%', }} /> - + )} {t('guardTitle')} - + {safe?.guard && safe?.guard !== zeroAddress ? ( diff --git a/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx b/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx index b6496b550b..976944c1c4 100644 --- a/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx +++ b/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx @@ -1,7 +1,6 @@ import { Box, Button, - Divider, Flex, HStack, Select, @@ -22,6 +21,7 @@ import { couldBeENS } from '../../../../../../utils/url'; import SupportTooltip from '../../../../../ui/badges/SupportTooltip'; import { CustomNonceInput } from '../../../../../ui/forms/CustomNonceInput'; import { AddressInput } from '../../../../../ui/forms/EthAddressInput'; +import Divider from '../../../../../ui/utils/Divider'; import useAddSigner from '../hooks/useAddSigner'; function AddSignerModal({ @@ -105,7 +105,6 @@ function AddSignerModal({ diff --git a/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx b/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx index 77352af879..329c436b62 100644 --- a/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx +++ b/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx @@ -1,7 +1,6 @@ import { Box, Button, - Divider, Flex, HStack, Select, @@ -18,6 +17,7 @@ import { useFractal } from '../../../../../../providers/App/AppProvider'; import { useNetworkConfig } from '../../../../../../providers/NetworkConfig/NetworkConfigProvider'; import SupportTooltip from '../../../../../ui/badges/SupportTooltip'; import { CustomNonceInput } from '../../../../../ui/forms/CustomNonceInput'; +import Divider from '../../../../../ui/utils/Divider'; import useRemoveSigner from '../hooks/useRemoveSigner'; function RemoveSignerModal({ @@ -92,7 +92,6 @@ function RemoveSignerModal({ {contentHeader || {contentTitle}} - + {children} ) : null} diff --git a/src/components/ui/containers/ContentBox/index.tsx b/src/components/ui/containers/ContentBox/index.tsx index 61e24940bd..1a9f99a1d1 100644 --- a/src/components/ui/containers/ContentBox/index.tsx +++ b/src/components/ui/containers/ContentBox/index.tsx @@ -13,9 +13,9 @@ function ContentBox({ title, children, containerBoxProps, onClick }: ContentBoxP return ( {title} - + )} {children} diff --git a/src/components/ui/forms/ABISelector.tsx b/src/components/ui/forms/ABISelector.tsx index 97298880f2..756252b6f1 100644 --- a/src/components/ui/forms/ABISelector.tsx +++ b/src/components/ui/forms/ABISelector.tsx @@ -99,24 +99,29 @@ export default function ABISelector({ target, onChange, onFetchABI }: IABISelect - {t('abiSelectorDescription')} + + {t('abiSelectorDescription')} + ); } diff --git a/src/components/ui/forms/CustomNonceInput.tsx b/src/components/ui/forms/CustomNonceInput.tsx index be531e1003..943e9ddb76 100644 --- a/src/components/ui/forms/CustomNonceInput.tsx +++ b/src/components/ui/forms/CustomNonceInput.tsx @@ -1,18 +1,19 @@ -import { Text, Input, HStack, VStack, Flex } from '@chakra-ui/react'; -import { Gear } from '@decent-org/fractal-ui'; -import { useRef, useState } from 'react'; +import { Text, HStack, VStack } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; import { useFractal } from '../../../providers/App/AppProvider'; -import SupportTooltip from '../badges/SupportTooltip'; +import ExampleLabel from './ExampleLabel'; +import { InputComponent } from './InputComponent'; export function CustomNonceInput({ align = 'start', nonce, onChange, + disabled, }: { align?: 'start' | 'end'; nonce: number | undefined; onChange: (nonce?: number) => void; + disabled?: boolean; }) { const { node: { safe }, @@ -21,60 +22,35 @@ export function CustomNonceInput({ const { t } = useTranslation(['proposal', 'common']); const errorMessage = nonce !== undefined && safe && nonce < safe.nonce ? t('customNonceError') : undefined; - const containerRef = useRef(null); - const [revealed, setRevealed] = useState(false); if (dao?.isAzorius) return null; - return revealed ? ( + return ( - - - - {t('customNonce', { ns: 'proposal' })} - - - - onChange(e.target.value ? Number(e.target.value) : undefined)} - type="number" - /> - + onChange(e.target.value ? Number(e.target.value) : undefined)} + disabled={disabled} + subLabel={ + + + {t('example', { ns: 'common' })}: 14{' '} + + + } + testId={`custom-nonce`} + /> {errorMessage && ( {errorMessage} )} - ) : ( - setRevealed(true)} - _hover={{ color: 'gold.500-hover' }} - cursor="pointer" - > - - - {t('advanced', { ns: 'common' })} - ); } diff --git a/src/components/ui/forms/ExampleLabel.tsx b/src/components/ui/forms/ExampleLabel.tsx index 89c81547a6..bc0491f043 100644 --- a/src/components/ui/forms/ExampleLabel.tsx +++ b/src/components/ui/forms/ExampleLabel.tsx @@ -4,12 +4,12 @@ import { PropsWithChildren } from 'react'; export default function ExampleLabel({ children, ...rest }: PropsWithChildren) { return ( diff --git a/src/components/ui/forms/InputComponent.tsx b/src/components/ui/forms/InputComponent.tsx index 79e4b31776..9bef1f07bd 100644 --- a/src/components/ui/forms/InputComponent.tsx +++ b/src/components/ui/forms/InputComponent.tsx @@ -10,19 +10,20 @@ import { ResponsiveValue, } from '@chakra-ui/react'; import { LabelWrapper } from '@decent-org/fractal-ui'; +import { ReactNode } from 'react'; import { BigIntInput, BigIntInputProps } from './BigIntInput'; import { EthAddressInput } from './EthAddressInput'; interface BaseProps { - label?: string; + label?: string | ReactNode; id?: string; helper?: string; isRequired: boolean; value: string; disabled?: boolean; - subLabel?: React.ReactNode; + subLabel?: ReactNode; errorMessage?: string; - children: React.ReactNode; + children: ReactNode; gridContainerProps?: GridProps; inputContainerProps?: GridItemProps; maxLength?: number; @@ -63,31 +64,30 @@ export function LabelComponent(props: Omit) { disabled, helperSlot = 'start', } = props; + + const isStringLabel = typeof label === 'string'; + return ( - - {label} - {isRequired && *} - - {helperSlot === 'start' && ( - - {helper} - + {label} + {isRequired && *} + + ) : ( + label )} + {helperSlot === 'start' && {helper}} ) { {helperSlot === 'end' && ( - {helper} + {helper} )} @@ -167,7 +167,6 @@ export function TextareaComponent(props: TextareaProps) { isDisabled={disabled} rows={rows} placeholder={placeholder} - borderColor="black.400" size="base" p="0.5rem 1rem" maxLength={maxLength} @@ -188,7 +187,7 @@ export function BigIntComponent(props: BigIntProps) { id={id} onChange={onChange} decimalPlaces={decimalPlaces} - placeholder="0" + placeholder="0.0" isDisabled={disabled} /> diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx index fb9e25dd9b..84d0ec8aae 100644 --- a/src/components/ui/links/AddressCopier.tsx +++ b/src/components/ui/links/AddressCopier.tsx @@ -27,7 +27,7 @@ export default function AddressCopier({ address, ...rest }: Props) { color="celery-0" borderRadius="625rem" borderWidth="1px" - borderColor={'transparent'} + borderColor="transparent" textStyle="button-base" width="fit-content" _hover={{ bg: 'celery--6', borderColor: 'celery--6' }} diff --git a/src/components/ui/menus/AccountDisplay/MenuItems.tsx b/src/components/ui/menus/AccountDisplay/MenuItems.tsx index 07f97acd9a..a438c70ed4 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItems.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItems.tsx @@ -1,9 +1,10 @@ -import { Divider, MenuList } from '@chakra-ui/react'; +import { MenuList } from '@chakra-ui/react'; import { Link, Plugs } from '@phosphor-icons/react'; import { useWeb3Modal } from '@web3modal/wagmi/react'; import { useTranslation } from 'react-i18next'; import { useDisconnect } from 'wagmi'; import { useFractal } from '../../../../providers/App/AppProvider'; +import Divider from '../../utils/Divider'; import { MenuItemButton } from './MenuItemButton'; import { MenuItemNetwork } from './MenuItemNetwork'; import { MenuItemWallet } from './MenuItemWallet'; @@ -28,11 +29,11 @@ export function MenuItems() { {user.address && ( <> - + )} - + {!user.address && ( )} diff --git a/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx b/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx index cb2c3bbc2c..6a5048fd74 100644 --- a/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx +++ b/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx @@ -1,9 +1,10 @@ -import { Box, Button, Divider, Text } from '@chakra-ui/react'; +import { Box, Button, Text } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { DAO_ROUTES } from '../../../constants/routes'; import { useFractal } from '../../../providers/App/AppProvider'; import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider'; +import Divider from '../utils/Divider'; export function ConfirmModifyGovernanceModal({ close }: { close: () => void }) { const { t } = useTranslation('modals'); @@ -24,10 +25,7 @@ export function ConfirmModifyGovernanceModal({ close }: { close: () => void }) { > {t('confirmModifyGovernanceDescription')} - + void }) { const { t } = useTranslation('modals'); @@ -11,10 +12,7 @@ export function ConfirmUrlModal({ url, close }: { url: string; close: () => void > {url} - + {t('confirmAction')} )} - + - +