feat: move to nextjs

components/Body/TransactionRequests.tsx

@@ -0,0 +1,175 @@
+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;