Skip to content

Bridging ETH to OP Mainnet With Viem #906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 49 commits into from
Oct 30, 2024
Merged

Bridging ETH to OP Mainnet With Viem #906

merged 49 commits into from
Oct 30, 2024

Conversation

krofax
Copy link
Collaborator

@krofax krofax commented Sep 18, 2024

Description

This tutorial explains how you can use the Viem to bridge ETH from L1 (Ethereum or Sepolia) to L2 (OP Mainnet or OP Sepolia), it deprecates the Optimism SDK.

Tests

Please describe any tests you've added. If you've added no tests, or left important behavior untested, please explain why not.

Additional context

Add any other context about the problem you're solving.

Metadata

@krofax krofax requested a review from a team as a code owner September 18, 2024 00:53
Copy link
Contributor

coderabbitai bot commented Sep 18, 2024

Warning

Rate limit exceeded

@krofax has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 27 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Files that changed from the base of the PR and between 4b20803 and 42a4289.

Walkthrough

The changes in this pull request involve updates to the package.json file by adding the viem dependency, and significant modifications to the cross-dom-bridge-eth.js script. The script has transitioned from using the ethers and @eth-optimism/sdk libraries to the viem library for Ethereum interactions. Additionally, the words.txt file has undergone case sensitivity adjustments for various terms, focusing on standardization without altering any underlying logic.

Changes

File Path Change Summary
package.json Added viem dependency with version ^2.21.18.
public/tutorials/cross-dom-bridge-eth.js Refactored code to utilize viem library, replacing ethers and @eth-optimism/sdk. Introduced depositETH and withdrawETH functions, and updated transaction handling logic.
words.txt Modified case sensitivity of various identifiers and terms for standardization purposes.
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx Updated tutorial to replace references to "Optimism SDK" with "Viem", including title, description, and procedural steps.

Possibly related issues

  • ethereum-optimism/docs#904: This issue discusses creating alternate snippets for the tutorial using Viem, which aligns with the changes made in this PR.
  • ethereum-optimism/docs#591: This issue aims to update SDK tutorials to use Viem, directly related to the changes in this PR.
  • ethereum-optimism/docs#592: This issue involves updating ERC-20 tutorials to use Viem, which is relevant to the changes made in this PR.
  • ethereum-optimism/docs#597: This issue focuses on updating tutorials for communicating between chains to use Viem, related to the modifications in this PR.
  • ethereum-optimism/docs#596: This issue discusses updating tutorials for chain operators to use Viem, which is pertinent to the changes in this PR.
  • ethereum-optimism/docs#595: This issue is about updating transaction cost estimation tutorials to use Viem, relevant to this PR's modifications.

Possibly related PRs

  • Added banner and notice page for SDK deprecation  #928: This PR discusses the deprecation of the Optimism SDK and the transition to the viem library, which is directly related to the addition of the viem dependency in the main PR.
  • Update sdk-deprecation.mdx #1025: This PR updates the documentation regarding the transition from the Optimism SDK to the viem library, reinforcing the relevance of the viem dependency added in the main PR.

Suggested reviewers

  • bradleycamacho
  • sbvegan
  • cpengilly

Suggested labels

flag:merge-pending-release


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

netlify bot commented Sep 18, 2024

Deploy Preview for docs-optimism ready!

Name Link
🔨 Latest commit 42a4289
🔍 Latest deploy log https://app.netlify.com/sites/docs-optimism/deploys/67220f9b95990b00088657ae
😎 Deploy Preview https://deploy-preview-906--docs-optimism.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range and nitpick comments (2)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

66-83: Well done!

The "Configure Environment Variables" section provides clear instructions for setting up the .env file and storing the necessary environment variables securely. The example format is easy to understand.

Consider rephrasing this sentence to improve clarity:

-You need a private key in order to sign transactions.
+You need a private key to sign transactions.

The alternative wording is more concise and avoids unnecessary wordiness.

Tools
LanguageTool

[style] ~68-~68: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


351-567: Comprehensive and well-structured!

The withdrawETH section is well-organized and follows a similar structure to the depositETH section, making it easy to follow and understand. The code blocks are properly formatted and include helpful comments explaining each step.

The "Important Considerations" section provides valuable information for users to keep in mind when working with withdrawals, such as the challenge period, gas costs, private key handling, and RPC endpoint security.

The "Next Steps" section encourages users to further explore and build upon the concepts learned in the tutorial, promoting continuous learning and development.

Consider rephrasing this sentence to strengthen the wording:

-[Standard Bridge guide](/builders/app-developers/bridging/standard-bridge) if you want to learn more about how the bridge work
+[Standard Bridge guide](/builders/app-developers/bridging/standard-bridge) if you want to learn more about how the bridge works

Adding the missing "s" at the end of "work" improves the grammar and clarity of the sentence.

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between db75b7e and 3409081.

Files selected for processing (2)
  • pages/builders/app-developers/tutorials/_meta.json (1 hunks)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
Additional context used
Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~17-~17: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~68-~68: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)

Additional comments not posted (9)
pages/builders/app-developers/tutorials/_meta.json (1)

4-4: Approved: Tutorial title update provides more specificity and introduces Viem as the bridging tool.

The change in the tutorial title from "Bridging ETH With the Optimism SDK" to "Bridging ETH to OP Mainnet With Viem" offers several improvements:

  1. It clearly specifies that the tutorial focuses on bridging ETH to the Optimism (OP) Mainnet, providing users with a more precise understanding of the tutorial's scope.
  2. It introduces Viem as the tool being used for the bridging process, indicating that the tutorial has been updated to leverage a different library or approach compared to the previous version, which used the Optimism SDK.

This update aligns with the PR summary, which highlights the transition from the Optimism SDK to Viem for bridging ETH. By providing a more specific and accurate title, users can better grasp the tutorial's content and the tools being utilized.

pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (8)

2-4: LGTM!

The updated title and description accurately reflect the purpose of the tutorial. The usage of proper nouns is correct.


19-28: Looks good!

The new "Prerequisites" section clearly outlines the requirements for following the tutorial. The language is concise and uses the imperative form.


29-64: Great job!

The "Required Dependencies" section provides clear instructions for setting up the project and installing the necessary dependencies. The code blocks are properly formatted with the correct language identifiers.


86-88: Important warning!

The callout box effectively warns users about the importance of keeping their private keys secure and avoiding committing them to version control. The language is clear and emphasizes the significance of the warning.


92-105: Excellent!

The "Import Dependencies" section provides clear instructions for importing the necessary dependencies into the project. The code block is properly formatted and uses the correct import statements from the viem library and dotenv.


113-170: Fantastic organization!

The use of tabs to organize the content for setting session variables greatly improves the readability and clarity of the tutorial. The code blocks are properly formatted and provide clear examples of how to set up the necessary variables and clients. The accompanying explanations are concise and informative.


172-204: Helpful information!

The section for getting ETH on Sepolia provides clear instructions and a helpful link to a faucet for obtaining the necessary ETH to follow the tutorial. The code block for checking wallet balances is properly formatted and includes informative comments.


206-337: Excellent breakdown!

The depositETH section is well-organized using tabs and steps, making it easy to understand the process. The code blocks are properly formatted and include helpful comments explaining each step. Providing the full code in a separate tab offers a comprehensive view of the depositETH function and its dependencies.

Copy link
Contributor

@brokewhale brokewhale left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, I think there might be a bit of a flow break in this tutorial when viewed from an absolute beginner's perspective. It'd be really helpful if we could make the steps as straightforward and easy to follow as possible.

The full code snippet approach is awesome. If we can have something like the CLI approach, along with a full code snippet, that would be fantastic.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 3409081 and 5b33b41.

Files selected for processing (1)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
Additional context used
Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)

Additional comments not posted (8)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (8)

2-4: LGTM! Title and description are clear and accurate.

The updated title and description accurately reflect the tutorial's focus on using Viem for bridging ETH between L1 and L2. The language is concise and informative.


33-79: LGTM! Project setup instructions are clear and comprehensive.

The project setup instructions are well-structured, providing a step-by-step guide for initializing the project, installing dependencies, and setting up environment variables. The use of pnpm is consistent with the PR objectives, and the security warning about private keys is appropriately emphasized.

Tools
LanguageTool

[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


104-163: LGTM! Session variables setup is well-structured and clear.

The session variables setup section effectively uses Tabs to organize different setup steps. The code snippets for creating accounts, RPC providers, and wallet clients are correct and well-explained. The step-by-step approach makes it easy for users to follow along and understand each part of the setup process.


179-333: LGTM! Deposit ETH section is comprehensive and well-structured.

The "Deposit ETH" section effectively uses Tabs to organize the content, providing both step-by-step instructions and a full code example. The code snippets are clear, well-commented, and accurate. The inclusion of a callout for smart contract wallet users is a helpful addition for edge cases.


335-541: LGTM! Withdraw ETH section is comprehensive and well-structured.

The "Withdraw ETH" section effectively uses Tabs to organize the content, providing both step-by-step instructions and a full code example. The code snippets are clear, well-commented, and accurate. The inclusion of a callout about the challenge period on OP Sepolia is a helpful addition for users to understand the withdrawal process.


543-548: LGTM! Important considerations are well-summarized.

The "Important Considerations" section effectively highlights key points about the challenge period, gas costs, and security considerations. The information is concise, relevant, and provides valuable guidance for users implementing the bridging functionality.


553-557: LGTM! Next steps provide a good conclusion and direction for further development.

The "Next Steps" section effectively summarizes what the user has learned and suggests valuable improvements for production use. The mention of applying the same process to Ethereum and OP Mainnet is a helpful reminder of the tutorial's broader applicability.


9-24: ⚠️ Potential issue

Fix typo in Viem import statement.

The introduction and prerequisites are well-structured and informative. However, there's a minor typo in the Viem import statement.

Please update the import statement as follows:

-import { getL2TransactionHashes, publicActionsL2, walletActionsL1, getL2TransactionHashes } from 'viem/op-stack'
+import { getL2TransactionHashes, publicActionsL2, walletActionsL1 } from 'viem/op-stack'

The getL2TransactionHashes function is imported twice, which is unnecessary.

Likely invalid or redundant comment.

Tools
LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)

@krofax
Copy link
Collaborator Author

krofax commented Sep 24, 2024

Honestly, I think there might be a bit of a flow break in this tutorial when viewed from an absolute beginner's perspective. It'd be really helpful if we could make the steps as straightforward and easy to follow as possible.

The full code snippet approach is awesome. If we can have something like the CLI approach, along with a full code snippet, that would be fantastic.

What do you mean by a CLI approach?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🧹 Outside diff range and nitpick comments (4)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

15-15: Consider strengthening the wording.

To improve clarity and directness, consider revising the phrase "if you want to learn" to "to learn" in the following sentence:

-Make sure to check out the [Standard Bridge guide](/builders/app-developers/bridging/standard-bridge) if you want to learn more about how the bridge works under the hood.
+Make sure to check out the [Standard Bridge guide](/builders/app-developers/bridging/standard-bridge) to learn more about how the bridge works under the hood.

This change makes the sentence more concise and direct.

🧰 Tools
LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


60-60: Simplify wording to avoid wordiness.

Consider revising the phrase "in order to" to make the sentence more concise:

-You need a private key in order to sign transactions.
+You need a private key to sign transactions.

This change maintains the meaning while making the sentence more direct.

🧰 Tools
LanguageTool

[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)

public/tutorials/cross-dom-bridge-eth.js (2)

36-42: Add input validation for the 'amount' parameter

Currently, the depositETH function does not validate the amount input. Validating inputs helps prevent errors and ensures that the function behaves as expected.

Consider adding input validation at the start of the function:

 async function depositETH(amount) {
+    if (isNaN(amount) || Number(amount) <= 0) {
+        throw new Error('Invalid amount. Please enter a positive number.');
+    }
     try {
         // Build the deposit transaction parameters

This will alert the user if an invalid amount is provided.


63-65: Provide more detailed error handling

While the current catch block logs the error, providing more contextual information can aid in debugging.

Enhance the error handling with additional details:

 } catch (error) {
-    console.error('Error during deposit:', error);
+    console.error('Error during ETH deposit:', error.message);
+    if (error.response) {
+        console.error('Response data:', error.response.data);
+    }
 }

This will output the error message and any response data if available.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5b33b41 and 4b884a3.

📒 Files selected for processing (2)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
  • public/tutorials/cross-dom-bridge-eth.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)

🔇 Additional comments not posted (3)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

2-4: LGTM: Title and description are clear and follow guidelines.

The title uses proper title case, and the description effectively communicates the purpose of the tutorial. Good job!


1-548: Excellent tutorial on bridging ETH using Viem!

This tutorial provides a comprehensive guide for bridging ETH between L1 and L2 using the Viem library. The content is well-structured, with clear explanations and code snippets that follow best practices. The inclusion of important considerations and next steps adds valuable context for users.

Great job on creating an informative and user-friendly tutorial!

🧰 Tools
LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)

public/tutorials/cross-dom-bridge-eth.js (1)

45-45: Verify the availability of 'depositTransaction' method on 'walletClientL1'

The method depositTransaction might not be available on the walletClientL1 if it's not properly extended with the necessary actions.

Run the following script to confirm if depositTransaction is a method available on walletClientL1:

Ensure that walletActionsL1() includes the depositTransaction method.

krofax and others added 2 commits September 25, 2024 16:45

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (4)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (4)

11-12: Consider elaborating on Viem's safety features.

The introduction provides a good context for using Viem. To make it more informative, consider briefly mentioning specific safety features that Viem provides to prevent common mistakes. This will give readers a clearer understanding of Viem's advantages.


21-24: Specify the exact minimum Node.js version required.

The prerequisites are clear and relevant. However, for Node.js, consider specifying the exact minimum version required (e.g., "Node.js version 14.0.0 or later") instead of just saying "version 14 or later". This will help users ensure they have a compatible environment.


70-74: Consider using a more generic name for the private key variable.

The environment variables are set up correctly. However, the name TUTORIAL_PRIVATE_KEY might be confusing in a real-world scenario. Consider using a more generic name like WALLET_PRIVATE_KEY or simply PRIVATE_KEY. This will make the code more reusable outside of the tutorial context.


165-168: Consider making the "Get ETH on Sepolia" section more prominent.

The information about obtaining test ETH is crucial for users following the tutorial. Consider making this section more noticeable, perhaps by using a callout or adding a clear heading. This will ensure that users don't miss this important step.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 4b884a3 and 8d10886.

📒 Files selected for processing (2)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
  • public/tutorials/cross-dom-bridge-eth.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • public/tutorials/cross-dom-bridge-eth.js
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

GitHub Check: lint
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[warning] 537-537:
Marker style should be *


[warning] 537-537:
Incorrect list-item indent: add 2 spaces


[warning] 538-538:
Marker style should be *


[warning] 538-538:
Incorrect list-item indent: add 2 spaces


[warning] 539-539:
Marker style should be *


[warning] 539-539:
Incorrect list-item indent: add 2 spaces


[warning] 540-540:
Marker style should be *


[warning] 540-540:
Incorrect list-item indent: add 2 spaces

🔇 Additional comments not posted (5)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (5)

2-4: Title and description accurately reflect the tutorial content.

The updated title and description clearly communicate the purpose of the tutorial, which is to use Viem for bridging ETH between L1 and L2. This change aligns well with the tutorial's content.


55-56: Dependency installation command is correct and complete.

The pnpm add viem dotenv command correctly installs the necessary dependencies for the tutorial. This ensures that users have all the required packages to follow along.


88-95: Imports and dotenv configuration are correct and complete.

The necessary modules from viem and other packages are correctly imported. The dotenv configuration is properly set up, ensuring that environment variables will be loaded. This provides a solid foundation for the rest of the tutorial.


174-318: Deposit ETH function is well-structured and includes necessary safeguards.

The deposit function is explained in a clear, step-by-step manner. It includes proper error handling and logging, which is crucial for debugging and user feedback. The callout about smart contract wallets is a valuable addition for safety. This section provides a comprehensive guide for users to deposit ETH.


332-532: Withdraw ETH function is comprehensive and well-explained.

The withdrawal process is explained in great detail, including all necessary steps such as proving and finalizing the withdrawal. The inclusion of information about the challenge period is crucial for users to understand the complete process. This section provides a thorough guide for withdrawing ETH from L2 to L1.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (2)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

17-29: Consider clarifying the pnpm installation command.

The prerequisites section is comprehensive and relevant. However, the pnpm installation command could be more explicit about its global nature.

Consider updating the pnpm installation command for clarity:

-npm install -g pnpm
+npm install --global pnpm

This change makes it more evident that pnpm is being installed globally.


330-531: Consider adding more context to the withdrawal process.

The deposit and withdrawal sections provide detailed steps and code snippets, which is excellent. However, the withdrawal process, particularly the waiting periods, could benefit from additional explanation.

Consider adding brief explanations for the following steps in the withdrawal process:

  1. Why the waitToProve step is necessary.
  2. The purpose of the proveWithdrawal step.
  3. Why there's a waiting period before finalization and how long it typically takes.

This additional context will help users better understand the withdrawal process and set appropriate expectations for transaction times.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 8d10886 and e1968a9.

📒 Files selected for processing (2)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
  • public/tutorials/cross-dom-bridge-eth.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • public/tutorials/cross-dom-bridge-eth.js
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
🪛 LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

🔇 Additional comments (3)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (3)

2-12: LGTM! Clear and informative introduction.

The title, description, and introduction effectively communicate the purpose of the tutorial and highlight the use of the viem/op-stack library. The content is well-structured and provides a good overview for the reader.


33-79: LGTM! Well-structured setup instructions.

The project setup section provides clear, step-by-step instructions for initializing the project, installing dependencies, and configuring environment variables. The security warning about private keys is an important inclusion.

🧰 Tools
🪛 LanguageTool

[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


1-548: Overall, an excellent and comprehensive tutorial.

This tutorial provides a thorough guide for bridging ETH between L1 and L2 using Viem. The content is well-structured, with clear explanations and code examples. The suggested improvements, if implemented, will further enhance the tutorial's clarity and user-friendliness.

Key strengths:

  1. Clear introduction and prerequisites
  2. Well-organized setup instructions
  3. Detailed explanations of deposit and withdrawal processes

Areas for improvement:

  1. Removing duplicate imports
  2. Correcting the L2 wallet client setup
  3. Adding more context to the withdrawal process
  4. Enhancing the Next Steps section

Great job on creating this valuable resource for developers!

🧰 Tools
🪛 LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between e1968a9 and 27d7848.

📒 Files selected for processing (1)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
🪛 LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

🔇 Additional comments (6)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (6)

2-4: LGTM: Title and description accurately reflect the tutorial content.

The updated title and description clearly communicate the purpose of the tutorial, which is to bridge ETH using Viem. This change aligns well with the tutorial's content.


9-29: LGTM: Comprehensive introduction and prerequisites.

The introduction clearly explains the purpose of the tutorial and the use of the Viem library. The prerequisites are well-defined, including necessary background knowledge and tools. The inclusion of pnpm installation instructions is helpful for users who may not have it installed.

🧰 Tools
🪛 LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


33-79: LGTM: Clear and comprehensive project setup instructions.

The project setup instructions are well-structured and easy to follow. They cover all necessary steps, including project initialization, dependency installation, and environment variable setup. The warning about private key security is a crucial reminder for users.

🧰 Tools
🪛 LanguageTool

[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


172-316: LGTM: Comprehensive and clear ETH deposit instructions.

The ETH deposit section provides clear, step-by-step instructions with accompanying code snippets. The use of tabs to separate the step-by-step process from the full code example is helpful for users with different levels of experience. The code appears correct and follows best practices.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)


330-531: LGTM: Detailed and accurate ETH withdrawal instructions.

The ETH withdrawal section provides a comprehensive guide to the withdrawal process, including building the transaction, proving the withdrawal, and finalizing it. The step-by-step instructions with code snippets are clear and easy to follow. The inclusion of a full code example is beneficial for users who prefer to see the entire process at once.


1-548: Overall, a well-structured and informative tutorial with minor improvements needed.

This tutorial on bridging ETH to OP Mainnet using Viem is comprehensive and well-organized. It covers all necessary steps from setup to execution, providing clear instructions and code examples throughout. The use of Tabs and Steps components enhances readability and user experience.

A few minor issues were identified:

  1. A duplicate import in the dependencies section.
  2. An incorrect extension in the L2 wallet client setup.
  3. Formatting inconsistencies in the Important Considerations section.
  4. The Next Steps section could be more engaging and actionable.

Addressing these issues will further improve the quality of this already valuable tutorial. Great job on creating a resource that will be helpful for developers working with Layer 2 solutions!

🧰 Tools
🪛 LanguageTool

[style] ~15-~15: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~60-~60: Consider a shorter alternative to avoid wordiness.
Context: ...riables} You need a private key in order to sign transactions. Create a .env fi...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~172-~172: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

504-511: Improve formatting in the Important Considerations section

The content of this section is crucial for users to understand the implications of bridging ETH. To improve readability and consistency, update the formatting as follows:

 <Callout type="warning">
-  *   **Challenge Period**: The 7-day waiting period is crucial for security.
-  *   **Gas Costs**: Withdrawals involve transactions on both L2 and L1, each incurring gas fees.
-  *   **Private Key Handling**: Use secure key management practices in real applications.
-  *   **RPC Endpoint Security**: Keep your Alchemy API key (or any RPC endpoint) secure.
+  * **Challenge Period**: The 7-day waiting period is crucial for security.
+  * **Gas Costs**: Withdrawals involve transactions on both L2 and L1, each incurring gas fees.
+  * **Private Key Handling**: Use secure key management practices in real applications.
+  * **RPC Endpoint Security**: Keep your Alchemy API key (or any RPC endpoint) secure.
 </Callout>

This change ensures consistent list item formatting and improves readability.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 27d7848 and 5dec40d.

📒 Files selected for processing (1)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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. Use bold for prominence instead of all caps or italics.
  • Ensure proper nouns are capitalized in sentences.
  • Apply the Oxford comma.
  • Use proper title case for headers, 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).
    "
🪛 LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~17-~17: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~23-~23: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...are included in Viem by default. If you want to use a network that isn't included by de...

(REP_WANT_TO_VB)

🪛 GitHub Check: lint
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[warning] 27-27:
Incorrect list-item indent: add 2 spaces


[warning] 28-28:
Incorrect list-item indent: add 2 spaces

🔇 Additional comments (2)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

2-4: LGTM: Updated metadata and imports for Viem tutorial

The title, description, and imports have been correctly updated to reflect the transition from the Optimism SDK to Viem for bridging ETH. This change aligns well with the tutorial's new focus.

Also applies to: 10-14


Line range hint 1-519: Overall: Excellent tutorial on bridging ETH with Viem

This tutorial provides a comprehensive and well-structured guide for bridging ETH using Viem. The transition from the Optimism SDK to Viem has been handled effectively, with clear explanations and code examples. The step-by-step instructions for both depositing and withdrawing ETH are detailed and easy to follow.

Key strengths:

  1. Clear introduction and setup instructions
  2. Comprehensive code examples for deposit and withdrawal functions
  3. Important considerations highlighted for users
  4. Helpful next steps for further development

The suggested improvements in the previous comments will further enhance the quality and user-friendliness of this tutorial. Great job on creating a valuable resource for developers working with OP Stack and Viem!

🧰 Tools
🪛 LanguageTool

[style] ~80-~80: Consider a shorter alternative to avoid wordiness.
Context: ...our Environment You need a private key in order to sign transactions. Set your private key...

(IN_ORDER_TO_PREMIUM)

krofax and others added 7 commits October 25, 2024 13:18

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Bradley Camacho <[email protected]>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Outside diff range and nitpick comments (3)
public/tutorials/cross-dom-bridge-eth.js (1)

3-6: Consider removing unused imports.

The formatEther utility is only used once, and some imported actions might not be necessary. Consider reviewing and removing unused imports to keep the code clean.

pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

82-82: Add missing comma.

Add a comma after "To start the Node REPL" for proper grammar.

-To start the Node REPL run the following command in your terminal:
+To start the Node REPL, run the following command in your terminal:
🧰 Tools
🪛 LanguageTool

[uncategorized] ~82-~82: Possible missing comma found.
Context: ...o interact with Viem. To start the Node REPL run the following command in your termi...

(AI_HYDRA_LEO_MISSING_COMMA)


137-137: Add missing comma.

Add a comma after "Now that you have some ETH on L1" for proper grammar.

-Now that you have some ETH on L1 you can deposit that ETH
+Now that you have some ETH on L1, you can deposit that ETH
🧰 Tools
🪛 LanguageTool

[uncategorized] ~137-~137: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5841509 and 5036478.

📒 Files selected for processing (2)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (4 hunks)
  • public/tutorials/cross-dom-bridge-eth.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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 headers, 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).
  • Use sentence case for H1, H2, and H3 headers, capitalizing only the first word and any proper nouns.
  • For all headers (H1, H2, H3), do not change the capitalization of proper nouns; keep them as they are.
    "
🪛 LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~16-~16: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~22-~22: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...are included in Viem by default. If you want to use a network that isn't included by de...

(REP_WANT_TO_VB)


[style] ~71-~71: Consider a shorter alternative to avoid wordiness.
Context: ...our Environment You need a private key in order to sign transactions. Set your private key...

(IN_ORDER_TO_PREMIUM)


[uncategorized] ~82-~82: Possible missing comma found.
Context: ...o interact with Viem. To start the Node REPL run the following command in your termi...

(AI_HYDRA_LEO_MISSING_COMMA)


[uncategorized] ~137-~137: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)

🔇 Additional comments (6)
public/tutorials/cross-dom-bridge-eth.js (1)

13-36: 🛠️ Refactor suggestion

Make RPC endpoints configurable.

Hardcoding RPC URLs reduces flexibility and makes it harder to switch between different environments.

Extract RPC URLs to environment variables:

+const L1_RPC_URL = process.env.L1_RPC_URL || 'https://rpc.ankr.com/eth_sepolia';
+const L2_RPC_URL = process.env.L2_RPC_URL || 'https://sepolia.optimism.io';

 const publicClientL1 = createPublicClient({
     chain: sepolia,
-    transport: http("https://rpc.ankr.com/eth_sepolia"),
+    transport: http(L1_RPC_URL),
 }).extend(publicActionsL1())

Apply similar changes to other client configurations.

Likely invalid or redundant comment.

pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (5)

2-4: LGTM!

The front matter is well-structured with a clear title and description. The use of lowercase "viem" is correct according to the official documentation.


31-57: LGTM!

The project setup instructions are clear, well-organized, and follow a logical sequence. The use of the Steps component enhances readability.


137-201: LGTM!

The deposit ETH section is well-structured with clear step-by-step instructions. The use of Tabs and Steps components improves readability and organization.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~137-~137: Possible missing comma found.
Context: ...osit ETH Now that you have some ETH on L1 you can deposit that ETH into the `L1St...

(AI_HYDRA_LEO_MISSING_COMMA)


203-289: LGTM!

The withdraw ETH section provides comprehensive instructions with clear explanations of the withdrawal process, including important information about waiting periods and proof requirements.


124-124: ⚠️ Potential issue

Fix L2 wallet client setup.

The L2 wallet client is incorrectly using walletActionsL1(). It should use walletActionsL2() for proper L2 functionality.

-}).extend(walletActionsL1());
+}).extend(walletActionsL2());

Likely invalid or redundant comment.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (3)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (3)

20-22: Add specific network information.

Consider listing the specific networks that are supported out of the box and providing an example of how to add a custom network configuration.

🧰 Tools
🪛 LanguageTool

[style] ~22-~22: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...are included in Viem by default. If you want to use a network that isn't included by de...

(REP_WANT_TO_VB)


Line range hint 27-28: Fix list item indentation.

Adjust the indentation of the dependency list items for consistency with the documentation style.

-* [node](https://nodejs.org/en/)
-* [pnpm](https://pnpm.io/installation)
+  * [node](https://nodejs.org/en/)
+  * [pnpm](https://pnpm.io/installation)

299-302: Enhance the Next Steps section.

Consider expanding this section to:

  1. Add links to relevant resources for UI development
  2. Provide examples of error handling patterns
  3. Include a link to the community forums for support
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5036478 and 4b20803.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (3)
  • next-env.d.ts (1 hunks)
  • pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (4 hunks)
  • words.txt (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • next-env.d.ts
🧰 Additional context used
📓 Path-based instructions (1)
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (1)

Pattern **/*.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 headers, 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).
  • Use sentence case for H1, H2, and H3 headers, capitalizing only the first word and any proper nouns.
  • For all headers (H1, H2, H3), do not change the capitalization of proper nouns; keep them as they are.
    "
🪛 LanguageTool
pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx

[style] ~16-~16: Consider using an alternative to strengthen your wording.
Context: ...lopers/bridging/standard-bridge) if you want to learn more about how the bridge work...

(WANT_KEEN)


[style] ~22-~22: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...are included in Viem by default. If you want to use a network that isn't included by de...

(REP_WANT_TO_VB)


[style] ~71-~71: Consider a shorter alternative to avoid wordiness.
Context: ...our environment You need a private key in order to sign transactions. Set your private key...

(IN_ORDER_TO_PREMIUM)

words.txt

[duplication] ~382-~382: Möglicher Tippfehler: ein Wort wird wiederholt
Context: ...E verkle VHOSTS vhosts Viem viem Viem's VMDEBUG vmdebug VMODULE vmodule wagmi Warpcast XORI xte...

(GERMAN_WORD_REPEAT_RULE)

🔇 Additional comments (4)
words.txt (2)

Line range hint 1-381: LGTM! Comprehensive blockchain terminology coverage.

The file maintains a thorough collection of blockchain-related terms with appropriate case variations. The terminology is technically accurate and includes all necessary variations for documentation purposes.

Also applies to: 383-999

🧰 Tools
🪛 LanguageTool

[duplication] ~379-~379: Möglicher Tippfehler: ein Wort wird wiederholt
Context: ...mitted UPNP VERKLE verkle VHOSTS vhosts Viem viem Viem's VMDEBUG vmdebug VMODULE vmodule ...

(GERMAN_WORD_REPEAT_RULE)


[duplication] ~382-~382: Möglicher Tippfehler: ein Wort wird wiederholt
Context: ...E verkle VHOSTS vhosts Viem viem Viem's VMDEBUG vmdebug VMODULE vmodule wagmi Warpcast XORI xte...

(GERMAN_WORD_REPEAT_RULE)


[duplication] ~384-~384: Möglicher Tippfehler: ein Wort wird wiederholt
Context: ...vhosts Viem viem Viem's VMDEBUG vmdebug VMODULE vmodule wagmi Warpcast XORI xtensibility ZKPs Z...

(GERMAN_WORD_REPEAT_RULE)


382-382: Verify Viem terminology usage in documentation.

The Viem-related entries are correctly added. Since this PR transitions from ethers/Optimism SDK to Viem, let's verify the terminology usage in the documentation.

✅ Verification successful

Viem terminology usage is consistent across documentation

The verification shows consistent and proper usage of Viem terminology across the documentation:

  • Correct capitalization in dictionary entries: "Viem", "viem", and "Viem's"
  • Consistent usage of viem (lowercase, with backticks) when referring to the library in technical documentation
  • Clear documentation of the SDK deprecation and migration to Viem
  • Comprehensive coverage in tutorials and guides with proper terminology
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify Viem terminology usage in documentation files
# Expected: Find references to Viem in documentation to ensure consistent usage

# Search for Viem references in markdown and documentation files
echo "Searching for Viem usage in documentation..."
rg -i "viem" -g "*.md" -g "*.mdx" -g "*.txt"

Length of output: 7308

🧰 Tools
🪛 LanguageTool

[duplication] ~382-~382: Möglicher Tippfehler: ein Wort wird wiederholt
Context: ...E verkle VHOSTS vhosts Viem viem Viem's VMDEBUG vmdebug VMODULE vmodule wagmi Warpcast XORI xte...

(GERMAN_WORD_REPEAT_RULE)

pages/builders/app-developers/tutorials/cross-dom-bridge-eth.mdx (2)

228-228: Clarify the waiting period.

The statement "Wait one hour (max)" needs clarification. Is this specific to OP Sepolia, or does it apply to all networks?


124-124: ⚠️ Potential issue

Fix L2 wallet client setup.

The L2 wallet client is using walletActionsL1() instead of walletActionsL2(). This needs to be corrected for proper functionality.

-}).extend(walletActionsL1());
+}).extend(walletActionsL2());

Likely invalid or redundant comment.

@fujianggara10
Copy link

Good job fellow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants