Merge pull request #1326 from ethereum-optimism/fix-comms-tut

Fix Missing Steps in "Communicating between OP Stack and Ethereum in Solidity" Tutorial
ethereum-optimism · Feb 11, 2025 · 6cbe69b · 6cbe69b
2 parents 7dc1a51 + 5789db6
commit 6cbe69b
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 47 deletions.
diff --git a/pages/app-developers/tutorials/bridging/cross-dom-solidity.mdx b/pages/app-developers/tutorials/bridging/cross-dom-solidity.mdx
@@ -176,27 +176,22 @@ Start the Node.js REPL with the `node` command.
 node
 ```
 
-{<h3>Import Viem</h3>}
+{<h3>Import viem</h3>}
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L3-L5 hash=65b9a5ad5b634bc2e424f5664e6e1f84
-```
-
-{<h3>Load your transaction hash</h3>}
-
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L7 hash=320cd4f397d7bed8d914d4be0c99f8dc
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L3-L6 hash=ab7ce5835f34a359602c8fe03080c3ed
 ```
 
 {<h3>Create the RPC providers and wallets</h3>}
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L8-L9 hash=d47e4991c5153e1e1dc55de5047a8a3e
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L8-L20 hash=9500ca6be35774522cce2260cd8e9cb6
 ```
 
 {<h3>Wait until the message is ready to prove</h3>}
 
 Next, you will send messages from L2 to L1 is to prove that the message was sent on L2.
 You first need to wait until the message is ready to prove.
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L12-L16 hash=df275e659d954eb72b8c5765d9baf6de
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L22-L30 hash=0e460f24fc394acdcdb7f06df0188e31
 ```
 
 <Callout type="info">
@@ -208,7 +203,12 @@ Feel free to take a quick break while you wait.
 
 Once the message is ready to be proven, you'll send an L1 transaction to prove that the message was sent on L2.
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L18-L23 hash=e4d608ac2c2ceb5a744c8474679bd8cb
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L32-L36 hash=6b44abbea96103df0513d098ae6e6659
+```
+
+{<h3>Build parameters to prove the withdrawal on the L2</h3>}
+
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L38-L44 hash=a31f720f43df1680f5488ea233cc9506
 ```
 
 {<h3>Wait until the message is ready for relay</h3>}
@@ -221,21 +221,21 @@ On OP Stack, this takes 7 days.
 We're currently testing fault proofs on OP Sepolia, so withdrawal times reflect Mainnet times.
 </Callout>
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L25-L29 hash=88cec1db2fde515ea9008eaa1bbdfd73
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L46-L50 hash=8c08d1f4c6a7f5d1754a411b3590530d
 ```
 
 {<h3>Relay the message on L1</h3>}
 
 Once the withdrawal is ready to be relayed you can finally complete the message sending process.
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L31-L33 hash=d7e47c9787d92e2140622a6bdcc6d7bb
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L52-L54 hash=d64917e14a9004ef0b81e3f08003d5cd
 ```
 
 {<h3>Wait until the message is relayed</h3>}
 
 Now you simply wait until the message is relayed.
 
-```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L35-L36 hash=4ff3cdc48f17cfd7de4a6ef2d2671dc2
+```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L56-L62 hash=5a0d3a97f8d71f11c1e46c5e4a734ffb
 ```
 
 {<h3>Check the L1 Greeter</h3>}

diff --git a/public/tutorials/cross-dom-solidity.js b/public/tutorials/cross-dom-solidity.js
@@ -1,39 +1,65 @@
 (async () => {
 
-const { createPublicClient, http } = require('viem');
-const { optimismSepolia } = require('viem/chains');
-const {  publicActionsL1, publicActionsL2} = require('viem/op-stack');
-
-const transactionHash = process.env.TUTORIAL_TRANSACTION_HASH
-
-const l1Provider = createPublicClient({ chain: sepolia, transport: http("https://rpc.ankr.com/eth_sepolia") }).extend(publicActionsL1())
-const l2Provider = createPublicClient({ chain: optimismSepolia, transport: http("https://sepolia.optimism.io") }).extend(publicActionsL2());
-
-console.log('Waiting for message to be provable...')
-await l1Provider.getWithdrawalStatus({ 
-  receipt, 
-  targetChain: l2Provider.chain, 
-}) 
-
-console.log('Proving message...')
-const receipt = await l2Provider.getTransactionReceipt(transactionHash)
-const output = await l1Provider.waitToProve({ 
-  receipt, 
-  targetChain: l2Provider.chain, 
-}) 
-
-console.log('Waiting for message to be relayable...')
-await l1Provider.getWithdrawalStatus({ 
-  receipt, 
-  targetChain: l2Provider.chain, 
-}) 
-
-console.log('Relaying message...')
-const [message] = getWithdrawals(receipt)
-await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain }) 
-
-console.log('Waiting for message to be relayed...')
-await l1Provider.getWithdrawalStatus({ receipt, targetChain: l2Provider.chain }) 
+  const { createPublicClient, http, createWalletClient } = require("viem");
+  const { optimismSepolia, sepolia } = require("viem/chains");
+  const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2, getWithdrawals } = require("viem/op-stack");
+  const { privateKeyToAccount } = require("viem/accounts");
+
+  const l1Provider = createPublicClient({ chain: sepolia, transport: http("https://eth-sepolia.g.alchemy.com/v2/***") }).extend(publicActionsL1())
+  const l2Provider = createPublicClient({ chain: optimismSepolia, transport: http("https://opt-sepolia.g.alchemy.com/v2/***") }).extend(publicActionsL2())
+  const account = privateKeyToAccount(process.env.TUTORIAL_PRIVATE_KEY)
+
+  const l1Wallet = createWalletClient({
+    chain: sepolia,
+    transport:  http("https://eth-sepolia.g.alchemy.com/v2/***")
+  }).extend(walletActionsL1())
+
+  const l2Wallet = createWalletClient({
+    chain: optimismSepolia,
+    transport:  http("https://opt-sepolia.g.alchemy.com/v2/***")
+  }).extend(walletActionsL2())
+
+  const receipt = await l2Provider.getTransactionReceipt({
+    hash: process.env.TUTORIAL_TRANSACTION_HASH
+  })
+
+  console.log('Waiting for message to be provable...')
+  await l1Provider.getWithdrawalStatus({ 
+    receipt, 
+    targetChain: l2Provider.chain, 
+  })
+
+  console.log('Proving message...')
+  const { output, withdrawal } = await l1Provider.waitToProve({ 
+    receipt, 
+    targetChain: l2Provider.chain, 
+  })
+
+  const args = await l2Provider.buildProveWithdrawal({
+    account,
+    output,
+    withdrawal,
+  })
+
+  const hash = await l1Wallet.proveWithdrawal(args)
+
+  console.log('Waiting for message to be relayable...')
+  await l1Provider.getWithdrawalStatus({ 
+    receipt, 
+    targetChain: l2Provider.chain, 
+  }) 
+
+  console.log('Relaying message...')
+  const [message] = getWithdrawals(receipt)
+  await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain }) 
+
+  const finalizeHash = await l1Wallet.finalizeWithdrawal({
+    targetChain: l2Wallet.chain,
+    withdrawal,
+  })
+
+  console.log('Waiting for message to be relayed...')
+  await l1Provider.getWithdrawalStatus({ receipt, targetChain: l2Provider.chain }) 
 
 
 })()