Mysten Labs TypeScript SDK Docs

This guide walks you through integrating dApp Kit into a React application.

Quick Start with create-dapp

The fastest way to get started is using our CLI tool:

npm create @mysten/dapp

This creates a new project with:

React + TypeScript + Vite
Tailwind CSS v4 for styling
dApp Kit pre-configured
Example wallet connection UI

Choose from two templates:

react-client-dapp: Basic wallet connection and object display
react-e2e-counter: Full example with Move smart contract and codegen

See the create-dapp guide for more details.

Manual Installation

npm i @mysten/dapp-kit-react @mysten/sui

Setup

1. Create a dApp Kit Instance

Create a file to configure your dApp Kit instance:

// dapp-kit.ts
import { createDAppKit } from '@mysten/dapp-kit-react';
import { SuiGrpcClient } from '@mysten/sui/grpc';

const GRPC_URLS = {
	testnet: 'https://fullnode.testnet.sui.io:443',
};

export const dAppKit = createDAppKit({
	networks: ['testnet'],
	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
});

// Register types for hook type inference
declare module '@mysten/dapp-kit-react' {
	interface Register {
		dAppKit: typeof dAppKit;
	}
}

2. Add the Provider

Wrap your application with DAppKitProvider:

// App.tsx
import { DAppKitProvider, ConnectButton } from '@mysten/dapp-kit-react';
import { dAppKit } from './dapp-kit';

export default function App() {
	return (
		<DAppKitProvider dAppKit={dAppKit}>
			<div>
				<h1>My Sui dApp</h1>
				<ConnectButton />
				<WalletStatus />
			</div>
		</DAppKitProvider>
	);
}

3. Display Connection Status

Use hooks to access wallet state:

import { useCurrentAccount, useCurrentWallet, useCurrentNetwork } from '@mysten/dapp-kit-react';

function WalletStatus() {
	const account = useCurrentAccount();
	const wallet = useCurrentWallet();
	const network = useCurrentNetwork();

	if (!account) {
		return <p>Connect your wallet to get started</p>;
	}

	return (
		<div>
			<p>Wallet: {wallet?.name}</p>
			<p>Address: {account.address}</p>
			<p>Network: {network}</p>
		</div>
	);
}

4. Execute Transactions

Use the useDAppKit hook to sign and execute transactions:

import { useDAppKit, useCurrentAccount } from '@mysten/dapp-kit-react';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';

function TransferButton() {
	const dAppKit = useDAppKit();
	const account = useCurrentAccount();

	async function handleTransfer() {
		const tx = new Transaction();
		tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], 'RECIPIENT_ADDRESS');

		try {
			const result = await dAppKit.signAndExecuteTransaction({ transaction: tx });

			if (result.FailedTransaction) {
				throw new Error(`Transaction failed: ${result.FailedTransaction.status.error?.message}`);
			}

			console.log('Transaction digest:', result.Transaction.digest);
		} catch (error) {
			console.error('Transaction failed:', error);
		}
	}

	return (
		<button onClick={handleTransfer} disabled={!account}>
			Send Transaction
		</button>
	);
}

Available Hooks

Hook	Description
useDAppKit	Access the dApp Kit instance and actions
useWalletConnection	Full connection state with status flags
useCurrentAccount	Currently selected account
useCurrentWallet	Currently connected wallet
useCurrentNetwork	Current network
useCurrentClient	SuiClient for current network
useWallets	List of available wallets

Components

Component	Description
ConnectButton	Complete wallet connection UI
ConnectModal	Standalone wallet selection modal
DAppKitProvider	Context provider for hooks

Example Application

See the complete React example on GitHub.

Next Steps

DAppKitProvider - Provider configuration
Hooks Reference - All available hooks
Components - UI components
Theming - Customize appearance

React

On this page