Merge pull request #325 from MiltonTulli/feature/approve-asset-transfer

Add approve to asset transfer permissions

Author: rossneilson

src/components/ActionsBuilder/Action/Action.tsx

@@ -179,7 +179,9 @@ export const ActionRow: React.FC<ActionViewProps> = ({
           isOpen={isEditActionModalOpen}
           setIsOpen={setIsEditActionModalOpen}
           action={decodedAction}
-          onAddAction={onEdit}
+          onAddActions={null}
+          onEditAction={onEdit}
+          isEditing={true}
         />
       )}
     </CardWrapperWithMargin>

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>
   );

src/components/ActionsBuilder/SupportedActions/ERC20Transfer/ERC20TransferEditor.tsx

@@ -91,26 +91,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,
+        },
+      ]);
     }
   };
 

src/components/ActionsBuilder/SupportedActions/RepMint/RepMintEditor.tsx

@@ -68,14 +68,16 @@ export const Mint: React.FC<ActionEditorProps> = ({
   };
 
   const submitAction = (values: RepMintFormValues) => {
-    onSubmit({
-      ...decodedCall,
-      args: {
-        ...decodedCall.args,
-        to: values.recipient,
-        amount: ethers.utils.parseUnits(repAmount.toString()),
+    onSubmit([
+      {
+        ...decodedCall,
+        args: {
+          ...decodedCall.args,
+          to: values.recipient,
+          amount: ethers.utils.parseUnits(repAmount.toString()),
+        },
       },
-    });
+    ]);
   };
 
   return (

src/components/ActionsBuilder/SupportedActions/SetGuildConfig/SetGuildConfigEditor.tsx

@@ -197,7 +197,7 @@ const SetGuildConfigEditor: FC<ActionEditorProps> = ({
     });
 
     if (Object.keys(updatedValues).length > 0) {
-      return onSubmit(call);
+      return onSubmit([call]);
     }
     return setNoValueUpdatedError(true);
   };

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

@@ -9,6 +9,7 @@ import { ParsedDataInterface, TABS } from './types';
 import {
   ANY_FUNC_SIGNATURE,
   ERC20_TRANSFER_SIGNATURE,
+  ERC20_APPROVE_SIGNATURE,
   preventEmptyString,
 } from 'utils';
 import { resolveUri } from 'utils/url';
@@ -49,6 +50,7 @@ interface FormValues {
 const Permissions: React.FC<ActionEditorProps> = ({
   decodedCall,
   onSubmit,
+  isEdit,
 }) => {
   const parsedData = useMemo<ParsedDataInterface>(() => {
     if (!decodedCall) return null;
@@ -115,28 +117,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 = {
+      ...baseCall,
+      args: {
+        ...baseCall.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 = [

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/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)

src/components/ActionsBuilder/SupportedActions/index.tsx

@@ -35,7 +35,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 = {

src/components/ActionsModal/ActionsModal.test.tsx

@@ -45,7 +45,7 @@ describe('ActionsModal', () => {
     props = {
       isOpen: false,
       setIsOpen: jest.fn(),
-      onAddAction: jest.fn(), // (action: DecodedAction) => void;
+      onAddActions: jest.fn(), // (actions: DecodedAction[]) => void;
     };
   });