diff --git a/package.json b/package.json index 1dfc822..7d6c261 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@walletconnect/client": "^1.6.2", + "axios": "^0.24.0", "ethereum-checksum-address": "^0.0.6", "ethers": "^5.4.5", "framer-motion": "^4", diff --git a/src/components/Body/index.js b/src/components/Body/index.js index 4588174..6879a8f 100644 --- a/src/components/Body/index.js +++ b/src/components/Body/index.js @@ -17,15 +17,28 @@ import { useToast, CircularProgress, Center, + Spacer, + Flex, + useDisclosure, + Popover, + PopoverTrigger, + PopoverContent, + Tooltip, + HStack, + chakra, + ListItem, } from "@chakra-ui/react"; +import { SettingsIcon, InfoIcon } from "@chakra-ui/icons"; import WalletConnect from "@walletconnect/client"; import { ethers } from "ethers"; +import axios from "axios"; import networkInfo from "./networkInfo"; function Body() { const { colorMode } = useColorMode(); const bgColor = { light: "white", dark: "gray.700" }; const toast = useToast(); + const { onOpen, onClose, isOpen } = useDisclosure(); const [provider, setProvider] = useState(); const [showAddress, setShowAddress] = useState(""); // gets displayed in input. ENS name remains as it is @@ -38,6 +51,8 @@ function Body() { const [isConnected, setIsConnected] = useState(false); const [loading, setLoading] = useState(false); + const [tenderlyForkId, setTenderlyForkId] = useState(""); + useEffect(() => { const session = getCachedSession(); if (session) { @@ -78,6 +93,15 @@ function Body() { // eslint-disable-next-line }, [connector]); + useEffect(() => { + const storedTenderlyForkId = localStorage.getItem("tenderlyForkId"); + setTenderlyForkId(storedTenderlyForkId ? storedTenderlyForkId : ""); + }, []); + + useEffect(() => { + localStorage.setItem("tenderlyForkId", tenderlyForkId); + }, [tenderlyForkId]); + const resolveAndValidateAddress = async () => { let isValid; let _address = address; @@ -187,8 +211,38 @@ function Body() { }); connector.on("call_request", async (error, payload) => { - console.log("EVENT", "call_request", "method", payload.method); - console.log("EVENT", "call_request", "params", payload.params); + 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", + 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) { // throw error; @@ -281,6 +335,63 @@ function Body() { return ( + + + + + + + + + + + + (optional) Tenderly Fork Id: + + Simulate sending transactions on forked node. + + + Create a fork on Tenderly and grab the id from it's URL. + + + } + hasArrow + placement="top" + > + + + + { + setTenderlyForkId(e.target.value); + }} + /> + + + + Enter Address or ENS to Impersonate @@ -308,7 +419,26 @@ function Body() { - WalletConnect URI + + WalletConnect URI + + Visit any DApp and select WalletConnect. + + Click "Copy to Clipboard" beneath the QR code, and paste it + here. + + + } + hasArrow + placement="top" + > + + + + +