Skip to content

Commit 4f1b8a7

Browse files
committed
Fix merge conflicts
2 parents f7bf2c6 + aaefe31 commit 4f1b8a7

File tree

110 files changed

+2844
-687
lines changed

Some content is hidden

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

110 files changed

+2844
-687
lines changed

components/AskAIButton.tsx

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,36 @@
11
import { RiSparkling2Fill } from '@remixicon/react';
22
import { useFeature } from '@growthbook/growthbook-react';
3+
import { useEffect, useState } from 'react';
34

45
const AskAIButton = () => {
6+
const [mounted, setMounted] = useState(false);
57
const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
8+
9+
useEffect(() => {
10+
setMounted(true);
11+
}, []);
12+
13+
// Don't render anything until client-side
14+
if (!mounted) {
15+
return null;
16+
}
617

718
if (!enableDocsAIWidget) {
819
return null;
920
}
1021

1122
return (
12-
<button id='custom-ask-ai-button' className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' style={{ backgroundColor: '#FF0420', color: 'white', display: 'flex', alignItems: 'center', gap: '4px' }}>
23+
<button
24+
id='custom-ask-ai-button'
25+
className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold'
26+
style={{
27+
backgroundColor: '#FF0420',
28+
color: 'white',
29+
display: 'flex',
30+
alignItems: 'center',
31+
gap: '4px'
32+
}}
33+
>
1334
<span>Ask AI</span>
1435
<RiSparkling2Fill size={14} />
1536
</button>

components/WipCallout.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,8 @@ export function InteropCallout({ context }: Props): ReactElement {
6262
<div className="nx-text-left">
6363
Interop is currently in <strong>active development</strong> and not
6464
yet ready for production use. The information provided here may
65-
change frequently.
66-
<p>
67-
We recommend checking back regularly for the most up-to-date
65+
change frequently. We recommend checking back regularly for the most up-to-date
6866
information.
69-
</p>
7067
</div>
7168
)}
7269
</div>

nouns.txt

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Ethereum
44
OP Stack
55
MetaMask
66
SuperchainERC20
7+
SuperchainERC20 Starter Kit
8+
Supersim
79
ZK
810
Security Council
911
Sequencer PBS

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"fix": "eslint . --ext mdx --fix && pnpm spellcheck:fix && pnpm breadcrumbs && pnpm fix-redirects",
88
"spellcheck:lint": "cspell lint \"**/*.mdx\"",
99
"spellcheck:fix": "cspell --words-only --unique \"**/*.mdx\" | sort --ignore-case | uniq > words.txt",
10+
"linkcheck": "lychee --config ./lychee.toml --quiet \"./pages\"",
1011
"breadcrumbs": "npx ts-node --skip-project utils/create-breadcrumbs.ts",
1112
"check-redirects": "npx ts-node --skip-project utils/redirects.ts",
1213
"fix-redirects": "npx ts-node --skip-project utils/fix-redirects.ts",

pages/app-developers/_meta.json

+30-5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,35 @@
33
"title": "App Developers",
44
"type": "separator"
55
},
6-
"overview": "Overview",
7-
"quick-start": "Superchain app quick start",
8-
"tutorials": "Tutorials",
9-
"transactions": "Transactions",
6+
"get-started": "Getting started",
7+
"starter-kit": "SuperchainERC20 starter kit",
8+
"interop": "Interoperability",
9+
"building-apps": "Building apps on the Superchain",
10+
"testing-apps": "Testing apps for the Superchain",
1011
"bridging": "Bridging",
11-
"tools": "App tools"
12+
"transactions": "Transactions",
13+
"+++ Tutorials": {
14+
"title": "",
15+
"type": "separator"
16+
},
17+
"--- Tutorials": {
18+
"title": "Tutorials",
19+
"type": "separator"
20+
},
21+
"tutorials": {
22+
"title": "Tutorials",
23+
"display": "children"
24+
},
25+
"+++ DevTools": {
26+
"title": "",
27+
"type": "separator"
28+
},
29+
"--- DevTools": {
30+
"title": "Developer tools",
31+
"type": "separator"
32+
},
33+
"tools": {
34+
"title": "Developer tools",
35+
"display": "children"
36+
}
1237
}

pages/app-developers/bridging.mdx

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
---
2-
title: Bridging
2+
title: Bridging guides
33
lang: en-US
44
description: Learn about bridging basics, custom bridges, data transmission between L1 and L2, and using the standard bridge in OP Stack.
55
---
66

77
import { Card, Cards } from 'nextra/components'
88

9-
# Bridging
9+
# Bridging guides
1010

11-
This section provides information on bridging basics, custom bridges, sending data between l1 and l2 and using the standard bridge. You'll find guide, overview to help you understand and work with these topics.
11+
Looking to build an application that sends ETH, tokens, or data between OP Mainnet and Ethereum?
12+
You'll find some useful guides and tutorials in this area of the docs.
13+
For instance, if you want to learn how to bridge a token from Ethereum to OP Mainnet (or vice versa!), you should check out the [Standard Token Bridge](bridging/standard-bridge).
14+
15+
If you're looking for something more advanced, take a look at the guide on [sending data between L1 and L2](bridging/messaging).
16+
Contracts on one chain can trigger contract functions on the other chain, which is pretty cool!
17+
The Standard Token Bridge for OP Mainnet even uses this same message-passing infrastructure under the hood.
1218

1319
<Cards>
14-
<Card title="Bridging basics" href="/app-developers/bridging/basics" />
15-
<Card title="Custom bridges" href="/app-developers/bridging/custom-bridge" />
16-
<Card title="Sending data between L1 and L2" href="/app-developers/bridging/messaging" />
17-
<Card title="The Standard Bridge" href="/app-developers/bridging/standard-bridge" />
20+
<Card title="Bridging basics" href="/app-developers/bridging/basics" icon={<img src="/img/icons/shapes.svg" />} />
21+
<Card title="Standard bridge" href="/app-developers/bridging/standard-bridge" icon={<img src="/img/icons/shapes.svg" />} />
22+
<Card title="Custom bridges" href="/app-developers/bridging/custom-bridge" icon={<img src="/img/icons/shapes.svg" />} />
23+
<Card title="Sending data between L1 and L2" href="/app-developers/bridging/messaging" icon={<img src="/img/icons/shapes.svg" />} />
1824
</Cards>

pages/app-developers/bridging/basics.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ All of this is easily accessible with a simple, clean API.
2828
Ready to start bridging?
2929
Check out these tutorials to get up to speed fast.
3030

31-
* [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/cross-dom-bridge-erc20)
32-
* [Learn how to bridge ETH with viem](/app-developers/tutorials/cross-dom-bridge-eth)
33-
* [Learn how to create a standard bridged token](/app-developers/tutorials/standard-bridge-standard-token)
34-
* [Learn how to create a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token)
31+
* [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/bridging/cross-dom-bridge-erc20)
32+
* [Learn how to bridge ETH with viem](/app-developers/tutorials/bridging/cross-dom-bridge-eth)
33+
* [Learn how to create a standard bridged token](/app-developers/tutorials/bridging/standard-bridge-standard-token)
34+
* [Learn how to create a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token)

pages/app-developers/bridging/custom-bridge.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ This guide provides important information you should be aware of when building a
1515
<Callout>
1616
Custom bridges can bring a significant amount of complexity and risk to any project.
1717
Before you commit to a custom bridge, be sure that the [Standard Bridge](./standard-bridge) definitely does not support your use case.
18-
[Building a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token) is often sufficient for projects that need more flexibility.
18+
[Building a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token) is often sufficient for projects that need more flexibility.
1919
</Callout>
2020

2121
## Guidelines

pages/app-developers/bridging/messaging.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ This page explains how bridging works, how to use it, and what to watch out for.
1313

1414
<Callout type="info">
1515
This is a high-level overview of the bridging process.
16-
For a step-by-step tutorial on how to send data between L1 and L2, check out the [Solidity tutorial](/app-developers/tutorials/cross-dom-solidity).
16+
For a step-by-step tutorial on how to send data between L1 and L2, check out the [Solidity tutorial](/app-developers/tutorials/bridging/cross-dom-solidity).
1717
</Callout>
1818

1919
## Understanding contract calls

pages/app-developers/bridging/standard-bridge.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -199,10 +199,10 @@ Users simply need to trigger and send ETH to the [`bridgeETH`](https://github.co
199199

200200
## Tutorials
201201

202-
* [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/cross-dom-bridge-erc20)
203-
* [Learn how to bridge ETH with viem](/app-developers/tutorials/cross-dom-bridge-eth)
204-
* [Learn how to create a standard bridged token](/app-developers/tutorials/standard-bridge-standard-token)
205-
* [Learn how to create a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token)
202+
* [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/bridging/cross-dom-bridge-erc20)
203+
* [Learn how to bridge ETH with viem](/app-developers/tutorials/bridging/cross-dom-bridge-eth)
204+
* [Learn how to create a standard bridged token](/app-developers/tutorials/bridging/standard-bridge-standard-token)
205+
* [Learn how to create a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token)
206206

207207
## Superchain Token List
208208

pages/app-developers/getting-started.mdx renamed to pages/app-developers/building-apps.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: Getting started developing for OP Stack chains
2+
title: Building apps on the Superchain
33
lang: en-US
4-
description: Learn the basics of OP Stack development.
4+
description: Learn the basics of building apps on the Superchain.
55
---
66

77
import { Steps } from 'nextra/components'
88

9-
# Getting started developing for OP Stack chains
9+
# Building apps on the Superchain
1010

1111
This guide explains the basics of OP Stack development.
1212
OP Stack chains are [EVM equivalent](https://web.archive.org/web/20231127160757/https://medium.com/ethereum-optimism/introducing-evm-equivalence-5c2021deb306), meaning they run a slightly modified version of the same `geth` you run on mainnet.

pages/app-developers/get-started.mdx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Build interoperable apps on Superchain devnet
3+
lang: en-US
4+
description: Learn about deploying contracts, cross-chain messaging, and tutorials to help you build applications on the Superchain.
5+
---
6+
7+
import { Cards, Card, Callout } from 'nextra/components'
8+
9+
# Build interoperable apps on Superchain devnet
10+
11+
Reimagine your app with Superchain Interop to deliver the unified UX your users expect. Hack on net-new, bold use cases on Interop devnet.
12+
13+
<Callout type="info">
14+
Explore the [Superchain Dev Console](https://console.optimism.io/) to build, launch, and grow your app on the Superchain.
15+
</Callout>
16+
17+
## Connect to Superchain Interop
18+
19+
Select a network to build, test, and quickly iterate on interoperable apps.
20+
21+
| Local network | Devnet |
22+
| :-------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- |
23+
| 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. |
24+
| <ul><li>RPC Endpoint: `local RPC URL` </li><li>Chain ID: `local chain ID`</li><li>[Block explorer](#)</li></ul> | <ul><li>RPC Endpoint: `devnet RPC URL`</li><li>Chain ID: `devnet chain ID`</li><li> [Block explorer](#)</li></ul> |
25+
| [Supersim](tutorials/supersim) | [Devnet Docs](/stack/interop/tools/devnet) |
26+
27+
## Deploy your app to devnet in minutes
28+
29+
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.
30+
31+
* [Get the Starter Kit](starter-kit)
32+
33+
## Tools & resources for building interoperable apps
34+
35+
| Tool | Description |
36+
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
37+
| [Supersim](tools/supersim) | Local multi-chain testing environment for smart contracts. |
38+
| [Super CLI](https://github.com/ethereum-optimism/super-cli) | Command-line tool for seamless multichain app deployment and testing. |
39+
| [Superchain Relayer](https://github.com/ethereum-optimism/superchain-relayer) | UI for monitoring and managing cross-chain transactions. |
40+
| [Interop Docs](/stack/interop) | Comprehensive Interop information in the Optimism Docs. |
41+
| [Superchain Dev Console](https://console.optimism.io/) | Comprensive tool to build, launch, and grow your app on the Superchain. |
42+
43+
## Handy step-by-step guides
44+
45+
<Cards>
46+
<Card title="Supersim tutorials" href="/app-developers/tutorials/supersim" icon={<img src="/img/icons/shapes.svg" />} />
47+
48+
<Card title="Interop tutorials" href="/app-developers/tutorials/interop" icon={<img src="/img/icons/shapes.svg" />} />
49+
50+
<Card title="Crosschain guides" href="/stack/interop/cross-chain" icon={<img src="/img/icons/shapes.svg" />} />
51+
52+
<Card title="Transaction tutorials" href="/app-developers/tutorials/transactions" icon={<img src="/img/icons/shapes.svg" />} />
53+
54+
<Card title="Bridging tutorials" href="/app-developers/tutorials/bridging" icon={<img src="/img/icons/shapes.svg" />} />
55+
</Cards>
56+
57+
## Discover and build net-new use cases with Superchain Interop
58+
59+
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:
60+
61+
| Superloans | Superlend | SuperCDP |
62+
| :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- |
63+
| 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. |
64+
65+
* [Join the Super Hackathon at ETH Denver 2024](https://www.ethdenver.com/)
66+
67+
## Join app dev community and build together
68+
69+
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.
70+
71+
* [Join Discord community](https://discord.gg/optimism)

pages/app-developers/interop.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Getting started with the OP Stack
3+
lang: en-US
4+
description: Learn the basics of OP Stack development.
5+
---
6+
7+
import InteropExplainer from '@/pages/stack/interop/explainer.mdx'
8+
9+
<InteropExplainer />

0 commit comments

Comments
 (0)