feat: add contract editor in userOp editor

src/components/EvmEditor.tsx

@@ -249,6 +249,7 @@ const EvmEditor = (): ReactJSXElement => {
               <EvmUserOpEditor
                 setRequestObject={setRequestObject}
                 account={account}
+                chainId={chainId}
               />
             </TabPanel>
             <TabPanel>

src/components/EvmEditors/EvmContractEditor.tsx

@@ -32,15 +32,19 @@ const EvmContractEditor = ({
   setDecodeType,
   account,
   chainId,
+  writeOnly,
 }: {
   setRequestObject: Dispatch<
     SetStateAction<EthereumTypes.EIP1193RequestPayload | undefined>
   >;
-  setDecodeType: Dispatch<SetStateAction<any>>;
+  setDecodeType?: Dispatch<SetStateAction<any>>;
   account: string | null;
   chainId: string | null;
+  writeOnly?: boolean;
 }): ReactJSXElement => {
-  const [requestMethod, setRequestMethod] = useState<string>("eth_call");
+  const [requestMethod, setRequestMethod] = useState<string>(
+    "eth_sendTransaction"
+  );
   const [contractAddress, setContractAddress] = useState<string>("");
   const [contractAbi, setContractAbi] = useState<string>("");
   const [methodName, setMethodName] = useState<string>("");
@@ -90,10 +94,12 @@ const EvmContractEditor = ({
             "latest",
           ],
         });
-        setDecodeType(
-          JSON.parse(contractAbi).find((m: any) => m.name === methodName)
-            .outputs
-        );
+        if (setDecodeType) {
+          setDecodeType(
+            JSON.parse(contractAbi).find((m: any) => m.name === methodName)
+              .outputs
+          );
+        }
       } else {
         setRequestObject({
           method: requestMethod,
@@ -132,35 +138,45 @@ const EvmContractEditor = ({
         <MenuList maxHeight={400} overflow="auto">
           {MenuGroups.map((menuGroup) => (
             <MenuGroup key={menuGroup.title} title={menuGroup.title}>
-              {Object.entries(menuGroup.templates).map(([name, template]) => (
-                <MenuItem
-                  key={name}
-                  pl={5}
-                  color="gray.700"
-                  onClick={() => {
-                    importTemplate(template);
-                  }}
-                >
-                  {template.description}
-                </MenuItem>
-              ))}
+              {Object.entries(menuGroup.templates)
+                .filter(
+                  // if writeOnly is true, only show write templates
+                  (item) =>
+                    !writeOnly || item[1].method === "eth_sendTransaction"
+                )
+                .map(([name, template]) => (
+                  <MenuItem
+                    key={name}
+                    pl={5}
+                    color="gray.700"
+                    onClick={() => {
+                      importTemplate(template);
+                    }}
+                  >
+                    {template.description}
+                  </MenuItem>
+                ))}
             </MenuGroup>
           ))}
         </MenuList>
       </Menu>
       <Grid templateRows="repeat(4, min-content)" gap="10px">
-        <Box fontWeight="bold">Method</Box>
-        <RadioGroup
-          value={requestMethod}
-          onChange={(e) => {
-            setRequestMethod(e);
-          }}
-        >
-          <Flex gap="15px">
-            <Radio value="eth_call">Read</Radio>
-            <Radio value="eth_sendTransaction">Write</Radio>
-          </Flex>
-        </RadioGroup>
+        {!writeOnly && (
+          <>
+            <Box fontWeight="bold">Method</Box>
+            <RadioGroup
+              value={requestMethod}
+              onChange={(e) => {
+                setRequestMethod(e);
+              }}
+            >
+              <Flex gap="15px">
+                <Radio value="eth_call">Read</Radio>
+                <Radio value="eth_sendTransaction">Write</Radio>
+              </Flex>
+            </RadioGroup>
+          </>
+        )}
         <Box fontWeight="bold">Contract info</Box>
         <Grid
           templateColumns="min-content 1fr"

src/components/EvmEditors/EvmUserOpEditor.tsx

@@ -25,6 +25,7 @@ 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";
+import EvmContractEditor from "./EvmContractEditor";
 
 const MenuGroups = [{ title: "Request", templates: UserOperationTemplate }];
 const ABI: AbiItem = {
@@ -42,11 +43,13 @@ const ABI: AbiItem = {
 const EvmUserOpEditor = ({
   setRequestObject,
   account,
+  chainId,
 }: {
   setRequestObject: Dispatch<
     SetStateAction<EthereumTypes.EIP1193RequestPayload | undefined>
   >;
   account: string | null;
+  chainId: string | null;
 }): ReactJSXElement => {
   const [templateId, setTemplateId] = useState<string>("");
   const [callData, setCallData] = useState<string>("");
@@ -72,8 +75,8 @@ const EvmUserOpEditor = ({
   }, [account, callData, otherParam, setRequestObject]);
 
   const setTransactionToCallData = useCallback(
-    ([params]) => {
-      const { to, value = "0x", data = "0x" } = params;
+    ({ params }) => {
+      const { to, value = "0x", data = "0x" } = params[0];
 
       if (!isAddress(to) || !isHexStrict(data)) return;
 
@@ -121,8 +124,22 @@ const EvmUserOpEditor = ({
       {templateId === "sendTransaction" ? (
         <Box my="20px">
           <EvmSendEditor
+            setRequestObject={(params = []) =>
+              setTransactionToCallData({
+                method: "eth_sendTransaction",
+                params,
+              })
+            }
+            account={account}
+          />
+        </Box>
+      ) : templateId === "sendContractTransaction" ? (
+        <Box my="20px">
+          <EvmContractEditor
             setRequestObject={setTransactionToCallData}
             account={account}
+            chainId={chainId}
+            writeOnly
           />
         </Box>
       ) : (

src/scripts/evm/UserOperation.ts

@@ -51,10 +51,18 @@ export const getNft: IUserOperationTemplate = {
   },
 };
 
-export const sendTransaction: IUserOperationTemplate = {
+export const sendRawTransaction: IUserOperationTemplate = {
   id: "sendTransaction",
   name: "Send transaction",
   userOpObj: {
     callData: "",
   },
 };
+
+export const sendContractTransaction: IUserOperationTemplate = {
+  id: "sendContractTransaction",
+  name: "Send Contract transaction",
+  userOpObj: {
+    callData: "",
+  },
+};