Merge pull request #2590 from decentdao/issue/2583-remove-roles-drawer

`[PRD | Issue #2582]` Move Role Form to own page

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;

src/components/Roles/forms/RoleFormInfo.tsx

@@ -20,8 +20,7 @@ export default function RoleFormInfo() {
   return (
     <>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
         bg="neutral-2"
         boxShadow={{
           base: DETAILS_BOX_SHADOW,
@@ -108,12 +107,18 @@ export default function RoleFormInfo() {
           <Field name="roleEditing.canCreateProposals">
             {() => (
               <Flex
+                mt={6}
                 justifyContent="space-between"
                 alignItems="center"
                 padding={4}
                 borderRadius={8}
                 border="1px solid"
                 borderColor="neutral-3"
+                bg="neutral-2"
+                boxShadow={{
+                  base: DETAILS_BOX_SHADOW,
+                  md: 'unset',
+                }}
               >
                 <Text>{t('canCreateProposals')}</Text>
                 <Switch

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 (
     <Box>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
         bg="neutral-2"
         boxShadow={{
           base: DETAILS_BOX_SHADOW,

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';
@@ -171,15 +171,14 @@ export function RoleFormPaymentStream({ formIndex }: { formIndex: number }) {
   return (
     <>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
+        mt={4}
         bg="neutral-2"
         boxShadow={{
-          base: CARD_SHADOW,
+          base: DETAILS_BOX_SHADOW,
           md: 'unset',
         }}
         borderRadius="0.5rem"
-        position="relative"
       >
         <SectionTitle
           title={t('asset')}

src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx

@@ -369,6 +369,8 @@ export default function RoleFormPaymentStreamTermed({ paymentIndex }: { paymentI
       <Box
         bg="neutral-2"
         borderRadius="0.5rem"
+        p="1.5rem"
+        mt={4}
       >
         <ShadowedBox>
           <SectionTitle

src/components/Roles/forms/RoleFormPaymentStreams.tsx

@@ -13,6 +13,24 @@ import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
 import Divider from '../../ui/utils/Divider';
 import { RolePaymentDetails } from '../RolePaymentDetails';
+import { RoleFormPaymentStream } from './RoleFormPaymentStream';
+import RoleFormPaymentStreamTermed from './RoleFormPaymentStreamTermed';
+
+export function RoleFormPaymentRenderer() {
+  const { values } = useFormikContext<RoleFormValues>();
+
+  if (values.roleEditing?.roleEditingPaymentIndex !== undefined) {
+    if (values.roleEditing?.isTermed) {
+      return (
+        <RoleFormPaymentStreamTermed paymentIndex={values.roleEditing.roleEditingPaymentIndex} />
+      );
+    } else {
+      return <RoleFormPaymentStream formIndex={values.roleEditing.roleEditingPaymentIndex} />;
+    }
+  }
+
+  return null;
+}
 
 export function RoleFormPaymentStreams() {
   const { t } = useTranslation(['roles']);
@@ -61,6 +79,7 @@ export function RoleFormPaymentStreams() {
         <Box>
           {sortedPayments.length === 0 && (
             <Flex
+              bg="neutral-2"
               padding="1.5rem"
               border="1px solid"
               borderColor="neutral-3"
@@ -98,7 +117,8 @@ export function RoleFormPaymentStreams() {
           >
             {t('addPayment')}
           </Button>
-          <Divider my="1rem" />
+          <RoleFormPaymentRenderer />
+          {!!sortedPayments.length && <Divider my="1rem" />}
           <Box mt="0.5rem">
             {sortedPayments.map(payment => {
               // @note don't render if form isn't valid

src/components/Roles/forms/RoleFormTabs.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import { useFormikContext } from 'formik';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocker, useNavigate } from 'react-router-dom';
 import { Hex } from 'viem';
@@ -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';
 
@@ -55,28 +53,12 @@ export function RoleFormTabs({
     }
   }, [setFieldValue, values.hats, values.roleEditing, hatId]);
 
-  const [tabIndex, setTabIndex] = useState(0);
-
   const safeAddress = safe?.address;
   if (!safeAddress) return null;
 
-  if (values.roleEditing?.roleEditingPaymentIndex !== undefined) {
-    if (values.roleEditing?.isTermed) {
-      return (
-        <RoleFormPaymentStreamTermed paymentIndex={values.roleEditing?.roleEditingPaymentIndex} />
-      );
-    } else {
-      return <RoleFormPaymentStream formIndex={values.roleEditing?.roleEditingPaymentIndex} />;
-    }
-  }
-
   return (
     <>
-      <Tabs
-        index={tabIndex}
-        onChange={setTabIndex}
-        variant="twoTone"
-      >
+      <Tabs variant="twoTone">
         <TabList>
           <Tab>{t('roleInfo')}</Tab>
           <Tab>{t('member')}</Tab>
@@ -112,7 +94,6 @@ export function RoleFormTabs({
               } else if (existingRoleHat !== undefined) {
                 setFieldValue(`hats.${hatIndex}`, {
                   ...existingRoleHat,
-                  resolvedWearer: existingRoleHat.wearerAddress,
                   roleTerms: existingRoleHat.roleTerms.allTerms,
                 });
               }

src/components/Roles/forms/RoleFormTerms.tsx

@@ -225,6 +225,8 @@ function RoleTermExpiredTerms({
     <Box
       borderRadius="0.5rem"
       boxShadow="layeredShadowBorder"
+      bg="neutral-2"
+      p="1.5rem"
     >
       <Accordion allowToggle>
         <AccordionItem
@@ -238,7 +240,6 @@ function RoleTermExpiredTerms({
               <AccordionButton
                 borderTopRadius="0.5rem"
                 borderBottomRadius="0.5rem"
-                p="1rem"
               >
                 <Flex
                   alignItems="center"

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 (
+    <Formik<RoleFormValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={rolesSchema}
+      validateOnMount
+      onSubmit={createEditRolesProposal}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <Outlet />
+        </form>
+      )}
+    </Formik>
+  );
+}