Sui dApp Kit

https://sdk.mystenlabs.com/dapp-kit
Admin
The Sui dApp Kit is a set of React components, hooks, and utilities for building dApps in the Sui...
Tokens:24,441
Snippets:235
Trust Score:9.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/create-dapp

Install project dependencies and start the Vite development server to begin working on your dApp.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Basic Usage Example

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Demonstrates the basic setup of a DAppKit instance for managing wallet connections and network interactions.

```APIDOC
## Basic usage

```ts
// dapp-kit.ts
import { createDAppKit } from '@mysten/dapp-kit-core';
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] }),
});
```

```ts
// connect-wallet-and-log.ts
import type { UiWallet, UiWalletAccount } from '@mysten/dapp-kit-core';
import { dAppKit } from './dapp-kit.ts';

export async function connectWalletAndLog({
	wallet,
	account,
}: {
	wallet: UiWallet;
	account: UiWalletAccount;
}) {
	const result = await dAppKit.connectWallet({
		wallet,
		account,
	});
	console.log('Connected accounts:', result.accounts);
}
```
```

--------------------------------

### Handle wallet connection and display account

Source: https://sdk.mystenlabs.com/dapp-kit/actions/connect-wallet

This example demonstrates how to get available wallets, subscribe to connection status changes, and attempt to connect to the first available wallet. It logs the connected account address or connection details.

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

const unsubscribe = dAppKit.stores.$connection.subscribe((connection) => {
	if (connection.isConnected) {
		console.log(`Connected account address: ${connection.account.address}`);
	} else {
		console.log({ connection });
	}
});

if (wallets.length > 0) {
	try {
		const { accounts } = await dAppKit.connectWallet({
			wallet: wallets[0],
		});
		console.log('Available accounts:', accounts);
	} catch (error) {
		console.error('Connection failed:', error);
	}
}
```

--------------------------------

### Subscribing to State Changes Example

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-dapp-kit

Example showing how to subscribe to the `$connection` store to monitor connection status changes.

```APIDOC
## Subscribing to State Changes

### Description
This example demonstrates how to subscribe to the `$connection` store, which is part of the `dAppKit` instance, to receive real-time updates on the connection status.

### Method
`dAppKit.stores.$connection.subscribe((connection) => { ... })`

### Parameters
- **callback**: `(connection: ConnectionStatus) => void` - A function that will be called whenever the connection status changes.

### Return Value
- `unsubscribe`: `() => void` - A function to unsubscribe from the store updates.

### Usage Example
```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;
}
```
```

--------------------------------

### Creating a dApp Kit instance

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

The core of the DApp Kit SDK is the `createDAppKit` function, which creates an instance that manages all app functionality. This example shows basic setup with testnet.

```APIDOC
## Creating a dApp Kit instance

The core of the dApp Kit SDK is the `createDAppKit` function, which creates an instance that manages all app functionality:

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
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] }),
});
```
```

--------------------------------

### Programmatic Control Example

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

An example illustrating how to use the `show()` method for programmatic control of the modal, particularly when a user action requires wallet connection.

```APIDOC
## Programmatic Control Example

### Description
This example demonstrates how to programmatically control the Connect Modal, showing it only when a user action requires a wallet connection and no active connection exists. It uses the `show()` method to open the modal and waits for the connection process to complete or be cancelled.

### Usage
```javascript
const modal = document.querySelector('mysten-dapp-kit-connect-modal');
modal.instance = dAppKit; // Ensure the dAppKit instance is set

async function performAction() {
	const connection = dAppKit.stores.$connection.get();

	if (!connection.account) {
		// If no account is connected, open the modal
		await modal.show();
		// The execution will pause here until the modal is closed
		// either by a successful connection or user cancellation.
		// Re-check connection status if needed after modal closes.
		const updatedConnection = dAppKit.stores.$connection.get();
		if (!updatedConnection.account) {
			console.log('User did not connect a wallet.');
			return; // Exit if still not connected
		}
	}

	// Proceed with the action that requires a connection...
	console.log('Proceeding with action, account:', dAppKit.stores.$connection.get().account);
}

// Example of triggering the action
// performAction();
```
```

--------------------------------

### Basic DAppKitProvider Setup

Source: https://sdk.mystenlabs.com/dapp-kit/react/dapp-kit-provider

Demonstrates the fundamental usage of DAppKitProvider by wrapping the main application component. Ensure dAppKit is imported and initialized before passing it as a prop.

```tsx
import { DAppKitProvider } from './dapp-kit.ts';

export default function App() {
	return (
		<DAppKitProvider dAppKit={dAppKit}>
			<YourApp />
		</DAppKitProvider>
	);
}
```

--------------------------------

### Install @mysten/dapp-kit-core for Vanilla JS/Other Frameworks

Source: https://sdk.mystenlabs.com/dapp-kit

Use this command to install the framework-agnostic core package for vanilla JavaScript or other frameworks.

```sh
npm i @mysten/dapp-kit-core @mysten/sui
```

--------------------------------

### Complete Theme Example with HSL Colors

Source: https://sdk.mystenlabs.com/dapp-kit/theming

A comprehensive example demonstrating how to define a full theme using HSL color values for precise control over hues, saturation, and lightness.

```css
:root {
	/* Colors */
	--background: hsl(0 0% 100%);
	--foreground: hsl(222.2 84% 4.9%);
	--primary: hsl(221.2 83.2% 53.3%);
	--primary-foreground: hsl(210 40% 98%);
	--secondary: hsl(210 40% 96.1%);
	--secondary-foreground: hsl(222.2 47.4% 11.2%);
	--accent: hsl(210 40% 96.1%);
	--accent-foreground: hsl(222.2 47.4% 11.2%);
	--muted: hsl(210 40% 96.1%);
	--muted-foreground: hsl(215.4 16.3% 46.9%);
	--border: hsl(214.3 31.8% 91.4%);
	--popover: hsl(0 0% 100%);
	--popover-foreground: hsl(222.2 84% 4.9%);
	--ring: hsl(221.2 83.2% 53.3%);

	/* Typography */
	--font-sans:
		system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* Layout */
	--radius: 0.5rem;
}
```

--------------------------------

### Create dApp Kit Instance

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/vue

Initialize the dApp Kit instance with network configurations and a client factory. This setup is typically done in a dedicated file like src/dapp-kit.ts.

```ts
// src/dapp-kit.ts
import { createDAppKit } from '@mysten/dapp-kit-core';
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] }),
});
```

--------------------------------

### Transaction Execution Example

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-dapp-kit

Example demonstrating how to use `signAndExecuteTransaction` to send a transaction.

```APIDOC
## Transaction Execution

### Description
This example illustrates how to use the `signAndExecuteTransaction` action provided by the `dAppKit` instance to send a Sui transaction.

### Method
`dAppKit.signAndExecuteTransaction({ transaction: Transaction | string })`

### Parameters
- **transaction**: `Transaction | string` - The transaction object or its string representation to be signed and executed.

### Response
- **TransactionResult**: The result of the transaction execution, which can indicate success or failure.

### Usage Example
```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>;
}
```
```

--------------------------------

### Sign Transaction Example

Source: https://sdk.mystenlabs.com/dapp-kit/actions/sign-transaction

Import necessary functions and create a dAppKit instance. Then, construct a transaction, and use `signTransaction` to get the signed bytes and signature. The sender address is set automatically.

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';

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

const tx = new Transaction();
// No need to manually set sender - it's done automatically
tx.transferObjects([coinWithBalance({ balance: 123 })], '0xrecipient...');

// Sign the transaction without executing it
const { bytes, signature } = await dAppKit.signTransaction({
	transaction: tx,
});
```

--------------------------------

### Install dApp Kit Dependencies

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/vue

Install the necessary dApp Kit core packages and Vue integration library using npm or yarn.

```sh
npm i @mysten/dapp-kit-core @mysten/sui @nanostores/vue
```

--------------------------------

### Programmatic Control Example

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

Demonstrates opening the modal programmatically when a user action requires a wallet connection. The code checks for an existing connection and opens the modal if none is found.

```javascript
const modal = document.querySelector('mysten-dapp-kit-connect-modal');
modal.instance = dAppKit;

// Open modal when user tries to perform an action that requires connection
async function performAction() {
	const connection = dAppKit.stores.$connection.get();

	if (!connection.account) {
		await modal.show();
		// Wait for connection or cancellation
		return;
	}

	// Proceed with action...
}
```

--------------------------------

### Install @mysten/dapp-kit-react for React Apps

Source: https://sdk.mystenlabs.com/dapp-kit

Use this command to install the React-specific package for your React applications.

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

--------------------------------

### Development Configuration with Burner Wallet

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Example of configuring DAppKit for development environments, enabling the burner wallet for easier testing.

```APIDOC
## Development configuration

For development environments, enable the burner wallet:

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
import { SuiGrpcClient } from '@mysten/sui/grpc';

export const dAppKit = createDAppKit({
	networks: ['localnet'],
	defaultNetwork: 'localnet',
	createClient: () => new SuiGrpcClient({ network: 'localnet', baseUrl: 'http://127.0.0.1:9000' }),
	enableBurnerWallet: true, // Dev-only feature
});
```
```

--------------------------------

### Complete Vue dApp Example

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/vue

A full Vue component integrating connection status display, transaction execution, and network information. Ensure the dAppKit instance and Nanostores are correctly set up.

```vue
<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';
import { dAppKit } from './dapp-kit';

const connection = useStore(dAppKit.stores.$connection);
const network = useStore(dAppKit.stores.$currentNetwork);

async function handleTransfer() {
	if (!connection.value.account) return;

	const tx = new Transaction();
	tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], connection.value.account.address);

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

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

		alert(`Transaction successful: ${result.Transaction.digest}`);
	} catch (error) {
		console.error('Transaction failed:', error);
	}
}
</script>

<template>
	<div class="app">
		<h1>My Sui dApp</h1>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />

		<div v-if="connection.account" class="wallet-info">
			<p>Wallet: {{ connection.wallet?.name }}</p>
			<p>Address: {{ connection.account.address }}</p>
			<p>Network: {{ network }}</p>
			<button @click="handleTransfer">Send Test Transaction</button>
		</div>
		<p v-else>Connect your wallet to get started</p>
	</div>
</template>
```

--------------------------------

### Vanilla JS Usage

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

Example of how to use the Connect Modal Web Component in a vanilla JavaScript application, including setting the dApp Kit instance and handling the trigger.

```APIDOC
## Vanilla JS Usage

### Description
This example demonstrates how to integrate the `<mysten-dapp-kit-connect-modal>` Web Component into a vanilla JavaScript application. It shows how to set the `dAppKit` instance and how to programmatically open the modal using a custom button trigger.

### HTML
```html
<button id="custom-trigger">Open Wallet Selector</button>
<mysten-dapp-kit-connect-modal></mysten-dapp-kit-connect-modal>
```

### JavaScript
```javascript
import { createDAppKit } from '@mysten/dapp-kit-core';
import { SuiGrpcClient } from '@mysten/sui/grpc';

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

const dAppKit = createDAppKit({
    enableBurnerWallet: import.meta.env.DEV,
    networks: ['mainnet', 'testnet'],
    defaultNetwork: 'testnet',
    createClient(network) {
        return new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] });
    },
});

const modal = document.querySelector('mysten-dapp-kit-connect-modal');
modal.instance = dAppKit;

const trigger = document.getElementById('custom-trigger');
trigger?.addEventListener('click', () => {
    modal.show();
});
```
```

--------------------------------

### Alternative: Single Client Component Setup

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/next-js

A simplified approach for smaller applications using a single client component that integrates dApp Kit Provider, ConnectButton, and wallet status logic.

```tsx
// app/WalletApp.tsx
'use client';

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

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

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

	async function handleTransfer() {
		const tx = new Transaction();
		tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], account.address);
		const result = await dAppKit.signAndExecuteTransaction({ transaction: tx });

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

		alert(`Transaction: ${result.Transaction.digest}`);
	}

	return (
		<div>
			<p>Connected: {account.address}</p>
			<button onClick={handleTransfer}>Send Transaction</button>
		</div>
	);
}

export default function WalletApp() {
	return (
		<DAppKitProvider dAppKit={dAppKit}>
			<ConnectButton />
			<WalletStatus />
		</DAppKitProvider>
	);
}
```

--------------------------------

### Accessing dApp Kit Stores

Source: https://sdk.mystenlabs.com/dapp-kit/state

Import and initialize dAppKit, then access its reactive stores to get current state values like connection, network, client, and wallets.

```typescript
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 Connection State Changes

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-dapp-kit

This example shows how to subscribe to changes in the dApp Kit's connection status using the `$connection` store. The `useEffect` hook is used to manage the subscription lifecycle.

```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;
}
```

--------------------------------

### useCurrentClient Hook Usage

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-current-client

This example demonstrates how to import and use the useCurrentClient hook within a React component to interact with the Sui blockchain.

```APIDOC
## useCurrentClient

### Description
React hook to get the current Sui client instance for the active network.

The `useCurrentClient` hook provides access to the blockchain client instance for the current network.

<Callout type="info">
  By default, this returns a `SuiClient` instance when using the standard setup. However, the dApp
  Kit supports any client that implements the Sui core API, making it flexible for different
  blockchain implementations.
</Callout>

<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 { useCurrentClient } from '@mysten/dapp-kit-react';

export function MyComponent() {
	const client = useCurrentClient();

	const handleQuery = async () => {
		const balance = await client.getBalance({
			owner: '0x...',
		});
		console.log(balance);
	};

	return <button onClick={handleQuery}>Check Balance</button>;
}
```

## Return value

```tsx
SuiClient;
```
```

--------------------------------

### Execute Transactions with useDAppKit

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/react

Use the useDAppKit hook to sign and execute transactions. This example demonstrates transferring objects after creating a new Transaction object.

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

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

	after (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>
	);
}
```

--------------------------------

### Vue Usage

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

Example of integrating the Connect Modal Web Component within a Vue.js application, utilizing ref for direct access and property binding for modal visibility.

```APIDOC
## Vue Usage

### Description
This example shows how to use the `<mysten-dapp-kit-connect-modal>` Web Component in a Vue.js application. It utilizes `ref` to get a reference to the modal component and demonstrates controlling its visibility via property binding (`:open`) and emitting events (`@closed`).

### Vue Template
```vue
<script setup lang="ts">
import { ref } from 'vue';
import { dAppKit } from './dapp-kit.ts';

const modalRef = ref();
const isModalOpen = ref(false);

const openModal = () => {
	// Using property binding
	isModalOpen.value = true;
	// Or using method
	modalRef.value.show();
};
</script>

<template>
	<!-- Custom trigger -->
	<button @click="openModal">Select Wallet</button>

	<!-- Modal component -->
	<mysten-dapp-kit-connect-modal
		ref="modalRef"
		:instance="dAppKit"
		:open="isModalOpen"
		@closed="isModalOpen = false"
	/>
</template>
```
```

--------------------------------

### Execute Transactions in Vue

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/vue

Implement transaction execution by creating a `Transaction` object, signing it with dApp Kit, and handling the result. This example shows a simple object transfer.

```vue
<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';
import { dAppKit } from './dapp-kit';

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

async function handleTransfer() {
	const tx = new Transaction();
	tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], connection.value.account!.address);

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

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

		alert(`Transaction: ${result.Transaction.digest}`);
	} catch (error) {
		console.error('Transaction failed:', error);
	}
}
</script>

<template>
	<div>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />

		<button v-if="connection.account" @click="handleTransfer">Send Transaction</button>
	</div>
</template>
```

--------------------------------

### Create dApp Kit Instance

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/next-js

Initialize the dApp Kit instance with network configurations and a client creation function. This file should be placed in `app/dapp-kit.ts`.

```ts
// app/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',
} as const;

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;
	}
}
```

--------------------------------

### Accessing dAppKit Instance in React

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-dapp-kit

Use the `useDAppKit` hook to get the dApp Kit instance within a React component. Ensure the component is rendered within a `DAppKitProvider`. This example shows how to connect a wallet.

```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>;
}
```

--------------------------------

### Get Current Sui Client Instance

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-current-client

Use the useCurrentClient hook to obtain the Sui client instance. This client can then be used to interact with the blockchain, for example, by fetching account balances. Make sure your component is a descendant of DAppKitProvider.

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

export function MyComponent() {
	const client = useCurrentClient();

	const handleQuery = async () => {
		const balance = await client.getBalance({
			owner: '0x...',
		});
		console.log(balance);
	};

	return <button onClick={handleQuery}>Check Balance</button>;
}
```

--------------------------------

### Get Current Wallet with useCurrentWallet

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-current-wallet

Use the useCurrentWallet hook to retrieve the connected wallet object. If no wallet is connected, it returns null. This example shows how to conditionally render UI based on wallet connection status and display wallet details.

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

export function MyComponent() {
	const wallet = useCurrentWallet();

	if (!wallet) {
		return <div>No wallet connected</div>;
	}

	return (
		<div>
			<p>Wallet: {wallet.name}</p>
			<p>
				Icon: <img src={wallet.icon} alt={wallet.name} />
			</p>
			<p>Accounts: {wallet.accounts.length}</p>
		</div>
	);
}
```

--------------------------------

### Create and Switch Network - TypeScript

Source: https://sdk.mystenlabs.com/dapp-kit/actions/switch-network

Demonstrates how to initialize the dApp Kit with multiple networks and then switch to a different network. Ensure the network you switch to is configured during dApp Kit creation.

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
import { SuiGrpcClient } from '@mysten/sui/grpc';

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

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

// Switch to a different network
dAppKit.switchNetwork('testnet');
```

--------------------------------

### show() Method

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

Documentation for the `show()` method, which programmatically opens the Connect Modal.

```APIDOC
## `show()` Method

### Description
Opens the modal programmatically. This method is asynchronous and returns a Promise that resolves when the modal is ready to be displayed.

### Usage
```javascript
const modal = document.querySelector('mysten-dapp-kit-connect-modal');
await modal?.show();
```
```

--------------------------------

### Create a Sui App with create-dapp

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/create-dapp

Use this command to initiate the scaffolding process for a new Sui application. The CLI will prompt for template and project name selection.

```bash
npm create @mysten/dapp
```

--------------------------------

### Create a Basic DAppKit Instance

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Initialize the DAppKit instance with network configurations and a custom client creation function. This is the foundational step for integrating DAppKit into your Sui application.

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
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] }),
});
```

--------------------------------

### Create Sui App with Specific Template and Name

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/create-dapp

Utilize these flags to bypass interactive prompts and specify the template and project name during dApp creation.

```bash
npm create @mysten/dapp -- -t react-e2e-counter
```

```bash
npm create @mysten/dapp -- -n my-app
```

```bash
npm create @mysten/dapp -- -t react-client-dapp -n my-app
```

--------------------------------

### DAppKitProvider with Custom Configuration

Source: https://sdk.mystenlabs.com/dapp-kit/react/dapp-kit-provider

Illustrates setting up DAppKitProvider with custom network configurations, gRPC client creation, and storage options. Global type registration is necessary for hooks to function correctly.

```tsx
import { createDAppKit, DAppKitProvider } from '@mysten/dapp-kit-react';
import { SuiGrpcClient } from '@mysten/sui/grpc';

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

const dAppKit = createDAppKit({
	networks: ['testnet'],
	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
	autoConnect: true,
	storage: localStorage,
	storageKey: 'myapp_dappkit',
});

// global type registration necessary for the hooks to work correctly
declare module '@mysten/dapp-kit-react' {
	interface Register {
		dAppKit: typeof dAppKit;
	}
}

export function App() {
	return (
		<DAppKitProvider dAppKit={dAppKit}>
			<YourApp />
		</DAppKitProvider>
	);
}
```

--------------------------------

### Get Current Network with useCurrentNetwork

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-current-network

Use the useCurrentNetwork hook to display the current network. This hook must be used within a DAppKitProvider.

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

export function MyComponent() {
	const network = useCurrentNetwork();

	return (
		<div>
			<p>Current network: {network}</p>
		</div>
	);
}
```

--------------------------------

### Set up Sui Testnet Environment

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/create-dapp

Configure your local environment to interact with the Sui Testnet. This involves setting up a new environment alias and switching to it.

```bash
sui client new-env --alias testnet --rpc https://fullnode.testnet.sui.io:443
```

```bash
sui client switch --env testnet
```

--------------------------------

### DAppKit Instance Parameters

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Configuration options for the `createDAppKit` function, including network settings, wallet management, and client creation.

```APIDOC
## Parameters

* **autoConnect** (optional): Enables automatically connecting to the most recently used wallet
  account (default: `true`)
* **networks:** A list of networks supported by the application (for example,
  `['mainnet', 'testnet']`)
* **defaultNetwork** (optional): Initial network to use (default: first network in the array)
* **createClient:** Creates a new client instance for the given network
* **enableBurnerWallet** (optional): Enable development-only burner wallet (default: `false`)
* **storage** (optional): Configures how the most recently connected to wallet account is stored
  (default: `localStorage`, set to `null` to disable)
* **storageKey** (optional): The key to use to store the most recently connected wallet account
  (default: `'mysten-dapp-kit:selected-wallet-and-address'`)
* **walletInitializers** (optional): A list of wallet initializers used for registering additional
  wallet standard wallets.
* **slushWalletConfig** (optional): Configuration for Slush wallet (set to `null` to disable the
  wallet)
```

--------------------------------

### Basic Connect Button Usage (Vanilla JS)

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-button

Integrate the connect button in a vanilla JavaScript application. Ensure the dApp Kit instance is assigned to the component's `instance` property.

```html
<mysten-dapp-kit-connect-button></mysten-dapp-kit-connect-button>

<script>
	const button = document.querySelector('mysten-dapp-kit-connect-button');
	   button!.instance = dAppKit;
</script>
```

--------------------------------

### Create dApp Kit Instance

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/react

Configure and create a dApp Kit instance, specifying networks and a gRPC client. Ensure to register types for hook inference.

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

--------------------------------

### Get Current Account with useCurrentAccount

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-current-account

Use this hook to access the currently selected wallet account. Ensure it's used within a `DAppKitProvider` context. If no account is selected, it returns null.

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

export function MyComponent() {
	const account = useCurrentAccount();

	if (!account) {
		return <div>No account selected</div>;
	}

	return (
		<div>
			<p>Address: {account.address}</p>
			<p>Label: {account.label}</p>
		</div>
	);
}
```

--------------------------------

### Basic Usage: Vanilla JavaScript

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-modal

Integrate the connect modal into a vanilla JavaScript application. Ensure the dApp Kit instance is assigned to the modal's `instance` property and use a custom trigger element to show the modal.

```html
<button id="custom-trigger">Open Wallet Selector</button>
<mysten-dapp-kit-connect-modal></mysten-dapp-kit-connect-modal>

<script>
	import { createDAppKit } from '@mysten/dapp-kit-core';
	import { SuiGrpcClient } from '@mysten/sui/grpc';

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

	const dAppKit = createDAppKit({
	    enableBurnerWallet: import.meta.env.DEV,
	    networks: ['mainnet', 'testnet'],
	    defaultNetwork: 'testnet',
	    createClient(network) {
	        return new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] });
	    },
	});

	const modal = document.querySelector('mysten-dapp-kit-connect-modal');
	modal!.instance = dAppKit;

	const trigger = document.getElementById('custom-trigger');
	trigger?.addEventListener('click', () => {
	    modal!.show();
	});
</script>
```

--------------------------------

### Basic HTML Structure for Vanilla JavaScript

Source: https://sdk.mystenlabs.com/dapp-kit/theming

Include the stylesheet and the custom element in your HTML file to integrate the dApp kit.

```html
<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="theme.css" />
	</head>
	<body>
		<mysten-dapp-kit-connect-button></mysten-dapp-kit-connect-button>
	</body>
</html>
```

--------------------------------

### Use Dynamic Import for Client Components in Pages

Source: https://sdk.mystenlabs.com/dapp-kit/getting-started/next-js

Dynamically import client-side components in Next.js pages with `ssr: false` to prevent server-side rendering issues. This example shows how to import the `DAppKitClientProvider` and `ConnectButton`.

```tsx
// app/page.tsx
import dynamic from 'next/dynamic';

const DAppKitClientProvider = dynamic(
	() => import('./DAppKitClientProvider').then((mod) => mod.DAppKitClientProvider),
	{ ssr: false },
);

const ConnectButton = dynamic(
	() => import('./DAppKitClientProvider').then((mod) => mod.ConnectButton),
	{ ssr: false, loading: () => <button disabled>Loading...</button> },
);

export default function Home() {
	return (
		<DAppKitClientProvider>
			<main>
				<h1>My Sui dApp</h1>
				<ConnectButton />
			</main>
		</DAppKitClientProvider>
	);
}
```

--------------------------------

### Switch Network Usage

Source: https://sdk.mystenlabs.com/dapp-kit/actions/switch-network

Demonstrates how to switch the active network for the dApp Kit instance.

```APIDOC
## switchNetwork

### Description
Switches the active network for the dApp Kit instance.

### Method
`switchNetwork(network: TNetworks[number]): void`

### Parameters
#### Path Parameters
- **network** (TNetworks[number]): Required - The network to switch to. Must be one of the networks configured when creating the dApp Kit instance.

### Return value
Returns `void`. The action completes synchronously and updates the network state immediately.
```

--------------------------------

### Connect Wallet and Log Accounts

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Connect to a specified wallet and account, then log the connected accounts to the console. This function requires a wallet and account object as input.

```typescript
import type { UiWallet, UiWalletAccount } from '@mysten/dapp-kit-core';
import { dAppKit } from './dapp-kit.ts';

export async function connectWalletAndLog({
	wallet,
	account,
}: {
	wallet: UiWallet;
	account: UiWalletAccount;
}) {
	const result = await dAppKit.connectWallet({
		wallet,
		account,
	});
	console.log('Connected accounts:', result.accounts);
}
```

--------------------------------

### Connect to a specific wallet

Source: https://sdk.mystenlabs.com/dapp-kit/actions/connect-wallet

Use this action to prompt a wallet to connect and authorize accounts for your application. It requires a `UiWallet` instance and optionally accepts a specific `UiWalletAccount` to select.

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

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

// Connect to a specific wallet
const result = await dAppKit.connectWallet({
	wallet: myWallet, // UiWallet instance
	account: myAccount, // Optional: specific account to select
});

console.log('Connected accounts:', result.accounts);
```

--------------------------------

### DAppKit Instance Return Value

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

The DAppKit instance provides actions for wallet and network management, and properties for accessing network and client information.

```APIDOC
## 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;
}
```
```

--------------------------------

### Custom Connect Button Text (Vanilla JS)

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-button

Customize the button text when no wallet is connected by using the default slot.

```html
<mysten-dapp-kit-connect-button>
	<span>Sign In</span>
</mysten-dapp-kit-connect-button>
```

--------------------------------

### Integrate Custom Wallets with Dapp Kit

Source: https://sdk.mystenlabs.com/dapp-kit/dapp-kit-instance

Use the `walletInitializers` option in `createDAppKit` to register custom wallet implementations. Ensure your custom wallet class is correctly imported and instantiated.

```typescript
import { createDAppKit } from '@mysten/dapp-kit-core';
import { SuiGrpcClient } from '@mysten/sui/grpc';
import { getWallets } from '@mysten/wallet-standard';
import { CustomWallet } from './custom-wallet.js'; // import your custom wallet class

export const dAppKit = createDAppKit({
	networks: ['mainnet'],
	createClient: () =>
		new SuiGrpcClient({ network: 'mainnet', baseUrl: 'https://fullnode.mainnet.sui.io:443' }),
	walletInitializers: [
		{
			id: 'Custom Wallets',
			initialize() {
				const wallets = [new CustomWallet()];
				const walletsApi = getWallets();
				return { unregister: walletsApi.register(...wallets) };
			},
		},
	],
});
```

--------------------------------

### Switch Account with dApp Kit

Source: https://sdk.mystenlabs.com/dapp-kit/actions/switch-account

Use this snippet to switch to a different account within the connected wallet. Ensure `anotherAccount` is a `UiWalletAccount` belonging to the currently connected wallet. The action completes synchronously.

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

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

// Switch to a different account
dAppKit.switchAccount({
	account: anotherAccount, // UiWalletAccount from the connected wallet
});
```

--------------------------------

### Basic Connect Button Usage (Vue)

Source: https://sdk.mystenlabs.com/dapp-kit/web-components/connect-button

Use the connect button in a Vue application by importing the dAppKit instance and passing it as a prop.

```vue
<script setup>
import { dAppKit } from './dapp-kit.ts';
</script>

<template>
	<mysten-dapp-kit-connect-button :instance="dAppKit" />
</template>
```

--------------------------------

### Basic Connect Modal Usage

Source: https://sdk.mystenlabs.com/dapp-kit/react/components/connect-modal

Demonstrates how to use the ConnectModal component to control its visibility with a state variable. The modal is opened by clicking a button.

```tsx
import { useState } from 'react';
import { ConnectModal } from '@mysten/dapp-kit-react/ui';

export function App() {
	const [open, setOpen] = useState(false);
	return (
		<>
			<button onClick={() => setOpen(true)}>Connect Wallet</button>
			<ConnectModal open={open} />
		</>
	);
}
```

--------------------------------

### dAppKit Actions and Properties

Source: https://sdk.mystenlabs.com/dapp-kit/react/hooks/use-dapp-kit

Lists the available actions and properties exposed by the dAppKit instance returned by the useDAppKit hook.

```APIDOC
## dAppKit Instance Interface

### Description
The `useDAppKit` hook returns an instance with various actions to perform operations and properties to access state and configuration.

### Actions
- **connectWallet**: `(args: { wallet: UiWallet; account?: UiWalletAccount }) => Promise<{ accounts: UiWalletAccount[]; }>` - Connects a specified wallet.
- **disconnectWallet**: `() => Promise<void>` - Disconnects the currently connected wallet.
- **switchAccount**: `(args: { account: UiWalletAccount }) => Promise<void>` - Switches to a different account within the connected wallet.
- **switchNetwork**: `(network: string) => void` - Switches the network.
- **signTransaction**: `(args: { transaction: Transaction | string; signal?: AbortSignal }) => Promise<SignedTransaction>` - Signs a transaction without executing it.
- **signAndExecuteTransaction**: `(args: { transaction: Transaction | string; signal?: AbortSignal }) => Promise<TransactionResult>` - Signs and executes a transaction.
- **signPersonalMessage**: `(args: { message: Uint8Array }) => Promise<SignedPersonalMessage>` - Signs a personal message.

### Properties
- **networks**: `string[]` - List of available networks.
- **stores**: Object containing reactive stores:
  - **$wallets**: `DAppKitStores['$compatibleWallets']` - Store for compatible wallets.
  - **$connection**: `DAppKitStores['$connection']` - Store for connection status.
  - **$currentNetwork**: `ReadableAtom<TNetworks[number]>` - Atom for the current network.
  - **$currentClient**: `ReadableAtom<Client>` - Atom for the current client.
- **getClient**: `(network?: string) => Client` - Function to get a dApp Kit client for a specific network.
```

--------------------------------

### Connection Store Details

Source: https://sdk.mystenlabs.com/dapp-kit/state

Retrieve the current connection state, which includes wallet information, account details, connection status flags, and supported intents.

```typescript
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
```

```typescript
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);
}
```
Tokens:
Raw