Skip to main content

​
Installing Sui SDK and dApp Kit

This guide will walk you through setting up the workshop project and installing all the necessary Sui packages.

​
Clone the Workshop Repository

First, clone the workshop starter repository: 
git clone https://github.com/DevWeb3Jogja/sui-workshop-fe-1.git
cd sui-workshop-fe-1

​
Install Dependencies

The project uses npm for package management. Install the existing dependencies: 
npm install

​
Install Sui Packages

Now add the Sui-specific packages to the project: 
npm install @mysten/dapp-kit @mysten/sui @tanstack/react-query
These three packages are required:
  1. @mysten/dapp-kit - React components and hooks for Sui dApps
  2. @mysten/sui - Core Sui TypeScript SDK
  3. @tanstack/react-query - Required for data fetching (peer dependency)

​
Verify Installation

After installation, verify the packages were added to your package.json: 
npm list @mysten/dapp-kit @mysten/sui @tanstack/react-query

​
Package Overview

​
@mysten/dapp-kit

The dApp Kit provides:
  • React Hooks for wallet interactions, transactions, and queries
  • UI Components like ConnectButton and ConnectModal
  • Provider Components for managing state
  • Type-safe APIs for blockchain interactions
Key exports:
  • WalletProvider - Manages wallet state
  • SuiClientProvider - Manages network connections
  • useCurrentAccount() - Get connected wallet account
  • useSignAndExecuteTransaction() - Sign and execute transactions
  • useSuiClientQuery() - Query blockchain data
  • ConnectButton - Pre-built wallet connection UI

​
@tanstack/react-query

React Query is a peer dependency that powers the data fetching hooks in dApp Kit:
  • Automatic caching and refetching
  • Loading and error states
  • Optimistic updates
  • Request deduplication

​
Package Versions

Always use compatible versions of @mysten/dapp-kit and @mysten/sui. They are versioned together and should typically be on the same version number.
Check the latest versions:

​
Next Steps

Now that you have all the packages installed, let’s set up the providers to connect your app to the Sui blockchain.

Setup Providers

Configure network and wallet providers