From b61bfe821977aa9787ba6ac8ad589bc632449c69 Mon Sep 17 00:00:00 2001
From: nambrot <nambrot@googlemail.com>
Date: Sat, 18 Nov 2023 18:32:03 +0300
Subject: [PATCH] Add Mailbox to Tenderly card

---
 src/features/debugger/debugMessage.ts           |  2 +-
 src/features/debugger/types.ts                  |  1 +
 src/features/messages/cards/TransactionCard.tsx | 13 +++++++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/features/debugger/debugMessage.ts b/src/features/debugger/debugMessage.ts
index 05a9786..490ab80 100644
--- a/src/features/debugger/debugMessage.ts
+++ b/src/features/debugger/debugMessage.ts
@@ -143,7 +143,7 @@ async function debugMessageDelivery(
     senderBytes,
     body,
   ]);
-  const calldataDetails = { handleCalldata, contract: recipient };
+  const calldataDetails = { handleCalldata, contract: recipient, mailbox: destMailbox };
   try {
     // TODO add special case for Arbitrum:
     // TODO account for mailbox handling gas overhead
diff --git a/src/features/debugger/types.ts b/src/features/debugger/types.ts
index 85ef133..a7a28fc 100644
--- a/src/features/debugger/types.ts
+++ b/src/features/debugger/types.ts
@@ -22,6 +22,7 @@ export interface MessageDebugResult {
   calldataDetails?: {
     handleCalldata: HexString;
     contract: Address;
+    mailbox: Address;
   };
 }
 
diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx
index 82946e4..3e55e13 100644
--- a/src/features/messages/cards/TransactionCard.tsx
+++ b/src/features/messages/cards/TransactionCard.tsx
@@ -254,7 +254,7 @@ function DeliveryStatus({ children }: PropsWithChildren<unknown>) {
 function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
   const [isOpen, setIsOpen] = useState(false);
   if (!debugResult?.calldataDetails) return null;
-  const { contract, handleCalldata } = debugResult.calldataDetails;
+  const { contract, handleCalldata, mailbox } = debugResult.calldataDetails;
   return (
     <>
       <button onClick={() => setIsOpen(true)} className={`mt-5 ${styles.textLink}`}>
@@ -268,7 +268,7 @@ function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
       >
         <div className="mt-2 flex flex-col space-y-3.5">
           <p className="text-sm font-light">
-            {`The last step of message delivery is the recipient contract's 'handle' function. If the handle reverting, try debugging it with `}
+            {`The last step of message delivery is the recipient contract's 'handle' function. If the handle is reverting, try debugging it with `}
             <a
               className={`${styles.textLink} any:text-blue-500`}
               href={links.tenderlySimDocs}
@@ -277,9 +277,14 @@ function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
             >
               Tenderly.
             </a>
+            {`You can simulate the call in Tenderly by setting the following values:`}
           </p>
-          <LabelAndCodeBlock label="Recipient contract address:" value={contract} />
-          <LabelAndCodeBlock label="Handle function input calldata:" value={handleCalldata} />
+          <LabelAndCodeBlock label="From (Mailbox address):" value={mailbox} />
+          <LabelAndCodeBlock label="To (Recipient contract address):" value={contract} />
+          <LabelAndCodeBlock
+            label="Calldata (handle function input calldata):"
+            value={handleCalldata}
+          />
         </div>
       </Modal>
     </>