skills.rest
MystenLabs
MystenLabsOFFICIAL
Explore all skills by this author →
Website𝕏@Mysten_LabsGitHub

frontend-apps

Build Sui frontend dApps with dApp Kit v2 for wallet connections and transactions.

10|5|Updated Mar 13, 2026
Search Tags:#react#vue#tanstack query#sui#wallet connection#transaction execution#dapp kit
One-click install
npx skills add https://github.com/MystenLabs/skills --skill frontend-apps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-apps
Source: https://github.com/MystenLabs/skills/tree/main/frontend-apps
Command: npx skills add https://github.com/MystenLabs/skills --skill frontend-apps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about frontend-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a Sui wallet in a React app using dApp Kit?▼

To connect a Sui wallet in a React app, use @mysten/dapp-kit-react and wire the DAppKitProvider via the createDAppKit factory. This setup enables reliable wallet connections, network switching, and transaction execution using dApp Kit v2 patterns.

Can I use Sui dApp Kit with Vue or vanilla JavaScript?▼

Yes, you can build Sui frontends with Vue or vanilla JavaScript using @mysten/dapp-kit-core. It provides the same createDAppKit imperative actions for wallet connections and transaction execution without requiring React specific hooks.

Why does my Sui dApp display stale data after executing a transaction?▼

Sui dApps display stale data when cache invalidation happens before indexing completes. You must enforce waitForTransaction before refetching queries to ensure the UI accurately reflects the updated on-chain state.

How do I query on-chain state in a Sui dApp using TanStack Query?▼

Query Sui on-chain state using TanStack Query patterns with useCurrentClient. Gate your queries with enabled: !!account to ensure null-safe fetching, and use the v2 cursor model for paginated object queries.

What is the correct SuiClient to use for dApp Kit v2 migration?▼

For dApp Kit v2 migration, use SuiGrpcClient with createClient. This replaces deprecated v1 SuiClient usage and obsolete hooks, correcting legacy mistakes like the @mysten/dapp-kit package without a suffix.

How do I handle failed transactions in a Sui frontend application?▼

Handle failed transactions in a Sui frontend by managing failure states reliably during execution. The dApp Kit v2 allows you to handle FailedTransaction via the $kind property to gracefully manage UI updates when writes fail.

Related Skills

Explore More Software Engineering Skills→
MystenLabsMystenLabs
20

sui-frontend

Build browser-based Sui dApps with wallet integration and on-chain transactions.

Official
Advanced
first-mover-twfirst-mover-tw
7

sui-frontend

Integrate SUI SDK and dapp-kit for wallet connections and transactions.

Official
Intermediate
cenjiecenjie

state-management

Implement React Query and Zustand patterns for server and client state.

Community
Advanced
multiversxmultiversx
12

multiversx-dapp-frontend

Integrate React frontends with MultiversX blockchain for wallet and transaction handling.

Official
Intermediate