Frontend Patterns
The frontend examples in vara-dapp-patterns/frontend show how to organize React-side interaction with Vara programs without hiding the important execution boundaries.
Included patterns
| Pattern | Focus | Source |
|---|---|---|
| Preparing Program Transactions | Turn UI parameters into a ready-to-sign transaction | frontend/patterns/hooks/prepare-program-tx |
| Executing Prepared Transactions with React Query | Wrap signAndSend() into a mutation with consistent state | frontend/patterns/hooks/program-tx-mutation |
| Verified Sign & Send | Confirm real program-level success, not just block inclusion | frontend/patterns/hooks/verified-sign-and-send |
| Provider Composition | Centralize API, account, alert, query, router, and theme providers | frontend/patterns/providers/with-providers |
| Query Provider | Configure React Query for explicit blockchain-style invalidation | frontend/patterns/providers/query-provider |
| EZ Transactions | Combine signless sessions and gasless vouchers in the browser | frontend/patterns/ez-transactions |
A useful mental model
These examples intentionally separate three stages:
- Prepare a valid extrinsic.
- Execute it in a controlled way.
- Verify that the program actually succeeded.
That split makes React code easier to test, easier to reuse across components, and less likely to mix UI state with chain-specific error handling.