diff --git a/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx b/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx index 20c7d6170..5cf0a9423 100644 --- a/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx +++ b/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx @@ -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 +
-* A TypeScript application to transfer ETH chains +About this tutorial -### 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 +
+ +### What you'll build + +* A TypeScript application to transfer ETH chains + ### Install prerequisite software diff --git a/pages/stack/interop/tutorials/custom-superchain-erc20.mdx b/pages/stack/interop/tutorials/custom-superchain-erc20.mdx index ccd268ff8..222541b25 100644 --- a/pages/stack/interop/tutorials/custom-superchain-erc20.mdx +++ b/pages/stack/interop/tutorials/custom-superchain-erc20.mdx @@ -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 +
-* Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy tokens with your custom code. +About this tutorial -### 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. +
+ +### 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. diff --git a/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx b/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx index 8e4d9a8cc..ac48b945c 100644 --- a/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx +++ b/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx @@ -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 +
-* Use the [SuperchainERC20 Starter Kit](/app-developers/starter-kit) to deploy an `SuperchainERC20` token on the devnet. +About this tutorial -### 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. +
+ +### 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 diff --git a/pages/stack/interop/tutorials/message-passing.mdx b/pages/stack/interop/tutorials/message-passing.mdx index 555f5e9e4..2bf93f9eb 100644 --- a/pages/stack/interop/tutorials/message-passing.mdx +++ b/pages/stack/interop/tutorials/message-passing.mdx @@ -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 +
-* A Greeter contract that stores and updates messages -* A GreetingSender contract that sends cross-chain messages -* A TypeScript application to relay messages between chains +About this tutorial -### 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 +
+ +### 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 + + + 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). -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: diff --git a/pages/stack/interop/tutorials/transfer-superchainERC20.mdx b/pages/stack/interop/tutorials/transfer-superchainERC20.mdx index c2715f180..b63850d0f 100644 --- a/pages/stack/interop/tutorials/transfer-superchainERC20.mdx +++ b/pages/stack/interop/tutorials/transfer-superchainERC20.mdx @@ -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 - Always verify your addresses and amounts before sending transactions. Cross-chain transfers cannot be reversed. -### What you'll build +
-* A TypeScript application to transfer `SuperchainERC20` tokens between chains +About this tutorial -### 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 +
+ +### What you'll build + +* A TypeScript application to transfer `SuperchainERC20` tokens between chains + ## Directions