sui-frontendlisted

# Sui Frontend Skill This skill covers building browser-based Sui dApps using the dApp Kit SDK. The SDK has two packages: - **`@mysten/dapp-kit-react`** — React hooks, `DAppKitProvider`, and React component wrappers - **`@mysten/dapp-kit-core`** — Framework-agnostic core: actions, nanostores state, and Web Components for Vue, vanilla JS, Svelte, or any other framework Both packages expose the same `createDAppKit` factory and identical action APIs (`signAndExecuteTransaction`, `signTransaction`, `signPersonalMessage`, etc.). What differs is how you access reactive state and render UI: React uses hooks and provider components; other frameworks use nanostores stores and Web Components. For PTB construction details (splitCoins, moveCall, coinWithBalance, etc.), apply the **sui-ts-sdk** skill alongside this one — the `Transaction` API is identical in browser and Node contexts. > **Note**: The older `@mysten/dapp-kit` package is deprecated (JSON-RPC only, no gRPC/GraphQL support). New projects must use `@mysten/dapp-kit-react` or `@mysten/dapp-kit-core`. --- ## 1. Package Installation **React:** ```bash npm install @mysten/dapp-kit-react @mysten/sui # Add React Query for declarative on-chain data fetching (recommended) npm install @tanstack/react-query ``` **Vue / vanilla JS / other frameworks:** ```bash npm install @mysten/dapp-kit-core @mysten/sui # For Vue reactive bindings: npm install @nanostores/vue ``` | Package | Purpose | |---------|---------| | `@mysten/dapp-kit