[TUTORIAL] Alternate snippets for the Bridging ETH to OP Mainnet With the Optimism SDK Tutorial using Viem

[brokewhale]

Tutorial title

Bridging ETH to OP stack With the Viem SDK

Tutorial description

This tutorial explains how you can use the Viem to bridge ETH from L1 (Ethereum or Sepolia) to L2 (OP Mainnet or OP Sepolia). The Optimism SDK is an easy way to add bridging functionality to your JavaScript-based application. It also provides some safety rails to prevent common mistakes that could cause ETH or ERC-20 tokens to be made inaccessible.

This is just the code snippet

Tutorial tags

bridging

Skill level

Beginner

Hosted on Optimism.io or hosted elsewhere?

Hosted on optimism.io

For tutorials to be hosted on Optimism.io: Tutorial Content

1. mkdir op-sample-project

2. cd op-sample-project

3. pnpm init

4. pnpm i viem

5. node

// STEP 1
const { createPublicClient, http, createWalletClient, parseEther } =
  await import('viem');
const {sepolia, optimismSepolia } = await import("viem/chains"); /* baseSepolia, liskSepolia, zoraSepolia, modeTestnet etc..... */

const { privateKeyToAccount } = await import('viem/accounts');
const { getL2TransactionHashes, publicActionsL2, walletActionsL1 } =
  await import('viem/op-stack');

// STEP 2
const account = privateKeyToAccount(
  '0x....'
);

// STEP 3
const publicClientL1 = createPublicClient({
  chain: sepolia, /* or mainnet */
  transport: http(),
});

// STEP 4
const walletClientL1 = createWalletClient({
  account,
  chain: sepolia, /* or mainnet */
  transport: http(),
}).extend(walletActionsL1());

// STEP 5
const publicClientL2 = createPublicClient({
  chain: optimismSepolia, /* or baseSepolia, liskSepolia, zoraSepolia, modeTestnet etc..... */
  transport: http(
    'https://opt-sepolia.g.alchemy.com/v2/keyyyyy'
  ),
}).extend(publicActionsL2());

// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('0.5'),
  to: account.address,
});

// Execute the deposit transaction on the L1.
const hash = await walletClientL1.depositTransaction(args);

// Wait for the L1 transaction to be processed.
const receipt = await publicClientL1.waitForTransactionReceipt({ hash });

// Get the L2 transaction hash from the L1 transaction receipt.
const [l2Hash] = getL2TransactionHashes(receipt);

// Wait for the L2 transaction to be processed.
const l2Receipt = await publicClientL2.waitForTransactionReceipt({
  hash: l2Hash,
});

For tutorials hosted elsewhere: URL to tutorial

No response

Additional context

This is just a snippet, the wordings will need to be modified to suit the doc spec

[brokewhale]

Tutorial title

Withdrawing ETH form Op-stack to Ethereum

Tutorial description

This tutorial explains how you can use the Viem to bridge ETH from L2 (OP Mainnet or OP Sepolia) to L1 (Ethereum or Sepolia) to . The Viem SDK is an easy way to add bridging functionality to your JavaScript-based application. It also provides some safety rails to prevent common mistakes that could cause ETH or ERC-20 tokens to be made inaccessible.

This is just the code snippet

Tutorial tags

bridging

Skill level

Beginner

Hosted on Optimism.io or hosted elsewhere?

Hosted on optimism.io

For tutorials to be hosted on Optimism.io: Tutorial Content

1. mkdir op-sample-project

2. cd op-sample-project

3. pnpm init

4. pnpm i viem

5. node

// STEP 1
const { createPublicClient, http, createWalletClient, parseEther } = await import("viem");
const {sepolia, optimismSepolia } = await import("viem/chains"); /* baseSepolia, liskSepolia, zoraSepolia, modeTestnet etc..... */
const { privateKeyToAccount } = await import('viem/accounts');
const { publicActionsL1, publicActionsL2, walletActionsL1, walletActionsL2, getWithdrawals } = await import('viem/op-stack')

// STEP 2
const account = privateKeyToAccount(
  '0x....'
);

// STEP 3
const publicClientL1 = createPublicClient({
  chain: sepolia, /* or mainnet */
  transport: http(),
}).extend(publicActionsL1())

// STEP 4
const walletClientL1 = createWalletClient({
  account,
  chain: sepolia, /* or mainnet */
  transport: http(),
}).extend(walletActionsL1());

// STEP 5
const publicClientL2 = createPublicClient({
  chain: optimismSepolia,
  transport: http(
    'https://opt-sepolia.g.alchemy.com/v2/keyyyyyyy'
  ),
}).extend(publicActionsL2())

// STEP 6
const walletClientL2 = createWalletClient({
  account,
  chain: optimismSepolia,
  transport: http(
    'https://opt-sepolia.g.alchemy.com/v2/7Tlr3E71IFClmRZ50mtyA0PXgEM3kr9d'
  ),
}).extend(walletActionsL2())

// Build parameters to initiate the withdrawal transaction on the L1.
const args = await publicClientL1.buildInitiateWithdrawal({
  to: account.address,
  value: parseEther('1')
})
 

// Execute the initiate withdrawal transaction on the L2.
const hash = await walletClientL2.initiateWithdrawal(args)

// Wait for the initiate withdrawal transaction receipt.
const receipt = await publicClientL2.waitForTransactionReceipt({ hash })

Wait one hour (max) for the L2 Output containing the transaction to be proposed

// Wait until the withdrawal is ready to prove. 
const { output, withdrawal } = await publicClientL1.waitToProve({
  receipt,
  targetChain: walletClientL2.chain
})

// Build parameters to prove the withdrawal on the L2.
const proveArgs = await publicClientL2.buildProveWithdrawal({
  output,
  withdrawal,
})

// Prove the withdrawal on the L1.
const proveHash = await walletClientL1.proveWithdrawal(proveArgs)

// Wait until the prove withdrawal is processed.
const proveReceipt = await publicClientL1.waitForTransactionReceipt({
  hash: proveHash
})

Before a withdrawal transaction can be finalized, we will need to wait the finalization period of 7 days

// Wait until the withdrawal is ready to finalize.
await publicClientL1.waitToFinalize({
  targetChain: walletClientL2.chain,
  withdrawalHash: withdrawal.withdrawalHash,
})

// Finalize the withdrawal.
const finalizeHash = await walletClientL1.finalizeWithdrawal({
  targetChain: walletClientL2.chain,
  withdrawal,
})

// Wait until the withdrawal is finalized.
const finalizeReceipt = await publicClientL1.waitForTransactionReceipt({
  hash: finalizeHash
})

For tutorials hosted elsewhere: URL to tutorial

No response

Additional context

This is just a snippet, the wordings will need to be modified to suit the doc spec