allow sending txns via tenderly fork

This commit is contained in:
CodinMaster
2022-01-13 04:49:46 +05:30
parent 348d9533d6
commit 12b9249e03
3 changed files with 146 additions and 3 deletions

View File

@@ -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",

View File

@@ -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 (
<Container my="16" minW={["0", "0", "2xl", "2xl"]}>
<Flex>
<Spacer flex="1" />
<Popover
placement="bottom-start"
isOpen={isOpen}
onOpen={onOpen}
onClose={onClose}
>
<PopoverTrigger>
<Box>
<Button>
<SettingsIcon
transition="900ms rotate ease-in-out"
transform={isOpen ? "rotate(33deg)" : "rotate(0deg)"}
/>
</Button>
</Box>
</PopoverTrigger>
<PopoverContent
border={0}
boxShadow="xl"
rounded="xl"
overflowY="auto"
>
<Box px="1rem" py="1rem">
<HStack>
<Text>(optional) Tenderly Fork Id:</Text>
<Tooltip
label={
<>
<Text>Simulate sending transactions on forked node.</Text>
<chakra.hr bg="gray.400" />
<ListItem>
Create a fork on Tenderly and grab the id from it's URL.
</ListItem>
</>
}
hasArrow
placement="top"
>
<InfoIcon />
</Tooltip>
</HStack>
<Input
mt="0.5rem"
aria-label="fork-rpc"
placeholder="xxxx-xxxx-xxxx-xxxx"
autoComplete="off"
value={tenderlyForkId}
onChange={(e) => {
setTenderlyForkId(e.target.value);
}}
/>
</Box>
</PopoverContent>
</Popover>
</Flex>
<FormControl>
<FormLabel>Enter Address or ENS to Impersonate</FormLabel>
<InputGroup>
@@ -308,7 +419,26 @@ function Body() {
</InputGroup>
</FormControl>
<FormControl my={4}>
<FormLabel>WalletConnect URI</FormLabel>
<HStack>
<FormLabel>WalletConnect URI</FormLabel>
<Tooltip
label={
<>
<Text>Visit any DApp and select WalletConnect.</Text>
<Text>
Click "Copy to Clipboard" beneath the QR code, and paste it
here.
</Text>
</>
}
hasArrow
placement="top"
>
<Box pb="0.8rem">
<InfoIcon />
</Box>
</Tooltip>
</HStack>
<Input
placeholder="wc:xyz123"
aria-label="uri"

View File

@@ -3738,6 +3738,13 @@ axe-core@^4.0.2:
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
axios@^0.24.0:
version "0.24.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
dependencies:
follow-redirects "^1.14.4"
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -6389,6 +6396,11 @@ follow-redirects@^1.0.0:
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
follow-redirects@^1.14.4:
version "1.14.7"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"