Skip to content

Deposits

This guide will demonstrate how to deposit (bridge) 1 Ether from Mainnet to Optimism (OP Mainnet).

Overview

Here is an end-to-end overview of how to execute a deposit transaction. We will break it down into Steps below.

deposit.ts
import { getL2TransactionHashes } from 'viem/op-stack'
import { account, publicClientL1, publicClientL2, walletClientL1 } from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  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 
})

Steps

1. Set up Viem Clients

First, we will set up our Viem Clients for the Mainnet and Optimism chains, including the necessary extensions for the OP Stack.

We will place these in a config.ts file.

config.ts (JSON-RPC Account)
// Import Viem modules.
import { createPublicClient, createWalletClient, custom, http } from 'viem'
import { mainnet, optimism } from 'viem/chains'
import { publicActionsL2, walletActionsL1 } from 'viem/op-stack'
 
// Retrieve Account from an EIP-1193 Provider. 
export const [account] = await window.ethereum.request({ 
  method: 'eth_requestAccounts' 
}) 
 
export const publicClientL1 = createPublicClient({
  chain: mainnet,
  transport: http()
})
 
export const walletClientL1 = createWalletClient({
  account,
  chain: mainnet,
  transport: custom(window.ethereum)
}).extend(walletActionsL1())
 
export const publicClientL2 = createPublicClient({
  chain: optimism,
  transport: http()
}).extend(publicActionsL2())

2. Build the Deposit Transaction

Next, we will build the deposit transaction on the Optimism (L2) chain using the Clients that we created in the previous step.

In the example below, we want to deposit 1 Ether (via mint) onto the Optimism chain, to ourselves (account.address).

deposit.ts
// Import Viem Clients.
import { publicClientL2 } from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  to: account.address,
})

3. Execute the Deposit Transaction

After that, we will execute the deposit transaction on the Mainnet (L1) chain.

deposit.ts
// Import Viem Clients.
import { account, publicClientL2, walletClientL1 } from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  to: account.address,
})
 
// Execute the deposit transaction on the L1.
const hash = await walletClientL1.depositTransaction(args)

4. Wait for Transaction to be Processed

Once we have broadcast the transaction to the Mainnet (L1) chain, we need to wait for it to be processed on a block so we can extract the transaction receipt. We will need the transaction receipt to extract the transaction on the Optimism (L2) chain.

deposit.ts
// Import Viem Clients.
import { 
  account, 
  publicClientL1, 
  publicClientL2,
  walletClientL1 
} from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  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 })

5. Compute the L2 Transaction Hash

Once we have the transaction receipt from the Mainnet (L1) chain, we can extract the Optimism (L2) transaction hash from the logs in the transaction receipt.

deposit.ts
// Import Viem Clients.
import { 
  account, 
  publicClientL1, 
  publicClientL2,
  walletClientL1 
} from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  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)

6. Wait for Transaction to be Processed

Now that we have the Optimism (L2) transaction hash, we can wait for the transaction to be processed on the Optimism (L2) chain.

Once the waitForTransactionReceipt call resolves, the transaction has been processed and you should now be credited with 1 Ether on the Optimism (L2) chain 🥳.

deposit.ts
// Import Viem Clients.
import { 
  account, 
  publicClientL1, 
  publicClientL2,
  walletClientL1 
} from './config'
 
// Build parameters for the transaction on the L2.
const args = await publicClientL2.buildDepositTransaction({
  mint: parseEther('1'),
  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  
})

Example