Use the @eth-optimism/viem package to transfer ERC-20 tokens #1470
Conversation
📝 WalkthroughWalkthroughThis pull request updates several project configurations and source files to adjust dependency management and Ethereum interactions. In the CI/CD configurations (CircleCI and Netlify), the dependency installation command has been modified to include the Sequence Diagram(s)sequenceDiagram
participant U as User
participant VC as Viem Client
participant BS as Bridge Service
U->>VC: Initialize wallet (createWalletClient) and public client (createPublicClient)
U->>BS: Invoke bridgeTokensToL2()
BS->>VC: Check L1 token balance and approve deposit
VC->>BS: Execute depositERC20() for L2 deposit
BS-->>U: Return deposit transaction status
U->>BS: Optionally, invoke withdrawTokensToL1()
BS->>VC: Check L2 token balance and initiate withdrawal
VC->>BS: Execute withdrawOptimismERC20()
BS-->>U: Return withdrawal transaction status
Possibly related PRs
Suggested reviewers
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
🪧 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
|
✅ Deploy Preview for docs-optimism ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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 (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (2)
45-47: Suggestion: Vary Wording.
The description of network support repeats similar phrasing between consecutive lines. Consider rephrasing one of the sentences to add variety and enhance readability.🧰 Tools
🪛 LanguageTool
[style] ~46-~46: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...(REP_WANT_TO_VB)
337-343: Update Conclusion Reference.
The conclusion currently states, "You've just deposited and withdrawn tokens using the Optimism SDK." For consistency, please update this to reference the@eth-optimism/viempackage instead.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
.circleci/config.yml(1 hunks)netlify.toml(1 hunks)package.json(2 hunks)pages/app-developers/transactions/estimates.mdx(1 hunks)pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(7 hunks)
✅ Files skipped from review due to trivial changes (1)
- pages/app-developers/transactions/estimates.mdx
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with ...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~46-~46: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...
(REP_WANT_TO_VB)
⏰ 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 (9)
.circleci/config.yml (1)
47-47: Updated Dependency Installation Command.
The command now includes the--no-frozen-lockfileflag, ensuring that lockfile updates are allowed during installation. This change aligns with the modifications in Netlify and should help avoid dependency mismatches.netlify.toml (2)
1-3: New Build Section Implementation.
The addition of the[build]section with an explicit build command and publish directory (".next") clearly defines the Netlify build process. This improves consistency with other parts of the configuration.
5-7: Updated Environment Variables for Build.
By removingPNPM_VERSIONand addingNPM_FLAGS(set to"--no-frozen-lockfile"), the configuration now standardizes dependency installation across environments.package.json (2)
31-31: New Dependency Added: @eth-optimism/viem.
The addition of@eth-optimism/viemat version^0.3.3reflects the tutorial’s shift away from the old Optimism SDK. Ensure that all documentation and code references are updated accordingly.
50-50: Updated viem Package Version.
Theviemdependency has been updated from^2.21.18to^2.21.37. Please verify compatibility with both the updated@eth-optimism/viempackage and any tutorial code sections that useviem.pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (4)
1-18: Frontmatter Validation.
The metadata in the frontmatter includes all the required fields (title, lang, description, content_type, topic, personas, and categories) and appears complete. Ensure that future updates keep this metadata current.
25-31: Updated Tutorial Title and Introduction.
The header and introductory paragraphs now correctly reference the@eth-optimism/viempackage, replacing outdated mentions of the Optimism SDK. This change improves clarity and consistency throughout the tutorial.
61-64: Updated Project Folder Name.
The command to create the project folder now usesbridging-erc20-tokensinstead of the old name. This renaming better reflects the tutorial’s focus and aligns with subsequent instructions.
72-76: Installation Steps Updated.
The steps now differentiate between installing the new@eth-optimism/viempackage (line 75) and theviempackage (line 81). Ensure that these commands match the versions specified inpackage.jsonand that the tutorial instructions are fully consistent.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (3)
public/tutorials/cross-dom-bridge-erc20.js (3)
49-54:⚠️ Potential issueIncompatible method calls after migration to viem
The code uses
faucet()andwait()methods that are incompatible with the new viem contract setup. The viem contract interface works differently from ethers.Update the contract interaction to use viem's patterns:
-console.log('Getting L1 tokens from faucet...') -tx = await l1ERC20.faucet() -await tx.wait() - -console.log('L1 balance:') -console.log((await l1ERC20.balanceOf(l1Wallet.address)).toString()) +console.log('Getting L1 tokens from faucet...') +const hash = await l1ERC20.write.faucet() +await l1Provider.waitForTransactionReceipt({ hash }) + +console.log('L1 balance:') +const balance = await l1ERC20.read.balanceOf([account.address]) +console.log(balance.toString())
79-82:⚠️ Potential issueUpdate L2 token contract instantiation to use viem
The L2 token contract is still using ethers while the L1 token was migrated to viem.
Update the L2 token contract to use viem's getContract:
-const l2ERC20 = new ethers.Contract(l2Token, erc20ABI, l2Wallet) - -console.log('L2 balance:') -console.log((await l2ERC20.balanceOf(l2Wallet.address)).toString()) +const l2ERC20 = getContract({ + address: l2Token, + abi: erc20ABI, + client: l2Wallet +}) + +console.log('L2 balance:') +const l2Balance = await l2ERC20.read.balanceOf([account.address]) +console.log(l2Balance.toString())
105-111: 🛠️ Refactor suggestionUpdate the block waiting logic for viem
The block waiting logic needs to be updated to use viem's provider interface.
Update the waiting logic to use viem's methods:
-const maxWaitTime = Date.now() + 120000 // 2 minutes in milliseconds -const currentBlock = await l1Provider.getBlockNumber() -while (await l1Provider.getBlockNumber() < currentBlock + 1) { - if (Date.now() > maxWaitTime) { - throw new Error('Timed out waiting for block to be produced') - } - await new Promise(resolve => setTimeout(resolve, 1000)) -} +const maxWaitTime = Date.now() + 120000 // 2 minutes in milliseconds +const currentBlock = await l1Provider.getBlockNumber() +while (await l1Provider.getBlockNumber() < currentBlock + 1) { + if (Date.now() > maxWaitTime) { + throw new Error('Timed out waiting for block to be produced') + } + await new Promise(resolve => setTimeout(resolve, 1000)) +}
🧹 Nitpick comments (3)
public/tutorials/cross-dom-bridge-erc20.js (3)
47-47: Remove commented codeThis commented line is no longer needed since the migration to viem is in progress.
-// const l1ERC20 = new ethers.Contract(l1Token, erc20ABI, l1Wallet)
3-6: Remove unnecessary semicolonsThe imports have unnecessary semicolons at the end which are flagged by ESLint.
- const { createWalletClient, createPublicClient, http, getContract } = require('viem'); - const { sepolia, optimismSepolia } = require('viem/chains'); - const { privateKeyToAccount } = require('viem/accounts'); - const { depositERC20 } = require('@eth-optimism/viem'); + const { createWalletClient, createPublicClient, http, getContract } = require('viem') + const { sepolia, optimismSepolia } = require('viem/chains') + const { privateKeyToAccount } = require('viem/accounts') + const { depositERC20 } = require('@eth-optimism/viem')🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
1-122: Complete migration from ethers/Optimism SDK to viem is requiredThis code is in a partially migrated state - it starts with viem setup but continues to use the Optimism SDK and ethers.js methods. A complete migration is needed for this tutorial to work properly.
The migration should follow these steps:
- Update all imports and client setup (already started)
- Update contract instantiation for both L1 and L2 (partially done)
- Update all transaction methods (faucet, balanceOf, etc.) to use viem patterns
- Replace all Optimism SDK messenger methods with equivalent @eth-optimism/viem functions
I recommend consulting the viem documentation (https://viem.sh/docs/getting-started.html) and the @eth-optimism/viem documentation for the correct patterns to use throughout the file.
🧰 Tools
🪛 Gitleaks (8.21.2)
36-36: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
37-37: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 Biome (1.9.4)
[error] 19-19: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
[error] 25-25: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 22-22: Extra semicolon.
(semi)
[error] 28-28: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
🪛 Gitleaks (8.21.2)
public/tutorials/cross-dom-bridge-erc20.js
36-36: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
37-37: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 Biome (1.9.4)
public/tutorials/cross-dom-bridge-erc20.js
[error] 19-19: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
[error] 25-25: This variable is used before its declaration.
The variable is declared here:
(lint/correctness/noInvalidUseBeforeDeclaration)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 22-22: Extra semicolon.
(semi)
[error] 28-28: Extra semicolon.
(semi)
krofax
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (1)
42-43: Consider adding variety to the sentence structureThe phrase "If you want to use..." appears in consecutive sentences, creating repetition.
-The `@eth-optimism/viem` package supports any of the [Superchain networks](/superchain/networks). -If you want to use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started). +The `@eth-optimism/viem` package supports any of the [Superchain networks](/superchain/networks). +For networks not included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started).🧰 Tools
🪛 LanguageTool
[style] ~43-~43: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...(REP_WANT_TO_VB)
public/tutorials/cross-dom-bridge-erc20.js (1)
1-250: Consider addressing linting issues with semicolonsThe static analysis tool flagged numerous instances of "Extra semicolon" throughout the file. While this doesn't affect functionality, consider standardizing your approach to semicolons for code consistency.
You can either:
- Remove all unnecessary semicolons if you prefer a semicolon-free style
- Configure your linter to accept your preferred semicolon usage
🧰 Tools
🪛 ESLint
[error] 2-2: Extra semicolon.
(semi)
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 30-30: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 38-38: Extra semicolon.
(semi)
[error] 39-39: Extra semicolon.
(semi)
[error] 84-84: Extra semicolon.
(semi)
[error] 87-87: Extra semicolon.
(semi)
[error] 88-88: Extra semicolon.
(semi)
[error] 91-91: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 99-99: Extra semicolon.
(semi)
[error] 102-102: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 113-113: Extra semicolon.
(semi)
[error] 116-116: Extra semicolon.
(semi)
[error] 119-119: Extra semicolon.
(semi)
[error] 121-121: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 133-133: Extra semicolon.
(semi)
[error] 135-135: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 144-144: Extra semicolon.
(semi)
[error] 146-146: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 158-158: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 178-178: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 189-189: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 195-195: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 200-200: Extra semicolon.
(semi)
[error] 207-207: Extra semicolon.
(semi)
[error] 209-209: Extra semicolon.
(semi)
[error] 212-212: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 217-217: Extra semicolon.
(semi)
[error] 218-218: Extra semicolon.
(semi)
[error] 219-219: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 229-229: Extra semicolon.
(semi)
[error] 232-232: Extra semicolon.
(semi)
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)words.txt(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 2-2: Extra semicolon.
(semi)
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 30-30: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 38-38: Extra semicolon.
(semi)
[error] 39-39: Extra semicolon.
(semi)
[error] 84-84: Extra semicolon.
(semi)
[error] 87-87: Extra semicolon.
(semi)
[error] 88-88: Extra semicolon.
(semi)
[error] 91-91: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 99-99: Extra semicolon.
(semi)
[error] 102-102: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 113-113: Extra semicolon.
(semi)
[error] 116-116: Extra semicolon.
(semi)
[error] 119-119: Extra semicolon.
(semi)
[error] 121-121: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 133-133: Extra semicolon.
(semi)
[error] 135-135: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 144-144: Extra semicolon.
(semi)
[error] 146-146: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 158-158: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 178-178: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 189-189: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 195-195: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 200-200: Extra semicolon.
(semi)
[error] 207-207: Extra semicolon.
(semi)
[error] 209-209: Extra semicolon.
(semi)
[error] 212-212: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 217-217: Extra semicolon.
(semi)
[error] 218-218: Extra semicolon.
(semi)
[error] 219-219: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 229-229: Extra semicolon.
(semi)
[error] 232-232: Extra semicolon.
(semi)
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...
(REP_WANT_TO_VB)
🔇 Additional comments (11)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (5)
2-2: Header uses correct sentence case formatThe title follows the required sentence case formatting for headers according to the style guidelines.
3-5: Description accurately reflects updated package usageThe description correctly states that the tutorial now uses the @eth-optimism/viem package for transferring ERC-20 tokens between layers.
22-22: Header maintains consistency with titleThe H1 header correctly matches the title in the frontmatter and follows the sentence case formatting guidelines.
25-27: Introduction clearly states the package changeThe introduction effectively explains the transition to @eth-optimism/viem package and its purpose.
301-302: Tutorial conclusion aligns with updated packageThe conclusion correctly references the new package and maintains consistency with the rest of the tutorial.
public/tutorials/cross-dom-bridge-erc20.js (6)
1-6: Well-structured imports using the new packageThe code correctly imports the necessary functions from
viemand@eth-optimism/viempackages.🧰 Tools
🪛 ESLint
[error] 2-2: Extra semicolon.
(semi)
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
15-35: Properly configured wallet and public clientsThe code correctly sets up wallet clients for signing transactions and public clients for reading from the blockchain for both L1 and L2.
🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 30-30: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
42-84: Comprehensive ERC20 ABI definitionThe ERC20 ABI includes all the necessary functions for the bridging operations: balanceOf, approve, allowance, decimals, and symbol.
🧰 Tools
🪛 ESLint
[error] 84-84: Extra semicolon.
(semi)
86-173: Well-structured bridging functionThe
bridgeTokensToL2function is well-organized with clear steps for:
- Checking initial balances
- Approving tokens for the bridge contract
- Depositing tokens to L2
- Checking final balances
The function includes proper error handling and informative logging.
🧰 Tools
🪛 ESLint
[error] 87-87: Extra semicolon.
(semi)
[error] 88-88: Extra semicolon.
(semi)
[error] 91-91: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 99-99: Extra semicolon.
(semi)
[error] 102-102: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 113-113: Extra semicolon.
(semi)
[error] 116-116: Extra semicolon.
(semi)
[error] 119-119: Extra semicolon.
(semi)
[error] 121-121: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 133-133: Extra semicolon.
(semi)
[error] 135-135: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 144-144: Extra semicolon.
(semi)
[error] 146-146: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 158-158: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
177-234: Comprehensive withdrawal implementationThe
withdrawTokensToL1function properly implements the withdrawal process using thewithdrawOptimismERC20function from the new package.🧰 Tools
🪛 ESLint
[error] 178-178: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 189-189: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 195-195: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 200-200: Extra semicolon.
(semi)
[error] 207-207: Extra semicolon.
(semi)
[error] 209-209: Extra semicolon.
(semi)
[error] 212-212: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 217-217: Extra semicolon.
(semi)
[error] 218-218: Extra semicolon.
(semi)
[error] 219-219: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 229-229: Extra semicolon.
(semi)
[error] 232-232: Extra semicolon.
(semi)
236-250: Program execution includes reasonable timeoutThe code includes a 60-second timeout between deposit and withdrawal operations to ensure tokens have arrived on L2 before attempting withdrawal.
🧰 Tools
🪛 ESLint
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
Outdated
Show resolved
Hide resolved
….mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
@ZakAyesh Can you please review this PR? |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (3)
42-44: Variety in phrasing is recommended for the supported networks section.
The sentence on line 43 ("If you want to use a network that isn't included by default, you can simply instantiate the package with the appropriate contract addresses.") reuses phrasing similar to nearby sections. Consider varying the language slightly to maintain reader engagement.🧰 Tools
🪛 LanguageTool
[style] ~43-~43: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...(REP_WANT_TO_VB)
262-265: Include the definite article for clarity.
In the sentence on line 264:"You'll use
opSepolia.contracts.l2StandardBridge.addressto get the standard bridge address and convert amount to proper units."
Consider updating it to:-... and convert amount to proper units. +... and convert the amount to proper units.This small change improves readability and clarity.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~264-~264: You might be missing the article “the” here.
Context: ...the standard bridge address and convert amount to proper units. ```js file=<rootDir...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
298-303: Consistent article usage is needed in concluding remarks.
On line 301, the sentence currently reads:"You've just deposited and withdrawn tokens using
@eth-optimism/viempackage."
It is clearer and more grammatically complete to include the definite article before the package name. For example:-using `@eth-optimism/viem` package. +using the `@eth-optimism/viem` package.This adjustment aligns with proper grammatical standards.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~301-~301: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...
(REP_WANT_TO_VB)
[uncategorized] ~264-~264: You might be missing the article “the” here.
Context: ...the standard bridge address and convert amount to proper units. ```js file=<rootDir...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
[uncategorized] ~301-~301: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (3)
1-18: Frontmatter metadata is complete and correct.
The frontmatter includes all required fields (title, description, lang, content_type, topic, personas, categories) with appropriate non-empty values. This ensures proper indexing and rendering of the tutorial.
20-31: Updated title and introduction reflect the new transfer package.
The new title “Bridging ERC-20 tokens to OP Mainnet” and the introductory paragraphs now explicitly mention the@eth-optimism/viempackage. This clarifies the shift from the previous SDK references and sets the proper context for the tutorial.🧰 Tools
🪛 LanguageTool
[style] ~31-~31: 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)
52-80: Project creation and dependency installation steps are clearly defined.
The instructions for creating the project folder, initializing the project, and installing both@eth-optimism/viemandviemare straightforward. Ensure that the versions referenced in the installation commands match those specified in the updatedpackage.jsonfor consistency.
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
public/tutorials/cross-dom-bridge-erc20.js (3)
2-250: Resolve extraneous semicolons.ESLint reports multiple “extra semicolon” issues throughout the file. Removing them helps maintain a consistent style and avoids lint errors.
To fix, remove unnecessary semicolons lines as flagged by ESLint. Here is an example diff for a few occurrences:
-const { createPublicClient, createWalletClient, http, parseUnits } = require('viem');; +const { createPublicClient, createWalletClient, http, parseUnits } = require('viem');🧰 Tools
🪛 Gitleaks (8.21.2)
38-38: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
39-39: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
[error] 2-2: Extra semicolon.
(semi)
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 30-30: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 38-38: Extra semicolon.
(semi)
[error] 39-39: Extra semicolon.
(semi)
[error] 84-84: Extra semicolon.
(semi)
[error] 87-87: Extra semicolon.
(semi)
[error] 88-88: Extra semicolon.
(semi)
[error] 91-91: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 99-99: Extra semicolon.
(semi)
[error] 102-102: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 113-113: Extra semicolon.
(semi)
[error] 116-116: Extra semicolon.
(semi)
[error] 119-119: Extra semicolon.
(semi)
[error] 121-121: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 133-133: Extra semicolon.
(semi)
[error] 135-135: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 144-144: Extra semicolon.
(semi)
[error] 146-146: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 158-158: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 178-178: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 189-189: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 195-195: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 200-200: Extra semicolon.
(semi)
[error] 207-207: Extra semicolon.
(semi)
[error] 209-209: Extra semicolon.
(semi)
[error] 212-212: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 217-217: Extra semicolon.
(semi)
[error] 218-218: Extra semicolon.
(semi)
[error] 219-219: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 229-229: Extra semicolon.
(semi)
[error] 232-232: Extra semicolon.
(semi)
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
104-104: Fetch token decimals instead of using a hardcoded value.You’re passing
18inparseUnits(amount, 18). If the token’s decimals differ from 18, this will lead to incorrect deposit amounts. Consider dynamically reading thedecimalsfrom the contract viaERC20_ABIand using that value.🧰 Tools
🪛 ESLint
[error] 104-104: Extra semicolon.
(semi)
236-250: Revisit the fixed 60-second delay before withdrawal.Waiting exactly 60 seconds may not guarantee that the L1→L2 deposit is fully processed in all environments or network conditions. Consider polling the L2 contract balance to confirm the deposit is complete before proceeding with a withdrawal.
🧰 Tools
🪛 ESLint
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
🪛 Gitleaks (8.21.2)
public/tutorials/cross-dom-bridge-erc20.js
38-38: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
39-39: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 2-2: Extra semicolon.
(semi)
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 30-30: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 38-38: Extra semicolon.
(semi)
[error] 39-39: Extra semicolon.
(semi)
[error] 84-84: Extra semicolon.
(semi)
[error] 87-87: Extra semicolon.
(semi)
[error] 88-88: Extra semicolon.
(semi)
[error] 91-91: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 99-99: Extra semicolon.
(semi)
[error] 102-102: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 113-113: Extra semicolon.
(semi)
[error] 116-116: Extra semicolon.
(semi)
[error] 119-119: Extra semicolon.
(semi)
[error] 121-121: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 133-133: Extra semicolon.
(semi)
[error] 135-135: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 144-144: Extra semicolon.
(semi)
[error] 146-146: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 158-158: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 178-178: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 189-189: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 195-195: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 200-200: Extra semicolon.
(semi)
[error] 207-207: Extra semicolon.
(semi)
[error] 209-209: Extra semicolon.
(semi)
[error] 212-212: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 217-217: Extra semicolon.
(semi)
[error] 218-218: Extra semicolon.
(semi)
[error] 219-219: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 229-229: Extra semicolon.
(semi)
[error] 232-232: Extra semicolon.
(semi)
[error] 237-237: Extra semicolon.
(semi)
[error] 240-240: Extra semicolon.
(semi)
[error] 243-243: Extra semicolon.
(semi)
[error] 244-244: Extra semicolon.
(semi)
[error] 247-247: Extra semicolon.
(semi)
[error] 249-249: Extra semicolon.
(semi)
[error] 250-250: Extra semicolon.
(semi)
🔇 Additional comments (2)
public/tutorials/cross-dom-bridge-erc20.js (2)
9-10: Validate the presence of private key.Currently, if the
TUTORIAL_PRIVATE_KEYenvironment variable is unset or empty, the script proceeds with an empty key, which may cause runtime errors or unexpected behavior.Consider adding a check like:
if (!PRIVATE_KEY) { throw new Error("TUTORIAL_PRIVATE_KEY is not set. Please provide a valid private key."); }🧰 Tools
🪛 ESLint
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
38-39: Confirm whether these addresses are indeed public or potentially sensitive secrets.Gitleaks detected them as “Generic API Key,” but they appear to be standard contract addresses. If these are merely publicly known addresses for tutorial or demonstration, no change is needed. If they were intended to be secret or configurable, move them to environment variables.
🧰 Tools
🪛 Gitleaks (8.21.2)
38-38: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
39-39: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
[error] 38-38: Extra semicolon.
(semi)
[error] 39-39: Extra semicolon.
(semi)
There was a problem hiding this comment.
Encountered the following error:
const { depositERC20, withdrawOptimismERC20 } = require('@eth-optimism/viem/actions');
Uncaught:
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/zakattak/docs-review/bridging-erc20-tokens/node_modules/.pnpm/@[email protected][email protected]/node_modules/@eth-optimism/viem/dist/actions/index.js not supported.
Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (4)
42-43: Consider rewording this sentence for better user experience.The current wording "If you want to use a network..." could be improved for friendliness.
-If you want to use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started). +To use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started).🧰 Tools
🪛 LanguageTool
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
266-266: Fix grammatical error: missing article "the".There's a missing "the" article before "amount".
-You'll use `opSepolia.contracts.l2StandardBridge.address` to get the standard bridge address and convert amount to proper units. +You'll use `opSepolia.contracts.l2StandardBridge.address` to get the standard bridge address and convert the amount to proper units.🧰 Tools
🪛 LanguageTool
[uncategorized] ~266-~266: You might be missing the article “the” here.
Context: ...the standard bridge address and convert amount to proper units. ```js file=<rootDir...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
273-274: Explanation of withdrawal process is technically accurate but could be clearer.The explanation of the withdrawal process is correct but the first sentence is incomplete or unclear. It starts with "To withdraw tokens from L2 to L1 is to prove..." which doesn't complete the thought properly.
-To withdraw tokens from L2 to L1 is to prove to the bridge on L1 that the withdrawal happened on L2. -We are going to use the `withdrawOptimismERC20` function for that. +To withdraw tokens from L2 to L1, you need to initiate the process on L2 and later prove to the bridge on L1 that the withdrawal happened. +We'll use the `withdrawOptimismERC20` function to start this process.
303-303: Fix grammatical error: missing article "the".There's a missing "the" article before "package".
-You've just deposited and withdrawn tokens using `@eth-optimism/viem` package. +You've just deposited and withdrawn tokens using the `@eth-optimism/viem` package.🧰 Tools
🪛 LanguageTool
[uncategorized] ~303-~303: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (3)
162-170: Consider removing duplicate balance checking code.This balance checking code is very similar to the code in lines 97-106, which could be refactored into a reusable function to reduce duplication.
+ // Function to check token balance + async function checkTokenBalance(publicClient, tokenAddress, walletAddress, label) { + const balance = await publicClient.readContract({ + address: tokenAddress, + abi: ERC20_ABI, + functionName: 'balanceOf', + args: [walletAddress] + }); + console.log(`${label} Token Balance: ${balance}`); + return balance; + } console.log("Checking initial balances..."); - const l1Balance = await l1PublicClient.readContract({ - address: L1_TOKEN_ADDRESS, - abi: ERC20_ABI, - functionName: 'balanceOf', - args: [walletAddress] - }); - - console.log(`L1 Token Balance: ${l1Balance}`); + const l1Balance = await checkTokenBalance(l1PublicClient, L1_TOKEN_ADDRESS, walletAddress, "L1"); // Later in the code... console.log("Checking initial balances..."); - const newl1Balance = await l1PublicClient.readContract({ - address: L1_TOKEN_ADDRESS, - abi: ERC20_ABI, - functionName: 'balanceOf', - args: [walletAddress] - }); - - console.log(`New L1 Token Balance: ${newl1Balance}`); + const newl1Balance = await checkTokenBalance(l1PublicClient, L1_TOKEN_ADDRESS, walletAddress, "New L1");🧰 Tools
🪛 ESLint
[error] 162-162: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
176-177: Redundant variable for the same wallet address.
walletWithdrawalAddressis assigned the same value aswalletAddresswhich was defined earlier. Using a single variable would be cleaner.- const walletWithdrawalAddress = account.address; + // Use walletAddress defined earlier instead of creating a new variableThen update subsequent code to use
walletAddressinstead ofwalletWithdrawalAddress.🧰 Tools
🪛 ESLint
[error] 176-176: Extra semicolon.
(semi)
1-228: Fix code style inconsistency with semicolons.There are numerous unnecessary semicolons throughout the file that are flagged by ESLint. While not affecting functionality, consistent code style improves readability and maintainability.
Consider running a linter to standardize the code style across the file, especially for semicolon usage.
🧰 Tools
🪛 Gitleaks (8.21.2)
48-48: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
49-49: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 15-15: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 22-22: Extra semicolon.
(semi)
[error] 23-23: Extra semicolon.
(semi)
[error] 29-29: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 40-40: Extra semicolon.
(semi)
[error] 45-45: Extra semicolon.
(semi)
[error] 48-48: Extra semicolon.
(semi)
[error] 49-49: Extra semicolon.
(semi)
[error] 94-94: Extra semicolon.
(semi)
[error] 96-96: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 98-98: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 106-106: Extra semicolon.
(semi)
[error] 109-109: Extra semicolon.
(semi)
[error] 110-110: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 120-120: Extra semicolon.
(semi)
[error] 123-123: Extra semicolon.
(semi)
[error] 126-126: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 131-131: Extra semicolon.
(semi)
[error] 140-140: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 148-148: Extra semicolon.
(semi)
[error] 150-150: Extra semicolon.
(semi)
[error] 151-151: Extra semicolon.
(semi)
[error] 159-159: Extra semicolon.
(semi)
[error] 160-160: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 172-172: Extra semicolon.
(semi)
[error] 176-176: Extra semicolon.
(semi)
[error] 179-179: Extra semicolon.
(semi)
[error] 186-186: Extra semicolon.
(semi)
[error] 188-188: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 192-192: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 203-203: Extra semicolon.
(semi)
[error] 205-205: Extra semicolon.
(semi)
[error] 208-208: Extra semicolon.
(semi)
[error] 211-211: Extra semicolon.
(semi)
[error] 213-213: Extra semicolon.
(semi)
[error] 214-214: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 223-223: Extra semicolon.
(semi)
[error] 225-225: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 228-228: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~266-~266: You might be missing the article “the” here.
Context: ...the standard bridge address and convert amount to proper units. ```js file=<rootDir...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
[uncategorized] ~303-~303: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🪛 Gitleaks (8.21.2)
public/tutorials/cross-dom-bridge-erc20.js
48-48: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
49-49: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 15-15: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 22-22: Extra semicolon.
(semi)
[error] 23-23: Extra semicolon.
(semi)
[error] 29-29: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 40-40: Extra semicolon.
(semi)
[error] 45-45: Extra semicolon.
(semi)
[error] 48-48: Extra semicolon.
(semi)
[error] 49-49: Extra semicolon.
(semi)
[error] 94-94: Extra semicolon.
(semi)
[error] 96-96: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 98-98: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 106-106: Extra semicolon.
(semi)
[error] 109-109: Extra semicolon.
(semi)
[error] 110-110: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 120-120: Extra semicolon.
(semi)
[error] 123-123: Extra semicolon.
(semi)
[error] 126-126: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 131-131: Extra semicolon.
(semi)
[error] 140-140: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 148-148: Extra semicolon.
(semi)
[error] 150-150: Extra semicolon.
(semi)
[error] 151-151: Extra semicolon.
(semi)
[error] 159-159: Extra semicolon.
(semi)
[error] 160-160: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 168-168: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 172-172: Extra semicolon.
(semi)
[error] 176-176: Extra semicolon.
(semi)
[error] 179-179: Extra semicolon.
(semi)
[error] 186-186: Extra semicolon.
(semi)
[error] 188-188: Extra semicolon.
(semi)
[error] 191-191: Extra semicolon.
(semi)
[error] 192-192: Extra semicolon.
(semi)
[error] 194-194: Extra semicolon.
(semi)
[error] 197-197: Extra semicolon.
(semi)
[error] 203-203: Extra semicolon.
(semi)
[error] 205-205: Extra semicolon.
(semi)
[error] 208-208: Extra semicolon.
(semi)
[error] 211-211: Extra semicolon.
(semi)
[error] 213-213: Extra semicolon.
(semi)
[error] 214-214: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
[error] 223-223: Extra semicolon.
(semi)
[error] 225-225: Extra semicolon.
(semi)
[error] 227-227: Extra semicolon.
(semi)
[error] 228-228: Extra semicolon.
(semi)
🔇 Additional comments (11)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (4)
2-5: Title and description updated appropriately for the new package.The title and description have been properly updated to reflect using
@eth-optimism/viempackage instead of the Optimism SDK, maintaining clarity about the tutorial's purpose.
25-27: Introduction correctly introduces the @eth-optimism/viem package.The introduction clearly explains the purpose of the tutorial and accurately introduces the
@eth-optimism/viempackage as the tool for bridging ERC-20 tokens.
59-60: Project folder name updated correctly.The project folder name has been appropriately updated from "op-sample-project" to "bridging-erc20-tokens" to match the tutorial's focus.
69-79: Installation steps updated to use @eth-optimism/viem.The installation steps have been properly updated to install the
@eth-optimism/viempackage andviemas dependencies instead of the previously used SDK.public/tutorials/cross-dom-bridge-erc20.js (7)
1-17: Imports and module structure use proper dynamic imports for REPL environment.The code correctly uses dynamic imports with await for ESM modules in a Node.js REPL environment, which is necessary since Node REPL doesn't natively support ES modules. The imports are well-organized and include all necessary components from viem and @eth-optimism/viem.
🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 15-15: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
19-20: Private key handling includes fallback value.Good handling of the private key from environment variables with a fallback to an empty string. This prevents potential errors if the environment variable is not set.
🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
22-45: Public RPC endpoints used instead of requiring API keys.The code now uses public RPC endpoints that don't require API keys, addressing the issue mentioned in previous comments. This improves accessibility for users following the tutorial.
🧰 Tools
🪛 ESLint
[error] 22-22: Extra semicolon.
(semi)
[error] 23-23: Extra semicolon.
(semi)
[error] 29-29: Extra semicolon.
(semi)
[error] 35-35: Extra semicolon.
(semi)
[error] 40-40: Extra semicolon.
(semi)
[error] 45-45: Extra semicolon.
(semi)
51-94: Comprehensive ERC-20 ABI with necessary functions for token interactions.The ERC-20 ABI includes all required functions for token interactions: balanceOf, approve, allowance, decimals, and symbol. This provides a complete interface for the tutorial's token operations.
🧰 Tools
🪛 ESLint
[error] 94-94: Extra semicolon.
(semi)
109-111: Bridge address correctly obtained from chain configuration.Using the chain configuration to get the bridge address (
opSepolia.contracts.l1StandardBridge[sepolia.id].address) is the correct approach, making the code more maintainable if addresses change.🧰 Tools
🪛 ESLint
[error] 109-109: Extra semicolon.
(semi)
[error] 110-110: Extra semicolon.
(semi)
[error] 111-111: Extra semicolon.
(semi)
197-205: Withdrawal transaction correctly uses withdrawOptimismERC20.The code appropriately uses the
withdrawOptimismERC20function from@eth-optimism/viem/actionswith all required parameters, including the token address, amount, recipient address, and minimum gas limit.🧰 Tools
🪛 ESLint
[error] 197-197: Extra semicolon.
(semi)
[error] 203-203: Extra semicolon.
(semi)
[error] 205-205: Extra semicolon.
(semi)
214-216: Informative messaging about withdrawal timeframes.The code provides clear information about the 7-day waiting period for withdrawals, which is crucial for users to understand the token bridging process. This is a good UX improvement.
🧰 Tools
🪛 ESLint
[error] 214-214: Extra semicolon.
(semi)
[error] 215-215: Extra semicolon.
(semi)
|
I've converted this to a draft, if you follow the tutorial it doesn't work. It can be taken out of draft when its ready for review. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (2)
42-43: Consider using more polite phrasingMinor suggestion to improve the tone of the documentation:
-If you want to use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started). +To use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started).🧰 Tools
🪛 LanguageTool
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
300-301: Fix missing article before package name-You've just deposited and withdrawn tokens using `@eth-optimism/viem` package. +You've just deposited and withdrawn tokens using the `@eth-optimism/viem` package.🧰 Tools
🪛 LanguageTool
[uncategorized] ~300-~300: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (3)
147-147: Consider using a more robust waiting mechanismThe code uses a simple setTimeout to wait for tokens to arrive on L2, but this approach is not robust as the actual time can vary depending on network conditions.
-await new Promise(resolve => setTimeout(resolve, 60000)); // 1 minute +// A more robust approach would be to poll until the tokens are received or a timeout is reached +const startTime = Date.now(); +let l2Balance; +do { + // Wait 10 seconds between checks + await new Promise(resolve => setTimeout(resolve, 10000)); + + // Check the balance + l2Balance = await publicClientL2.readContract({ + address: l2Token, + abi: erc20ABI, + functionName: 'balanceOf', + args: [account.address] + }); + + // If we have a balance or we've waited more than 5 minutes, exit the loop + if (l2Balance > 0n || Date.now() - startTime > 5 * 60 * 1000) break; +} while (true);🧰 Tools
🪛 ESLint
[error] 147-147: Extra semicolon.
(semi)
156-167: Withdrawal implementation is correct but message is potentially misleadingThe withdrawal implementation correctly uses the
withdrawOptimismERC20function with the required parameters. However, the console message on line 167 states it will take 7 days for tokens to be available on L1, which is accurate for mainnet but may be different for testnets.-console.log("Withdrawal process initiated! It will take 7 days for the tokens to be available on L1."); +console.log("Withdrawal process initiated! It will take 7 days for the tokens to be available on L1 for mainnet, or a shorter period for testnets.");🧰 Tools
🪛 ESLint
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
3-177: Fix semicolons for consistent styleThe static analysis indicates numerous "Extra semicolon" errors throughout the file. While these don't affect functionality, you should consider making the code style consistent by either removing all semicolons or ensuring they're present at the end of all statements.
Since most JavaScript style guides recommend using semicolons, and the majority of statements in this file already have them, I recommend adding semicolons where they're missing.
🧰 Tools
🪛 Gitleaks (8.21.2)
12-12: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
13-13: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 177-177: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 Gitleaks (8.21.2)
public/tutorials/cross-dom-bridge-erc20.js
12-12: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
13-13: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 177-177: Extra semicolon.
(semi)
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~300-~300: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🔇 Additional comments (15)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (9)
1-18: Review of frontmatter section: All required fields are presentThe frontmatter contains all required fields for a regular page including title, description, lang, topic, personas, categories, and content_type. The
topicfield has been updated to reflect the new tutorial focus.
22-31: The introduction clearly explains the purpose of the tutorialThe introduction effectively explains how to use
@eth-optimism/viemfor bridging ERC-20 tokens between L1 and L2, with appropriate explanation of what the package does.🧰 Tools
🪛 LanguageTool
[style] ~31-~31: 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)
57-61: Project folder name update looks goodThe project folder name has been updated from "op-sample-project" to "bridging-erc20-tokens" to better reflect the tutorial's purpose.
69-73: Package installation instructions updated correctlyThe instructions now correctly direct users to install the
@eth-optimism/viempackage.
75-79: Added viem installation stepGood addition of a separate step to install the viem package, which is required for the @eth-optimism/viem package to work properly.
129-133: Import instructions now reflect usage of ESM modulesThe tutorial now correctly explains how to import the @eth-optimism/viem package using dynamic imports with await, which is necessary when using the Node.js REPL.
206-212: Clear explanation of token approval processThe explanation of the token approval process is clear and accurate. It helps users understand why they need to approve the Standard Bridge to access their tokens before making a deposit.
225-235: Deposit implementation uses the new package correctlyThe deposit implementation correctly uses the new
depositERC20function from the @eth-optimism/viem package, and includes an important callout about smart contract wallets.
270-274: Withdrawal implementation uses the new package correctlyThe withdrawal implementation correctly uses the
withdrawOptimismERC20function from the @eth-optimism/viem package.public/tutorials/cross-dom-bridge-erc20.js (6)
3-10: The dynamic import approach is appropriate for Node.js REPLThe code correctly uses dynamic imports with await for ESM modules, which is necessary when using the Node.js REPL environment. The imports are well-organized, first importing viem core functionality, then accounts, chains, and finally the specific actions from @eth-optimism/viem.
🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
22-42: Client initialization follows viem best practicesThe code correctly creates separate public and wallet clients for both L1 and L2, which follows viem best practices. Public clients are used for reading from the blockchain, while wallet clients are used for sending transactions.
🧰 Tools
🪛 ESLint
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
44-95: Complete ERC20 ABI includes all necessary functionsThe ERC20 ABI definition is comprehensive and includes all the functions needed for this tutorial:
balanceOf,faucet, andapprove, with correct input and output types.🧰 Tools
🪛 ESLint
[error] 95-95: Extra semicolon.
(semi)
97-115: Faucet interaction is well-implementedThe code correctly interacts with the faucet function to get tokens and waits for the transaction to be mined before checking the balance. The code properly handles the async operations and shows the balance in a readable format using
formatEther.🧰 Tools
🪛 ESLint
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
117-128: Bridge approval uses the correct dynamic addressThe code gets the bridge address dynamically from the optimismSepolia chain configuration, which is a robust approach that will work even if the bridge address changes. The approval transaction is properly handled with correct parameters.
🧰 Tools
🪛 ESLint
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
130-144: Token deposit implementation is correctThe deposit implementation correctly uses the
depositERC20function from @eth-optimism/viem with all required parameters: token addresses, amount, target chain, recipient address, and gas limit. The code appropriately waits for the transaction receipt and provides clear console messages.🧰 Tools
🪛 ESLint
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
public/tutorials/cross-dom-bridge-erc20.js (1)
19-20:⚠️ Potential issueRemove API key placeholder from RPC URL
The L1 RPC URL contains a placeholder
<YOU_API_KEY>that will cause the code to fail. Based on past review comments, the author intended to use public RPCs that don't require API keys.-const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia/<YOU_API_KEY>'; +const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia';🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
🧹 Nitpick comments (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (1)
307-307: Add missing article "the" before package nameThere's a missing article in this sentence.
-You've just deposited and withdrawn tokens using `@eth-optimism/viem` package. +You've just deposited and withdrawn tokens using the `@eth-optimism/viem` package.🧰 Tools
🪛 LanguageTool
[uncategorized] ~307-~307: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (1)
177-183: Remove duplicate await keywordThere's a duplicate
awaitkeyword that could cause confusion.-const l1BalanceAfterDeposit = await await publicClientL1.readContract({ +const l1BalanceAfterDeposit = await publicClientL1.readContract({ address: l1Token, abi: erc20ABI, functionName: 'balanceOf', args: [account.address] }); console.log(`L1 Balance after deposit: ${formatEther(l1BalanceAfterDeposit)}`);🧰 Tools
🪛 ESLint
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~307-~307: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🪛 Gitleaks (8.21.2)
public/tutorials/cross-dom-bridge-erc20.js
12-12: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
13-13: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
[error] 185-185: Extra semicolon.
(semi)
🔇 Additional comments (10)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (6)
1-18: Frontmatter looks goodAll required metadata fields are present and properly formatted.
22-31: Well-structured introduction with clear explanation of the package functionThe introduction clearly explains the purpose of the
@eth-optimism/viempackage and how it's used for bridging ERC-20 tokens.🧰 Tools
🪛 LanguageTool
[style] ~31-~31: 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)
52-61: Project folder name updated correctlyThe project folder name has been updated from "op-sample-project" to "bridging-erc20-tokens", which better reflects the purpose of the tutorial.
124-133: Good explanation of ES module importsThe explanation of how to handle ESM modules in the Node.js REPL is clear and helpful, especially for users who might be unfamiliar with dynamic imports.
206-219: Clear explanation of the token approval processThe explanation of allowing the Standard Bridge to access tokens is clear and the added step about waiting for the approval transaction is important for user understanding.
307-309: Clear conclusion with next stepsThe conclusion effectively summarizes what the user has accomplished and how they can apply this knowledge to other networks.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~307-~307: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (4)
3-10: Clean dynamic imports for ESM modulesThe dynamic imports are well-structured for use in a Node.js REPL environment, making the tutorial easier to follow along.
🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
117-128: Good dynamic bridge address resolutionUsing
optimismSepolia.contracts.l1StandardBridge[sepolia.id].addressto dynamically get the bridge address is a robust approach that adapts to different network configurations.🧰 Tools
🪛 ESLint
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
156-167: Good implementation of token withdrawalThe withdrawal implementation using
withdrawOptimismERC20with proper parameters is clean and follows best practices. The comment explaining the 7-day waiting period for mainnet is important for user expectations.🧰 Tools
🪛 ESLint
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
169-175: L1 balance check after withdrawal happens too soonThe code checks the L1 balance immediately after initiating the withdrawal, but the tokens won't be available on L1 until the challenge period has passed (7 days on mainnet, shorter on testnets) and the withdrawal has been proven and finalized. This check will not show the updated balance.
Consider adding a comment to clarify this:
+// Note: This balance check is just to show the initial state. +// The tokens won't appear in this balance until after the challenge period +// and the withdrawal has been proven and finalized. const l1BalanceAgain = await publicClientL1.readContract({ address: l1Token, abi: erc20ABI, functionName: 'balanceOf', args: [account.address] }); console.log(`L1 Balance: ${formatEther(l1BalanceAgain)}`);🧰 Tools
🪛 ESLint
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
public/tutorials/cross-dom-bridge-erc20.js (2)
19-20:⚠️ Potential issueRemove API key placeholder from RPC URL
The L1 RPC URL contains a placeholder
<YOU_API_KEY>that will cause the code to fail. Based on past review comments, the author intended to use public RPCs that don't require API keys.-const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia/<YOU_API_KEY>'; +const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia';🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
169-175: 🛠️ Refactor suggestionL1 balance check after withdrawal happens too soon
The code checks the L1 balance immediately after initiating the withdrawal, but the tokens won't be available on L1 until the challenge period has passed (7 days on mainnet, shorter on testnets) and the withdrawal has been proven and finalized. This check will not show the updated balance.
Add a comment to clarify this:
+// Note: This balance check is just to show the initial state. +// The tokens won't appear in this balance until after the challenge period +// and the withdrawal has been proven and finalized. const l1BalanceAgain = await publicClientL1.readContract({ address: l1Token, abi: erc20ABI, functionName: 'balanceOf', args: [account.address] }); console.log(`L1 Balance: ${formatEther(l1BalanceAgain)}`);🧰 Tools
🪛 ESLint
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
🧹 Nitpick comments (3)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (1)
307-307: Add the article "the" before package nameYou're missing the article "the" before the package name.
-You've just deposited and withdrawn tokens using `@eth-optimism/viem` package. +You've just deposited and withdrawn tokens using the `@eth-optimism/viem` package.🧰 Tools
🪛 LanguageTool
[uncategorized] ~307-~307: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (2)
147-147: Consider a more robust waiting solutionThe current code uses a fixed 1-minute timeout to wait for tokens to arrive on L2. This approach isn't reliable as network conditions can vary significantly.
Instead, consider polling for the balance until it changes or implementing a more robust waiting mechanism:
-await new Promise(resolve => setTimeout(resolve, 60000)); // 1 minute +// Poll for the L2 balance change +const startTime = Date.now(); +const timeout = 5 * 60 * 1000; // 5 minutes timeout +let prevBalance = 0n; + +console.log('Polling for L2 balance changes...'); +while (Date.now() - startTime < timeout) { + const currentBalance = await publicClientL2.readContract({ + address: l2Token, + abi: erc20ABI, + functionName: 'balanceOf', + args: [account.address] + }); + + if (currentBalance > prevBalance) { + console.log('Detected L2 balance change!'); + break; + } + + console.log('Waiting for L2 balance to change...'); + await new Promise(resolve => setTimeout(resolve, 10000)); // Check every 10 seconds +} + +if (Date.now() - startTime >= timeout) { + console.log('Timed out waiting for L2 balance to change'); +}🧰 Tools
🪛 ESLint
[error] 147-147: Extra semicolon.
(semi)
167-167: Update withdrawal timing informationThe message about withdrawal timing is inaccurate. The challenge period is 7 days on mainnet, but it's much shorter on testnets like OP Sepolia.
-console.log("Withdrawal process initiated! It will take 7 days for the tokens to be available on L1."); +console.log("Withdrawal process initiated! It will take 7 days on mainnet or a few minutes on testnets like OP Sepolia for the tokens to be available on L1.");🧰 Tools
🪛 ESLint
[error] 167-167: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~43-~43: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~307-~307: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 156-156: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 163-163: Extra semicolon.
(semi)
[error] 165-165: Extra semicolon.
(semi)
[error] 166-166: Extra semicolon.
(semi)
[error] 167-167: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
[error] 185-185: Extra semicolon.
(semi)
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
public/tutorials/cross-dom-bridge-erc20.js (2)
19-20:⚠️ Potential issueRemove API key placeholder from RPC URL.
The L1 RPC URL contains a placeholder
<YOU_API_KEY>that will cause the code to fail. Based on past review comments, the author intended to use public RPCs that don't require API keys.-const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia/<YOU_API_KEY>'; +const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia';🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
156-162:⚠️ Potential issueFix duplicate await keyword and console log message.
There's a duplicate
awaitkeyword and the console log message should indicate L2 balance, not L1.-const l2BalanceAfterDeposit = await await publicClientL2.readContract({ +const l2BalanceAfterDeposit = await publicClientL2.readContract({ address: l2Token, abi: erc20ABI, functionName: 'balanceOf', args: [account.address] }); -console.log(`L1 Balance after deposit: ${formatEther(l2BalanceAfterDeposit)}`); +console.log(`L2 Balance after deposit: ${formatEther(l2BalanceAfterDeposit)}`);🧰 Tools
🪛 ESLint
[error] 161-161: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
🧹 Nitpick comments (4)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (2)
150-159: Good explanation of client setup.The explanation of the four different clients (L1/L2 Public and Wallet clients) helps users understand the architecture of the solution.
However, there's a missing comma after "Here we establish the connections to both networks".
-Here we establish the connections to both networks by creating four different clients: +Here, we establish the connections to both networks by creating four different clients:🧰 Tools
🪛 LanguageTool
[uncategorized] ~150-~150: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...(AI_HYDRA_LEO_MISSING_COMMA)
214-217: Clear explanation of balance checking.The explanation of checking the token balance is clear. There's a minor grammar issue with "returned in" instead of "returned as", but it doesn't affect understanding.
-The balance is returned in the smallest unit (wei), but we format it into a more readable form using the `formatEther` function since this token uses 18 decimal places. +The balance is returned as the smallest unit (wei), but we format it into a more readable form using the `formatEther` function, since this token uses 18 decimal places.🧰 Tools
🪛 LanguageTool
[grammar] ~216-~216: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...(RETURN_IN_THE)
[uncategorized] ~216-~216: Possible missing comma found.
Context: ...e readable form using theformatEtherfunction since this token uses 18 decimal places...(AI_HYDRA_LEO_MISSING_COMMA)
public/tutorials/cross-dom-bridge-erc20.js (2)
145-147: Add dynamic wait time for token bridging.The code uses a fixed 1-minute wait time, which might not be sufficient in all cases. Consider implementing a polling mechanism to check when tokens have arrived.
-await new Promise(resolve => setTimeout(resolve, 60000)); // 1 minute +// Poll for tokens to arrive on L2 with timeout +console.log('Polling for tokens to arrive on L2...'); +let attempts = 0; +let l2Balance = 0n; +while (attempts < 10) { + attempts++; + try { + l2Balance = await publicClientL2.readContract({ + address: l2Token, + abi: erc20ABI, + functionName: 'balanceOf', + args: [account.address] + }); + if (l2Balance > 0n) { + console.log(`Tokens detected on L2 after ${attempts} attempts!`); + break; + } + } catch (error) { + console.log(`Attempt ${attempts} failed, retrying in 10 seconds...`); + } + await new Promise(resolve => setTimeout(resolve, 10000)); // 10 seconds between attempts +}🧰 Tools
🪛 ESLint
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
177-183: Add note about L1 balance check after withdrawal.The code checks the L2 balance but doesn't clarify that a corresponding check on L1 would not show the withdrawn tokens until after the challenge period.
console.log(`L2 Balance after withdrawal: ${formatEther(l2Balance)}`); +// Note: At this point, we don't check the L1 balance because the tokens +// won't be available on L1 until after the challenge period (7 days on mainnet) +// and after the withdrawal has been proven and finalized. +console.log("To complete the withdrawal process, you would need to:"); +console.log("1. Wait for the challenge period to complete (~7 days on mainnet, shorter on testnets)"); +console.log("2. Prove the withdrawal with proveOptimismWithdrawal"); +console.log("3. Finalize the withdrawal with finalizeOptimismWithdrawal");🧰 Tools
🪛 ESLint
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 161-161: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 173-173: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
[error] 185-185: Extra semicolon.
(semi)
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~150-~150: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~192-~192: Loose punctuation mark.
Context: ...l critical functions: * balanceOf: Allows us to check token balances for a...
(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~216-~216: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...
(RETURN_IN_THE)
[uncategorized] ~216-~216: Possible missing comma found.
Context: ...e readable form using the formatEther function since this token uses 18 decimal places...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~291-~291: Did you mean “lowed”, “lowered”?
Context: ...been deducted. This balance should be lower by the amount we bridged, as those toke...
(SHOULD_BE_DO)
[misspelling] ~325-~325: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...
(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~325-~325: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...
(AI_HYDRA_LEO_MISSING_COMMA)
🔇 Additional comments (41)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (31)
2-2: The title looks good!The updated title matches the content of the tutorial and clearly states the purpose.
4-5: Description accurately reflects the content.The description properly explains that the tutorial uses the @eth-optimism/viem package to transfer ERC-20 tokens between Layer 1 and Layer 2.
22-26: Intro clearly explains the tutorial purpose.The introduction effectively communicates the tutorial's focus on using @eth-optimism/viem for bridging tokens and establishes the value proposition of the package.
28-28: Correctly references the Standard Bridge.The explanation of how @eth-optimism/viem uses the Standard Bridge contracts behind the scenes helps users understand the underlying architecture.
40-41: Good explanation of network support.This section clearly explains which networks are supported and how to use networks that aren't included by default.
🧰 Tools
🪛 LanguageTool
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
50-51: Clear setup instructions.The instructions for setting up the project with @eth-optimism/viem are straightforward and easy to follow.
57-58: Updated project folder name.The project folder name has been updated from "op-sample-project" to "bridging-erc20-tokens" to better reflect the purpose of the tutorial.
67-67: Correct package installation heading.The heading accurately reflects the package being installed.
70-70: Correct installation command.The installation command for @eth-optimism/viem is accurate.
73-73: Good addition of viem installation step.Adding a separate step for installing viem helps ensure users have all necessary dependencies.
76-76: Correct viem installation command.The installation command for viem is accurate.
111-111: Correctly references the new package.The text has been updated to reference @eth-optimism/viem instead of the Optimism SDK.
123-124: Good explanation of ESM imports.The explanation about ESM modules and dynamic imports with await is helpful for users who might not be familiar with these concepts.
127-127: Updated heading for import step.The heading correctly references @eth-optimism/viem instead of the previous SDK.
141-144: Clear explanation of the private key usage.The explanation about retrieving the private key from an environment variable and converting it to an account object is detailed and helpful.
165-169: Clear explanation of token addresses.The explanation of the L1 and L2 token addresses and the
oneTokenconstant is clear and helpful.
190-199: Detailed explanation of ERC20 ABI.The explanation of the ERC20 ABI functions is thorough and helps users understand the purpose of each function.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~192-~192: Loose punctuation mark.
Context: ...l critical functions: *balanceOf: Allows us to check token balances for a...(UNLIKELY_OPENING_PUNCTUATION)
205-208: Good explanation of the faucet function.The explanation of the faucet function is clear and helps users understand what it does.
230-232: Clear explanation of amount definition.The explanation of the
oneTokenvariable is clear and helpful.
236-236: Updated heading for standard bridge.The heading correctly references the Standard Bridge.
238-242: Good explanation of token approval process.The explanation of the ERC-20 token approval process is clear and helps users understand why this step is necessary.
248-251: Clear explanation of waiting for approval.The explanation of waiting for the approval transaction to be confirmed is thorough.
257-266: Excellent explanation of depositERC20 function.The explanation of the depositERC20 function and its parameters is comprehensive and clear.
274-276: Updated documentation link.The link to the @eth-optimism/viem documentation has been updated.
281-284: Good explanation of relay waiting.The explanation of waiting for the deposit to be relayed to L2 is clear and sets proper expectations about the timing.
290-293: Clear explanation of checking L1 balance.The explanation of checking the token balance on L1 after the deposit is clear.
🧰 Tools
🪛 LanguageTool
[grammar] ~291-~291: Did you mean “lowed”, “lowered”?
Context: ...been deducted. This balance should be lower by the amount we bridged, as those toke...(SHOULD_BE_DO)
299-302: Good explanation of L2 balance check.The explanation of checking the token balance on L2 is clear and helps users understand what to expect.
316-326: Thorough explanation of withdrawal process.The explanation of the withdrawOptimismERC20 function and its parameters is comprehensive. It also correctly mentions the 7-day challenge period, which is important for users to understand.
🧰 Tools
🪛 LanguageTool
[misspelling] ~325-~325: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~325-~325: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...(AI_HYDRA_LEO_MISSING_COMMA)
332-336: Clear explanation of waiting for withdrawal confirmation.The explanation of waiting for the withdrawal transaction to be confirmed on L2 is thorough and sets proper expectations.
347-350: Excellent explanation of L2 balance check after withdrawal.The explanation of checking the token balance on L2 after initiating the withdrawal is clear and sets proper expectations about the withdrawal process timeline.
358-359: Updated conclusion.The conclusion correctly references the @eth-optimism/viem package instead of the previous SDK.
public/tutorials/cross-dom-bridge-erc20.js (10)
3-10: Well-structured imports using dynamic import syntax.The imports are properly structured for use in a Node.js environment with dynamic imports, which matches the tutorial's explanation.
🧰 Tools
🪛 ESLint
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
12-14: Good token address and amount definitions.The token addresses are clearly defined, and the
oneTokenconstant is set to represent 1 full token in wei (10^18).🧰 Tools
🪛 ESLint
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
16-17: Properly handles private key.The code correctly retrieves the private key from an environment variable with a fallback empty string, and converts it to an account object.
🧰 Tools
🪛 ESLint
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
22-42: Well-structured client initialization.The code correctly initializes four clients (public and wallet clients for both L1 and L2) using the viem library.
🧰 Tools
🪛 ESLint
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
44-95: Comprehensive ERC20 ABI definition.The ERC20 ABI includes all necessary functions (balanceOf, faucet, approve) with proper input and output types.
🧰 Tools
🪛 ESLint
[error] 95-95: Extra semicolon.
(semi)
97-108: Proper faucet interaction and transaction handling.The code correctly interacts with the faucet function and waits for the transaction to be mined.
🧰 Tools
🪛 ESLint
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
109-115: Correct balance check implementation.The code properly reads the token balance and formats it for display.
🧰 Tools
🪛 ESLint
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
117-128: Good token approval implementation.The code dynamically retrieves the bridge address from the chain configuration and properly approves the token transfer.
🧰 Tools
🪛 ESLint
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
130-143: Well-implemented token deposit.The depositERC20 function is called with all required parameters and proper error handling.
🧰 Tools
🪛 ESLint
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
164-175: Good implementation of token withdrawal.The withdrawOptimismERC20 function is called with all required parameters and proper error handling.
🧰 Tools
🪛 ESLint
[error] 164-164: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 173-173: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
styles/global.css (1)
286-292: New Highlight Override CSS Rule IntroducedThe new CSS rule for
code .line .highlightedeffectively removes background color, shadow, and box-shadow using!importantflags. This appears to be an intentional style override to ensure that highlighted code lines do not carry distracting styling. Please double-check that this override does not inadvertently remove any desired visual cues elsewhere in your documentation or conflict with your overall theme—in particular, verify its accessibility and readability in various themes (e.g., dark mode).pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (6)
40-41: Supported networks explanation is clear.
The text explains that the package supports the Superchain networks and guides users on instantiating with custom contract addresses if needed. Consider a slight rewording for an even more polished tone if desired.🧰 Tools
🪛 LanguageTool
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
148-159: RPC providers and wallets section is well-explained.
The overview of establishing four different clients for L1 and L2 provides clarity on the network setup. Consider inserting a comma after “networks” in the sentence “... connections to both networks by creating four different clients:” to enhance readability.🧰 Tools
🪛 LanguageTool
[uncategorized] ~150-~150: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...(AI_HYDRA_LEO_MISSING_COMMA)
190-198: Comprehensive ABI explanation.
The description of the ERC‑20 ABI functions (likebalanceOf,faucet,approve, etc.) is thorough. Consider a minor punctuation adjustment where needed for optimal clarity.🧰 Tools
🪛 LanguageTool
[uncategorized] ~192-~192: Loose punctuation mark.
Context: ...l critical functions: *balanceOf: Allows us to check token balances for a...(UNLIKELY_OPENING_PUNCTUATION)
290-293: L1 balance check is clearly articulated.
Verifying that the L1 token balance decreases after the deposit is a critical validation step. Consider rephrasing “lower by the amount we bridged” to “reduced by the amount bridged” for enhanced precision.🧰 Tools
🪛 LanguageTool
[grammar] ~291-~291: Did you mean “lowed”, “lowered”?
Context: ...been deducted. This balance should be lower by the amount we bridged, as those toke...(SHOULD_BE_DO)
325-326: Withdrawal delay explanation is informative.
The note that withdrawals require a multi‐step process with a 7‑day challenge period is important. Consider verifying the compound term “multi‑step” for consistency (e.g., “multistep”).🧰 Tools
🪛 LanguageTool
[misspelling] ~325-~325: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...(EN_COMPOUNDS_MULTI_STEP)
357-359: Final summary and next steps are encouraging.
While the congratulatory tone is motivating, consider revising informal expressions like “Congrats!” and insert the article “the” before@eth-optimism/viem(i.e. “using the@eth-optimism/viempackage”) for improved grammatical precision.🧰 Tools
🪛 LanguageTool
[uncategorized] ~358-~358: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)styles/global.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~150-~150: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~192-~192: Loose punctuation mark.
Context: ...l critical functions: * balanceOf: Allows us to check token balances for a...
(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~216-~216: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...
(RETURN_IN_THE)
[uncategorized] ~216-~216: Possible missing comma found.
Context: ...e readable form using the formatEther function since this token uses 18 decimal places...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~291-~291: Did you mean “lowed”, “lowered”?
Context: ...been deducted. This balance should be lower by the amount we bridged, as those toke...
(SHOULD_BE_DO)
[misspelling] ~325-~325: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...
(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~358-~358: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🔇 Additional comments (22)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (22)
2-8: Frontmatter metadata update is consistent.
The title, description, and topic fields have been updated to reflect the use of@eth-optimism/viem. All required metadata is present and correctly formatted.
22-22: Header update matches the title change.
The main header now reads “Bridging ERC-20 tokens to OP Mainnet”, ensuring consistency with the frontmatter title.
24-25: Introduction text clearly emphasizes the new package.
The updated description explains how to use @eth-optimism/viem for bridging ERC-20 tokens, which aligns well with the new tutorial objectives.
28-28: Backend process reference is clear.
The explanation that the@eth-optimism/viempackage uses the Standard Bridge contracts is concise and informative.
50-51: Demo project introduction is precise.
The instructions to use the@eth-optimism/viempackage within a Node.js project are clear and set the right expectations for the reader.
57-58: Project folder setup instructions are correct.
The commandsmkdir bridging-erc20-tokensandcd bridging-erc20-tokensare straightforward and correctly guide the user in setting up the project folder.
67-71: Installation instructions for@eth-optimism/viemare accurate.
The header and the commandpnpm add @eth-optimism/viemclearly instruct users on installing the package.
73-77: Installation instructions forviemare provided.
Including the separate installation commandpnpm add viemensures that dependency management is complete. Please verify that both dependencies are required for the intended functionality.
111-111: Node REPL instructions are clear.
The instruction to use the Node REPL to interact with@eth-optimism/viemis concise and helpful for users testing out the package.
123-124: Dynamic import explanation is succinct.
Detailing the use of dynamic imports (with await) for ESM modules in the Node.js REPL is both accurate and useful.
141-144: Private key handling is secure and well-documented.
The tutorial explains the importance of retrieving the private key from an environment variable, emphasizing security best practices.
165-168: ERC‑20 token addresses and unit definition are clear.
The explanation for defining the token addresses and theoneTokenconstant (representing 10^18 wei) is precise and helps prevent unit conversion errors.
230-232: Definition ofoneTokenis well-explained.
Clearly communicating thatoneTokenrepresents an entire token in base units aids in preventing common mistakes during deposit and withdrawal operations.
236-242: Token approval process is clearly described.
The two-step process, including granting permission viaapproveand awaiting transaction confirmation, is clearly laid out.
246-251: Approval waiting mechanism is well-documented.
The explanation of usingwaitForTransactionReceiptto ensure the approval transaction is confirmed before proceeding is clear and helpful.
257-264: Bridging viadepositERC20is clearly outlined.
The description of the parameters required for depositing tokens, along with the associated benefits of thedepositERC20function, is comprehensive.
270-277: Smart contract wallet guidance is informative.
The callout detailing the need to specify therecipientoption when using a smart contract wallet effectively alerts users to a common pitfall.
281-284: Deposit confirmation process is clearly explained.
The instructions on waiting for the L1 transaction to be confirmed — along with the expected delay before tokens appear on L2 — provide reassurance to the user.
297-302: L2 token balance verification confirms deposit success.
Clear instructions on checking the L2 balance after a delay ensure that users can confirm the completion of the bridging operation.
314-324: Withdrawal initiation is well-articulated.
The description of thewithdrawOptimismERC20function and the parameters required for initiating token withdrawal back to L1 is clear and informative.
330-336: Withdrawal transaction receipt process is clearly explained.
The instructions for awaiting the confirmation of the withdrawal transaction, along with an explanation of the token lockup on L2, are well-detailed.
345-350: L2 balance recheck after withdrawal is clear.
The step describing the verification of the L2 balance after initiating the withdrawal effectively prepares the user for the subsequent steps required to reclaim tokens on L1.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
public/tutorials/cross-dom-bridge-erc20.js (1)
19-20:⚠️ Potential issueRemove API key placeholder from RPC URL.
The L1 RPC URL contains a placeholder
<YOU_API_KEY>that will cause the code to fail. Based on past review comments, the author intended to use public RPCs that don't require API keys.-const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia/<YOU_API_KEY>'; +const L1_RPC_URL = 'https://rpc.ankr.com/eth_sepolia';🧰 Tools
🪛 ESLint
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
🧹 Nitpick comments (6)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (5)
41-41: Consider using more polite wording.-If you want to use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started). +If you would like to use a network that isn't included by default, you can simply [instantiate the package with the appropriate contract addresses](/app-developers/get-started).🧰 Tools
🪛 LanguageTool
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
151-161: Fix grammar and article usage issues.There are a couple of minor grammar and article usage issues in this section.
-Here we establish the connections to both networks by creating four different clients: +Here, we establish the connections to both networks by creating four different clients: -Replace `<YOU_API_KEY>` with your API key from a RPC provider. +Replace `<YOU_API_KEY>` with your API key from an RPC provider.🧰 Tools
🪛 LanguageTool
[uncategorized] ~151-~151: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...(AI_HYDRA_LEO_MISSING_COMMA)
[misspelling] ~160-~160: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ...<YOU_API_KEY>with your API key from a RPC provider. ```js file=/p...(EN_A_VS_AN)
308-308: Unclear language in balance change description.The current phrasing could be clearer about what happens to the balance after bridging.
-This balance should be lower by the amount we bridged, as those tokens are now escrowed in the `L1StandardBridge` contract. +This balance should be reduced by the amount we bridged, as those tokens are now escrowed in the `L1StandardBridge` contract.🧰 Tools
🪛 LanguageTool
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...(SHOULD_BE_DO)
343-343: Streamline spelling of compound word.-Unlike deposits, withdrawals from L2 to L1 are not immediate and require a multi-step process including a 7-day challenge period for security reasons. +Unlike deposits, withdrawals from L2 to L1 are not immediate and require a multistep process including a 7-day challenge period for security reasons.🧰 Tools
🪛 LanguageTool
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...(AI_HYDRA_LEO_MISSING_COMMA)
378-379: Missing "the" article.-You've just deposited and withdrawn tokens using `@eth-optimism/viem` package. -You should now be able to write applications that use the `@eth-optimism/viem` package to transfer ERC-20 tokens between L1 and L2. +You've just deposited and withdrawn tokens using the `@eth-optimism/viem` package. +You should now be able to write applications that use the `@eth-optimism/viem` package to transfer ERC-20 tokens between L1 and L2.🧰 Tools
🪛 LanguageTool
[uncategorized] ~378-~378: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
public/tutorials/cross-dom-bridge-erc20.js (1)
147-147: Implement a more robust waiting mechanism.The code currently waits a fixed 1 minute for tokens to arrive on L2, which might not be enough time depending on network conditions. A polling mechanism would be more reliable.
-await new Promise(resolve => setTimeout(resolve, 60000)); // 1 minute +// Implement polling to wait for the tokens to arrive +console.log('Waiting for tokens to arrive on L2 (polling every 15 seconds)...'); +let l2BalanceAfterDeposit = 0n; +let attempts = 0; +const maxAttempts = 12; // 3 minutes total (12 * 15 seconds) + +while (attempts < maxAttempts) { + l2BalanceAfterDeposit = await publicClientL2.readContract({ + address: l2Token, + abi: erc20ABI, + functionName: 'balanceOf', + args: [account.address] + }); + + if (l2BalanceAfterDeposit > 0n) { + console.log(`Tokens arrived on L2 after ${attempts * 15} seconds!`); + break; + } + + attempts++; + console.log(`Waiting... (attempt ${attempts}/${maxAttempts})`); + await new Promise(resolve => setTimeout(resolve, 15000)); // 15 seconds +} + +if (attempts >= maxAttempts) { + console.log('Timeout waiting for tokens to arrive. They may take longer to appear on L2.'); +}🧰 Tools
🪛 ESLint
[error] 147-147: Extra semicolon.
(semi)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)public/tutorials/cross-dom-bridge-erc20.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~151-~151: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...
(AI_HYDRA_LEO_MISSING_COMMA)
[misspelling] ~160-~160: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ... <YOU_API_KEY> with your API key from a RPC provider. ```js file=/p...
(EN_A_VS_AN)
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: * balanceOf: Allows us to check token balances for a...
(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~222-~222: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...
(RETURN_IN_THE)
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...
(SHOULD_BE_DO)
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...
(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~378-~378: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🪛 ESLint
public/tutorials/cross-dom-bridge-erc20.js
[error] 3-3: Extra semicolon.
(semi)
[error] 4-4: Extra semicolon.
(semi)
[error] 5-5: Extra semicolon.
(semi)
[error] 6-6: Extra semicolon.
(semi)
[error] 7-7: Extra semicolon.
(semi)
[error] 8-8: Extra semicolon.
(semi)
[error] 9-9: Extra semicolon.
(semi)
[error] 10-10: Extra semicolon.
(semi)
[error] 12-12: Extra semicolon.
(semi)
[error] 13-13: Extra semicolon.
(semi)
[error] 16-16: Extra semicolon.
(semi)
[error] 17-17: Extra semicolon.
(semi)
[error] 19-19: Extra semicolon.
(semi)
[error] 20-20: Extra semicolon.
(semi)
[error] 25-25: Extra semicolon.
(semi)
[error] 31-31: Extra semicolon.
(semi)
[error] 36-36: Extra semicolon.
(semi)
[error] 42-42: Extra semicolon.
(semi)
[error] 95-95: Extra semicolon.
(semi)
[error] 97-97: Extra semicolon.
(semi)
[error] 103-103: Extra semicolon.
(semi)
[error] 104-104: Extra semicolon.
(semi)
[error] 107-107: Extra semicolon.
(semi)
[error] 114-114: Extra semicolon.
(semi)
[error] 115-115: Extra semicolon.
(semi)
[error] 117-117: Extra semicolon.
(semi)
[error] 118-118: Extra semicolon.
(semi)
[error] 124-124: Extra semicolon.
(semi)
[error] 125-125: Extra semicolon.
(semi)
[error] 128-128: Extra semicolon.
(semi)
[error] 130-130: Extra semicolon.
(semi)
[error] 138-138: Extra semicolon.
(semi)
[error] 139-139: Extra semicolon.
(semi)
[error] 141-141: Extra semicolon.
(semi)
[error] 142-142: Extra semicolon.
(semi)
[error] 143-143: Extra semicolon.
(semi)
[error] 145-145: Extra semicolon.
(semi)
[error] 147-147: Extra semicolon.
(semi)
[error] 153-153: Extra semicolon.
(semi)
[error] 154-154: Extra semicolon.
(semi)
[error] 161-161: Extra semicolon.
(semi)
[error] 162-162: Extra semicolon.
(semi)
[error] 164-164: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 173-173: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
[error] 182-182: Extra semicolon.
(semi)
[error] 183-183: Extra semicolon.
(semi)
[error] 185-185: Extra semicolon.
(semi)
🔇 Additional comments (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (2)
1-18: LGTM! Frontmatter is complete and properly structured.The frontmatter includes all required fields for a tutorial page (title, description, lang, content_type, topic, personas, categories).
22-26: Good introduction with clear package identification.The introduction properly introduces the purpose of the tutorial and clearly identifies the
@eth-optimism/viempackage that will be used.
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
Outdated
Show resolved
Hide resolved
| console.log('Withdrawing tokens back to L1...'); | ||
| const withdrawTx = await withdrawOptimismERC20(walletClientL2, { | ||
| tokenAddress: l2Token, | ||
| amount: oneToken / 2n, | ||
| to: account.address, | ||
| minGasLimit: 200000, | ||
| }); | ||
| console.log(`Withdrawal transaction hash: ${withdrawTx}`); | ||
|
|
||
| const withdrawReceipt = await publicClientL2.waitForTransactionReceipt({ hash: withdrawTx }); | ||
| console.log(`Withdrawal initiated in L2 block ${withdrawReceipt.blockNumber}`); | ||
| console.log("Withdrawal process initiated! It will take 7 days for the tokens to be available on L1."); |
There was a problem hiding this comment.
Missing withdrawal completion steps.
The code initiates a withdrawal from L2 to L1 but doesn't include the necessary "prove" and "finalize" steps required to complete the withdrawal after the challenge period. This makes the tutorial incomplete as users won't be able to access their tokens on L1.
I can provide implementation for the complete withdrawal process using proveWithdrawalTransaction and finalizeWithdrawalTransaction actions from the @eth-optimism/viem package. Would you like me to draft this code?
🧰 Tools
🪛 ESLint
[error] 164-164: Extra semicolon.
(semi)
[error] 170-170: Extra semicolon.
(semi)
[error] 171-171: Extra semicolon.
(semi)
[error] 173-173: Extra semicolon.
(semi)
[error] 174-174: Extra semicolon.
(semi)
[error] 175-175: Extra semicolon.
(semi)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (3)
24-25: Introduction UpdateThe introduction correctly reflects the use of the
@eth-optimism/viempackage. However, consider capitalizing “JavaScript” in “javascript-based application” to adhere to proper noun conventions.
219-225: L1 Token Balance VerificationThe instructions for verifying the token balance post-faucet are clear. Consider rephrasing “The balance is returned in the smallest unit (wei)” to something like “The balance is provided in wei, which is then converted to a more readable format” for enhanced clarity.
🧰 Tools
🪛 LanguageTool
[grammar] ~222-~222: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...(RETURN_IN_THE)
377-381: Concluding and Next StepsThe closing section effectively congratulates users and summarizes the process. For improved grammatical accuracy, consider updating the sentence to “using the
@eth-optimism/viempackage” (i.e. adding “the”).🧰 Tools
🪛 LanguageTool
[uncategorized] ~378-~378: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using@eth-optimism/viempackage. You should ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...
(IF_YOU_WANT)
[uncategorized] ~151-~151: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...
(AI_HYDRA_LEO_MISSING_COMMA)
[misspelling] ~160-~160: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ... <YOU_API_KEY> with your API key from a RPC provider. ```js file=/p...
(EN_A_VS_AN)
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: * balanceOf: Allows us to check token balances for a...
(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~222-~222: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...
(RETURN_IN_THE)
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...
(SHOULD_BE_DO)
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...
(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~378-~378: You might be missing the article “the” here.
Context: ...st deposited and withdrawn tokens using @eth-optimism/viem package. You should ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ 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 (26)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (26)
1-18: Frontmatter Metadata VerificationThe frontmatter includes all required fields (title, description, lang, content_type, topic, personas, categories, is_imported_content) and is properly formatted.
22-22: Heading ConsistencyThe main heading "Bridging ERC-20 tokens to OP Mainnet" is clear and aligns with the title in the frontmatter.
28-28: Standard Bridge ReferenceThe reference indicating that the
@eth-optimism/viempackage uses Standard Bridge contracts appropriately provides context for the underlying bridging mechanism.
40-41: Supported Networks SectionThe section clearly informs users that the
@eth-optimism/viempackage supports all [Superchain networks] and explains how to instantiate the package for additional networks.🧰 Tools
🪛 LanguageTool
[style] ~41-~41: Consider using a more polite wording.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by...(IF_YOU_WANT)
50-51: Demo Project SetupThe guidance for creating a demo project using the
@eth-optimism/viempackage is clear and concise.
57-59: Project Folder Creation CommandsThe Bash commands for creating and navigating to the project folder are clear and follow best practices for setting up a new project.
67-77: Dependency Installation InstructionsThe installation instructions for both
@eth-optimism/viemandviemusingpnpmare clear. Please verify that the separate installation ofviemis intentional as per the documentation update.
111-111: Node REPL GuidanceThe directive for using the Node REPL to interact with the
@eth-optimism/viempackage is clear and straightforward.
123-124: Dynamic Import InstructionsThe explanation on using dynamic imports with
awaitin the Node REPL is helpful and clear.
127-131: Import Statement ExampleThe code snippet demonstrates how to import the
@eth-optimism/viempackage correctly into the REPL session with a proper file reference.
139-147: Environment Variable for Private KeyThe section explaining how to load the private key from an environment variable is secure and follows best practices for handling sensitive information.
162-162: RPC Providers Code SnippetThe code snippet that initializes the RPC providers and wallets is properly referenced and appears correct.
167-174: ERC-20 Token Address SetupThe explanation for setting the ERC-20 token addresses and defining the
oneTokenconstant is clear and informative.
193-204: ERC-20 ABI ExplanationThe breakdown of the ERC-20 ABI functions is comprehensive and clearly outlines how to interact with the contract. The list format aids readability.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: *balanceOf: Allows us to check token balances for a...(UNLIKELY_OPENING_PUNCTUATION)
208-215: Token Faucet InstructionsThe section explaining how to request tokens via the faucet is clear; it guides the reader through expecting a transaction hash and confirmation.
236-243: Deposit Amount DefinitionThe explanation for defining the
oneTokenvariable—as 1 token in its base unit (wei)—is accurate and helps avoid rounding errors in subsequent transactions.
245-254: Token Approval ProcessThe description of the approval process for allowing the bridge contract to transfer tokens is concise and informative.
256-265: Waiting for Approval ConfirmationThe explanation of waiting for the approval transaction confirmation using
waitForTransactionReceiptis clear and well-articulated.
267-283: Executing the Deposit OperationThe walkthrough of invoking the
depositERC20function is comprehensive—it clearly lists all parameters and explains the bridging process effectively.
285-292: Smart Contract Wallet Safety NoticeThe callout informing users about the limitations when using smart contract wallets (and the need for a
recipientoption) is both useful and well referenced with a link to the documentation.
294-302: Deposit Relay ConfirmationThe instructions for waiting until the deposit is relayed—highlighting the inherent delay due to the Optimism sequencer—set the right expectations for users.
304-312: Post-Deposit L1 Balance VerificationThe section clearly instructs checking the L1 token balance post-deposit, confirming that tokens have been escrowed in the bridge contract.
🧰 Tools
🪛 LanguageTool
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...(SHOULD_BE_DO)
314-322: L2 Token Balance Verification Post-DepositThis section effectively explains how to verify that the bridged tokens have been received on L2. Consider confirming that reusing the same code snippet reference (lines 177–183) for both deposit and withdrawal checks is intentional.
332-346: Initiating Token WithdrawalThe process for initiating the withdrawal using the
withdrawOptimismERC20function is detailed and clear, with a step-by-step explanation of the required parameters.🧰 Tools
🪛 LanguageTool
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...(AI_HYDRA_LEO_MISSING_COMMA)
348-357: Waiting for Withdrawal ConfirmationThe explanation regarding waiting for the withdrawal transaction receipt on L2 mirrors the deposit process well and is clearly articulated.
364-372: L2 Token Balance Check Post-WithdrawalThe instructions for confirming the deduction of tokens from the L2 balance after withdrawal initiation are clear, and the note about tokens becoming available on L1 after a challenge period is important. Reusing the code snippet from the deposit section should be verified as intentional.
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (1)
149-163: 🛠️ Refactor suggestion
⚠️ Potential issueUpdate RPC provider instructions for public endpoints.
At line 160 the text instructs:-Replace `<YOUR_API_KEY>` with your API key from a RPC provider. +Use a public RPC endpoint (e.g., https://public-rpc-url) that does not require an API key.Given the PR’s focus on using public RPCs, update this instruction accordingly—and adjust "a RPC provider" to "an RPC provider" if you continue to reference one.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~151-~151: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...(AI_HYDRA_LEO_MISSING_COMMA)
[misspelling] ~160-~160: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ...<YOUR_API_KEY>with your API key from a RPC provider. ```js file=/p...(EN_A_VS_AN)
🧹 Nitpick comments (2)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (2)
24-27: Clarify JavaScript capitalization.
In the sentence "The@eth-optimism/viempackage is an easy way to add bridging functionality to your javascript-based application," consider capitalizing "JavaScript" for correctness.
193-200: Minor stylistic suggestion for bullet lists.
In the ERC-20 ABI section, consider ensuring consistent punctuation for each bullet point to enhance readability.🧰 Tools
🪛 LanguageTool
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: *balanceOf: Allows us to check token balances for a...(UNLIKELY_OPENING_PUNCTUATION)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx(11 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.mdx`: "ALWAYS review Markdown content THOROUGHLY with the following criteria: - First, check the frontmatter section at the top of the file: 1. For regular pages, ensure AL...
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. You can fix this by running:Review the changes, then run without :dry to apply them.'pnpm metadata-batch-cli:dry "path/to/this/file.mdx"- 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/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
🪛 LanguageTool
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx
[style] ~41-~41: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...
(REP_WANT_TO_VB)
[uncategorized] ~151-~151: Possible missing comma found.
Context: ... the RPC providers and wallets} Here we establish the connections to both ne...
(AI_HYDRA_LEO_MISSING_COMMA)
[misspelling] ~160-~160: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’.
Context: ...<YOUR_API_KEY> with your API key from a RPC provider. ```js file=/p...
(EN_A_VS_AN)
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: * balanceOf: Allows us to check token balances for a...
(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~222-~222: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...
(RETURN_IN_THE)
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...
(SHOULD_BE_DO)
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...
(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...
(AI_HYDRA_LEO_MISSING_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 (29)
pages/app-developers/tutorials/bridging/cross-dom-bridge-erc20.mdx (29)
1-18: Frontmatter metadata appears complete.
All required fields (title, description, lang, content_type, topic, personas, and categories) are present and non-empty, as expected for a regular page.
22-22: Header title is appropriate.
The top-level header "# Bridging ERC-20 tokens to OP Mainnet" matches the frontmatter title and concisely reflects the tutorial’s subject.
31-36: Callout block is well formatted.
The error callout effectively warns about issues with fee-on-transfer and rebasing tokens, offering clear links for further reading.
38-42: Supported networks section is clear.
The description accurately explains that the@eth-optimism/viempackage supports all Superchain networks and gives guidance on instantiation for unsupported networks.🧰 Tools
🪛 LanguageTool
[style] ~41-~41: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...networks](/superchain/networks). If you want to use a network that isn't included by de...(REP_WANT_TO_VB)
43-51: Dependencies and demo project instructions are accurate.
The guidance for setting up a Node.js project and installing the@eth-optimism/viempackage (as well as the additionalviemdependency) is clear and correctly presented.
56-77: Project setup steps appear correct.
The sequence of commands for creating the project directory, initializing the project, and adding dependencies is complete and easy to follow.
80-85: Wallet creation instructions are helpful.
The callout that suggests usingcast wallet newprovides useful direction for users looking to create a new wallet.
87-97: Testnet ETH acquisition details are clear.
The instructions on obtaining ETH from the Sepolia and OP Sepolia faucets are straightforward and informative.
99-107: Private key setup is clearly described.
The directions to export the private key as an environment variable are clear and appropriately emphasize security.
109-116: Node REPL instructions are concise.
The steps to launch the Node REPL, including the relevant command, are clear.
120-128: Dynamic import guidance is accurate.
The explanation that the@eth-optimism/viempackage uses ESM modules and requires dynamic imports withawaitin the Node.js REPL is well communicated.
133-148: Session variable setup is well explained.
The instructions to load the private key from the environment and convert it for use in Viem are clear and emphasize security best practices.
165-174: ERC-20 token address configuration is clear.
The steps to define the addresses for L1 and L2 tokens and the explanation of theoneTokenconstant are precise and informative.
176-182: Guidance on customizing token addresses is useful.
The callout provides clear advice for users who wish to use their own ERC-20 token addresses, adding flexibility to the tutorial.
185-225: Token acquisition and balance verification details are comprehensive.
The Step-by-Step instructions covering the ERC-20 ABI setup, requesting tokens via the faucet, and checking the token balance on L1 are well-documented.🧰 Tools
🪛 LanguageTool
[uncategorized] ~195-~195: Loose punctuation mark.
Context: ...l critical functions: *balanceOf: Allows us to check token balances for a...(UNLIKELY_OPENING_PUNCTUATION)
[grammar] ~222-~222: The usual collocation for “returned” is “to”, not “in”.
Context: ... the bridging process. The balance is returned in the smallest unit (wei), but we format ...(RETURN_IN_THE)
228-243: Deposit token amount definition is clear.
The explanation of definingoneTokenfor precise token amounts and its subsequent use for both deposits and withdrawals is concise and helpful.
245-254: Token approval process is clearly outlined.
The instructions regarding granting the bridge contract permission to access tokens via theapprovecall are detailed and easy to follow.
256-265: Waiting for approval is well explained.
Guidance on usingwaitForTransactionReceiptto ensure the approval transaction is confirmed before proceeding is clear.
267-283: Deposit process details are thorough.
The step-by-step explanation for executing thedepositERC20function, including all its required parameters, provides comprehensive guidance for token bridging.
285-292: Smart contract wallet notice is effective.
The callout correctly advises that deposits from smart contract wallets require a specifiedrecipientto avoid failure—this is important for user success.
294-302: Wait-for-relay instructions are clear.
The explanation that details waiting for the deposit transaction to be relayed on L1 reinforces the multi-step process effectively.
304-312: L1 balance check instructions are clear.
The steps to confirm that tokens have been deducted from the L1 balance after deposit are precise and easy to understand.🧰 Tools
🪛 LanguageTool
[grammar] ~308-~308: Did you mean “lowed”, “lowered”?
Context: ...n deducted. This balance should be lower by the amount we bridged, as those toke...(SHOULD_BE_DO)
314-322: L2 balance verification is comprehensive.
The explanation for checking the updated L2 balance after the deposit is detailed and confirms that the bridging has succeeded.
325-332: Withdrawal process introduction is smooth.
The narrative transitions well into the withdrawal process, setting the stage for bridging tokens back from L2 to L1.
331-347: Withdrawal initiation is clearly described.
The instructions for calling thewithdrawOptimismERC20function and noting the 7-day challenge period are thorough and informative.🧰 Tools
🪛 LanguageTool
[misspelling] ~343-~343: This word is normally spelled as one.
Context: ...2 to L1 are not immediate and require a multi-step process including a 7-day challenge per...(EN_COMPOUNDS_MULTI_STEP)
[uncategorized] ~343-~343: Possible missing comma found.
Context: ... not immediate and require a multi-step process including a 7-day challenge period for ...(AI_HYDRA_LEO_MISSING_COMMA)
348-357: Waiting for withdrawal confirmation is clear.
The steps to wait for the L2 withdrawal transaction receipt adequately communicate the need for confirmation before proceeding.
359-362: Informational callout for withdrawal is effective.
The callout reminding the user that the transaction confirmation can take a few minutes is both reassuring and useful.
364-372: L2 balance check after withdrawal is clear.
The instructions to verify the L2 balance decrease post-withdrawal are clear, confirming that tokens have been locked for the withdrawal process.
375-381: Next steps summary is encouraging.
The concluding section effectively congratulates the user and reinforces that the bridging process applies to both testnets and mainnets.
Description
This PR enhances the token bridging tutorial by providing a more complete and robust implementation using
@eth-optimism/viem/chains.It includes both deposit (L1→L2) and withdrawal (L2→L1) examples.
Changes
Tests
Additional context
Metadata
[DOCS] A suggestion about Bridging ERC-20 Tokens with Viem #1508