Merge d0bc569 into 18a1cac

MiltonTulli · web-flow · commit f0cbd062dd22 · 2022-09-19T20:34:28.000Z
diff --git a/src/components/ActionsBuilder/Action/Action.tsx b/src/components/ActionsBuilder/Action/Action.tsx
@@ -177,7 +177,9 @@ export const ActionRow: React.FC<ActionViewProps> = ({
           isOpen={isEditActionModalOpen}
           setIsOpen={setIsEditActionModalOpen}
           action={decodedAction}
-          onAddAction={onEdit}
+          onAddActions={null}
+          onEditAction={onEdit}
+          isEditing={true}
         />
       )}
     </CardWrapperWithMargin>
diff --git a/src/components/ActionsBuilder/Option/Option.tsx b/src/components/ActionsBuilder/Option/Option.tsx
@@ -43,16 +43,16 @@ export const OptionRow: React.FC<OptionRowProps> = ({
   } = useSortable({ id: option.id });
   const [isActionsModalOpen, setIsActionsModalOpen] = useState(false);
 
-  function addAction(action: DecodedAction) {
+  function addActions(actions: DecodedAction[]) {
     onChange({
       ...option,
-      decodedActions: [...option.decodedActions, action],
+      decodedActions: [...option.decodedActions, ...actions],
     });
   }
 
-  function updateAction(index: number, action: DecodedAction) {
-    const updatedActions = option?.decodedActions.map((a, i) =>
-      index === i ? action : a
+  function updateAction(action: DecodedAction) {
+    const updatedActions = option?.decodedActions.map(a =>
+      a.id === action.id ? action : a
     );
     onChange({ ...option, decodedActions: updatedActions });
   }
@@ -118,7 +118,7 @@ export const OptionRow: React.FC<OptionRowProps> = ({
                   key={index}
                   isEditable={true}
                   decodedAction={action}
-                  onEdit={updatedAction => updateAction(index, updatedAction)}
+                  onEdit={updateAction}
                   onRemove={targetAction => removeAction(targetAction)}
                 />
               );
@@ -137,10 +137,12 @@ export const OptionRow: React.FC<OptionRowProps> = ({
       <ActionModal
         isOpen={isActionsModalOpen}
         setIsOpen={setIsActionsModalOpen}
-        onAddAction={action => {
-          addAction(action);
+        onAddActions={action => {
+          addActions(action);
           setIsActionsModalOpen(false);
         }}
+        onEditAction={updateAction}
+        isEditing={false}
       />
     </OptionWrapper>
   );
diff --git a/src/components/ActionsBuilder/SupportedActions/ERC20Transfer/ERC20TransferEditor.tsx b/src/components/ActionsBuilder/SupportedActions/ERC20Transfer/ERC20TransferEditor.tsx
@@ -103,26 +103,30 @@ const ERC20TransferEditor: React.FC<ActionEditorProps> = ({
     if (values.token.type === TokenType.ERC20) {
       const ERC20Contract = new utils.Interface(ERC20.abi);
 
-      onSubmit({
-        ...decodedCall,
-        callType: SupportedAction.ERC20_TRANSFER,
-        to: values.token.address,
-        value: BigNumber.from(0),
-        function: ERC20Contract.getFunction('transfer'),
-        args: {
-          _value: values.amount,
-          _to: values.recipientAddress,
+      onSubmit([
+        {
+          ...decodedCall,
+          callType: SupportedAction.ERC20_TRANSFER,
+          to: values.token.address,
+          value: BigNumber.from(0),
+          function: ERC20Contract.getFunction('transfer'),
+          args: {
+            _value: values.amount,
+            _to: values.recipientAddress,
+          },
         },
-      });
+      ]);
     } else {
-      onSubmit({
-        ...decodedCall,
-        callType: SupportedAction.NATIVE_TRANSFER,
-        to: values.recipientAddress,
-        value: values.amount,
-        function: null,
-        args: null,
-      });
+      onSubmit([
+        {
+          ...decodedCall,
+          callType: SupportedAction.NATIVE_TRANSFER,
+          to: values.recipientAddress,
+          value: values.amount,
+          function: null,
+          args: null,
+        },
+      ]);
     }
   };
 
diff --git a/src/components/ActionsBuilder/SupportedActions/RepMint/RepMintEditor.tsx b/src/components/ActionsBuilder/SupportedActions/RepMint/RepMintEditor.tsx
@@ -63,14 +63,16 @@ export const Mint: React.FC<ActionEditorProps> = ({
   };
 
   const submitAction = () => {
-    onSubmit({
-      ...decodedCall,
-      args: {
-        ...decodedCall.args,
-        to: recipient,
-        amount: ethers.utils.parseUnits(repAmount.toString()),
+    onSubmit([
+      {
+        ...decodedCall,
+        args: {
+          ...decodedCall.args,
+          to: recipient,
+          amount: ethers.utils.parseUnits(repAmount.toString()),
+        },
       },
-    });
+    ]);
   };
 
   return (
diff --git a/src/components/ActionsBuilder/SupportedActions/SetPermissions/SetPermissionsEditor.tsx b/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';
@@ -45,6 +49,7 @@ interface FormValues {
 const Permissions: React.FC<ActionEditorProps> = ({
   decodedCall,
   onSubmit,
+  isEdit,
 }) => {
   const parsedData = useMemo<ParsedDataInterface>(() => {
     if (!decodedCall) return null;
@@ -111,28 +116,76 @@ 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(address,uint256)',
+      },
+    };
+
+    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);
+    onSubmit([newCall]);
+  };
+
+  const submitAction = (values: FormValues) => {
+    const isAssetTransferCall = activeTab === TABS.ASSET_TRANSFER;
+    (isAssetTransferCall ? submitAssetTransfer : submitFunctionCall)(values);
   };
 
   const tabArray = [
diff --git a/src/components/ActionsBuilder/SupportedActions/SetPermissions/SetPermissionsInfoLine.tsx b/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 ? (
           <>
diff --git a/src/components/ActionsBuilder/SupportedActions/UpdateENSContent/UpdateENSContentEditor.tsx b/src/components/ActionsBuilder/SupportedActions/UpdateENSContent/UpdateENSContentEditor.tsx
@@ -56,20 +56,22 @@ const UpdateENSContentEditor: React.FC<ActionEditorProps> = ({
     const { nameHash } = convertToNameHash(fullEnsName);
     const { contentHash } = convertToContentHash(values.ipfsHash);
 
-    onSubmit({
-      ...decodedCall,
-      to: resolver?.address,
-      args: {
-        ...decodedCall.args,
-        node: nameHash,
-        hash: contentHash,
+    onSubmit([
+      {
+        ...decodedCall,
+        to: resolver?.address,
+        args: {
+          ...decodedCall.args,
+          node: nameHash,
+          hash: contentHash,
+        },
+        optionalProps: {
+          ...decodedCall.optionalProps,
+          ensName: values.ensName,
+          ipfsHash: values.ipfsHash,
+        },
       },
-      optionalProps: {
-        ...decodedCall.optionalProps,
-        ensName: values.ensName,
-        ipfsHash: values.ipfsHash,
-      },
-    });
+    ]);
   };
 
   if (chain.id === LOCALHOST_ID)
diff --git a/src/components/ActionsBuilder/SupportedActions/index.tsx b/src/components/ActionsBuilder/SupportedActions/index.tsx
@@ -32,7 +32,8 @@ export interface ActionViewProps {
 
 export interface ActionEditorProps extends ActionViewProps {
   updateCall?: (updatedCall: DecodedCall) => void;
-  onSubmit: (decodedCall: DecodedCall) => void;
+  onSubmit: (decodedCall: DecodedCall[]) => void;
+  isEdit?: boolean;
 }
 
 type SupportedActionViews = {
diff --git a/src/components/ActionsModal/ActionsModal.test.tsx b/src/components/ActionsModal/ActionsModal.test.tsx
@@ -37,7 +37,7 @@ describe('ActionsModal', () => {
     props = {
       isOpen: false,
       setIsOpen: jest.fn(),
-      onAddAction: jest.fn(), // (action: DecodedAction) => void;
+      onAddActions: jest.fn(), // (actions: DecodedAction[]) => void;
     };
   });
 
diff --git a/src/components/ActionsModal/ActionsModal.tsx b/src/components/ActionsModal/ActionsModal.tsx
@@ -32,7 +32,9 @@ const ActionModal: React.FC<ActionModalProps> = ({
   action,
   isOpen,
   setIsOpen,
-  onAddAction,
+  onAddActions,
+  onEditAction,
+  isEditing,
 }) => {
   const { t } = useTranslation();
   const { guildId } = useTypedParams();
@@ -112,8 +114,11 @@ const ActionModal: React.FC<ActionModalProps> = ({
           fn={fn}
           defaultValues={data?.args}
           onSubmit={args => {
-            onAddAction({
-              id: `action-${Math.random()}`,
+            const submitAction = {
+              id:
+                isEditing && !!action?.id
+                  ? action.id
+                  : `action-${Math.random()}`,
               contract: contractInterface,
               decodedCall: {
                 callType: SupportedAction.GENERIC_CALL,
@@ -136,7 +141,9 @@ const ActionModal: React.FC<ActionModalProps> = ({
                     ...payableFnData,
                   },
                 }),
-            });
+            };
+            if (isEditing && onEditAction) onEditAction(submitAction);
+            else if (onAddActions) onAddActions([submitAction]);
             handleClose();
           }}
         />
@@ -160,7 +167,8 @@ const ActionModal: React.FC<ActionModalProps> = ({
           <Editor
             decodedCall={data}
             updateCall={setData}
-            onSubmit={saveSupportedAction}
+            onSubmit={handleEditorSubmit}
+            isEdit={isEditing}
           />
         </EditorWrapper>
       );
@@ -207,20 +215,22 @@ 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()}`,
+      id: isEditing && !!action?.id ? action.id : `action-${Math.random()}`, // Mantain id if is edit mode & id is exists
       decodedCall,
       contract: defaultDecodedAction.contract,
     };
+    return decodedAction;
+  }
 
-    onAddAction(decodedAction);
+  function handleEditorSubmit(calls?: DecodedCall[]) {
+    if (!calls) return;
+    if (isEditing && onEditAction) onEditAction(buildAction(calls[0]));
+    else onAddActions(calls.map(buildAction));
     handleClose();
   }
 
diff --git a/src/components/ActionsModal/types.ts b/src/components/ActionsModal/types.ts
diff --git a/src/hooks/Guilds/ens/useENSPublicResolverContract.ts b/src/hooks/Guilds/ens/useENSPublicResolverContract.ts
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,8 @@ export interface ActionViewProps {`
`32`	`32`
`33`	`33`	`export interface ActionEditorProps extends ActionViewProps {`
`34`	`34`	`updateCall?: (updatedCall: DecodedCall) => void;`
`35`		`- onSubmit: (decodedCall: DecodedCall) => void;`
	`35`	`+ onSubmit: (decodedCall: DecodedCall[]) => void;`
	`36`	`+ isEdit?: boolean;`
`36`	`37`	`}`
`37`	`38`
`38`	`39`	`type SupportedActionViews = {`