Merge pull request #1575 from ethereum-optimism/harry/fix_code_snippets

fix: fix code snippets in interop tutorials

Author: tremarkley

pages/interop/tutorials/bridge-crosschain-eth.mdx

@@ -214,13 +214,13 @@ The tutorial uses these primary tools:
 
         Import all chain definitions from `@eth-optimism/viem`.
 
-        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L29-L32 hash=2c2dd55bc8c8122fe2991ab38cc9c1ac 
+        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L28-L31 hash=e8c21357997ea12151305337eced7d71 
         ```
 
         If the address we use is `0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266`, one of the prefunded addresses on `anvil`, assume we're using Supersim.
         Otherwise, use Interop devnet.
 
-        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L78-L80 hash=c5c2f87d5f6bb564376016ac62712501 
+        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L73-L79 hash=7d892d7a6578d8efb7cbe16a0af7e342 
         ```
 
         To relay a message we need the information in the receipt.
@@ -232,7 +232,7 @@ The tutorial uses these primary tools:
         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.
 
-        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L90-L96 hash=d650e8c2b31d75d82ba4c5e4519c028d 
+        ```typescript file=<rootDir>/public/tutorials/transfer-eth.mts#L90-L94 hash=2f3cc02cffd52ab5b807c5e70388f0ac 
         ```
 
         This is how you use `@eth-optimism/viem` to create an executing message.

pages/interop/tutorials/message-passing.mdx

@@ -119,7 +119,7 @@ For development purposes, we'll first use autorelay mode to handle message execu
   1.  In the directory where Supersim is installed, start it with autorelay.
 
       ```sh
-      ./supersim --interop.autorelay
+      supersim --interop.autorelay
       ```
 
       Supersim creates three `anvil` blockchains:
@@ -221,24 +221,12 @@ For development purposes, we'll first use autorelay mode to handle message execu
   4.  Install the Optimism Solidity libraries into the project.
 
       ```sh
-      cd lib
-      npm install @eth-optimism/contracts-bedrock
-      cd ..
-      echo @eth-optimism/=lib/node_modules/@eth-optimism/ >> remappings.txt
+      forge install ethereum-optimism/optimism --no-commit
       ```
 
-  5.  The [`@eth-optimism/contracts-bedrock`](https://www.npmjs.com/package/@eth-optimism/contracts-bedrock) library does not have the Interop Solidity code yet.
-      Run these commands to add it.
+  5.  Create `src/GreetingSender.sol`.
 
-      ```sh
-      mkdir -p lib/node_modules/@eth-optimism/contracts-bedrock/interfaces/L2
-      wget https://raw.githubusercontent.com/ethereum-optimism/optimism/refs/heads/develop/packages/contracts-bedrock/interfaces/L2/IL2ToL2CrossDomainMessenger.sol
-      mv IL2ToL2CrossDomainMessenger.sol lib/node_modules/@eth-optimism/contracts-bedrock/interfaces/L2
-      ```
-
-  6.  Create `src/GreetingSender.sol`.
-
-      ```solidity file=<rootDir>/public/tutorials/GreetingSender.sol#L1-L28 hash=75d197d1e1da112421785c2160f6a55a
+      ```solidity file=<rootDir>/public/tutorials/GreetingSender.sol#L1-L28 hash=9ed77001810caf52bbaa94da8b0dc5c6
       ```
 
   <details>
@@ -296,8 +284,8 @@ In this section we change `Greeter.sol` to emit a separate event in it receives
       //SPDX-License-Identifier: MIT
       pragma solidity ^0.8.0;
 
-      import { Predeploys } from "@eth-optimism/contracts-bedrock/src/libraries/Predeploys.sol";
-      import { IL2ToL2CrossDomainMessenger } from "@eth-optimism/contracts-bedrock/interfaces/L2/IL2ToL2CrossDomainMessenger.sol";    
+      import { Predeploys } from "lib/optimism/packages/contracts-bedrock/src/libraries/Predeploys.sol";
+      import { IL2ToL2CrossDomainMessenger } from "lib/optimism/packages/contracts-bedrock/interfaces/L2/IL2ToL2CrossDomainMessenger.sol";    
 
       contract Greeter {
 
@@ -511,35 +499,35 @@ In this section we change `Greeter.sol` to emit a separate event in it receives
 
   1.  Replace `src/app.mts` with:
 
-      ```typescript file=<rootDir>/public/tutorials/app_v2.mts hash=a7b0f60aa6f1e48fc9994178ed3d5498
+      ```typescript file=<rootDir>/public/tutorials/app_v2.mts hash=f0aef31ef2ce29590a37f18ca07e52a9
       ```
 
   <details>
     <summary>Explanation</summary>
 
-    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L11-L15 hash=721ed87241535b606be281539baa8770
+    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L11 hash=fef2e60f0dbefba4d1e16f4d87800993
     ```
 
     Import from the [`@eth-optimism/viem`](https://www.npmjs.com/package/@eth-optimism/viem) package.
 
-    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L22-L28 hash=ffa76edb1191121e15eb4286e16ad041
+    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L18-L24 hash=ffa76edb1191121e15eb4286e16ad041
     ```
 
     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.
 
-    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L59 hash=23aa6f24baeb5757130361f30c1b0e9c
+    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L55 hash=23aa6f24baeb5757130361f30c1b0e9c
     ```
 
     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.
 
-    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L61-L63 hash=da4b8733c578a393eb36f154a4e816e1
+    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L57-L60 hash=8cc99e67ee36474c81183108531cb295
     ```
 
     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.
 
-    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L64-L70 hash=6bfcd99f2e79df79897d230f36d4a682
+    ```typescript file=<rootDir>/public/tutorials/app_v2.mts#L61-L68 hash=fa49aa2a099c57f3b86671a4c0414f31
     ```
 
     Here we first send the relay message on chain B, and then wait for the receipt for it.
@@ -605,13 +593,15 @@ In this section we change `Greeter.sol` to emit a separate event in it receives
   To see what messages were relayed by a specific transaction you can use this code:
 
   ```typescript
-  import { decodeRelayedL2ToL2Messages } from '@eth-optimism/viem'
-
-  const decodedRelays = decodeRelayedL2ToL2Messages(
-      {receipt: receiptRelay})
-
-  console.log(decodedRelays)
-  console.log(decodedRelays.successfulMessages[0].log)
+  const messages = await walletA.interop.getCrossDomainMessages({
+    logs: receiptRelay.logs,
+  })
+
+  console.log(messages)
+  const status = await walletB.interop.getCrossDomainMessageStatus({
+    message: messages[0],
+  })
+  console.log(status)
   ```
 </Steps>
 

pages/interop/tutorials/relay-messages-cast.mdx

@@ -125,7 +125,7 @@ struct Identifier {
 
   ### Retrieve the block timestamp the log was emitted in
 
-  Since the message identifier requires the block timestamp, fetch the block info to get the timestamp.
+  Since the message identifier requires the block timestamp, fetch the block info to get the timestamp. `0xREPLACE_WITH_CORRECT_BLOCKHASH` should be replaced with the `blockHash` from the output of the previous step.
 
   ```sh
   cast block 0xREPLACE_WITH_CORRECT_BLOCKHASH --rpc-url http://127.0.0.1:9545
@@ -167,7 +167,7 @@ struct Identifier {
 
   ### Construct the access list for the message
 
-  An access list must be passed along with the relay message tx. There are two admin RPC methods that can be used to construct the access list: `admin_getAccessListByMsgHash` and `admin_getAccessListForIdentifier` and.
+  An access list must be passed along with the relay message transaction. There are two admin RPC methods that can be used to construct the access list: `admin_getAccessListByMsgHash` and `admin_getAccessListForIdentifier`.
 
   a. To get the access list using the `admin_getAccessListByMsgHash` RPC method, call the method with the message hash.
 

pages/interop/tutorials/transfer-superchainERC20.mdx

@@ -185,33 +185,33 @@ The tutorial uses these primary tools:
 
   3.  Create `src/xfer-erc20.mts`:
 
-      ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts hash=19a948eeb482046afb1a55ccc5019599
+      ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts hash=26d412ead555cdd59c16676a4dcd91e8
       ```
 
       <details>
         <summary>Explanation of `xfer-erc20.mts`</summary>
 
-        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L79-L84 hash=85f317d0cbe2b59e303e36a3e6154c62
+        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L75-L80 hash=b144852a4fa9ae45e79ec6f124e48e79
         ```
 
         Use `@eth-optimism/viem`'s `walletActionsL2().sendSuperchainERC20` to send the `SuperchainERC20` tokens.
         Internally, this function calls [`SuperchainTokenBridge.sendERC20`](https://github.com/ethereum-optimism/optimism/blob/develop/packages/contracts-bedrock/src/L2/SuperchainTokenBridge.sol#L52-L78) to send the tokens.
 
         <AutorelayCallout />
 
-        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L88-L90 hash=cab6e961b558f4f5a7b877062b1cfa45 
+        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L84-L86 hash=cab6e961b558f4f5a7b877062b1cfa45 
         ```
 
         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.
 
-        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L92-L94 hash=1da0981adb2fbd38cccf1b0602158418 
+        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L88-L91 hash=e1445aa565f4aaff02a62365fb196ca8 
         ```
 
         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.
 
-        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L96-L99 hash=b5ad9f0c44aee84742cd20c348fdb156 
+        ```typescript file=<rootDir>/public/tutorials/xfer-erc20.mts#L92-L96 hash=0a65e0138ab6954b863ebafacaa23c84 
         ```
 
         This is how you use `@eth-optimism/viem` to create an executing message.

public/tutorials/GreetingSender.sol

@@ -1,8 +1,8 @@
 //SPDX-License-Identifier: MIT
 pragma solidity ^0.8.0;
 
-import { Predeploys } from "@eth-optimism/contracts-bedrock/src/libraries/Predeploys.sol";
-import { IL2ToL2CrossDomainMessenger } from "@eth-optimism/contracts-bedrock/interfaces/L2/IL2ToL2CrossDomainMessenger.sol";
+import { Predeploys } from "lib/optimism/packages/contracts-bedrock/src/libraries/Predeploys.sol";
+import { IL2ToL2CrossDomainMessenger } from "lib/optimism/packages/contracts-bedrock/interfaces/L2/IL2ToL2CrossDomainMessenger.sol";
 
 import { Greeter } from "src/Greeter.sol";