supersim explainer

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

pages/builders/app-developers/tools/_meta.json

@@ -1,5 +1,6 @@
 {
     "ecosystem-overview": "Open Source Code Repo",
+    "supersim": "Supersim Multichain Development Environment",
     "console": {
         "title": "Superchain Dev Console",
         "href": "https://console.optimism.io/?utm_source=docs",

pages/builders/app-developers/tools/supersim.mdx

@@ -0,0 +1,6 @@
+---
+---
+
+import SuperSim from '@/pages/stack/protocol/interop/supersim.mdx'
+
+<SuperSim />

pages/stack/protocol/interop/_meta.json

@@ -1,4 +1,5 @@
 {
     "explainer": "Interop Explainer",
-    "cross-chain-message": "Anatomy of Cross-Chain Message"
+    "cross-chain-message": "Anatomy of Cross-Chain Message",
+    "supersim": "Supersim Multichain Development Environment"
 }

pages/stack/protocol/interop/cross-chain-message.mdx

@@ -32,5 +32,5 @@ In the example above, `Ox123` sends 1 OP from OP Mainnet to Base, but this appli
 ## Next Steps
 
 *   More questions? Check out the FAQ section in the [Superchain Interop Explainer](explainer#faqs) or check out this [Superchain interop design video walk-thru](https://www.youtube.com/watch?v=FKc5RgjtGes).
-*   Ready to get started? Use [SuperSim](https://github.com/ethereum-optimism/supersim), a local dev environment that simulates Superchain interop for testing applications against a local version of the Superchain.
+*   Ready to get started? Use [Supersim](supersim), a local dev environment that simulates Superchain interop for testing applications against a local version of the Superchain.
 *   For more info about how Superchain interoperability works under the hood, [check out the specs](https://specs.optimism.io/interop/overview.html).

pages/stack/protocol/interop/explainer.mdx

@@ -52,7 +52,7 @@ For additional considerations, join the [Interop discussion](https://github.com/
 
 ## Next Steps
 *   Want to learn more? Read our guide on the anatomy of a [cross-chain message](cross-chain-message) or check out this [interop design video walk-thru](https://www.youtube.com/watch?v=FKc5RgjtGes).
-*   Ready to get started? Use [SuperSim](https://github.com/ethereum-optimism/supersim), a local dev environment that simulates interop for testing applications against a local version of the Superchain.
+*   Ready to get started? Use [Supersim](supersim), a local dev environment that simulates interop for testing applications against a local version of the Superchain.
 *   For more info about how OP Stack interoperability works under the hood, [check out the specs](https://specs.optimism.io/interop/overview.html).
 
 ## FAQs

pages/stack/protocol/interop/supersim.mdx

@@ -0,0 +1,64 @@
+---
+title: Supersim Multichain Development Environment
+lang: en-US
+description: Learn how to use the Supersim local dev environment tool designed to simulate the Optimism Superchain.
+---
+
+import { Callout } from 'nextra/components'
+
+# Supersim Multichain Development Environment
+
+<Callout>
+  Interop is currently in active development and not yet ready for production use. The information provided here may change. It is recommended to check back regularly for the most up-to-date information.
+</Callout>
+
+[Supersim](https://github.com/ethereum-optimism/Supersim) is a local development environment tool designed to simulate the Optimism Superchain for developers building multi-chain applications. It provides a simplified way to test and develop applications that interact with multiple chains within the Superchain ecosystem.
+
+## Supersim Workflow
+
+```mermaid
+graph LR
+    A[Write Smart Contracts] --> B[Deploy on Supersim]
+    B --> C[Test Cross-Chain Interactions]
+    C --> D[Debug and Refine]
+    D --> B
+    C --> E[Ready for Production]
+```
+
+This diagram illustrates the typical workflow for developers using Supersim, from writing smart contracts to testing and refining cross-chain interactions.
+
+## Features and Benefits
+
+*   Simulates multiple OP Stack chains locally (e.g., chain 901, 902)
+*   Supports testing of cross-chain messaging and interactions
+*   Includes pre-deployed interoperability contracts
+*   Offers a CLI interface for starting and managing Supersim instances
+*   Provides local JSON-RPC endpoints for each simulated chain
+*   Allows for custom configuration of chain parameters
+*   Facilitates testing of Superchain-specific features like SuperchainERC20 tokens
+*   Easy to use with common Ethereum development tools 
+*   Supports chain forking
+
+## Supersim CLI Interaction
+
+```mermaid
+graph TD
+    A[Developer] --> B[Supersim CLI]
+    B --> C[Chain 901]
+    B --> D[Chain 902]
+    B --> E[...]
+    C --> F[JSON-RPC Endpoint]
+    D --> G[JSON-RPC Endpoint]
+    E --> H[JSON-RPC Endpoint]
+    I[Pre-deployed Interoperability Contracts] --> C
+    I --> D
+    I --> E
+```
+
+This diagram illustrates how developers interact with Supersim through the CLI, which simulates OP Stack specific features (specifically interop) on locally run chains, each with its own JSON-RPC endpoint and pre-deployed interoperability contracts.
+
+## Next Steps
+
+*   Check out the dedicated [Supersim docs](https://Supersim.pages.dev/) for tutorials and specific use cases.
+*   Questions about Interop? Check out the FAQ section in the [Superchain Interop Explainer](/stack/protocol/interop/explainer#faqs) 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).