Skip to content

Commit 8db95a2

Browse files
qbzztqbzzt
committed
fixing errors
1 parent bb094fd commit 8db95a2

File tree

2 files changed

+134
-52
lines changed

2 files changed

+134
-52
lines changed

‎pages/stack/interop/tutorials/message-passing.mdx‎

Lines changed: 59 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -93,19 +93,26 @@ For development purposes, we'll first use autorelay mode to handle message execu
9393
<Steps>
9494
### Setting up test networks
9595

96+
97+
<Callout type="warning" emoji="⚠️">
98+
Do *not* attempt to run these steps with the [devnet](../tools/devnet).
99+
At this point we are relying on the autorelay functionality of Supersim.
100+
The devnet does not have this, you have to send the executing message yourself, as explained [here](#implement-manual-message-relaying).
101+
</Callout>
102+
96103
1. In the directory where Supersim is installed, start it with autorelay.
97104

98105
```sh
99-
supersim
106+
./supersim --interop.autorelay
100107
```
101108

102109
Supersim creates three `anvil` blockchains:
103110

104-
\| Role | ChainID | RPC URL |
105-
\| -------\* | ------: | ---------------------------------------------\* |
106-
\| L1 | 900 | [http://127.0.0.1:8545](http://127.0.0.1:8545) |
107-
\| OPChainA | 901 | [http://127.0.0.1:9545](http://127.0.0.1:9545) |
108-
\| OPChainB | 902 | [http://127.0.0.1:9546](http://127.0.0.1:9546) |
111+
| Role | ChainID | RPC URL |
112+
| -------- | ------: | --------------------------------------------- |
113+
| L1 | 900 | [http://127.0.0.1:8545](http://127.0.0.1:8545) |
114+
| OPChainA | 901 | [http://127.0.0.1:9545](http://127.0.0.1:9545) |
115+
| OPChainB | 902 | [http://127.0.0.1:9546](http://127.0.0.1:9546) |
109116

110117
2. In a separate shell, store the configuration in environment variables.
111118

@@ -141,8 +148,8 @@ For development purposes, we'll first use autorelay mode to handle message execu
141148
2. In `src/Greeter.sol` put this file.
142149
This is a variation on [Hardhat's Greeter contract](https://github.com/matter-labs/hardhat-zksync/blob/main/examples/upgradable-example/contracts/Greeter.sol).
143150

144-
```solidity file=<rootDir>/public/tutorials/Greeter.sol#L1-L20 hash=b3c5550bcc2cc4272125388ef23a67e7
145-
```
151+
```solidity file=<rootDir>/public/tutorials/Greeter.sol#L1-L20 hash=b3c5550bcc2cc4272125388ef23a67e7
152+
```
146153

147154
3. Deploy the `Greeter` contract to Chain B and store the resulting contract address in the `GREETER_B_ADDR` environment variable.
148155

@@ -441,10 +448,10 @@ In production we will not have this, we need to create our own executing message
441448

442449
2. Create or replace `src/app.mts` with this code.
443450

444-
```solidity file=<rootDir>/public/tutorials/app.mts#L1-L51 hash=8f6f776884b8e37ae613f7aea8cd6a3b
445-
```
451+
```solidity file=<rootDir>/public/tutorials/app.mts#L1-L51 hash=8f6f776884b8e37ae613f7aea8cd6a3b
452+
```
446453

447-
3. Run the program, see that a greeting from chain A is related to chain B.
454+
3. Run the program, see that a greeting from chain A is relayed to chain B.
448455

449456
```sh
450457
npm start
@@ -490,50 +497,50 @@ In production we will not have this, we need to create our own executing message
490497

491498
1. Replace `src/app.mts` with:
492499

493-
```js file=<rootDir>/public/tutorials/app.mts#L1-L51 hash=8f6f776884b8e37ae613f7aea8cd6a3b
494-
```
500+
```typescript file=<rootDir>/public/tutorials/app_v2.mts hash=4811b7946a82b2815c103da8a65c1334
501+
```
495502

496-
<details>
497-
<summary>Explanation</summary>
503+
<details>
504+
<summary>Explanation</summary>
498505

499-
1. **Import Required Libraries**
506+
1. **Import Required Libraries**
500507

501-
* Imports functions from `viem` for wallet creation, HTTP transport, and contract interactions.
502-
* Imports `@eth-optimism/viem` utilities for handling OP-Stack-specific actions and interoperability.
503-
* Loads ABI definitions from `Greeter.json` and `GreetingSender.json` for contract interactions.
508+
* Imports functions from `viem` for wallet creation, HTTP transport, and contract interactions.
509+
* Imports `@eth-optimism/viem` utilities for handling OP-Stack-specific actions and interoperability.
510+
* Loads ABI definitions from `Greeter.json` and `GreetingSender.json` for contract interactions.
504511

505-
2. **Initialize Wallet Clients**
512+
2. **Initialize Wallet Clients**
506513

507-
* Uses `privateKeyToAccount` to generate an account from an environment variable.
508-
* Creates `walletA` for chain `supersimL2A` and `walletB` for chain `supersimL2B`, extending them with Viem's public and OP-Stack-specific actions.
514+
* Uses `privateKeyToAccount` to generate an account from an environment variable.
515+
* Creates `walletA` for chain `supersimL2A` and `walletB` for chain `supersimL2B`, extending them with Viem's public and OP-Stack-specific actions.
509516

510-
3. **Get Contract Instances**
517+
3. **Get Contract Instances**
511518

512-
* Retrieves contract instances for `greeter` on `walletB` and `greetingSender` on `walletA` using `getContract`.
513-
* The addresses are taken from environment variables, and the clients are set to the respective wallets.
519+
* Retrieves contract instances for `greeter` on `walletB` and `greetingSender` on `walletA` using `getContract`.
520+
* The addresses are taken from environment variables, and the clients are set to the respective wallets.
514521

515-
4. **Direct Greeting on Chain B**
522+
4. **Direct Greeting on Chain B**
516523

517-
* Calls `setGreeting` on `greeter` to store a greeting directly on chain B.
518-
* Waits for the transaction to be confirmed using `waitForTransactionReceipt`.
519-
* Reads and logs the greeting stored on chain B.
524+
* Calls `setGreeting` on `greeter` to store a greeting directly on chain B.
525+
* Waits for the transaction to be confirmed using `waitForTransactionReceipt`.
526+
* Reads and logs the greeting stored on chain B.
520527

521-
5. **Cross-Chain Greeting via Chain A**
528+
5. **Cross-Chain Greeting via Chain A**
522529

523-
* Calls `setGreeting` on `greetingSender` to send a greeting through chain A.
524-
* Waits for the transaction receipt on chain A.
530+
* Calls `setGreeting` on `greetingSender` to send a greeting through chain A.
531+
* Waits for the transaction receipt on chain A.
525532

526-
6. **Retrieve and Relay the Cross-Chain Message**
533+
6. **Retrieve and Relay the Cross-Chain Message**
527534

528-
* Extracts the message from the transaction receipt using `createInteropSentL2ToL2Messages`.
529-
* Relays the message to chain B using `walletB.interop.relayMessage`.
530-
* Waits for confirmation of the relay transaction.
535+
* Extracts the message from the transaction receipt using `createInteropSentL2ToL2Messages`.
536+
* Relays the message to chain B using `walletB.interop.relayMessage`.
537+
* Waits for confirmation of the relay transaction.
531538

532-
7. **Verify the Updated Greeting on Chain B**
539+
7. **Verify the Updated Greeting on Chain B**
533540

534-
* Reads the greeting from `greeter` after the relay process.
535-
* Logs the updated greeting, showing that it was successfully relayed from chain A to chain B.
536-
</details>
541+
* Reads the greeting from `greeter` after the relay process.
542+
* Logs the updated greeting, showing that it was successfully relayed from chain A to chain B.
543+
</details>
537544

538545
2. Rerun the JavaScript program, and see that the message is relayed.
539546

@@ -546,22 +553,22 @@ In production we will not have this, we need to create our own executing message
546553
The same contracts are deployed on [the devnet](../tools/devnet).
547554
You can relay messages in exactly the same way you'd do it on Supersim.
548555

549-
\| Contract | Network | Address |
550-
\| ---------------\* | -------------------------------------------\* | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------\* |
551-
\| `Greeter` | [Devnet 1](../tools/devnet#interop-devnet-1) | [`0x1A183FCf61053B7dcd2322BbE766f7E1946d3718`](https://sid.testnet.routescan.io/address/0x1A183FCf61053B7dcd2322BbE766f7E1946d3718) |
552-
\| `GreetingSender` | [Devnet 0](../tools/devnet#interop-devnet-1) | [`0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f`](https://sid.testnet.routescan.io/address/0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f/contract/420120000/readContract?chainid=420120000) |
556+
| Contract | Network | Address |
557+
| --------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
558+
| `Greeter` | [Devnet 1](../tools/devnet#interop-devnet-1) | [`0x1A183FCf61053B7dcd2322BbE766f7E1946d3718`](https://sid.testnet.routescan.io/address/0x1A183FCf61053B7dcd2322BbE766f7E1946d3718) |
559+
| `GreetingSender` | [Devnet 0](../tools/devnet#interop-devnet-1) | [`0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f`](https://sid.testnet.routescan.io/address/0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f/contract/420120000/readContract?chainid=420120000) |
553560

554-
To modify the program to relay messagez on devnet, follow these steps:
561+
To modify the program to relay messages on devnet, follow these steps:
555562

556563
1. In `src/app.mts`, replace these lines to update the chains and contract addresses.
557564

558-
\| Line number | New content |
559-
\| ----------: | -------------------------------------------------------------------------\* |
560-
\| 10 | `import { interopAlpha0, interopAlpha1 } from '@eth-optimism/viem/chains'` |
561-
\| 24 | ` chain: interopAlpha0,` |
562-
\| 32 | ` chain: interopAlpha1,` |
563-
\| 40 | ` address: "0x1A183FCf61053B7dcd2322BbE766f7E1946d3718",` |
564-
\| 46 | ` address: "0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f",` |
565+
| Line number | New content |
566+
| ----------: | ------------------------------------------------------------------------- |
567+
| 10 | `import { interopAlpha0, interopAlpha1 } from '@eth-optimism/viem/chains'` |
568+
| 24 | ` chain: interopAlpha0,` |
569+
| 32 | ` chain: interopAlpha1,` |
570+
| 40 | ` address: "0x1A183FCf61053B7dcd2322BbE766f7E1946d3718",` |
571+
| 46 | ` address: "0x9De9f84a4EB3616B44CF1d68cD1A9098Df6cB25f",` |
565572

566573
2. Set `PRIV_KEY` to the private key of an address that has Sepolia ETH on the two chains.
567574

‎public/tutorials/app_v2.mts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
createWalletClient,
3+
http,
4+
defineChain,
5+
publicActions,
6+
getContract,
7+
Address,
8+
} from 'viem'
9+
import { privateKeyToAccount } from 'viem/accounts'
10+
import { supersimL2A, supersimL2B } from '@eth-optimism/viem/chains'
11+
12+
import {
13+
walletActionsL2,
14+
publicActionsL2,
15+
createInteropSentL2ToL2Messages,
16+
} from '@eth-optimism/viem'
17+
18+
import greeterData from './Greeter.json'
19+
import greetingSenderData from './GreetingSender.json'
20+
21+
const account = privateKeyToAccount(process.env.PRIV_KEY as `0x${string}`)
22+
23+
const walletA = createWalletClient({
24+
chain: supersimL2A,
25+
transport: http(),
26+
account
27+
}).extend(publicActions)
28+
.extend(publicActionsL2())
29+
.extend(walletActionsL2())
30+
31+
const walletB = createWalletClient({
32+
chain: supersimL2B,
33+
transport: http(),
34+
account
35+
}).extend(publicActions)
36+
.extend(publicActionsL2())
37+
.extend(walletActionsL2())
38+
39+
const greeter = getContract({
40+
address: process.env.GREETER_B_ADDR as Address,
41+
abi: greeterData.abi,
42+
client: walletB
43+
})
44+
45+
const greetingSender = getContract({
46+
address: process.env.GREETER_A_ADDR as Address,
47+
abi: greetingSenderData.abi,
48+
client: walletA
49+
})
50+
51+
const txnBHash = await greeter.write.setGreeting(
52+
["Greeting directly to chain B"])
53+
await walletB.waitForTransactionReceipt({hash: txnBHash})
54+
55+
const greeting1 = await greeter.read.greet()
56+
console.log(`Chain B Greeting: ${greeting1}`)
57+
58+
const txnAHash = await greetingSender.write.setGreeting(
59+
["Greeting through chain A"])
60+
const receiptA = await walletA.waitForTransactionReceipt({hash: txnAHash})
61+
62+
const sentMessage =
63+
(await createInteropSentL2ToL2Messages(walletA, { receipt: receiptA }))
64+
.sentMessages[0]
65+
const relayMsgTxnHash = await walletB.interop.relayMessage({
66+
sentMessageId: sentMessage.id,
67+
sentMessagePayload: sentMessage.payload,
68+
})
69+
70+
const receiptRelay = await walletB.waitForTransactionReceipt(
71+
{hash: relayMsgTxnHash})
72+
73+
const greeting2 = await greeter.read.greet()
74+
console.log(`Chain A Greeting: ${greeting2}`)
75+

0 commit comments

Comments
 (0)