Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Fix Missing Steps in "Communicating between OP Stack and Ethereum in Solidity" Tutorial #1326

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions pages/builders/app-developers/tutorials/cross-dom-solidity.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -176,27 +176,22 @@ Start the Node.js REPL with the `node` command.
node
```

{<h3>Import Viem</h3>}
{<h3>Import viem</h3>}
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Capitalize proper noun 'Viem' in the header.

In the header {<h3>Import viem</h3>}, 'Viem' is a proper noun and should be capitalized to maintain consistency and adhere to the project's style guidelines.


```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L3-L5 hash=65b9a5ad5b634bc2e424f5664e6e1f84
```

{<h3>Load your transaction hash</h3>}

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L7 hash=320cd4f397d7bed8d914d4be0c99f8dc
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L3-L6 hash=c4ff236835a2e078f26f99dacdfa53da
```

{<h3>Create the RPC providers and wallets</h3>}

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L8-L9 hash=d47e4991c5153e1e1dc55de5047a8a3e
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L8-L20 hash=9500ca6be35774522cce2260cd8e9cb6
```

{<h3>Wait until the message is ready to prove</h3>}

Next, you will send messages from L2 to L1 is to prove that the message was sent on L2.
You first need to wait until the message is ready to prove.

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L12-L16 hash=df275e659d954eb72b8c5765d9baf6de
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L22-L30 hash=0e460f24fc394acdcdb7f06df0188e31
```

<Callout type="info">
Expand All @@ -208,7 +203,12 @@ Feel free to take a quick break while you wait.

Once the message is ready to be proven, you'll send an L1 transaction to prove that the message was sent on L2.

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L18-L23 hash=e4d608ac2c2ceb5a744c8474679bd8cb
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L32-L36 hash=6b44abbea96103df0513d098ae6e6659
```

{<h3>Build parameters to prove the withdrawal on the L2</h3>}

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L38-L44 hash=a31f720f43df1680f5488ea233cc9506
```

{<h3>Wait until the message is ready for relay</h3>}
Expand All @@ -221,21 +221,21 @@ On OP Stack, this takes 7 days.
We're currently testing fault proofs on OP Sepolia, so withdrawal times reflect Mainnet times.
</Callout>

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L25-L29 hash=88cec1db2fde515ea9008eaa1bbdfd73
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L46-L50 hash=8c08d1f4c6a7f5d1754a411b3590530d
```

{<h3>Relay the message on L1</h3>}

Once the withdrawal is ready to be relayed you can finally complete the message sending process.

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L31-L33 hash=d7e47c9787d92e2140622a6bdcc6d7bb
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L52-L54 hash=d64917e14a9004ef0b81e3f08003d5cd
```

{<h3>Wait until the message is relayed</h3>}

Now you simply wait until the message is relayed.

```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L35-L36 hash=4ff3cdc48f17cfd7de4a6ef2d2671dc2
```js file=<rootDir>/public/tutorials/cross-dom-solidity.js#L56-L62 hash=5a0d3a97f8d71f11c1e46c5e4a734ffb
```

{<h3>Check the L1 Greeter</h3>}
Expand Down
94 changes: 60 additions & 34 deletions public/tutorials/cross-dom-solidity.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,65 @@
(async () => {

const { createPublicClient, http } = require('viem');
const { optimismSepolia } = require('viem/chains');
const { publicActionsL1, publicActionsL2} = require('viem/op-stack');

const transactionHash = process.env.TUTORIAL_TRANSACTION_HASH

const l1Provider = createPublicClient({ chain: sepolia, transport: http("https://rpc.ankr.com/eth_sepolia") }).extend(publicActionsL1())
const l2Provider = createPublicClient({ chain: optimismSepolia, transport: http("https://sepolia.optimism.io") }).extend(publicActionsL2());

console.log('Waiting for message to be provable...')
await l1Provider.getWithdrawalStatus({
receipt,
targetChain: l2Provider.chain,
})

console.log('Proving message...')
const receipt = await l2Provider.getTransactionReceipt(transactionHash)
const output = await l1Provider.waitToProve({
receipt,
targetChain: l2Provider.chain,
})

console.log('Waiting for message to be relayable...')
await l1Provider.getWithdrawalStatus({
receipt,
targetChain: l2Provider.chain,
})

console.log('Relaying message...')
const [message] = getWithdrawals(receipt)
await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain })

console.log('Waiting for message to be relayed...')
await l1Provider.getWithdrawalStatus({ receipt, targetChain: l2Provider.chain })
const { createPublicClient, http, createWalletClient } = require("viem");
const { optimismSepolia, sepolia } = require("viem/chains");
const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack");
const { privateKeyToAccount } = require("viem/accounts");
Comment on lines +3 to +6
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Remove unnecessary semicolons to fix linting errors.

Lines 3-6 contain extra semicolons that should be removed to comply with the project's coding style guidelines and fix the linting errors.

Apply this diff to remove the unnecessary semicolons:

-const { createPublicClient, http, createWalletClient } = require("viem");
-const { optimismSepolia, sepolia } = require("viem/chains");
-const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack");
-const { privateKeyToAccount } = require("viem/accounts");
+const { createPublicClient, http, createWalletClient } = require("viem")
+const { optimismSepolia, sepolia } = require("viem/chains")
+const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack")
+const { privateKeyToAccount } = require("viem/accounts")
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const { createPublicClient, http, createWalletClient } = require("viem");
const { optimismSepolia, sepolia } = require("viem/chains");
const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack");
const { privateKeyToAccount } = require("viem/accounts");
const { createPublicClient, http, createWalletClient } = require("viem")
const { optimismSepolia, sepolia } = require("viem/chains")
const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2 } = require("viem/op-stack")
const { privateKeyToAccount } = require("viem/accounts")
🧰 Tools
🪛 ESLint

[error] 3-3: Extra semicolon.

(semi)


[error] 4-4: Extra semicolon.

(semi)


[error] 5-5: Extra semicolon.

(semi)


[error] 6-6: Extra semicolon.

(semi)


const l1Provider = createPublicClient({ chain: sepolia, transport: http("https://eth-sepolia.g.alchemy.com/v2/***") }).extend(publicActionsL1())
const l2Provider = createPublicClient({ chain: optimismSepolia, transport: http("https://opt-sepolia.g.alchemy.com/v2/***") }).extend(publicActionsL2())
const account = privateKeyToAccount(process.env.TUTORIAL_PRIVATE_KEY)

const l1Wallet = createWalletClient({
chain: sepolia,
transport: http("https://eth-sepolia.g.alchemy.com/v2/***")
}).extend(walletActionsL1())

const l2Wallet = createWalletClient({
chain: optimismSepolia,
transport: http("https://opt-sepolia.g.alchemy.com/v2/***")
}).extend(walletActionsL2())

const receipt = await l2Provider.getTransactionReceipt({
hash: process.env.TUTORIAL_TRANSACTION_HASH
})

console.log('Waiting for message to be provable...')
await l1Provider.getWithdrawalStatus({
receipt,
targetChain: l2Provider.chain,
})

console.log('Proving message...')
const { output, withdrawal } = await l1Provider.waitToProve({
receipt,
targetChain: l2Provider.chain,
})

const args = await l2Provider.buildProveWithdrawal({
account,
output,
withdrawal,
})

const hash = await l1Wallet.proveWithdrawal(args)

console.log('Waiting for message to be relayable...')
await l1Provider.getWithdrawalStatus({
receipt,
targetChain: l2Provider.chain,
})

console.log('Relaying message...')
const [message] = getWithdrawals(receipt)
await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain })
Comment on lines +53 to +54
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add missing import or definition for getWithdrawals.

The function getWithdrawals is used but not defined or imported. This will lead to a runtime error.

Ensure that getWithdrawals is properly defined or imported. If it's from an external module, add the necessary import statement, for example:

+const { getWithdrawals } = require('viem/op-stack')

Or define the function if it is missing.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [message] = getWithdrawals(receipt)
await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain })
+const { getWithdrawals } = require('viem/op-stack')
const [message] = getWithdrawals(receipt)
await l1Provider.waitToFinalize({ withdrawalHash: message.withdrawalHash, targetChain: l2Provider.chain })


const finalizeHash = await l1Wallet.finalizeWithdrawal({
targetChain: l2Wallet.chain,
withdrawal,
})

console.log('Waiting for message to be relayed...')
await l1Provider.getWithdrawalStatus({ receipt, targetChain: l2Provider.chain })


})()