Fix Missing Steps in "Communicating between OP Stack and Ethereum in Solidity" Tutorial #1326
Conversation
✅ Deploy Preview for docs-optimism ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
📝 WalkthroughWalkthroughThe changes update the cross-domain Solidity tutorial by modifying content and code examples across two files. In the Markdown file, the heading “Import Viem” is changed to “Import viem,” and additional code snippets are added to demonstrate building parameters for proving a withdrawal on L2 and relaying messages on L1. In the JavaScript file, updates emphasize wallet operations and transaction handling using the Sequence Diagram(s)sequenceDiagram
participant U as User/Developer
participant A as Account Manager
participant L2 as L2Wallet
participant L1 as L1Wallet
participant ETH as Ethereum Provider
U->>A: Provide private key (process.env.TUTORIAL_PRIVATE_KEY)
A-->>U: Return account object
U->>L2: Initialize l2Wallet (with walletActionsL2)
U->>L1: Initialize l1Wallet (with walletActionsL1)
U->>L2: Trigger buildProveWithdrawal
L2-->>U: Return withdrawal proof parameters
U->>L1: Relay message for withdrawal finalization
L1->>ETH: Invoke finalizeWithdrawal method
ETH-->>L1: Return transaction receipt
L1-->>U: Confirm finalization
Possibly related issues
Possibly related PRs
Suggested reviewers
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/builders/app-developers/tutorials/cross-dom-solidity.mdx(3 hunks)public/tutorials/cross-dom-solidity.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with ...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- Use proper nouns in place of personal pronouns like 'We' and 'Our' to maintain consistency in communal documentation.
- Avoid gender-specific language and use the imperative form.
- Monitor capitalization for emphasis. Avoid using all caps, italics, or bold for emphasis.
- Ensure proper nouns are capitalized in sentences.
- Apply the Oxford comma.
- Use proper title case for buttons, tab names, page names, and links. Sentence case should be used for body content and short phrases, even in links.
- Use correct spelling and grammar at all times (IMPORTANT).
- For H1, H2, and H3 headers:
- Use sentence case, capitalizing only the first word.
- Preserve the capitalization of proper nouns, technical terms, and acronyms as defined in the 'nouns.txt' file located in the root directory of the project.
- Do not automatically lowercase words that appear in the 'nouns.txt' file, regardless of their position in the header.
- Flag any headers that seem to inconsistently apply these rules for manual review.
- When reviewing capitalization, always refer to the 'nouns.txt' file for the correct capitalization of proper nouns and technical terms specific to the project.
"
pages/builders/app-developers/tutorials/cross-dom-solidity.mdx
🪛 ESLint
public/tutorials/cross-dom-solidity.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: pr-workflow
| const { createPublicClient, http, createWalletClient } = require("viem"); | ||
| const { optimismSepolia, sepolia } = require("viem/chains"); | ||
| const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack"); | ||
| const { privateKeyToAccount } = require("viem/accounts"); |
There was a problem hiding this comment.
Remove unnecessary semicolons to fix linting errors.
Lines 3-6 contain extra semicolons that should be removed to comply with the project's coding style guidelines and fix the linting errors.
Apply this diff to remove the unnecessary semicolons:
-const { createPublicClient, http, createWalletClient } = require("viem");
-const { optimismSepolia, sepolia } = require("viem/chains");
-const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack");
-const { privateKeyToAccount } = require("viem/accounts");
+const { createPublicClient, http, createWalletClient } = require("viem")
+const { optimismSepolia, sepolia } = require("viem/chains")
+const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack")
+const { privateKeyToAccount } = require("viem/accounts")📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { createPublicClient, http, createWalletClient } = require("viem"); | |
| const { optimismSepolia, sepolia } = require("viem/chains"); | |
| const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack"); | |
| const { privateKeyToAccount } = require("viem/accounts"); | |
| const { createPublicClient, http, createWalletClient } = require("viem") | |
| const { optimismSepolia, sepolia } = require("viem/chains") | |
| const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack") | |
| const { privateKeyToAccount } = require("viem/accounts") |
🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
| const [message] = getWithdrawals(receipt) | ||
| await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain }) |
There was a problem hiding this comment.
Add missing import or definition for getWithdrawals.
The function getWithdrawals is used but not defined or imported. This will lead to a runtime error.
Ensure that getWithdrawals is properly defined or imported. If it's from an external module, add the necessary import statement, for example:
+const { getWithdrawals } = require('viem/op-stack')Or define the function if it is missing.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [message] = getWithdrawals(receipt) | |
| await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain }) | |
| +const { getWithdrawals } = require('viem/op-stack') | |
| const [message] = getWithdrawals(receipt) | |
| await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain }) |
| @@ -176,27 +176,22 @@ Start the Node.js REPL with the `node` command. | |||
| node | |||
| ``` | |||
|
|
|||
| {<h3>Import Viem</h3>} | |||
| {<h3>Import viem</h3>} | |||
There was a problem hiding this comment.
Capitalize proper noun 'Viem' in the header.
In the header {<h3>Import viem</h3>}, 'Viem' is a proper noun and should be capitalized to maintain consistency and adhere to the project's style guidelines.
Description
Summary
This PR addresses Issue #1217 by adding missing steps and updating outdated instructions in the "Communicating between OP Stack and Ethereum in Solidity" tutorial. The changes ensure that the tutorial aligns with the latest Viem APIs and correctly guides users through the withdrawal proving process.
Changes Introduced
transactionHashReferenceconst transactionHash = process.env.TUTORIAL_TRANSACTION_HASH, as it was incorrectly referenced later.createPublicClientand.extend(publicActionsL1()) / .extend(publicActionsL2()).createWalletClientand.extend(walletActionsL1()).await l2Provider.getTransactionReceipt({ hash: process.env.TUTORIAL_TRANSACTION_HASH })to ensure proper receipt handling.Tests
Additional context
Include a link to any github issues that this may close in the following form: