refactor: extract evmTxForm

blocto · Jan 9, 2024 · c3b5d00 · c3b5d00
1 parent 3018efb
commit c3b5d00
Show file tree

Hide file tree

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

diff --git a/src/components/EvmEditors/EvmSendEditor.tsx b/src/components/EvmEditors/EvmSendEditor.tsx
@@ -1,84 +1,27 @@
-import React, { useEffect, useState, Dispatch } from "react";
-import { Box, Textarea, Grid } from "@chakra-ui/react";
+import React, { Dispatch, useCallback } from "react";
 import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
 import type { EthereumTypes } from "@blocto/sdk";
-import { web3 } from "../../services/evm";
+import EvmTxForm from "./EvmTxForm";
 
 const EvmSendEditor = ({
   setRequestObject,
   account,
 }: {
-  setRequestObject: Dispatch<
-    EthereumTypes.EIP1193RequestPayload["params"] | undefined
-  >;
+  setRequestObject: Dispatch<EthereumTypes.EIP1193RequestPayload | undefined>;
   account: string | null;
 }): ReactJSXElement => {
-  const [fromString, setFrom] = useState<string>(account || "");
-  const [toString, setTo] = useState<string>("");
-  const [valueString, setValue] = useState<string>("");
-  const [dataString, setData] = useState<string>("");
-  useEffect(() => {
-    if (account) {
-      const sendObj: {
-        from: string;
-        to?: string;
-        value?: string;
-        data?: string;
-      } = {
-        from: fromString,
-      };
-      if (toString) {
-        sendObj.to = toString;
-      }
-      if (valueString) {
-        sendObj.value = web3.utils.toHex(valueString);
-      }
-      if (dataString) {
-        sendObj.data = dataString;
-      }
-      setRequestObject([sendObj]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account, fromString, toString, dataString, valueString]);
-  useEffect(() => {
-    setFrom(account || "");
-  }, [account]);
+  const setTransactionObject = useCallback(
+    (params: EthereumTypes.EIP1193RequestPayload["params"] | undefined) => {
+      setRequestObject({
+        method: "eth_sendTransaction",
+        params,
+      });
+    },
+    [setRequestObject]
+  );
 
   return (
-    <Grid templateColumns="min-content 1fr" alignItems="center" gap={6}>
-      <Box mx="10px">From:</Box>
-      <Textarea
-        rows={1}
-        value={fromString}
-        onChange={(e) => {
-          setFrom(e.target.value);
-        }}
-      />
-      <Box mx="10px">To:</Box>
-      <Textarea
-        rows={1}
-        value={toString}
-        onChange={(e) => {
-          setTo(e.target.value);
-        }}
-      />
-      <Box mx="10px">Value:</Box>
-      <Textarea
-        rows={1}
-        value={valueString}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-      <Box mx="10px">Data:</Box>
-      <Textarea
-        rows={3}
-        value={dataString}
-        onChange={(e) => {
-          setData(e.target.value);
-        }}
-      />
-    </Grid>
+    <EvmTxForm setTransactionObject={setTransactionObject} account={account} />
   );
 };
 

diff --git a/src/components/EvmEditors/EvmTxForm.tsx b/src/components/EvmEditors/EvmTxForm.tsx
@@ -0,0 +1,88 @@
+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";
+import { web3 } from "../../services/evm";
+
+interface EvmTxFormProps {
+  setTransactionObject: Dispatch<
+    EthereumTypes.EIP1193RequestPayload["params"] | undefined
+  >;
+  account: string | null;
+}
+
+const EvmTxForm = ({
+  setTransactionObject,
+  account,
+}: EvmTxFormProps): ReactJSXElement => {
+  const [fromString, setFrom] = useState<string>(account || "");
+  const [toString, setTo] = useState<string>("");
+  const [valueString, setValue] = useState<string>("");
+  const [dataString, setData] = useState<string>("");
+
+  useEffect(() => {
+    if (account) {
+      const sendObj: {
+        from: string;
+        to?: string;
+        value?: string;
+        data?: string;
+      } = {
+        from: fromString,
+      };
+      if (toString) {
+        sendObj.to = toString;
+      }
+      if (valueString) {
+        sendObj.value = web3.utils.toHex(valueString);
+      }
+      if (dataString) {
+        sendObj.data = dataString;
+      }
+      setTransactionObject([sendObj]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [account, fromString, toString, dataString, valueString]);
+  useEffect(() => {
+    setFrom(account || "");
+  }, [account]);
+
+  return (
+    <Grid templateColumns="min-content 1fr" alignItems="center" gap={6}>
+      <Box mx="10px">From:</Box>
+      <Textarea
+        rows={1}
+        value={fromString}
+        onChange={(e) => {
+          setFrom(e.target.value);
+        }}
+      />
+      <Box mx="10px">To:</Box>
+      <Textarea
+        rows={1}
+        value={toString}
+        onChange={(e) => {
+          setTo(e.target.value);
+        }}
+      />
+      <Box mx="10px">Value:</Box>
+      <Textarea
+        rows={1}
+        value={valueString}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+      <Box mx="10px">Data:</Box>
+      <Textarea
+        rows={3}
+        value={dataString}
+        onChange={(e) => {
+          setData(e.target.value);
+        }}
+      />
+    </Grid>
+  );
+};
+
+export default EvmTxForm;
diff --git a/src/components/EvmEditors/EvmUserOpEditor.tsx b/src/components/EvmEditors/EvmUserOpEditor.tsx
@@ -22,10 +22,10 @@ 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";
 import EvmContractEditor from "./EvmContractEditor";
+import EvmSendEditor from "./EvmSendEditor";
 
 const MenuGroups = [{ title: "Request", templates: UserOperationTemplate }];
 const ABI: AbiItem = {
@@ -124,12 +124,7 @@ const EvmUserOpEditor = ({
       {templateId === "sendTransaction" ? (
         <Box my="20px">
           <EvmSendEditor
-            setRequestObject={(params = []) =>
-              setTransactionToCallData({
-                method: "eth_sendTransaction",
-                params,
-              })
-            }
+            setRequestObject={setTransactionToCallData}
             account={account}
           />
         </Box>