POC: Add examples to stackblitz #574
Conversation
WalkthroughThe changes encompass the creation of a StackBlitz project showcasing withdrawal status retrieval with Viem in the context of the Optimism protocol. This project includes essential setup files, a detailed guide, web interface components like HTML and JavaScript files, as well as a package setup for managing dependencies. Furthermore, a specific example focusing on withdrawal status retrieval is provided, complemented by a test suite to validate its functionality. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
✅ Deploy Preview for docs-optimism ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| @@ -0,0 +1,2 @@ | |||
| OP Stack – Deposit Example | |||
There was a problem hiding this comment.
The title "OP Stack – Deposit Example" seems to be a placeholder or incorrect. Given the PR's focus on withdrawal status, consider updating the title to accurately reflect the content, such as "OP Stack – Withdrawal Status Example".
| // Source: https://github.com/wevm/viem/blob/main/src/chains/opStack/actions/getWithdrawalStatus.ts | ||
| // Docs: https://viem.sh/op-stack/actions/getWithdrawalStatus | ||
| import { createPublicClient, http } from 'viem' | ||
| import { mainnet, optimism } from 'viem/chains' | ||
| import { publicActionsL1, publicActionsL2 } from 'viem/op-stack' | ||
| // https://optimistic.etherscan.io/tx/0x7b5cedccfaf9abe6ce3d07982f57bcb9176313b019ff0fc602a0b70342fe3147 | ||
| const DEFAULT_TX_HASH = '0x7b5cedccfaf9abe6ce3d07982f57bcb9176313b019ff0fc602a0b70342fe3147' | ||
|
|
||
| const l1Client = createPublicClient({ | ||
| name: "Ethereum L1 Client", | ||
| // Note: you should consider using an authenticated endpoint to prevent throttling | ||
| transport: http(mainnet.rpcUrls.default.http[0]), | ||
| chain: mainnet, | ||
| }).extend(publicActionsL1()) | ||
|
|
||
| const l2Client = createPublicClient({ | ||
| name: "Optimism L2 Client", | ||
| // Note: you should consider using an authenticated endpoint to prevent throttling | ||
| transport: http(optimism.rpcUrls.default.http[0]), | ||
| // TODO this type needing to be cast is an actual bug in viem | ||
| chain: /** import('viem').Chain*/(optimism), | ||
| }).extend(publicActionsL2()) | ||
|
|
||
| /** | ||
| * @param {import('viem').Hex} txHash | ||
| */ | ||
| export const getWithdrawalStatusExample = async (txHash = DEFAULT_TX_HASH) => { | ||
| const receipt = await l2Client.getTransactionReceipt({ | ||
| hash: txHash, | ||
| }) | ||
| const status = await l1Client.getWithdrawalStatus({ | ||
| receipt, | ||
| chain: l1Client.chain, | ||
| targetChain: l2Client.chain, | ||
| }) | ||
|
|
||
| console.log(status) // ready-to-prove | ||
|
|
||
| return status | ||
| } |
There was a problem hiding this comment.
The implementation for fetching withdrawal status using Viem's public clients is well-done and serves as a clear example. The comments are helpful and improve the understandability of the code. Consider creating an issue or a task to address the known bug mentioned in the TODO comment on line 20 to ensure it doesn't get overlooked.
Would you like me to open a GitHub issue to track the resolution of the type casting bug mentioned in the TODO comment?
roninjin10
changed the title
roninjin10
force-pushed
the
01-03-feat_Add_404_page
branch
from
a0898e2
to
c8d7d58
Compare
| @@ -0,0 +1,31 @@ | |||
| See stackblitz | |||
There was a problem hiding this comment.
Possible spelling mistake found in "See stackblitz". The correct spelling should be "StackBlitz" as it is a proper noun.
- See stackblitz
+ See StackBlitzCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| See stackblitz | |
| See StackBlitz |
|
|
||
| # OP Stack viem example | ||
|
|
||
| An example of getting a withdrawal status with viem that runs in a stack blitz |
There was a problem hiding this comment.
The phrase "that runs in a stack blitz" should be corrected to "that runs in StackBlitz" for consistency and proper noun usage.
- An example of getting a withdrawal status with viem that runs in a stack blitz
+ An example of getting a withdrawal status with viem that runs in StackBlitzCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| An example of getting a withdrawal status with viem that runs in a stack blitz | |
| An example of getting a withdrawal status with viem that runs in StackBlitz |
|
|
||
| [](https://stackblitz.com/github/ethereum-optimism/docs/tree/01-03-feat_Add_404_page/examples?file=viem%2Fwithdrawal-status.mjs) | ||
|
|
||
| Note: this can be also embedded into a docs site via an iframe |
There was a problem hiding this comment.
The word order in "this can be also embedded" might sound more natural as "this can also be embedded".
- Note: this can be also embedded into a docs site via an iframe
+ Note: this can also be embedded into a docs site via an iframeCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| Note: this can be also embedded into a docs site via an iframe | |
| Note: this can also be embedded into a docs site via an iframe |
|
|
||
| ## index.html and main.mjs | ||
|
|
||
| I made a really simple basic html site that runs via [vitest](https://vitest.dev/). The html file imports the main.mjs file. It's not using a framework it's just basic html and javascript for simplicity. |
There was a problem hiding this comment.
Consider simplifying "I made a really simple basic html site" to "I made a simple basic HTML site" for clarity and to avoid redundancy. Also, capitalize "html" to "HTML".
- I made a really simple basic html site that runs via [vitest](https://vitest.dev/).
+ I made a simple basic HTML site that runs via [vitest](https://vitest.dev/).Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| I made a really simple basic html site that runs via [vitest](https://vitest.dev/). The html file imports the main.mjs file. It's not using a framework it's just basic html and javascript for simplicity. | |
| I made a simple basic HTML site that runs via [vitest](https://vitest.dev/). The html file imports the main.mjs file. It's not using a framework it's just basic html and javascript for simplicity. |
The phrase "It's not using a framework it's just basic html and javascript" could be improved by adding a comma for clarity and capitalizing "html" and "javascript".
- It's not using a framework it's just basic html and javascript for simplicity.
+ It's not using a framework, it's just basic HTML and JavaScript for simplicity.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| I made a really simple basic html site that runs via [vitest](https://vitest.dev/). The html file imports the main.mjs file. It's not using a framework it's just basic html and javascript for simplicity. | |
| I made a really simple basic html site that runs via [vitest](https://vitest.dev/). The html file imports the main.mjs file. It's not using a framework, it's just basic HTML and JavaScript for simplicity. |
|
|
||
| ## viem/withdrawal-status.mjs | ||
|
|
||
| Simple example of getting withdrawal status with viem. For simplicity it just uses javascript which means you can run it with node without needing to build or use ts-node etc. |
There was a problem hiding this comment.
Consider adding a comma after "For simplicity" for better readability.
- Simple example of getting withdrawal status with viem. For simplicity it just uses javascript
+ Simple example of getting withdrawal status with viem. For simplicity, it just uses JavaScriptAlso, capitalize "javascript" to "JavaScript".
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| Simple example of getting withdrawal status with viem. For simplicity it just uses javascript which means you can run it with node without needing to build or use ts-node etc. | |
| Simple example of getting withdrawal status with viem. For simplicity, it just uses JavaScript |
|
|
||
| ## viem/withdrawal-status.spec.mjs | ||
|
|
||
| Might be worth adding checks that make sure the example is working as expected |
There was a problem hiding this comment.
The sentence "Might be worth adding checks that make sure the example is working as expected" could be improved for clarity and completeness.
- Might be worth adding checks that make sure the example is working as expected
+ It might be worth adding checks to ensure the example is working as expected.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| Might be worth adding checks that make sure the example is working as expected | |
| It might be worth adding checks to ensure the example is working as expected. |
This pr is a proof of concept and guide to how to integrate stack blitz examples into docs
See stackblitz
OP Stack viem example
An example of getting a withdrawal status with viem that runs in a stack blitz
Note: this can be also embedded into a docs site via an iframe
.stackblitzrc
This is how you configure stackblitz https://developer.stackblitz.com/platform/webcontainers/project-config#frontmatter-title
index.html and main.mjs
I made a really simple basic html site that runs via vitest. The html file imports the main.mjs file. It's not using a framework it's just basic html and javascript for simplicity.
All the site does is run the example code and output the result. This is useful within stackblitz because it gives you something to look at in the browser.
viem/withdrawal-status.mjs
Simple example of getting withdrawal status with viem. For simplicity it just uses javascript which means you can run it with node without needing to build or use ts-node etc.
viem/withdrawal-status.spec.mjs
Might be worth adding checks that make sure the example is working as expected