From 6c552c8fd654f848a0973f9ac45d7681009b68c4 Mon Sep 17 00:00:00 2001
From: calvinchang <q20274982@gmail.com>
Date: Mon, 18 Sep 2023 14:15:52 +0800
Subject: [PATCH 1/3] feat: add sendTx feat to UserOp template

---
 src/components/EvmEditor.tsx                  |  7 +-
 src/components/EvmEditors/EvmSendEditor.tsx   | 18 ++---
 src/components/EvmEditors/EvmUserOpEditor.tsx | 69 ++++++++++++++++---
 src/scripts/evm/UserOperation.ts              | 13 ++++
 4 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/src/components/EvmEditor.tsx b/src/components/EvmEditor.tsx
index 298e8b7..21167ae 100644
--- 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
index 1fc0615..3658ece 100644
--- 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
index 797534e..39f7f0f 100644
--- 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,16 +118,25 @@ 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>
+      {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"
diff --git a/src/scripts/evm/UserOperation.ts b/src/scripts/evm/UserOperation.ts
index 9aabdfb..819c3f1 100644
--- 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: "",
+  },
+};

From 00f1f7925b009038c18e3cf2c3762dc33a424caa Mon Sep 17 00:00:00 2001
From: calvinchang <q20274982@gmail.com>
Date: Mon, 2 Oct 2023 15:57:31 +0800
Subject: [PATCH 2/3] feat: hide otherParam when sendTx by sendUserOp way

---
 src/components/EvmEditors/EvmUserOpEditor.tsx | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/EvmEditors/EvmUserOpEditor.tsx b/src/components/EvmEditors/EvmUserOpEditor.tsx
index 39f7f0f..269f24d 100644
--- a/src/components/EvmEditors/EvmUserOpEditor.tsx
+++ b/src/components/EvmEditors/EvmUserOpEditor.tsx
@@ -126,23 +126,24 @@ const EvmUserOpEditor = ({
           />
         </Box>
       ) : (
-        <Flex my="20px" alignItems="center">
-          <Box mx="10px">callData:</Box>
-          <Textarea
-            rows={2}
-            value={callData}
-            onChange={(e) => {
-              setCallData(e.target.value);
-            }}
+        <>
+          <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>
+        </>
       )}
-
-      <ParamEditor
-        title="Other Param"
-        params={otherParam}
-        setParams={setOtherParam}
-      />
     </Flex>
   );
 };

From bcf36f2c290765fac16feb4e709ea00f06a8517e Mon Sep 17 00:00:00 2001
From: calvinchang <q20274982@gmail.com>
Date: Mon, 2 Oct 2023 15:58:45 +0800
Subject: [PATCH 3/3] fix: fix sendTx's params passing

---
 src/components/EvmEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EvmEditor.tsx b/src/components/EvmEditor.tsx
index 21167ae..554223c 100644
--- a/src/components/EvmEditor.tsx
+++ b/src/components/EvmEditor.tsx
@@ -254,7 +254,7 @@ const EvmEditor = (): ReactJSXElement => {
             </TabPanel>
             <TabPanel>
               <EvmSendEditor
-                setRequestObject={([params] = []) =>
+                setRequestObject={(params = []) =>
                   setRequestObject({
                     method: "eth_sendTransaction",
                     params,