ethereum-optimism · qbzzt · Mar 20, 2025
@@ -24,32 +24,28 @@ Crosschain ETH transfers in the Superchain are facilitated through the [Supercha
 This tutorial walks through how to send native ETH from one chain to another.
 You can do this on [Supersim](/stack/interop/tools/supersim), [the Interop devnet](/stack/interop/tools/devnet), or production once it is released.
 
-### What you'll build
+<details>
 
-*   A TypeScript application to transfer ETH chains
+<summary>About this tutorial</summary>
 
-### What you'll learn
+**What you'll learn**
 
 *   How to send ETH on the blockchain and between blockchains
 *   How to relay messages between chains
 
-## Prerequisites
-
-Before starting this tutorial, ensure your development environment meets the following requirements:
-
-### Technical knowledge
+**Technical knowledge**
 
 *   Intermediate TypeScript knowledge
 *   Understanding of smart contract development
 *   Familiarity with blockchain concepts
 
-### Development environment
+**Development environment**
 
 *   Unix-like operating system (Linux, macOS, or WSL for Windows)
 *   Node.js version 16 or higher
 *   Git for version control
 
-### Required tools
+**Required tools**
 
 The tutorial uses these primary tools:
 
@@ -58,6 +54,12 @@ The tutorial uses these primary tools:
 *   TypeScript: For implementation
 *   Viem: For blockchain interaction
 
+</details>
+
+### What you'll build
+
+*   A TypeScript application to transfer ETH chains
+
 <Steps>
   ### Install prerequisite software
 

@@ -21,14 +21,20 @@ This guide explains how to upgrade an ERC20 to a [`SuperchainERC20`](https://git
 To ensure fungibility across chains, `SuperchainERC20` assets must have the same contract address on all chains. This requirement abstracts away the complexity of cross-chain validation. Achieving this requires deterministic deployment methods. There are [many ways to do this](https://github.com/Arachnid/deterministic-deployment-proxy).
 Here we will use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit).
 
-### What you'll do
+<details>
 
-*   Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy tokens with your custom code.
+<summary>About this tutorial</summary>
 
-### What you'll learn
+**What you'll learn**
 
 *   How to deploy custom ERC20 tokens across multiple chains at the same address so that they can be bridged with the [`SuperchainTokenBridge`](https://github.com/ethereum-optimism/optimism/blob/develop/packages/contracts-bedrock/src/L2/SuperchainTokenBridge.sol) contract.
 
+</details>
+
+### What you'll do
+
+*   Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy tokens with your custom code.
+
 ### How does this work?
 
 To benefit from Superchain Interoperability, an ERC-20 token has to implement [ERC-7802](https://eips.ethereum.org/EIPS/eip-7802). You can either use the SuperchainERC20 implementation, or write your own.

@@ -29,34 +29,36 @@ This requirement abstracts away the complexity of cross-chain validation.
 Achieving this requires deterministic deployment methods. There are multiple ways to do this.
 Here we will use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit).
 
-### What you'll do
+<details>
 
-*   Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy an `SuperchainERC20` token on the devnet.
+<summary>About this tutorial</summary>
 
-### What you'll learn
+**What you'll learn**
 
 *   How to deploy `SuperchainERC20` tokens on different chains at the same address.
 
-## Prerequisites
-
-Before starting this tutorial, ensure your development environment meets the following requirements:
-
-### Technical knowledge
+**Technical knowledge**
 
 *   Understanding of smart contract development
 *   Familiarity with blockchain concepts
 
-### Development environment
+**Development environment**
 
 *   Unix-like operating system (Linux, macOS, or WSL for Windows)
 *   Git for version control
 
-### Required tools
+**Required tools**
 
 The tutorial uses these primary tools:
 
 *   Foundry: For sending transactions to blockchains.
 
+</details>
+
+### What you'll do
+
+*   Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy an `SuperchainERC20` token on the devnet.
+
 ## Step by step explanation
 
 <Steps>

@@ -18,27 +18,33 @@ import { AutorelayCallout } from '@/components/AutorelayCallout'
 This tutorial demonstrates how to implement cross-chain communication within the Superchain ecosystem. You'll build a complete
 message passing system that enables different chains to interact with each other using the `L2ToL2CrossDomainMessenger` contract.
 
-### What You'll Build
+<details>
 
-*   A Greeter contract that stores and updates messages
-*   A GreetingSender contract that sends cross-chain messages
-*   A TypeScript application to relay messages between chains
+<summary>About this tutorial</summary>
 
-### What you'll learn
+**What you'll learn**
 
 *   How to deploy contracts across different chains
 *   How to implement cross-chain message passing
 *   How to handle sender verification across chains
 *   How to relay messages manually between chains
 
+</details>
+
+### What You'll Build
+
+*   A `Greeter` contract that stores and updates messages
+*   A `GreetingSender` contract that sends cross-chain messages
+*   A TypeScript application to relay messages between chains
+
+
+
 <Callout>
   This tutorial provides step-by-step instructions for implementing cross-chain messaging.
   For a conceptual overview,
   see the [message passing explainer](/stack/interop/message-passing).
 </Callout>
 
-In this tutorial, you will learn how to use the [`L2ToL2CrossDomainMessenger`](https://github.com/ethereum-optimism/optimism/blob/develop/packages/contracts-bedrock/src/L2/L2ToL2CrossDomainMessenger.sol) contract to pass messages between interoperable blockchains.
-
 ## Prerequisites
 
 Before starting this tutorial, ensure your development environment meets the following requirements:

@@ -21,39 +21,33 @@ Note that this tutorial provides step-by-step instructions for transferring `Sup
 *   For a detailed behind-the-scenes explanation, [see the explainer](/stack/interop/superchain-erc20#how-it-works).
 *   For a sample UI that bridges a `SuperchainERC20` token, [see here](https://interop-alpha-app.superchain.tools/).
 
-## Overview
-
 <Callout type="warning">
   Always verify your addresses and amounts before sending transactions.
   Cross-chain transfers cannot be reversed.
 </Callout>
 
-### What you'll build
+<details>
 
-*   A TypeScript application to transfer `SuperchainERC20` tokens between chains
+<summary>About this tutorial</summary>
 
-### What you'll learn
+**What you'll learn**
 
 *   How to send `SuperchainERC20` tokens on the blockchain and between blockchains
 *   How to relay messages between chains
 
-## Prerequisites
-
-Before starting this tutorial, ensure your development environment meets the following requirements:
-
-### Technical knowledge
+**Technical knowledge**
 
 *   Intermediate TypeScript knowledge
 *   Understanding of smart contract development
 *   Familiarity with blockchain concepts
 
-### Development environment
+**Development environment**
 
 *   Unix-like operating system (Linux, macOS, or WSL for Windows)
 *   Node.js version 16 or higher
 *   Git for version control
 
-### Required tools
+**Required tools**
 
 The tutorial uses these primary tools:
 
@@ -62,6 +56,12 @@ The tutorial uses these primary tools:
 *   Node: For running TypeScript code from the command line
 *   Viem: For blockchain interaction
 
+</details>
+
+### What you'll build
+
+*   A TypeScript application to transfer `SuperchainERC20` tokens between chains
+
 ## Directions
 
 <Steps>