> For the complete documentation index, see [llms.txt](/llms.txt)

# useDAppKit

React hook to access the full dApp Kit instance



The `useDAppKit` hook provides direct access to the dApp Kit instance within React components,
enabling you to call actions and access the underlying functionality.

<Callout type="warn">
  All dApp Kit hooks must be used within components that are descendants of
  [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
</Callout>

## Usage

```tsx
import type { UiWallet } from '@mysten/dapp-kit-react';
import { useDAppKit } from '@mysten/dapp-kit-react';

export function MyComponent({ wallet }: { wallet: UiWallet }) {
	const dAppKit = useDAppKit();

	async function handleConnect() {
		try {
			await dAppKit.connectWallet({ wallet });
			console.log('Connected successfully');
		} catch (error) {
			console.error('Connection failed:', error);
		}
	}

	return <button onClick={handleConnect}>Connect Wallet</button>;
}
```

## Return Value

```ts
{
    // Actions
    connectWallet: (args: { wallet: UiWallet; account?: UiWalletAccount }) => Promise<{ accounts: UiWalletAccount[]; }>;
    disconnectWallet: () => Promise<void>;
    switchAccount: (args: { account: UiWalletAccount }) => Promise<void>;
    switchNetwork: (network: string) => void;
    signTransaction: (args: { transaction: Transaction | string; signal?: AbortSignal }) => Promise<SignedTransaction>;
    signAndExecuteTransaction: (args: { transaction: Transaction | string; signal?: AbortSignal }) => Promise<TransactionResult>;
    signPersonalMessage: (args: { message: Uint8Array }) => Promise<SignedPersonalMessage>;

    // Properties
    networks: string[];
    stores:  {
        $wallets: DAppKitStores['$compatibleWallets'];
        $connection: DAppKitStores['$connection'];
        $currentNetwork: ReadableAtom<TNetworks[number]>;
        $currentClient: ReadableAtom<Client>;
    };
    getClient: (network?: string) => Client;
}
```

## Examples

### Transaction Execution

```tsx
import { useDAppKit } from '@mysten/dapp-kit-react';
import { Transaction } from '@mysten/sui/transactions';

export function TransferButton() {
	const dAppKit = useDAppKit();

	async function handleTransfer() {
		const tx = new Transaction();
		tx.transferObjects([tx.object('0x123...')], '0xrecipient...');

		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}>Transfer</button>;
}
```

### Subscribing to State Changes

```tsx
import { useEffect } from 'react';
import { useDAppKit } from '@mysten/dapp-kit-react';

export function ConnectionMonitor() {
	const dAppKit = useDAppKit();
	useEffect(() => {
		// Subscribe directly to connection store changes
		const unsubscribe = dAppKit.stores.$connection.subscribe((connection) => {
			console.log('Connection status:', connection.status);
		});
		return unsubscribe;
	}, [dAppKit]);
	return null;
}
```