176 lines
3.9 KiB
TypeScript
176 lines
3.9 KiB
TypeScript
import {
|
|
Box,
|
|
Flex,
|
|
HStack,
|
|
Text,
|
|
Heading,
|
|
Tooltip,
|
|
Td,
|
|
Collapse,
|
|
useDisclosure,
|
|
Button,
|
|
Table,
|
|
Thead,
|
|
Tr,
|
|
Th,
|
|
Tbody,
|
|
Link,
|
|
} from "@chakra-ui/react";
|
|
import {
|
|
InfoIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
DeleteIcon,
|
|
UnlockIcon,
|
|
} from "@chakra-ui/icons";
|
|
import CopyToClipboard from "./CopyToClipboard";
|
|
import { TxnDataType } from "../../types";
|
|
import { useEffect } from "react";
|
|
import { ethers } from "ethers";
|
|
|
|
export const slicedText = (txt: string) => {
|
|
return txt.length > 6
|
|
? `${txt.slice(0, 4)}...${txt.slice(txt.length - 2, txt.length)}`
|
|
: txt;
|
|
};
|
|
|
|
const TD = ({ txt }: { txt: string }) => (
|
|
<Td>
|
|
<HStack>
|
|
<Tooltip label={txt} hasArrow placement="top">
|
|
<Text>{slicedText(txt)}</Text>
|
|
</Tooltip>
|
|
<CopyToClipboard txt={txt} />
|
|
</HStack>
|
|
</Td>
|
|
);
|
|
const ValueTD = ({ txt }: { txt: string }) => (
|
|
<Td>
|
|
<HStack>
|
|
<Tooltip label={`${txt} Wei`} hasArrow placement="top">
|
|
<Text>{ethers.utils.formatEther(txt)} ETH</Text>
|
|
</Tooltip>
|
|
<CopyToClipboard txt={txt} />
|
|
</HStack>
|
|
</Td>
|
|
);
|
|
|
|
const TData = ({
|
|
calldata,
|
|
address,
|
|
networkId,
|
|
}: {
|
|
calldata: string;
|
|
address: string;
|
|
networkId: number;
|
|
}) => (
|
|
<Td>
|
|
<HStack>
|
|
<Tooltip label={calldata} hasArrow placement="top">
|
|
<Text>{slicedText(calldata)}</Text>
|
|
</Tooltip>
|
|
<CopyToClipboard txt={calldata} />
|
|
<Button title="Decode" size="sm">
|
|
<Link
|
|
href={`https://calldata.swiss-knife.xyz/decoder?calldata=${calldata}&address=${address}&chainId=${networkId}`}
|
|
isExternal
|
|
>
|
|
<UnlockIcon />
|
|
</Link>
|
|
</Button>
|
|
</HStack>
|
|
</Td>
|
|
);
|
|
|
|
interface TransactionRequestsParams {
|
|
sendTxnData: TxnDataType[];
|
|
setSendTxnData: (value: TxnDataType[]) => void;
|
|
networkId: number;
|
|
}
|
|
|
|
function TransactionRequests({
|
|
sendTxnData,
|
|
setSendTxnData,
|
|
networkId,
|
|
}: TransactionRequestsParams) {
|
|
const {
|
|
isOpen: tableIsOpen,
|
|
onOpen: tableOnOpen,
|
|
onToggle: tableOnToggle,
|
|
} = useDisclosure();
|
|
|
|
useEffect(() => {
|
|
// keep table open on load
|
|
tableOnOpen();
|
|
}, []);
|
|
|
|
return (
|
|
<Box
|
|
minW={["0", "0", "2xl", "2xl"]}
|
|
overflowX={"auto"}
|
|
mt="2rem"
|
|
pt="0.5rem"
|
|
pl="1rem"
|
|
border={"1px solid"}
|
|
borderColor={"white.800"}
|
|
rounded="lg"
|
|
>
|
|
<Flex py="2" pl="2" pr="4">
|
|
<HStack cursor={"pointer"} onClick={tableOnToggle}>
|
|
<Text fontSize={"xl"}>
|
|
{tableIsOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
|
|
</Text>
|
|
<Heading size={"md"}>eth_sendTransactions</Heading>
|
|
<Tooltip
|
|
label={
|
|
<>
|
|
<Text>
|
|
"eth_sendTransaction" requests by the dApp are shown here
|
|
(latest on top)
|
|
</Text>
|
|
</>
|
|
}
|
|
hasArrow
|
|
placement="top"
|
|
>
|
|
<Box pb="0.8rem">
|
|
<InfoIcon />
|
|
</Box>
|
|
</Tooltip>
|
|
</HStack>
|
|
<Flex flex="1" />
|
|
{sendTxnData.length > 0 && (
|
|
<Button onClick={() => setSendTxnData([])}>
|
|
<DeleteIcon />
|
|
<Text pl="0.5rem">Clear</Text>
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
<Collapse in={tableIsOpen} animateOpacity>
|
|
<Table variant="simple">
|
|
<Thead>
|
|
<Tr>
|
|
<Th>from</Th>
|
|
<Th>to</Th>
|
|
<Th>data</Th>
|
|
<Th>value</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{sendTxnData.map((d) => (
|
|
<Tr key={d.id}>
|
|
<TD txt={d.from} />
|
|
<TD txt={d.to} />
|
|
<TData calldata={d.data} address={d.to} networkId={networkId} />
|
|
<ValueTD txt={d.value} />
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
</Collapse>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default TransactionRequests;
|