Skip to content

Adding tenderly simulation #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ragingrahul wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Adding tenderly simulation #49

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9cb9315
Adding tenderly simulation
ragingrahul Jul 24, 2023
b637643
Making the asked edits
ragingrahul Jul 28, 2023
cb1ac3e
Added the tenderly call to backend
ragingrahul Jul 29, 2023
dd164e9
Changed the request url
ragingrahul Jul 29, 2023
f3625c2
Made the changes
ragingrahul Aug 2, 2023
d511ea0
Made changes 2
ragingrahul Aug 2, 2023
276ad83
Made changes 3
ragingrahul Aug 2, 2023
41f1041
yarn.lock changes and prettier
ragingrahul Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
"@rainbow-me/rainbowkit": "^0.11.0",
"@tanstack/react-query": "^4.24.10",
"axios": "^1.4.0",
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the browser native fetch API, no need to add a new library just for a POST request :)

"bignumber.js": "^9.1.1",
"buffer": "^6.0.3",
"ethers": "^5.7.2",
Expand Down
65 changes: 62 additions & 3 deletions src/features/messages/cards/TransactionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import axios from 'axios';
import { PropsWithChildren, ReactNode, useState } from 'react';

import { Spinner } from '../../../components/animations/Spinner';
Expand Down Expand Up @@ -70,7 +71,7 @@ export function DestinationTransactionCard({
{debugResult.description}
</div>
)}
<CallDataModal debugResult={debugResult} />
<CallDataModal debugResult={debugResult} chainId={chainId} />
</DeliveryStatus>
);
} else if (status === MessageStatus.Pending) {
Expand All @@ -84,7 +85,7 @@ export function DestinationTransactionCard({
</div>
)}
<Spinner classes="my-4 scale-75" />
<CallDataModal debugResult={debugResult} />
<CallDataModal debugResult={debugResult} chainId={chainId} />
</div>
</DeliveryStatus>
);
Expand Down Expand Up @@ -207,10 +208,15 @@ function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
);
}

function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
function CallDataModal({ debugResult,chainId }: { debugResult?: MessageDebugResult,chainId:ChainId }) {
const [isOpen, setIsOpen] = useState(false);
const disabled=false
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you have a var here if it never changes?

const [buttonText,setButtonText]=useState<string>("Simulate Handle Call")
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The <string> type is inferred so it's unnecessary here.

Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to Simulate call with Tenderly

if (!debugResult?.calldataDetails) return null;
const { contract, handleCalldata } = debugResult.calldataDetails;
function handleClick() {
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

event handlers (like click) should use lambda (arrow fn) syntax to be bound correctly.

setButtonText('Simulating');
Comment thread
jmrossy marked this conversation as resolved.
}
return (
<>
<button onClick={() => setIsOpen(true)} className={`mt-5 ${styles.textLink}`}>
Expand All @@ -236,11 +242,64 @@ function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
</p>
<LabelAndCodeBlock label="Recipient contract address:" value={contract} />
<LabelAndCodeBlock label="Handle function input calldata:" value={handleCalldata} />
<button onClick={async()=>{
handleClick()
await simulateCall({contract,handleCalldata,chainId})
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this line to the click handler

}}
disabled={disabled}
className='underline text-blue-400'
>
{buttonText}
</button>

</div>
</Modal>
</>
);
}
const simulateCall=async({contract,handleCalldata,chainId}:{contract:string,handleCalldata:string,chainId:ChainId})=>{
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Root-level functions should use function syntax please. (e.g. async function simulateCall)

const TENDERLY_USER=''
const TENDERLY_PROJECT=''
const TENDERLY_ACCESS_KEY=''
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you intend these to be env vars? How would a user get their tenderly key used here?


Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrap the function contents here in a try/catch and show an error message with toast.error on failure

Copy link
Copy Markdown
Author

@ragingrahul ragingrahul Aug 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't wrap this in try/catch, rather wrapped the backend call which returns failure call and checking if the call is success or failure here.

console.time('Simulation')
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you timing this?


const resp = await axios.post(
`https://api.tenderly.co/api/v1/account/${TENDERLY_USER}/project/${TENDERLY_PROJECT}/simulate`,
{
save: true,
save_if_fails: true,
simulation_type: 'full',
network_id: chainId,
from: '0xdc6bdc37b2714ee601734cf55a05625c9e512461',//can be any address, doesn't matter
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the 0 address if you just need a placeholder (ethers.constants.zeroAddress)

to: contract,
input:handleCalldata,
gas: 8000000,
gas_price: 0,
value: 0,
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll need to use the real values from the message for an accurate simulation.

},
{
headers: {
'X-Access-Key': TENDERLY_ACCESS_KEY as string,
},
}
);
console.timeEnd('Simulation');
console.log(resp.data)
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the logger utility instead of console and add a message to provide context for the data you're logging

const share = await axios.post(
`https://api.tenderly.co/api/v1/account/${TENDERLY_USER}/project/${TENDERLY_PROJECT}/simulations/${resp.data.simulation.id}/share`,
{

},
{
headers: {
'X-Access-Key': TENDERLY_ACCESS_KEY,
}
}
)
console.log(share)
window.location.assign(`https://dashboard.tenderly.co/shared/simulation/${resp.data.simulation.id}`)
Copy link
Copy Markdown
Contributor

@jmrossy jmrossy Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please open the tenderly window in a new tab

}

const helpText = {
origin: 'Info about the transaction that initiated the message placement into the outbox.',
Expand Down
79 changes: 79 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1323,6 +1323,7 @@ __metadata:
"@typescript-eslint/eslint-plugin": ^5.53.0
"@typescript-eslint/parser": ^5.53.0
autoprefixer: ^10.4.13
axios: ^1.4.0
bignumber.js: ^9.1.1
buffer: ^6.0.3
eslint: ^8.34.0
Expand Down Expand Up @@ -3997,6 +3998,13 @@ __metadata:
languageName: node
linkType: hard

"asynckit@npm:^0.4.0":
version: 0.4.0
resolution: "asynckit@npm:0.4.0"
checksum: 7b78c451df768adba04e2d02e63e2d0bf3b07adcd6e42b4cf665cb7ce899bedd344c69a1dcbce355b5f972d597b25aaa1c1742b52cffd9caccb22f348114f6be
languageName: node
linkType: hard

"atomic-sleep@npm:^1.0.0":
version: 1.0.0
resolution: "atomic-sleep@npm:1.0.0"
Expand Down Expand Up @@ -4045,6 +4053,17 @@ __metadata:
languageName: node
linkType: hard

"axios@npm:^1.4.0":
version: 1.4.0
resolution: "axios@npm:1.4.0"
dependencies:
follow-redirects: ^1.15.0
form-data: ^4.0.0
proxy-from-env: ^1.1.0
checksum: 7fb6a4313bae7f45e89d62c70a800913c303df653f19eafec88e56cea2e3821066b8409bc68be1930ecca80e861c52aa787659df0ffec6ad4d451c7816b9386b
languageName: node
linkType: hard

"axobject-query@npm:^2.2.0":
version: 2.2.0
resolution: "axobject-query@npm:2.2.0"
Expand Down Expand Up @@ -4820,6 +4839,15 @@ __metadata:
languageName: node
linkType: hard

"combined-stream@npm:^1.0.8":
version: 1.0.8
resolution: "combined-stream@npm:1.0.8"
dependencies:
delayed-stream: ~1.0.0
checksum: 49fa4aeb4916567e33ea81d088f6584749fc90c7abec76fd516bf1c5aa5c79f3584b5ba3de6b86d26ddd64bae5329c4c7479343250cfe71c75bb366eae53bb7c
languageName: node
linkType: hard

"commander@npm:^2.20.3":
version: 2.20.3
resolution: "commander@npm:2.20.3"
Expand Down Expand Up @@ -5110,6 +5138,13 @@ __metadata:
languageName: node
linkType: hard

"delayed-stream@npm:~1.0.0":
version: 1.0.0
resolution: "delayed-stream@npm:1.0.0"
checksum: 46fe6e83e2cb1d85ba50bd52803c68be9bd953282fa7096f51fc29edd5d67ff84ff753c51966061e5ba7cb5e47ef6d36a91924eddb7f3f3483b1c560f77a0020
languageName: node
linkType: hard

"delegates@npm:^1.0.0":
version: 1.0.0
resolution: "delegates@npm:1.0.0"
Expand Down Expand Up @@ -6243,6 +6278,16 @@ __metadata:
languageName: node
linkType: hard

"follow-redirects@npm:^1.15.0":
version: 1.15.2
resolution: "follow-redirects@npm:1.15.2"
peerDependenciesMeta:
debug:
optional: true
checksum: faa66059b66358ba65c234c2f2a37fcec029dc22775f35d9ad6abac56003268baf41e55f9ee645957b32c7d9f62baf1f0b906e68267276f54ec4b4c597c2b190
languageName: node
linkType: hard

"for-each@npm:^0.3.3":
version: 0.3.3
resolution: "for-each@npm:0.3.3"
Expand All @@ -6252,6 +6297,17 @@ __metadata:
languageName: node
linkType: hard

"form-data@npm:^4.0.0":
version: 4.0.0
resolution: "form-data@npm:4.0.0"
dependencies:
asynckit: ^0.4.0
combined-stream: ^1.0.8
mime-types: ^2.1.12
checksum: 01135bf8675f9d5c61ff18e2e2932f719ca4de964e3be90ef4c36aacfc7b9cb2fceb5eca0b7e0190e3383fe51c5b37f4cb80b62ca06a99aaabfcfd6ac7c9328c
languageName: node
linkType: hard

"formik@npm:^2.2.9":
version: 2.2.9
resolution: "formik@npm:2.2.9"
Expand Down Expand Up @@ -8176,6 +8232,22 @@ __metadata:
languageName: node
linkType: hard

"mime-db@npm:1.52.0":
version: 1.52.0
resolution: "mime-db@npm:1.52.0"
checksum: 0d99a03585f8b39d68182803b12ac601d9c01abfa28ec56204fa330bc9f3d1c5e14beb049bafadb3dbdf646dfb94b87e24d4ec7b31b7279ef906a8ea9b6a513f
languageName: node
linkType: hard

"mime-types@npm:^2.1.12":
version: 2.1.35
resolution: "mime-types@npm:2.1.35"
dependencies:
mime-db: 1.52.0
checksum: 89a5b7f1def9f3af5dad6496c5ed50191ae4331cc5389d7c521c8ad28d5fdad2d06fd81baf38fed813dc4e46bb55c8145bb0ff406330818c9cf712fb2e9b3836
languageName: node
linkType: hard

"mimic-fn@npm:^2.1.0":
version: 2.1.0
resolution: "mimic-fn@npm:2.1.0"
Expand Down Expand Up @@ -9237,6 +9309,13 @@ __metadata:
languageName: node
linkType: hard

"proxy-from-env@npm:^1.1.0":
version: 1.1.0
resolution: "proxy-from-env@npm:1.1.0"
checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4
languageName: node
linkType: hard

"punycode@npm:^2.1.0":
version: 2.1.1
resolution: "punycode@npm:2.1.1"
Expand Down