Skip to content

Commit 7b08bc2

Browse files
Merge pull request #1564 from ethereum-optimism/interop-nav
Interop nav work
2 parents a7ab58c + edbfc33 commit 7b08bc2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+465
-411
lines changed

pages/_meta.json

+11
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,17 @@
4040
},
4141
"display": "children"
4242
},
43+
"interop": {
44+
"title": "Interoperability",
45+
"type":"page",
46+
"theme": {
47+
"navbar": true,
48+
"sidebar": true,
49+
"toc": true,
50+
"pagination": true
51+
},
52+
"display": "children"
53+
},
4354
"app-developers": {
4455
"title": "App Devs",
4556
"type": "page",

pages/app-developers/get-started.mdx

+3-61
Original file line numberDiff line numberDiff line change
@@ -13,68 +13,10 @@ categories:
1313
- interoperability
1414
- standard-bridge
1515
- testnet
16-
is_imported_content: 'false'
16+
is_imported_content: 'true'
1717
---
1818

19-
import { Cards, Card, Callout } from 'nextra/components'
19+
import InteropGettingStarted from '@/pages/interop/get-started.mdx'
2020

21-
# Build interoperable apps on Superchain devnet
21+
<InteropGettingStarted />
2222

23-
Reimagine your app with Superchain Interop to deliver the unified UX your users expect. Hack on net-new, bold use cases on Interop devnet.
24-
25-
<Callout type="info">
26-
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.
27-
</Callout>
28-
29-
## Connect to Superchain Interop
30-
31-
Select a network to build, test, and quickly iterate on interoperable apps.
32-
33-
| Local network | Devnet |
34-
| :-------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- |
35-
| 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. |
36-
| <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> |
37-
| [Supersim](tutorials/supersim) | [Devnet Docs](/stack/interop/tools/devnet) |
38-
39-
## Deploy your app to devnet in minutes
40-
41-
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.
42-
43-
* [Get the Starter Kit](starter-kit)
44-
45-
## Tools & resources for building interoperable apps
46-
47-
| Tool | Description |
48-
| ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
49-
| [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. |
50-
| [Supersim](tools/supersim) | Local multi-chain testing environment for smart contracts. |
51-
| [Super CLI](https://github.com/ethereum-optimism/super-cli) | Command-line tool for seamless multichain app deployment and testing. |
52-
| [Superchain Relayer](https://github.com/ethereum-optimism/superchain-relayer) | UI for monitoring and managing cross-chain transactions. |
53-
| [Interop Docs](/stack/interop) | Comprehensive Interop information in the Optimism Docs. |
54-
| [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. |
55-
56-
## Handy step-by-step guides
57-
58-
<Cards>
59-
<Card title="Supersim tutorials" href="/app-developers/tutorials/supersim" icon={<img src="/img/icons/shapes.svg" />} />
60-
61-
<Card title="Interop tutorials" href="/app-developers/tutorials/interop" icon={<img src="/img/icons/shapes.svg" />} />
62-
63-
<Card title="Transaction tutorials" href="/app-developers/tutorials/transactions" icon={<img src="/img/icons/shapes.svg" />} />
64-
65-
<Card title="Bridging tutorials" href="/app-developers/tutorials/bridging" icon={<img src="/img/icons/shapes.svg" />} />
66-
</Cards>
67-
68-
## Discover and build net-new use cases with Superchain Interop
69-
70-
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:
71-
72-
| Superloans | Superlend | SuperCDP |
73-
| :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- |
74-
| 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. |
75-
76-
## Join app dev community and build together
77-
78-
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.
79-
80-
* [Join Discord community](https://discord.gg/optimism)

pages/app-developers/interop.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ categories:
1313
is_imported_content: 'true'
1414
---
1515

16-
import InteropExplainer from '@/pages/stack/interop/explainer.mdx'
16+
import InteropExplainer from '@/pages/interop/explainer.mdx'
1717

1818
<InteropExplainer />

pages/app-developers/starter-kit.mdx

+3-147
Original file line numberDiff line numberDiff line change
@@ -13,153 +13,9 @@ categories:
1313
- standard-bridge
1414
- mainnet
1515
- superchain-erc20
16-
is_imported_content: 'false'
16+
is_imported_content: 'true'
1717
---
1818

19-
import { Callout, Steps } from 'nextra/components'
20-
import Image from 'next/image'
21-
import { Tabs } from 'nextra/components'
19+
import InteropStarterKit from '@/pages/interop/starter-kit.mdx'
2220

23-
<Callout>
24-
The SuperchainERC20 standard is ready for production use with active Mainnet deployments.
25-
Please note that the OP Stack interoperability upgrade, required for crosschain messaging, is currently still in active development.
26-
</Callout>
27-
28-
# Deploying a SuperchainERC20 (Starter Kit)
29-
30-
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.
31-
32-
## How it works
33-
34-
Here's a breakdown of what's under the hood:
35-
36-
* **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.
37-
38-
* **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.
39-
40-
* **Deployment**: The kit helps deploy SuperchainERC20 tokens on Ethereum-compatible chains, including setting up contracts, minting, burning, and cross-chain communication.
41-
42-
* **Testing**: Test scripts simulate real token transfers across chains to ensure everything works properly before going live.
43-
44-
## Setup
45-
46-
<Steps>
47-
### Install `foundry`
48-
49-
`supersim` requires `anvil` to be installed.
50-
51-
Follow the [Foundry toolchain](https://book.getfoundry.sh/getting-started/installation) guide for detailed instructions.
52-
53-
### Clone the repo
54-
55-
Next, you need to clone and navigate to the repo:
56-
57-
```sh
58-
git clone https://github.com/ethereum-optimism/superchainerc20-starter.git
59-
cd superchainerc20-starter
60-
```
61-
62-
### Install dependencies
63-
64-
Install project dependencies using `pnpm`:
65-
66-
```sh
67-
pnpm i
68-
```
69-
70-
### Initialize .env files
71-
72-
```sh
73-
pnpm init:env
74-
```
75-
76-
### Start the development environment
77-
78-
This command will:
79-
80-
* Start the `supersim` local development environment
81-
* Deploy the smart contracts to the test networks
82-
* Launch the example frontend application
83-
84-
```sh
85-
pnpm dev
86-
```
87-
88-
<details>
89-
90-
<summary>Sanity check</summary>
91-
92-
Browse to [the console](http://localhost:5173/), mint some tokens and transfer them.
93-
94-
</details>
95-
</Steps>
96-
97-
## Deploy SuperchainERC20s
98-
99-
<Steps>
100-
### Configure RPC urls
101-
102-
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`.
103-
104-
The script ensures that only new RPC URLs are appended, preserving any URLs already present in `foundry.toml`. To execute this script, run:
105-
106-
```sh
107-
pnpm contracts:update:rpcs
108-
```
109-
110-
### Modify deploy config parameters
111-
112-
The deployment configuration for token deployments is managed through the `deploy-config.toml` file. Below is a detailed breakdown of each configuration section:
113-
114-
#### `[deploy-config]`
115-
116-
This section defines parameters for deploying token contracts.
117-
118-
| Parameter | Description | Example |
119-
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
120-
| `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"` |
121-
| `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"]` |
122-
123-
#### `[token]`
124-
125-
Deployment configuration for the token that will be deployed.
126-
127-
| Parameter | Description | Example |
128-
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
129-
| `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"` |
130-
| `name` | The token's name. | `name = "TestSuperchainERC20"` |
131-
| `symbol` | The token's symbol. | `symbol = "TSU"` |
132-
| `decimals` | The number of decimal places the token supports. | `decimals = 18` |
133-
134-
### Deploy a token
135-
136-
* 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).
137-
* 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).
138-
139-
<Callout>
140-
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.
141-
</Callout>
142-
143-
* To execute a token deployment run:
144-
145-
```sh
146-
pnpm contracts:deploy:token
147-
148-
```
149-
</Steps>
150-
151-
## Best practices for deploying SuperchainERC20
152-
153-
### Use `Create2` to deploy SuperchainERC20
154-
155-
`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.
156-
157-
### Set safe `crosschainMint` and `crosschainBurn` permissions
158-
159-
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.
160-
161-
## Next Steps
162-
163-
* 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).
164-
* 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).
165-
* 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).
21+
<InteropStarterKit />

pages/app-developers/tools/build/ecosystem-overview.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The Superchain ecosystem repository was developed to help ease and expedite the
2424

2525
## Getting started
2626

27-
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.
27+
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.
2828

2929
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.
3030

pages/app-developers/tools/supersim.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,5 @@ This diagram illustrates how developers interact with Supersim through the CLI,
6666
## Next steps
6767

6868
* Build a [revolutionary app](/app-developers/get-started) that uses multiple blockchains within the Superchain
69-
* Deploy a [SuperchainERC20](/stack/interop/tutorials/deploy-superchain-erc20) to the Superchain
69+
* Deploy a [SuperchainERC20](/interop/tutorials/deploy-superchain-erc20) to the Superchain
7070
* View more [Supersim tutorials](/app-developers/tutorials/supersim)

pages/app-developers/tutorials/interop/bridge-crosschain-eth.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ categories:
1313
is_imported_content: 'true'
1414
---
1515

16-
import CrosschainETH from '@/pages/stack/interop/tutorials/bridge-crosschain-eth.mdx'
16+
import CrosschainETH from '@/pages/interop/tutorials/bridge-crosschain-eth.mdx'
1717

1818
<CrosschainETH />

pages/app-developers/tutorials/interop/contract-calls.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ categories:
1414
is_imported_content: 'true'
1515
---
1616

17-
import ContractCalls from '@/pages/stack/interop/tutorials/contract-calls.mdx'
17+
import ContractCalls from '@/pages/interop/tutorials/contract-calls.mdx'
1818

1919
<ContractCalls />

pages/app-developers/tutorials/interop/deploy-superchain-erc20.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ categories:
1515
is_imported_content: 'true'
1616
---
1717

18-
import DeploySuperERC20 from '@/pages/stack/interop/tutorials/deploy-superchain-erc20.mdx'
18+
import DeploySuperERC20 from '@/pages/interop/tutorials/deploy-superchain-erc20.mdx'
1919

2020
<DeploySuperERC20 />

pages/app-developers/tutorials/interop/event-contests.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ categories:
1414
is_imported_content: 'true'
1515
---
1616

17-
import EventContests from '@/pages/stack/interop/tutorials/event-contests.mdx'
17+
import EventContests from '@/pages/interop/tutorials/event-contests.mdx'
1818

1919
<EventContests />

pages/app-developers/tutorials/interop/event-reads.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ categories:
1414
is_imported_content: 'true'
1515
---
1616

17-
import EventReads from '@/pages/stack/interop/tutorials/event-reads.mdx'
17+
import EventReads from '@/pages/interop/tutorials/event-reads.mdx'
1818

1919
<EventReads />

pages/app-developers/tutorials/interop/relay-messages-cast.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ categories:
1515
is_imported_content: 'true'
1616
---
1717

18-
import RelayCast from '@/pages/stack/interop/tutorials/relay-messages-cast.mdx'
18+
import RelayCast from '@/pages/interop/tutorials/relay-messages-cast.mdx'
1919

2020
<RelayCast />

pages/app-developers/tutorials/interop/relay-messages-viem.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ categories:
1515
is_imported_content: 'true'
1616
---
1717

18-
import RelayViem from '@/pages/stack/interop/tutorials/relay-messages-viem.mdx'
18+
import RelayViem from '@/pages/interop/tutorials/relay-messages-viem.mdx'
1919

2020
<RelayViem />

pages/app-developers/tutorials/interop/transfer-superchainERC20.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,6 @@ categories:
1717
is_imported_content: 'true'
1818
---
1919

20-
import TransferSuperERC20 from '@/pages/stack/interop/tutorials/transfer-superchainERC20.mdx'
20+
import TransferSuperERC20 from '@/pages/interop/tutorials/transfer-superchainERC20.mdx'
2121

2222
<TransferSuperERC20 />

pages/app-developers/tutorials/supersim/deposit-transactions.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,5 +107,5 @@ We'll run through a sample deposit directly with the `OptimismPortal` using cast
107107
## Next steps
108108

109109
* See the [transaction guides](/app-developers/transactions) for more detailed information.
110-
* 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).
110+
* 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).
111111
* 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).

0 commit comments

Comments
 (0)