@font-face {
    font-family: 'CustomFont'; /* 自定义字体的名称 */
    src: url('/font/NeueHaasDisplayRoman.ttf') format('truetype'), /* 字体文件的路径 */
         url('/font/NeueHaasDisplayRomanItalic.ttf') format('truetype');
  }
  
  body {
    font-family: 'CustomFont', sans-serif; /* 使用自定义字体 */
  }

  #navbar {
    background: "#fffff2";
    padding: 1rem;
  }
  
  footer {
    margin-top: 2rem;
  }

(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

const privateKey = process.env.TUTORIAL_PRIVATE_KEY

const l1Provider = new ethers.providers.StaticJsonRpcProvider("https://rpc.ankr.com/eth_sepolia")
const l2Provider = new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io")
const l1Wallet = new ethers.Wallet(privateKey, l1Provider)
const l2Wallet = new ethers.Wallet(privateKey, l2Provider)

const l1Token = "0x5589BB8228C07c4e15558875fAf2B859f678d129"
const l2Token = "0xD08a2917653d4E460893203471f0000826fb4034"

const erc20ABI = [{ constant: true, inputs: [{ name: "_owner", type: "address" }], name: "balanceOf", outputs: [{ name: "balance", type: "uint256" }], type: "function" }, { inputs: [], name: "faucet", outputs: [], stateMutability: "nonpayable", type: "function" }]

const l1ERC20 = new ethers.Contract(l1Token, erc20ABI, l1Wallet)

console.log('Getting L1 tokens from faucet...')
tx = await l1ERC20.faucet()
await tx.wait()

console.log('L1 balance:')
console.log((await l1ERC20.balanceOf(l1Wallet.address)).toString())

const oneToken = 1000000000000000000n

const messenger = new optimism.CrossChainMessenger({
  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for Adventure Layer Testnet
  l1SignerOrProvider: l1Wallet,
  l2SignerOrProvider: l2Wallet,
})

console.log('Approving L1 tokens for deposit...')
tx = await messenger.approveERC20(l1Token, l2Token, oneToken)
await tx.wait()

console.log('Depositing L1 tokens...')
tx = await messenger.depositERC20(l1Token, l2Token, oneToken)
await tx.wait()

console.log('Waiting for deposit to be relayed...')
await messenger.waitForMessageStatus(tx.hash, optimism.MessageStatus.RELAYED)

console.log('L1 balance:')
console.log((await l1ERC20.balanceOf(l1Wallet.address)).toString())

const l2ERC20 = new ethers.Contract(l2Token, erc20ABI, l2Wallet)

console.log('L2 balance:')
console.log((await l2ERC20.balanceOf(l2Wallet.address)).toString())

console.log('Withdrawing L2 tokens...')
const withdrawal = await messenger.withdrawERC20(l1Token, l2Token, oneToken)
await withdrawal.wait()

console.log('L2 balance:')
console.log((await l2ERC20.balanceOf(l2Wallet.address)).toString())

console.log('Waiting for withdrawal to be provable...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.READY_TO_PROVE)

console.log('Proving withdrawal...')
await messenger.proveMessage(withdrawal.hash)

console.log('Waiting for withdrawal to be relayable...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.READY_FOR_RELAY)

// Wait for the next block to be produced, only necessary for CI because messenger can return
// READY_FOR_RELAY before the RPC we're using is caught up to the latest block. Waiting for an
// additional block ensures that the RPC is caught up and the message can be relayed. Users
// should not need to do this when running the tutorial.
const maxWaitTime = Date.now() + 120000 // 2 minutes in milliseconds
const currentBlock = await l1Provider.getBlockNumber()
while (await l1Provider.getBlockNumber() < currentBlock + 1) {
  if (Date.now() > maxWaitTime) {
    throw new Error('Timed out waiting for block to be produced')
  }
  await new Promise(resolve => setTimeout(resolve, 1000))
}

console.log('Relaying withdrawal...')
await messenger.finalizeMessage(withdrawal.hash)

console.log('Waiting for withdrawal to be relayed...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.RELAYED)

console.log('L1 balance:')
console.log((await l1ERC20.balanceOf(l1Wallet.address)).toString())

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

const privateKey = process.env.TUTORIAL_PRIVATE_KEY

const l1Provider = new ethers.providers.StaticJsonRpcProvider("https://rpc.ankr.com/eth_sepolia")
const l2Provider = new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io")
const l1Wallet = new ethers.Wallet(privateKey, l1Provider)
const l2Wallet = new ethers.Wallet(privateKey, l2Provider)

console.log('L1 balance:')
console.log((await l1Wallet.getBalance()).toString())

const messenger = new optimism.CrossChainMessenger({
  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for Adventure Layer Testnet
  l1SignerOrProvider: l1Wallet,
  l2SignerOrProvider: l2Wallet,
})

console.log('Depositing ETH...')
tx = await messenger.depositETH(ethers.utils.parseEther('0.006942'))
await tx.wait()

console.log('Waiting for deposit to be relayed...')
await messenger.waitForMessageStatus(tx.hash, optimism.MessageStatus.RELAYED)

console.log('L1 balance:')
console.log((await l1Wallet.getBalance()).toString())

console.log('L2 balance:')
console.log((await l2Wallet.getBalance()).toString())

console.log('Withdrawing ETH...')
const withdrawal = await messenger.withdrawETH(ethers.utils.parseEther('0.004269'))
await withdrawal.wait()

console.log('L2 balance:')
console.log((await l2Wallet.getBalance()).toString())

console.log('Waiting for withdrawal to be provable...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.READY_TO_PROVE)

console.log('Proving withdrawal...')
await messenger.proveMessage(withdrawal.hash)

console.log('Waiting for withdrawal to be relayable...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.READY_FOR_RELAY)

// Wait for the next block to be produced, only necessary for CI because messenger can return
// READY_FOR_RELAY before the RPC we're using is caught up to the latest block. Waiting for an
// additional block ensures that the RPC is caught up and the message can be relayed. Users
// should not need to do this when running the tutorial.
const maxWaitTime = Date.now() + 120000 // 2 minutes in milliseconds
const currentBlock = await l1Provider.getBlockNumber()
while (await l1Provider.getBlockNumber() < currentBlock + 1) {
  if (Date.now() > maxWaitTime) {
    throw new Error('Timed out waiting for block to be produced')
  }
  await new Promise(resolve => setTimeout(resolve, 1000))
}

console.log('Relaying withdrawal...')
await messenger.finalizeMessage(withdrawal.hash)

console.log('Waiting for withdrawal to be relayed...')
await messenger.waitForMessageStatus(withdrawal.hash, optimism.MessageStatus.RELAYED)

console.log('L1 balance:')
console.log((await l1Wallet.getBalance()).toString())

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

const privateKey = process.env.TUTORIAL_PRIVATE_KEY

const transactionHash = process.env.TUTORIAL_TRANSACTION_HASH

const l1Provider = new ethers.providers.StaticJsonRpcProvider("https://rpc.ankr.com/eth_sepolia")
const l2Provider = new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io")
const l1Wallet = new ethers.Wallet(privateKey, l1Provider)
const l2Wallet = new ethers.Wallet(privateKey, l2Provider)

const messenger = new optimism.CrossChainMessenger({
  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for Adventure Layer Testnet
  l1SignerOrProvider: l1Wallet,
  l2SignerOrProvider: l2Wallet,
})

console.log('Waiting for message to be provable...')
await messenger.waitForMessageStatus(transactionHash, optimism.MessageStatus.READY_TO_PROVE)

console.log('Proving message...')
await messenger.proveMessage(transactionHash)

console.log('Waiting for message to be relayable...')
await messenger.waitForMessageStatus(transactionHash, optimism.MessageStatus.READY_FOR_RELAY)

console.log('Relaying message...')
await messenger.finalizeMessage(transactionHash)

console.log('Waiting for message to be relayed...')
await messenger.waitForMessageStatus(transactionHash, optimism.MessageStatus.RELAYED)

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

const privateKey = process.env.TUTORIAL_PRIVATE_KEY

const provider = optimism.asL2Provider(new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io"))
const wallet = new ethers.Wallet(privateKey, provider)

const tx = await wallet.populateTransaction({
  to: '0x1000000000000000000000000000000000000000',
  value: ethers.utils.parseEther('0.00069420'),
  gasPrice: await provider.getGasPrice(),
})

console.log('Estimating L2 cost...')
const gasLimit = tx.gasLimit
const gasPrice = tx.maxFeePerGas
const l2CostEstimate = gasLimit.mul(gasPrice)
console.log(ethers.utils.formatEther(l2CostEstimate))

console.log('Estimating L1 cost...')
const l1CostEstimate = await provider.estimateL1GasCost(tx)
console.log(ethers.utils.formatEther(l1CostEstimate))

console.log('Summing total cost...')
const totalSum = l2CostEstimate.add(l1CostEstimate)
console.log(ethers.utils.formatEther(totalSum))

console.log('Sending transaction...')
const res = await wallet.sendTransaction(tx)
const receipt = await res.wait()
console.log(receipt.transactionHash)

console.log('Actual L2 cost:')
const l2CostActual = receipt.gasUsed.mul(receipt.effectiveGasPrice)
console.log(ethers.utils.formatEther(l2CostActual))

console.log('Actual L1 cost:')
const l1CostActual = receipt.l1Fee
console.log(ethers.utils.formatEther(l1CostActual))

console.log('Actual total cost:')
const totalActual = l2CostActual.add(l1CostActual)
console.log(ethers.utils.formatEther(totalActual))

console.log('Difference:')
const difference = totalActual.sub(totalSum).abs()
console.log(ethers.utils.formatEther(difference))

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

const l1Provider = new ethers.providers.StaticJsonRpcProvider("https://rpc.ankr.com/eth_sepolia")
const l2Provider = new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io")

const AddressManager = '0x...'
const L1CrossDomainMessenger = '0x...'
const L1StandardBridge = '0x...' 
const OptimismPortal = '0x...'
const L2OutputOracle = '0x...'

const l1ChainId = await l1Provider.getNetwork().then(network => network.chainId)
const l2ChainId = await l2Provider.getNetwork().then(network => network.chainId)

const messenger = new optimism.CrossChainMessenger({
  l1SignerOrProvider: l1Provider,
  l2SignerOrProvider: l2Provider,
  l1ChainId,
  l2ChainId,

  // This is the only part that differs from natively included chains.
  contracts: {
    l1: {
      AddressManager,
      L1CrossDomainMessenger,
      L1StandardBridge,
      OptimismPortal,
      L2OutputOracle,

      // Need to be set to zero for this version of the SDK.
      StateCommitmentChain: ethers.constants.AddressZero,
      CanonicalTransactionChain: ethers.constants.AddressZero,
      BondManager: ethers.constants.AddressZero,
    }
  }
})

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

// Need to use Alchemy or something here because the getDepositsByAddress and
// getWithdrawalsByAddress functions use a large block range that the public RPC doesn't support
// because it uses Ankr. Maybe the SDK should be updated to use smaller block ranges depending
// on the RPC but that's a separate issue.
const l1RpcUrl = process.env.L1_RPC_URL
const l2RpcUrl = process.env.L2_RPC_URL

// Docs CI wallet, will have deposits and withdrawals.
const deposit = '0x5896d6e4a47b465e0d925723bab838c62ef53468139a5e9ba501efd70f90cccb'
const withdrawal = '0x18b8b4022b8d9e380fd89417a2e897adadf31e4f41ca17442870bf89ad024f42'

const l1Provider = new ethers.providers.StaticJsonRpcProvider(l1RpcUrl)
const l2Provider = new ethers.providers.StaticJsonRpcProvider(l2RpcUrl)

const messenger = new optimism.CrossChainMessenger({
  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for Adventure Layer Testnet
  l1SignerOrProvider: l1Provider,
  l2SignerOrProvider: l2Provider,
})

console.log('Grabbing deposit status...')
const depositStatus = await messenger.getMessageStatus(deposit)
console.log(depositStatus)

console.log('Grabbing deposit receipt...')
const depositReceipt = await messenger.getMessageReceipt(deposit)
console.log(depositReceipt)

console.log('Grabbing deposit txn...')
const depositTx = await l2Provider.getTransaction(depositReceipt.transactionReceipt.transactionHash)
console.log(depositTx)

console.log('Grabbing withdrawal status...')
const withdrawalStatus = await messenger.getMessageStatus(withdrawal)
console.log(withdrawalStatus)

console.log('Grabbing withdrawal receipt...')
const withdrawalReceipt = await messenger.getMessageReceipt(withdrawal)
console.log(withdrawalReceipt)

console.log('Grabbing withdrawal txn...')
const withdrawalTx = await l1Provider.getTransaction(withdrawalReceipt.transactionReceipt.transactionHash)
console.log(withdrawalTx)

})()


(async () => {

const optimism = require("@eth-optimism/sdk")
const ethers = require("ethers")

// Need to use Alchemy or something here because the getDepositsByAddress and
// getWithdrawalsByAddress functions use a large block range that the public RPC doesn't support
// because it uses Ankr. Maybe the SDK should be updated to use smaller block ranges depending
// on the RPC but that's a separate issue.
const l1RpcUrl = process.env.L1_RPC_URL
const l2RpcUrl = process.env.L2_RPC_URL

// Docs CI wallet, will have deposits and withdrawals.
const address = '0x5A07785F07D8ba8a9e5323181fBDab51FE9a36c3'

const l1Provider = new ethers.providers.StaticJsonRpcProvider(l1RpcUrl)
const l2Provider = new ethers.providers.StaticJsonRpcProvider(l2RpcUrl)

const messenger = new optimism.CrossChainMessenger({
  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for Adventure Layer Testnet
  l1SignerOrProvider: l1Provider,
  l2SignerOrProvider: l2Provider,
})

console.log('Grabbing deposits...')
const deposits = await messenger.getDepositsByAddress(address)

console.log('Grabbed deposits:')
for (const deposit of deposits) {
  console.log('----------------------------------------------------')
  console.log('From:    ', deposit.from)
  console.log('To:      ', deposit.to)
  console.log('L1 Token:', deposit.l1Token)
  console.log('L2 Token:', deposit.l2Token)
  console.log('Amount:  ', deposit.amount.toString())
}

console.log('Grabbing withdrawals...')
const withdrawals = await messenger.getWithdrawalsByAddress(address)

console.log('Grabbed withdrawals:')
for (const withdrawal of withdrawals) {
  console.log('----------------------------------------------------')
  console.log('From:    ', withdrawal.from)
  console.log('To:      ', withdrawal.to)
  console.log('L1 Token:', withdrawal.l1Token)
  console.log('L2 Token:', withdrawal.l2Token)
  console.log('Amount:  ', withdrawal.amount.toString())
}

})()


(async () => {

const contracts = require("@eth-optimism/contracts-ts")
const utils = require("@eth-optimism/core-utils")
const ethers = require("ethers")

const privateKey = process.env.TUTORIAL_PRIVATE_KEY

const l1Provider = new ethers.providers.StaticJsonRpcProvider("https://rpc.ankr.com/eth_sepolia")
const l2Provider = new ethers.providers.StaticJsonRpcProvider("https://sepolia.optimism.io")
const l1Wallet = new ethers.Wallet(privateKey, l1Provider)
const l2Wallet = new ethers.Wallet(privateKey, l2Provider)

console.log('Initial balance:')
const initialBalance = await l2Wallet.getBalance()
console.log(ethers.utils.formatEther(initialBalance))

const OptimismPortal = new ethers.Contract(
  '0x16Fc5058F25648194471939df75CF27A2fdC48BC',
  contracts.optimismPortalABI,
  l1Wallet,
)

console.log('Estimating L1 transaction gas...')
const gas = await OptimismPortal.estimateGas.depositTransaction(
  '0x1000000000000000000000000000000000000000', // _to
  ethers.utils.parseEther('0.000069420'), // _value
  1e6, // _gasLimit
  false, // _isCreation
  '0x', // _data
)

console.log('Sending L1 transaction...')
const tx = await OptimismPortal.depositTransaction(
  '0x1000000000000000000000000000000000000000', // _to
  ethers.utils.parseEther('0.000069420'), // _value
  1e6, // _gasLimit
  false, // _isCreation
  '0x', // _data
  {
    gasLimit: gas.mul(120).div(100) // Add 20% buffer
  }
)

console.log('Waiting for L1 transaction...')
const receipt = await tx.wait()

console.log('Waiting for L2 transaction to be relayed...')
const deposit = utils.DepositTx.fromL1Receipt(receipt, 0)
await l2Provider.waitForTransaction(deposit.hash())

console.log('Final balance:')
const finalBalance = await l2Wallet.getBalance()
console.log(ethers.utils.formatEther(finalBalance))

console.log('Difference:')
const difference = initialBalance.sub(finalBalance)
console.log(ethers.utils.formatEther(difference))

})()


WebAssembly (WASM)

Stylus

Introduction to WASM and Stylus

Adventure Layer

Introducing Stylus and WASM

Chain Info

Learn about the Adventure Layer chain architecture.

Chain Architecture

Learn about deploying contracts, cross-chain messaging, and tutorials to help you build applications on Adventure Layer  Testnet.

Developer Overview

Compatibility

Learn best practices for Adventure Layer Testnet testing.

Testing Apps for Adventure Layer Testnet

Learn how to use adventure layer faucet to get free tokens

Introducing Adventure Layer Faucet

Learn about our innovative bridge solution and how it can enhance your blockchain experience

Introduction to Our Bridge

Explore the documentation for our blockchain's API and learn how to integrate with our platform

Developers

​Introduction to WASM and Stylus

​WebAssembly (WASM)

​Stylus

Introduction to WASM and Stylus

WebAssembly (WASM)

Stylus