yarn.lock changes and prettier

src/consts/config.ts

@@ -1,9 +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
+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/cards/GasDetailsCard.tsx

@@ -13,6 +13,7 @@ import { toTitleCase } from '../../../utils/string';
 import { GasPayment } from '../../debugger/types';
 import { useMultiProvider } from '../../providers/multiProvider';
 import { computeAvgGasPrice } from '../utils';
+
 import { KeyValueRow } from './KeyValueRow';
 
 interface Props {

src/features/messages/cards/TransactionCard.tsx

@@ -1,6 +1,7 @@
 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';
@@ -14,6 +15,7 @@ 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';
 
@@ -41,7 +43,7 @@ export function DestinationTransactionCard({
   isStatusFetching,
   isPiMsg,
   blur,
-  message
+  message,
 }: {
   chainId: ChainId;
   status: MessageStatus;
@@ -50,7 +52,7 @@ export function DestinationTransactionCard({
   isStatusFetching: boolean;
   isPiMsg?: boolean;
   blur: boolean;
-  message:Message;
+  message: Message;
 }) {
   let content: ReactNode;
   if (transaction) {
@@ -87,7 +89,7 @@ export function DestinationTransactionCard({
             </div>
           )}
           <Spinner classes="my-4 scale-75" />
-          <CallDataModal debugResult={debugResult} chainId={chainId} message={message}/>
+          <CallDataModal debugResult={debugResult} chainId={chainId} message={message} />
         </div>
       </DeliveryStatus>
     );
@@ -210,19 +212,27 @@ function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
   );
 }
 
-function CallDataModal({ debugResult,chainId,message}: { debugResult?: MessageDebugResult,chainId:ChainId,message:Message }) {
+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")
+  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()=>{
+  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
-  }
+    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}`}>
@@ -248,10 +258,7 @@ function CallDataModal({ debugResult,chainId,message}: { debugResult?: MessageDe
           </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'
-          >
+          <button onClick={handleClick} disabled={loading} className="underline text-blue-400">
             {buttonText}
           </button>
           {loading && <Spinner classes="mt-4 scale-75 self-center" />}
@@ -260,33 +267,40 @@ function CallDataModal({ debugResult,chainId,message}: { debugResult?: MessageDe
     </>
   );
 }
-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={
+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, 
+    save_if_fails: true,
     simulation_type: 'full',
-    network_id: chainId, 
-    from: '0x0000000000000000000000000000000000000000',//can be any address, doesn't matter
+    network_id: chainId,
+    from: '0x0000000000000000000000000000000000000000', //can be any address, doesn't matter
     to: contract,
-    input:handleCalldata,
+    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 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);
   }
 }
 

src/features/messages/utils.ts

@@ -1,5 +1,6 @@
 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';
@@ -12,7 +13,11 @@ export function deserializeMessage<M extends MessageStub>(data: string | string[
   return fromBase64<M>(data);
 }
 
-export function  computeAvgGasPrice(unit: string, gasAmount?: BigNumber.Value, payment?: BigNumber.Value) {
+export function computeAvgGasPrice(
+  unit: string,
+  gasAmount?: BigNumber.Value,
+  payment?: BigNumber.Value,
+) {
   try {
     if (!gasAmount || !payment) return null;
     const gasBN = new BigNumber(gasAmount);

src/pages/api/simulation.ts

@@ -1,36 +1,35 @@
-import { TENDERLY_ACCESS_KEY, TENDERLY_PROJECT, TENDERLY_USER } from "../../consts/config"
-import { failureResult, successResult } from "../../features/api/utils"
+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"))
-    return null
+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,
+        method: 'POST',
+        body: data,
         headers: {
           'X-Access-Key': TENDERLY_ACCESS_KEY as string,
         },
-      }
+      },
     );
-    const simulationId=await resp.json().then((data)=>data.simulation.id)
+    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',
+        method: 'POST',
         headers: {
           'X-Access-Key': TENDERLY_ACCESS_KEY as string,
         },
-      }
-    )
-    res.json(successResult(simulationId))
+      },
+    );
+    res.json(successResult(simulationId));
   } catch (error) {
-    res.json(failureResult("Could not simulate"))
+    res.json(failureResult('Error preparing Tenderly simulation'));
   }
-}
+}

src/types.ts

@@ -63,14 +63,14 @@ export interface ExtendedLog extends providers.Log {
 
 // 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,
+  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;
 }