skills.rest
widnyana
widnyanaCOMMUNITY
Explore all skills by this author →
Website𝕏@widnyana_GitHub

sui-frontend

Integrate Sui wallet connection, on-chain queries, and transaction signing in browser dApps.

4|Updated Feb 13, 2026
Search Tags:#react#sui#transaction signing#wallet connection#dapp kit#grpc client#on-chain querying
One-click install
npx skills add https://github.com/widnyana/eyay-toolkits --skill sui-frontend-widnyana
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sui-frontend
Source: https://github.com/widnyana/eyay-toolkits/tree/main/plugins/sui-dev-tools/skills/sui-frontend
Command: npx skills add https://github.com/widnyana/eyay-toolkits --skill sui-frontend-widnyana

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the uncertainty and boilerplate needed to build a browser-based Sui dApp that connects to wallets, reads on-chain state, and signs transactions reliably across testnet and mainnet.

Core Features & Use Cases

  • React or non-React integration: Set up @mysten/dapp-kit-react for React or @mysten/dapp-kit-core for Vue/vanilla JS/web components.
  • Correct client wiring: Configure createDAppKit with SuiGrpcClient for gRPC (not the deprecated JSON-RPC pattern).
  • Wallet UX and state management: Use ConnectButton plus useCurrentAccount, useCurrentWallet, and (non-React) $connection subscriptions with nanostores stores.
  • On-chain interaction workflow: Query with @tanstack/react-query, sign with signAndExecuteTransaction or signPersonalMessage, and handle FailedTransaction safely.
  • Post-transaction consistency: Wait for indexing using client.waitForTransaction and invalidate React Query caches using the right query keys.

Quick Start

Set up a React dApp using dApp Kit by configuring createDAppKit with SuiGrpcClient, wrapping your app in DAppKitProvider, and rendering a ConnectButton that displays the connected wallet name and address.

Frequently Asked Questions about sui-frontend

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

FAQPage Schema
How do I connect a Sui wallet and sign transactions in a React dApp?▼

To connect a Sui wallet and sign transactions in a React dApp, configure `createDAppKit` with `SuiGrpcClient`, wrap your app in `DAppKitProvider`, and use `ConnectButton` alongside `useCurrentAccount` for state management.

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

Yes, you can use Sui dApp Kit with Vue or vanilla JS by utilizing `@mysten/dapp-kit-core` and subscribing to `$connection` stores via nanostores, bypassing React-specific hooks like `useCurrentAccount`.

Why does my Sui dApp UI show stale data after a transaction?▼

Your Sui dApp UI shows stale data because you must wait for indexing using `client.waitForTransaction` before invalidating React Query caches using the correct query keys to trigger a UI refresh.

What is the correct client for querying on-chain data in Sui dApps?▼

The correct client for querying on-chain data in Sui dApps is `SuiGrpcClient` used within `createDAppKit`, which replaces the deprecated JSON-RPC pattern for reliable gRPC-based interactions.

How do I handle failed transaction signing in a Sui dApp?▼

To handle failed transaction signing in a Sui dApp, implement correct discriminant checks for `FailedTransaction` to ensure null-safe wallet state handling and prevent UI crashes during `signAndExecuteTransaction`.

Do I need React Query for on-chain querying in Sui wallet dApps?▼

Yes, you need React Query for on-chain querying in Sui wallet dApps to manage data fetching and enable reliable post-transaction UI refresh through cache invalidation after `waitForTransaction` completes.

Related Skills

Explore More Software Engineering Skills→
MystenLabsMystenLabs
10

frontend-apps

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

Official
Advanced
vechainvechain
9

frontend

Provide frontend development patterns for VeChain dApps using React Query, Turborepo, Zustand, and Chakra UI.

Official
Intermediate
greyhaven-aigreyhaven-ai
29

grey-haven-tanstack-patterns

Standardize TanStack Start, Router, and Query patterns in React 19 applications.

Community
Intermediate
first-mover-twfirst-mover-tw
7

sui-frontend

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

Official
Intermediate