From daea2e3c90444f601f61ed95c98b235edcffb3a5 Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Tue, 3 Dec 2024 10:57:18 -0500 Subject: [PATCH 01/11] Add SafeRolesEditFormikPageWrapper and update routing for roles editing --- .../edit/SafeRolesEditFormikPageWrapper.tsx | 55 ++++ .../dao/roles/edit/SafeRolesEditPage.tsx | 272 +++++++----------- src/router.tsx | 7 +- 3 files changed, 165 insertions(+), 169 deletions(-) create mode 100644 src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx diff --git a/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx b/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx new file mode 100644 index 000000000..769a477ef --- /dev/null +++ b/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx @@ -0,0 +1,55 @@ +import * as amplitude from '@amplitude/analytics-browser'; +import { Formik } from 'formik'; +import { useEffect, useMemo } from 'react'; +import { Outlet } from 'react-router-dom'; +import { useRolesSchema } from '../../../../hooks/schemas/roles/useRolesSchema'; +import useCreateRoles from '../../../../hooks/utils/useCreateRoles'; +import { analyticsEvents } from '../../../../insights/analyticsEvents'; +import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore'; +import { useRolesStore } from '../../../../store/roles/useRolesStore'; +import { RoleFormValues } from '../../../../types/roles'; + +export default function SafeRolesEditFormikPageWrapper() { + useEffect(() => { + amplitude.track(analyticsEvents.RolesEditPageOpened); + }, []); + + const { safe } = useDaoInfoStore(); + + const { rolesSchema } = useRolesSchema(); + const { hatsTree } = useRolesStore(); + + const { createEditRolesProposal } = useCreateRoles(); + const initialValues: RoleFormValues = useMemo(() => { + const hats = hatsTree?.roleHats || []; + return { + proposalMetadata: { + title: '', + description: '', + }, + hats: hats.map(hat => ({ + ...hat, + resolvedWearer: hat.wearerAddress, + wearer: hat.wearerAddress, + roleTerms: hat.roleTerms.allTerms, + })), + customNonce: safe?.nextNonce || 0, + actions: [], + }; + }, [hatsTree?.roleHats, safe?.nextNonce]); + return ( + + initialValues={initialValues} + enableReinitialize + validationSchema={rolesSchema} + validateOnMount + onSubmit={createEditRolesProposal} + > + {({ handleSubmit }) => ( +
+ + + )} + + ); +} diff --git a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx index 37a61f4e9..d991aff74 100644 --- a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx +++ b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx @@ -1,23 +1,18 @@ import * as amplitude from '@amplitude/analytics-browser'; -import { Box, Button, Flex, Hide, Show } from '@chakra-ui/react'; +import { Box, Button, Flex, Show } from '@chakra-ui/react'; import { Plus } from '@phosphor-icons/react'; -import { Formik } from 'formik'; -import { useEffect, useMemo, useState } from 'react'; +import { useFormikContext } from 'formik'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Outlet, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Hex, toHex } from 'viem'; import { RoleCardEdit } from '../../../../components/Roles/RoleCard'; import { RoleCardLoading } from '../../../../components/Roles/RolePageCard'; import { RolesEditTable } from '../../../../components/Roles/RolesTable'; -import DraggableDrawer from '../../../../components/ui/containers/DraggableDrawer'; import NoDataCard from '../../../../components/ui/containers/NoDataCard'; -import { ModalBase } from '../../../../components/ui/modals/ModalBase'; -import { UnsavedChangesWarningContent } from '../../../../components/ui/modals/UnsavedChangesWarningContent'; import PageHeader from '../../../../components/ui/page/Header/PageHeader'; import { DAO_ROUTES } from '../../../../constants/routes'; import { getRandomBytes } from '../../../../helpers'; -import { useRolesSchema } from '../../../../hooks/schemas/roles/useRolesSchema'; -import useCreateRoles from '../../../../hooks/utils/useCreateRoles'; import { useNavigationBlocker } from '../../../../hooks/utils/useNavigationBlocker'; import { analyticsEvents } from '../../../../insights/analyticsEvents'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; @@ -34,11 +29,11 @@ export function SafeRolesEditPage() { const { safe } = useDaoInfoStore(); const { addressPrefix } = useNetworkConfig(); - const { rolesSchema } = useRolesSchema(); + const { values, setFieldValue, touched } = useFormikContext(); + const { hatsTree } = useRolesStore(); const navigate = useNavigate(); - const { createEditRolesProposal } = useCreateRoles(); function generateRoleProposalTitle({ formValues }: { formValues: RoleFormValues }) { const filteredHats = formValues.hats.filter(hat => !!hat.editedRole); @@ -63,24 +58,6 @@ export function SafeRolesEditPage() { return [addedHatsText, updatedHatsText, removedHatsText].filter(Boolean).join('. '); } - const initialValues: RoleFormValues = useMemo(() => { - const hats = hatsTree?.roleHats || []; - return { - proposalMetadata: { - title: '', - description: '', - }, - hats: hats.map(hat => ({ - ...hat, - resolvedWearer: hat.wearerAddress, - wearer: hat.wearerAddress, - roleTerms: hat.roleTerms.allTerms, - })), - customNonce: safe?.nextNonce || 0, - actions: [], - }; - }, [hatsTree?.roleHats, safe?.nextNonce]); - const [hasEditedRoles, setHasEditedRoles] = useState(false); const blocker = useNavigationBlocker({ roleEditPageNavigationBlockerParams: { hasEditedRoles } }); @@ -96,147 +73,106 @@ export function SafeRolesEditPage() { const showNoRolesCard = !hatsTreeLoading && (hatsTree === null || hatsTree.roleHats.length === 0); return ( - - initialValues={initialValues} - enableReinitialize - validationSchema={rolesSchema} - validateOnMount - onSubmit={createEditRolesProposal} - > - {({ handleSubmit, values, touched, setFieldValue }) => ( -
- {blocker.state === 'blocked' && ( - <> - - {}} - onOpen={() => {}} - headerContent={null} - initialHeight="23rem" - closeOnOverlayClick={false} - > - - - - - {}} - > - - - - + <> + + + + + ), + onClick: async () => { + const newId = toHex(getRandomBytes(), { size: 32 }); + setFieldValue('roleEditing', { id: newId, canCreateProposals: false }); + showRoleEditDetails(newId); + }, + }} + /> + + + + + + {hatsTree === undefined && } + {showNoRolesCard && values.hats.length === 0 && ( + )} - - - - - ), - onClick: async () => { - const newId = toHex(getRandomBytes(), { size: 32 }); - setFieldValue('roleEditing', { id: newId, canCreateProposals: false }); - showRoleEditDetails(newId); - }, + {values.hats.map(hat => ( + { + setFieldValue('roleEditing', hat); + showRoleEditDetails(hat.id); }} + payments={hat.payments} + isTermed={!!hat.isTermed} /> - - - - - - {hatsTree === undefined && } - {showNoRolesCard && values.hats.length === 0 && ( - - )} - {values.hats.map(hat => ( - { - setFieldValue('roleEditing', hat); - showRoleEditDetails(hat.id); - }} - payments={hat.payments} - isTermed={!!hat.isTermed} - /> - ))} - - - - - - - - - )} - + ))} +
+ + + + + + ); } diff --git a/src/router.tsx b/src/router.tsx index e15ff64bb..f17ec215c 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -18,6 +18,7 @@ import { SafeProposalCreatePage } from './pages/dao/proposals/new/SafeProposalCr import { SafeSablierProposalCreatePage } from './pages/dao/proposals/new/sablier/SafeSablierProposalCreatePage'; import { SafeRolesPage } from './pages/dao/roles/SafeRolesPage'; import { SafeRoleDetailsPage } from './pages/dao/roles/details/SafeRoleDetailsPage'; +import SafeRolesEditFormikPageWrapper from './pages/dao/roles/edit/SafeRolesEditFormikPageWrapper'; import { SafeRolesEditPage } from './pages/dao/roles/edit/SafeRolesEditPage'; import { SafeRoleEditDetailsPage } from './pages/dao/roles/edit/details/SafeRoleEditDetailsPage'; import { SafeRolesEditProposalSummaryPage } from './pages/dao/roles/edit/summary/SafeRolesEditProposalSummaryPage'; @@ -92,8 +93,12 @@ export const router = (addressPrefix: string, daoAddress: string | undefined) => }, { path: DAO_ROUTES.rolesEdit.path, - element: , + element: , children: [ + { + index: true, + element: , + }, { path: 'details', element: , From 9c886da3b966d77728ef6592f7369d978f433b08 Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:27:33 -0500 Subject: [PATCH 02/11] Add danger button variant with hover and active states --- .../theme/components/button/button.variants.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/assets/theme/components/button/button.variants.ts b/src/assets/theme/components/button/button.variants.ts index 6be8be51d..4eb788d3f 100644 --- a/src/assets/theme/components/button/button.variants.ts +++ b/src/assets/theme/components/button/button.variants.ts @@ -74,6 +74,20 @@ const tertiary = defineStyle({ _focus: {}, }); +const danger = defineStyle({ + border: '1px solid', + borderColor: 'red-1', + color: 'red-1', + _hover: { + borderColor: 'red-0', + color: 'red-0', + }, + _active: { + borderColor: 'red-0', + color: 'red-0', + }, +}); + const stepper = defineStyle({ border: '1px solid', borderColor: 'neutral-3', @@ -98,6 +112,7 @@ const buttonVariants = { secondary, tertiary, stepper, + danger, }; export default buttonVariants; From bb2c09afd744da81f283a65ce73e96519ffbd61a Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:28:41 -0500 Subject: [PATCH 03/11] remove mobile and desktop drawers --- .../edit/details/SafeRoleEditDetailsPage.tsx | 342 ++++-------------- 1 file changed, 61 insertions(+), 281 deletions(-) diff --git a/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx b/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx index 77f60a98e..e13e44f3b 100644 --- a/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx +++ b/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx @@ -1,39 +1,16 @@ -import { - Box, - Button, - Drawer, - DrawerBody, - DrawerContent, - DrawerOverlay, - Flex, - Hide, - Icon, - IconButton, - Portal, - Show, - Text, -} from '@chakra-ui/react'; -import { ArrowLeft, DotsThree, Trash } from '@phosphor-icons/react'; +import { Box } from '@chakra-ui/react'; +import { Trash } from '@phosphor-icons/react'; import { FieldArray, useFormikContext } from 'formik'; -import { useEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useSearchParams } from 'react-router-dom'; -import { Hex, isHex } from 'viem'; +import { isHex } from 'viem'; import { RoleFormTabs } from '../../../../../components/Roles/forms/RoleFormTabs'; -import DraggableDrawer from '../../../../../components/ui/containers/DraggableDrawer'; -import { ModalBase } from '../../../../../components/ui/modals/ModalBase'; -import { UnsavedChangesWarningContent } from '../../../../../components/ui/modals/UnsavedChangesWarningContent'; -import { - BACKGROUND_SEMI_TRANSPARENT, - CARD_SHADOW, - NEUTRAL_2_82_TRANSPARENT, - useHeaderHeight, -} from '../../../../../constants/common'; +import PageHeader from '../../../../../components/ui/page/Header/PageHeader'; import { DAO_ROUTES } from '../../../../../constants/routes'; import { useNavigationBlocker } from '../../../../../hooks/utils/useNavigationBlocker'; import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider'; import { useDaoInfoStore } from '../../../../../store/daoInfo/useDaoInfoStore'; -import { useRolesStore } from '../../../../../store/roles/useRolesStore'; import { EditBadgeStatus, EditedRole, @@ -41,98 +18,9 @@ import { RoleHatFormValue, } from '../../../../../types/roles'; -function EditRoleMenu({ onRemove, hatId }: { hatId: Hex; onRemove: () => void }) { - const { t } = useTranslation(['roles']); - const { values, setFieldValue } = useFormikContext(); - const [showMenu, setShowMenu] = useState(false); - const menuRef = useRef(null); - const hatIndex = values.hats.findIndex(h => h.id === hatId); - const role = values.hats[hatIndex]; - - const handleRemoveRole = () => { - const editedRole: EditedRole = { - fieldNames: [], - status: EditBadgeStatus.Removed, - }; - - if (hatIndex !== -1) { - if (role?.editedRole?.status === EditBadgeStatus.New) { - setFieldValue( - 'hats', - values.hats.filter(h => h.id !== hatId), - ); - } else { - setFieldValue(`hats.${hatIndex}`, { ...values.hats[hatIndex], editedRole }); - } - } - - setFieldValue('roleEditing', undefined); - setFieldValue('newRoleTerm', undefined); - setTimeout(() => onRemove(), 50); - }; - - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { - setShowMenu(false); - } - }; - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, []); - - return ( - <> - setShowMenu(show => !show)} - /> - {showMenu && ( - - - - )} - - ); -} - export function SafeRoleEditDetailsPage() { - const headerHeight = useHeaderHeight(); const { t } = useTranslation(['roles']); const { safe } = useDaoInfoStore(); - const { getPayment } = useRolesStore(); const { addressPrefix } = useNetworkConfig(); const navigate = useNavigate(); const { values, setFieldValue, touched, setTouched } = useFormikContext(); @@ -154,6 +42,12 @@ export function SafeRoleEditDetailsPage() { if (!safe?.address) return null; if (hatEditingId === undefined) return null; + const hatIndex = values.hats.findIndex(h => h.id === hatEditingId); + if (hatIndex === undefined) return null; + + const role = values.hats[hatIndex]; + if (!role) return null; + const goBackToRolesEdit = () => { backupRoleEditing.current = values.roleEditing; backupTouched.current = touched.roleEditing; @@ -169,181 +63,67 @@ export function SafeRoleEditDetailsPage() { }, 50); }; - const paymentIndex = values.roleEditing?.roleEditingPaymentIndex; - const streamId = - paymentIndex !== undefined ? values.roleEditing?.payments?.[paymentIndex]?.streamId : undefined; + const handleRemoveRole = () => { + const editedRole: EditedRole = { + fieldNames: [], + status: EditBadgeStatus.Removed, + }; - const goBackToRoleEdit = () => { - if (!values.roleEditing?.payments || paymentIndex === undefined || !hatEditingId) return; - const isExistingPayment = !!streamId ? getPayment(hatEditingId, streamId) : undefined; - // if payment is new, and unedited, remove it - if ( - paymentIndex === values.roleEditing.payments.length - 1 && - !values.roleEditing.editedRole && - !isExistingPayment - ) { - setFieldValue( - 'roleEditing.payments', - values.roleEditing.payments.filter((_, index) => index !== paymentIndex), - ); + if (hatIndex !== -1) { + if (role?.editedRole?.status === EditBadgeStatus.New) { + setFieldValue( + 'hats', + values.hats.filter(h => h.id !== hatEditingId), + ); + } else { + setFieldValue(`hats.${hatIndex}`, { ...values.hats[hatIndex], editedRole }); + } } + + setFieldValue('roleEditing', undefined); setFieldValue('newRoleTerm', undefined); - setFieldValue('roleEditing.roleEditingPaymentIndex', undefined); + setTimeout(() => goBackToRolesEdit(), 50); }; - const goBackText = t( - paymentIndex === undefined ? 'editRole' : streamId ? 'payments' : 'addPayment', - ); - return ( <> - {blocker.state === 'blocked' && ( - <> - - {}} - onOpen={() => {}} - headerContent={null} - initialHeight="23rem" - closeOnOverlayClick={false} - > - { - setFieldValue('roleEditing', backupRoleEditing.current); - setFieldValue('newRoleTerm', backupNewRoleTerm.current); - setTouched({ roleEditing: backupTouched.current }); - blocker.reset(); - }} - /> - - - - {}} - > - { - setFieldValue('roleEditing', backupRoleEditing.current); - setFieldValue('newRoleTerm', backupNewRoleTerm.current); - setTouched({ roleEditing: backupTouched.current }); - blocker.reset(); - }} - /> - - - - )} {({ push }: { push: (roleHatFormValue: RoleHatFormValue) => void }) => ( <> - - - - - - {paymentIndex === undefined && ( - - - - )} - - - + + - - - - - - - - - - - } - onClick={ - paymentIndex === undefined ? goBackToRolesEdit : goBackToRoleEdit - } - /> - {goBackText} - - {paymentIndex === undefined && ( - - - - )} - - - - - - + ), + onClick: handleRemoveRole, + }} + /> + + )} From 79320fc56069e618e28f6dd65e2d572c2978aa9f Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:36:36 -0500 Subject: [PATCH 04/11] Update RoleFormInfo padding for improved layout --- src/components/Roles/forms/RoleFormInfo.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Roles/forms/RoleFormInfo.tsx b/src/components/Roles/forms/RoleFormInfo.tsx index 1e6c51b52..a47b5a3de 100644 --- a/src/components/Roles/forms/RoleFormInfo.tsx +++ b/src/components/Roles/forms/RoleFormInfo.tsx @@ -20,8 +20,7 @@ export default function RoleFormInfo() { return ( <> Date: Tue, 3 Dec 2024 18:39:39 -0500 Subject: [PATCH 05/11] Update RoleTermExpiredTerms styling with background and padding adjustments --- src/components/Roles/forms/RoleFormTerms.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Roles/forms/RoleFormTerms.tsx b/src/components/Roles/forms/RoleFormTerms.tsx index 4198a12e3..5aaf182f0 100644 --- a/src/components/Roles/forms/RoleFormTerms.tsx +++ b/src/components/Roles/forms/RoleFormTerms.tsx @@ -225,6 +225,8 @@ function RoleTermExpiredTerms({ Date: Tue, 3 Dec 2024 18:42:43 -0500 Subject: [PATCH 06/11] Update RoleFormMember styling with background color and padding adjustments --- src/components/Roles/forms/RoleFormMember.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Roles/forms/RoleFormMember.tsx b/src/components/Roles/forms/RoleFormMember.tsx index c8dac0777..4aebc1506 100644 --- a/src/components/Roles/forms/RoleFormMember.tsx +++ b/src/components/Roles/forms/RoleFormMember.tsx @@ -245,6 +245,7 @@ function RoleFormMemberTermToggle() { padding="1.5rem" border="1px solid" borderColor="neutral-3" + bg="neutral-2" borderRadius="0.25rem" mt="1.5rem" > @@ -318,8 +319,7 @@ export function RoleFormMember() { return ( Date: Tue, 3 Dec 2024 19:44:40 -0500 Subject: [PATCH 07/11] Refactor payment stream components for improved structure and styling --- .../Roles/forms/RoleFormPaymentStream.tsx | 9 ++++----- .../forms/RoleFormPaymentStreamTermed.tsx | 2 ++ .../Roles/forms/RoleFormPaymentStreams.tsx | 19 +++++++++++++++++++ src/components/Roles/forms/RoleFormTabs.tsx | 12 ------------ 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/components/Roles/forms/RoleFormPaymentStream.tsx b/src/components/Roles/forms/RoleFormPaymentStream.tsx index 0d65ef4cb..5f72c1c16 100644 --- a/src/components/Roles/forms/RoleFormPaymentStream.tsx +++ b/src/components/Roles/forms/RoleFormPaymentStream.tsx @@ -4,7 +4,7 @@ import { addDays, addMinutes } from 'date-fns'; import { Field, FieldProps, FormikErrors, useFormikContext } from 'formik'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { CARD_SHADOW, isDevMode } from '../../../constants/common'; +import { DETAILS_BOX_SHADOW, isDevMode } from '../../../constants/common'; import { useRolesStore } from '../../../store/roles/useRolesStore'; import { RoleFormValues, RoleHatFormValue } from '../../../types/roles'; import { DatePicker } from '../../ui/forms/DatePicker'; @@ -148,15 +148,14 @@ export default function RoleFormPaymentStream({ formIndex }: { formIndex: number return ( <> (); + + if (values.roleEditing?.roleEditingPaymentIndex !== undefined) { + if (values.roleEditing?.isTermed) { + return ( + + ); + } else { + return ; + } + } + + return null; +} export function RoleFormPaymentStreams() { const { t } = useTranslation(['roles']); @@ -76,6 +94,7 @@ export function RoleFormPaymentStreams() { > {t('addPayment')} + {sortedPayments.map((payment, index) => { // @note don't render if form isn't valid diff --git a/src/components/Roles/forms/RoleFormTabs.tsx b/src/components/Roles/forms/RoleFormTabs.tsx index b1ff639d5..07235e9e7 100644 --- a/src/components/Roles/forms/RoleFormTabs.tsx +++ b/src/components/Roles/forms/RoleFormTabs.tsx @@ -11,8 +11,6 @@ import { useRolesStore } from '../../../store/roles/useRolesStore'; import { EditBadgeStatus, RoleFormValues, RoleHatFormValue } from '../../../types/roles'; import RoleFormInfo from './RoleFormInfo'; import { RoleFormMember } from './RoleFormMember'; -import RoleFormPaymentStream from './RoleFormPaymentStream'; -import RoleFormPaymentStreamTermed from './RoleFormPaymentStreamTermed'; import { RoleFormPaymentStreams } from './RoleFormPaymentStreams'; import { useRoleFormEditedRole } from './useRoleFormEditedRole'; @@ -58,16 +56,6 @@ export function RoleFormTabs({ const safeAddress = safe?.address; if (!safeAddress) return null; - if (values.roleEditing?.roleEditingPaymentIndex !== undefined) { - if (values.roleEditing?.isTermed) { - return ( - - ); - } else { - return ; - } - } - return ( <> From 6014d089c41f4c532a6484dbd5a8cbcb2216a92d Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Tue, 3 Dec 2024 22:01:26 -0500 Subject: [PATCH 08/11] Enhance RoleFormInfo component styling with margin, background color, and box shadow adjustments --- src/components/Roles/forms/RoleFormInfo.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Roles/forms/RoleFormInfo.tsx b/src/components/Roles/forms/RoleFormInfo.tsx index a47b5a3de..0e1417420 100644 --- a/src/components/Roles/forms/RoleFormInfo.tsx +++ b/src/components/Roles/forms/RoleFormInfo.tsx @@ -107,12 +107,18 @@ export default function RoleFormInfo() { {() => ( {t('canCreateProposals')} Date: Tue, 3 Dec 2024 22:05:06 -0500 Subject: [PATCH 09/11] Reduce top margin in RoleFormPaymentStream and RoleFormPaymentStreamTermed components for improved layout consistency --- src/components/Roles/forms/RoleFormPaymentStream.tsx | 2 +- src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Roles/forms/RoleFormPaymentStream.tsx b/src/components/Roles/forms/RoleFormPaymentStream.tsx index 5f72c1c16..3b62fd39e 100644 --- a/src/components/Roles/forms/RoleFormPaymentStream.tsx +++ b/src/components/Roles/forms/RoleFormPaymentStream.tsx @@ -149,7 +149,7 @@ export default function RoleFormPaymentStream({ formIndex }: { formIndex: number <> Date: Wed, 4 Dec 2024 21:14:54 -0500 Subject: [PATCH 10/11] Add background color to empty payment streams and conditionally render divider --- src/components/Roles/forms/RoleFormPaymentStreams.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/Roles/forms/RoleFormPaymentStreams.tsx index 2927659ca..397e9da7f 100644 --- a/src/components/Roles/forms/RoleFormPaymentStreams.tsx +++ b/src/components/Roles/forms/RoleFormPaymentStreams.tsx @@ -79,6 +79,7 @@ export function RoleFormPaymentStreams() { {sortedPayments.length === 0 && ( - + {!!sortedPayments.length && } {sortedPayments.map(payment => { // @note don't render if form isn't valid From 0a8c28b3562498f757b54ba0c94e4aba9269dd06 Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Wed, 4 Dec 2024 22:05:46 -0500 Subject: [PATCH 11/11] Refactor SafeRolesEditPage: remove unused role proposal title generation logic and clean up imports --- .../dao/roles/edit/SafeRolesEditPage.tsx | 33 ++----------------- 1 file changed, 2 insertions(+), 31 deletions(-) diff --git a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx index d991aff74..9793477b8 100644 --- a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx +++ b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx @@ -18,7 +18,7 @@ import { analyticsEvents } from '../../../../insights/analyticsEvents'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore'; import { useRolesStore } from '../../../../store/roles/useRolesStore'; -import { EditBadgeStatus, RoleFormValues } from '../../../../types/roles'; +import { RoleFormValues } from '../../../../types/roles'; export function SafeRolesEditPage() { useEffect(() => { @@ -29,35 +29,12 @@ export function SafeRolesEditPage() { const { safe } = useDaoInfoStore(); const { addressPrefix } = useNetworkConfig(); - const { values, setFieldValue, touched } = useFormikContext(); + const { values, setFieldValue } = useFormikContext(); const { hatsTree } = useRolesStore(); const navigate = useNavigate(); - function generateRoleProposalTitle({ formValues }: { formValues: RoleFormValues }) { - const filteredHats = formValues.hats.filter(hat => !!hat.editedRole); - const addedHatsCount = filteredHats.filter( - hat => hat.editedRole!.status === EditBadgeStatus.New, - ).length; - const updatedHatsCount = filteredHats.filter( - hat => hat.editedRole!.status === EditBadgeStatus.Updated, - ).length; - const removedHatsCount = filteredHats.filter( - hat => hat.editedRole!.status === EditBadgeStatus.Removed, - ).length; - - const addedHatsText = addedHatsCount > 0 ? t('addedHats', { count: addedHatsCount }) : ''; - - const updatedHatsText = - updatedHatsCount > 0 ? t('updatedHats', { count: updatedHatsCount }) : ''; - - const removedHatsText = - removedHatsCount > 0 ? t('removedHats', { count: removedHatsCount }) : ''; - - return [addedHatsText, updatedHatsText, removedHatsText].filter(Boolean).join('. '); - } - const [hasEditedRoles, setHasEditedRoles] = useState(false); const blocker = useNavigationBlocker({ roleEditPageNavigationBlockerParams: { hasEditedRoles } }); @@ -155,12 +132,6 @@ export function SafeRolesEditPage() {