From a7f45f6c28bfc9775ee44dfcf649ba27d26785b9 Mon Sep 17 00:00:00 2001
From: Calvin Chang <q20274982@gmail.com>
Date: Fri, 22 Dec 2023 10:56:24 +0800
Subject: [PATCH] feat: add BatchTxEditor

---
 src/components/EvmEditor.tsx                  |  8 ++
 .../EvmEditors/EvmBatchTxEditor.tsx           | 95 +++++++++++++++++++
 src/components/EvmEditors/EvmTxForm.tsx       |  7 +-
 3 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EvmEditors/EvmBatchTxEditor.tsx

diff --git a/src/components/EvmEditor.tsx b/src/components/EvmEditor.tsx
index d7c0f71..bbe9c51 100644
--- a/src/components/EvmEditor.tsx
+++ b/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";
@@ -233,6 +234,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>
diff --git a/src/components/EvmEditors/EvmBatchTxEditor.tsx b/src/components/EvmEditors/EvmBatchTxEditor.tsx
new file mode 100644
index 0000000..3fa6c48
--- /dev/null
+++ b/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;
diff --git a/src/components/EvmEditors/EvmTxForm.tsx b/src/components/EvmEditors/EvmTxForm.tsx
index 6eab8ca..9260169 100644
--- a/src/components/EvmEditors/EvmTxForm.tsx
+++ b/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}