Mysten Labs TypeScript SDK Docs

The Sui dApp Kit SDK uses nanostores for state management, providing a lightweight, framework-agnostic solution that works across React, Vue, Vanilla JavaScript, and other frameworks.

Available Stores

The dApp Kit exposes four reactive stores that you can subscribe to:

$connection - Current wallet connection state
$currentNetwork - Currently selected network
$currentClient - Client instance for the current network
$wallets - List of available wallets

Accessing Stores

All stores are available through the dAppKit.stores property:

import { createDAppKit } from '@mysten/dapp-kit-core';

const dAppKit = createDAppKit({
	/* config */
});

// Access stores
const connection = dAppKit.stores.$connection.get();
const currentNetwork = dAppKit.stores.$currentNetwork.get();
const client = dAppKit.stores.$currentClient.get();
const wallets = dAppKit.stores.$wallets.get();

Subscribing to State Changes

Subscribe to any store to react to state changes:

// Subscribe to connection changes
const unsubscribe = dAppKit.stores.$connection.subscribe((connection) => {
	if (connection.isConnected && connection.wallet && connection.account) {
		console.log('Connected to:', connection.wallet.name);
		console.log('Account:', connection.account.address);
	} else {
		console.log('Not connected');
	}
});

// Clean up subscription when done
unsubscribe();

Store Details

Connection Store (`$connection`)

Contains the current wallet connection state with status flags:

const connection = dAppKit.stores.$connection.get();

// Connection has these properties:
// - wallet: UiWallet | null
// - account: UiWalletAccount | null
// - status: 'connected' | 'connecting' | 'reconnecting' | 'disconnected'
// - supportedIntents: string[]
// - isConnected: boolean
// - isConnecting: boolean
// - isReconnecting: boolean
// - isDisconnected: boolean

Example usage:

const connection = dAppKit.stores.$connection.get();

if (connection.isConnected && connection.wallet && connection.account) {
	console.log('Address:', connection.account.address);
	console.log('Wallet:', connection.wallet.name);
	console.log('Available accounts:', connection.wallet.accounts);
}

Current Network Store (`$currentNetwork`)

Contains the currently selected network as a string:

const currentNetwork = dAppKit.stores.$currentNetwork.get(); // 'mainnet' | 'testnet' | ...

// Subscribe to network changes
dAppKit.stores.$currentNetwork.subscribe((network) => {
	console.log('Switched to network:', network);
});

Note: This store is read-only. Use dAppKit.switchNetwork() to change networks.

Current Client Store (`$currentClient`)

Contains the SuiClient instance for the current network:

const client = dAppKit.stores.$currentClient.get();

// Use the client to query the blockchain
const balance = await client.getBalance({
	owner: '0x...',
});

Note: This store automatically updates when the network changes.

Wallets Store (`$wallets`)

Contains the list of available wallets:

const wallets = dAppKit.stores.$wallets.get();

wallets.forEach((wallet) => {
	console.log('Wallet:', wallet.name);
	console.log('Icon:', wallet.icon);
});

Subscribing to State Changes

You can subscribe directly to stores:

// Subscribe to connection changes
dAppKit.stores.$connection.subscribe((connection) => {
	const statusElement = document.getElementById('connection-status');
	if (statusElement === null) return;
	if (connection.isConnected && connection.account) {
		statusElement.textContent = `Connected: ${connection.account.address}`;
	} else {
		statusElement.textContent = 'Not connected';
	}
});

// Subscribe to network changes
dAppKit.stores.$currentNetwork.subscribe((network) => {
	const networkElement = document.getElementById('current-network');
	if (networkElement === null) return;
	networkElement.textContent = `Network: ${network}`;
});

React

React users can use the provided hooks instead of direct store access.

Properties

Besides stores, some values are available as direct properties:

// Get available networks (not a store, just a property)
const networks = dAppKit.networks; // ['mainnet', 'testnet', ...]

// Get client for specific network
const mainnetClient = dAppKit.getClient('mainnet');
const currentClient = dAppKit.getClient(); // Current network's client

State

On this page