Adding tenderly simulation

src/consts/config.ts

@@ -1,6 +1,9 @@
 const isDevMode = process?.env?.NODE_ENV === 'development';
 const version = process?.env?.NEXT_PUBLIC_VERSION ?? null;
 const explorerApiKeys = JSON.parse(process?.env?.EXPLORER_API_KEYS || '{}');
+export const TENDERLY_USER = process?.env?.TENDERLY_USER;
+export const TENDERLY_PROJECT = process?.env?.TENDERLY_PROJECT;
+export const TENDERLY_ACCESS_KEY = process?.env?.TENDERLY_ACCESS_KEY;
 
 interface Config {
   debug: boolean;

src/features/messages/MessageDetails.tsx

@@ -119,6 +119,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
           isStatusFetching={isDeliveryStatusFetching}
           isPiMsg={message.isPiMsg}
           blur={blur}
+          message={message}
         />
         {!message.isPiMsg && <TimelineCard message={message} blur={blur} />}
         <ContentDetailsCard message={message} blur={blur} />

src/features/messages/cards/GasDetailsCard.tsx

@@ -1,5 +1,4 @@
 import BigNumber from 'bignumber.js';
-import { utils } from 'ethers';
 import Image from 'next/image';
 import { useMemo, useState } from 'react';
 
@@ -10,10 +9,10 @@ import { links } from '../../../consts/links';
 import FuelPump from '../../../images/icons/fuel-pump.svg';
 import { Message } from '../../../types';
 import { BigNumberMax, fromWei } from '../../../utils/amount';
-import { logger } from '../../../utils/logger';
 import { toTitleCase } from '../../../utils/string';
 import { GasPayment } from '../../debugger/types';
 import { useMultiProvider } from '../../providers/multiProvider';
+import { computeAvgGasPrice } from '../utils';
 
 import { KeyValueRow } from './KeyValueRow';
 
@@ -165,21 +164,6 @@ function IgpPaymentsTable({ payments }: { payments: Array<GasPayment & { contrac
   );
 }
 
-function computeAvgGasPrice(unit: string, gasAmount?: BigNumber.Value, payment?: BigNumber.Value) {
-  try {
-    if (!gasAmount || !payment) return null;
-    const gasBN = new BigNumber(gasAmount);
-    const paymentBN = new BigNumber(payment);
-    if (gasBN.isZero() || paymentBN.isZero()) return null;
-    const wei = paymentBN.div(gasAmount).toFixed(0);
-    const formatted = utils.formatUnits(wei, unit).toString();
-    return { wei, formatted };
-  } catch (error) {
-    logger.debug('Error computing avg gas price', error);
-    return null;
-  }
-}
-
 const style = {
   th: 'p-1 md:p-2 text-sm text-gray-500 font-normal text-left border border-gray-200 rounded',
   td: 'p-1 md:p-2 text-xs md:text-sm text-gray-700 text-left border border-gray-200 rounded',

src/features/messages/cards/TransactionCard.tsx

@@ -1,17 +1,20 @@
+import { BigNumber as BigNumEth } from 'ethers';
 import { PropsWithChildren, ReactNode, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { Spinner } from '../../../components/animations/Spinner';
 import { ChainLogo } from '../../../components/icons/ChainLogo';
 import { HelpIcon } from '../../../components/icons/HelpIcon';
 import { Card } from '../../../components/layout/Card';
 import { Modal } from '../../../components/layout/Modal';
 import { links } from '../../../consts/links';
-import { MessageStatus, MessageTx } from '../../../types';
+import { Message, MessageStatus, MessageTx, SimulateBody } from '../../../types';
 import { getDateTimeString, getHumanReadableTimeString } from '../../../utils/time';
 import { getChainDisplayName } from '../../chains/utils';
 import { debugStatusToDesc } from '../../debugger/strings';
 import { MessageDebugResult } from '../../debugger/types';
 import { useMultiProvider } from '../../providers/multiProvider';
+import { computeAvgGasPrice } from '../utils';
 
 import { LabelAndCodeBlock } from './CodeBlock';
 import { KeyValueRow } from './KeyValueRow';
@@ -40,6 +43,7 @@ export function DestinationTransactionCard({
   isStatusFetching,
   isPiMsg,
   blur,
+  message,
 }: {
   chainId: ChainId;
   status: MessageStatus;
@@ -48,6 +52,7 @@ export function DestinationTransactionCard({
   isStatusFetching: boolean;
   isPiMsg?: boolean;
   blur: boolean;
+  message: Message;
 }) {
   let content: ReactNode;
   if (transaction) {
@@ -70,7 +75,7 @@ export function DestinationTransactionCard({
             {debugResult.description}
           </div>
         )}
-        <CallDataModal debugResult={debugResult} />
+        <CallDataModal debugResult={debugResult} chainId={chainId} message={message} />
       </DeliveryStatus>
     );
   } else if (status === MessageStatus.Pending) {
@@ -84,7 +89,7 @@ export function DestinationTransactionCard({
             </div>
           )}
           <Spinner classes="my-4 scale-75" />
-          <CallDataModal debugResult={debugResult} />
+          <CallDataModal debugResult={debugResult} chainId={chainId} message={message} />
         </div>
       </DeliveryStatus>
     );
@@ -207,10 +212,27 @@ function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
   );
 }
 
-function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
+function CallDataModal({
+  debugResult,
+  chainId,
+  message,
+}: {
+  debugResult?: MessageDebugResult;
+  chainId: ChainId;
+  message: Message;
+}) {
   const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [buttonText, setButtonText] = useState('Simulate call with Tenderly');
   if (!debugResult?.calldataDetails) return null;
   const { contract, handleCalldata } = debugResult.calldataDetails;
+  const handleClick = async () => {
+    setButtonText('Simulating');
+    setLoading(true);
+    await simulateCall({ contract, handleCalldata, chainId, message });
+    setButtonText('Simulate call with Tenderly');
+    setLoading(false); //using !loading is not setting the states properly and the state stays true
+  };
   return (
     <>
       <button onClick={() => setIsOpen(true)} className={`mt-5 ${styles.textLink}`}>
@@ -236,11 +258,51 @@ function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
           </p>
           <LabelAndCodeBlock label="Recipient contract address:" value={contract} />
           <LabelAndCodeBlock label="Handle function input calldata:" value={handleCalldata} />
+          <button onClick={handleClick} disabled={loading} className="underline text-blue-400">
+            {buttonText}
+          </button>
+          {loading && <Spinner classes="mt-4 scale-75 self-center" />}
         </div>
       </Modal>
     </>
   );
 }
+async function simulateCall({
+  contract,
+  handleCalldata,
+  chainId,
+  message,
+}: {
+  contract: string;
+  handleCalldata: string;
+  chainId: ChainId;
+  message: Message;
+}) {
+  const gasPrice = computeAvgGasPrice('wei', message.totalGasAmount, message.totalPayment);
+  const data: SimulateBody = {
+    save: true,
+    save_if_fails: true,
+    simulation_type: 'full',
+    network_id: chainId,
+    from: '0x0000000000000000000000000000000000000000', //can be any address, doesn't matter
+    to: contract,
+    input: handleCalldata,
+    gas: BigNumEth.from(message.totalGasAmount).toNumber(),
+    gas_price: Number(gasPrice?.wei),
+    value: 0,
+  };
+  const resp = await fetch(`/api/simulation`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+  const respMessage = await resp.json();
+  if (respMessage.success === true) {
+    const simulationId = respMessage.data;
+    window.open(`https://dashboard.tenderly.co/shared/simulation/${simulationId}`);
+  } else {
+    toast.error(respMessage.error);
+  }
+}
 
 const helpText = {
   origin: 'Info about the transaction that initiated the message placement into the outbox.',

src/features/messages/utils.ts

@@ -1,5 +1,9 @@
+import { BigNumber } from 'bignumber.js';
+import { utils } from 'ethers/lib/ethers';
+
 import { Message, MessageStub } from '../../types';
 import { fromBase64, toBase64 } from '../../utils/base64';
+import { logger } from '../../utils/logger';
 
 export function serializeMessage(msg: MessageStub | Message): string | undefined {
   return toBase64(msg);
@@ -8,3 +12,22 @@ export function serializeMessage(msg: MessageStub | Message): string | undefined
 export function deserializeMessage<M extends MessageStub>(data: string | string[]): M | undefined {
   return fromBase64<M>(data);
 }
+
+export function computeAvgGasPrice(
+  unit: string,
+  gasAmount?: BigNumber.Value,
+  payment?: BigNumber.Value,
+) {
+  try {
+    if (!gasAmount || !payment) return null;
+    const gasBN = new BigNumber(gasAmount);
+    const paymentBN = new BigNumber(payment);
+    if (gasBN.isZero() || paymentBN.isZero()) return null;
+    const wei = paymentBN.div(gasAmount).toFixed(0);
+    const formatted = utils.formatUnits(wei, unit).toString();
+    return { wei, formatted };
+  } catch (error) {
+    logger.debug('Error computing avg gas price', error);
+    return null;
+  }
+}

src/pages/api/simulation.ts

@@ -0,0 +1,35 @@
+import { TENDERLY_ACCESS_KEY, TENDERLY_PROJECT, TENDERLY_USER } from '../../consts/config';
+import { failureResult, successResult } from '../../features/api/utils';
+
+export default async function handler(req, res) {
+  const data = req.body;
+  if (!TENDERLY_ACCESS_KEY || !TENDERLY_PROJECT || !TENDERLY_USER) {
+    console.log('ENV not defined');
+    res.json(failureResult('Explorer Issues'));
+  }
+  try {
+    const resp = await fetch(
+      `https://api.tenderly.co/api/v1/account/${TENDERLY_USER}/project/${TENDERLY_PROJECT}/simulate`,
+      {
+        method: 'POST',
+        body: data,
+        headers: {
+          'X-Access-Key': TENDERLY_ACCESS_KEY as string,
+        },
+      },
+    );
+    const simulationId = await resp.json().then((data) => data.simulation.id);
+    await fetch(
+      `https://api.tenderly.co/api/v1/account/${TENDERLY_USER}/project/${TENDERLY_PROJECT}/simulations/${simulationId}/share`,
+      {
+        method: 'POST',
+        headers: {
+          'X-Access-Key': TENDERLY_ACCESS_KEY as string,
+        },
+      },
+    );
+    res.json(successResult(simulationId));
+  } catch (error) {
+    res.json(failureResult('Error preparing Tenderly simulation'));
+  }
+}

src/types.ts

@@ -60,3 +60,17 @@ export interface ExtendedLog extends providers.Log {
   from?: Address;
   to?: Address;
 }
+
+// Type of body for tenderly POST requests https://docs.tenderly.co/simulations-and-forks/simulation-api/using-simulation-api
+export interface SimulateBody {
+  save: boolean;
+  save_if_fails: boolean;
+  simulation_type: string;
+  network_id: ChainId;
+  from: Address; //can be any address, doesn't matter
+  to: Address;
+  input: string;
+  gas: number;
+  gas_price: number | null;
+  value: number;
+}