@mysten/docs 0.1.1

package/dist/dapp-kit/actions/sign-transaction.md

@@ -0,0 +1,65 @@
+# Sign Transaction
+
+> Sign a transaction without executing it
+
+The `signTransaction` action prompts the connected wallet to sign a transaction without executing
+it. This is useful when you need a signed transaction for later execution or for multi-signature
+scenarios.
+
+## Usage
+
+```typescript
+
+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,
+});
+```
+
+## Parameters
+
+- **`transaction`** - `Transaction | string` - The transaction to sign. Can be either a Transaction
+  instance or base64-encoded bcs bytes for the transaction.
+- **`signal`** (optional) - `AbortSignal` - An abort signal to cancel the signing request.
+
+## Return Value
+
+Returns a `Promise` that resolves to an object containing:
+
+- **`bytes`** - `string` - The signed transaction as a base64-encoded BCS string
+- **`signature`** - `string` - The signature as a base64-encoded string
+
+```typescript
+const result = await dAppKit.signTransaction({ transaction });
+console.log('Signed transaction bytes:', result.bytes);
+console.log('Signature:', result.signature);
+```
+
+## Transaction Building
+
+When passing a Transaction instance, the action automatically:
+
+1. Sets the sender address if not already set
+2. Builds the transaction using the current network's client
+3. Converts it to the appropriate format for the wallet
+
+## Wallet Compatibility
+
+- The action transparently handles both `sui:signTransaction` and `sui:signTransactionBlock`
+  wallet-standard features
+
+```typescript
+// The action automatically detects and uses the appropriate method
+// No special configuration needed
+const result = await dAppKit.signTransaction({
+	transaction: tx,
+});
+```

package/dist/dapp-kit/actions/switch-account.md

@@ -0,0 +1,37 @@
+# Switch Account
+
+> Switch the active account in the connected wallet
+
+The `switchAccount` action changes the currently selected account to a different account from the
+connected wallet.
+
+> **Note:** The "current account" is a dApp Kit concept that tracks which account is active within your
+> application. Changing the active account in the dApp does not affect the wallet itself, and
+> wallets are not notified when the active account changes.
+
+> Account switching is integrated into the [Connect Button](../web-components/connect-button) Web
+> Component. When a wallet is connected with multiple accounts, the button provides an account
+> selector.
+
+## Usage
+
+```typescript
+
+const dAppKit = createDAppKit({
+	/* config */
+});
+
+// Switch to a different account
+dAppKit.switchAccount({
+	account: anotherAccount, // UiWalletAccount from the connected wallet
+});
+```
+
+## Parameters
+
+- **`account`** - `UiWalletAccount` - The account to switch to. Must be an account that belongs to
+  the currently connected wallet.
+
+## Return Value
+
+Returns `void`. The action completes synchronously and updates the connection state immediately.

package/dist/dapp-kit/actions/switch-network.md

@@ -0,0 +1,37 @@
+# Switch Network
+
+> Switch the active network for the dApp Kit instance
+
+The `switchNetwork` action changes the currently selected network that the dApp Kit client is
+configured to use.
+
+> **Note:** Network switching only affects your dApp's client connection. The wallet itself is not affected by
+> this change, and wallets are not notified when the network changes in the dApp.
+
+## Usage
+
+```typescript
+
+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');
+```
+
+## Parameters
+
+- **`network`** - `TNetworks[number]` - 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.

package/dist/dapp-kit/dapp-kit-instance.md

@@ -0,0 +1,162 @@
+# DApp Kit Instance
+
+> Create and configure a DAppKit instance for wallet and client management
+
+The `createDAppKit` function is the foundation of your Sui dApp. It creates an instance that manages
+wallet connections, network configuration, and provides access to the Sui client.
+
+## Creating a dApp Kit Instance
+
+The core of the dApp Kit SDK is the `createDAppKit` function, which creates an instance that manages
+all dApp functionality:
+
+```typescript
+
+const GRPC_URLS = {
+	testnet: 'https://fullnode.testnet.sui.io:443',
+};
+
+	networks: ['testnet'],
+	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
+});
+```
+
+> **Note:** If you use the React bindings, there are two ways to ensure type safety with hooks:
+> 
+> 1. [Register the global dAppKit type](./getting-started/react#1-create-a-dapp-kit-instance) once, and all hooks will be properly typed
+> 2. Pass the dAppKit instance explicitly to each hook: `useWalletConnection({ dAppKit })`
+
+This instance provides:
+
+- Wallet connection management
+- Network switching capabilities
+- Client access for blockchain interactions
+- State stores for reactive updates
+
+## Parameters
+
+- **autoConnect** (optional) - Enables automatically connecting to the most recently used wallet
+  account (default: `true`)
+- **networks** - A list of networks supported by the application (e.g. `['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)
+
+## 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;
+}
+```
+
+Read more about [actions](./actions/connect-wallet) and [stores](./state).
+
+## Basic Usage
+
+```ts
+// dapp-kit.ts
+
+const GRPC_URLS = {
+	testnet: 'https://fullnode.testnet.sui.io:443',
+};
+
+	networks: ['testnet'],
+	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
+});
+```
+
+```ts
+// connect-wallet-and-log.ts
+
+	wallet,
+	account,
+}: {
+	wallet: UiWallet;
+	account: UiWalletAccount;
+}) {
+	const result = await dAppKit.connectWallet({
+		wallet,
+		account,
+	});
+	console.log('Connected accounts:', result.accounts);
+}
+```
+
+> If you use the React bindings, see [Getting Started in React](./getting-started/react) and
+> [DAppKitProvider](./react/dapp-kit-provider).
+
+## Development Configuration
+
+For development environments, enable the burner wallet:
+
+```typescript
+
+	networks: ['localnet'],
+	defaultNetwork: 'localnet',
+	createClient: () => new SuiGrpcClient({ network: 'localnet', baseUrl: 'http://127.0.0.1:9000' }),
+	enableBurnerWallet: true, // Dev-only feature
+});
+```
+
+## Auto-Connect Behavior
+
+By default, dApp Kit automatically reconnects to the previously connected wallet.
+
+### Disabling Auto-Connect
+
+```typescript
+
+	networks: ['mainnet'],
+	createClient: () =>
+		new SuiGrpcClient({ network: 'mainnet', baseUrl: 'https://fullnode.mainnet.sui.io:443' }),
+	autoConnect: false,
+});
+```
+
+## Custom Wallet Integration
+
+Add support for custom wallets using wallet initializers:
+
+```typescript
+
+	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) };
+			},
+		},
+	],
+});
+```

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

@@ -0,0 +1,151 @@
+# @mysten/create-dapp
+
+> Create a Sui dApp with one command
+
+`@mysten/create-dapp` is a CLI tool that scaffolds a complete Sui dApp project with best practices
+built in.
+
+## Quick Start
+
+```sh npm2yarn
+npm create @mysten/dapp
+```
+
+The CLI prompts you to choose a template and project name, then creates a ready-to-run project.
+
+## Templates
+
+### react-client-dapp
+
+A basic React dApp that demonstrates wallet connection and fetching owned objects:
+
+- Wallet connection with `ConnectButton`
+- Display connected wallet address
+- List objects owned by the connected wallet
+- Clean, modern UI with Tailwind CSS
+
+### react-e2e-counter
+
+A complete end-to-end example with Move smart contract integration:
+
+- Move counter contract in `move/counter/`
+- TypeScript bindings generated with `@mysten/codegen`
+- Create, increment, and reset counters
+- MVR (Move Registry) name resolution for package IDs
+- Full transaction signing and execution
+
+## Tech Stack
+
+Both templates include:
+
+- [React](https://react.dev/) - UI framework
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
+- [Vite](https://vitejs.dev/) - Fast build tooling
+- [Tailwind CSS v4](https://tailwindcss.com/) - Utility-first styling
+- [Lucide React](https://lucide.dev/) - Modern icons
+- [`@mysten/dapp-kit-react`](/dapp-kit) - Wallet connection and blockchain interaction
+- [pnpm](https://pnpm.io/) - Package management
+
+The e2e-counter template also includes:
+
+- [`@mysten/codegen`](/codegen) - Generate TypeScript from Move code
+
+## Project Structure
+
+### react-client-dapp
+
+```
+src/
+├── components/ui/     # Reusable UI components (Card)
+├── lib/utils.ts       # Utility functions
+├── App.tsx            # Main application
+├── WalletStatus.tsx   # Wallet connection display
+├── OwnedObjects.tsx   # Object list component
+├── dApp-kit.ts        # dApp Kit configuration
+└── index.css          # Tailwind CSS theme
+```
+
+### react-e2e-counter
+
+```
+src/
+├── components/ui/     # UI components (Button, Card)
+├── contracts/         # Generated TypeScript bindings
+├── lib/utils.ts       # Utility functions
+├── App.tsx            # Main application
+├── Counter.tsx        # Counter display and controls
+├── CreateCounter.tsx  # Counter creation
+├── dApp-kit.ts        # dApp Kit configuration
+├── constants.ts       # Package IDs per network
+└── index.css          # Tailwind CSS theme
+move/
+└── counter/           # Move smart contract
+```
+
+## Using the e2e-counter Template
+
+### 1. Deploy the Move Contract
+
+First, install the [Sui CLI](https://docs.sui.io/build/install) and set up testnet:
+
+```bash
+sui client new-env --alias testnet --rpc https://fullnode.testnet.sui.io:443
+sui client switch --env testnet
+```
+
+Get testnet SUI from the [faucet](https://faucet.sui.io), then publish:
+
+```bash
+cd move
+sui client publish --gas-budget 100000000 counter
+```
+
+### 2. Configure the Package ID
+
+Copy the `packageId` from the publish output to `src/constants.ts`:
+
+```ts
+
+```
+
+### 3. Generate TypeScript Bindings
+
+```bash
+pnpm codegen
+```
+
+This generates type-safe functions in `src/contracts/` for interacting with your Move modules.
+
+### 4. Start Development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Customizing the UI
+
+The templates use [Tailwind CSS v4](https://tailwindcss.com/docs) with
+[shadcn/ui](https://ui.shadcn.com/)-style components. The UI components in `src/components/ui/` can
+be customized or extended.
+
+To add more components, copy them from the
+[shadcn/ui components](https://ui.shadcn.com/docs/components) documentation and adapt them to your
+project.
+
+Theme variables are defined in `src/index.css` using Tailwind's `@theme` directive.
+
+## CLI Options
+
+You can skip prompts with command-line flags:
+
+```bash
+# Create with specific template
+npm create @mysten/dapp -- -t react-e2e-counter
+
+# Create with specific name
+npm create @mysten/dapp -- -n my-app
+
+# Create with both
+npm create @mysten/dapp -- -t react-client-dapp -n my-app
+```

package/dist/dapp-kit/getting-started/next-js.md

@@ -0,0 +1,162 @@
+# Next.js
+
+> Set up dApp Kit in a Next.js application
+
+This guide covers integrating dApp Kit into Next.js applications, including handling server-side
+rendering (SSR).
+
+## Installation
+
+```sh npm2yarn
+npm i @mysten/dapp-kit-react @mysten/sui
+```
+
+## Setup
+
+### 1. Create a dApp Kit Instance
+
+```ts
+// app/dapp-kit.ts
+
+const GRPC_URLS = {
+	testnet: 'https://fullnode.testnet.sui.io:443',
+} as const;
+
+	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. Create a Client-Only Wrapper
+
+Wallet detection only works in the browser, so dApp Kit components must be client-side rendered:
+
+```tsx
+// app/DAppKitClientProvider.tsx
+'use client';
+
+	return <DAppKitProvider dAppKit={dAppKit}>{children}</DAppKitProvider>;
+}
+
+```
+
+### 3. Use Dynamic Import in Pages
+
+Use Next.js dynamic imports with `ssr: false` to prevent server-side rendering:
+
+```tsx
+// app/page.tsx
+
+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> },
+);
+
+	return (
+		<DAppKitClientProvider>
+			<main>
+				<h1>My Sui dApp</h1>
+				<ConnectButton />
+			</main>
+		</DAppKitClientProvider>
+	);
+}
+```
+
+## Alternative: Single Client Component
+
+For simpler apps, create a single client component:
+
+```tsx
+// app/WalletApp.tsx
+'use client';
+
+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>
+	);
+}
+
+	return (
+		<DAppKitProvider dAppKit={dAppKit}>
+			<ConnectButton />
+			<WalletStatus />
+		</DAppKitProvider>
+	);
+}
+```
+
+```tsx
+// app/page.tsx
+
+const WalletApp = dynamic(() => import('./WalletApp'), {
+	ssr: false,
+	loading: () => <p>Loading wallet...</p>,
+});
+
+	return (
+		<main>
+			<h1>My Sui dApp</h1>
+			<WalletApp />
+		</main>
+	);
+}
+```
+
+## Key Considerations
+
+### Why SSR: false?
+
+Wallets are detected via the browser's `window` object and the Wallet Standard API. This detection
+cannot happen on the server, so components that interact with wallets must be client-side only.
+
+### Hydration Errors
+
+If you see hydration errors, ensure all dApp Kit components are wrapped with `ssr: false` dynamic
+imports or are inside a `'use client'` component that's dynamically imported.
+
+## Example Application
+
+See the complete
+[Next.js example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/next-js/simple)
+on GitHub.
+
+## Next Steps
+
+- [React Hooks](/dapp-kit/react/hooks) - All available hooks
+- [React Components](/dapp-kit/react/components) - UI components
+- [Theming](/dapp-kit/theming) - Customize appearance