Merge pull request #67 from blocto/feat/userOp-add-tx-form

feat: add sendTx feat to UserOp template
blocto · Oct 11, 2023 · 3ff71e8 · 3ff71e8
2 parents a0d9a32 + bcf36f2
commit 3ff71e8
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 32 deletions.
diff --git a/src/components/EvmEditor.tsx b/src/components/EvmEditor.tsx
@@ -254,7 +254,12 @@ const EvmEditor = (): ReactJSXElement => {
             </TabPanel>
             <TabPanel>
               <EvmSendEditor
-                setRequestObject={setRequestObject}
+                setRequestObject={(params = []) =>
+                  setRequestObject({
+                    method: "eth_sendTransaction",
+                    params,
+                  })
+                }
                 account={account}
               />
             </TabPanel>

diff --git a/src/components/EvmEditors/EvmSendEditor.tsx b/src/components/EvmEditors/EvmSendEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Dispatch, SetStateAction } from "react";
+import React, { useEffect, useState, Dispatch } from "react";
 import { Box, Textarea, Grid } from "@chakra-ui/react";
 import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
 import type { EthereumTypes } from "@blocto/sdk";
@@ -9,7 +9,7 @@ const EvmSendEditor = ({
   account,
 }: {
   setRequestObject: Dispatch<
-    SetStateAction<EthereumTypes.EIP1193RequestPayload | undefined>
+    EthereumTypes.EIP1193RequestPayload["params"] | undefined
   >;
   account: string | null;
 }): ReactJSXElement => {
@@ -36,19 +36,9 @@ const EvmSendEditor = ({
       if (dataString) {
         sendObj.data = dataString;
       }
-      setRequestObject({
-        method: "eth_sendTransaction",
-        params: [sendObj],
-      });
+      setRequestObject([sendObj]);
     }
-  }, [
-    account,
-    fromString,
-    toString,
-    dataString,
-    valueString,
-    setRequestObject,
-  ]);
+  }, [account, fromString, toString, dataString, valueString]);
   useEffect(() => {
     setFrom(account || "");
   }, [account]);

diff --git a/src/components/EvmEditors/EvmUserOpEditor.tsx b/src/components/EvmEditors/EvmUserOpEditor.tsx
@@ -22,8 +22,22 @@ import { EthereumTypes } from "@blocto/sdk";
 import ParamEditor from "./ParamEditor";
 import * as UserOperationTemplate from "../../scripts/evm/UserOperation";
 import type { IUserOperationTemplate } from "../../scripts/evm/UserOperation";
+import EvmSendEditor from "./EvmSendEditor";
+import { AbiItem, numberToHex, isAddress, isHexStrict } from "web3-utils";
+import Web3EthAbi from "web3-eth-abi";
 
 const MenuGroups = [{ title: "Request", templates: UserOperationTemplate }];
+const ABI: AbiItem = {
+  inputs: [
+    { internalType: "address", name: "dest", type: "address" },
+    { internalType: "uint256", name: "value", type: "uint256" },
+    { internalType: "bytes", name: "func", type: "bytes" },
+  ],
+  name: "execute",
+  outputs: [],
+  stateMutability: "nonpayable",
+  type: "function",
+};
 
 const EvmUserOpEditor = ({
   setRequestObject,
@@ -34,10 +48,13 @@ const EvmUserOpEditor = ({
   >;
   account: string | null;
 }): ReactJSXElement => {
+  const [templateId, setTemplateId] = useState<string>("");
   const [callData, setCallData] = useState<string>("");
   const [otherParam, setOtherParam] = useState<string[][]>([]);
+
   const importTemplate = useCallback((template: IUserOperationTemplate) => {
-    setCallData(template.userOpObj.callData || "");
+    setTemplateId(template.id);
+    setCallData(template.userOpObj.callData);
     setOtherParam(
       Object.entries(template.userOpObj)
         .filter(([key]) => key !== "callData")
@@ -54,6 +71,27 @@ const EvmUserOpEditor = ({
     }
   }, [account, callData, otherParam, setRequestObject]);
 
+  const setTransactionToCallData = useCallback(
+    ([params]) => {
+      const { to, value = "0x", data = "0x" } = params;
+
+      if (!isAddress(to) || !isHexStrict(data)) return;
+
+      const callData = Web3EthAbi.encodeFunctionCall(ABI, [
+        to,
+        numberToHex(value),
+        data,
+      ]);
+
+      setCallData(callData);
+      setRequestObject({
+        method: "eth_sendUserOperation",
+        params: [{ callData, ...Object.fromEntries(otherParam) }],
+      });
+    },
+    [otherParam, setRequestObject]
+  );
+
   return (
     <Flex flexDirection="column">
       <Menu>
@@ -80,22 +118,32 @@ const EvmUserOpEditor = ({
         </MenuList>
       </Menu>
 
-      <Flex my="20px" alignItems="center">
-        <Box mx="10px">callData:</Box>
-        <Textarea
-          rows={2}
-          value={callData}
-          onChange={(e) => {
-            setCallData(e.target.value);
-          }}
-        />
-      </Flex>
-
-      <ParamEditor
-        title="Other Param"
-        params={otherParam}
-        setParams={setOtherParam}
-      />
+      {templateId === "sendTransaction" ? (
+        <Box my="20px">
+          <EvmSendEditor
+            setRequestObject={setTransactionToCallData}
+            account={account}
+          />
+        </Box>
+      ) : (
+        <>
+          <Flex my="20px" alignItems="center">
+            <Box mx="10px">callData:</Box>
+            <Textarea
+              rows={2}
+              value={callData}
+              onChange={(e) => {
+                setCallData(e.target.value);
+              }}
+            />
+          </Flex>
+          <ParamEditor
+            title="Other Param"
+            params={otherParam}
+            setParams={setOtherParam}
+          />
+        </>
+      )}
     </Flex>
   );
 };

diff --git a/src/scripts/evm/UserOperation.ts b/src/scripts/evm/UserOperation.ts
@@ -8,11 +8,13 @@ interface IUserOperation {
   paymasterAndData?: string;
 }
 export interface IUserOperationTemplate {
+  id: string;
   name: string;
   userOpObj: IUserOperation;
 }
 
 export const sendTokens: IUserOperationTemplate = {
+  id: "sendTokens",
   name: "Send native token",
   userOpObj: {
     callData:
@@ -21,6 +23,7 @@ export const sendTokens: IUserOperationTemplate = {
 };
 
 export const transferErc20: IUserOperationTemplate = {
+  id: "transferErc20",
   name: "Transfer erc20 token",
   userOpObj: {
     callData:
@@ -29,6 +32,7 @@ export const transferErc20: IUserOperationTemplate = {
 };
 
 export const setValueWithCustomPaymaster: IUserOperationTemplate = {
+  id: "setValueWithCustomPaymaster",
   name: "Set value with custom paymaster",
   userOpObj: {
     callData:
@@ -39,9 +43,18 @@ export const setValueWithCustomPaymaster: IUserOperationTemplate = {
 };
 
 export const getNft: IUserOperationTemplate = {
+  id: "getNft",
   name: "Mint NFT",
   userOpObj: {
     callData:
       "b61d27f600000000000000000000000000005ea00ac477b1030ce78506496e8c2de24bf5000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000084161ac21f000000000000000000000000fd8ec18d48ac1f46b600e231da07d1da8209ceef0000000000000000000000000000a26b00c1f0df003000390027140000faa7190000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000100000000000000000000000000000000000000000000000000000000",
   },
 };
+
+export const sendTransaction: IUserOperationTemplate = {
+  id: "sendTransaction",
+  name: "Send transaction",
+  userOpObj: {
+    callData: "",
+  },
+};