Sui Frontend / dApp Kit

MCP tool: When available in your environment, also query the Sui documentation MCP server (https://sui.mcp.kapa.ai) for up-to-date answers. Use it for verification and for details not covered by these reference files.

Browser Sui apps fail for a consistent set of reasons:

1. Wrong package. @mysten/dapp-kit (no suffix) is the legacy JSON-RPC-only package — deprecated. New code uses @mysten/dapp-kit-react or @mysten/dapp-kit-core.
2. Wrong client. dApp Kit takes a SuiGrpcClient (recommended) in createDAppKit's createClient. Passing a SuiJsonRpcClient defeats the point of the new package.
3. Old provider stack. Code often tries the v1 pattern: QueryClientProvider → SuiClientProvider → WalletProvider. That's gone. New pattern: createDAppKit factory + DAppKitProvider (or a non-React equivalent).
4. Dead hooks. useSuiClientQuery, useSuiClientInfiniteQuery, useSignAndExecuteTransaction (mutation hook), useConnectWallet, useDisconnectWallet, useSuiClient, useSuiClientContext — removed. Replaced by useCurrentClient / useCurrentNetwork / useDAppKit() (imperative methods) + your own TanStack Query wrappers.
5. Skipping waitForTransaction between execute and refetch. Fullnodes index transactions asynchronously — invalidating TanStack caches immediately after signAndExecuteTransaction refetches stale data.
6. Building PTBs in app code with tx.build() before handing to the wallet. Defeats the wallet's gas selection. Always pass the Transaction instance (or tx.serialize()) to the wallet.

All patterns in this skill are derived from:

• https://sdk.mystenlabs.com/dapp-kit (landing)
• https://sdk.mystenlabs.com/dapp-kit/getting-started/react
• https://sdk.mystenlabs.com/dapp-kit/getting-started/next-js
• https://sdk.mystenlabs.com/dapp-kit/getting-started/vue
• https://docs.sui.io/standards/wallet-standard