frontend-apps

What problem does it solve?

Frontend Sui dApps routinely break because outdated packages, wrong clients, obsolete React hooks, and incorrect transaction/query flows cause UI failures, stale data, and broken wallet interactions.

Core Features & Use Cases

• Correct dApp Kit v2 integration: guidance for using @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue/vanilla/Web Components), including proper factory setup via createDAppKit and provider wiring via DAppKitProvider.
• Wallet connection, network switching, and transaction execution: patterns for connecting wallets, switching networks, signing/executing transactions, and handling failure states reliably.
• On-chain querying with TanStack Query: TanStack Query patterns using useCurrentClient and null-safe gating with enabled: !!account, plus pagination patterns using the v2 cursor model.
• Avoiding common async-indexer pitfalls: ensuring waitForTransaction happens before invalidating/refetching so the UI doesn’t display stale on-chain state.
• Migration from deprecated patterns: identifies and corrects legacy mistakes like @mysten/dapp-kit (no suffix), v1 SuiClient usage, removed hooks, and incorrect result/effects status checks.

Quick Start

Build a React or Vue Sui frontend that uses dApp Kit v2 to connect a wallet, fetch balances safely after connection, and submit transactions while waiting for indexing before refreshing the UI.