Add send assets action to roles proposal

src/components/pages/Roles/RoleCard.tsx

@@ -255,7 +255,10 @@ export function RoleCardShort({
   handleRoleClick: () => void;
 }) {
   return (
-    <Card onClick={handleRoleClick}>
+    <Card
+      cursor={'pointer'}
+      onClick={handleRoleClick}
+    >
       <Flex justifyContent="space-between">
         <Text
           textStyle="display-lg"
@@ -270,7 +273,7 @@ export function RoleCardShort({
           <EditBadge editStatus={editStatus} />
           <Icon
             as={CaretCircleRight}
-            color="white-0"
+            color="lilac-0"
             boxSize="1.5rem"
           />
         </Flex>

src/components/pages/Roles/RolePaymentDetails.tsx

@@ -7,7 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Address, getAddress, Hex } from 'viem';
 import { useAccount, usePublicClient } from 'wagmi';
-import { NEUTRAL_2_82_TRANSPARENT, CARD_SHADOW } from '../../../constants/common';
+import {
+  NEUTRAL_2_82_TRANSPARENT,
+  CARD_SHADOW,
+  DETAILS_BOX_SHADOW,
+} from '../../../constants/common';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
@@ -18,9 +22,6 @@ import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
 import { RoleFormValues } from './types';
 
-const PAYMENT_DETAILS_BOX_SHADOW =
-  '0px 0px 0px 1px #100414, 0px 0px 0px 1px rgba(248, 244, 252, 0.04) inset, 0px 1px 0px 0px rgba(248, 244, 252, 0.04) inset';
-
 function CancelStreamMenu({
   streamId,
   paymentIsCancelling,
@@ -76,7 +77,7 @@ function CancelStreamMenu({
   return (
     <Flex
       justifyContent="flex-end"
-      boxShadow={PAYMENT_DETAILS_BOX_SHADOW}
+      boxShadow={DETAILS_BOX_SHADOW}
       borderTopRadius="0.5rem"
       w="full"
       py="0.25rem"
@@ -293,7 +294,7 @@ export function RolePaymentDetails({
         ? {
             bg: 'neutral-2',
             sx: undefined,
-            boxShadow: PAYMENT_DETAILS_BOX_SHADOW,
+            boxShadow: DETAILS_BOX_SHADOW,
           }
         : {
             sx: {
@@ -416,7 +417,7 @@ export function RolePaymentDetails({
               borderLeft="1px solid"
               borderColor="white-alpha-08"
               h="full"
-              boxShadow={PAYMENT_DETAILS_BOX_SHADOW}
+              boxShadow={DETAILS_BOX_SHADOW}
               w="0"
             />
           </GridItem>
@@ -431,7 +432,7 @@ export function RolePaymentDetails({
               borderLeft="1px solid"
               borderColor="white-alpha-08"
               h="full"
-              boxShadow={PAYMENT_DETAILS_BOX_SHADOW}
+              boxShadow={DETAILS_BOX_SHADOW}
               w="0"
             />
           </GridItem>

src/components/pages/Roles/forms/RoleFormCreateProposal.tsx

@@ -1,25 +1,83 @@
-import { Box, Button, Flex, FormControl, Show } from '@chakra-ui/react';
+import { Box, Button, Flex, FormControl, Show, Text, Icon } from '@chakra-ui/react';
+import { SquaresFour, ArrowsDownUp, Trash } from '@phosphor-icons/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { getAddress, Hex } from 'viem';
+import { formatUnits, getAddress, Hex } from 'viem';
 import { CARD_SHADOW } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
+import useDisplayName from '../../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { Card } from '../../../ui/cards/Card';
 import { CustomNonceInput } from '../../../ui/forms/CustomNonceInput';
 import { InputComponent, TextareaComponent } from '../../../ui/forms/InputComponent';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
+import { AddActions } from '../../../ui/modals/AddActions';
+import { SendAssetsData } from '../../../ui/modals/SendAssetsModal';
 import { RoleCardShort } from '../RoleCard';
 import RolesDetailsDrawer from '../RolesDetailsDrawer';
 import RolesDetailsDrawerMobile from '../RolesDetailsDrawerMobile';
 import { EditedRole, RoleDetailsDrawerRoleHatProp, RoleFormValues } from '../types';
 
+function SendAssetsAction({
+  index,
+  action,
+  onRemove,
+}: {
+  index: number;
+  action: SendAssetsData;
+  onRemove: (index: number) => void;
+}) {
+  const { t } = useTranslation('common');
+  const { displayName } = useDisplayName(action.destinationAddress);
+
+  return (
+    <Card my="1rem">
+      <Flex justifyContent="space-between">
+        <Flex
+          alignItems="center"
+          gap="0.5rem"
+        >
+          <Icon
+            as={ArrowsDownUp}
+            w="1.5rem"
+            h="1.5rem"
+            color="lilac-0"
+          />
+          <Text>{t('transfer')}</Text>
+          <Text color="lilac-0">
+            {formatUnits(action.transferAmount, action.asset.decimals)} {action.asset.symbol}
+          </Text>
+          <Text>{t('to').toLowerCase()}</Text>
+          <Text color="lilac-0">{displayName}</Text>
+        </Flex>
+        <Button
+          color="red-0"
+          variant="tertiary"
+          size="sm"
+          onClick={() => {
+            onRemove(index);
+          }}
+        >
+          <Icon as={Trash} />
+        </Button>
+      </Flex>
+    </Card>
+  );
+}
+
 export default function RoleFormCreateProposal({ close }: { close: () => void }) {
   const [drawerViewingRole, setDrawerViewingRole] = useState<RoleDetailsDrawerRoleHatProp>();
   const { t } = useTranslation(['modals', 'common', 'proposal']);
-  const { values, isSubmitting, submitForm } = useFormikContext<RoleFormValues>();
+  const {
+    values,
+    setFieldValue: setFieldValueTopLevel,
+    isSubmitting,
+    submitForm,
+  } = useFormikContext<RoleFormValues>();
+
   const editedRoles = useMemo<
     (RoleDetailsDrawerRoleHatProp & {
       editedRole: EditedRole;
@@ -80,6 +138,10 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
 
   const handleCloseDrawer = () => setDrawerViewingRole(undefined);
 
+  const addSendAssetsAction = (sendAssetsAction: SendAssetsData) => {
+    setFieldValueTopLevel('actions', [...values.actions, sendAssetsAction]);
+  };
+
   return (
     <Box maxW="736px">
       <Flex
@@ -155,25 +217,52 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
           </Field>
         </FormControl>
       </Flex>
-      <Box
-        p="1rem"
-        bg="neutral-2"
-        boxShadow={CARD_SHADOW}
-        borderRadius="0.5rem"
+
+      <Flex
+        mt={4}
+        mb={2}
+        alignItems="center"
       >
-        {editedRoles.map((role, index) => {
-          return (
-            <RoleCardShort
-              key={index}
-              name={role.name}
-              handleRoleClick={() => {
-                setDrawerViewingRole(role);
-              }}
-              editStatus={role.editedRole?.status}
-            />
-          );
-        })}
-      </Box>
+        <Icon
+          as={SquaresFour}
+          w="1.5rem"
+          h="1.5rem"
+        />
+        <Text
+          textStyle="display-lg"
+          ml={2}
+        >
+          {t('actions', { ns: 'actions' })}
+        </Text>
+      </Flex>
+      {editedRoles.map((role, index) => {
+        return (
+          <RoleCardShort
+            key={index}
+            name={role.name}
+            handleRoleClick={() => {
+              setDrawerViewingRole(role);
+            }}
+            editStatus={role.editedRole?.status}
+          />
+        );
+      })}
+      {values.actions.map((action, index) => (
+        <SendAssetsAction
+          action={action}
+          key={index}
+          index={index}
+          onRemove={idx => {
+            setFieldValueTopLevel(
+              'actions',
+              values.actions.filter((_, i) => i !== idx),
+            );
+          }}
+        />
+      ))}
+
+      <AddActions addSendAssetsAction={addSendAssetsAction} />
+
       <Flex
         gap="1rem"
         mt="1rem"

src/components/pages/Roles/types.tsx

@@ -1,6 +1,7 @@
 import { Address, Hex } from 'viem';
 import { DecentRoleHat } from '../../../store/roles';
 import { BigIntValuePair, CreateProposalMetadata } from '../../../types';
+import { SendAssetsData } from '../../ui/modals/SendAssetsModal';
 
 export interface SablierAsset {
   address: Address;
@@ -131,6 +132,7 @@ export interface RoleFormValues {
   hats: RoleHatFormValue[];
   roleEditing?: RoleHatFormValue;
   customNonce?: number;
+  actions: SendAssetsData[];
 }
 
 export type PreparedAddedHatsData = HatStruct & { id: bigint };