diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx
index e7f39bc..0ea77d3 100644
--- a/src/components/Body/index.tsx
+++ b/src/components/Body/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import {
Container,
InputGroup,
@@ -27,19 +27,63 @@ import {
HStack,
chakra,
ListItem,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ Heading,
+ Collapse,
} from "@chakra-ui/react";
-import { SettingsIcon, InfoIcon } from "@chakra-ui/icons";
+import {
+ SettingsIcon,
+ InfoIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+ CopyIcon,
+ DeleteIcon,
+} from "@chakra-ui/icons";
import WalletConnect from "@walletconnect/client";
import { IClientMeta } from "@walletconnect/types";
import { ethers } from "ethers";
import axios from "axios";
import networkInfo from "./networkInfo";
+const slicedText = (txt: string) => {
+ return txt.length > 6
+ ? `${txt.slice(0, 4)}...${txt.slice(txt.length - 2, txt.length)}`
+ : txt;
+};
+
+const CopyToClipboard = ({ txt }: { txt: string }) => (
+
+);
+
+const TD = ({ txt }: { txt: string }) => (
+
+
+
+ {slicedText(txt)}
+
+
+
+ |
+);
+
function Body() {
const { colorMode } = useColorMode();
const bgColor = { light: "white", dark: "gray.700" };
const toast = useToast();
const { onOpen, onClose, isOpen } = useDisclosure();
+ const { isOpen: tableIsOpen, onToggle: tableOnToggle } = useDisclosure();
const [provider, setProvider] = useState();
const [showAddress, setShowAddress] = useState(""); // gets displayed in input. ENS name remains as it is
@@ -53,6 +97,15 @@ function Body() {
const [loading, setLoading] = useState(false);
const [tenderlyForkId, setTenderlyForkId] = useState("");
+ const [sendTxnData, setSendTxnData] = useState<
+ {
+ id: number;
+ from: string;
+ to: string;
+ data: string;
+ value: string;
+ }[]
+ >([]);
useEffect(() => {
const { session, _showAddress } = getCachedSession();
@@ -178,7 +231,7 @@ function Body() {
console.error(err);
toast({
title: "Couldn't Connect",
- description: "Refresh DApp and Connect again",
+ description: "Refresh dApp and Connect again",
status: "error",
isClosable: true,
duration: 2000,
@@ -220,35 +273,52 @@ function Body() {
connector.on("call_request", async (error, payload) => {
console.log({ payload });
- if (
- payload.method === "eth_sendTransaction" &&
- tenderlyForkId.length > 0
- ) {
- const { data: res } = await axios.post(
- "https://rpc.tenderly.co/fork/" + tenderlyForkId,
- {
- jsonrpc: "2.0",
+ if (payload.method === "eth_sendTransaction") {
+ setSendTxnData((data) => {
+ const newTxn = {
id: payload.id,
- method: payload.method,
- params: payload.params,
+ from: payload.params[0].from,
+ to: payload.params[0].to,
+ data: payload.params[0].data,
+ value: payload.params[0].value
+ ? parseInt(payload.params[0].value, 16).toString()
+ : "0",
+ };
+
+ if (data.some((d) => d.id === newTxn.id)) {
+ return data;
+ } else {
+ return [newTxn, ...data];
}
- );
- console.log({ res });
-
- // Approve Call Request
- connector.approveRequest({
- id: res.id,
- result: res.result,
});
- toast({
- title: "Txn successful",
- description: `Hash: ${res.result}`,
- status: "success",
- position: "bottom-right",
- duration: null,
- isClosable: true,
- });
+ if (tenderlyForkId.length > 0) {
+ const { data: res } = await axios.post(
+ "https://rpc.tenderly.co/fork/" + tenderlyForkId,
+ {
+ jsonrpc: "2.0",
+ id: payload.id,
+ method: payload.method,
+ params: payload.params,
+ }
+ );
+ console.log({ res });
+
+ // Approve Call Request
+ connector.approveRequest({
+ id: res.id,
+ result: res.result,
+ });
+
+ toast({
+ title: "Txn successful",
+ description: `Hash: ${res.result}`,
+ status: "success",
+ position: "bottom-right",
+ duration: null,
+ isClosable: true,
+ });
+ }
}
// if (error) {
@@ -439,7 +509,7 @@ function Body() {
- Visit any DApp and select WalletConnect.
+ Visit any dApp and select WalletConnect.
Click "Copy to Clipboard" beneath the QR code, and paste it
here.
@@ -536,6 +606,72 @@ function Body() {
>
)}
+
+
+
+
+
+ {tableIsOpen ? : }
+
+ eth_sendTransactions
+
+
+ "eth_sendTransaction" requests by the dApp are shown here
+ (latest on top)
+
+ >
+ }
+ hasArrow
+ placement="top"
+ >
+
+
+
+
+
+
+ {sendTxnData.length > 0 && (
+
+ )}
+
+
+
+
+
+ | from |
+ to |
+ data |
+ value |
+
+
+
+ {sendTxnData.map((d) => (
+
+ |
+ |
+ |
+ |
+
+ ))}
+
+
+
+
+
);
}