feat: add BatchTxEditor

src/components/EvmEditor.tsx

@@ -28,6 +28,7 @@ import EvmSignEditor from "./EvmEditors/EvmSignEditor";
 import EvmUserOpEditor from "./EvmEditors/EvmUserOpEditor";
 import EvmSendEditor from "./EvmEditors/EvmSendEditor";
 import EvmContractEditor from "./EvmEditors/EvmContractEditor";
+import EvmBatchTxEditor from "./EvmEditors/EvmBatchTxEditor";
 import type { EthereumTypes } from "@blocto/sdk";
 import { bloctoSDK, useEthereum, supportedChains, web3 } from "../services/evm";
 import ReactJson from "react-json-view";
@@ -234,6 +235,7 @@ const EvmEditor = (): ReactJSXElement => {
             <Tab>User Operation</Tab>
             <Tab>Send</Tab>
             <Tab>Contract</Tab>
+            <Tab>Batch Transaction</Tab>
           </TabList>
           <TabPanels>
             <TabPanel>
@@ -266,6 +268,12 @@ const EvmEditor = (): ReactJSXElement => {
                 chainId={chainId}
               />
             </TabPanel>
+            <TabPanel>
+              <EvmBatchTxEditor
+                setRequestObject={setRequestObject}
+                account={account}
+              />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </Flex>

src/components/EvmEditors/EvmBatchTxEditor.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState, Dispatch, SetStateAction } from "react";
+import {
+  Box,
+  Text,
+  Grid,
+  Flex,
+  IconButton,
+  Radio,
+  RadioGroup,
+} from "@chakra-ui/react";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
+import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
+import type { EthereumTypes } from "@blocto/sdk";
+import EvmTxForm from "./EvmTxForm";
+
+interface EvmBatchTxEditorProps {
+  setRequestObject: Dispatch<
+    SetStateAction<EthereumTypes.EIP1193RequestPayload | undefined>
+  >;
+  account: string | null;
+}
+
+const EvmBatchTxEditor = ({
+  setRequestObject,
+  account,
+}: EvmBatchTxEditorProps): ReactJSXElement => {
+  const [revert, setRevert] = useState<string>("true");
+  const [txs, setTxs] = useState<any[]>([{}]);
+  useEffect(() => {
+    if (account) {
+      setRequestObject({
+        method: "wallet_sendMultiCallTransaction",
+        params: [txs, revert === "true"],
+      });
+    }
+  }, [account, setRequestObject, revert, txs]);
+
+  return (
+    <>
+      <Grid templateRows="repeat(4, min-content)" gap="10px">
+        <Box fontWeight="bold">Revert</Box>
+        <RadioGroup
+          value={revert}
+          onChange={(e) => {
+            setRevert(e);
+          }}
+        >
+          <Flex gap="15px">
+            <Radio value="true">true</Radio>
+            <Radio value="false">false</Radio>
+          </Flex>
+        </RadioGroup>
+
+        <Flex>
+          <Box fontWeight="bold">Transaction</Box>
+          <IconButton
+            ml={2}
+            aria-label="Add Transaction"
+            isRound
+            icon={<AddIcon />}
+            size="xs"
+            colorScheme="blue"
+            onClick={() => {
+              setTxs((prev) => [...prev, ""]);
+            }}
+          />
+        </Flex>
+        <Flex flexDir="column" mt={2} pl={4}>
+          {txs.map((value, i) => (
+            <Box key={i}>
+              <Text fontWeight="bold" mb={2}>
+                Transaction {i + 1}
+              </Text>
+              <Flex my="5px" alignItems="center">
+                <EvmTxForm
+                  key={i}
+                  setTransactionObject={(tx) => {
+                    setTxs((prev) => {
+                      const newTxs = [...prev];
+                      newTxs[i] = tx;
+                      return newTxs;
+                    });
+                  }}
+                  account={account}
+                />
+              </Flex>
+            </Box>
+          ))}
+        </Flex>
+      </Grid>
+    </>
+  );
+};
+
+export default EvmBatchTxEditor;

src/components/EvmEditors/EvmTxForm.tsx

@@ -48,7 +48,12 @@ const EvmTxForm = ({
   }, [account]);
 
   return (
-    <Grid templateColumns="min-content 1fr" alignItems="center" gap={6}>
+    <Grid
+      templateColumns="min-content 1fr"
+      alignItems="center"
+      gap={6}
+      width="100%"
+    >
       <Box mx="10px">From:</Box>
       <Textarea
         rows={1}