@mysten/docs 0.1.1

package/dist/dapp-kit/getting-started/react.md

@@ -0,0 +1,172 @@
+# React
+
+> Set up dApp Kit in a React application
+
+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:
+
+```sh npm2yarn
+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](/dapp-kit/getting-started/create-dapp) for more details.
+
+---
+
+## Manual Installation
+
+```sh npm2yarn
+npm i @mysten/dapp-kit-react @mysten/sui
+```
+
+## Setup
+
+### 1. Create a dApp Kit Instance
+
+Create a file to configure your dApp Kit instance:
+
+```tsx
+// dapp-kit.ts
+
+const GRPC_URLS = {
+	testnet: 'https://fullnode.testnet.sui.io:443',
+};
+
+	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`:
+
+```tsx
+// App.tsx
+
+	return (
+		<DAppKitProvider dAppKit={dAppKit}>
+			<div>
+				<h1>My Sui dApp</h1>
+				<ConnectButton />
+				<WalletStatus />
+			</div>
+		</DAppKitProvider>
+	);
+}
+```
+
+### 3. Display Connection Status
+
+Use hooks to access wallet state:
+
+```tsx
+
+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:
+
+```tsx
+
+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](/dapp-kit/react/hooks/use-dapp-kit)                   | Access the dApp Kit instance and actions |
+| [useWalletConnection](/dapp-kit/react/hooks/use-wallet-connection) | Full connection state with status flags  |
+| [useCurrentAccount](/dapp-kit/react/hooks/use-current-account)     | Currently selected account               |
+| [useCurrentWallet](/dapp-kit/react/hooks/use-current-wallet)       | Currently connected wallet               |
+| [useCurrentNetwork](/dapp-kit/react/hooks/use-current-network)     | Current network                          |
+| [useCurrentClient](/dapp-kit/react/hooks/use-current-client)       | SuiClient for current network            |
+| [useWallets](/dapp-kit/react/hooks/use-wallets)                    | List of available wallets                |
+
+## Components
+
+| Component                                                  | Description                       |
+| ---------------------------------------------------------- | --------------------------------- |
+| [ConnectButton](/dapp-kit/react/components/connect-button) | Complete wallet connection UI     |
+| [ConnectModal](/dapp-kit/react/components/connect-modal)   | Standalone wallet selection modal |
+| [DAppKitProvider](/dapp-kit/react/dapp-kit-provider)       | Context provider for hooks        |
+
+## Example Application
+
+See the complete
+[React example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/react/simple)
+on GitHub.
+
+## Next Steps
+
+- [DAppKitProvider](/dapp-kit/react/dapp-kit-provider) - Provider configuration
+- [Hooks Reference](/dapp-kit/react/hooks) - All available hooks
+- [Components](/dapp-kit/react/components) - UI components
+- [Theming](/dapp-kit/theming) - Customize appearance

package/dist/dapp-kit/getting-started/vue.md

@@ -0,0 +1,193 @@
+# Vue
+
+> Set up dApp Kit in a Vue application
+
+This guide walks you through integrating dApp Kit into a Vue application using Web Components and
+direct store access.
+
+## Installation
+
+```sh npm2yarn
+npm i @mysten/dapp-kit-core @mysten/sui @nanostores/vue
+```
+
+## Setup
+
+### 1. Create a dApp Kit Instance
+
+```ts
+// src/dapp-kit.ts
+
+const GRPC_URLS = {
+	testnet: 'https://fullnode.testnet.sui.io:443',
+};
+
+	networks: ['testnet'],
+	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
+});
+```
+
+### 2. Register Web Components
+
+Import the web components in your app entry point:
+
+```ts
+// src/main.ts
+
+createApp(App).mount('#app');
+```
+
+### 3. Use the Connect Button
+
+```vue
+<script setup lang="ts">
+
+</script>
+
+<template>
+	<div>
+		<h1>My Sui dApp</h1>
+		<mysten-dapp-kit-connect-button :instance="dAppKit" />
+	</div>
+</template>
+```
+
+### 4. Access Connection State
+
+Use `@nanostores/vue` for reactive state:
+
+```vue
+<script setup lang="ts">
+
+const connection = useStore(dAppKit.stores.$connection);
+const network = useStore(dAppKit.stores.$currentNetwork);
+</script>
+
+<template>
+	<div>
+		<mysten-dapp-kit-connect-button :instance="dAppKit" />
+
+		<div v-if="connection.account">
+			<p>Wallet: {{ connection.wallet?.name }}</p>
+			<p>Address: {{ connection.account.address }}</p>
+			<p>Network: {{ network }}</p>
+		</div>
+		<p v-else>Connect your wallet to get started</p>
+	</div>
+</template>
+```
+
+### 5. Execute Transactions
+
+```vue
+<script setup lang="ts">
+
+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>
+```
+
+## Complete Example
+
+```vue
+<script setup lang="ts">
+
+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>
+```
+
+## Web Components
+
+Vue works with dApp Kit's Web Components through property binding:
+
+| Component      | Usage                                                                  |
+| -------------- | ---------------------------------------------------------------------- |
+| Connect Button | `<mysten-dapp-kit-connect-button :instance="dAppKit" />`               |
+| Connect Modal  | `<mysten-dapp-kit-connect-modal :instance="dAppKit" :open="isOpen" />` |
+
+See [Web Components](/dapp-kit/web-components/connect-button) for full documentation.
+
+## Available Stores
+
+Access these stores via `dAppKit.stores`:
+
+| Store             | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| `$connection`     | Connection state with wallet, account, and status |
+| `$currentNetwork` | Current network string                            |
+| `$currentClient`  | SuiClient for current network                     |
+| `$wallets`        | List of available wallets                         |
+
+See [State Management](/dapp-kit/state) for full documentation.
+
+## Example Application
+
+See the complete
+[Vue example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/vue/simple)
+on GitHub.
+
+## Next Steps
+
+- [Web Components](/dapp-kit/web-components/connect-button) - Component documentation
+- [State Management](/dapp-kit/state) - Store details
+- [Actions](/dapp-kit/actions/connect-wallet) - All available actions
+- [Theming](/dapp-kit/theming) - Customize appearance

package/dist/dapp-kit/index.md

@@ -0,0 +1,70 @@
+# Sui dApp Kit
+
+> Build Sui dApps with framework-agnostic core and React bindings
+
+> **Note:** **Migrating from @mysten/dapp-kit?** If you're currently using the legacy `@mysten/dapp-kit`
+> package, check out our [Migration Guide](/sui/migrations/sui-2.0/dapp-kit) to upgrade to the new
+> packages with gRPC and GraphQL support.
+
+The Sui dApp Kit provides tools and components for building decentralized applications on the Sui
+network. The SDK consists of two packages that work together:
+
+## Packages
+
+### @mysten/dapp-kit-core
+
+Framework-agnostic core that works with vanilla JS, React, Vue, or any framework:
+
+- Action-based API for direct wallet operations
+- Web Components for universal UI elements
+- Automatic state management with nanostores
+- Smaller bundle size and improved performance
+
+### @mysten/dapp-kit-react
+
+React bindings for the core package:
+
+- React hooks for state and actions
+- React component wrappers for Web Components
+- Seamless integration with React applications
+
+## Install
+
+Choose the installation method based on your framework:
+
+### For React Applications
+
+```sh npm2yarn
+npm i @mysten/dapp-kit-react @mysten/sui
+```
+
+### Vanilla JavaScript and other frameworks
+
+```sh npm2yarn
+npm i @mysten/dapp-kit-core @mysten/sui
+```
+
+## Getting Started
+
+Check the framework-specific guides:
+
+- [React](/dapp-kit/getting-started/react)
+- [Next.js](/dapp-kit/getting-started/next-js)
+- [Vue](/dapp-kit/getting-started/vue)
+
+## Legacy Package
+
+### @mysten/dapp-kit (Legacy)
+
+See the [Legacy dApp Kit documentation](/dapp-kit/legacy).
+
+The original React-focused version of the dApp Kit. This package provides:
+
+- React hooks for wallet connection and blockchain queries
+- Pre-built UI components with Radix UI
+- Integration with TanStack React Query
+- Comprehensive wallet state management
+
+> **Warning:** **Deprecated JSON RPC Only**: This legacy package only works with the deprecated JSON RPC API and
+> will not be updated to support gRPC or GraphQL. All new projects should use
+> `@mysten/dapp-kit-core` and `@mysten/dapp-kit-react`.

package/dist/dapp-kit/llms-index.md

@@ -0,0 +1,26 @@
+# dApp Kit
+> Build Sui dApps with @mysten/dapp-kit-core and @mysten/dapp-kit-react
+
+- [Sui dApp Kit](./index.md): Build Sui dApps with framework-agnostic core and React bindings
+- [@mysten/create-dapp](./getting-started/create-dapp.md): Create a Sui dApp with one command
+- [React](./getting-started/react.md): Set up dApp Kit in a React application
+- [Next.js](./getting-started/next-js.md): Set up dApp Kit in a Next.js application
+- [Vue](./getting-started/vue.md): Set up dApp Kit in a Vue application
+- [DApp Kit Instance](./dapp-kit-instance.md): Create and configure a DAppKit instance for wallet and client management
+- [State](./state.md): Access and subscribe to wallet connection state in dApp Kit
+- [Connect Wallet](./actions/connect-wallet.md): Programmatically connect to a Sui wallet
+- [Disconnect Wallet](./actions/disconnect-wallet.md): Programmatically disconnect from a Sui wallet
+- [Sign and Execute Transaction](./actions/sign-and-execute-transaction.md): Sign and execute a transaction using the connected wallet
+- [Sign Personal Message](./actions/sign-personal-message.md): Sign an arbitrary message with the connected wallet
+- [Sign Transaction](./actions/sign-transaction.md): Sign a transaction without executing it
+- [Switch Account](./actions/switch-account.md): Switch the active account in the connected wallet
+- [Switch Network](./actions/switch-network.md): Switch the active network for the dApp Kit instance
+- [DAppKitProvider](./react/dapp-kit-provider.md): React context provider for dApp Kit configuration
+- [React Hooks](./react/hooks/index.md): React hooks for accessing dApp Kit state and actions
+- [useDAppKit](./react/hooks/use-dapp-kit.md): React hook to access the full dApp Kit instance
+- [React Components](./react/components/index.md): Pre-built React UI components for wallet interaction
+- [Connect Button](./react/components/connect-button.md): React button component for wallet connection
+- [Connect Modal](./react/components/connect-modal.md): React modal component for wallet selection
+- [Connect Button](./web-components/connect-button.md): Framework-agnostic web component for wallet connection
+- [Connect Modal](./web-components/connect-modal.md): Framework-agnostic web component for wallet selection
+- [Theming](./theming.md): Customize the appearance of dApp Kit UI components

package/dist/dapp-kit/react/components/connect-button.md

@@ -0,0 +1,42 @@
+# Connect Button
+
+> React button component for wallet connection
+
+## Usage
+
+```tsx
+<ConnectButton
+	modalOptions={{
+		filterFn: (wallet) => wallet.name !== 'Excluded Wallet',
+		sortFn: (a, b) => a.name.localeCompare(b.name),
+	}}
+/>
+```
+
+> Auto-connect is enabled by default and will attempt to restore the previous wallet connection on
+> page reload. This provides a seamless user experience but can be
+> [disabled](/dapp-kit/dapp-kit-instance#disabling-auto-connect) if needed.
+
+## Props
+
+- **instance** (optional) - dApp Kit instance. If not provided, uses the instance from context.
+- **modalOptions** (optional) - Configuration options for the connect modal
+  - **filterFn** (optional) - Function to filter available wallets
+    - Type: `(wallet: UiWallet, index: number, array: UiWallet[]) => boolean`
+  - **sortFn** (optional) - Function to sort available wallets
+    - Type: `(a: UiWallet, b: UiWallet) => number`
+
+## Custom Button Text
+
+Use the slot to customize the button content when disconnected:
+
+```tsx
+<ConnectButton>
+	<span>🔗 Link Wallet</span>
+</ConnectButton>
+```
+
+## Server-Side Rendering (SSR)
+
+The `<ConnectButton />` component can be only client-side rendered, as wallets are detected in the
+browser. For Next.js guide see [here](/dapp-kit/getting-started/next-js).

package/dist/dapp-kit/react/components/connect-modal.md

@@ -0,0 +1,51 @@
+# Connect Modal
+
+> React modal component for wallet selection
+
+## Usage
+
+```tsx
+
+	const [open, setOpen] = useState(false);
+	return (
+		<>
+			<button onClick={() => setOpen(true)}>Connect Wallet</button>
+			<ConnectModal open={open} />
+		</>
+	);
+}
+```
+
+## Props
+
+- **open** (optional) - Boolean to control modal visibility. If not provided, the modal can be
+  controlled by calling `show()` and `close()` methods directly on the component ref.
+- **instance** (optional) - dApp Kit instance. If not provided, uses the instance from context
+- **filterFn** (optional) - Function to filter available wallets
+  - Type: `(wallet: UiWallet, index: number, array: UiWallet[]) => boolean`
+- **sortFn** (optional) - Function to sort available wallets
+  - Type: `(a: UiWallet, b: UiWallet) => number`
+
+### Example
+
+```tsx
+<ConnectModal
+	open={open}
+	filterFn={(wallet) => wallet.name !== 'ExcludedWallet'}
+	sortFn={(a, b) => a.name.localeCompare(b.name)}
+/>
+```
+
+## Modal States
+
+The modal displays different views based on connection status:
+
+- **Wallet Selection**: Shows available wallets to choose from
+- **Connecting**: Displays loading state while connecting to selected wallet
+- **Error**: Shows error message with retry option when connection fails
+- **Request Cancelled**: Appears when user cancels the wallet connection request
+
+## Server-Side Rendering (SSR)
+
+The `<ConnectModal />` component can be only client-side rendered, as wallets are detected in the
+browser. For Next.js guide see [here](/dapp-kit/getting-started/next-js).

package/dist/dapp-kit/react/components/index.md

@@ -0,0 +1,13 @@
+# React Components
+
+> Pre-built React UI components for wallet interaction
+
+The `@mysten/dapp-kit-react` package provides pre-built React components for common wallet
+interactions.
+
+## Available Components
+
+- [`ConnectButton`](/dapp-kit/react/components/connect-button) - A button that opens the wallet
+  connection modal and displays account info when connected
+- [`ConnectModal`](/dapp-kit/react/components/connect-modal) - A modal dialog for selecting and
+  connecting to a wallet

package/dist/dapp-kit/react/dapp-kit-provider.md

@@ -0,0 +1,86 @@
+# DAppKitProvider
+
+> React context provider for dApp Kit configuration
+
+The `DAppKitProvider` is a React context provider that makes your dApp Kit instance available
+throughout your React application. It must wrap any components that use dApp Kit hooks.
+
+## Basic Usage
+
+```tsx
+
+	return (
+		<DAppKitProvider dAppKit={dAppKit}>
+			<YourApp />
+		</DAppKitProvider>
+	);
+}
+```
+
+## Props
+
+- **dAppKit**: The dApp Kit instance created with `createDAppKit`
+
+## Provider Setup Patterns
+
+### With Custom Configuration
+
+```tsx
+
+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;
+	}
+}
+
+	return (
+		<DAppKitProvider dAppKit={dAppKit}>
+			<YourApp />
+		</DAppKitProvider>
+	);
+}
+```
+
+## Using Hooks Inside the Provider
+
+Once your app is wrapped with `DAppKitProvider`, you can use any dApp Kit hooks in child components:
+
+```tsx
+
+	const dAppKit = useDAppKit();
+	const account = useCurrentAccount();
+	const network = useCurrentNetwork();
+	const handleConnect = async () => {
+		await dAppKit.connectWallet({ wallet });
+	};
+	return (
+		<div>
+			<p>Network: {network}</p>
+			<p>Account: {account?.address}</p>
+			<button onClick={handleConnect}>Connect</button>
+		</div>
+	);
+}
+```
+
+> All dApp Kit hooks must be used within components that are descendants of `DAppKitProvider`. Using
+> them outside will result in an error.
+
+## Server-Side Rendering (SSR)
+
+While `DAppKitProvider` itself is SSR-safe, components that interact with wallets should be
+client-side rendered, as wallets are detected in the browser. For Next.js guide see
+[here](/dapp-kit/getting-started/next-js).

package/dist/dapp-kit/react/hooks/index.md

@@ -0,0 +1,25 @@
+# React Hooks
+
+> React hooks for accessing dApp Kit state and actions
+
+The `@mysten/dapp-kit-react` package provides a set of hooks for interacting with wallets and the
+Sui blockchain in React applications.
+
+> **Warning:** All dApp Kit hooks must be used within components that are descendants of
+> [DAppKitProvider](/dapp-kit/react/dapp-kit-provider). Using them outside will result in an error.
+
+## Available Hooks
+
+- [`useDAppKit`](/dapp-kit/react/hooks/use-dapp-kit) - Access the dApp Kit instance for calling
+  actions directly
+- [`useCurrentAccount`](/dapp-kit/react/hooks/use-current-account) - Get the currently selected
+  account
+- [`useCurrentClient`](/dapp-kit/react/hooks/use-current-client) - Get the blockchain client for the
+  current network
+- [`useCurrentNetwork`](/dapp-kit/react/hooks/use-current-network) - Get the currently selected
+  network
+- [`useCurrentWallet`](/dapp-kit/react/hooks/use-current-wallet) - Get the currently connected
+  wallet
+- [`useWalletConnection`](/dapp-kit/react/hooks/use-wallet-connection) - Get wallet connection
+  status and actions
+- [`useWallets`](/dapp-kit/react/hooks/use-wallets) - Get all available wallets