Merge pull request #1377 from qbzzt/250216-msg-passing-code-explanation

Added the code segment explanation back

Author: krofax

pages/stack/interop/tutorials/message-passing.mdx

@@ -229,11 +229,10 @@ For development purposes, we'll first use autorelay mode to handle message execu
           ```
 
           This function encodes a call to `setGreeting` and sends it to a contract on another chain.
-
-          *   `abi.encodeCall(Greeter.setGreeting, (greeting))` constructs the [calldata](https://docs.soliditylang.org/en/latest/internals/layout_in_calldata.html) by encoding the function selector and parameters.
-
-          *   The encoded message is then passed to `messenger.sendMessage`, which forwards it to the destination contract (`greeterAddress`) on the specified chain (`greeterChainId`).
-              This ensures that `setGreeting` is executed remotely with the provided `greeting` value.
+          `abi.encodeCall(Greeter.setGreeting, (greeting))` constructs the [calldata](https://docs.soliditylang.org/en/latest/internals/layout_in_calldata.html) by encoding the function selector and parameters.
+          The encoded message is then passed to `messenger.sendMessage`, which forwards it to the destination contract (`greeterAddress`) on the specified chain (`greeterChainId`).
+          
+          This ensures that `setGreeting` is executed remotely with the provided `greeting` value (as long as there is an executing message to relay it).
         </details>
 
   7.  Deploy `GreetingSender` to chain A.
@@ -501,52 +500,33 @@ In production we will not have this, we need to create our own executing message
         <details>
           <summary>Explanation</summary>
 
-          1.  **Import Required Libraries**
-
-          *   Imports functions from `viem` for wallet creation, HTTP transport, and contract interactions.
-
-          *   Imports `@eth-optimism/viem` utilities for handling OP-Stack-specific actions and interoperability.
-
-          *   Loads ABI definitions from `Greeter.json` and `GreetingSender.json` for contract interactions.
-
-          2.  **Initialize Wallet Clients**
-
-          *   Uses `privateKeyToAccount` to generate an account from an environment variable.
-
-          *   Creates `walletA` for chain `supersimL2A` and `walletB` for chain `supersimL2B`, extending them with Viem's public and OP-Stack-specific actions.
-
-          3.  **Get Contract Instances**
-
-          *   Retrieves contract instances for `greeter` on `walletB` and `greetingSender` on `walletA` using `getContract`.
-
-          *   The addresses are taken from environment variables, and the clients are set to the respective wallets.
-
-          4.  **Direct Greeting on Chain B**
-
-          *   Calls `setGreeting` on `greeter` to store a greeting directly on chain B.
-
-          *   Waits for the transaction to be confirmed using `waitForTransactionReceipt`.
+            ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L11-L15 hash=721ed87241535b606be281539baa8770
+            ```  
 
-          *   Reads and logs the greeting stored on chain B.
+            Import from the [`@eth-optimism/viem`](https://www.npmjs.com/package/@eth-optimism/viem) package.
 
-          5.  **Cross-Chain Greeting via Chain A**
+            ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L22-L28 hash=ffa76edb1191121e15eb4286e16ad041
+            ```
 
-          *   Calls `setGreeting` on `greetingSender` to send a greeting through chain A.
+            In addition to extending the wallets with [Viem public actions](https://viem.sh/docs/accounts/local#5-optional-extend-with-public-actions), extend with the OP-Stack actions, both the public ones and the ones that require an account.  
 
-          *   Waits for the transaction receipt on chain A.
+            ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L59 hash=23aa6f24baeb5757130361f30c1b0e9c
+            ```
 
-          6.  **Retrieve and Relay the Cross-Chain Message**
+            To relay a message we need the information in the receipt.
+            Also, we need to wait until the transaction with the relayed message is actually part of a block.
 
-          *   Extracts the message from the transaction receipt using `createInteropSentL2ToL2Messages`.
+            ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L61-L63 hash=da4b8733c578a393eb36f154a4e816e1
+            ```
 
-          *   Relays the message to chain B using `walletB.interop.relayMessage`.
+            A single transaction can send multiple messages. 
+            But here we know we sent just one, so we look for the first one in the list.
 
-          *   Waits for confirmation of the relay transaction.
+            ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L64-L70 hash=6bfcd99f2e79df79897d230f36d4a682
+            ```            
 
-          7.  **Verify the Updated Greeting on Chain B**
+            Here we first send the relay message on chain B, and then wait for the receipt for it.
 
-          *   Reads the greeting from `greeter` after the relay process.
-          *   Logs the updated greeting, showing that it was successfully relayed from chain A to chain B.
         </details>
 
   2.  Rerun the JavaScript program, and see that the message is relayed.