ReactHooks
useDAppKit
The useDAppKit hook provides direct access to the dApp Kit instance within React components,
enabling you to call actions and access the underlying functionality.
All dApp Kit hooks must be used within components that are descendants of DAppKitProvider. Using them outside will result in an error.
Usage
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
{
// 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
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
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;
}