From 1537cff3236533fc331df6a219cf24ee6dfbd0d8 Mon Sep 17 00:00:00 2001 From: krofax Date: Tue, 8 Oct 2024 15:01:32 +0100 Subject: [PATCH 01/18] updated tracing transaction tutorial --- .../tutorials/sdk-trace-txns.mdx | 179 ++++++++---------- 1 file changed, 79 insertions(+), 100 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 3a70bacec..adf03d4dc 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -1,18 +1,15 @@ --- 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' - - -# Tracing Deposits and Withdrawals +# 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). @@ -27,8 +24,8 @@ You can also check out the tutorial on [Viewing Deposits and Withdrawals by Addr ## 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. @@ -45,185 +42,167 @@ cd op-sample-project pnpm init ``` -{

Install the Optimism SDK

} +{

Install viem and ethers.js

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

Install ethers.js

} - -```bash -pnpm add ethers@^5 -``` -
- ## 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 `getMessageReceipt` 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" ``` - -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. - - ## 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. - - -{

Import the Optimism SDK

} +{

Import viem

} -```js file=/public/tutorials/sdk-trace-txns.js#L3 hash=26b2fdb17dd6c8326a54ec51f0769528 +```js +const { createPublicClient, http, createWalletClient, parseEther, formatEther } = require('viem'); +const { sepolia, optimismSepolia } = require('viem/chains'); ``` -{

Import ethers.js

} - -```js file=/public/tutorials/sdk-trace-txns.js#L4 hash=69a65ef97862612e4978b8563e6dbe3a -``` - -
- ## 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. - {

Import RPC URLs

} -```js file=/public/tutorials/sdk-trace-txns.js#L10-L11 hash=02141d8cb077764665c61fc48e18ed04 +```js +const l1RpcUrl = process.env.L1_RPC_URL; +const l2RpcUrl = process.env.L2_RPC_URL; ``` {

Set the deposit to trace

} -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=/public/tutorials/sdk-trace-txns.js#L14 hash=a874f1ce83255bb233539f7a188ea1d3 +```js +const depositHash = 'your_deposit_tx_hash'; ``` {

Set the withdrawal to trace

} -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=/public/tutorials/sdk-trace-txns.js#L15 hash=6c5af039dfa0217810295dfaf82ef7c1 +```js +const withdrawalHash = 'your_withdrawal_tx_hash'; ``` {

Create the RPC providers

} -```js file=/public/tutorials/sdk-trace-txns.js#L17-L18 hash=e86efaea1d4adde679ca66911080dc28 -``` - -
- -## Create the CrossDomainMessenger - -The Optimism SDK exports a `CrossChainMessenger` class that makes it easy to interact with the Standard Bridge contracts. +```js +const l1Client = createPublicClient({ + chain: optimism, + transport: http(l1RpcUrl), +}); -Create an instance of the `CrossChainMessenger` class: -```js file=/public/tutorials/sdk-trace-txns.js#L20-L25 hash=158c6888c82bdc2f07c37c3edb3a9a6a +const l2Client = createPublicClient({ + chain: optimism, + transport: http(l2RpcUrl), +}); ``` + ## Trace a Deposit - -You can use the `CrossChainMessenger` instance to trace a deposit. +You can use viem to trace a deposit. - {

Get the deposit status

} -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=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=11aa5fe48d79feea140691842bf5213c +```js +const depositStatus = await l2Client.getTransactionReceipt({ hash: depositHash }); +console.log(depositStatus); ``` {

Get the deposit transaction receipt

} -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=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=42ce77ccd7c2c7c9b447ac534c0daa4f +```js +const depositReceipt = await l2Client.getTransaction({ hash: depositHash }); +console.log(depositReceipt); ``` {

Parse deposit logs

} -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. + +```js +const depositLogs = depositReceipt.logs; +depositLogs.forEach(log => { + console.log(log); +}); +``` {

Get the deposit transaction

} -Once you have the transaction receipt, you can directly query for the actual L2 transaction that executed the deposit. +You can directly query for the L2 transaction that executed the deposit. -```js file=/public/tutorials/sdk-trace-txns.js#L36-L37 hash=13bdc82e94c80eb3c29bf4430b15e456 +```js +const depositTransaction = await l2Client.getTransaction({ hash: depositHash }); +console.log(depositTransaction); ``` -
## Trace a Withdrawal - -You can also use the `CrossChainMessenger` instance to trace a withdrawal. +You can use viem's functions to trace a withdrawal. - {

Get the withdrawal status

} -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. +Like deposits, withdrawals can have multiple statuses depending on where they are in the process. -```js file=/public/tutorials/sdk-trace-txns.js#L40-L41 hash=24ef2259ff96107ff31bfb8f02a4150a +```js +const withdrawalStatus = await l1Client.getTransactionReceipt({ hash: withdrawalHash }); +console.log(withdrawalStatus); ``` - {

Get the withdrawal transaction receipt

} -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`. +Retrieve the L1 transaction receipt for the withdrawal. -```js file=/public/tutorials/sdk-trace-txns.js#L44-L45 hash=e2e9688e7c3cb81740c73f921808cc3e +```js +const withdrawalReceipt = await l1Client.getTransaction({ hash: withdrawalHash }); +console.log(withdrawalReceipt); ``` {

Parse withdrawal logs

} -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. + +```js +const withdrawalLogs = withdrawalReceipt.logs; +withdrawalLogs.forEach(log => { + console.log(log); +}); +``` {

Get the withdrawal transaction

} -Once you have the transaction receipt, you can directly query for the actual L1 transaction that executed the withdrawal. +Directly query for the L1 transaction that executed the withdrawal. -```js file=/public/tutorials/sdk-trace-txns.js#L48-L49 hash=c138a32f8c1e3c887f19d9bc7e87c73b +```js +const withdrawalTransaction = await l1Client.getTransaction({ hash: withdrawalHash }); +console.log(withdrawalTransaction); ``` - -
+ \ No newline at end of file From be41dab926a6513420ac40967070eb51e151eeb5 Mon Sep 17 00:00:00 2001 From: krofax Date: Tue, 8 Oct 2024 15:25:24 +0100 Subject: [PATCH 02/18] Added file imports --- .../tutorials/sdk-trace-txns.mdx | 62 ++++--------------- public/tutorials/sdk-trace-txns.js | 62 +++++++++++-------- 2 files changed, 49 insertions(+), 75 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index adf03d4dc..838d82555 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -74,9 +74,7 @@ You need to import some dependencies into your Node REPL session. {

Import viem

} -```js -const { createPublicClient, http, createWalletClient, parseEther, formatEther } = require('viem'); -const { sepolia, optimismSepolia } = require('viem/chains'); +```js file=/public/tutorials/sdk-trace-txns.js#L3 hash=bd7f8fbfa5194b8ec30d6a1e584837ae ``` ## Set Session Variables @@ -85,40 +83,26 @@ You'll need a few variables throughout this tutorial. Let's set those up now. {

Import RPC URLs

} -```js -const l1RpcUrl = process.env.L1_RPC_URL; -const l2RpcUrl = process.env.L2_RPC_URL; +```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=0badc18f525e56b36406e7be8ad1104e ``` {

Set the deposit to trace

} 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 -const depositHash = 'your_deposit_tx_hash'; +```js file=/public/tutorials/sdk-trace-txns.js#L13 hash=367c797c3e9746addedf43857f789eeb ``` {

Set the withdrawal to trace

} 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 -const withdrawalHash = 'your_withdrawal_tx_hash'; +```js file=/public/tutorials/sdk-trace-txns.js#L14 hash=545d1eed00ad0a235e2c79c8a87efd30 ``` {

Create the RPC providers

} -```js -const l1Client = createPublicClient({ - chain: optimism, - transport: http(l1RpcUrl), -}); - - -const l2Client = createPublicClient({ - chain: optimism, - transport: http(l2RpcUrl), -}); +```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=271266d2658fd8e9edd0ccb17db746d3 ```
@@ -130,38 +114,28 @@ You can use viem to trace a deposit. You can query for the deposit status using the transaction hash of the deposit. -```js -const depositStatus = await l2Client.getTransactionReceipt({ hash: depositHash }); -console.log(depositStatus); +```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=1c546e5f36d33c0709f865843449073d ``` {

Get the deposit transaction receipt

} Retrieve the transaction receipt for the deposit using the viem client. -```js -const depositReceipt = await l2Client.getTransaction({ hash: depositHash }); -console.log(depositReceipt); +```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=7edb6da67c87b3f5738ccc6aee3ba41d ``` {

Parse deposit logs

} Parse the logs from the deposit receipt for more detailed information. -```js -const depositLogs = depositReceipt.logs; -depositLogs.forEach(log => { - console.log(log); -}); +```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=984c08d1c0bc06932389d95e8d0b1c12 ``` {

Get the deposit transaction

} You can directly query for the L2 transaction that executed the deposit. -```js -const depositTransaction = await l2Client.getTransaction({ hash: depositHash }); -console.log(depositTransaction); +```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=6d21745010ed82b60681ecb86b0ce99f ``` @@ -173,36 +147,26 @@ You can use viem's functions to trace a withdrawal. Like deposits, withdrawals can have multiple statuses depending on where they are in the process. -```js -const withdrawalStatus = await l1Client.getTransactionReceipt({ hash: withdrawalHash }); -console.log(withdrawalStatus); +```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=5b6da897415978c20691dff09f27f139 ``` {

Get the withdrawal transaction receipt

} Retrieve the L1 transaction receipt for the withdrawal. -```js -const withdrawalReceipt = await l1Client.getTransaction({ hash: withdrawalHash }); -console.log(withdrawalReceipt); +```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=a8727db53f18639ab5e7e27f962a3783 ``` {

Parse withdrawal logs

} Parse the logs from the withdrawal receipt to get more details. -```js -const withdrawalLogs = withdrawalReceipt.logs; -withdrawalLogs.forEach(log => { - console.log(log); -}); +```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=91d31964daa5ce53cf4e61b25b6fade6 ``` {

Get the withdrawal transaction

} Directly query for the L1 transaction that executed the withdrawal. -```js -const withdrawalTransaction = await l1Client.getTransaction({ hash: withdrawalHash }); -console.log(withdrawalTransaction); +```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da ``` \ No newline at end of file diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index aada45ea2..5406f23db 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/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: optimism, + 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); })() From 4afd50fa814cdbd257e5a731bb41f57613a3b604 Mon Sep 17 00:00:00 2001 From: krofax Date: Tue, 8 Oct 2024 15:27:27 +0100 Subject: [PATCH 03/18] Added next steps --- .../app-developers/tutorials/sdk-trace-txns.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 838d82555..c33641f1f 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -12,11 +12,6 @@ import { Callout, Steps } from 'nextra/components' 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). - -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. - - ## Dependencies * [node](https://nodejs.org/en/) @@ -169,4 +164,9 @@ Directly query for the L1 transaction that executed the withdrawal. ```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da ``` - \ No newline at end of file + + +## 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. \ No newline at end of file From f03401c57f3f1225295994a3476bb10610d09d2a Mon Sep 17 00:00:00 2001 From: krofax Date: Tue, 8 Oct 2024 15:33:42 +0100 Subject: [PATCH 04/18] update text --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index c33641f1f..ea21a9ef7 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -46,7 +46,7 @@ pnpm add viem ## Add RPC URLs to Your Environment -You'll be using the `getMessageReceipt` function from the viem library 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. From 665c7980104259b92fa41653e457f86e85cbf161 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Fri, 18 Oct 2024 17:30:31 +0100 Subject: [PATCH 05/18] Update sdk-trace-txns.js --- public/tutorials/sdk-trace-txns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index 5406f23db..98081ea6a 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/public/tutorials/sdk-trace-txns.js @@ -20,7 +20,7 @@ const l1Client = createPublicClient({ const l2Client = createPublicClient({ - chain: optimism, + chain: optimismSepolia, transport: http(l2RpcUrl), }); From 4a5abc0ecd90a4e4732ec3c8111149e5b28ca191 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Mon, 21 Oct 2024 18:23:03 +0100 Subject: [PATCH 06/18] updated file imports --- pages/builders/app-developers/transactions/estimates.mdx | 2 +- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/builders/app-developers/transactions/estimates.mdx b/pages/builders/app-developers/transactions/estimates.mdx index 6b7008b18..cbf570970 100644 --- a/pages/builders/app-developers/transactions/estimates.mdx +++ b/pages/builders/app-developers/transactions/estimates.mdx @@ -25,7 +25,7 @@ Steps are provided here for reference and convenience, but you can use the same A transaction's execution gas fee is exactly the same fee that you would pay for the same transaction on Ethereum. This fee is equal to the amount of gas used by the transaction multiplied by the gas price attached to the transaction. -Refer to the guide on [Transaction Fees on OP Mainnet](./fees#execution-gas-fee) for more information about the execution gas fee. +Refer to the guide on [Transaction Fees on OP Mainnet](./fees#execution-gasfee) for more information about the execution gas fee. When estimating the execution gas fee for a transaction, you'll need to know the gas limit and the [max fee per gas](https://ethereum.org/en/developers/docs/gas/#maxfee) for the transaction. Your transaction fee will then be the product of these two values. diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index ea21a9ef7..bf497f2a5 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -97,7 +97,7 @@ You'll also be tracing a specific withdrawal in this tutorial. Like with deposit {

Create the RPC providers

} -```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=271266d2658fd8e9edd0ccb17db746d3 +```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=b44b43868a421156320884045294f7ca ``` From ecee772d5d9f879879bc31ee7f12b495a6754915 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Mon, 21 Oct 2024 18:29:12 +0100 Subject: [PATCH 07/18] updated lint issues --- .../tutorials/sdk-trace-txns.mdx | 130 +++++++++--------- words.txt | 1 + 2 files changed, 68 insertions(+), 63 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index bf497f2a5..7dbfedfa0 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -6,7 +6,6 @@ description: Learn how to use the viem library to trace deposits and withdrawals import { Callout, Steps } from 'nextra/components' - # Tracing Deposits and Withdrawals 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. @@ -23,25 +22,24 @@ 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. + {

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 viem and ethers.js

} + {

Install viem and ethers.js

} -```bash -pnpm add viem -``` + ```bash + pnpm add viem + ```
## Add RPC URLs to Your Environment @@ -56,11 +54,13 @@ export L2_RPC_URL="https://sepolia.optimism.io" ``` ## Start the Node REPL + 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. ## Import Dependencies @@ -73,100 +73,104 @@ You need to import some dependencies into your Node REPL session. ``` ## Set Session Variables + You'll need a few variables throughout this tutorial. Let's set those up now. -{

Import RPC URLs

} + {

Import RPC URLs

} -```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=0badc18f525e56b36406e7be8ad1104e -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=0badc18f525e56b36406e7be8ad1104e + ``` -{

Set the deposit to trace

} + {

Set the deposit to trace

} -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=/public/tutorials/sdk-trace-txns.js#L13 hash=367c797c3e9746addedf43857f789eeb -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L13 hash=367c797c3e9746addedf43857f789eeb + ``` -{

Set the withdrawal to trace

} + {

Set the withdrawal to trace

} -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=/public/tutorials/sdk-trace-txns.js#L14 hash=545d1eed00ad0a235e2c79c8a87efd30 -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L14 hash=545d1eed00ad0a235e2c79c8a87efd30 + ``` -{

Create the RPC providers

} + {

Create the RPC providers

} -```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=b44b43868a421156320884045294f7ca -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=b44b43868a421156320884045294f7ca + ```
## Trace a Deposit + You can use viem to trace a deposit. -{

Get the deposit status

} + {

Get the deposit status

} -You can query for the deposit status using the transaction hash of the deposit. + You can query for the deposit status using the transaction hash of the deposit. -```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=1c546e5f36d33c0709f865843449073d -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=1c546e5f36d33c0709f865843449073d + ``` -{

Get the deposit transaction receipt

} + {

Get the deposit transaction receipt

} -Retrieve the transaction receipt for the deposit using the viem client. + Retrieve the transaction receipt for the deposit using the viem client. -```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=7edb6da67c87b3f5738ccc6aee3ba41d -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=7edb6da67c87b3f5738ccc6aee3ba41d + ``` -{

Parse deposit logs

} + {

Parse deposit logs

} -Parse the logs from the deposit receipt for more detailed information. + Parse the logs from the deposit receipt for more detailed information. -```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=984c08d1c0bc06932389d95e8d0b1c12 -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=984c08d1c0bc06932389d95e8d0b1c12 + ``` -{

Get the deposit transaction

} + {

Get the deposit transaction

} -You can directly query for the L2 transaction that executed the deposit. + You can directly query for the L2 transaction that executed the deposit. -```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=6d21745010ed82b60681ecb86b0ce99f -``` + ```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=6d21745010ed82b60681ecb86b0ce99f + ```
## Trace a Withdrawal + You can use viem's functions to trace a withdrawal. -{

Get the withdrawal status

} + {

Get the withdrawal status

} -Like deposits, withdrawals can have multiple statuses depending on where they are in the process. + Like deposits, withdrawals can have multiple statuses depending on where they are in the process. -```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=5b6da897415978c20691dff09f27f139 -``` -{

Get the withdrawal transaction receipt

} + ```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=5b6da897415978c20691dff09f27f139 + ``` -Retrieve the L1 transaction receipt for the withdrawal. + {

Get the withdrawal transaction receipt

} -```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=a8727db53f18639ab5e7e27f962a3783 -``` + Retrieve the L1 transaction receipt for the withdrawal. -{

Parse withdrawal logs

} + ```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=a8727db53f18639ab5e7e27f962a3783 + ``` -Parse the logs from the withdrawal receipt to get more details. + {

Parse withdrawal logs

} -```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=91d31964daa5ce53cf4e61b25b6fade6 -``` + Parse the logs from the withdrawal receipt to get more details. -{

Get the withdrawal transaction

} + ```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=91d31964daa5ce53cf4e61b25b6fade6 + ``` -Directly query for the L1 transaction that executed the withdrawal. + {

Get the withdrawal transaction

} -```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da -``` -
+ Directly query for the L1 transaction that executed the withdrawal. + + ```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da + ``` + ## 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. \ No newline at end of file +* You can also check out the tutorial on [Viewing Deposits and Withdrawals by Address](./sdk-view-txns) to find deposits and withdrawals to trace. diff --git a/words.txt b/words.txt index 2841913e1..2a8f0a7dc 100644 --- a/words.txt +++ b/words.txt @@ -372,6 +372,7 @@ VHOSTS vhosts Viem viem +viem's VMDEBUG vmdebug VMODULE From 048cd4e354c35b027d899cc5ef31a0ba7b833eca Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Mon, 21 Oct 2024 18:31:48 +0100 Subject: [PATCH 08/18] fix link --- pages/builders/app-developers/transactions/estimates.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/transactions/estimates.mdx b/pages/builders/app-developers/transactions/estimates.mdx index cbf570970..6b7008b18 100644 --- a/pages/builders/app-developers/transactions/estimates.mdx +++ b/pages/builders/app-developers/transactions/estimates.mdx @@ -25,7 +25,7 @@ Steps are provided here for reference and convenience, but you can use the same A transaction's execution gas fee is exactly the same fee that you would pay for the same transaction on Ethereum. This fee is equal to the amount of gas used by the transaction multiplied by the gas price attached to the transaction. -Refer to the guide on [Transaction Fees on OP Mainnet](./fees#execution-gasfee) for more information about the execution gas fee. +Refer to the guide on [Transaction Fees on OP Mainnet](./fees#execution-gas-fee) for more information about the execution gas fee. When estimating the execution gas fee for a transaction, you'll need to know the gas limit and the [max fee per gas](https://ethereum.org/en/developers/docs/gas/#maxfee) for the transaction. Your transaction fee will then be the product of these two values. From f72e4904be391a83aa4e94f75b6c6eec0aa94491 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Mon, 21 Oct 2024 18:54:48 +0100 Subject: [PATCH 09/18] fix lint issues --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 7dbfedfa0..46ed0f6f8 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -35,7 +35,7 @@ Since viem is a [Node.js](https://nodejs.org/en/) library, you'll need to create pnpm init ``` - {

Install viem and ethers.js

} + {

Install viem

} ```bash pnpm add viem From ac463578ef686ed87f55d2e15920d31ea46939af Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Mon, 21 Oct 2024 21:55:31 +0100 Subject: [PATCH 10/18] updated file --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 46ed0f6f8..7bd38f6f1 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -25,8 +25,8 @@ Since viem is a [Node.js](https://nodejs.org/en/) library, you'll need to create {

Make a Project Folder

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

Initialize the Project

} From 7e4600e9b5342b401b700f7f349544e3e7436887 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Tue, 22 Oct 2024 18:10:14 +0100 Subject: [PATCH 11/18] Update pages/builders/app-developers/tutorials/sdk-trace-txns.mdx Co-authored-by: Bradley Camacho <42678939+bradleycamacho@users.noreply.github.com> --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 7bd38f6f1..2332df647 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -173,4 +173,4 @@ You can use viem's functions to trace a withdrawal. ## 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. +* You can also check out the tutorial on [viewing deposits and withdrawals by address](./sdk-view-txns) to find deposits and withdrawals to trace. From 1043a5d8a37cf335495fe30749d0bbf472696128 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Tue, 22 Oct 2024 18:10:33 +0100 Subject: [PATCH 12/18] Update pages/builders/app-developers/tutorials/sdk-trace-txns.mdx Co-authored-by: Bradley Camacho <42678939+bradleycamacho@users.noreply.github.com> --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 2332df647..f57e74901 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -172,5 +172,5 @@ You can use viem's functions to trace a withdrawal. ## 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. +* 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. From 840fa609ed01a6d11ac16bf6175bd7e228ee4314 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Tue, 22 Oct 2024 18:14:36 +0100 Subject: [PATCH 13/18] updated codebase --- .../tutorials/sdk-trace-txns.mdx | 30 +++++++++---------- public/tutorials/sdk-trace-txns.js | 7 +++-- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 7bd38f6f1..648b672bf 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -49,8 +49,8 @@ Since this function uses large event queries, you'll need to use an RPC provider Grab an L1 and L2 RPC URL for Sepolia and OP Sepolia, respectively. ```bash -export L1_RPC_URL="https://rpc.ankr.com/eth_sepolia" -export L2_RPC_URL="https://sepolia.optimism.io" +export L1_RPC_URL="https://YOUR_L1_ SEPOLIA_RPC_URL_HERE" +export L2_RPC_URL="https://YOUR_L2_OP_SEPOLIA_RPC_URL_HERE" ``` ## Start the Node REPL @@ -69,7 +69,7 @@ You need to import some dependencies into your Node REPL session. {

Import viem

} -```js file=/public/tutorials/sdk-trace-txns.js#L3 hash=bd7f8fbfa5194b8ec30d6a1e584837ae +```js file=/public/tutorials/sdk-trace-txns.js#L3-L4 hash=57a929d665f2e5e4a7ecd085ad3d0b01 ``` ## Set Session Variables @@ -79,26 +79,26 @@ You'll need a few variables throughout this tutorial. Let's set those up now. {

Import RPC URLs

} - ```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=0badc18f525e56b36406e7be8ad1104e + ```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=014f5d17eddb45fc081c7db9f33361b4 ``` {

Set the deposit to trace

} 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=/public/tutorials/sdk-trace-txns.js#L13 hash=367c797c3e9746addedf43857f789eeb + ```js file=/public/tutorials/sdk-trace-txns.js#L14 hash=367c797c3e9746addedf43857f789eeb ``` {

Set the withdrawal to trace

} 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=/public/tutorials/sdk-trace-txns.js#L14 hash=545d1eed00ad0a235e2c79c8a87efd30 + ```js file=/public/tutorials/sdk-trace-txns.js#L15 hash=545d1eed00ad0a235e2c79c8a87efd30 ``` {

Create the RPC providers

} - ```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=b44b43868a421156320884045294f7ca + ```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=067eb34f545b809ac450a5dd5d06dd09 ```
@@ -111,28 +111,28 @@ You can use viem to trace a deposit. You can query for the deposit status using the transaction hash of the deposit. - ```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=1c546e5f36d33c0709f865843449073d + ```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=bbde51077bd7a3539e03ffc406daf25f ``` {

Get the deposit transaction receipt

} Retrieve the transaction receipt for the deposit using the viem client. - ```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=7edb6da67c87b3f5738ccc6aee3ba41d + ```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=c02e1e5544325e0d0f2cda9f7a16eff4 ``` {

Parse deposit logs

} Parse the logs from the deposit receipt for more detailed information. - ```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=984c08d1c0bc06932389d95e8d0b1c12 + ```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=be1c79d9e6e8835d2e57683374576254 ``` {

Get the deposit transaction

} You can directly query for the L2 transaction that executed the deposit. - ```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=6d21745010ed82b60681ecb86b0ce99f + ```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=a8a37697d0f9104f5063f9bd83b48b04 ``` @@ -145,28 +145,28 @@ You can use viem's functions to trace a withdrawal. Like deposits, withdrawals can have multiple statuses depending on where they are in the process. - ```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=5b6da897415978c20691dff09f27f139 + ```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=6e1e7effc1a3de528e3812b07e7eba73 ``` {

Get the withdrawal transaction receipt

} Retrieve the L1 transaction receipt for the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=a8727db53f18639ab5e7e27f962a3783 + ```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=cbf6d336f5426e0f3068364a8d0c4823 ``` {

Parse withdrawal logs

} Parse the logs from the withdrawal receipt to get more details. - ```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=91d31964daa5ce53cf4e61b25b6fade6 + ```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=306348abf2d949d7598b77b21d27178e ``` {

Get the withdrawal transaction

} Directly query for the L1 transaction that executed the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=626e0ec238266d05c295056f80f0a6da + ```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=366c52f3a502fa70c9d814a416fb9e12 ``` diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index 98081ea6a..e18add056 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/public/tutorials/sdk-trace-txns.js @@ -1,20 +1,21 @@ (async () => { const { createPublicClient, http } = require('viem'); + const { optimismSepolia, sepolia } = require('viem/chains'); // 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 = "https://rpc.ankr.com/eth_sepolia"; +const l2RpcUrl = "https://sepolia.optimism.io"; // Docs CI wallet, will have deposits and withdrawals. const depositHash = '0x5896d6e4a47b465e0d925723bab838c62ef53468139a5e9ba501efd70f90cccb' const withdrawalHash = '0x18b8b4022b8d9e380fd89417a2e897adadf31e4f41ca17442870bf89ad024f42' const l1Client = createPublicClient({ - chain: optimism, + chain: sepolia, transport: http(l1RpcUrl), }); From 32bb82d7ac887f84e34bbae5dec240f5a68b3e7c Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Fri, 25 Oct 2024 15:21:56 +0100 Subject: [PATCH 14/18] updated codebase --- next-env.d.ts | 2 +- .../tutorials/sdk-trace-txns.mdx | 24 ++++--------------- public/tutorials/sdk-trace-txns.js | 10 -------- 3 files changed, 6 insertions(+), 30 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 474656c64..e1c9781f6 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -118,21 +118,14 @@ You can use viem to trace a deposit. Retrieve the transaction receipt for the deposit using the viem client. - ```js file=/public/tutorials/sdk-trace-txns.js#L32-L33 hash=c02e1e5544325e0d0f2cda9f7a16eff4 - ``` - - {

Parse deposit logs

} - - Parse the logs from the deposit receipt for more detailed information. - - ```js file=/public/tutorials/sdk-trace-txns.js#L35-L38 hash=be1c79d9e6e8835d2e57683374576254 + ```js file=/public/tutorials/sdk-trace-txns.js#L32-L34 hash=077581a56fc7b26f62589f0a6ae99e0d ``` {

Get the deposit transaction

} You can directly query for the L2 transaction that executed the deposit. - ```js file=/public/tutorials/sdk-trace-txns.js#L41-L42 hash=a8a37697d0f9104f5063f9bd83b48b04 + ```js file=/public/tutorials/sdk-trace-txns.js#L36-L38 hash=c67f0abeef0f2f817b7fb04be8f157a6 ``` @@ -145,28 +138,21 @@ You can use viem's functions to trace a withdrawal. Like deposits, withdrawals can have multiple statuses depending on where they are in the process. - ```js file=/public/tutorials/sdk-trace-txns.js#L45-L46 hash=6e1e7effc1a3de528e3812b07e7eba73 + ```js file=/public/tutorials/sdk-trace-txns.js#L40-L42 hash=55ceda3d9d2f9abf037f8b259de14f26 ``` {

Get the withdrawal transaction receipt

} Retrieve the L1 transaction receipt for the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L49-L50 hash=cbf6d336f5426e0f3068364a8d0c4823 - ``` - - {

Parse withdrawal logs

} - - Parse the logs from the withdrawal receipt to get more details. - - ```js file=/public/tutorials/sdk-trace-txns.js#L52-L55 hash=306348abf2d949d7598b77b21d27178e + ```js file=/public/tutorials/sdk-trace-txns.js#L44-L46 hash=d784970abbfd37215d33274d60173ab2 ``` {

Get the withdrawal transaction

} Directly query for the L1 transaction that executed the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L58-L59 hash=366c52f3a502fa70c9d814a416fb9e12 + ```js file=/public/tutorials/sdk-trace-txns.js#L48-L50 hash=48358bc45243db4e69de6ed3d49a67f9 ``` diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index e18add056..be1aed9c9 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/public/tutorials/sdk-trace-txns.js @@ -33,11 +33,6 @@ console.log('Grabbing deposit receipt...') 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 depositTransaction = await l2Client.getTransaction({ hash: depositHash }); console.log(depositTransaction); @@ -50,11 +45,6 @@ console.log('Grabbing withdrawal receipt...') 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 withdrawalTransaction = await l1Client.getTransaction({ hash: withdrawalHash }); console.log(withdrawalTransaction); From a7f27f56251d43837488fffaf0cf2a8255916d6c Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Wed, 30 Oct 2024 15:03:31 +0100 Subject: [PATCH 15/18] updated word.txt --- words.txt | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/words.txt b/words.txt index 0d38562dc..376553b4f 100644 --- a/words.txt +++ b/words.txt @@ -1,5 +1,5 @@ -ACCOUNTQUEUE accountqueue +ACCOUNTQUEUE ACCOUNTSLOTS accountslots ADDI @@ -11,6 +11,7 @@ Allocs allocs altda ANDI +Ankr Apeworx Arweave authrpc @@ -28,8 +29,8 @@ BLOBPOOL blobpool blobspace blockhash -blocklists BLOCKLOGS +blocklists blocklogs BLOCKPROFILERATE blockprofilerate @@ -65,6 +66,7 @@ computependingblock confs corsdomain counterfactually +Crosschain crosschain Crossmint daserver @@ -146,6 +148,7 @@ Holesky holesky IGNOREPRICE ignoreprice +Immunefi implicity Inator inator @@ -194,6 +197,7 @@ minsuggestedpriorityfee Mintable Mintplex MIPSEVM +Mitigations Monitorism Moralis Mordor @@ -287,6 +291,8 @@ Protip Proxied proxyd pseudorandomly +Pyth +Pyth's QRNG Quicknode quicknode @@ -299,7 +305,7 @@ rejournal REMOTEDB remotedb replayability -reproven +replayor REQUIREDBLOCKS requiredblocks rollouts @@ -313,11 +319,14 @@ rpcs RPGF Rpgf rpgf +Runbooks +runbooks RWAs safedb Schnorr secp SELFDESTRUCT +Sepolia seqnr SEQUENCERHTTP sequencerhttp @@ -343,6 +352,7 @@ subcomponents subgame subheaders SUBU +Sunnyside SUPERCHAIN Superchain superchain @@ -366,6 +376,7 @@ trustlessly trustrpc txfeecap txmgr +txns TXPOOL txpool txproxy @@ -379,16 +390,17 @@ VHOSTS vhosts Viem viem -viem's VMDEBUG vmdebug VMODULE vmodule +voxel wagmi Warpcast +xlarge XORI xtensibility ZKPs ZKVM Zora -zora +zora \ No newline at end of file From 02bd64d69c03c952e5965a0c937f89330b15f162 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Wed, 30 Oct 2024 15:27:30 +0100 Subject: [PATCH 16/18] updated file import paths --- .../tutorials/sdk-trace-txns.mdx | 22 +++++++++---------- public/tutorials/sdk-trace-txns.js | 8 ++++--- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index 75f5c1dff..c43406459 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -71,7 +71,7 @@ You need to import some dependencies into your Node REPL session. ```js file=/public/tutorials/sdk-trace-txns.js#L3-L4 hash=57a929d665f2e5e4a7ecd085ad3d0b01 ``` - + ## Set session variables You'll need a few variables throughout this tutorial. Let's set those up now. @@ -79,26 +79,26 @@ You'll need a few variables throughout this tutorial. Let's set those up now. {

Import RPC URLs

} - ```js file=/public/tutorials/sdk-trace-txns.js#L9-L10 hash=014f5d17eddb45fc081c7db9f33361b4 + ```js file=/public/tutorials/sdk-trace-txns.js#L13-L14 hash=6be30f5429fdd050fc32c21de4627d2e ``` {

Set the deposit to trace

} 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=/public/tutorials/sdk-trace-txns.js#L14 hash=367c797c3e9746addedf43857f789eeb + ```js file=/public/tutorials/sdk-trace-txns.js#L17 hash=367c797c3e9746addedf43857f789eeb ``` {

Set the withdrawal to trace

} 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=/public/tutorials/sdk-trace-txns.js#L15 hash=545d1eed00ad0a235e2c79c8a87efd30 + ```js file=/public/tutorials/sdk-trace-txns.js#L18 hash=545d1eed00ad0a235e2c79c8a87efd30 ``` {

Create the RPC providers

} - ```js file=/public/tutorials/sdk-trace-txns.js#L16-L25 hash=067eb34f545b809ac450a5dd5d06dd09 + ```js file=/public/tutorials/sdk-trace-txns.js#L20-L28 hash=6286672ca3163543e9d8ddeb5b1b6477 ```
@@ -111,21 +111,21 @@ You can use viem to trace a deposit. You can query for the deposit status using the transaction hash of the deposit. - ```js file=/public/tutorials/sdk-trace-txns.js#L28-L29 hash=bbde51077bd7a3539e03ffc406daf25f + ```js file=/public/tutorials/sdk-trace-txns.js#L30-L32 hash=b3693011e87b605cdd29baeffb080b9a ``` {

Get the deposit transaction receipt

} Retrieve the transaction receipt for the deposit using the viem client. - ```js file=/public/tutorials/sdk-trace-txns.js#L32-L34 hash=077581a56fc7b26f62589f0a6ae99e0d + ```js file=/public/tutorials/sdk-trace-txns.js#L34-L36 hash=077581a56fc7b26f62589f0a6ae99e0d ``` {

Get the deposit transaction

} You can directly query for the L2 transaction that executed the deposit. - ```js file=/public/tutorials/sdk-trace-txns.js#L36-L38 hash=c67f0abeef0f2f817b7fb04be8f157a6 + ```js file=/public/tutorials/sdk-trace-txns.js#L38-L40 hash=c67f0abeef0f2f817b7fb04be8f157a6 ``` @@ -138,21 +138,21 @@ You can use viem's functions to trace a withdrawal. Like deposits, withdrawals can have multiple statuses depending on where they are in the process. - ```js file=/public/tutorials/sdk-trace-txns.js#L40-L42 hash=55ceda3d9d2f9abf037f8b259de14f26 + ```js file=/public/tutorials/sdk-trace-txns.js#L42-L44 hash=55ceda3d9d2f9abf037f8b259de14f26 ``` {

Get the withdrawal transaction receipt

} Retrieve the L1 transaction receipt for the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L44-L46 hash=d784970abbfd37215d33274d60173ab2 + ```js file=/public/tutorials/sdk-trace-txns.js#L46-L48 hash=d784970abbfd37215d33274d60173ab2 ``` {

Get the withdrawal transaction

} Directly query for the L1 transaction that executed the withdrawal. - ```js file=/public/tutorials/sdk-trace-txns.js#L48-L50 hash=48358bc45243db4e69de6ed3d49a67f9 + ```js file=/public/tutorials/sdk-trace-txns.js#L50-L52 hash=48358bc45243db4e69de6ed3d49a67f9 ``` diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index be1aed9c9..fad501273 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/public/tutorials/sdk-trace-txns.js @@ -3,12 +3,15 @@ const { createPublicClient, http } = require('viem'); const { optimismSepolia, sepolia } = require('viem/chains'); + const L1_RPC_URL= "https://rpc.ankr.com/eth_sepolia"; + const L2_RPC_URL= "https://sepolia.optimism.io"; // 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 = "https://rpc.ankr.com/eth_sepolia"; -const l2RpcUrl = "https://sepolia.optimism.io"; + +const l1RpcUrl = L1_RPC_URL; +const l2RpcUrl = L2_RPC_URL; // Docs CI wallet, will have deposits and withdrawals. const depositHash = '0x5896d6e4a47b465e0d925723bab838c62ef53468139a5e9ba501efd70f90cccb' @@ -19,7 +22,6 @@ const l1Client = createPublicClient({ transport: http(l1RpcUrl), }); - const l2Client = createPublicClient({ chain: optimismSepolia, transport: http(l2RpcUrl), From 36fea13bed680fea4dec80c136d584a87f14d4b2 Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Thu, 31 Oct 2024 16:49:25 +0100 Subject: [PATCH 17/18] updated the RPC URL --- public/tutorials/sdk-trace-txns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/tutorials/sdk-trace-txns.js b/public/tutorials/sdk-trace-txns.js index fad501273..430660c9b 100644 --- a/public/tutorials/sdk-trace-txns.js +++ b/public/tutorials/sdk-trace-txns.js @@ -10,8 +10,8 @@ // 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 = L1_RPC_URL; -const l2RpcUrl = 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 depositHash = '0x5896d6e4a47b465e0d925723bab838c62ef53468139a5e9ba501efd70f90cccb' From 400306c92c4cf8ff1499d32ebc06dc2520773d5c Mon Sep 17 00:00:00 2001 From: Blessing Krofegha Date: Thu, 7 Nov 2024 13:49:51 +0100 Subject: [PATCH 18/18] resolve file import issue --- pages/builders/app-developers/tutorials/sdk-trace-txns.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx index c43406459..0dfd8da99 100644 --- a/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx +++ b/pages/builders/app-developers/tutorials/sdk-trace-txns.mdx @@ -79,7 +79,7 @@ You'll need a few variables throughout this tutorial. Let's set those up now. {

Import RPC URLs

} - ```js file=/public/tutorials/sdk-trace-txns.js#L13-L14 hash=6be30f5429fdd050fc32c21de4627d2e + ```js file=/public/tutorials/sdk-trace-txns.js#L13-L14 hash=0badc18f525e56b36406e7be8ad1104e ``` {

Set the deposit to trace

}