@mysten/dapp-kit-react 2.0.1 → 2.0.3

package/docs/react/hooks/use-current-network.md

@@ -1,11 +1,11 @@
 # useCurrentNetwork
 
-> React hook to get the current network
+> React hook to get the currently selected Sui network in dApp Kit.
 
 The `useCurrentNetwork` hook provides access to the currently selected network.
 
 > **Warning:** 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.
+> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
 
 ## Usage
 
@@ -21,8 +21,8 @@ The `useCurrentNetwork` hook provides access to the currently selected network.
 }
 ```
 
-## Return Value
+## Return value
 
 ```tsx
 string;
-```
+```

package/docs/react/hooks/use-current-wallet.md

@@ -1,11 +1,11 @@
 # useCurrentWallet
 
-> React hook to get the current wallet connection
+> React hook to get the currently connected wallet in a Sui dApp.
 
 The `useCurrentWallet` hook provides access to the currently connected wallet.
 
 > **Warning:** 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.
+> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
 
 ## Usage
 
@@ -29,8 +29,8 @@ The `useCurrentWallet` hook provides access to the currently connected wallet.
 }
 ```
 
-## Return Value
+## Return value
 
 ```tsx
 UiWallet | null;
-```
+```

package/docs/react/hooks/use-dapp-kit.md

@@ -1,12 +1,12 @@
 # useDAppKit
 
-> React hook to access the full dApp Kit instance
+> React hook to access the full dApp Kit instance for calling actions directly.
 
 The `useDAppKit` hook provides direct access to the dApp Kit instance within React components,
 enabling you to call actions and access the underlying functionality.
 
 > **Warning:** 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.
+> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
 
 ## Usage
 
@@ -27,7 +27,7 @@ enabling you to call actions and access the underlying functionality.
 }
 ```
 
-## Return Value
+## Return value
 
 ```ts
 {
@@ -54,7 +54,7 @@ enabling you to call actions and access the underlying functionality.
 
 ## Examples
 
-### Transaction Execution
+### Transaction execution
 
 ```tsx
 
@@ -83,7 +83,7 @@ enabling you to call actions and access the underlying functionality.
 }
 ```
 
-### Subscribing to State Changes
+### Subscribing to state changes
 
 ```tsx
 
@@ -97,4 +97,4 @@ enabling you to call actions and access the underlying functionality.
 	}, [dAppKit]);
 	return null;
 }
-```
+```

package/docs/react/hooks/use-wallet-connection.md

@@ -1,12 +1,12 @@
 # useWalletConnection
 
-> React hook to manage wallet connection and disconnection
+> React hook to manage wallet connection status and information in a Sui dApp.
 
 The `useWalletConnection` hook provides access to the current wallet connection status and
 information.
 
 > **Warning:** 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.
+> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
 
 ## Usage
 
@@ -32,7 +32,7 @@ information.
 }
 ```
 
-## Return Value
+## Return value
 
 ```tsx
 {
@@ -45,4 +45,4 @@ information.
 	isReconnecting: boolean;
 	isDisconnected: boolean;
 }
-```
+```

package/docs/react/hooks/use-wallets.md

@@ -1,11 +1,11 @@
 # useWallets
 
-> React hook to list available wallets
+> React hook to list all available Sui wallets detected by dApp Kit.
 
 The `useWallets` hook provides access to all available wallets.
 
 > **Warning:** 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.
+> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
 
 ## Usage
 
@@ -26,8 +26,8 @@ The `useWallets` hook provides access to all available wallets.
 }
 ```
 
-## Return Value
+## Return value
 
 ```tsx
 UiWallet[]
-```
+```

package/docs/state.md

@@ -1,25 +1,26 @@
 # State
 
-> Access and subscribe to wallet connection state in dApp Kit
+> Access and subscribe to wallet connection state in dApp Kit.
 
 The Sui dApp Kit SDK uses [nanostores](https://github.com/nanostores/nanostores) for state
 management, providing a lightweight, framework-agnostic solution that works across React, Vue,
 Vanilla JavaScript, and other frameworks.
 
-## Available Stores
+## Available stores
 
 The dApp Kit exposes four reactive stores that you can subscribe to:
 
-- **`$connection`** - Current wallet connection state
-- **`$currentNetwork`** - Currently selected network
-- **`$currentClient`** - Client instance for the current network
-- **`$wallets`** - List of available wallets
+- **`$connection`:** Current wallet connection state
+- **`$currentNetwork`:** Currently selected network
+- **`$currentClient`:** Client instance for the current network
+- **`$wallets`:** List of available wallets
 
-## Accessing Stores
+## Accessing stores
 
 All stores are available through the `dAppKit.stores` property:
 
 ```typescript
+
 const dAppKit = createDAppKit({
 	/* config */
 });
@@ -31,7 +32,7 @@ const client = dAppKit.stores.$currentClient.get();
 const wallets = dAppKit.stores.$wallets.get();
 ```
 
-## Subscribing to State Changes
+## Subscribing to state changes
 
 Subscribe to any store to react to state changes:
 
@@ -50,9 +51,9 @@ const unsubscribe = dAppKit.stores.$connection.subscribe((connection) => {
 unsubscribe();
 ```
 
-## Store Details
+## Store details
 
-### Connection Store (`$connection`)
+### Connection store (`$connection`)
 
 Contains the current wallet connection state with status flags:
 
@@ -82,7 +83,7 @@ if (connection.isConnected && connection.wallet && connection.account) {
 }
 ```
 
-### Current Network Store (`$currentNetwork`)
+### Current network store (`$currentNetwork`)
 
 Contains the currently selected network as a string:
 
@@ -95,9 +96,9 @@ dAppKit.stores.$currentNetwork.subscribe((network) => {
 });
 ```
 
-Note: This store is read-only. Use `dAppKit.switchNetwork()` to change networks.
+This store is read-only. Use `dAppKit.switchNetwork()` to change networks.
 
-### Current Client Store (`$currentClient`)
+### Current client store (`$currentClient`)
 
 Contains the SuiClient instance for the current network:
 
@@ -110,9 +111,9 @@ const balance = await client.getBalance({
 });
 ```
 
-Note: This store automatically updates when the network changes.
+This store automatically updates when the network changes.
 
-### Wallets Store (`$wallets`)
+### Wallets store (`$wallets`)
 
 Contains the list of available wallets:
 
@@ -125,7 +126,7 @@ wallets.forEach((wallet) => {
 });
 ```
 
-## Subscribing to State Changes
+## Subscribing to state changes
 
 You can subscribe directly to stores:
 
@@ -165,4 +166,4 @@ const networks = dAppKit.networks; // ['mainnet', 'testnet', ...]
 // Get client for specific network
 const mainnetClient = dAppKit.getClient('mainnet');
 const currentClient = dAppKit.getClient(); // Current network's client
-```
+```

package/docs/theming.md

@@ -1,57 +1,57 @@
 # Theming
 
-> Customize the appearance of dApp Kit UI components
+> Customize the appearance of dApp Kit UI components.
 
 The dApp Kit web components use a theming system compatible with
 [shadcn/ui](https://ui.shadcn.com/docs/theming). Components are customized using CSS custom
 properties (CSS variables), allowing you to match them to your application's design system.
 
-> **Note:** **shadcn/ui Compatibility**: The dApp Kit uses the same CSS custom property naming
-> convention as shadcn/ui. If your application already uses shadcn/ui themes, the dApp Kit
-> components will automatically inherit your theme. You can also use
-> [shadcn/ui's theme builder](https://ui.shadcn.com/themes) to create custom themes.
+> **Note:** **shadcn/ui Compatibility**: The dApp Kit uses the same CSS custom property naming convention as
+> shadcn/ui. If your application already uses shadcn/ui themes, the dApp Kit components will
+> automatically inherit your theme. You can also use [shadcn/ui's theme
+> builder](https://ui.shadcn.com/themes) to create custom themes.
 
-## CSS Custom Properties
+## CSS custom properties
 
 All dApp Kit web components support the following CSS custom properties:
 
 ### Colors
 
 These color variables follow the shadcn/ui naming convention. Colors can be defined using any valid
-CSS color format (hex, rgb, hsl, oklch, etc.).
+CSS color format (hex, rgb, hsl, oklch, and others).
 
-- **`--background`** - Background color of the component. Used as the default background for UI
+- **`--background`:** Background color of the component. Used as the default background for UI
   elements.
-- **`--foreground`** - Foreground color of the component. Used as the default text color.
-- **`--primary`** - Primary color used for interactive elements such as buttons and links.
-- **`--primary-foreground`** - Text or icon color placed on top of primary elements.
-- **`--secondary`** - Secondary color used for less prominent interactive elements.
-- **`--secondary-foreground`** - Text or icon color placed on top of secondary elements.
-- **`--border`** - Border color for UI elements.
-- **`--accent`** - Accent color used for highlights and decorative elements.
-- **`--accent-foreground`** - Text or icon color placed on top of accent elements.
-- **`--muted`** - Background color for subtle or muted UI elements (e.g., placeholders, disabled
-  states).
-- **`--muted-foreground`** - Text or icon color for muted UI elements.
-- **`--popover`** - Background color for floating elements such as popovers, dropdowns, or tooltips.
-- **`--popover-foreground`** - Text or icon color inside popover elements.
-- **`--ring`** - Color used for focus rings (visible focus indicators on interactive elements).
+- **`--foreground`:** Foreground color of the component. Used as the default text color.
+- **`--primary`:** Primary color used for interactive elements such as buttons and links.
+- **`--primary-foreground`:** Text or icon color placed on top of primary elements.
+- **`--secondary`:** Secondary color used for less prominent interactive elements.
+- **`--secondary-foreground`:** Text or icon color placed on top of secondary elements.
+- **`--border`:** Border color for UI elements.
+- **`--accent`:** Accent color used for highlights and decorative elements.
+- **`--accent-foreground`:** Text or icon color placed on top of accent elements.
+- **`--muted`:** Background color for subtle or muted UI elements (for example, placeholders and
+  disabled states).
+- **`--muted-foreground`:** Text or icon color for muted UI elements.
+- **`--popover`:** Background color for floating elements such as popovers, dropdowns, or tooltips.
+- **`--popover-foreground`:** Text or icon color inside popover elements.
+- **`--ring`:** Color used for focus rings (visible focus indicators on interactive elements).
 
 ### Typography
 
-- **`--font-sans`** - Font family used for text content.
-- **`--font-weight-medium`** - Medium font weight for text (typically used for buttons and
+- **`--font-sans`:** Font family used for text content.
+- **`--font-weight-medium`:** Medium font weight for text (typically used for buttons and
   interactive elements).
-- **`--font-weight-semibold`** - Semibold font weight for text (typically used for headings or
+- **`--font-weight-semibold`:** Semibold font weight for text (typically used for headings or
   emphasized text).
 
 ### Layout
 
-- **`--radius`** - Border radius used for UI elements.
+- **`--radius`:** Border radius used for UI elements.
 
 ## Usage
 
-### Global Theming
+### Global theming
 
 Apply custom properties to affect all dApp Kit components:
 
@@ -67,7 +67,7 @@ Apply custom properties to affect all dApp Kit components:
 }
 ```
 
-### Component-Specific Theming
+### Component-specific theming
 
 Target specific components:
 
@@ -84,7 +84,7 @@ mysten-dapp-kit-connect-modal {
 }
 ```
 
-### Dark Mode
+### Dark mode
 
 Implement dark mode by overriding the custom properties:
 
@@ -126,7 +126,7 @@ Or use a class-based approach:
 </div>
 ```
 
-## Example: Complete Theme
+## Example: complete theme
 
 Here's a complete theme example matching a custom design system:
 
@@ -159,7 +159,7 @@ Here's a complete theme example matching a custom design system:
 }
 ```
 
-## Framework Integration
+## Framework integration
 
 ### React
 
@@ -193,4 +193,4 @@ Here's a complete theme example matching a custom design system:
 		<mysten-dapp-kit-connect-button></mysten-dapp-kit-connect-button>
 	</body>
 </html>
-```
+```

package/docs/web-components/connect-button.md

@@ -1,6 +1,6 @@
 # Connect Button
 
-> Framework-agnostic web component for wallet connection
+> Framework-agnostic web component providing a complete wallet connection UI for Sui dApps.
 
 The `<mysten-dapp-kit-connect-button>` Web Component provides a complete wallet connection UI. It
 displays a "Connect Wallet" button when no wallet is connected, and shows the connected account with
@@ -10,7 +10,7 @@ a menu when a wallet is active.
 > page reload. This provides a seamless user experience but can be
 > [disabled](../dapp-kit-instance#disabling-auto-connect) if needed.
 
-## Basic Usage
+## Basic usage
 
 ### Vanilla
 
@@ -26,7 +26,9 @@ a menu when a wallet is active.
 ### Vue
 
 ```vue
-<script setup></script>
+<script setup>
+
+</script>
 
 <template>
 	<mysten-dapp-kit-connect-button :instance="dAppKit" />
@@ -49,12 +51,12 @@ The connect button component automatically handles:
 
 ## Properties
 
-- **instance** - The dApp Kit instance
+- **instance:** The dApp Kit instance
 - **modalOptions** (optional) - Configuration options for the connect modal
-  - `filterFn` - Function to filter available wallets
-  - `sortFn` - Function to sort available wallets
+  - `filterFn`: Function to filter available wallets
+  - `sortFn`: Function to sort available wallets
 
-## Custom Button Text
+## Custom button text
 
 Use the default slot to customize the button text when not connected:
 
@@ -64,12 +66,12 @@ Use the default slot to customize the button text when not connected:
 </mysten-dapp-kit-connect-button>
 ```
 
-## Modal Integration
+## Modal integration
 
 The connect button automatically manages its own modal. You don't need to add a separate
 `<mysten-dapp-kit-connect-modal>` component when using the connect button.
 
-## Connected State
+## Connected state
 
 When a wallet is connected, the button transforms into an account menu that displays:
 
@@ -81,7 +83,7 @@ When a wallet is connected, the button transforms into an account menu that disp
   - Managing connection
   - Disconnecting
 
-## Server-Side Rendering (SSR)
+## Server-side rendering (SSR)
 
 The `<mysten-dapp-kit-connect-button>` Web Component can be only client-side rendered, as wallets
-are detected in the browser. For Next.js guide see [here](../getting-started/next-js).
+are detected in the browser. For Next.js guide see [here](../getting-started/next-js).

package/docs/web-components/connect-modal.md

@@ -1,24 +1,24 @@
 # Connect Modal
 
-> Framework-agnostic web component for wallet selection
+> Framework-agnostic web component for wallet selection and connection in Sui dApps.
 
 The `<mysten-dapp-kit-connect-modal>` Web Component provides a modal dialog for wallet connection.
 While most apps should use the [`Connect Button`](./connect-button) which includes an integrated
 modal, the standalone modal is useful for advanced scenarios requiring custom trigger mechanisms.
 
-## When to Use
+## When to use
 
 Use the standalone modal when you need:
 
-- **Custom trigger elements** - Menu items, keyboard shortcuts, or other non-button triggers
-- **Complex UI flows** - Integration into existing navigation or custom wallet management interfaces
-- **Programmatic control** - Opening the modal based on application logic or user actions
-- **Multiple triggers** - Different parts of your UI that can open the same modal
+- **Custom trigger elements:** Menu items, keyboard shortcuts, or other non-button triggers
+- **Complex UI flows:** Integration into existing navigation or custom wallet management interfaces
+- **Programmatic control:** Opening the modal based on application logic or user actions
+- **Multiple triggers:** Different parts of your UI that can open the same modal
 
 For standard wallet connection with a button, use the [Connect Button](./connect-button) component
 instead.
 
-## Basic Usage
+## Basic usage
 
 ### Vanilla
 
@@ -58,6 +58,7 @@ instead.
 
 ```vue
 <script setup lang="ts">
+
 const modalRef = ref();
 const isModalOpen = ref(false);
 
@@ -89,8 +90,8 @@ DApp Kit React bindings provide a [React wrapper](../react/components/connect-mo
 
 ## Properties
 
-- **instance** - The dApp Kit instance
-- **open** - Boolean to control modal visibility programmatically
+- **instance:** The dApp Kit instance
+- **open:** Boolean to control modal visibility programmatically
 - **filterFn** (optional) - Function to filter available wallets
   - Type: `(wallet: UiWallet, index: number, array: UiWallet[]) => boolean`
 - **sortFn** (optional) - Function to sort available wallets
@@ -120,11 +121,11 @@ await modal?.close('user-cancelled');
 
 The modal fires several events during its lifecycle:
 
-- **open** - Fired before the modal opens (cancelable)
-- **opened** - Fired after the modal has fully opened
-- **close** - Fired before the modal closes (cancelable)
-- **closed** - Fired after the modal has fully closed
-- **cancel** - Fired when clicking backdrop or pressing Escape (cancelable)
+- **open:** Fired before the modal opens (cancelable)
+- **opened:** Fired after the modal has fully opened
+- **close:** Fired before the modal closes (cancelable)
+- **closed:** Fired after the modal has fully closed
+- **cancel:** Fired when clicking backdrop or pressing Escape (cancelable)
 
 ```js
 const modal = document.querySelector('mysten-dapp-kit-connect-modal');
@@ -150,7 +151,7 @@ modal?.addEventListener('cancel', (event) => {
 
 ## Examples
 
-### Programmatic Control
+### Programmatic control
 
 ```js
 const modal = document.querySelector('mysten-dapp-kit-connect-modal');
@@ -170,7 +171,7 @@ async function performAction() {
 }
 ```
 
-## Server-Side Rendering (SSR)
+## Server-side rendering (SSR)
 
 The `<mysten-dapp-kit-connect-modal>` Web Component can be only client-side rendered, as wallets are
-detected in the browser. For Next.js guide see [here](../getting-started/next-js).
+detected in the browser. For Next.js guide see [here](../getting-started/next-js).

package/package.json

@@ -2,7 +2,7 @@
   "name": "@mysten/dapp-kit-react",
   "author": "Mysten Labs <build@mystenlabs.com>",
   "description": "React bindings for @mysten/dapp-kit-core",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "license": "Apache-2.0",
   "files": [
     "LICENSE",
@@ -37,8 +37,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/react": "^19.2.8",
-    "react": "^19.2.3",
     "tsdown": "0.20.0-beta.1",
     "typescript": "^5.9.3"
   },
@@ -46,7 +44,7 @@
     "@lit/react": "^1.0.8",
     "@nanostores/react": "^1.0.0",
     "nanostores": "^1.1.0",
-    "@mysten/dapp-kit-core": "^1.2.0"
+    "@mysten/dapp-kit-core": "^1.3.2"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
@@ -55,7 +53,7 @@
   "scripts": {
     "clean": "rm -rf tsconfig.tsbuildinfo ./dist",
     "build": "pnpm typecheck && tsdown",
-    "build:docs": "tsx ../../../docs/scripts/build-docs.ts",
+    "build:docs": "node ../../../docs/scripts/build-docs.ts",
     "typecheck": "tsc --noEmit",
     "dev": "tsdown --watch",
     "prettier:check": "prettier -c --ignore-unknown .",