Crosschain Bridging of ETH tutorial #1372
Conversation
✅ Deploy Preview for docs-optimism ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
📝 WalkthroughWalkthroughThe changes involve updates to documentation and the addition of a new tutorial file. In the Sequence Diagram(s)sequenceDiagram
participant User
participant SourceWallet as Source Wallet Client
participant WETH as SuperchainWETH Contract
participant DestWallet as Destination Wallet Client
User->>SourceWallet: Initiate ETH transfer & report balance
SourceWallet->>WETH: Call write.sendETH(0.001 ETH)
WETH-->>SourceWallet: Return transaction receipt
SourceWallet->>User: Log updated source balance
SourceWallet->>DestWallet: Create inter-chain message (createInteropSentL2ToL2Messages)
DestWallet->>User: Relay message and log destination balance
Possibly related PRs
Suggested reviewers
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: 0
🧹 Nitpick comments (4)
public/tutorials/transfer-eth.mts (2)
56-69: Add error handling for balance checks.The
reportBalancefunction should include try-catch blocks to handle potential RPC failures gracefully.const reportBalance = async (address: string): Promise<void> => { + try { const sourceBalance = await sourceWallet.getBalance({ address: address }); const destinationBalance = await destinationWallet.getBalance({ address: address }); console.log(` Address: ${address} Balance on source chain: ${formatEther(sourceBalance)} Balance on destination chain: ${formatEther(destinationBalance)} `); + } catch (error) { + console.error('Failed to fetch balances:', error); + throw error; + } }
74-96: Add transaction confirmation checks.Consider adding confirmation checks and timeout handling for transaction receipts.
const sourceReceipt = await sourceWallet.waitForTransactionReceipt({ - hash: sourceHash + hash: sourceHash, + timeout: 60_000, + confirmations: 2 }) const receiptRelay = await destinationWallet.waitForTransactionReceipt({ - hash: relayMsgTxnHash + hash: relayMsgTxnHash, + timeout: 60_000, + confirmations: 2 })pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (2)
30-31: Fix grammatical error in the bullet point.The bullet point contains a grammatical error.
-* A TypeScript application to transfer ETH chains +* A TypeScript application to transfer ETH between chains
76-77: Add security warning about private key usage.Consider adding a warning about the security implications of using hardcoded private keys in environment variables.
```sh +# Warning: This is a test private key. Never use real private keys in environment variables. export PRIV_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80</blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used: .coderabbit.yaml** **Review profile: CHILL** **Plan: Pro** <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 12af3748db9c235b9fd01c5a0092936dab06c893 and bb942bba4b7c8c961c427d2a63f65be8d8a08657. </details> <details> <summary>📒 Files selected for processing (3)</summary> * `pages/stack/interop/superchain-weth.mdx` (1 hunks) * `pages/stack/interop/tutorials/bridge-crosschain-eth.mdx` (1 hunks) * `public/tutorials/transfer-eth.mts` (1 hunks) </details> <details> <summary>🧰 Additional context used</summary> <details> <summary>📓 Path-based instructions (1)</summary> <details> <summary>`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with ...</summary> > `**/*.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: > 1. Use sentence case, capitalizing only the first word. > 2. 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. > 3. 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/stack/interop/superchain-weth.mdx` - `pages/stack/interop/tutorials/bridge-crosschain-eth.mdx` </details> </details><details> <summary>🪛 LanguageTool</summary> <details> <summary>pages/stack/interop/tutorials/bridge-crosschain-eth.mdx</summary> [typographical] ~122-~122: Consider adding a comma here. Context: ...g message on the destination chain, and for that we use [the `@eth-optimism/viem` packag... (FOR_THAT_COMMA) --- [typographical] ~164-~164: It seems that a comma is missing. Context: ...9ef90bfe163f5fd7 ``` To relay a message we need the information in the receipt.... (IN_ORDER_TO_VB_COMMA) </details> </details> </details> <details> <summary>🔇 Additional comments (4)</summary><blockquote> <details> <summary>public/tutorials/transfer-eth.mts (2)</summary> `34-48`: **LGTM! Well-structured wallet client initialization.** The wallet clients are properly initialized with all necessary extensions. --- `29-32`: <details> <summary>❓ Verification inconclusive</summary> **Consider adding validation for chain determination.** The current logic assumes specific addresses for chain determination. Consider adding validation to ensure the address exists and has sufficient balance on both chains before proceeding. --- 🏁 Script executed: ```shell #!/bin/bash # Verify balance on both chains for the given address address=$(cast wallet address $PRIV_KEY) echo "Checking balances for address: $address" # Check source chain cast balance --ether $address --rpc-url http://localhost:9545 # Check destination chain cast balance --ether $address --rpc-url http://localhost:9546Length of output: 502
Chain Determination Validation and Tool Availability Require Attention
The current chain determination logic is based on a fixed address check, which may lead to issues if the account lacks funds or is invalid. Please consider the following:
- Validate that the account generated from
process.env.PRIV_KEYis non-empty and valid.- Add explicit checks to confirm that the account holds sufficient balance on both the source and destination chains before proceeding.
- If using an external tool (e.g.,
cast) to verify balances, ensure it is properly installed and handle errors when it’s unavailable—in this case, use an alternative approach (such as leveraging the functionality provided by theviemlibrary).Manual checks for balance validation are advised since the execution above did not produce the expected output.
pages/stack/interop/superchain-weth.mdx (1)
15-18: LGTM! Clear and helpful callout.
The callout effectively introduces the functionality and provides a useful link to the tutorial.
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (1)
146-179: LGTM! Clear and comprehensive explanations.
The explanations effectively break down the code and provide helpful context for each section.
🧰 Tools
🪛 LanguageTool
[typographical] ~164-~164: It seems that a comma is missing.
Context: ...9ef90bfe163f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
qbzzt
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (7)
15-17: Enhanced Callout description.
The updated content in the Callout clearly explains the tutorial’s objective and directs users to the interoperable ETH explainer. For improved clarity, consider adding a comma after "for a conceptual overview" (i.e. “for a conceptual overview, see the…”).
20-27: Overview section improvements.
The overview details how crosschain ETH transfers are facilitated and introduces the involved contracts and platforms well. In addition, ensure clarity in later sections—for example, in the "What you'll build" bullet, consider rephrasing "transfer ETH chains" to "transfer ETH between chains" for better readability.
28-31: What you'll build description clarity.
The bullet point under "What you'll build" currently reads "* A TypeScript application to transfer ETH chains." Consider revising it to "* A TypeScript application to transfer ETH between chains" to more clearly communicate the tutorial’s intent.
115-127: TypeScript project setup instructions are detailed.
The steps for creating a new TypeScript project, installing dependencies, and setting up the project directory are clear. A minor suggestion: in line 117, consider adding a comma after "for that" to read "…and for that, we use [the@eth-optimism/viempackage]" for improved readability.🧰 Tools
🪛 LanguageTool
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the@eth-optimism/viempackag...(FOR_THAT_COMMA)
141-171: Detailed explanation block is informative.
The explanation within the details tag thoroughly describes the use of@eth-optimism/viem, including code references for various segments. At line 158, add a comma to improve clarity: "To relay a message, we need the information in the receipt."🧰 Tools
🪛 LanguageTool
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....(IN_ORDER_TO_VB_COMMA)
181-205: Results readout clarity.
The detailed balance reports before and after the transfer are useful. In line 201, consider adding a comma after "After the initiating message" to read "After the initiating message, the balance on the source chain is immediately reduced."🧰 Tools
🪛 LanguageTool
[uncategorized] ~201-~201: Possible missing comma found.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...(AI_HYDRA_LEO_MISSING_COMMA)
218-223: Next steps section tone adjustment.
In the "Next steps" section, replace "Checkout" with "Check out" to adhere to the imperative tone recommended in the documentation guidelines.🧰 Tools
🪛 LanguageTool
[grammar] ~220-~220: This sentence should probably be started with a verb instead of the noun ‘Checkout’. If not, consider inserting a comma for better clarity.
Context: ... 180gwei). ## Next steps * Checkout the [SuperchainWETH guide](/stack/inter...(SENT_START_NN_DT)
words.txt (1)
302-302: Review new entry "prefunded".
The new entry "prefunded" has been added to the list. To maintain consistency with the pattern used throughout the file (where most entries are provided in both uppercase and lowercase forms), consider also adding an uppercase variant (e.g., "PREFUNDED") if applicable. Additionally, verify that this entry is not a duplicate or typographical error.🧰 Tools
🪛 LanguageTool
[duplication] ~302-~302: Možný preklep: zopakovali ste slovo
Context: ...eployed Predeploys predeploys prefunded Preimage preimage PREIMAGES preimages preinstall Preinsta...(WORD_REPEAT_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx(1 hunks)words.txt(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/stack/interop/tutorials/bridge-crosschain-eth.mdx
🪛 LanguageTool
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the @eth-optimism/viem packag...
(FOR_THAT_COMMA)
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
[uncategorized] ~201-~201: Possible missing comma found.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...
(AI_HYDRA_LEO_MISSING_COMMA)
words.txt
[duplication] ~302-~302: Možný preklep: zopakovali ste slovo
Context: ...eployed Predeploys predeploys prefunded Preimage preimage PREIMAGES preimages preinstall Preinsta...
(WORD_REPEAT_RULE)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (12)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (12)
7-7: Import update: Added Tabs component.
The new import statement now includes theTabscomponent from the 'nextra/components' module to support the enhanced layout. This change is consistent with the expanded tutorial content.
32-36: What you'll learn section is clear.
The bullet points enumerate the learning objectives effectively, outlining both blockchain transactions and crosschain message relaying.
37-40: Prerequisites section overview.
The new prerequisites section succinctly describes the necessary conditions before starting the tutorial, helping users verify their setup.
41-46: Technical knowledge prerequisites are well-defined.
The listed items cover the essential technical skills needed for the tutorial.
47-53: Development environment description is thorough.
The requirements for the operating system, Node.js version, and Git are clearly stated.
53-61: Required tools list is comprehensive.
The tool list covers Foundry, Supersim, TypeScript, and Viem, which are all critical for the tutorial.
62-113: Network configuration steps are well-structured.
The use of a tabbed interface to separate instructions for Supersim and the Interop devnet is effective. The command examples and details (including sanity checks) are clear and instructive.
129-134: ABI download instructions look accurate.
The commands to download and move the SuperchainWETH ABI are clear and provide the necessary guidance.
136-140: Reference to TypeScript tutorial file is clear.
Embedding the code reference forsrc/transfer-eth.mtshelps users quickly locate the tutorial example file.
173-179: Example run instructions are straightforward.
The steps to run the example (with the provided command snippet) are clear and easy to follow.
206-212: Post-relay results snippet is clear.
The balance report after relaying the message is presented in a concise and understandable manner.
214-215: Destination chain balance update description.
The explanation of how the destination chain balance increases is clear and effectively communicates the outcome of the transaction.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (4)
67-69: Tab Label Casing for Consistency
It is recommended to title-case the tab labels for uniformity with documentation standards. For example, consider changing"Interop devnet"to"Interop Devnet".- <Tabs items={['Supersim', 'Interop devnet']}> + <Tabs items={['Supersim', 'Interop Devnet']}>Also applies to: 88-96
116-116: Insert Missing Comma for Clarity
In the sentence:"We need to create an executing message on the destination chain, and for that we use the
@eth-optimism/viempackage."
a comma after "for that" would improve readability.- and for that we use [the `@eth-optimism/viem` package] + and for that, we use [the `@eth-optimism/viem` package]
158-158: Add Missing Comma in Instruction
For enhanced clarity, adjust the sentence to include a comma:"To relay a message we need the information in the receipt."
should be changed to
"To relay a message, we need the information in the receipt."- To relay a message we need the information in the receipt. + To relay a message, we need the information in the receipt.🧰 Tools
🪛 LanguageTool
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....(IN_ORDER_TO_VB_COMMA)
201-201: Punctuation Enhancement for Readability
In the explanation, insert a comma after "After the initiating message" to improve the sentence flow:- After the initiating message the balance on the source chain is immediately reduced. + After the initiating message, the balance on the source chain is immediately reduced.🧰 Tools
🪛 LanguageTool
[uncategorized] ~201-~201: Possible missing comma found.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...(AI_HYDRA_LEO_MISSING_COMMA)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx(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/stack/interop/tutorials/bridge-crosschain-eth.mdx
🪛 LanguageTool
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the @eth-optimism/viem packag...
(FOR_THAT_COMMA)
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
[uncategorized] ~201-~201: Possible missing comma found.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...
(AI_HYDRA_LEO_MISSING_COMMA)
🪛 Gitleaks (8.21.2)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
75-75: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (3)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (3)
1-9: Frontmatter and Imports Check
The frontmatter is correctly structured, and the import statement now includes the newTabscomponent alongsideCalloutandSteps. Please verify that these components are used consistently throughout the document.
12-12: Header Formatting Verification
The H1 header "Bridging native cross-chain ETH transfers" follows sentence case with proper capitalization of the acronym "ETH."
14-18: Callout Content Clarity
The content inside the<Callout>component clearly explains the tutorial’s purpose and provides a direct link to the interoperable ETH explainer.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
public/tutorials/transfer-eth.mts (4)
29-32: Consider improving chain configuration.The chain determination logic could be more explicit and configurable:
- Move the hardcoded address to a configuration file or environment variable
- Add comments explaining the chain selection logic
-const supersimAddress="0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266" +// Address of the prefunded account in Supersim +const SUPERSIM_ADDRESS = process.env.SUPERSIM_ADDRESS || "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266" -const sourceChain = account.address == supersimAddress ? supersimL2A : interopAlpha0 -const destinationChain = account.address == supersimAddress ? supersimL2B : interopAlpha1 +// Select chains based on environment (Supersim or Interop devnet) +const sourceChain = account.address == SUPERSIM_ADDRESS ? supersimL2A : interopAlpha0 +const destinationChain = account.address == SUPERSIM_ADDRESS ? supersimL2B : interopAlpha1
56-69: Add error handling to balance reporting.The balance reporting function should handle potential RPC errors gracefully.
const reportBalance = async (address: string): Promise<void> => { + try { const sourceBalance = await sourceWallet.getBalance({ address: address }); const destinationBalance = await destinationWallet.getBalance({ address: address }); console.log(` Address: ${address} Balance on source chain: ${formatEther(sourceBalance)} Balance on destination chain: ${formatEther(destinationBalance)} `); + } catch (error) { + console.error('Failed to fetch balances:', error); + throw error; + } }
74-80: Consider adding transaction monitoring.Add transaction status monitoring and timeout handling for better user experience.
const sourceHash = await wethOnSource.write.sendETH({ value: parseEther('0.001'), args: [account.address, destinationChain.id] }) +console.log(`Transaction sent: ${sourceHash}`) const sourceReceipt = await sourceWallet.waitForTransactionReceipt({ - hash: sourceHash + hash: sourceHash, + timeout: 60_000, + onReplaced: replacement => { + console.log('Transaction replaced:', replacement.reason) + console.log('New hash:', replacement.transaction.hash) + } })
87-99: Enhance message relaying robustness.Add validation and error handling for the message relay process.
+if (!sourceReceipt.status) { + throw new Error('Source transaction failed') +} const sentMessage = (await createInteropSentL2ToL2Messages(sourceWallet, { receipt: sourceReceipt })) .sentMessages[0] + +if (!sentMessage) { + throw new Error('No message found in transaction') +} + const relayMsgTxnHash = await destinationWallet.interop.relayMessage({ sentMessageId: sentMessage.id, sentMessagePayload: sentMessage.payload, }) +console.log(`Relay transaction sent: ${relayMsgTxnHash}`) const receiptRelay = await destinationWallet.waitForTransactionReceipt( {hash: relayMsgTxnHash}) + +if (!receiptRelay.status) { + throw new Error('Relay transaction failed') +}pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (2)
117-117: Improve sentence structure.Add a comma for better readability:
-We need to create an executing message on the destination chain and for that we use [the `@eth-optimism/viem` package] +We need to create an executing message on the destination chain, and for that we use [the `@eth-optimism/viem` package]🧰 Tools
🪛 LanguageTool
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the@eth-optimism/viempackag...(FOR_THAT_COMMA)
141-171: Enhance code explanations.Consider adding:
- Expected output or behavior for each code segment
- Common troubleshooting scenarios
- Links to relevant API documentation
🧰 Tools
🪛 LanguageTool
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....(IN_ORDER_TO_VB_COMMA)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx(1 hunks)public/tutorials/transfer-eth.mts(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/stack/interop/tutorials/bridge-crosschain-eth.mdx
🪛 LanguageTool
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the @eth-optimism/viem packag...
(FOR_THAT_COMMA)
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (3)
public/tutorials/transfer-eth.mts (1)
34-54: Well-structured wallet client setup!The wallet client configuration is well-implemented with appropriate extensions for both chains.
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (2)
74-76: Review Sample Private Key UsageThe sample code includes a hard-coded
PRIVATE_KEYvalue that should be clearly marked as a non-production example.
183-216: Excellent explanation of transaction costs and balance changes!The detailed breakdown of balance changes and transaction costs helps users understand the process clearly.
| <Steps> | ||
| ### Start `supersim` with the autorelayer enabled | ||
| ### Configure the network |
There was a problem hiding this comment.
The tabular view on this step is throwing me off a little bit. I think it might be cleaner to just separate the tabs into their own steps
There was a problem hiding this comment.
Is this the option to run local or on the live devnet?
There was a problem hiding this comment.
Yes. You can do either and it should work. Making them into separate steps would imply you need to do both, rather than either.
|
|
||
| <Tabs items={['Supersim', 'Interop devnet']}> | ||
| <Tabs.Tab> | ||
| 2. Follow the [Installation Guide](/app-developers/tutorials/supersim/getting-started/installation) to install [Supersim](../tools/supersim) for running blockchains with Interop. |
There was a problem hiding this comment.
This is actually the first time I'm installing supersim and it looks like its not working:
% supersim
t=2025-02-19T23:01:24-0800 lvl=crit msg="Application Failed" err="failed to setup: anvil version timestamp of 2025-02-14T00:20:02.123144000Z or higher is required, please use foundryup to update to the latest version."
I flagged it to the engineering team to see if I was doing something wrong, but I'll continue with the tutorial for now.
There was a problem hiding this comment.
Try to run foundryup to update.
Co-authored-by: soyboy <85043086+sbvegan@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (4)
28-36: Outcome sections formatted well
The “What you’ll build” and “What you’ll learn” sections effectively list the expected outcomes. Consider applying Oxford commas in the lists for improved clarity.
117-117: Project setup instructions
The TypeScript project creation steps are clear. For enhanced readability, consider adding a comma after “for that” in line 117 (i.e., “and for that, we use …”).🧰 Tools
🪛 LanguageTool
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the@eth-optimism/viempackag...(FOR_THAT_COMMA)
158-158: Punctuation in explanation block
In the sentence beginning on line 158, inserting a comma after “message” (resulting in “To relay a message, we need …”) would enhance readability.🧰 Tools
🪛 LanguageTool
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....(IN_ORDER_TO_VB_COMMA)
218-223: Next steps section review
The “Next steps” section provides valuable links for further learning. Consider verifying that the names of referenced pages (e.g., “SuperchainWETH Guide”) are consistently capitalized according to the project’s naming conventions.🧰 Tools
🪛 LanguageTool
[grammar] ~220-~220: This sentence should probably be started with a verb instead of the noun ‘Checkout’. If not, consider inserting a comma for better clarity.
Context: ... 180gwei). ## Next steps * Checkout the [SuperchainWETH guide](/stack/inter...(SENT_START_NN_DT)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx(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/stack/interop/tutorials/bridge-crosschain-eth.mdx
🪛 LanguageTool
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
[typographical] ~117-~117: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the @eth-optimism/viem packag...
(FOR_THAT_COMMA)
[typographical] ~158-~158: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
🪛 Gitleaks (8.21.2)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
75-75: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (10)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (10)
7-7: Import enhancements
The addition of theTabscomponent alongsideCalloutandStepsmodernizes the layout and enables richer interactivity. Please ensure that all uses ofTabsin the document maintain a consistent style.
15-17: Clear callout messaging
The revised callout text succinctly describes the tutorial’s purpose and clearly directs users to the interoperable ETH explainer.
20-27: Updated overview section
The overview now concisely explains how crosschain ETH transfers are facilitated using the SuperchainWETH contract. Verify that all technical terms (e.g., “SuperchainWETH”) strictly follow the project’s capitalization standards.
37-46: Comprehensive prerequisites
The prerequisites, including technical knowledge, development environment, and required tools, are detailed clearly. This ensures users know what is needed before starting the tutorial.
88-94: Second tab setup is secure
Using a placeholder (0x<private key here>) for the private key in the second tab is appropriate and reduces the risk of exposing sensitive data.
95-100: Concise transaction commands
The commands to send ETH via the OptimismPortal contracts are clear. It may be helpful to remind users that the provided RPC endpoints are intended for testnet usage.
129-134: Cross-platform compatibility for ABI download
Usingwgeton line 132 may pose issues on operating systems where it isn’t available by default. Consider suggesting an alternative usingcurlor noting platform-specific instructions.
173-180: Execution instructions clarified
The “Run the example” steps are well detailed, providing a clear path for users to execute the TypeScript script.
181-212: Informative output blocks
The terminal output sections (covering pre-transfer, post-transfer on the source chain, and after relaying on the destination chain) clearly demonstrate the expected state at each step, which is beneficial for troubleshooting.
201-205: Clear transaction cost explanation
The explanation of how the initiating transaction affects the balance, including the cost implications, is well articulated and useful for user understanding.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (4)
28-30: "What you'll build" section wording.
The bullet point currently reads “A TypeScript application to transfer ETH chains.” Consider rephrasing it to “A TypeScript application to transfer ETH across chains” for improved clarity.
63-68: List item phrasing suggestion.
The steps for installing prerequisite software all begin with “Install.” Although using the imperative is appropriate, consider varying the wording slightly (e.g., “Set up [git]” or “Obtain Node”) to reduce repetition and enhance readability.🧰 Tools
🪛 LanguageTool
[style] ~67-~67: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ll Node. 1. Install [git](https://git-scm.com/book/en/v2/Ge...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
146-176: Detailed explanation and code references.
The explanation section effectively includes code references to various parts of thetransfer-eth.mtsfile, which clarifies important concepts (e.g., chain definitions, receipt handling, and message relaying). Consider inserting an additional comma after complex phrases (for example, “…the information in the receipt, and …”) to further improve readability.🧰 Tools
🪛 LanguageTool
[typographical] ~166-~166: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....(IN_ORDER_TO_VB_COMMA)
185-208: Reading results output section.
The displayed outputs for the transaction states (before and after the transfer) help users verify tutorial progress. A minor punctuation tweak—such as adding a comma after “After the initiating message”—could improve clarity.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx(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/stack/interop/tutorials/bridge-crosschain-eth.mdx
🧠 Learnings (1)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (1)
Learnt from: qbzzt
PR: ethereum-optimism/docs#1372
File: pages/stack/interop/tutorials/bridge-crosschain-eth.mdx:74-76
Timestamp: 2025-02-20T21:01:45.610Z
Learning: The private key `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80` is a well-known test key that comes with Foundry's `anvil` and is safe to use in documentation and tutorials for local development examples.
🪛 LanguageTool
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
[style] ~67-~67: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...ll Node. 1. Install [git](https://git-scm.com/book/en/v2/Ge...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[typographical] ~126-~126: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the @eth-optimism/viem packag...
(FOR_THAT_COMMA)
[typographical] ~166-~166: It seems that a comma is missing.
Context: ...3f5fd7 ``` To relay a message we need the information in the receipt....
(IN_ORDER_TO_VB_COMMA)
[uncategorized] ~209-~209: A comma might be missing here.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...
(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
🪛 Gitleaks (8.21.2)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx
84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (17)
pages/stack/interop/tutorials/bridge-crosschain-eth.mdx (17)
7-7: Import statement update.
The addition of theTabscomponent alongsideCalloutandStepsaligns with the new tutorial structure. Ensure that the naming conventions match the project documentation standards.
15-18: Callout content clarity.
The updated callout text clearly explains that the tutorial provides step‐by‐step instructions and properly links to the interoperable ETH explainer. The language is concise and consistent with documentation standards.
20-27: Overview section enhancements.
The revised overview clearly explains how crosschain ETH transfers are facilitated, references the correct contract, and details the different network environments. The content adheres to both clarity and style guidelines.
32-36: "What you'll learn" section review.
The learning outcomes are clearly outlined, detailing both on-chain and cross-chain ETH transfers as well as message relaying between chains. The language is direct and consistent with best practices.
37-61: Prerequisites and tools section review.
The new prerequisites, technical knowledge, development environment, and required tools sections are comprehensive and well organized. Verify that all tool names and proper nouns respect the capitalization rules defined in the project's nouns file.
70-74: Configure the network section clarity.
The instructions for selecting between Supersim and Interop devnet are clear and concise. The directive “Select the correct tab and follow the directions” effectively communicates the required action.
76-85: Tabs: First tab instructions and test private key.
The use of the Tabs component to differentiate between local (Supersim) and devnet configurations is effective. The included test private key is the well‐known Foundryanvilkey and is safe to use in documentation. It might be helpful to note explicitly that this key is for non–production use only.🧰 Tools
🪛 Gitleaks (8.21.2)
84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
87-94: Sanity check in first tab.
The details block with balance-check commands provides valuable context for verifying account balances on local blockchains. The structure and formatting are clear.
97-103: Tabs: Second tab configuration clarity.
The instructions correctly prompt the user to replace the placeholder for thePRIVATE_KEY. Ensure that the placeholder (<<<PRIVATE_KEY>>>) is clearly understood as a non-literal value that should be replaced during configuration.
104-110: Sending ETH command instructions.
The code block showing thecast sendcommands is clear. Verify that the syntax for specifying the ETH value (e.g.0.02ether) meets the expected format for the cast tool, and consider consistency in spacing if required.
111-120: Sanity check in second tab.
The inclusion of a details block with cast balance commands for the Interop devnet is well executed and provides useful validation steps.
124-135: TypeScript project setup instructions.
The step-by-step guidance for creating the TypeScript project (including directory creation, npm initialization, and dependency installation) is clear and complete.🧰 Tools
🪛 LanguageTool
[typographical] ~126-~126: Consider adding a comma here.
Context: ...g message on the destination chain, and for that we use [the@eth-optimism/viempackag...(FOR_THAT_COMMA)
136-140: Downloading ABI instructions.
The provided curl command to download the ABI forSuperchainWETHis straightforward and correctly formatted.
141-145: Instruction for placing the transfer script.
The instructions for placing the downloaded ABI intosrc/transfer-eth.mts—with the corresponding file reference and hash—are clear and enhance traceability.
178-184: Running the example instruction clarity.
The guidance to run the example usingnpx tsx src/transfer-eth.mtsis clear, concise, and consistent with standard practices.
209-232: Results repetition review.
The output block demonstrating the “After relaying message to destination chain” state appears twice. Verify that this repetition is intentional for instructional purposes; if not, consider consolidating the information to avoid redundancy.🧰 Tools
🪛 LanguageTool
[uncategorized] ~209-~209: A comma might be missing here.
Context: ...1 ``` After the initiating message the balance on the source chain is imme...(AI_EN_LECTOR_MISSING_PUNCTUATION_COMMA)
234-239: Next steps section review.
The “Next steps” section is well formatted and provides concise links to additional resources. Ensure that link titles and descriptions adhere to the title and capitalization standards defined in the documentation guidelines.
Description
A rewrite of the page, based on the standards we set in
message-passing.Tests
N/A
Additional context
N/A
Metadata
N/A