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 }) => (
-
- )}
-
+ ))}
+
+
+
+
+
+
+ >
);
}
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 && (
-
-
- }
- minW="full"
- justifyContent="space-between"
- >
- {t('deleteRole')}
-
-
- )}
- >
- );
-}
-
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() {