diff --git a/components/WipCallout.tsx b/components/WipCallout.tsx new file mode 100644 index 000000000..418646488 --- /dev/null +++ b/components/WipCallout.tsx @@ -0,0 +1,39 @@ +/** + * The WipCallout function renders a custom callout component with optional context text for + * displaying maintenance messages. + * @param {Props} - The code snippet you provided is a React component named `WipCallout` that + * renders a special callout message. The component takes an optional prop `context` of type string, + * which can be used to customize the message displayed in the callout. + * @returns The WipCallout component is being returned, which is a React element representing a + * custom callout with a message. The message displayed depends on the value of the `context` prop + * passed to the component. If `context` is provided, it will display the provided context message. If + * `context` is not provided, it will display a default maintenance message. + */ +import type { ReactElement } from 'react'; +interface Props { + context?: string; +} +export function WipCallout({ context }: Props): ReactElement { + return ( +
+
+ {context ? ( + context + ) : ( +
+ Please do not rely on the content of this page as it is currently + undergoing maintenance. Code samples and solutions may not function + as expected. Please check back for an update or{' '} + + signup to help us revise this page + + . We welcome your contribution! ❤️ +
+ )} +
+
+ ); +} diff --git a/content/OpProposerDescriptionShort.md b/content/OpProposerDescriptionShort.md new file mode 100644 index 000000000..08f3f9282 --- /dev/null +++ b/content/OpProposerDescriptionShort.md @@ -0,0 +1 @@ +`op-proposer` is the service that submits the output roots to the L1. This is to enable trustless execution of L2-to-L1 messaging and creates the view into the L2 state from the L1's perspective. \ No newline at end of file diff --git a/content/index.js b/content/index.js new file mode 100644 index 000000000..d709dbce7 --- /dev/null +++ b/content/index.js @@ -0,0 +1 @@ +export { default as OpProposerDescriptionShort } from './OpProposerDescriptionShort.md' diff --git a/messages/WipMsg.md b/messages/WipMsg.md new file mode 100644 index 000000000..85a10d077 --- /dev/null +++ b/messages/WipMsg.md @@ -0,0 +1,3 @@ +Please **do not rely** on the content of this page as it is currently undergoing maintenance. **Code samples and solutions may not function as expected.** Please check back for an update or [signup to help us revise this +page](https://github.com/ethereum-optimism/docs/labels/tutorial). We welcome +your contribution! ❤️ diff --git a/next-sitemap.config.js b/next-sitemap.config.js index f6d3a6b56..6f7627d0c 100644 --- a/next-sitemap.config.js +++ b/next-sitemap.config.js @@ -1,6 +1,6 @@ /** @type {import('next-sitemap').IConfig} */ module.exports = { - siteUrl: process.env.SITE_URL || 'https://snazzy-hamster-4e1647.netlify.app/', + siteUrl: process.env.SITE_URL || 'https://docs.optimism.io/', generateRobotsTxt: true, // (optional) generateIndexSitemap: true, // ...other options diff --git a/notes/content-reuse.md b/notes/content-reuse.md new file mode 100644 index 000000000..82b6cd9a4 --- /dev/null +++ b/notes/content-reuse.md @@ -0,0 +1,45 @@ +# Content Reuse + +Content reuse is when you reuse the same piece of content in various places. It means that technical writers don't have to re-write text many times, and it means that the original piece of copy should be easy to locate so that it can be used as often as needed. When changes are made to that original piece of text, it will then be automatically changed wherever else that piece of text is used, which saves a lot of time. + +## Content Directory + +The content directory contains markdown files that can be imported across the nextra website. + +## How to Write Reusable Content + +Create a `.md` file in the `/content` directory. + +### How to Use a Single Reusable Content Components + +1. Import it at the top of `.mdx` file: + +``` +import DescriptionShort from '@/content/DescriptionShort.md' +``` + +1. Use it within the file + +``` +Text before + + + +Text after +``` + +### How to Use a Multiple Reusable Content Components + +1. You can create a `index.js` file in the `content` directories and export +the components like this: + +``` +export { default as ComponentA } from './ComponentA.md' +export { default as ComponentB } from './ComponentB.md' +``` + +1. Import it at the top of `.mdx` file: + +``` +import {ComponentA, ComponentB} from '@/content/index.js' +``` diff --git a/notes/wip-callout.md b/notes/wip-callout.md new file mode 100644 index 000000000..8c9bcb809 --- /dev/null +++ b/notes/wip-callout.md @@ -0,0 +1,37 @@ +## Wip Callout: Rendering Custom Maintenance Messages + +The WipCallout component is a React functional component designed to render custom callouts for displaying messages about the page. This feature allows you to provide users with important information, including optional context text that makes it dynamic and reusable. + +## Directory + +You can find the WipCallout component in the `/components` directory. + +## Behavior + +When imported into a page, this component renders a message at the top of the nested page. It also sticks to the top when scrolling, ensuring users don't miss the important information. To add a different message, simply pass the `context` prop with your intended message. + +## How to Use Wip Callout + +1. Import it into your `.mdx` file: + +```typescript +import { WipCallout } from '@/components/WipCallout'; +``` + +2. Use it within the file + +```typescript + // with default message + + // with custom message + +// with a custom `.md` file +import WipMsg from "@/message/WipMsg.md" //import the md file + +} /> // with custom message + +``` + +## Maintenance + +Maintenance of this feature is straightforward. As a simple React component, you can find it located in the `/components` directory. Additionally, the relevant styling for this component can be found in the global CSS file at `/styles/global.css`. diff --git a/pages/builders/app-developers/tutorials/cross-dom-bridge-erc20.mdx b/pages/builders/app-developers/tutorials/cross-dom-bridge-erc20.mdx index 63c40112c..f3eed9f12 100644 --- a/pages/builders/app-developers/tutorials/cross-dom-bridge-erc20.mdx +++ b/pages/builders/app-developers/tutorials/cross-dom-bridge-erc20.mdx @@ -5,12 +5,19 @@ description: Learn how to use the Optimism SDK to transfer ERC-20 tokens between --- import { Callout, Steps } from 'nextra/components' +import { WipCallout } from '@/components/WipCallout' +import WipMsg from "@/message/WipMsg.md" + + # Bridging ERC-20 Tokens to OP Mainnet With the Optimism SDK -Please **do not rely** on the content of this page as it is currently undergoing maintenance. **Code samples and solutions may not function as expected.** -Please check back for an update or [signup to help us revise this page](https://github.com/ethereum-optimism/docs/labels/tutorial). We welcome your contribution! ❤️ + Please **do not rely** on the content of this page as it is currently + undergoing maintenance. **Code samples and solutions may not function as + expected.** Please check back for an update or [signup to help us revise this + page](https://github.com/ethereum-optimism/docs/labels/tutorial). We welcome + your contribution! ❤️ This tutorial explains how you can use the [Optimism SDK](https://sdk.optimism.io) to bridge ERC-20 tokens from L1 (Ethereum or Sepolia) to L2 (OP Mainnet or OP Sepolia). @@ -21,7 +28,10 @@ Behind the scenes, the Optimism SDK uses the [Standard Bridge](/builders/app-dev Make sure to check out the [Standard Bridge guide](/builders/app-developers/bridging/standard-bridge) if you want to learn more about how the bridge works under the hood. -The Standard Bridge **does not** support [**fee on transfer tokens**](https://github.com/d-xo/weird-erc20#fee-on-transfer) or [**rebasing tokens**](https://github.com/d-xo/weird-erc20#balance-modifications-outside-of-transfers-rebasingairdrops) because they can cause bridge accounting errors. + The Standard Bridge **does not** support [**fee on transfer + tokens**](https://github.com/d-xo/weird-erc20#fee-on-transfer) or [**rebasing + tokens**](https://github.com/d-xo/weird-erc20#balance-modifications-outside-of-transfers-rebasingairdrops) + because they can cause bridge accounting errors. ## Supported Networks @@ -41,37 +51,37 @@ You're going to use the Optimism SDK for this tutorial. Since the Optimism SDK is a [Node.js](https://nodejs.org/en/) library, you'll need to create a Node.js project to use it. + {

Make a Project Folder

} -{

Make a Project Folder

} + ```bash + mkdir op-sample-project + cd op-sample-project + ``` -```bash -mkdir op-sample-project -cd op-sample-project -``` + {

Initialize the Project

} -{

Initialize the Project

} + ```bash + pnpm init + ``` -```bash -pnpm init -``` + {

Install the Optimism SDK

} -{

Install the Optimism SDK

} + ```bash + pnpm add @eth-optimism/sdk + ``` -```bash -pnpm add @eth-optimism/sdk -``` - -{

Install ethers.js

} - -```bash -pnpm add ethers@^5 -``` + {

Install ethers.js

} + ```bash + pnpm add ethers@^5 + ``` -Want to create a new wallet for this tutorial? -If you have [`cast`](https://book.getfoundry.sh/getting-started/installation) installed you can run `cast wallet new` in your terminal to create a new wallet and get the private key. + Want to create a new wallet for this tutorial? If you have + [`cast`](https://book.getfoundry.sh/getting-started/installation) installed + you can run `cast wallet new` in your terminal to create a new wallet and get + the private key. ## Get ETH on Sepolia and OP Sepolia @@ -80,8 +90,10 @@ This tutorial explains how to bridge tokens from Sepolia to OP Sepolia. You will need to get some ETH on both of these testnets. -You can use [this faucet](https://sepoliafaucet.com) to get ETH on Sepolia. -You can use the [Superchain Faucet](https://app.optimism.io/faucet?utm_source=docs) to get ETH on OP Sepolia. + You can use [this faucet](https://sepoliafaucet.com) to get ETH on Sepolia. + You can use the [Superchain + Faucet](https://app.optimism.io/faucet?utm_source=docs) to get ETH on OP + Sepolia. ## Add a Private Key to Your Environment @@ -110,17 +122,15 @@ This will bring up a Node REPL prompt that allows you to run javascript code. You need to import some dependencies into your Node REPL session. + {

Import the Optimism SDK

} -{

Import the Optimism SDK

} - -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L3 hash=26b2fdb17dd6c8326a54ec51f0769528 -``` - -{

Import ethers.js

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L3 hash=26b2fdb17dd6c8326a54ec51f0769528 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L4 hash=69a65ef97862612e4978b8563e6dbe3a -``` + {

Import ethers.js

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L4 hash=69a65ef97862612e4978b8563e6dbe3a + ``` ## Set Session Variables @@ -129,29 +139,31 @@ You'll need a few variables throughout this tutorial. Let's set those up now. + {

Load your private key

} -{

Load your private key

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L6 hash=755b77a7ffc7dfdc186f36c37d3d847a + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L6 hash=755b77a7ffc7dfdc186f36c37d3d847a -``` + {

Create the RPC providers and wallets

} -{

Create the RPC providers and wallets

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L8-L11 hash=9afdce50665ae93bce602068071ffaa1 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L8-L11 hash=9afdce50665ae93bce602068071ffaa1 -``` + {

Set the L1 and L2 ERC-20 addresses

} -{

Set the L1 and L2 ERC-20 addresses

} + This tutorial uses existing ERC-20 tokens that have been deployed on Sepolia and OP Sepolia. + These tokens are designed for testing the bridging process. -This tutorial uses existing ERC-20 tokens that have been deployed on Sepolia and OP Sepolia. -These tokens are designed for testing the bridging process. - -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L13-L14 hash=d8f0d4c8124782a6cd36097ff31010e5 -``` - - -If you're coming from the [Bridging Your Standard ERC-20 Token to OP Mainnet Using the Standard Bridge](./standard-bridge-standard-token) or [Bridging Your Custom ERC-20 Token to OP Mainnet Using the Standard Bridge](./standard-bridge-custom-token) tutorials, you can use the addresses of your own ERC-20 tokens here instead. - + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L13-L14 hash=d8f0d4c8124782a6cd36097ff31010e5 + ``` + + If you're coming from the [Bridging Your Standard ERC-20 Token to OP Mainnet + Using the Standard Bridge](./standard-bridge-standard-token) or [Bridging Your + Custom ERC-20 Token to OP Mainnet Using the Standard + Bridge](./standard-bridge-custom-token) tutorials, you can use the addresses + of your own ERC-20 tokens here instead. + ## Get L1 Tokens @@ -160,27 +172,25 @@ You're going to need some tokens on L1 that you can bridge to L2. The L1 testing token located at [`0x5589BB8228C07c4e15558875fAf2B859f678d129`](https://sepolia.etherscan.io/address/0x5589BB8228C07c4e15558875fAf2B859f678d129) has a `faucet` function that makes it easy to get tokens. + {

Set the ERC20 ABI

} -{

Set the ERC20 ABI

} - -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L16 hash=d1caeba8dc014637e2b0b72f5cd076d0 -``` + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L16 hash=d1caeba8dc014637e2b0b72f5cd076d0 + ``` -{

Create a Contract instance for the L1 token

} + {

Create a Contract instance for the L1 token

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L18 hash=9f9d7e38319ff5263e0e99d80d495554 -``` + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L18 hash=9f9d7e38319ff5263e0e99d80d495554 + ``` -{

Request some tokens

} + {

Request some tokens

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L21-L22 hash=3533ec5426e8845fdb9af1e9e8d3de4c -``` + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L21-L22 hash=3533ec5426e8845fdb9af1e9e8d3de4c + ``` -{

Check your token balance

} - -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L25 hash=d7a60aa394d1055555c2aeab2a2e111d -``` + {

Check your token balance

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L25 hash=d7a60aa394d1055555c2aeab2a2e111d + ``` ## Deposit Tokens @@ -189,71 +199,71 @@ Now that you have some tokens on L1, you can deposit those tokens into the `L1St You'll then receive the same number of tokens on L2 in return. + {

Define the amount to deposit

} -{

Define the amount to deposit

} + The testing token has 18 decimal places, so you'll want to define a variable that represents one token. -The testing token has 18 decimal places, so you'll want to define a variable that represents one token. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L27 hash=9349517ae6165a8798e49750da8faeee + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L27 hash=9349517ae6165a8798e49750da8faeee -``` + {

Create a CrossChainMessenger instance

} -{

Create a CrossChainMessenger instance

} + The Optimism SDK exports a `CrossChainMessenger` class that makes it easy to interact with the `L1StandardBridge` contract. -The Optimism SDK exports a `CrossChainMessenger` class that makes it easy to interact with the `L1StandardBridge` contract. + Create an instance of the `CrossChainMessenger` class: -Create an instance of the `CrossChainMessenger` class: + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L29-L34 hash=997b9c4cdd5fb1f9d4e0882a683ae016 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L29-L34 hash=997b9c4cdd5fb1f9d4e0882a683ae016 -``` + {

Allow the Standard Bridge to access your tokens

} -{

Allow the Standard Bridge to access your tokens

} + Before you can deposit your tokens, you'll need to give the Standard Bridge contract an allowance of tokens on L1. + This will allow the Standard Bridge to pull these tokens out of your address and escrow inside the bridge. -Before you can deposit your tokens, you'll need to give the Standard Bridge contract an allowance of tokens on L1. -This will allow the Standard Bridge to pull these tokens out of your address and escrow inside the bridge. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L37-L38 hash=3d9347e57540e808d71230c1bbe49db5 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L37-L38 hash=3d9347e57540e808d71230c1bbe49db5 -``` + {

Deposit your tokens

} -{

Deposit your tokens

} + Now you can deposit your tokens into the Standard Bridge contract. -Now you can deposit your tokens into the Standard Bridge contract. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L41-L42 hash=0dc6191c87c0a371d7a469ed98190e57 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L41-L42 hash=0dc6191c87c0a371d7a469ed98190e57 -``` + + Using a smart contract wallet? As a safety measure, `depositERC20` will fail + if you try to deposit ETH from a smart contract wallet without specifying a + `recipient`. Add the `recipient` option to the `depositERC20` call to fix + this. Check out the [Optimism SDK + docs](https://sdk.optimism.io/classes/crosschainmessenger#depositERC20-2) for + more info on the options you can pass to `depositERC20`. + - -Using a smart contract wallet? -As a safety measure, `depositERC20` will fail if you try to deposit ETH from a smart contract wallet without specifying a `recipient`. -Add the `recipient` option to the `depositERC20` call to fix this. -Check out the [Optimism SDK docs](https://sdk.optimism.io/classes/crosschainmessenger#depositERC20-2) for more info on the options you can pass to `depositERC20`. - + {

Wait for the deposit to be relayed

} -{

Wait for the deposit to be relayed

} + You can use the `waitForMessageStatus` function to wait for the deposit to be relayed to L2. -You can use the `waitForMessageStatus` function to wait for the deposit to be relayed to L2. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L45 hash=659971675ab8d53bc2bd5196f72c873b + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L45 hash=659971675ab8d53bc2bd5196f72c873b -``` + {

Check your token balance on L1

} -{

Check your token balance on L1

} + You should now have one less token on L1. -You should now have one less token on L1. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L48 hash=d7a60aa394d1055555c2aeab2a2e111d + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L48 hash=d7a60aa394d1055555c2aeab2a2e111d -``` - -{

Create a Contract instance for the L2 token

} - -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L50 hash=d7ab5afad79dafcb7be976c3d0d3df84 -``` + {

Create a Contract instance for the L2 token

} -{

Check your token balance on L2

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L50 hash=d7ab5afad79dafcb7be976c3d0d3df84 + ``` -You should now have one more token on L2. + {

Check your token balance on L2

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L53 hash=b332b68817359e4c6e991ed83de6e490 -``` + You should now have one more token on L2. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L53 hash=b332b68817359e4c6e991ed83de6e490 + ``` ## Withdraw Tokens @@ -263,75 +273,74 @@ Nice! Now you're going to repeat the process in reverse to bridge some tokens from L2 to L1. + {

Start your withdrawal on L2

} -{

Start your withdrawal on L2

} + The first step to withdrawing tokens from L2 to L1 is to start the withdrawal on L2. -The first step to withdrawing tokens from L2 to L1 is to start the withdrawal on L2. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L56-L57 hash=b97f906085a2c350d9113488ea9b1d45 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L56-L57 hash=b97f906085a2c350d9113488ea9b1d45 -``` + {

Check your token balance on L2

} -{

Check your token balance on L2

} + You should now have one less token on L2, but your token balance on L1 will not have changed yet. -You should now have one less token on L2, but your token balance on L1 will not have changed yet. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L60 hash=b332b68817359e4c6e991ed83de6e490 + ``` -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L60 hash=b332b68817359e4c6e991ed83de6e490 -``` - -{

Wait until the withdrawal is ready to prove

} - -The second step to withdrawing tokens from L2 to L1 is to prove to the bridge on L1 that the withdrawal happened on L2. -You first need to wait until the withdrawal is ready to prove. + {

Wait until the withdrawal is ready to prove

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L63 hash=e8b55ec0f16f90ba4d4197cf47ff8e6d -``` + The second step to withdrawing tokens from L2 to L1 is to prove to the bridge on L1 that the withdrawal happened on L2. + You first need to wait until the withdrawal is ready to prove. - -This step can take a few minutes. -Feel free to take a quick break while you wait. - + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L63 hash=e8b55ec0f16f90ba4d4197cf47ff8e6d + ``` -{

Prove the withdrawal on L1

} + + This step can take a few minutes. Feel free to take a quick break while you + wait. + -Once the withdrawal is ready to be proven, you'll send an L1 transaction to prove that the withdrawal happened on L2. + {

Prove the withdrawal on L1

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L66 hash=fee5f5e924472ee9daceb681ccae1cb9 -``` + Once the withdrawal is ready to be proven, you'll send an L1 transaction to prove that the withdrawal happened on L2. -{

Wait until the withdrawal is ready for relay

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L66 hash=fee5f5e924472ee9daceb681ccae1cb9 + ``` -The final step to withdrawing tokens from L2 to L1 is to relay the withdrawal on L1. -This can only happen after the fault proof period has elapsed. -On OP Mainnet, this takes 7 days. + {

Wait until the withdrawal is ready for relay

} - -We're currently testing fault proofs on OP Sepolia, so withdrawal times reflect Mainnet times. - + The final step to withdrawing tokens from L2 to L1 is to relay the withdrawal on L1. + This can only happen after the fault proof period has elapsed. + On OP Mainnet, this takes 7 days. -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L69 hash=55a41ac5586b8a688ffd6dfbb20f2d15 -``` + + We're currently testing fault proofs on OP Sepolia, so withdrawal times + reflect Mainnet times. + -{

Relay the withdrawal on L1

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L69 hash=55a41ac5586b8a688ffd6dfbb20f2d15 + ``` -Once the withdrawal is ready to be relayed, you can finally complete the withdrawal process. + {

Relay the withdrawal on L1

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L85 hash=f8d30944dad1664d82b9fdf14da59f9e -``` + Once the withdrawal is ready to be relayed, you can finally complete the withdrawal process. -{

Wait until the withdrawal is relayed

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L85 hash=f8d30944dad1664d82b9fdf14da59f9e + ``` -Now you simply wait until the message is relayed. + {

Wait until the withdrawal is relayed

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L88 hash=c2c14a739c44011a058e9848a0019f15 -``` + Now you simply wait until the message is relayed. -{

Check your token balance on L1

} + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L88 hash=c2c14a739c44011a058e9848a0019f15 + ``` -You should now have one more token on L1. + {

Check your token balance on L1

} -```js file=/public/tutorials/cross-dom-bridge-erc20.js#L91 hash=d7a60aa394d1055555c2aeab2a2e111d -``` + You should now have one more token on L1. + ```js file=/public/tutorials/cross-dom-bridge-erc20.js#L91 hash=d7a60aa394d1055555c2aeab2a2e111d + ``` ## Next Steps diff --git a/pages/builders/app-developers/tutorials/standard-bridge-custom-token.mdx b/pages/builders/app-developers/tutorials/standard-bridge-custom-token.mdx index 89cf0a492..fd4e03799 100644 --- a/pages/builders/app-developers/tutorials/standard-bridge-custom-token.mdx +++ b/pages/builders/app-developers/tutorials/standard-bridge-custom-token.mdx @@ -106,7 +106,7 @@ Make sure that your environment is set to "Injected Provider", your wallet is co Then, select the `MyCustomL2Token` contract from the deployment dropdown and deploy it with the following parameters: ```text -_BRIDGE: "0x4200000000000000000000000000000000000007" +_BRIDGE: "0x4200000000000000000000000000000000000010" _REMOTETOKEN: "" _NAME: "My Custom L2 Token" _SYMBOL: "MCL2T" diff --git a/pages/builders/chain-operators/architecture.mdx b/pages/builders/chain-operators/architecture.mdx index 224593477..306cbb170 100644 --- a/pages/builders/chain-operators/architecture.mdx +++ b/pages/builders/chain-operators/architecture.mdx @@ -6,6 +6,8 @@ description: Learn about the OP chain architecture. import Image from 'next/image' +import {OpProposerDescriptionShort} from '@/content/index.js' + # Chain Architecture This page contains information about the components of the rollup protocol and @@ -45,9 +47,7 @@ amount of data required to reproduce L2 blocks. ### op-proposer -`op-proposer` is the service that submits the output roots to the L1. This is to enable -trustless execution of L2-to-L1 messaging and creates the view into the L2 state from -the L1's perspective. + ## Ingress Traffic diff --git a/pages/builders/chain-operators/tools/op-challenger.mdx b/pages/builders/chain-operators/tools/op-challenger.mdx index df759f879..376fff38b 100644 --- a/pages/builders/chain-operators/tools/op-challenger.mdx +++ b/pages/builders/chain-operators/tools/op-challenger.mdx @@ -94,9 +94,9 @@ This guide provides a walkthrough of setting up the configuration and monitoring #### `--network` * This identifies the L2 network `op-challenger` is running for, e.g., `op-sepolia` or `op-mainnet`. - * When using the `--network` flag, the `--game-factory-address` will be automatically pulled from the [`superchain-registry`](https://github.com/ethereum-optimism/superchain-registry/blob/main/superchain/configs/chainList.json). + * When using the `--network` flag, the `--game-factory-address` will be automatically pulled from the [`superchain-registry`](https://github.com/ethereum-optimism/superchain-registry/blob/main/chainList.json). * When cannon is executed, challenger needs the roll-up config and the L2 Genesis, which is op-geth's Genesis file. Both files are automatically loaded when Cannon Network is used, but custom networks will need to specify both Cannon L2 Genesis and Cannon rollup config. - * For custom networks not in the [`superchain-registry`](https://github.com/ethereum-optimism/superchain-registry/blob/main/superchain/configs/chainList.json), the `--game-factory-address` and rollup must be specified, as follows: + * For custom networks not in the [`superchain-registry`](https://github.com/ethereum-optimism/superchain-registry/blob/main/chainList.json), the `--game-factory-address` and rollup must be specified, as follows: ``` --cannon-rollup-config rollup.json \ diff --git a/pages/builders/tools/build/block-explorers.mdx b/pages/builders/tools/build/block-explorers.mdx index 35c6bf71f..e72e8da6e 100644 --- a/pages/builders/tools/build/block-explorers.mdx +++ b/pages/builders/tools/build/block-explorers.mdx @@ -48,6 +48,14 @@ It's also got some OP-Mainnet-specific features: * [A tool for finalizing L2-to-L1 transactions](https://explorer.optimism.io/messagerelayer) * And more! Just check it out and click around to find all of the available features. +## Superscan by Routescan + +[Superscan](https://superscan.network) is the dev-focused Superchain explorer unified at the ecosystem level, powered by [Routescan](https://routescan.io). On the Superscan, developers can quickly glance at transactions, blocks, addresses, deployed contracts and more across the Superchain in unified pages. + +The Superscan currently includes: +* Mainnet - OP Mainnet, Base, Zora, Mode, Cyber, Orderly, Fraxtal, Public Goods Network +* Testnet - Zora, Mode, Orderly, Fraxtal + ## Once Upon If you're building on multiple chains, Once Upon's [Superchain block explorer](https://www.onceupon.gg/) consolidates transaction data across all OP Chains, offering developers a unified view of all Superchain activity, including testnets. diff --git a/pages/builders/tools/build/oracles.mdx b/pages/builders/tools/build/oracles.mdx index 3d2bb6fbd..10c7b7042 100644 --- a/pages/builders/tools/build/oracles.mdx +++ b/pages/builders/tools/build/oracles.mdx @@ -1,23 +1,23 @@ --- title: Oracles lang: en-US -description: Learn about different oracles and how you can use them to access offchain data onchain. +description: Learn about different oracles and how you can use them to access offchain data onchain as well as random number generation. --- import { Callout } from 'nextra/components' # Oracles + + This page includes providers that meet specific [inclusion criteria](#inclusion-criteria), as outlined below. Please visit the [community oracles page](https://github.com/ethereum-optimism/developers/blob/main/community/tools/oracles.md) for an additional listing of third-party Oracles. + + This reference guide lists different Oracles you can use when building on Optimism. [Oracles](https://ethereum.org/en/developers/docs/oracles/) provide offchain data onchain. This allows code running on a blockchain to access a wide variety of information. For example, a [stablecoin](https://ethereum.org/en/stablecoins/) that accepts ETH as collateral needs to know the ETH/USD exchange rate: * How many stablecoins can we give a user for a given amount of ETH? * Do we need to liquidate any deposits because they are under collateralized? - - This page includes providers that meet specific [inclusion criteria](#inclusion-criteria), as outlined below. Please visit the [community oracles page](https://github.com/ethereum-optimism/developers/blob/main/community/tools/oracles.md) for an additional listing of third-party Oracles. - - ## Security and Decentralization Different oracles have different security assumptions and different levels of decentralization. @@ -34,11 +34,16 @@ There are two types of oracles: 1. Double-transaction oracles, which require two transactions. The first transaction is the request for information, which usually causes the oracle to emit an event that triggers some offchain mechanism to provide the answer (through its own transaction). The second transaction actually reads onchain the result from the oracle and uses it. - 2. Single-transaction oracles, which only require one transaction, such as [Chainlink's random number generator](https://docs.chain.link/docs/get-a-random-number/#request-random-values). - The way this works is that the transaction that requests the information includes a callback (address and the call data to provide it). + 2. Single-transaction oracles, which only require one transaction. The way this works is that the transaction that requests the information includes a callback (address and the call data to provide it). When the oracle is updated (which also happens through a transaction, but one that is not sent by the user), the oracle uses the callback to inform a contract of the result. -## Gas Oracle +## Random Number Generation (RGN) + +Random number generation in blockchain applications ensures that smart contracts can access unbiased random values. This is essential for certain use cases like generative NFTs, gaming, commit & reveal schemes and more. Various approaches include using a trusted third party, blockhash-based methods, Verifiable Random Functions (VRF), quantum random numbers to name a few. Each method has trade-offs between simplicity, security, and trust assumptions, allowing developers to select the most suitable option for their use case. + +## List of Oracles + +### Gas Oracle OP Mainnet provides a [Gas Price Oracle](https://github.com/ethereum-optimism/optimism/blob/233ede59d16cb01bdd8e7ff662a153a4c3178bdd/packages/contracts/contracts/L2/predeploys/OVM_GasPriceOracle.sol) that provides information about [gas prices and related parameters](/stack/transactions/fees). It can also calculate the total cost of a transaction for you before you send it. @@ -52,13 +57,23 @@ This is a push Oracle. OP Mainnet (and the testnets) updates the gas price parameters onchain whenever those parameters change. The L1 gas price, which can be volatile, is only pushed once every 5 minutes, and each time can change only by up to 20%. -## Chainlink +### API3 + +The [API3 Market](https://market.api3.org/optimism) provides access to 200+ price feeds on [Optimism Mainnet](https://market.api3.org/optimism) and [Testnet](https://market.api3.org/optimism-sepolia-testnet). The price feeds operate as a native push oracle and can be activated instantly via the Market UI. + +The price feeds are delivered by an aggregate of [first-party oracles](https://docs.api3.org/explore/airnode/why-first-party-oracles.html) using signed data and support [OEV recapture](https://docs.api3.org/explore/introduction/oracle-extractable-value.html). + +Unlike traditional data feeds, reading [API3 price feeds](https://docs.api3.org/guides/dapis/) enables dApps to auction off the right to update the price feeds to searcher bots which facilitates more efficient liquidation processes for users and LPs of DeFi money markets. The OEV recaptured is returned to the dApp. -[Chainlink](https://chain.link/) is the industry-standard decentralized computing platform powering the verifiable web. +API3's QRNG provides dApps with truly random numbers based on quantum mechanics at no charge. More details [here](https://api3.org/qrng/) + +### Chainlink + +[Chainlink](https://chain.link/) is the industry-standard decentralized computing platform powering the verifiable web. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Chainlink provides a number of [price feeds](https://docs.chain.link/docs/optimism-price-feeds/). -Those feeds are available on the production network @ [Op Mainnet](https://docs.chain.link/data-feeds/price-feeds/addresses?network=optimism&page=1#optimism-mainnet). +Those feeds are available on the production network @ [Op Mainnet](https://docs.chain.link/data-feeds/price-feeds/addresses?network=optimism\&page=1#optimism-mainnet). * Data Feeds: Chainlink Data Feeds provide a secure, reliable, and decentralized source of off-chain data to power unique smart contract use cases for DeFi and beyond. * Automation: Chainlink Automation is an ultra-reliable and performant smart contract automation solution enabling developers to quickly scale their operations in a verifiable, decentralized, and cost-efficient manner, to build next-generation apps. @@ -66,17 +81,44 @@ Those feeds are available on the production network @ [Op Mainnet](https://docs. This is a push Oracle. See the [Using Data Feeds guide](https://docs.chain.link/docs/get-the-latest-price/) to learn how to use the Chainlink feeds. -## Pyth Network +* Chainlink VRF provides cryptographically secure randomness for blockchain-based applications. More details [here](https://chain.link/vrf) + +### Chronicle + +The first Oracle on Ethereum, Chronicle's decentralized Oracle network was originally built within MakerDAO for the development of DAI and is now available to builders on OP Mainnet and the Superchain. + +* **Data Feeds**: Builders can choose from 65+ data feeds, including crypto assets, yield rates, and RWAs. Chronicle's data is sourced via custom-built data models, only utilizing Tier 1 Primary Sources, such as the markets where tokens are actively traded, including Coinbase, Binance, Uniswap, and Curve. +* **Transparency & Integrity**: Chronicle's Oracle network is fully transparent and verifiable. Via [The Chronicle](https://chroniclelabs.org/dashboard/oracle/DAI/USD?blockchain=OPT\&txn=0x53e60e6e79eb938e5ca3ca6c56b0795e003dd6b3a17cfd810ca5042b3d33b680\&contract=0x104916d38828DA8B83a88A1775Aa058e1F0B1647), the data supply chain for any Oracle can be viewed in real-time and historically, including data sources and the identity of all Validators/Signers. Users can cryptographically challenge the integrity of every Oracle update using the 'verify' feature. Data is independently sourced by a [community of Validators](https://chroniclelabs.org/validators), including Gitcoin, Etherscan, Infura, DeFi Saver, and MakerDAO. +* **Gas Efficiency:** Pioneering the Schnorr-based Oracle architecture, Chronicle's Oracles use 60-80% less gas per update than other Oracle providers. This lowest cost per update allows Push Oracle updates to be made more regularly, ensuring more accurate and granular data reporting. + +Every Oracle implementation is customized to fit your needs. Implement one of our existing data models or contact Chronicle to develop custom Oracle data feeds via [Discord](https://discord.gg/CjgvJ9EspJ) or [Email](mailto:gm@chroniclelabs.org). Developers can dive deeper into Chronicle Protocol's architecture and unique design choices [via the docs](https://docs.chroniclelabs.org/). + +### Gelato + +[Gelato VRF](https://www.gelato.network/) enables smart contracts on Optimism to access verifiable randomness. Gelato VRF offers real randomness for blockchain applications by leveraging Drand, a trusted decentralized source for random numbers. + +Gelato VRF (Verifiable Random Function) provides trustable randomness on EVM-compatible blockchains. Here's a brief overview: + +* Contract Deployment: Use GelatoVRFConsumerBase.sol as an interface for requesting random numbers. +* Requesting Randomness: Emit the RequestedRandomness event to signal the need for a random number. +* Processing: Gelato VRF fetches the random number from Drand. +* Delivery: The fulfillRandomness function delivers the random number to the requesting contract. + +Ready to integrate? Head over to the [Gelato VRF Quick Start Guide](https://docs.gelato.network/web3-services/vrf/quick-start). + +### Pyth Network The Pyth Network is a financial oracle network which delivers over 400 low-latency, high-fidelity price feeds across cryptocurrencies, FX pairs, equities, ETFs, and commodities. * Pyth's price data is sourced from over [95 first-party sources](https://pyth.network/publishers) including exchanges, market makers, and financial services providers. - -Pyth [Price Feeds](https://pyth.network/price-feeds) offer both the real-time spot price of the asset as well as an accompanying confidence interval band around that price - -The Pyth [TradingView](https://docs.pyth.network/guides/how-to-create-tradingview-charts) integration allows users to view and display Pyth prices on their own website and UI. +* Pyth [Price Feeds](https://pyth.network/price-feeds) offer both the real-time spot price of the asset as well as an accompanying confidence interval band around that price +* The Pyth [TradingView](https://docs.pyth.network/guides/how-to-create-tradingview-charts) integration allows users to view and display Pyth prices on their own website and UI. You can explore the full catalog of Pyth Price Feed IDs for [OP Mainnet and Sepolia (EVM Stable)](https://pyth.network/developers/price-feed-ids#pyth-evm-stable). -## RedStone +* Pyth Entropy allows developers to quickly and easily generate secure random numbers on the blockchain. More details [here](https://pyth.network/blog/secure-random-numbers-for-blockchains) + +### RedStone [RedStone](https://redstone.finance/) offers flexible Data Feeds for Lending Markets, Perpetuals, Options, Stablecoins, Yield Aggregators and other types of novel DeFi protocols. The infrastructure is well battle-tested and secures hundreds of millions of USD across mainnet. diff --git a/pages/builders/tools/connect/rpc-providers.mdx b/pages/builders/tools/connect/rpc-providers.mdx index baf4dfa05..20010e015 100644 --- a/pages/builders/tools/connect/rpc-providers.mdx +++ b/pages/builders/tools/connect/rpc-providers.mdx @@ -38,6 +38,17 @@ Moreover, Ankr offers access to developer tooling on OP Mainnet (and testnets) l * OP Mainnet * OP Sepolia +## Chainstack + +### Description and Pricing + +[Chainstack](https://chainstack.com/build-better-with-optimism/) provides global & regional load-balanced nodes that are full & archive with debug & trace APIs. For the free tier, the Developer plan is available and you can sign up with GitHub account or other social logins. Chainstack also has special discounts available. + +### Supported Networks + +* OP Mainnet +* OP Sepolia + ## dRPC ### Description and Pricing diff --git a/pages/connect/contribute/stack-contribute.mdx b/pages/connect/contribute/stack-contribute.mdx index 319686c69..159cdc5aa 100644 --- a/pages/connect/contribute/stack-contribute.mdx +++ b/pages/connect/contribute/stack-contribute.mdx @@ -17,7 +17,7 @@ Every contribution makes a difference — no contribution is too small. If you'r ## Component Contributions The OP Stack is a decentralized development stack and is constantly evolving as new layers and modules are developed. Anyone can contribute components that can be considered part of the OP Stack as long as those components fit the stack's [design principles and goals](/stack/design-principles). -To start contributing components to the stack, check out some of these [useful ideas](https://github.com/ethereum-optimism/ecosystem-contributions) and get to building! And don't forget that projects can also receive grants from the Collective via [RetroPGF](https://community.optimism.io/docs/governance/citizens-house/#how-retropgf-works). +To start contributing components to the stack, check out some of these [useful ideas](https://github.com/ethereum-optimism/ecosystem-contributions) and get to building! And don't forget that projects can also receive grants from the Collective via [RetroPGF](https://community.optimism.io/docs/citizen-house/how-retro-funding-works/). ## Codebase Contributions diff --git a/pages/stack/protocol/fault-proofs/fp-components.mdx b/pages/stack/protocol/fault-proofs/fp-components.mdx index 49299483d..72e8bb0a1 100644 --- a/pages/stack/protocol/fault-proofs/fp-components.mdx +++ b/pages/stack/protocol/fault-proofs/fp-components.mdx @@ -68,12 +68,12 @@ They contain a function to resolve this commitment to be true or false, which is * Incentive Compatibility: The system penalizes false claims and rewards truthful ones to ensure fair participation. * Resolution: Each game has a mechanism to definitively validate or invalidate the root claim. -The standard is the bi-section game. This is a specific type of dispute game, and the first game built in the OP Stack's dispute protocol. +The standard is the bisection game. This is a specific type of dispute game, and the first game built in the OP Stack's dispute protocol. We bisect over output roots (which each correspond to single L2 blocks), until we get to a single block `n -> n+1` state transition. Then, we bisect over a single block state transition's execution trace as described before. This is an optimization to reduce the runtime of the off-chain VM. After bisection has reached commitments to the state at individual trace instructions, the `FaultDisputeGame` executes a single instruction step on chain using a generic VM. The VM's state transition function, which we'll call `T`, can be anything, so long as it adheres to the form `T(s, i) -> s'`, where `s` = the agreed upon prestate, `i` = the state transition inputs, and `s'` = the post state. -The first full implementation of the VM generic in the bisection game includes a single MIPS thread context on top of the EVM to execute single instructions within an execution trace generated by `Cannon` and the `op-program`. +The first full implementation of the VM generic in the bisection game includes a single MIPS thread context on top of the EVM to execute a single instruction within an execution trace generated by `Cannon` and the `op-program`. ## Next Steps diff --git a/styles/global.css b/styles/global.css index 6ebe1102c..498779c39 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,12 +1,12 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..700&display=swap'); -@import url("colors.css"); -@import url("theme.css"); +@import url('colors.css'); +@import url('theme.css'); /* Override Nextra so content gets more breathing room */ .nextra-content h2 ~ p, .nextra-content h3 ~ p { - margin-top: 1.0rem; + margin-top: 1rem; } /* Custom div that can contain Nextra images */ @@ -53,3 +53,31 @@ span.shasum code { background-color: transparent !important; } +div.custom-callouts { + position: -webkit-sticky; + position: sticky; + top: 65px; + padding: 5px; + background-color: #fefce8; + border: 2px solid #ffdc00; + z-index: 9999; + border-radius: 4px; +} +a.callout-link { + color: #006be6; + text-decoration: underline; +} + +@media only screen and (max-width: 767px) { + div.custom-callouts { + top: 105px; + } +} + +html.dark div.custom-callouts { + color: white; + background-color: #432c11; +} +html.dark a.callout-link { + color: #008ae6; +} diff --git a/tsconfig.json b/tsconfig.json index 78956bce9..c3c04378b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,8 +17,10 @@ "baseUrl": "./", "paths": { "@/components/*": ["components/*"], + "@/content/*": ["content/*"], "@/utils/*": ["utils/*"], "@/pages/*": ["pages/*"], + "@/message/*": ["messages/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], diff --git a/words.txt b/words.txt index 5123fa700..45b5b89a5 100644 --- a/words.txt +++ b/words.txt @@ -24,6 +24,7 @@ BLOBBASEFEE BLOBPOOL blobpool blobspace +blockhash blocklists BLOCKLOGS blocklogs @@ -48,8 +49,8 @@ CCIP Celestia Celestia's Chainlink -Chainlink's chainlist +Chainstack chaosnet Clabby codebases @@ -76,6 +77,7 @@ disabletxpoolgossip Discv discv DIVU +Drand Eigen ENABLEDEPRECATEDPERSONAL enabledeprecatedpersonal @@ -102,12 +104,14 @@ forkable forkchoice FPVM FPVMs +Fraxtal Funct GASCAP gascap gaslessly GCMODE gcmode +Gelato gifs GLOBALQUEUE globalqueue @@ -132,7 +136,6 @@ ignoreprice implicity Inator inator -incentivized INFLUXDBV influxdbv initcode @@ -260,6 +263,7 @@ productionized Protip proxyd pseudorandomly +QRNG Quicknode quicknode quickstarts @@ -277,6 +281,7 @@ requiredblocks Rollouts Rollups rollups +Routescan rpckind RPCPREFIX rpcprefix @@ -284,6 +289,8 @@ rpcs RPGF Rpgf rpgf +RWAs +Schnorr secp SELFDESTRUCT seqnr @@ -314,6 +321,7 @@ Superchain superchain Superchain's Superchains +Superscan SYNCMODE syncmode SYNCTARGET