Merge branch 'develop' into ui-tweaks-1

src/components/Roles/RoleDetails.tsx

@@ -1,5 +1,5 @@
-import { Badge, Box, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
-import { CheckSquare, List, User } from '@phosphor-icons/react';
+import { Badge, Box, Button, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
+import { ArrowLeft, CheckSquare, List, User } from '@phosphor-icons/react';
 import { RefObject, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -135,19 +135,33 @@ export default function RolesDetails({
                   </Box>
                 ),
                 gap: 0,
-                children: t('editRoles'),
-                onClick: () => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safe.address)),
+                children: t('editRole'),
+                onClick: () => {
+                  navigate(
+                    DAO_ROUTES.rolesEditDetails.relative(addressPrefix, safe.address, roleHat.id),
+                  );
+                },
               }
             : undefined
         }
       />
-      <Text
-        textStyle="heading-large"
-        color="white-0"
-        my="1rem"
-      >
-        {roleHat.name}
-      </Text>
+      <Flex justifyContent="space-between">
+        <Text
+          textStyle="heading-large"
+          color="white-0"
+          my="1rem"
+        >
+          {roleHat.name}
+        </Text>
+        <Button
+          variant="tertiary"
+          width="min-content"
+          color="lilac-0"
+          pr={2}
+          leftIcon={<ArrowLeft />}
+          onClick={() => navigate(DAO_ROUTES.roles.relative(addressPrefix, safe.address))}
+        />
+      </Flex>
       <Grid
         gridTemplateAreas={`
               "mLabel mValue"

src/components/Roles/forms/RoleFormMember.tsx

@@ -23,11 +23,9 @@ import { useTranslation } from 'react-i18next';
 import { DecentHourGlass } from '../../../assets/theme/custom/icons/DecentHourGlass';
 import { DETAILS_BOX_SHADOW } from '../../../constants/common';
 import useAddress from '../../../hooks/utils/useAddress';
-import { useGetAccountName } from '../../../hooks/utils/useGetAccountName';
 import { RoleFormValues } from '../../../types/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
-import { AddressInput } from '../../ui/forms/EthAddressInput';
-import LabelWrapper from '../../ui/forms/LabelWrapper';
+import { InputComponent } from '../../ui/forms/InputComponent';
 import { ModalBase } from '../../ui/modals/ModalBase';
 import RoleFormTerms from './RoleFormTerms';
 
@@ -38,14 +36,13 @@ function RoleMemberWearerInput() {
   const { address: resolvedWearerAddress, isValid: isValidWearerAddress } =
     useAddress(roleWearerString);
 
-  const { setFieldValue, values } = useFormikContext<RoleFormValues>();
+  const { setFieldValue } = useFormikContext<RoleFormValues>();
   useEffect(() => {
     if (isValidWearerAddress) {
       setFieldValue('roleEditing.resolvedWearer', resolvedWearerAddress);
     }
   }, [isValidWearerAddress, resolvedWearerAddress, setFieldValue]);
 
-  const { displayName } = useGetAccountName(values.roleEditing?.resolvedWearer, false);
   return (
     <FormControl>
       <Field name="roleEditing.wearer">
@@ -58,24 +55,21 @@ function RoleMemberWearerInput() {
           form: FormikProps<RoleFormValues>;
           meta: FieldMetaProps<string>;
         }) => (
-          <LabelWrapper
+          <InputComponent
             label={t('member')}
-            errorMessage={meta.touched && meta.error ? meta.error : undefined}
             isRequired
-            labelColor="neutral-7"
-          >
-            <AddressInput
-              value={displayName ?? field.value}
-              onBlur={() => {
-                setFieldTouched('roleEditing.wearer', true);
-              }}
-              onChange={e => {
-                const inputWearer = e.target.value;
-                setRoleWearerString(inputWearer);
-                setFieldValue('roleEditing.wearer', inputWearer);
-              }}
-            />
-          </LabelWrapper>
+            value={field.value}
+            errorMessage={meta.touched && meta.error ? meta.error : undefined}
+            onBlur={() => {
+              setFieldTouched('roleEditing.wearer', true);
+            }}
+            onChange={e => {
+              const inputWearer = e.target.value;
+              setRoleWearerString(inputWearer);
+              setFieldValue('roleEditing.wearer', inputWearer);
+            }}
+            testId="role-wearer"
+          />
         )}
       </Field>
     </FormControl>

src/components/Roles/forms/RoleFormTabs.tsx

@@ -1,4 +1,5 @@
 import { Button, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { useFormikContext } from 'formik';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +59,16 @@ export function RoleFormTabs({
 
   return (
     <>
+      <Flex justifyContent="flex-end">
+        <Button
+          variant="tertiary"
+          width="min-content"
+          color="lilac-0"
+          pr={2}
+          leftIcon={<ArrowLeft />}
+          onClick={() => navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, safe.address))}
+        />
+      </Flex>
       <Tabs variant="twoTone">
         <TabList>
           <Tab>{t('roleInfo')}</Tab>

src/components/ui/cards/DAONodeInfoCard.tsx

@@ -94,6 +94,8 @@ export function DAONodeInfoCard(props: {
                 color="lilac-0"
                 whiteSpace="nowrap"
               >
+                {/* Convert multisig badge casing here since it's already been cached to avoid another migration */}
+                {type === 'MULTISIG' ? `${type[0]}${type.slice(1).toLocaleLowerCase()}` : type}
                 {type}
               </Text>
             </Box>

src/i18n/locales/en/daoCreate.json

@@ -4,9 +4,9 @@
   "errorLowSignerThreshold": "Threshold must be greater than 0",
   "errorHighSignerThreshold": "Threshold must be less than number of owners.",
   "labelSigThreshold": "Threshold",
-  "helperSigThreshold": "Number of signers needed to approve a proposal.",
+  "helperSigThreshold": "The number of owners required to approve a transaction on this multisig",
   "titleSignerAddresses": "Owners",
-  "subTitleSignerAddresses": "These users will be able to submit and approve proposals.",
+  "subTitleSignerAddresses": "These addresses will be able to approve or reject transactions on this multisig.",
   "titleGetStarted": "Get Started",
   "titleConfigureERC20": "Configure ERC-20 Token",
   "titleConfigureERC721": "Configure ERC-721 NFTs",
@@ -28,12 +28,12 @@
   "helperNFTWeight": "How many votes is this token worth?",
   "labelVotingPeriod": "Voting Period",
   "labelChooseGovernance": "Governance",
-  "helperChooseGovernance": "Please select a framework to add governance to your Safe.",
+  "helperChooseGovernance": "Select a governance schema for your DAO.",
   "helperVotingPeriod": "The length of time where voting is enabled after a proposal is created.",
   "helperQuorumERC20": "The minimum percentage of total possible votes required for a proposal to pass.",
   "helperQuorumERC721": "The minimum weight of total available token voting weight required for a proposal's results to be considered official.",
   "governanceDescription": "These values can be modified later.",
-  "titleGuardConfig": "Configure Parent Controls",
+  "titleGuardConfig": "Configure Administration",
   "titleFreezeParams": "Freeze Parameters",
   "labelExecutionPeriod": "Execution Period",
   "helperExecutionPeriod": "The length of time in which a passed, unlocked proposal is executable onchain.",
@@ -97,7 +97,7 @@
   "tooltipMultisig": "<1>Learn more</1>",
   "tooltipTokenVoting": "<1>Learn more</1>",
   "toastDisconnected": "Connect an account to proceed!",
-  "toastDisconnectedPersistent": "You'll need to connect an account to deploy this Safe.",
+  "toastDisconnectedPersistent": "You'll need to connect your wallet to deploy this DAO.",
   "tooltipNftVoting": "NFT Voting allows a group of ERC-721 (NFT) holders to propose and vote on transactions. Multiple NFT addresses can be used. <1>Learn more</1>",
   "errorUnsupportedCreateOption": "Previously selected Governance option is not supported on this network.",
   "attachFractalModuleLabel": "Enable Clawback",

src/pages/dao/roles/edit/SafeRolesEditPage.tsx

@@ -1,5 +1,5 @@
 import * as amplitude from '@amplitude/analytics-browser';
-import { Box, Button, Flex, Show } from '@chakra-ui/react';
+import { Box, Button, Flex, Hide, Show } from '@chakra-ui/react';
 import { Plus } from '@phosphor-icons/react';
 import { useFormikContext } from 'formik';
 import { useEffect, useState } from 'react';
@@ -9,7 +9,10 @@ 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';
@@ -51,6 +54,36 @@ export function SafeRolesEditPage() {
 
   return (
     <>
+      {blocker.state === 'blocked' && (
+        <>
+          <Hide above="md">
+            <DraggableDrawer
+              isOpen
+              onClose={() => {}}
+              onOpen={() => {}}
+              headerContent={null}
+              initialHeight="23rem"
+              closeOnOverlayClick={false}
+            >
+              <UnsavedChangesWarningContent
+                onDiscard={blocker.proceed}
+                onKeepEditing={blocker.reset}
+              />
+            </DraggableDrawer>
+          </Hide>
+          <Hide below="md">
+            <ModalBase
+              isOpen
+              onClose={() => {}}
+            >
+              <UnsavedChangesWarningContent
+                onDiscard={blocker.proceed}
+                onKeepEditing={blocker.reset}
+              />
+            </ModalBase>
+          </Hide>
+        </>
+      )}
       <Box>
         <PageHeader
           title={t('roles')}