ethereum-optimism · bradleycamacho · Apr 11, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
@@ -40,6 +40,17 @@
     },
     "display": "children"
   },
+  "interop": {
+    "title": "Interoperability",
+    "type":"page",
+    "theme": {
+      "navbar": true,
+      "sidebar": true,
+      "toc": true,
+      "pagination": true
+    },
+    "display": "children"
+  },
   "app-developers": {
     "title": "App Devs",
     "type": "page",

@@ -13,68 +13,10 @@ categories:
   - interoperability
   - standard-bridge
   - testnet
-is_imported_content: 'false'
+is_imported_content: 'true'
 ---
 
-import { Cards, Card, Callout } from 'nextra/components'
+import InteropGettingStarted from '@/pages/interop/get-started.mdx'
 
-# Build interoperable apps on Superchain devnet
+<InteropGettingStarted />
 
-Reimagine your app with Superchain Interop to deliver the unified UX your users expect. Hack on net-new, bold use cases on Interop devnet.
-
-<Callout type="info">
-  Explore the [Superchain Dev Console](https://console.optimism.io/?utm_source=op-docs&utm_medium=docs) to build, launch, and grow your app on the Superchain.
-</Callout>
-
-## Connect to Superchain Interop
-
-Select a network to build, test, and quickly iterate on interoperable apps.
-
-| Local network                                                                                                   | Devnet                                                                                                            |
-| :-------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- |
-| Build and iterate on your apps with Supersim – a local multi-chain dev environment.                             | Deploy your app to devnet – a testnet developmental version – to conduct large-scale testing.                     |
-| <ul><li>RPC Endpoint: `local RPC URL` </li><li>Chain ID: `local chain ID`</li><li>Block explorer: TBD</li></ul> | <ul><li>RPC Endpoint: `devnet RPC URL`</li><li>Chain ID: `devnet chain ID`</li><li> Block explorer: TBD</li></ul> |
-| [Supersim](tutorials/supersim)                                                                                  | [Devnet Docs](/stack/interop/tools/devnet)                                                                        |
-
-## Deploy your app to devnet in minutes
-
-The SuperchainERC20 Starter Kit allows you to focus on what to deploy, not how to deploy. It's a streamlined toolkit that simplifies deploying your interoperable app, letting you focus on your core business logic.
-
-*   [Get the Starter Kit](starter-kit)
-
-## Tools & resources for building interoperable apps
-
-| Tool                                                                                        | Description                                                             |
-| ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| [Superchain Faucet](https://console.optimism.io/faucet?utm_source=op-docs\&utm_medium=docs) | One stop shop to grab testnet ETH for any Superchain network.           |
-| [Supersim](tools/supersim)                                                                  | Local multi-chain testing environment for smart contracts.              |
-| [Super CLI](https://github.com/ethereum-optimism/super-cli)                                 | Command-line tool for seamless multichain app deployment and testing.   |
-| [Superchain Relayer](https://github.com/ethereum-optimism/superchain-relayer)               | UI for monitoring and managing cross-chain transactions.                |
-| [Interop Docs](/stack/interop)                                                              | Comprehensive Interop information in the Optimism Docs.                 |
-| [Superchain Dev Console](https://console.optimism.io/?utm_source=op-docs\&utm_medium=docs)  | Comprensive tool to build, launch, and grow your app on the Superchain. |
-
-## Handy step-by-step guides
-
-<Cards>
-  <Card title="Supersim tutorials" href="/app-developers/tutorials/supersim" icon={<img src="/img/icons/shapes.svg" />} />
-
-  <Card title="Interop tutorials" href="/app-developers/tutorials/interop" icon={<img src="/img/icons/shapes.svg" />} />
-
-  <Card title="Transaction tutorials" href="/app-developers/tutorials/transactions" icon={<img src="/img/icons/shapes.svg" />} />
-
-  <Card title="Bridging tutorials" href="/app-developers/tutorials/bridging" icon={<img src="/img/icons/shapes.svg" />} />
-</Cards>
-
-## Discover and build net-new use cases with Superchain Interop
-
-There is so much more than just bridge abstraction. Hack on the various cutting-edge applications that are uniquely enabled by Superchain Interop. Here are some ideas to get you started:
-
-| Superloans                                                                         | Superlend                                                                                                           | SuperCDP                                                                                                         |
-| :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- |
-| Use collateral on ChainA and ChainB to execute an arbitrage opportunity on ChainA. | Deposit ETH into lending protocols across chains for optimal yield, with automatic rebalancing based on best rates. | Collateralized crosschain debt protocol that holds assets and issues a SuperchainERC20 on user preferred chains. |
-
-## Join app dev community and build together
-
-Join the OP Labs team and fellow Superchain Interop builders to share ideas, provide feedback, ask questions, and get the [support](https://github.com/ethereum-optimism/developers/discussions) you need.
-
-*   [Join Discord community](https://discord.gg/optimism)
@@ -13,6 +13,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import InteropExplainer from '@/pages/stack/interop/explainer.mdx'
+import InteropExplainer from '@/pages/interop/explainer.mdx'
 
 <InteropExplainer />
@@ -13,153 +13,9 @@ categories:
   - standard-bridge
   - mainnet
   - superchain-erc20
-is_imported_content: 'false'
+is_imported_content: 'true'
 ---
 
-import { Callout, Steps } from 'nextra/components'
-import Image from 'next/image'
-import { Tabs } from 'nextra/components'
+import InteropStarterKit from '@/pages/interop/starter-kit.mdx'
 
-<Callout>
-The SuperchainERC20 standard is ready for production use with active Mainnet deployments. 
-Please note that the OP Stack interoperability upgrade, required for crosschain messaging, is currently still in active development.
-</Callout>
-
-# Deploying a SuperchainERC20 (Starter Kit)
-
-The [SuperchainERC20 Starter Kit](https://github.com/ethereum-optimism/superchainerc20-starter) is a development toolkit designed to simplify the creation, deployment, and testing of SuperchainERC20 tokens. It leverages cross-chain interoperability for the deployment of ERC20 tokens that can be used across different blockchains in the Superchain ecosystem.
-
-## How it works
-
-Here's a breakdown of what's under the hood:
-
-*   **Cross-Chain Interoperability**: SuperchainERC20 tokens can move across multiple chains. This is possible by using the [IERC-7802](https://eips.ethereum.org/EIPS/eip-7802) interface, which lets tokens be minted on one chain and burned on another to maintain a consistent supply.
-
-*   **Superchain Network**: The Superchain is a network of connected blockchains, allowing smooth data and asset flow. By using Optimism's scaling solutions, the Superchain reduces gas fees and speeds up transactions.
-
-*   **Deployment**: The kit helps deploy SuperchainERC20 tokens on Ethereum-compatible chains, including setting up contracts, minting, burning, and cross-chain communication.
-
-*   **Testing**: Test scripts simulate real token transfers across chains to ensure everything works properly before going live.
-
-## Setup
-
-<Steps>
-  ### Install `foundry`
-
-  `supersim` requires `anvil` to be installed.
-
-  Follow the [Foundry toolchain](https://book.getfoundry.sh/getting-started/installation) guide for detailed instructions.
-
-  ### Clone the repo
-
-  Next, you need to clone and navigate to the repo:
-
-  ```sh
-  git clone https://github.com/ethereum-optimism/superchainerc20-starter.git
-  cd superchainerc20-starter
-  ```
-
-  ### Install dependencies
-
-  Install project dependencies using `pnpm`:
-
-  ```sh
-  pnpm i
-  ```
-
-  ### Initialize .env files
-
-  ```sh
-  pnpm init:env
-  ```
-
-  ### Start the development environment
-
-  This command will:
-
-  *   Start the `supersim` local development environment
-  *   Deploy the smart contracts to the test networks
-  *   Launch the example frontend application
-
-  ```sh
-  pnpm dev
-  ```
-
-  <details>
-
-    <summary>Sanity check</summary>
-
-    Browse to [the console](http://localhost:5173/), mint some tokens and transfer them.
-
-  </details>
-</Steps>
-
-## Deploy SuperchainERC20s
-
-<Steps>
-  ### Configure RPC urls
-
-  This repository includes a script to automatically fetch the public RPC URLs for each chain listed in the [Superchain Registry](https://github.com/ethereum-optimism/superchain-registry/blob/main/chainList.json) and add them to the `[rpc_endpoints]` configuration section of `foundry.toml`.
-
-  The script ensures that only new RPC URLs are appended, preserving any URLs already present in `foundry.toml`. To execute this script, run:
-
-  ```sh
-  pnpm contracts:update:rpcs
-  ```
-
-  ### Modify deploy config parameters
-
-  The deployment configuration for token deployments is managed through the `deploy-config.toml` file. Below is a detailed breakdown of each configuration section:
-
-  #### `[deploy-config]`
-
-  This section defines parameters for deploying token contracts.
-
-  | Parameter | Description                                                                                                                                                               | Example                                |
-  | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-  | `salt`    | A unique identifier used for deploying token contracts via \[`Create2`]. This value along with the contract bytecode ensures that contract deployments are deterministic. | `salt = "ethers phoenix"`              |
-  | `chains`  | Lists the chains where the token will be deployed. Each chain must correspond to an entry in the `[rpc_endpoints]` section of `foundry.toml`.                             | `chains = ["op_chain_a","op_chain_b"]` |
-
-  #### `[token]`
-
-  Deployment configuration for the token that will be deployed.
-
-  | Parameter       | Description                                                                                                                                                                                                                                                   | Example                                                        |
-  | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-  | `owner_address` | The address designated as the owner of the token. The `L2NativeSuperchainERC20.sol` contract included in this repo extends the [`Ownable`](https://github.com/Vectorized/solady/blob/c3b2ffb4a3334ea519555c5ea11fb0e666f8c2bc/src/auth/Ownable.sol) contract. | `owner_address = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"` |
-  | `name`          | The token's name.                                                                                                                                                                                                                                             | `name = "TestSuperchainERC20"`                                 |
-  | `symbol`        | The token's symbol.                                                                                                                                                                                                                                           | `symbol = "TSU"`                                               |
-  | `decimals`      | The number of decimal places the token supports.                                                                                                                                                                                                              | `decimals = 18`                                                |
-
-  ### Deploy a token
-
-  *   Before proceeding, ensure that your `deploy-config.toml` file is fully configured (see the [Modify Deploy Config Parameters](#modify-deploy-config-parameters) section setup details).
-  *   Also, confirm that the `[rpc_endpoints]` section in `foundry.toml` is properly set up by following the instructions in [Configure RPC urls](#configure-rpc-urls).
-
-  <Callout>
-    Deployments are executed through the `SuperchainERC20Deployer.s.sol` script. This script deploys tokens across each specified chain in the deployment configuration using `Create2`, ensuring deterministic contract addresses for each deployment. The script targets the `L2NativeSuperchainERC20.sol` contract by default. If you need to modify the token being deployed, either update this file directly or point the script to a custom token contract of your choice.
-  </Callout>
-
-  *   To execute a token deployment run:
-
-  ```sh
-  pnpm contracts:deploy:token
-
-  ```
-</Steps>
-
-## Best practices for deploying SuperchainERC20
-
-### Use `Create2` to deploy SuperchainERC20
-
-`Create2` ensures that the address is deterministically determined by the bytecode of the contract and the provided salt. This is crucial because in order for cross-chain transfers of `SuperchainERC20`s to work with interop, the tokens must be deployed at the same address across all chains.
-
-### Set safe `crosschainMint` and `crosschainBurn` permissions
-
-For best security practices `SuperchainERC20Bridge` should be the only contract with permission to call `crosschainMint` and `crosschainBurn`. These permissions are set up by default when using the `SuperchainERC20` contract.
-
-## Next Steps
-
-*   Test your token deployment on multiple chains using [Supersim](/app-developers/tools/supersim) and run simple [end-to-end integration tests](https://github.com/ethereum-optimism/superchainerc20-starter/blob/main/README.md#-e2e-tests).
-*   For specific use cases, check out our guides for [bridging a SuperchainERC20 token to another chain](https://github.com/ethereum-optimism/superchainerc20-starter/blob/main/README.md#-example-how-to-bridge-a-superchainerc20-token-to-another-chain) or [modifying an existing ERC20 contract to be interoperable](https://github.com/ethereum-optimism/superchainerc20-starter/blob/main/README.md#updating-an-erc20-contract-to-be-interoperable).
-*   Questions about Interop? Check out our collection of [interop guides](/stack/interop) or check out this [Superchain interop design video walk-thru](https://www.youtube.com/watch?v=FKc5RgjtGes).
+<InteropStarterKit />
@@ -24,7 +24,7 @@ The Superchain ecosystem repository was developed to help ease and expedite the
 
 ## Getting started
 
-Our initial launch includes a [bridge tutorial](/stack/interop/tutorials/bridge-crosschain-eth) that demonstrates how to bridge ETH and any ERC20 tokens listed in the [Superchain Token List](/superchain/tokenlist). This tutorial serves as a reference for anyone looking to build their own bridge, providing a clearer understanding of how to interact with the protocol on both the L1 and L2 sides.
+Our initial launch includes a [bridge tutorial](/interop/tutorials/bridge-crosschain-eth) that demonstrates how to bridge ETH and any ERC20 tokens listed in the [Superchain Token List](/superchain/tokenlist). This tutorial serves as a reference for anyone looking to build their own bridge, providing a clearer understanding of how to interact with the protocol on both the L1 and L2 sides.
 
 Additionally, we provide a package containing common utilities essential for developers interacting with both L1 and L2. One such package is [viem-optimism](https://github.com/ethereum-optimism/ecosystem/tree/main/packages/viem), which offers utilities for interacting with the OP Stack using the viem library.
 

@@ -66,5 +66,5 @@ This diagram illustrates how developers interact with Supersim through the CLI,
 ## Next steps
 
 *   Build a [revolutionary app](/app-developers/get-started) that uses multiple blockchains within the Superchain
-*   Deploy a [SuperchainERC20](/stack/interop/tutorials/deploy-superchain-erc20) to the Superchain
+*   Deploy a [SuperchainERC20](/interop/tutorials/deploy-superchain-erc20) to the Superchain
 *   View more [Supersim tutorials](/app-developers/tutorials/supersim)
@@ -13,6 +13,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import CrosschainETH from '@/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx'
+import CrosschainETH from '@/pages/interop/tutorials/bridge-crosschain-eth.mdx'
 
 <CrosschainETH />
@@ -14,6 +14,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import ContractCalls from '@/pages/stack/interop/tutorials/contract-calls.mdx'
+import ContractCalls from '@/pages/interop/tutorials/contract-calls.mdx'
 
 <ContractCalls />
@@ -15,6 +15,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import DeploySuperERC20 from '@/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx'
+import DeploySuperERC20 from '@/pages/interop/tutorials/deploy-superchain-erc20.mdx'
 
 <DeploySuperERC20 />
@@ -14,6 +14,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import EventContests from '@/pages/stack/interop/tutorials/event-contests.mdx'
+import EventContests from '@/pages/interop/tutorials/event-contests.mdx'
 
 <EventContests />
@@ -14,6 +14,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import EventReads from '@/pages/stack/interop/tutorials/event-reads.mdx'
+import EventReads from '@/pages/interop/tutorials/event-reads.mdx'
 
 <EventReads />
@@ -15,6 +15,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import RelayCast from '@/pages/stack/interop/tutorials/relay-messages-cast.mdx'
+import RelayCast from '@/pages/interop/tutorials/relay-messages-cast.mdx'
 
 <RelayCast />
@@ -15,6 +15,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import RelayViem from '@/pages/stack/interop/tutorials/relay-messages-viem.mdx'
+import RelayViem from '@/pages/interop/tutorials/relay-messages-viem.mdx'
 
 <RelayViem />
@@ -17,6 +17,6 @@ categories:
 is_imported_content: 'true'
 ---
 
-import TransferSuperERC20 from '@/pages/stack/interop/tutorials/transfer-superchainERC20.mdx'
+import TransferSuperERC20 from '@/pages/interop/tutorials/transfer-superchainERC20.mdx'
 
 <TransferSuperERC20 />
@@ -107,5 +107,5 @@ We'll run through a sample deposit directly with the `OptimismPortal` using cast
 ## Next steps
 
 *   See the [transaction guides](/app-developers/transactions) for more detailed information.
-*   Questions about Interop? Check out collection of [interop guides](/stack/interop) or check out this [Superchain interop design video walk-thru](https://www.youtube.com/watch?v=FKc5RgjtGes).
+*   Questions about Interop? Check out collection of [interop guides](/interop/explainer) or check out this [Superchain interop design video walk-thru](https://www.youtube.com/watch?v=FKc5RgjtGes).
 *   For more info about how Superchain interoperability works under the hood, [check out the specs](https://specs.optimism.io/interop/overview.html?utm_source=op-docs&utm_medium=docs).