include approval action in asset transfer permissions

Author: MiltonTulli

src/components/ActionsBuilder/Action/Action.tsx

@@ -29,7 +29,7 @@ interface ActionViewProps {
   call?: Call;
   decodedAction?: DecodedAction;
   isEditable?: boolean;
-  onEdit?: (updatedCall: DecodedAction) => void;
+  onEdit?: (updatedCall: DecodedAction | DecodedAction[]) => void;
   onRemove?: (updatedCall: DecodedAction) => void;
 }
 

src/components/ActionsBuilder/Option/Option.tsx

@@ -43,14 +43,21 @@ export const OptionRow: React.FC<OptionRowProps> = ({
   } = useSortable({ id: option.id });
   const [isActionsModalOpen, setIsActionsModalOpen] = useState(false);
 
-  function addAction(action: DecodedAction) {
+  function addAction(action: DecodedAction | DecodedAction[]) {
+    const newActions = Array.isArray(action) ? action : [action];
+
     onChange({
       ...option,
-      decodedActions: [...option.decodedActions, action],
+      decodedActions: [...option.decodedActions, ...newActions],
     });
   }
 
-  function updateAction(index: number, action: DecodedAction) {
+  function updateAction(
+    index: number,
+    action: DecodedAction | DecodedAction[]
+  ) {
+    if (Array.isArray(action)) return;
+
     const updatedActions = option?.decodedActions.map((a, i) =>
       index === i ? action : a
     );

src/components/ActionsBuilder/SupportedActions/SetPermissions/SetPermissionsEditor.tsx

@@ -6,7 +6,11 @@ import { Controller, useForm } from 'react-hook-form';
 import { FiChevronDown } from 'react-icons/fi';
 
 import { ParsedDataInterface, TABS } from './types';
-import { ANY_FUNC_SIGNATURE, ERC20_TRANSFER_SIGNATURE } from 'utils';
+import {
+  ANY_FUNC_SIGNATURE,
+  ERC20_TRANSFER_SIGNATURE,
+  ERC20_APPROVE_SIGNATURE,
+} from 'utils';
 import { resolveUri } from 'utils/url';
 import { ActionEditorProps } from '..';
 import { useTokenList } from 'hooks/Guilds/tokens/useTokenList';
@@ -62,6 +66,10 @@ const Permissions: React.FC<ActionEditorProps> = ({
     };
   }, [decodedCall]);
 
+  const isEdit = useMemo(() => {
+    return !!decodedCall.args?.to || !!decodedCall.args?.functionSignature;
+  }, []); //eslint-disable-line
+
   const { t } = useTranslation();
 
   const [activeTab, setActiveTab] = useState(parsedData.tab);
@@ -111,30 +119,78 @@ const Permissions: React.FC<ActionEditorProps> = ({
     updateFunctionSignature(value);
   };
 
-  const submitAction = (values: FormValues) => {
-    const isAssetTransferCall = activeTab === TABS.ASSET_TRANSFER;
+  const submitAssetTransfer = (values: FormValues) => {
+    const baseCall = {
+      ...decodedCall,
+      args: {
+        ...decodedCall.args,
+        to: values.tokenAddress,
+        valueAllowed: BigNumber.from(0),
+        // "from" field set by default previously as guild id
+      },
+      optionalProps: {
+        asset: values.tokenAddress,
+        tab: TABS.ASSET_TRANSFER,
+      },
+    };
+    const newAssetTransferCall: DecodedCall = {
+      ...baseCall,
+      args: {
+        ...baseCall.args,
+        functionSignature: ERC20_TRANSFER_SIGNATURE,
+      },
+      optionalProps: {
+        ...baseCall.optionalProps,
+        functionName: '',
+      },
+    };
 
+    const newApprovalAssetCall = {
+      ...decodedCall,
+      args: {
+        ...decodedCall.args,
+        functionSignature: ERC20_APPROVE_SIGNATURE,
+      },
+      optionalProps: {
+        ...baseCall.optionalProps,
+        functionName: 'approve',
+      },
+    };
+
+    if (isEdit) {
+      // in case of edit mode we submit only one action that is being edited
+      return parsedData.functionSignature === ERC20_APPROVE_SIGNATURE
+        ? onSubmit(newApprovalAssetCall)
+        : onSubmit(newAssetTransferCall);
+    }
+    return onSubmit([newAssetTransferCall, newApprovalAssetCall]);
+  };
+
+  const submitFunctionCall = (values: FormValues) => {
     const newCall: DecodedCall = {
       ...decodedCall,
       args: {
         ...decodedCall.args,
-        to: isAssetTransferCall ? values.tokenAddress : values.toAddress,
+        to: values.toAddress,
         // native value allowed
-        valueAllowed: isAssetTransferCall ? BigNumber.from(0) : values.amount,
-        functionSignature: isAssetTransferCall
-          ? ERC20_TRANSFER_SIGNATURE
-          : values.functionSignature,
+        valueAllowed: values.amount,
+        functionSignature: values.functionSignature,
         // "from" field set by default previously as guild id
       },
       optionalProps: {
-        functionName: isAssetTransferCall ? '' : values.functionName,
-        asset: isAssetTransferCall ? values.tokenAddress : '',
+        functionName: values.functionName,
+        asset: '',
         tab: activeTab,
       },
     };
     onSubmit(newCall);
   };
 
+  const submitAction = (values: FormValues) => {
+    const isAssetTransferCall = activeTab === TABS.ASSET_TRANSFER;
+    (isAssetTransferCall ? submitAssetTransfer : submitFunctionCall)(values);
+  };
+
   const tabArray = [
     {
       title: t('assetTransfer'),

src/components/ActionsBuilder/SupportedActions/SetPermissions/SetPermissionsInfoLine.tsx

@@ -9,7 +9,11 @@ import { Flex } from 'components/primitives/Layout';
 import { useNetwork } from 'wagmi';
 import { useTokenList } from 'hooks/Guilds/tokens/useTokenList';
 import { resolveUri } from 'utils/url';
-import { shortenAddress } from 'utils';
+import {
+  shortenAddress,
+  ERC20_TRANSFER_SIGNATURE,
+  ERC20_APPROVE_SIGNATURE,
+} from 'utils';
 
 const SetPermissionsInfoLine: React.FC<ActionViewProps> = ({
   decodedCall,
@@ -48,7 +52,15 @@ const SetPermissionsInfoLine: React.FC<ActionViewProps> = ({
       <Segment>
         <BiCheckShield size={16} />
       </Segment>
-      <Segment>{t('setPermissionsFor')}</Segment>
+      <Segment>
+        {t(
+          parsedData?.functionSignature === ERC20_APPROVE_SIGNATURE
+            ? 'setApprovalPermissionsFor'
+            : parsedData?.functionSignature === ERC20_TRANSFER_SIGNATURE
+            ? 'setTransferPermissionsFor'
+            : 'setPermissionsFor'
+        )}
+      </Segment>
       <Segment>
         {currentToken && currentToken.address ? (
           <>

src/components/ActionsBuilder/SupportedActions/index.tsx

@@ -32,7 +32,7 @@ export interface ActionViewProps {
 
 export interface ActionEditorProps extends ActionViewProps {
   updateCall?: (updatedCall: DecodedCall) => void;
-  onSubmit: (decodedCall: DecodedCall) => void;
+  onSubmit: (decodedCall: DecodedCall | DecodedCall[]) => void;
 }
 
 type SupportedActionViews = {

src/components/ActionsModal/ActionsModal.tsx

@@ -162,7 +162,7 @@ const ActionModal: React.FC<ActionModalProps> = ({
           <Editor
             decodedCall={data}
             updateCall={setData}
-            onSubmit={saveSupportedAction}
+            onSubmit={handleEditorSubmit}
           />
           {displaySubmit(selectedAction) && (
             <Button
@@ -218,20 +218,29 @@ const ActionModal: React.FC<ActionModalProps> = ({
     setSelectedAction(action);
   }
 
-  function saveSupportedAction(call?: DecodedCall) {
-    const decodedCall = call ?? data;
-
+  function buildAction(decodedCall: DecodedCall): DecodedAction {
+    if (!decodedCall) return null;
     const defaultDecodedAction = defaultValues[decodedCall.callType];
 
-    if (!selectedAction || !decodedCall) return;
-
     const decodedAction: DecodedAction = {
       id: `action-${Math.random()}`,
       decodedCall,
       contract: defaultDecodedAction.contract,
     };
+    return decodedAction;
+  }
 
+  function saveSupportedAction(call?: DecodedCall) {
+    if (!call) return;
+    const decodedAction = buildAction(call);
     onAddAction(decodedAction);
+  }
+
+  function handleEditorSubmit(calls?: DecodedCall[] | DecodedCall) {
+    if (!calls) return;
+    onAddAction(
+      Array.isArray(calls) ? calls.map(buildAction) : buildAction(calls)
+    );
     handleClose();
   }
 

src/components/ActionsModal/types.ts

@@ -3,6 +3,6 @@ import { DecodedAction } from 'components/ActionsBuilder/types';
 export interface ActionModalProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  onAddAction: (action: DecodedAction) => void;
+  onAddAction: (action: DecodedAction | DecodedAction[]) => void;
   action?: DecodedAction;
 }

src/locales/en/translation.json

@@ -69,6 +69,8 @@
   "functionCalls": "Function Calls",
   "permission": "Permission",
   "setPermissionsFor": "Set permissions for",
+  "setApprovalPermissionsFor": "Set approval permissions for",
+  "setTransferPermissionsFor": "Set transfer permissions for",
   "unknownAction": "Unknown Action",
   "default": "Default",
   "edit": "Edit",