docs: add React web client and "Building a React Wallet" tutorial#159
Merged
WiktorStarczewski merged 18 commits intomainfrom Feb 19, 2026
Merged
docs: add React web client and "Building a React Wallet" tutorial#159WiktorStarczewski merged 18 commits intomainfrom
WiktorStarczewski merged 18 commits intomainfrom
Conversation
WiktorStarczewski
changed the base branch from
wiktor-tutorial-runner
to
main
WiktorStarczewski
force-pushed
the
wiktor-react-tutorials
branch
from
6933c0a to
97c8fcb
Compare
There was a problem hiding this comment.
Pull request overview
This pull request adds comprehensive React SDK support to the Miden web client tutorials. It introduces a new "Building a React Wallet" tutorial, adds React examples alongside existing TypeScript examples using a new CodeSdkTabs component, and includes supporting documentation files.
Changes:
- Added new React wallet tutorial with step-by-step guide covering hooks, formatting utilities, and external signer integration
- Created React example files for three existing tutorials (createMintConsume, multiSendWithDelegatedProver, unauthenticatedNoteTransfer)
- Implemented CodeSdkTabs component to toggle between React and TypeScript implementations in documentation
- Added migration guide (Migrations.Client.md) and formatting guide (CLAUDE.md)
- Updated package.json to include @miden-sdk/react@0.13.0 dependency
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| web-client/package.json | Added @miden-sdk/react dependency version 0.13.0 |
| web-client/lib/react/unauthenticatedNoteTransfer.tsx | React example for unauthenticated note transfer chain |
| web-client/lib/react/multiSendWithDelegatedProver.tsx | React example for multi-send with delegated proving |
| web-client/lib/react/createMintConsume.tsx | React example for create, mint, consume, and send operations |
| web-client/lib/mintDevnetToAddress.ts | TypeScript utility for minting tokens on devnet to a fixed address |
| docs/src/web-client/unauthenticated_note_how_to.md | Updated to include React examples via CodeSdkTabs |
| docs/src/web-client/react_wallet_tutorial.md | New comprehensive React wallet building tutorial |
| docs/src/web-client/mint_consume_create_tutorial.md | Updated to include React examples via CodeSdkTabs |
| docs/src/web-client/creating_multiple_notes_tutorial.md | Updated to include React examples via CodeSdkTabs |
| docs/src/web-client/create_deploy_tutorial.md | Updated to include React examples via CodeSdkTabs |
| docs/src/components/index.ts | Export for CodeSdkTabs component |
| docs/src/components/CodeSdkTabs.tsx | New component for toggling between React/TypeScript examples |
| docs/src/components/CodeSdkTabs.module.css | Styling for CodeSdkTabs component |
| Migrations.Client.md | Comprehensive migration guide for version 0.13.0 |
| CLAUDE.md | Markdown formatting guidelines for contributors |
| .gitignore | Minor formatting fix |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Keinberger
reviewed
Feb 18, 2026
Collaborator
Keinberger
left a comment
Keinberger
left a comment
There was a problem hiding this comment.
Overall this is an amazing PR! Just have some comments. If you change the code, please make sure to also reflect the code changes inside of the code snippets of the docs .md files.
Furthermore, the typescript code snippets are consistently ill-formatted, they lack indentation. That should also be addressed :) Thankss!
- Bump @miden-sdk/react to 0.13.2 (useSigner/SignerContext support) - Fix multiSendWithDelegatedProver to use delegated prover (testnet) - Add dot-based indentation to all TypeScript snippets in CodeSdkTabs - Document dot-indentation convention in CodeSdkTabs.tsx and CONTRIBUTING.md - Add doc-only comments to React example components in lib/react/ - Remove CLAUDE.md and Migrations.Client.md from tracking - Fix "accout" typo in console.log messages
Keinberger
approved these changes
Feb 19, 2026
Collaborator
Keinberger
left a comment
Keinberger
left a comment
There was a problem hiding this comment.
After the final 3 points are addressed, good to merge for me!
As pointed out below, the preserveIndent() dot convention can't represent typescript method chaining (.withOwnOutputNotes(), .build()) since leading dots get converted to spaces. This affects lines 347-348 and 552-553 here, but it'll come up in any future tutorial using builder patterns. Worth considering an escape mechanism (e.g. . for a literal dot) so the docs can faithfully show the actual code.
- Fix preserveIndent() eating method-chain dots by using variable pattern for TransactionRequestBuilder - Fix collapsed JSDoc comments in summary code blocks - Switch multiSend TypeScript to delegated proving (submitNewTransaction) - Document leading-dot limitation in CONTRIBUTING.md
Keinberger
added a commit
to 0xMiden/miden-docs
that referenced
this pull request
Feb 19, 2026
The deploy workflow fails after 0xMiden/tutorials#159 was merged because the tutorial pages import `CodeSdkTabs` from `@site/src/components`, which resolves to this repo's `src/components/index.ts` — and that file only exported `CodeTabs`. Copy `CodeSdkTabs.tsx` and `CodeSdkTabs.module.css` from miden-tutorials and re-export from `src/components/index.ts`.
Keinberger
added a commit
to 0xMiden/miden-docs
that referenced
this pull request
Feb 19, 2026
The deploy workflow fails after 0xMiden/tutorials#159 was merged because the tutorial pages import `CodeSdkTabs` from `@site/src/components`, which resolves to this repo's `src/components/index.ts` — and that file only exported `CodeTabs`. Copy `CodeSdkTabs.tsx` and `CodeSdkTabs.module.css` from miden-tutorials and re-export from `src/components/index.ts`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds comprehensive React SDK support to the Miden web client tutorials.
New Tutorial
UI with @miden-sdk/react
useAccount, useNotes, useConsume, useSend
React Examples for Existing Tutorials
Added CodeSdkTabs component allowing users to toggle between React and TypeScript
implementations:
Tutorial: Creating Accounts and Deploying Faucets
React Example: lib/react/createMintConsume.tsx
────────────────────────────────────────
Tutorial: Minting, Consuming, and Creating Notes
React Example: lib/react/createMintConsume.tsx
────────────────────────────────────────
Tutorial: Creating Multiple Notes in a Single Transaction
React Example: lib/react/multiSendWithDelegatedProver.tsx
────────────────────────────────────────
Tutorial: Unauthenticated Note Transfer
React Example: lib/react/unauthenticatedNoteTransfer.tsx
Other Changes
Test Plan