@mysten/docs 0.1.18 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bcs/index.md +1 -1
- package/dist/bcs/llms-index.md +1 -1
- package/dist/codegen/index.md +53 -53
- package/dist/codegen/llms-index.md +1 -1
- package/dist/dapp-kit/actions/connect-wallet.md +4 -4
- package/dist/dapp-kit/actions/disconnect-wallet.md +8 -7
- package/dist/dapp-kit/actions/sign-and-execute-transaction.md +14 -14
- package/dist/dapp-kit/actions/sign-personal-message.md +8 -8
- package/dist/dapp-kit/actions/sign-transaction.md +7 -7
- package/dist/dapp-kit/actions/switch-account.md +6 -6
- package/dist/dapp-kit/actions/switch-network.md +5 -5
- package/dist/dapp-kit/dapp-kit-instance.md +19 -18
- package/dist/dapp-kit/getting-started/create-dapp.md +12 -12
- package/dist/dapp-kit/getting-started/next-js.md +12 -11
- package/dist/dapp-kit/getting-started/react.md +25 -25
- package/dist/dapp-kit/getting-started/vue.md +12 -12
- package/dist/dapp-kit/index.md +4 -4
- package/dist/dapp-kit/llms-index.md +23 -23
- package/dist/dapp-kit/react/components/connect-button.md +3 -3
- package/dist/dapp-kit/react/components/connect-modal.md +3 -3
- package/dist/dapp-kit/react/components/index.md +2 -2
- package/dist/dapp-kit/react/dapp-kit-provider.md +6 -6
- package/dist/dapp-kit/react/hooks/index.md +4 -3
- package/dist/dapp-kit/react/hooks/use-current-account.md +3 -3
- package/dist/dapp-kit/react/hooks/use-current-client.md +3 -3
- package/dist/dapp-kit/react/hooks/use-current-network.md +3 -3
- package/dist/dapp-kit/react/hooks/use-current-wallet.md +3 -3
- package/dist/dapp-kit/react/hooks/use-dapp-kit.md +5 -5
- package/dist/dapp-kit/react/hooks/use-wallet-connection.md +3 -3
- package/dist/dapp-kit/react/hooks/use-wallets.md +3 -3
- package/dist/dapp-kit/state.md +16 -16
- package/dist/dapp-kit/theming.md +27 -27
- package/dist/dapp-kit/web-components/connect-button.md +9 -9
- package/dist/dapp-kit/web-components/connect-modal.md +16 -16
- package/dist/kiosk/advanced-examples.md +1 -1
- package/dist/kiosk/from-v1.md +1 -1
- package/dist/kiosk/index.md +5 -5
- package/dist/kiosk/kiosk-client/introduction.md +6 -6
- package/dist/kiosk/kiosk-client/kiosk-transaction/examples.md +3 -3
- package/dist/kiosk/kiosk-client/kiosk-transaction/kiosk-transaction.md +1 -1
- package/dist/kiosk/kiosk-client/kiosk-transaction/managing.md +11 -11
- package/dist/kiosk/kiosk-client/kiosk-transaction/purchasing.md +1 -1
- package/dist/kiosk/kiosk-client/querying.md +1 -1
- package/dist/kiosk/kiosk-client/transfer-policy-transaction/introduction.md +1 -1
- package/dist/kiosk/kiosk-client/transfer-policy-transaction/using-the-manager.md +1 -3
- package/dist/kiosk/llms-index.md +5 -5
- package/dist/llms-index.md +83 -83
- package/dist/payment-kit/getting-started.md +13 -13
- package/dist/payment-kit/index.md +13 -13
- package/dist/payment-kit/llms-index.md +5 -5
- package/dist/payment-kit/payment-kit-sdk.md +18 -18
- package/dist/payment-kit/payment-processing.md +34 -34
- package/dist/payment-kit/registry-management.md +35 -35
- package/dist/seal/index.md +5 -5
- package/dist/seal/llms-index.md +1 -1
- package/dist/slush-wallet/dapp.md +10 -10
- package/dist/slush-wallet/deep-linking.md +54 -54
- package/dist/slush-wallet/index.md +2 -2
- package/dist/slush-wallet/llms-index.md +3 -3
- package/dist/sui/bcs.md +11 -11
- package/dist/sui/clients/core.md +57 -56
- package/dist/sui/clients/graphql.md +3 -3
- package/dist/sui/clients/grpc.md +10 -10
- package/dist/sui/clients/index.md +14 -14
- package/dist/sui/clients/json-rpc.md +16 -16
- package/dist/sui/cryptography/keypairs.md +6 -6
- package/dist/sui/cryptography/multisig.md +4 -4
- package/dist/sui/cryptography/passkey.md +15 -14
- package/dist/sui/cryptography/webcrypto-signer.md +4 -4
- package/dist/sui/executors.md +18 -16
- package/dist/sui/faucet.md +3 -3
- package/dist/sui/hello-sui.md +5 -5
- package/dist/sui/index.md +12 -12
- package/dist/sui/install.md +3 -3
- package/dist/sui/llm-docs.md +9 -9
- package/dist/sui/llms-index.md +41 -41
- package/dist/sui/migrations/0.38.md +6 -6
- package/dist/sui/migrations/sui-1.0.md +32 -32
- package/dist/sui/migrations/sui-2.0/agent-prompt.md +3 -3
- package/dist/sui/migrations/sui-2.0/dapp-kit.md +43 -43
- package/dist/sui/migrations/sui-2.0/deepbook-v3.md +1 -1
- package/dist/sui/migrations/sui-2.0/index.md +37 -37
- package/dist/sui/migrations/sui-2.0/json-rpc-migration.md +53 -47
- package/dist/sui/migrations/sui-2.0/kiosk.md +8 -8
- package/dist/sui/migrations/sui-2.0/sdk-maintainers.md +7 -7
- package/dist/sui/migrations/sui-2.0/seal.md +1 -1
- package/dist/sui/migrations/sui-2.0/sui.md +16 -16
- package/dist/sui/migrations/sui-2.0/suins.md +4 -3
- package/dist/sui/migrations/sui-2.0/wallet-builders.md +5 -5
- package/dist/sui/migrations/sui-2.0/walrus.md +3 -3
- package/dist/sui/migrations/sui-2.0/zksend.md +5 -5
- package/dist/sui/plugins.md +14 -14
- package/dist/sui/sdk-building.md +32 -32
- package/dist/sui/transaction-building/basics.md +13 -13
- package/dist/sui/transaction-building/gas.md +2 -3
- package/dist/sui/transaction-building/intents.md +4 -4
- package/dist/sui/transaction-building/offline.md +8 -8
- package/dist/sui/transaction-building/sponsored-transactions.md +1 -1
- package/dist/sui/utils/derived_objects.md +10 -10
- package/dist/sui/utils/index.md +1 -1
- package/dist/sui/zklogin.md +1 -1
- package/dist/walrus/index.md +1 -1
- package/dist/walrus/llms-index.md +1 -1
- package/dist/zksend/index.md +2 -2
- package/dist/zksend/link-builder.md +5 -4
- package/dist/zksend/llms-index.md +2 -2
- package/package.json +6 -6
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# @mysten/create-dapp
|
|
2
2
|
|
|
3
|
-
> Create a Sui
|
|
3
|
+
> Create a Sui app with one command using the create-dapp CLI scaffolding tool.
|
|
4
4
|
|
|
5
|
-
`@mysten/create-dapp` is a CLI tool that scaffolds a complete Sui
|
|
5
|
+
`@mysten/create-dapp` is a CLI tool that scaffolds a complete Sui app project with best practices
|
|
6
6
|
built in.
|
|
7
7
|
|
|
8
|
-
## Quick
|
|
8
|
+
## Quick start
|
|
9
9
|
|
|
10
10
|
```sh npm2yarn
|
|
11
11
|
npm create @mysten/dapp
|
|
@@ -17,7 +17,7 @@ The CLI prompts you to choose a template and project name, then creates a ready-
|
|
|
17
17
|
|
|
18
18
|
### react-client-dapp
|
|
19
19
|
|
|
20
|
-
A basic React
|
|
20
|
+
A basic React app that demonstrates wallet connection and fetching owned objects:
|
|
21
21
|
|
|
22
22
|
- Wallet connection with `ConnectButton`
|
|
23
23
|
- Display connected wallet address
|
|
@@ -34,7 +34,7 @@ A complete end-to-end example with Move smart contract integration:
|
|
|
34
34
|
- MVR (Move Registry) name resolution for package IDs
|
|
35
35
|
- Full transaction signing and execution
|
|
36
36
|
|
|
37
|
-
## Tech
|
|
37
|
+
## Tech stack
|
|
38
38
|
|
|
39
39
|
Both templates include:
|
|
40
40
|
|
|
@@ -50,7 +50,7 @@ The e2e-counter template also includes:
|
|
|
50
50
|
|
|
51
51
|
- [`@mysten/codegen`](/codegen) - Generate TypeScript from Move code
|
|
52
52
|
|
|
53
|
-
## Project
|
|
53
|
+
## Project structure
|
|
54
54
|
|
|
55
55
|
### react-client-dapp
|
|
56
56
|
|
|
@@ -82,9 +82,9 @@ move/
|
|
|
82
82
|
└── counter/ # Move smart contract
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
## Using the e2e-counter
|
|
85
|
+
## Using the e2e-counter template
|
|
86
86
|
|
|
87
|
-
### 1
|
|
87
|
+
### Step 1: Deploy the Move contract
|
|
88
88
|
|
|
89
89
|
First, install the [Sui CLI](https://docs.sui.io/build/install) and set up testnet:
|
|
90
90
|
|
|
@@ -100,7 +100,7 @@ cd move
|
|
|
100
100
|
sui client publish --gas-budget 100000000 counter
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
-
### 2
|
|
103
|
+
### Step 2: Configure the package ID
|
|
104
104
|
|
|
105
105
|
Copy the `packageId` from the publish output to `src/constants.ts`:
|
|
106
106
|
|
|
@@ -108,7 +108,7 @@ Copy the `packageId` from the publish output to `src/constants.ts`:
|
|
|
108
108
|
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
-
### 3
|
|
111
|
+
### Step 3: Generate TypeScript bindings
|
|
112
112
|
|
|
113
113
|
```bash
|
|
114
114
|
pnpm codegen
|
|
@@ -116,7 +116,7 @@ pnpm codegen
|
|
|
116
116
|
|
|
117
117
|
This generates type-safe functions in `src/contracts/` for interacting with your Move modules.
|
|
118
118
|
|
|
119
|
-
### 4
|
|
119
|
+
### Step 4: Start development
|
|
120
120
|
|
|
121
121
|
```bash
|
|
122
122
|
pnpm install
|
|
@@ -135,7 +135,7 @@ project.
|
|
|
135
135
|
|
|
136
136
|
Theme variables are defined in `src/index.css` using Tailwind's `@theme` directive.
|
|
137
137
|
|
|
138
|
-
## CLI
|
|
138
|
+
## CLI options
|
|
139
139
|
|
|
140
140
|
You can skip prompts with command-line flags:
|
|
141
141
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Next.js
|
|
2
2
|
|
|
3
|
-
> Set up dApp Kit in a Next.js application
|
|
3
|
+
> Set up dApp Kit in a Next.js application.
|
|
4
4
|
|
|
5
5
|
This guide covers integrating dApp Kit into Next.js applications, including handling server-side
|
|
6
6
|
rendering (SSR).
|
|
@@ -13,7 +13,7 @@ npm i @mysten/dapp-kit-react @mysten/sui
|
|
|
13
13
|
|
|
14
14
|
## Setup
|
|
15
15
|
|
|
16
|
-
### 1
|
|
16
|
+
### Step 1: Create a dApp Kit instance
|
|
17
17
|
|
|
18
18
|
```ts
|
|
19
19
|
// app/dapp-kit.ts
|
|
@@ -34,7 +34,7 @@ declare module '@mysten/dapp-kit-react' {
|
|
|
34
34
|
}
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
### 2
|
|
37
|
+
### Step 2: Create a client-only wrapper
|
|
38
38
|
|
|
39
39
|
Wallet detection only works in the browser, so dApp Kit components must be client-side rendered:
|
|
40
40
|
|
|
@@ -47,7 +47,7 @@ Wallet detection only works in the browser, so dApp Kit components must be clien
|
|
|
47
47
|
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
### 3
|
|
50
|
+
### Step 3: Use dynamic import in pages
|
|
51
51
|
|
|
52
52
|
Use Next.js dynamic imports with `ssr: false` to prevent server-side rendering:
|
|
53
53
|
|
|
@@ -75,7 +75,7 @@ const ConnectButton = dynamic(
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
## Alternative:
|
|
78
|
+
## Alternative: single client component
|
|
79
79
|
|
|
80
80
|
For simpler apps, create a single client component:
|
|
81
81
|
|
|
@@ -137,25 +137,26 @@ const WalletApp = dynamic(() => import('./WalletApp'), {
|
|
|
137
137
|
}
|
|
138
138
|
```
|
|
139
139
|
|
|
140
|
-
## Key
|
|
140
|
+
## Key considerations
|
|
141
141
|
|
|
142
142
|
### Why SSR: false?
|
|
143
143
|
|
|
144
|
-
Wallets are detected
|
|
145
|
-
cannot happen on the server, so components that interact with wallets must be client-side
|
|
144
|
+
Wallets are detected through the browser's `window` object and the Wallet Standard API. This
|
|
145
|
+
detection cannot happen on the server, so components that interact with wallets must be client-side
|
|
146
|
+
only.
|
|
146
147
|
|
|
147
|
-
### Hydration
|
|
148
|
+
### Hydration errors
|
|
148
149
|
|
|
149
150
|
If you see hydration errors, ensure all dApp Kit components are wrapped with `ssr: false` dynamic
|
|
150
151
|
imports or are inside a `'use client'` component that's dynamically imported.
|
|
151
152
|
|
|
152
|
-
## Example
|
|
153
|
+
## Example application
|
|
153
154
|
|
|
154
155
|
See the complete
|
|
155
156
|
[Next.js example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/next-js/simple)
|
|
156
157
|
on GitHub.
|
|
157
158
|
|
|
158
|
-
## Next
|
|
159
|
+
## Next steps
|
|
159
160
|
|
|
160
161
|
- [React Hooks](/dapp-kit/react/hooks) - All available hooks
|
|
161
162
|
- [React Components](/dapp-kit/react/components) - UI components
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# React
|
|
2
2
|
|
|
3
|
-
> Set up dApp Kit in a React application
|
|
3
|
+
> Set up dApp Kit in a React application.
|
|
4
4
|
|
|
5
5
|
This guide walks you through integrating dApp Kit into a React application.
|
|
6
6
|
|
|
7
|
-
## Quick
|
|
7
|
+
## Quick start with create-dapp
|
|
8
8
|
|
|
9
9
|
The fastest way to get started is using our CLI tool:
|
|
10
10
|
|
|
@@ -28,7 +28,7 @@ See the [create-dapp guide](/dapp-kit/getting-started/create-dapp) for more deta
|
|
|
28
28
|
|
|
29
29
|
---
|
|
30
30
|
|
|
31
|
-
## Manual
|
|
31
|
+
## Manual installation
|
|
32
32
|
|
|
33
33
|
```sh npm2yarn
|
|
34
34
|
npm i @mysten/dapp-kit-react @mysten/sui
|
|
@@ -36,7 +36,7 @@ npm i @mysten/dapp-kit-react @mysten/sui
|
|
|
36
36
|
|
|
37
37
|
## Setup
|
|
38
38
|
|
|
39
|
-
### 1
|
|
39
|
+
### Step 1: Create a dApp Kit instance
|
|
40
40
|
|
|
41
41
|
Create a file to configure your dApp Kit instance:
|
|
42
42
|
|
|
@@ -59,7 +59,7 @@ declare module '@mysten/dapp-kit-react' {
|
|
|
59
59
|
}
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
### 2
|
|
62
|
+
### Step 2: Add the provider
|
|
63
63
|
|
|
64
64
|
Wrap your application with `DAppKitProvider`:
|
|
65
65
|
|
|
@@ -78,7 +78,7 @@ Wrap your application with `DAppKitProvider`:
|
|
|
78
78
|
}
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
### 3
|
|
81
|
+
### Step 3: Display connection status
|
|
82
82
|
|
|
83
83
|
Use hooks to access wallet state:
|
|
84
84
|
|
|
@@ -103,7 +103,7 @@ function WalletStatus() {
|
|
|
103
103
|
}
|
|
104
104
|
```
|
|
105
105
|
|
|
106
|
-
### 4
|
|
106
|
+
### Step 4: Execute transactions
|
|
107
107
|
|
|
108
108
|
Use the `useDAppKit` hook to sign and execute transactions:
|
|
109
109
|
|
|
@@ -138,35 +138,35 @@ function TransferButton() {
|
|
|
138
138
|
}
|
|
139
139
|
```
|
|
140
140
|
|
|
141
|
-
## Available
|
|
141
|
+
## Available hooks
|
|
142
142
|
|
|
143
|
-
| Hook
|
|
144
|
-
|
|
|
145
|
-
| [useDAppKit](/dapp-kit/react/hooks/use-dapp-kit) | Access the dApp Kit instance and actions |
|
|
146
|
-
| [useWalletConnection](/dapp-kit/react/hooks/use-wallet-connection) | Full connection state with status flags |
|
|
147
|
-
| [useCurrentAccount](/dapp-kit/react/hooks/use-current-account) | Currently selected account |
|
|
148
|
-
| [useCurrentWallet](/dapp-kit/react/hooks/use-current-wallet) | Currently connected wallet |
|
|
149
|
-
| [useCurrentNetwork](/dapp-kit/react/hooks/use-current-network) | Current network |
|
|
150
|
-
| [useCurrentClient](/dapp-kit/react/hooks/use-current-client) | SuiClient for current network |
|
|
151
|
-
| [useWallets](/dapp-kit/react/hooks/use-wallets) | List of available wallets |
|
|
143
|
+
| Hook | Description |
|
|
144
|
+
| -------------------------------------------------------------------- | ---------------------------------------- |
|
|
145
|
+
| [`useDAppKit`](/dapp-kit/react/hooks/use-dapp-kit) | Access the dApp Kit instance and actions |
|
|
146
|
+
| [`useWalletConnection`](/dapp-kit/react/hooks/use-wallet-connection) | Full connection state with status flags |
|
|
147
|
+
| [`useCurrentAccount`](/dapp-kit/react/hooks/use-current-account) | Currently selected account |
|
|
148
|
+
| [`useCurrentWallet`](/dapp-kit/react/hooks/use-current-wallet) | Currently connected wallet |
|
|
149
|
+
| [`useCurrentNetwork`](/dapp-kit/react/hooks/use-current-network) | Current network |
|
|
150
|
+
| [`useCurrentClient`](/dapp-kit/react/hooks/use-current-client) | SuiClient for current network |
|
|
151
|
+
| [`useWallets`](/dapp-kit/react/hooks/use-wallets) | List of available wallets |
|
|
152
152
|
|
|
153
153
|
## Components
|
|
154
154
|
|
|
155
|
-
| Component
|
|
156
|
-
|
|
|
157
|
-
| [ConnectButton](/dapp-kit/react/components/connect-button) | Complete wallet connection UI |
|
|
158
|
-
| [ConnectModal](/dapp-kit/react/components/connect-modal) | Standalone wallet selection modal |
|
|
159
|
-
| [DAppKitProvider](/dapp-kit/react/dapp-kit-provider) | Context provider for hooks |
|
|
155
|
+
| Component | Description |
|
|
156
|
+
| ------------------------------------------------------------ | --------------------------------- |
|
|
157
|
+
| [`ConnectButton`](/dapp-kit/react/components/connect-button) | Complete wallet connection UI |
|
|
158
|
+
| [`ConnectModal`](/dapp-kit/react/components/connect-modal) | Standalone wallet selection modal |
|
|
159
|
+
| [`DAppKitProvider`](/dapp-kit/react/dapp-kit-provider) | Context provider for hooks |
|
|
160
160
|
|
|
161
|
-
## Example
|
|
161
|
+
## Example application
|
|
162
162
|
|
|
163
163
|
See the complete
|
|
164
164
|
[React example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/react/simple)
|
|
165
165
|
on GitHub.
|
|
166
166
|
|
|
167
|
-
## Next
|
|
167
|
+
## Next steps
|
|
168
168
|
|
|
169
|
-
- [DAppKitProvider](/dapp-kit/react/dapp-kit-provider) - Provider configuration
|
|
169
|
+
- [`DAppKitProvider`](/dapp-kit/react/dapp-kit-provider) - Provider configuration
|
|
170
170
|
- [Hooks Reference](/dapp-kit/react/hooks) - All available hooks
|
|
171
171
|
- [Components](/dapp-kit/react/components) - UI components
|
|
172
172
|
- [Theming](/dapp-kit/theming) - Customize appearance
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Vue
|
|
2
2
|
|
|
3
|
-
> Set up dApp Kit in a Vue application
|
|
3
|
+
> Set up dApp Kit in a Vue application.
|
|
4
4
|
|
|
5
5
|
This guide walks you through integrating dApp Kit into a Vue application using Web Components and
|
|
6
6
|
direct store access.
|
|
@@ -13,7 +13,7 @@ npm i @mysten/dapp-kit-core @mysten/sui @nanostores/vue
|
|
|
13
13
|
|
|
14
14
|
## Setup
|
|
15
15
|
|
|
16
|
-
### 1
|
|
16
|
+
### Step 1: Create a dApp Kit instance
|
|
17
17
|
|
|
18
18
|
```ts
|
|
19
19
|
// src/dapp-kit.ts
|
|
@@ -27,7 +27,7 @@ const GRPC_URLS = {
|
|
|
27
27
|
});
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
### 2
|
|
30
|
+
### Step 2: Register web components
|
|
31
31
|
|
|
32
32
|
Import the web components in your app entry point:
|
|
33
33
|
|
|
@@ -37,7 +37,7 @@ Import the web components in your app entry point:
|
|
|
37
37
|
createApp(App).mount('#app');
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
### 3
|
|
40
|
+
### Step 3: Use the connect button
|
|
41
41
|
|
|
42
42
|
```vue
|
|
43
43
|
<script setup lang="ts">
|
|
@@ -52,7 +52,7 @@ createApp(App).mount('#app');
|
|
|
52
52
|
</template>
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
### 4
|
|
55
|
+
### Step 4: Access connection state
|
|
56
56
|
|
|
57
57
|
Use `@nanostores/vue` for reactive state:
|
|
58
58
|
|
|
@@ -77,7 +77,7 @@ const network = useStore(dAppKit.stores.$currentNetwork);
|
|
|
77
77
|
</template>
|
|
78
78
|
```
|
|
79
79
|
|
|
80
|
-
### 5
|
|
80
|
+
### Step 5: Execute transactions
|
|
81
81
|
|
|
82
82
|
```vue
|
|
83
83
|
<script setup lang="ts">
|
|
@@ -111,7 +111,7 @@ async function handleTransfer() {
|
|
|
111
111
|
</template>
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
## Complete
|
|
114
|
+
## Complete example
|
|
115
115
|
|
|
116
116
|
```vue
|
|
117
117
|
<script setup lang="ts">
|
|
@@ -155,7 +155,7 @@ async function handleTransfer() {
|
|
|
155
155
|
</template>
|
|
156
156
|
```
|
|
157
157
|
|
|
158
|
-
## Web
|
|
158
|
+
## Web components
|
|
159
159
|
|
|
160
160
|
Vue works with dApp Kit's Web Components through property binding:
|
|
161
161
|
|
|
@@ -166,9 +166,9 @@ Vue works with dApp Kit's Web Components through property binding:
|
|
|
166
166
|
|
|
167
167
|
See [Web Components](/dapp-kit/web-components/connect-button) for full documentation.
|
|
168
168
|
|
|
169
|
-
## Available
|
|
169
|
+
## Available stores
|
|
170
170
|
|
|
171
|
-
Access these stores
|
|
171
|
+
Access these stores through `dAppKit.stores`:
|
|
172
172
|
|
|
173
173
|
| Store | Description |
|
|
174
174
|
| ----------------- | ------------------------------------------------- |
|
|
@@ -179,13 +179,13 @@ Access these stores via `dAppKit.stores`:
|
|
|
179
179
|
|
|
180
180
|
See [State Management](/dapp-kit/state) for full documentation.
|
|
181
181
|
|
|
182
|
-
## Example
|
|
182
|
+
## Example application
|
|
183
183
|
|
|
184
184
|
See the complete
|
|
185
185
|
[Vue example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit-next/examples/vue/simple)
|
|
186
186
|
on GitHub.
|
|
187
187
|
|
|
188
|
-
## Next
|
|
188
|
+
## Next steps
|
|
189
189
|
|
|
190
190
|
- [Web Components](/dapp-kit/web-components/connect-button) - Component documentation
|
|
191
191
|
- [State Management](/dapp-kit/state) - Store details
|
package/dist/dapp-kit/index.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Sui dApp Kit
|
|
2
2
|
|
|
3
|
-
> Build Sui
|
|
3
|
+
> Build Sui apps with framework-agnostic core and React bindings.
|
|
4
4
|
|
|
5
5
|
> **Note:** **Migrating from @mysten/dapp-kit?** If you're currently using the legacy `@mysten/dapp-kit`
|
|
6
6
|
> package, check out our [Migration Guide](/sui/migrations/sui-2.0/dapp-kit) to upgrade to the new
|
|
@@ -32,7 +32,7 @@ React bindings for the core package:
|
|
|
32
32
|
|
|
33
33
|
Choose the installation method based on your framework:
|
|
34
34
|
|
|
35
|
-
### For React
|
|
35
|
+
### For React applications
|
|
36
36
|
|
|
37
37
|
```sh npm2yarn
|
|
38
38
|
npm i @mysten/dapp-kit-react @mysten/sui
|
|
@@ -44,7 +44,7 @@ npm i @mysten/dapp-kit-react @mysten/sui
|
|
|
44
44
|
npm i @mysten/dapp-kit-core @mysten/sui
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
## Getting
|
|
47
|
+
## Getting started
|
|
48
48
|
|
|
49
49
|
Check the framework-specific guides:
|
|
50
50
|
|
|
@@ -52,7 +52,7 @@ Check the framework-specific guides:
|
|
|
52
52
|
- [Next.js](/dapp-kit/getting-started/next-js)
|
|
53
53
|
- [Vue](/dapp-kit/getting-started/vue)
|
|
54
54
|
|
|
55
|
-
## Legacy
|
|
55
|
+
## Legacy package
|
|
56
56
|
|
|
57
57
|
### @mysten/dapp-kit (Legacy)
|
|
58
58
|
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
# dApp Kit
|
|
2
2
|
> Build Sui dApps with @mysten/dapp-kit-core and @mysten/dapp-kit-react
|
|
3
3
|
|
|
4
|
-
- [Sui dApp Kit](..md): Build Sui
|
|
5
|
-
- [@mysten/create-dapp](./getting-started/create-dapp.md): Create a Sui
|
|
6
|
-
- [React](./getting-started/react.md): Set up dApp Kit in a React application
|
|
7
|
-
- [Next.js](./getting-started/next-js.md): Set up dApp Kit in a Next.js application
|
|
8
|
-
- [Vue](./getting-started/vue.md): Set up dApp Kit in a Vue application
|
|
4
|
+
- [Sui dApp Kit](..md): Build Sui apps with framework-agnostic core and React bindings.
|
|
5
|
+
- [@mysten/create-dapp](./getting-started/create-dapp.md): Create a Sui app with one command using the create-dapp CLI scaffolding tool.
|
|
6
|
+
- [React](./getting-started/react.md): Set up dApp Kit in a React application.
|
|
7
|
+
- [Next.js](./getting-started/next-js.md): Set up dApp Kit in a Next.js application.
|
|
8
|
+
- [Vue](./getting-started/vue.md): Set up dApp Kit in a Vue application.
|
|
9
9
|
- [DApp Kit Instance](./dapp-kit-instance.md): Create and configure a DAppKit instance for wallet and client management
|
|
10
|
-
- [State](./state.md): Access and subscribe to wallet connection state in dApp Kit
|
|
11
|
-
- [Connect Wallet](./actions/connect-wallet.md): Programmatically connect to a Sui wallet
|
|
12
|
-
- [Disconnect Wallet](./actions/disconnect-wallet.md): Programmatically disconnect from a Sui wallet
|
|
13
|
-
- [Sign and Execute Transaction](./actions/sign-and-execute-transaction.md): Sign and execute a transaction using the connected wallet
|
|
14
|
-
- [Sign Personal Message](./actions/sign-personal-message.md): Sign an arbitrary message with the connected wallet
|
|
15
|
-
- [Sign Transaction](./actions/sign-transaction.md): Sign a transaction without executing it
|
|
16
|
-
- [Switch Account](./actions/switch-account.md): Switch the active account in the connected wallet
|
|
17
|
-
- [Switch Network](./actions/switch-network.md): Switch the active network for the dApp Kit instance
|
|
18
|
-
- [DAppKitProvider](./react/dapp-kit-provider.md): React context provider
|
|
19
|
-
- [React Hooks](./react/hooks.md): React hooks for accessing dApp Kit state and actions
|
|
20
|
-
- [useDAppKit](./react/hooks/use-dapp-kit.md): React hook to access the full dApp Kit instance
|
|
21
|
-
- [React Components](./react/components.md): Pre-built React UI components for wallet interaction
|
|
22
|
-
- [Connect Button](./react/components/connect-button.md): React button component for
|
|
23
|
-
- [Connect Modal](./react/components/connect-modal.md): React modal component for wallet
|
|
24
|
-
- [Connect Button](./web-components/connect-button.md): Framework-agnostic web component
|
|
25
|
-
- [Connect Modal](./web-components/connect-modal.md): Framework-agnostic web component for wallet selection
|
|
26
|
-
- [Theming](./theming.md): Customize the appearance of dApp Kit UI components
|
|
27
|
-
- [Sui dApp Kit (Legacy)](./legacy.md): dApp Kit API reference for @mysten/dapp-kit
|
|
10
|
+
- [State](./state.md): Access and subscribe to wallet connection state in dApp Kit.
|
|
11
|
+
- [Connect Wallet](./actions/connect-wallet.md): Programmatically connect to a Sui wallet using the dApp Kit connectWallet action.
|
|
12
|
+
- [Disconnect Wallet](./actions/disconnect-wallet.md): Programmatically disconnect from a Sui wallet using the dApp Kit disconnectWallet action.
|
|
13
|
+
- [Sign and Execute Transaction](./actions/sign-and-execute-transaction.md): Sign and execute a transaction on the Sui network using the connected wallet.
|
|
14
|
+
- [Sign Personal Message](./actions/sign-personal-message.md): Sign an arbitrary message with the connected wallet for authentication or proof of ownership.
|
|
15
|
+
- [Sign Transaction](./actions/sign-transaction.md): Sign a Sui transaction without executing it for deferred or multi-signature scenarios.
|
|
16
|
+
- [Switch Account](./actions/switch-account.md): Switch the active account in the connected wallet using the dApp Kit switchAccount action.
|
|
17
|
+
- [Switch Network](./actions/switch-network.md): Switch the active network for the dApp Kit instance between mainnet, testnet, and other networks.
|
|
18
|
+
- [DAppKitProvider](./react/dapp-kit-provider.md): React context provider that makes dApp Kit available throughout your application.
|
|
19
|
+
- [React Hooks](./react/hooks.md): React hooks for accessing dApp Kit state and actions in Sui applications.
|
|
20
|
+
- [useDAppKit](./react/hooks/use-dapp-kit.md): React hook to access the full dApp Kit instance for calling actions directly.
|
|
21
|
+
- [React Components](./react/components.md): Pre-built React UI components for wallet interaction in Sui dApps.
|
|
22
|
+
- [Connect Button](./react/components/connect-button.md): React button component for connecting and disconnecting Sui wallets.
|
|
23
|
+
- [Connect Modal](./react/components/connect-modal.md): React modal component for selecting and connecting to a Sui wallet.
|
|
24
|
+
- [Connect Button](./web-components/connect-button.md): Framework-agnostic web component providing a complete wallet connection UI for Sui dApps.
|
|
25
|
+
- [Connect Modal](./web-components/connect-modal.md): Framework-agnostic web component for wallet selection and connection in Sui dApps.
|
|
26
|
+
- [Theming](./theming.md): Customize the appearance of dApp Kit UI components.
|
|
27
|
+
- [Sui dApp Kit (Legacy)](./legacy.md): Legacy dApp Kit API reference for the deprecated @mysten/dapp-kit package using JSON RPC.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Connect Button
|
|
2
2
|
|
|
3
|
-
> React button component for
|
|
3
|
+
> React button component for connecting and disconnecting Sui wallets.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
- **sortFn** (optional) - Function to sort available wallets
|
|
27
27
|
- Type: `(a: UiWallet, b: UiWallet) => number`
|
|
28
28
|
|
|
29
|
-
## Custom
|
|
29
|
+
## Custom button text
|
|
30
30
|
|
|
31
31
|
Use the slot to customize the button content when disconnected:
|
|
32
32
|
|
|
@@ -36,7 +36,7 @@ Use the slot to customize the button content when disconnected:
|
|
|
36
36
|
</ConnectButton>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
## Server-
|
|
39
|
+
## Server-side rendering (SSR)
|
|
40
40
|
|
|
41
41
|
The `<ConnectButton />` component can be only client-side rendered, as wallets are detected in the
|
|
42
42
|
browser. For Next.js guide see [here](/dapp-kit/getting-started/next-js).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Connect Modal
|
|
2
2
|
|
|
3
|
-
> React modal component for wallet
|
|
3
|
+
> React modal component for selecting and connecting to a Sui wallet.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
/>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
## Modal
|
|
39
|
+
## Modal states
|
|
40
40
|
|
|
41
41
|
The modal displays different views based on connection status:
|
|
42
42
|
|
|
@@ -45,7 +45,7 @@ The modal displays different views based on connection status:
|
|
|
45
45
|
- **Error**: Shows error message with retry option when connection fails
|
|
46
46
|
- **Request Cancelled**: Appears when user cancels the wallet connection request
|
|
47
47
|
|
|
48
|
-
## Server-
|
|
48
|
+
## Server-side rendering (SSR)
|
|
49
49
|
|
|
50
50
|
The `<ConnectModal />` component can be only client-side rendered, as wallets are detected in the
|
|
51
51
|
browser. For Next.js guide see [here](/dapp-kit/getting-started/next-js).
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# React Components
|
|
2
2
|
|
|
3
|
-
> Pre-built React UI components for wallet interaction
|
|
3
|
+
> Pre-built React UI components for wallet interaction in Sui dApps.
|
|
4
4
|
|
|
5
5
|
The `@mysten/dapp-kit-react` package provides pre-built React components for common wallet
|
|
6
6
|
interactions.
|
|
7
7
|
|
|
8
|
-
## Available
|
|
8
|
+
## Available components
|
|
9
9
|
|
|
10
10
|
- [`ConnectButton`](/dapp-kit/react/components/connect-button) - A button that opens the wallet
|
|
11
11
|
connection modal and displays account info when connected
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# DAppKitProvider
|
|
2
2
|
|
|
3
|
-
> React context provider
|
|
3
|
+
> React context provider that makes dApp Kit available throughout your application.
|
|
4
4
|
|
|
5
5
|
The `DAppKitProvider` is a React context provider that makes your dApp Kit instance available
|
|
6
6
|
throughout your React application. It must wrap any components that use dApp Kit hooks.
|
|
7
7
|
|
|
8
|
-
## Basic
|
|
8
|
+
## Basic usage
|
|
9
9
|
|
|
10
10
|
```tsx
|
|
11
11
|
|
|
@@ -21,9 +21,9 @@ throughout your React application. It must wrap any components that use dApp Kit
|
|
|
21
21
|
|
|
22
22
|
- **dAppKit**: The dApp Kit instance created with `createDAppKit`
|
|
23
23
|
|
|
24
|
-
## Provider
|
|
24
|
+
## Provider setup patterns
|
|
25
25
|
|
|
26
|
-
### With
|
|
26
|
+
### With custom configuration
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
29
|
|
|
@@ -54,7 +54,7 @@ declare module '@mysten/dapp-kit-react' {
|
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
## Using
|
|
57
|
+
## Using hooks inside the provider
|
|
58
58
|
|
|
59
59
|
Once your app is wrapped with `DAppKitProvider`, you can use any dApp Kit hooks in child components:
|
|
60
60
|
|
|
@@ -79,7 +79,7 @@ Once your app is wrapped with `DAppKitProvider`, you can use any dApp Kit hooks
|
|
|
79
79
|
> All dApp Kit hooks must be used within components that are descendants of `DAppKitProvider`. Using
|
|
80
80
|
> them outside will result in an error.
|
|
81
81
|
|
|
82
|
-
## Server-
|
|
82
|
+
## Server-side rendering (SSR)
|
|
83
83
|
|
|
84
84
|
While `DAppKitProvider` itself is SSR-safe, components that interact with wallets should be
|
|
85
85
|
client-side rendered, as wallets are detected in the browser. For Next.js guide see
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
# React Hooks
|
|
2
2
|
|
|
3
|
-
> React hooks for accessing dApp Kit state and actions
|
|
3
|
+
> React hooks for accessing dApp Kit state and actions in Sui applications.
|
|
4
4
|
|
|
5
5
|
The `@mysten/dapp-kit-react` package provides a set of hooks for interacting with wallets and the
|
|
6
6
|
Sui blockchain in React applications.
|
|
7
7
|
|
|
8
8
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
9
|
-
> [DAppKitProvider](/dapp-kit/react/dapp-kit-provider). Using them outside will result in an
|
|
9
|
+
> [`DAppKitProvider`](/dapp-kit/react/dapp-kit-provider). Using them outside will result in an
|
|
10
|
+
> error.
|
|
10
11
|
|
|
11
|
-
## Available
|
|
12
|
+
## Available hooks
|
|
12
13
|
|
|
13
14
|
- [`useDAppKit`](/dapp-kit/react/hooks/use-dapp-kit) - Access the dApp Kit instance for calling
|
|
14
15
|
actions directly
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# useCurrentAccount
|
|
2
2
|
|
|
3
|
-
> React hook to get the
|
|
3
|
+
> React hook to get the currently selected wallet account in a Sui dApp.
|
|
4
4
|
|
|
5
5
|
The `useCurrentAccount` hook provides access to the currently selected account.
|
|
6
6
|
|
|
7
7
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
8
|
-
> [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
|
|
8
|
+
> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
@@ -26,7 +26,7 @@ The `useCurrentAccount` hook provides access to the currently selected account.
|
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
## Return
|
|
29
|
+
## Return value
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
32
|
UiWalletAccount | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useCurrentClient
|
|
2
2
|
|
|
3
|
-
> React hook to get the current Sui client instance
|
|
3
|
+
> React hook to get the current Sui client instance for the active network.
|
|
4
4
|
|
|
5
5
|
The `useCurrentClient` hook provides access to the blockchain client instance for the current
|
|
6
6
|
network.
|
|
@@ -10,7 +10,7 @@ network.
|
|
|
10
10
|
> blockchain implementations.
|
|
11
11
|
|
|
12
12
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
13
|
-
> [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
|
|
13
|
+
> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
@@ -29,7 +29,7 @@ network.
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## Return
|
|
32
|
+
## Return value
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
35
|
SuiClient;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# useCurrentNetwork
|
|
2
2
|
|
|
3
|
-
> React hook to get the
|
|
3
|
+
> React hook to get the currently selected Sui network in dApp Kit.
|
|
4
4
|
|
|
5
5
|
The `useCurrentNetwork` hook provides access to the currently selected network.
|
|
6
6
|
|
|
7
7
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
8
|
-
> [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
|
|
8
|
+
> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
@@ -21,7 +21,7 @@ The `useCurrentNetwork` hook provides access to the currently selected network.
|
|
|
21
21
|
}
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
## Return
|
|
24
|
+
## Return value
|
|
25
25
|
|
|
26
26
|
```tsx
|
|
27
27
|
string;
|