Skip to content

Add practical React SDK examples for account state and balances #275

@BrianSeong99

Description

@BrianSeong99

Problem

React SDK documentation is not easy enough to use for real application work. Pioneer feedback specifically called out that there is no obvious example showing how to fetch the logged-in wallet user's balance from a React app.

Current documentation is split between:

  • docs site pages,
  • the React SDK README inside miden-client,
  • unstable or versioned docs,
  • scattered examples.

This makes it hard for app developers to answer basic questions like:

  • How do I access the connected account?
  • How do I sync before reading account state?
  • How do I fetch and render balances?
  • How do I refresh the UI after a transaction?
  • How do I run a local view/static-call style query?

Why this matters

Pioneer apps are mostly frontend-heavy. If the React SDK docs do not cover normal app flows, developers fall back to reading source, asking team members directly, or using low-level WebClient APIs. That makes the SDK feel less stable than it is.

Proposed scope

Add a practical React SDK guide with examples for:

  • initializing the provider,
  • reading the connected account,
  • syncing account state,
  • rendering fungible asset balances,
  • handling loading/error/empty states,
  • refreshing after mint/send/consume flows,
  • using useExecuteProgram() for local view-call/static-call style reads where applicable.

This should be linked from the broader client docs IA work.

Acceptance criteria

  • A React SDK page exists in the docs site with copy-pasteable examples.
  • The examples show how to get the active account and render balances.
  • The examples clearly distinguish sync, local store reads, and network-submitted transactions.
  • The page links to the relevant React SDK README/API reference.
  • The docs are aligned with the current shipped @miden-sdk/react package types.

Related context

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions