diff --git a/src/components/EvmEditors/EvmBatchTxEditor.tsx b/src/components/EvmEditors/EvmBatchTxEditor.tsx index e2f76b9..cbdc50c 100644 --- a/src/components/EvmEditors/EvmBatchTxEditor.tsx +++ b/src/components/EvmEditors/EvmBatchTxEditor.tsx @@ -7,8 +7,9 @@ import { IconButton, Radio, RadioGroup, + Button, } from "@chakra-ui/react"; -import { AddIcon } from "@chakra-ui/icons"; +import { CloseIcon } from "@chakra-ui/icons"; import { ReactJSXElement } from "@emotion/react/types/jsx-namespace"; import type { EthereumTypes } from "@blocto/sdk"; import EvmTxForm from "./EvmTxForm"; @@ -25,14 +26,13 @@ const RevertOptionMap: Record = { true: true, unset: undefined, }; -const emptyTx = {}; const EvmBatchTxEditor = ({ setRequestObject, account, }: EvmBatchTxEditorProps): ReactJSXElement => { const [revert, setRevert] = useState("false"); - const [txs, setTxs] = useState([emptyTx]); + const [txs, setTxs] = useState(); useEffect(() => { if (account) { @@ -48,6 +48,26 @@ const EvmBatchTxEditor = ({ } }, [account, setRequestObject, revert, txs]); + const addTransfer = () => { + const obj = { + value: "0x1", + to: "0x85fD692D2a075908079261F5E351e7fE0267dB02", + from: account, + }; + setTxs((state) => { + return [...(state || []), obj]; + }); + }; + + const removeTransfer = (index: number) => { + setTxs((state) => { + if (Array.isArray(state) && state.length === 1) { + return []; + } + const newParam = [...(state || [])]; + return newParam.splice(index, 1); + }); + }; return ( <> @@ -67,42 +87,49 @@ const EvmBatchTxEditor = ({ - + Transaction - } - size="xs" - colorScheme="blue" - onClick={() => { - setTxs((prev) => [...prev, emptyTx]); - }} - /> + - {txs.map((value, i) => ( - - - Transaction {i + 1} - - - { - if (updatedTxs) - setTxs((prev) => { - const newTxs = [...prev]; - newTxs[i] = updatedTxs[0]; - return newTxs; - }); - }} - account={account} - /> - - - ))} + {Array.isArray(txs) && + txs?.length > 0 && + txs?.map((value, i: number) => ( + + + + Transaction {i + 1} + + } + size="xs" + colorScheme="red" + onClick={() => removeTransfer(i)} + /> + + + { + if (updatedTxs) + setTxs((prev) => { + const newTxs = [...(prev || [])]; + newTxs[i] = updatedTxs[0]; + return newTxs; + }); + }} + isCustom={true} + account={account} + customParams={value} + /> + + + ))} diff --git a/src/components/EvmEditors/EvmTxForm.tsx b/src/components/EvmEditors/EvmTxForm.tsx index 5ae0cf3..a8eaf2f 100644 --- a/src/components/EvmEditors/EvmTxForm.tsx +++ b/src/components/EvmEditors/EvmTxForm.tsx @@ -9,11 +9,15 @@ interface EvmTxFormProps { EthereumTypes.EIP1193RequestPayload["params"] | undefined >; account: string | null; + isCustom?: boolean; + customParams?: any; } const EvmTxForm = ({ setTransactionObject, account, + isCustom = false, + customParams, }: EvmTxFormProps): ReactJSXElement => { const [fromString, setFrom] = useState(account || ""); const [toString, setTo] = useState(""); @@ -48,8 +52,16 @@ const EvmTxForm = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [account, fromString, toString, dataString, valueString]); useEffect(() => { - setFrom(account || ""); - }, [account]); + if (!isCustom) { + setFrom(account || ""); + } else { + setFrom(customParams.from || ""); + setTo(customParams.to || ""); + setValue(customParams.value || ""); + setData(customParams.data || ""); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [account, isCustom]); return (