Sui dApp Kit

The Sui dApp Kit is a set of React components, hooks, and utilities that make it easy to build a dApp for the Sui ecosystem. It provides hooks and components for querying data from the Sui blockchain, and connecting to Sui wallets.

Install from NPM

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 be able to use the hooks and components in the dApp Kit, you need to wrap your app with a couple providers. The props available on the providers are covered in more detail in their respective docs pages.

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { type SuiClientOptions } from '@mysten/sui.js';
 
// Config options for the networks you want to connect to
const networks = {
	localnet: { url: getFullnodeUrl('localnet') },
	mainnet: { url: getFullnodeUrl('mainnet') },
} satisfies Record<string, SuiClientOptions>;
 
function App() {
	return (
		<SuiClientProvider networks={networks} defaultNetwork="localnet">
			<WalletProvider>
				<YourApp />
			</WalletProvider>
		</SuiClientProvider>
	);
}

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 these query hooks checkout the react-query docs (opens in a new tab).

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