Sui dApp Kit

The Sui dApp Kit is a set of React components, hooks, and utilities to help you build a dApp for the Sui ecosystem. Its hooks and components provide an interface for querying data from the Sui blockchain and connecting to Sui wallets.

Core Features

Some of the core features of the dApp Kit include:

• Query hooks to get the information your dApp needs
• Automatic wallet state management
• Support for all Sui wallets
• Pre-built React components
• Lower level hooks for custom components

Install

To use the Sui dApp Kit in your project, run the following command in your project root:

npm i --save @mysten/dapp-kit @mysten/sui.js @tanstack/react-query

Setting up providers

To use the hooks and components in the dApp Kit, wrap your app with the providers shown in the following example. The props available on the providers are covered in more detail in their respective pages.

import { createNetworkConfig, SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui.js/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
// Config options for the networks you want to connect to
const { networkConfig } = createNetworkConfig({
	localnet: { url: getFullnodeUrl('localnet') },
	mainnet: { url: getFullnodeUrl('mainnet') },
});
const queryClient = new QueryClient();
 
function App() {
	return (
		<QueryClientProvider client={queryClient}>
			<SuiClientProvider networks={networkConfig} defaultNetwork="localnet">
				<WalletProvider>
					<YourApp />
				</WalletProvider>
			</SuiClientProvider>
		</QueryClientProvider>
	);
}

Using UI components to connect to a wallet

The dApp Kit provides a set of flexible UI components that you can use to connect and manage wallet accounts from your dApp. The components are built on top of Radix UI (opens in a new tab) and are customizable.

To use the provided UI components, import the dApp Kit CSS stylesheet into your dApp. For more information regarding customization options, check out the respective documentation pages for the components and themes (opens in a new tab).

import '@mysten/dapp-kit/dist/index.css';

Using hooks to make RPC calls

The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin wrappers around useQuery from @tanstack/react-query. For more comprehensive documentation on how to use these query hooks, check out the react-query documentation (opens in a new tab).

import { useSuiClientQuery } from '@mysten/dapp-kit';
 
function MyComponent() {
	const { data, isPending, error, refetch } = useSuiClientQuery('getOwnedObjects', {
		owner: '0x123',
	});
 
	if (isPending) {
		return <div>Loading...</div>;
	}
 
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
}