Skip to content

Commit

Permalink
feat: add batchTransaction Transfer template button
Browse files Browse the repository at this point in the history
  • Loading branch information
sanyu1225 committed Feb 4, 2024
1 parent fe07952 commit 042e135
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 38 deletions.
99 changes: 63 additions & 36 deletions src/components/EvmEditors/EvmBatchTxEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -25,14 +26,13 @@ const RevertOptionMap: Record<string, any> = {
true: true,
unset: undefined,
};
const emptyTx = {};

const EvmBatchTxEditor = ({
setRequestObject,
account,
}: EvmBatchTxEditorProps): ReactJSXElement => {
const [revert, setRevert] = useState<string>("false");
const [txs, setTxs] = useState<any[]>([emptyTx]);
const [txs, setTxs] = useState<any[]>();

useEffect(() => {
if (account) {
Expand All @@ -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 (
<>
<Grid templateRows="repeat(4, min-content)" gap="10px">
Expand All @@ -67,42 +87,49 @@ const EvmBatchTxEditor = ({
</Flex>
</RadioGroup>

<Flex>
<Flex alignItems="center">
<Box fontWeight="bold">Transaction</Box>
<IconButton
ml={2}
aria-label="Add Transaction"
isRound
icon={<AddIcon />}
size="xs"
colorScheme="blue"
onClick={() => {
setTxs((prev) => [...prev, emptyTx]);
}}
/>
<Button ml="10px" onClick={addTransfer}>
Transfer
</Button>
</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={(updatedTxs) => {
if (updatedTxs)
setTxs((prev) => {
const newTxs = [...prev];
newTxs[i] = updatedTxs[0];
return newTxs;
});
}}
account={account}
/>
</Flex>
</Box>
))}
{Array.isArray(txs) &&
txs?.length > 0 &&
txs?.map((value, i: number) => (
<Box key={i}>
<Flex alignItems="center">
<Text fontWeight="bold" mb={2}>
Transaction {i + 1}
</Text>
<IconButton
ml={2}
aria-label="Delete Arg"
isRound
icon={<CloseIcon />}
size="xs"
colorScheme="red"
onClick={() => removeTransfer(i)}
/>
</Flex>
<Flex my="5px" alignItems="center">
<EvmTxForm
key={i}
setTransactionObject={(updatedTxs) => {
if (updatedTxs)
setTxs((prev) => {
const newTxs = [...(prev || [])];
newTxs[i] = updatedTxs[0];
return newTxs;
});
}}
isCustom={true}
account={account}
customParams={value}
/>
</Flex>
</Box>
))}
</Flex>
</Grid>
</>
Expand Down
16 changes: 14 additions & 2 deletions src/components/EvmEditors/EvmTxForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<string>(account || "");
const [toString, setTo] = useState<string>("");
Expand Down Expand Up @@ -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 (
<Grid
Expand Down
1 change: 1 addition & 0 deletions src/services/evm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ const bloctoSDK = new BloctoSDK({
rpc: isMainnet
? `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
: "https://rpc.ankr.com/eth_goerli",
walletServer: process.env.REACT_APP_WALLET_SERVER,
},
appId: process.env.REACT_APP_DAPP_ID,
}) as ExtendedEvmBloctoSDK;
Expand Down

0 comments on commit 042e135

Please sign in to comment.