Tracing Deposits and Withdrawals

pages/builders/app-developers/tutorials/sdk-trace-txns.mdx

@@ -1,229 +1,176 @@
 ---
 title: Tracing Deposits and Withdrawals
 lang: en-US
-description: Learn how to use the Optimism SDK to trace deposits and withdrawals between L1 and L2.
+description: Learn how to use the viem library to trace deposits and withdrawals between L1 and L2.
 ---
 
 import { Callout, Steps } from 'nextra/components'
-import { WipCallout } from '@/components/WipCallout'
 
-<WipCallout />
 # Tracing Deposits and Withdrawals
 
-
-
-In this tutorial, you'll learn how to use the [Optimism SDK](https://sdk.optimism.io) to trace a [Standard Bridge](../bridging/standard-bridge) deposit or withdrawal between L1 and L2.
+In this tutorial, you'll learn how to use the [viem](https://viem.sh) library to trace a [Standard Bridge](../bridging/standard-bridge) deposit or withdrawal between L1 and L2.
 You'll specifically learn how to determine the status of a deposit or withdrawal and how to retrieve the transaction receipt for the executed transaction on L1 (for withdrawals) or L2 (for deposits).
 
-<Callout>
-Check out the tutorial on [Bridging ERC-20 Tokens With the Optimism SDK](./cross-dom-bridge-erc20) to learn how to create deposits and withdrawals.
-You can also check out the tutorial on [Viewing Deposits and Withdrawals by Address](./sdk-view-txns) to find deposits and withdrawals to trace.
-</Callout>
-
 ## Dependencies
 
 *   [node](https://nodejs.org/en/)
 *   [pnpm](https://pnpm.io/installation)
 
 ## Create a Demo Project
 
-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.
+You're going to use the viem library for this tutorial.
+Since viem is a [Node.js](https://nodejs.org/en/) library, you'll need to create a Node.js project to use it.
 
 <Steps>
+  {<h3>Make a Project Folder</h3>}
 
-{<h3>Make a Project Folder</h3>}
-
-```bash
-mkdir op-sample-project
-cd op-sample-project
-```
-
-{<h3>Initialize the Project</h3>}
-
-```bash
-pnpm init
-```
+  ```bash
+  mkdir trace-trx
+  cd trace-trx
+  ```
 
-{<h3>Install the Optimism SDK</h3>}
+  {<h3>Initialize the Project</h3>}
 
-```bash
-pnpm add @eth-optimism/sdk
-```
+  ```bash
+  pnpm init
+  ```
 
-{<h3>Install ethers.js</h3>}
-
-```bash
-pnpm add ethers@^5
-```
+  {<h3>Install viem</h3>}
 
+  ```bash
+  pnpm add viem 
+  ```
 </Steps>
 
-
 ## Add RPC URLs to Your Environment
 
-You'll be using the `getMessageReceipt` function from the Optimism SDK during this tutorial.
-This function use event queries to retrieve the receipt for a deposit or withdrawal.
+You'll be using the `getTransactionReceipt` function from the viem library during this tutorial. This function use event queries to retrieve the receipt for a deposit or withdrawal.
 Since this function uses large event queries, you'll need to use an RPC provider like [Alchemy](https://alchemy.com) that supports indexed event queries.
 Grab an L1 and L2 RPC URL for Sepolia and OP Sepolia, respectively.
 
 ```bash
-export L1_RPC_URL=... # Sepolia RPC URL
-export L2_RPC_URL=... # OP Sepolia RPC URL
+export L1_RPC_URL="https://rpc.ankr.com/eth_sepolia"
+export L2_RPC_URL="https://sepolia.optimism.io"
 ```
 
-<Callout>
-The Optimism SDK may be updated in the future to use a different method of retrieving deposits and withdrawals under the hood that does not require indexed event queries.
-This tutorial will be updated to reflect those changes if and when they occur.
-</Callout>
-
 ## Start the Node REPL
 
-You're going to use the Node REPL to interact with the Optimism SDK.
-To start the Node REPL run the following command in your terminal:
+You're going to use the Node REPL to interact with viem. To start the Node REPL, run the following command in your terminal:
 
 ```bash
 node
 ```
 
-This will bring up a Node REPL prompt that allows you to run javascript code.
+This will bring up a Node REPL prompt that allows you to run JavaScript code.
 
 ## Import Dependencies
 
 You need to import some dependencies into your Node REPL session.
 
-<Steps>
+{<h3>Import viem</h3>}
 
-{<h3>Import the Optimism SDK</h3>}
-
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L3 hash=26b2fdb17dd6c8326a54ec51f0769528
+```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L3 hash=bd7f8fbfa5194b8ec30d6a1e584837ae
 ```
 
-{<h3>Import ethers.js</h3>}
-
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L4 hash=69a65ef97862612e4978b8563e6dbe3a
-```
-
-</Steps>
-
 ## Set Session Variables
 
-You'll need a few variables throughout this tutorial.
-Let's set those up now.
+You'll need a few variables throughout this tutorial. Let's set those up now.
 
 <Steps>
+  {<h3>Import RPC URLs</h3>}
 
-{<h3>Import RPC URLs</h3>}
-
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L10-L11 hash=02141d8cb077764665c61fc48e18ed04
-```
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L9-L10 hash=0badc18f525e56b36406e7be8ad1104e
+  ```
 
-{<h3>Set the deposit to trace</h3>}
+  {<h3>Set the deposit to trace</h3>}
 
-You'll be tracing a specific deposit in this tutorial.
-Deposit tracing is generally based on the transaction hash of the transaction that triggered the deposit.
-You can replace this transaction hash with your own if you'd like.
+  You'll be tracing a specific deposit in this tutorial. Deposit tracing is generally based on the transaction hash of the transaction that triggered the deposit. You can replace this transaction hash with your own if you'd like.
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L14 hash=a874f1ce83255bb233539f7a188ea1d3
-```
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L13 hash=367c797c3e9746addedf43857f789eeb
+  ```
 
-{<h3>Set the withdrawal to trace</h3>}
+  {<h3>Set the withdrawal to trace</h3>}
 
-You'll also be tracing a specific withdrawal in this tutorial.
-Like with deposits, withdrawal tracing is generally based on the transaction hash of the transaction that triggered the withdrawal.
-You can replace this transaction hash with your own if you'd like.
+  You'll also be tracing a specific withdrawal in this tutorial. Like with deposits, withdrawal tracing is generally based on the transaction hash of the transaction that triggered the withdrawal. You can replace this transaction hash with your own if you'd like.
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L15 hash=6c5af039dfa0217810295dfaf82ef7c1
-```
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L14 hash=545d1eed00ad0a235e2c79c8a87efd30
+  ```
 
-{<h3>Create the RPC providers</h3>}
-
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L17-L18 hash=e86efaea1d4adde679ca66911080dc28
-```
+  {<h3>Create the RPC providers</h3>}
 
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L16-L25 hash=b44b43868a421156320884045294f7ca
+  ```
 </Steps>
 
-## Create the CrossDomainMessenger
-
-The Optimism SDK exports a `CrossChainMessenger` class that makes it easy to interact with the Standard Bridge contracts.
-
-Create an instance of the `CrossChainMessenger` class:
-
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L20-L25 hash=158c6888c82bdc2f07c37c3edb3a9a6a
-```
-
 ## Trace a Deposit
 
-You can use the `CrossChainMessenger` instance to trace a deposit.
+You can use viem to trace a deposit.
 
 <Steps>
+  {<h3>Get the deposit status</h3>}
 
-{<h3>Get the deposit status</h3>}
-
-It's often useful to know the status of a deposit.
-Deposits can have a number of statuses depending on where the deposit is within its lifecycle.
-Refer to the [Optimism SDK documentation](https://sdk.optimism.io/enums/messagestatus) for a full list of potential deposit statuses.
+  You can query for the deposit status using the transaction hash of the deposit.
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L28-L29 hash=11aa5fe48d79feea140691842bf5213c
-```
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L28-L29 hash=1c546e5f36d33c0709f865843449073d
+  ```
 
-{<h3>Get the deposit transaction receipt</h3>}
+  {<h3>Get the deposit transaction receipt</h3>}
 
-You can also use the `CrossChainMessenger` instance to get the transaction receipt for the L2 transaction that executes and completes the deposit.
-Note that this function will also return the message status of the deposit and is therefore an alternative to the previous function.
-The result of this function is an object with a `messageStatus` property and a `transactionReceipt` property that is identical to the result of the `ethers` function `getTransactionReceipt`.
+  Retrieve the transaction receipt for the deposit using the viem client.
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L32-L33 hash=42ce77ccd7c2c7c9b447ac534c0daa4f
-```
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L32-L33 hash=7edb6da67c87b3f5738ccc6aee3ba41d
+  ```
 
-{<h3>Parse deposit logs</h3>}
+  {<h3>Parse deposit logs</h3>}
 
-Like any other transaction receipt, the deposit transaction receipt contains logs that can be parsed to get additional information about the deposit.
-You can iterate through these logs and parse them just as you would parse any other receipt.
-For instance, you may wish to search for `Mint` events to determine the amount of tokens that were minted as a result of the deposit.
+  Parse the logs from the deposit receipt for more detailed information.
 
-{<h3>Get the deposit transaction</h3>}
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L35-L38 hash=984c08d1c0bc06932389d95e8d0b1c12
+  ```
 
-Once you have the transaction receipt, you can directly query for the actual L2 transaction that executed the deposit.
+  {<h3>Get the deposit transaction</h3>}
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L36-L37 hash=13bdc82e94c80eb3c29bf4430b15e456
-```
+  You can directly query for the L2 transaction that executed the deposit.
 
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L41-L42 hash=6d21745010ed82b60681ecb86b0ce99f
+  ```
 </Steps>
 
 ## Trace a Withdrawal
 
-You can also use the `CrossChainMessenger` instance to trace a withdrawal.
+You can use viem's functions to trace a withdrawal.
 
 <Steps>
+  {<h3>Get the withdrawal status</h3>}
 
-{<h3>Get the withdrawal status</h3>}
+  Like deposits, withdrawals can have multiple statuses depending on where they are in the process.
 
-Like deposits, withdrawals can have a number of statuses depending on where the withdrawal is within its lifecycle.
-Refer to the [Optimism SDK documentation](https://sdk.optimism.io/enums/messagestatus) for a full list of potential withdrawal statuses.
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L45-L46 hash=5b6da897415978c20691dff09f27f139
+  ```
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L40-L41 hash=24ef2259ff96107ff31bfb8f02a4150a
-```
+  {<h3>Get the withdrawal transaction receipt</h3>}
 
-{<h3>Get the withdrawal transaction receipt</h3>}
+  Retrieve the L1 transaction receipt for the withdrawal.
 
-You can also use the `CrossChainMessenger` instance to get the transaction receipt for the L1 transaction that executes and completes the withdrawal.
-The result of this function is an object with a `messageStatus` property and a `transactionReceipt` property that is identical to the result of the `ethers` function `getTransactionReceipt`.
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L49-L50 hash=a8727db53f18639ab5e7e27f962a3783
+  ```
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L44-L45 hash=e2e9688e7c3cb81740c73f921808cc3e
-```
-
-{<h3>Parse withdrawal logs</h3>}
+  {<h3>Parse withdrawal logs</h3>}
 
-Like any other transaction receipt, the withdrawal transaction receipt contains logs that can be parsed to get additional information about the withdrawal.
-You can iterate through these logs and parse them just as you would parse any other receipt.
-For instance, you may wish to search for `Burn` events to determine the amount of tokens that were burned as a result of the withdrawal.
+  Parse the logs from the withdrawal receipt to get more details.
 
-{<h3>Get the withdrawal transaction</h3>}
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L52-L55 hash=91d31964daa5ce53cf4e61b25b6fade6
+  ```
 
-Once you have the transaction receipt, you can directly query for the actual L1 transaction that executed the withdrawal.
+  {<h3>Get the withdrawal transaction</h3>}
 
-```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L48-L49 hash=c138a32f8c1e3c887f19d9bc7e87c73b
-```
+  Directly query for the L1 transaction that executed the withdrawal.
 
+  ```js file=<rootDir>/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da
+  ```
 </Steps>
+
+## Next Steps
+
+*   Check out the tutorial on [Bridging ERC-20 Tokens With the Optimism SDK](./cross-dom-bridge-erc20) to learn how to create deposits and withdrawals.
+*   You can also check out the tutorial on [Viewing Deposits and Withdrawals by Address](./sdk-view-txns) to find deposits and withdrawals to trace.

public/tutorials/sdk-trace-txns.js

@@ -1,51 +1,61 @@
 (async () => {
 
-const optimism = require("@eth-optimism/sdk")
-const ethers = require("ethers")
+  const { createPublicClient, http } = require('viem');
 
 // 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
+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 depositHash = '0x5896d6e4a47b465e0d925723bab838c62ef53468139a5e9ba501efd70f90cccb'
+const withdrawalHash = '0x18b8b4022b8d9e380fd89417a2e897adadf31e4f41ca17442870bf89ad024f42'
 
-const l1Provider = new ethers.providers.StaticJsonRpcProvider(l1RpcUrl)
-const l2Provider = new ethers.providers.StaticJsonRpcProvider(l2RpcUrl)
+const l1Client = createPublicClient({
+  chain: optimism,
+  transport: http(l1RpcUrl),
+});
 
-const messenger = new optimism.CrossChainMessenger({
-  l1ChainId: 11155111, // 11155111 for Sepolia, 1 for Ethereum
-  l2ChainId: 11155420, // 11155420 for OP Sepolia, 10 for OP Mainnet
-  l1SignerOrProvider: l1Provider,
-  l2SignerOrProvider: l2Provider,
-})
+
+const l2Client = createPublicClient({
+  chain: optimismSepolia,
+  transport: http(l2RpcUrl),
+});
 
 console.log('Grabbing deposit status...')
-const depositStatus = await messenger.getMessageStatus(deposit)
-console.log(depositStatus)
+const depositStatus = await l2Client.getTransactionReceipt({ hash: depositHash });
+console.log(depositStatus);
 
 console.log('Grabbing deposit receipt...')
-const depositReceipt = await messenger.getMessageReceipt(deposit)
-console.log(depositReceipt)
+const depositReceipt = await l2Client.getTransaction({ hash: depositHash });
+console.log(depositReceipt);
+
+const depositLogs = depositReceipt.logs;
+depositLogs.forEach(log => {
+  console.log(log);
+});
 
 console.log('Grabbing deposit txn...')
-const depositTx = await l2Provider.getTransaction(depositReceipt.transactionReceipt.transactionHash)
-console.log(depositTx)
+const depositTransaction = await l2Client.getTransaction({ hash: depositHash });
+console.log(depositTransaction);
 
 console.log('Grabbing withdrawal status...')
-const withdrawalStatus = await messenger.getMessageStatus(withdrawal)
-console.log(withdrawalStatus)
+const withdrawalStatus = await l1Client.getTransactionReceipt({ hash: withdrawalHash });
+console.log(withdrawalStatus);
 
 console.log('Grabbing withdrawal receipt...')
-const withdrawalReceipt = await messenger.getMessageReceipt(withdrawal)
-console.log(withdrawalReceipt)
+const withdrawalReceipt = await l1Client.getTransaction({ hash: withdrawalHash });
+console.log(withdrawalReceipt);
+
+const withdrawalLogs = withdrawalReceipt.logs;
+withdrawalLogs.forEach(log => {
+  console.log(log);
+});
 
 console.log('Grabbing withdrawal txn...')
-const withdrawalTx = await l1Provider.getTransaction(withdrawalReceipt.transactionReceipt.transactionHash)
-console.log(withdrawalTx)
+const withdrawalTransaction = await l1Client.getTransaction({ hash: withdrawalHash });
+console.log(withdrawalTransaction);
 
 })()