@mysten/docs 0.1.17 → 0.1.19
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 +84 -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 +8 -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/composable-claim.md +70 -0
- package/dist/zksend/index.md +2 -2
- package/dist/zksend/link-builder.md +5 -4
- package/dist/zksend/llms-index.md +3 -2
- package/package.json +8 -8
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# useCurrentWallet
|
|
2
2
|
|
|
3
|
-
> React hook to get the
|
|
3
|
+
> React hook to get the currently connected wallet in a Sui dApp.
|
|
4
4
|
|
|
5
5
|
The `useCurrentWallet` hook provides access to the currently connected wallet.
|
|
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
|
|
|
@@ -29,7 +29,7 @@ The `useCurrentWallet` hook provides access to the currently connected wallet.
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## Return
|
|
32
|
+
## Return value
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
35
|
UiWallet | null;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# useDAppKit
|
|
2
2
|
|
|
3
|
-
> React hook to access the full dApp Kit instance
|
|
3
|
+
> React hook to access the full dApp Kit instance for calling actions directly.
|
|
4
4
|
|
|
5
5
|
The `useDAppKit` hook provides direct access to the dApp Kit instance within React components,
|
|
6
6
|
enabling you to call actions and access the underlying functionality.
|
|
7
7
|
|
|
8
8
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
9
|
-
> [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
|
|
9
|
+
> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
@@ -27,7 +27,7 @@ enabling you to call actions and access the underlying functionality.
|
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
## Return
|
|
30
|
+
## Return value
|
|
31
31
|
|
|
32
32
|
```ts
|
|
33
33
|
{
|
|
@@ -54,7 +54,7 @@ enabling you to call actions and access the underlying functionality.
|
|
|
54
54
|
|
|
55
55
|
## Examples
|
|
56
56
|
|
|
57
|
-
### Transaction
|
|
57
|
+
### Transaction execution
|
|
58
58
|
|
|
59
59
|
```tsx
|
|
60
60
|
|
|
@@ -83,7 +83,7 @@ enabling you to call actions and access the underlying functionality.
|
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
### Subscribing to
|
|
86
|
+
### Subscribing to state changes
|
|
87
87
|
|
|
88
88
|
```tsx
|
|
89
89
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# useWalletConnection
|
|
2
2
|
|
|
3
|
-
> React hook to manage wallet connection and
|
|
3
|
+
> React hook to manage wallet connection status and information in a Sui dApp.
|
|
4
4
|
|
|
5
5
|
The `useWalletConnection` hook provides access to the current wallet connection status and
|
|
6
6
|
information.
|
|
7
7
|
|
|
8
8
|
> **Warning:** All dApp Kit hooks must be used within components that are descendants of
|
|
9
|
-
> [DAppKitProvider](../dapp-kit-provider). Using them outside will result in an error.
|
|
9
|
+
> [`DAppKitProvider`](../dapp-kit-provider). Using them outside will result in an error.
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
@@ -32,7 +32,7 @@ information.
|
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
## Return
|
|
35
|
+
## Return value
|
|
36
36
|
|
|
37
37
|
```tsx
|
|
38
38
|
{
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# useWallets
|
|
2
2
|
|
|
3
|
-
> React hook to list available wallets
|
|
3
|
+
> React hook to list all available Sui wallets detected by dApp Kit.
|
|
4
4
|
|
|
5
5
|
The `useWallets` hook provides access to all available wallets.
|
|
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 `useWallets` hook provides access to all available wallets.
|
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
## Return
|
|
29
|
+
## Return value
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
32
|
UiWallet[]
|
package/dist/dapp-kit/state.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# State
|
|
2
2
|
|
|
3
|
-
> Access and subscribe to wallet connection state in dApp Kit
|
|
3
|
+
> Access and subscribe to wallet connection state in dApp Kit.
|
|
4
4
|
|
|
5
5
|
The Sui dApp Kit SDK uses [nanostores](https://github.com/nanostores/nanostores) for state
|
|
6
6
|
management, providing a lightweight, framework-agnostic solution that works across React, Vue,
|
|
7
7
|
Vanilla JavaScript, and other frameworks.
|
|
8
8
|
|
|
9
|
-
## Available
|
|
9
|
+
## Available stores
|
|
10
10
|
|
|
11
11
|
The dApp Kit exposes four reactive stores that you can subscribe to:
|
|
12
12
|
|
|
13
|
-
- **`$connection
|
|
14
|
-
- **`$currentNetwork
|
|
15
|
-
- **`$currentClient
|
|
16
|
-
- **`$wallets
|
|
13
|
+
- **`$connection`:** Current wallet connection state
|
|
14
|
+
- **`$currentNetwork`:** Currently selected network
|
|
15
|
+
- **`$currentClient`:** Client instance for the current network
|
|
16
|
+
- **`$wallets`:** List of available wallets
|
|
17
17
|
|
|
18
|
-
## Accessing
|
|
18
|
+
## Accessing stores
|
|
19
19
|
|
|
20
20
|
All stores are available through the `dAppKit.stores` property:
|
|
21
21
|
|
|
@@ -32,7 +32,7 @@ const client = dAppKit.stores.$currentClient.get();
|
|
|
32
32
|
const wallets = dAppKit.stores.$wallets.get();
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
## Subscribing to
|
|
35
|
+
## Subscribing to state changes
|
|
36
36
|
|
|
37
37
|
Subscribe to any store to react to state changes:
|
|
38
38
|
|
|
@@ -51,9 +51,9 @@ const unsubscribe = dAppKit.stores.$connection.subscribe((connection) => {
|
|
|
51
51
|
unsubscribe();
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
## Store
|
|
54
|
+
## Store details
|
|
55
55
|
|
|
56
|
-
### Connection
|
|
56
|
+
### Connection store (`$connection`)
|
|
57
57
|
|
|
58
58
|
Contains the current wallet connection state with status flags:
|
|
59
59
|
|
|
@@ -83,7 +83,7 @@ if (connection.isConnected && connection.wallet && connection.account) {
|
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
### Current
|
|
86
|
+
### Current network store (`$currentNetwork`)
|
|
87
87
|
|
|
88
88
|
Contains the currently selected network as a string:
|
|
89
89
|
|
|
@@ -96,9 +96,9 @@ dAppKit.stores.$currentNetwork.subscribe((network) => {
|
|
|
96
96
|
});
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
This store is read-only. Use `dAppKit.switchNetwork()` to change networks.
|
|
100
100
|
|
|
101
|
-
### Current
|
|
101
|
+
### Current client store (`$currentClient`)
|
|
102
102
|
|
|
103
103
|
Contains the SuiClient instance for the current network:
|
|
104
104
|
|
|
@@ -111,9 +111,9 @@ const balance = await client.getBalance({
|
|
|
111
111
|
});
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
|
|
114
|
+
This store automatically updates when the network changes.
|
|
115
115
|
|
|
116
|
-
### Wallets
|
|
116
|
+
### Wallets store (`$wallets`)
|
|
117
117
|
|
|
118
118
|
Contains the list of available wallets:
|
|
119
119
|
|
|
@@ -126,7 +126,7 @@ wallets.forEach((wallet) => {
|
|
|
126
126
|
});
|
|
127
127
|
```
|
|
128
128
|
|
|
129
|
-
## Subscribing to
|
|
129
|
+
## Subscribing to state changes
|
|
130
130
|
|
|
131
131
|
You can subscribe directly to stores:
|
|
132
132
|
|
package/dist/dapp-kit/theming.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Theming
|
|
2
2
|
|
|
3
|
-
> Customize the appearance of dApp Kit UI components
|
|
3
|
+
> Customize the appearance of dApp Kit UI components.
|
|
4
4
|
|
|
5
5
|
The dApp Kit web components use a theming system compatible with
|
|
6
6
|
[shadcn/ui](https://ui.shadcn.com/docs/theming). Components are customized using CSS custom
|
|
@@ -11,47 +11,47 @@ properties (CSS variables), allowing you to match them to your application's des
|
|
|
11
11
|
> automatically inherit your theme. You can also use [shadcn/ui's theme
|
|
12
12
|
> builder](https://ui.shadcn.com/themes) to create custom themes.
|
|
13
13
|
|
|
14
|
-
## CSS
|
|
14
|
+
## CSS custom properties
|
|
15
15
|
|
|
16
16
|
All dApp Kit web components support the following CSS custom properties:
|
|
17
17
|
|
|
18
18
|
### Colors
|
|
19
19
|
|
|
20
20
|
These color variables follow the shadcn/ui naming convention. Colors can be defined using any valid
|
|
21
|
-
CSS color format (hex, rgb, hsl, oklch,
|
|
21
|
+
CSS color format (hex, rgb, hsl, oklch, and others).
|
|
22
22
|
|
|
23
|
-
- **`--background
|
|
23
|
+
- **`--background`:** Background color of the component. Used as the default background for UI
|
|
24
24
|
elements.
|
|
25
|
-
- **`--foreground
|
|
26
|
-
- **`--primary
|
|
27
|
-
- **`--primary-foreground
|
|
28
|
-
- **`--secondary
|
|
29
|
-
- **`--secondary-foreground
|
|
30
|
-
- **`--border
|
|
31
|
-
- **`--accent
|
|
32
|
-
- **`--accent-foreground
|
|
33
|
-
- **`--muted
|
|
34
|
-
states).
|
|
35
|
-
- **`--muted-foreground
|
|
36
|
-
- **`--popover
|
|
37
|
-
- **`--popover-foreground
|
|
38
|
-
- **`--ring
|
|
25
|
+
- **`--foreground`:** Foreground color of the component. Used as the default text color.
|
|
26
|
+
- **`--primary`:** Primary color used for interactive elements such as buttons and links.
|
|
27
|
+
- **`--primary-foreground`:** Text or icon color placed on top of primary elements.
|
|
28
|
+
- **`--secondary`:** Secondary color used for less prominent interactive elements.
|
|
29
|
+
- **`--secondary-foreground`:** Text or icon color placed on top of secondary elements.
|
|
30
|
+
- **`--border`:** Border color for UI elements.
|
|
31
|
+
- **`--accent`:** Accent color used for highlights and decorative elements.
|
|
32
|
+
- **`--accent-foreground`:** Text or icon color placed on top of accent elements.
|
|
33
|
+
- **`--muted`:** Background color for subtle or muted UI elements (for example, placeholders and
|
|
34
|
+
disabled states).
|
|
35
|
+
- **`--muted-foreground`:** Text or icon color for muted UI elements.
|
|
36
|
+
- **`--popover`:** Background color for floating elements such as popovers, dropdowns, or tooltips.
|
|
37
|
+
- **`--popover-foreground`:** Text or icon color inside popover elements.
|
|
38
|
+
- **`--ring`:** Color used for focus rings (visible focus indicators on interactive elements).
|
|
39
39
|
|
|
40
40
|
### Typography
|
|
41
41
|
|
|
42
|
-
- **`--font-sans
|
|
43
|
-
- **`--font-weight-medium
|
|
42
|
+
- **`--font-sans`:** Font family used for text content.
|
|
43
|
+
- **`--font-weight-medium`:** Medium font weight for text (typically used for buttons and
|
|
44
44
|
interactive elements).
|
|
45
|
-
- **`--font-weight-semibold
|
|
45
|
+
- **`--font-weight-semibold`:** Semibold font weight for text (typically used for headings or
|
|
46
46
|
emphasized text).
|
|
47
47
|
|
|
48
48
|
### Layout
|
|
49
49
|
|
|
50
|
-
- **`--radius
|
|
50
|
+
- **`--radius`:** Border radius used for UI elements.
|
|
51
51
|
|
|
52
52
|
## Usage
|
|
53
53
|
|
|
54
|
-
### Global
|
|
54
|
+
### Global theming
|
|
55
55
|
|
|
56
56
|
Apply custom properties to affect all dApp Kit components:
|
|
57
57
|
|
|
@@ -67,7 +67,7 @@ Apply custom properties to affect all dApp Kit components:
|
|
|
67
67
|
}
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
### Component-
|
|
70
|
+
### Component-specific theming
|
|
71
71
|
|
|
72
72
|
Target specific components:
|
|
73
73
|
|
|
@@ -84,7 +84,7 @@ mysten-dapp-kit-connect-modal {
|
|
|
84
84
|
}
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
### Dark
|
|
87
|
+
### Dark mode
|
|
88
88
|
|
|
89
89
|
Implement dark mode by overriding the custom properties:
|
|
90
90
|
|
|
@@ -126,7 +126,7 @@ Or use a class-based approach:
|
|
|
126
126
|
</div>
|
|
127
127
|
```
|
|
128
128
|
|
|
129
|
-
## Example:
|
|
129
|
+
## Example: complete theme
|
|
130
130
|
|
|
131
131
|
Here's a complete theme example matching a custom design system:
|
|
132
132
|
|
|
@@ -159,7 +159,7 @@ Here's a complete theme example matching a custom design system:
|
|
|
159
159
|
}
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
-
## Framework
|
|
162
|
+
## Framework integration
|
|
163
163
|
|
|
164
164
|
### React
|
|
165
165
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Connect Button
|
|
2
2
|
|
|
3
|
-
> Framework-agnostic web component
|
|
3
|
+
> Framework-agnostic web component providing a complete wallet connection UI for Sui dApps.
|
|
4
4
|
|
|
5
5
|
The `<mysten-dapp-kit-connect-button>` Web Component provides a complete wallet connection UI. It
|
|
6
6
|
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.
|
|
|
10
10
|
> page reload. This provides a seamless user experience but can be
|
|
11
11
|
> [disabled](../dapp-kit-instance#disabling-auto-connect) if needed.
|
|
12
12
|
|
|
13
|
-
## Basic
|
|
13
|
+
## Basic usage
|
|
14
14
|
|
|
15
15
|
### Vanilla
|
|
16
16
|
|
|
@@ -51,12 +51,12 @@ The connect button component automatically handles:
|
|
|
51
51
|
|
|
52
52
|
## Properties
|
|
53
53
|
|
|
54
|
-
- **instance
|
|
54
|
+
- **instance:** The dApp Kit instance
|
|
55
55
|
- **modalOptions** (optional) - Configuration options for the connect modal
|
|
56
|
-
- `filterFn
|
|
57
|
-
- `sortFn
|
|
56
|
+
- `filterFn`: Function to filter available wallets
|
|
57
|
+
- `sortFn`: Function to sort available wallets
|
|
58
58
|
|
|
59
|
-
## Custom
|
|
59
|
+
## Custom button text
|
|
60
60
|
|
|
61
61
|
Use the default slot to customize the button text when not connected:
|
|
62
62
|
|
|
@@ -66,12 +66,12 @@ Use the default slot to customize the button text when not connected:
|
|
|
66
66
|
</mysten-dapp-kit-connect-button>
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
## Modal
|
|
69
|
+
## Modal integration
|
|
70
70
|
|
|
71
71
|
The connect button automatically manages its own modal. You don't need to add a separate
|
|
72
72
|
`<mysten-dapp-kit-connect-modal>` component when using the connect button.
|
|
73
73
|
|
|
74
|
-
## Connected
|
|
74
|
+
## Connected state
|
|
75
75
|
|
|
76
76
|
When a wallet is connected, the button transforms into an account menu that displays:
|
|
77
77
|
|
|
@@ -83,7 +83,7 @@ When a wallet is connected, the button transforms into an account menu that disp
|
|
|
83
83
|
- Managing connection
|
|
84
84
|
- Disconnecting
|
|
85
85
|
|
|
86
|
-
## Server-
|
|
86
|
+
## Server-side rendering (SSR)
|
|
87
87
|
|
|
88
88
|
The `<mysten-dapp-kit-connect-button>` Web Component can be only client-side rendered, as wallets
|
|
89
89
|
are detected in the browser. For Next.js guide see [here](../getting-started/next-js).
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Connect Modal
|
|
2
2
|
|
|
3
|
-
> Framework-agnostic web component for wallet selection
|
|
3
|
+
> Framework-agnostic web component for wallet selection and connection in Sui dApps.
|
|
4
4
|
|
|
5
5
|
The `<mysten-dapp-kit-connect-modal>` Web Component provides a modal dialog for wallet connection.
|
|
6
6
|
While most apps should use the [`Connect Button`](./connect-button) which includes an integrated
|
|
7
7
|
modal, the standalone modal is useful for advanced scenarios requiring custom trigger mechanisms.
|
|
8
8
|
|
|
9
|
-
## When to
|
|
9
|
+
## When to use
|
|
10
10
|
|
|
11
11
|
Use the standalone modal when you need:
|
|
12
12
|
|
|
13
|
-
- **Custom trigger elements
|
|
14
|
-
- **Complex UI flows
|
|
15
|
-
- **Programmatic control
|
|
16
|
-
- **Multiple triggers
|
|
13
|
+
- **Custom trigger elements:** Menu items, keyboard shortcuts, or other non-button triggers
|
|
14
|
+
- **Complex UI flows:** Integration into existing navigation or custom wallet management interfaces
|
|
15
|
+
- **Programmatic control:** Opening the modal based on application logic or user actions
|
|
16
|
+
- **Multiple triggers:** Different parts of your UI that can open the same modal
|
|
17
17
|
|
|
18
18
|
For standard wallet connection with a button, use the [Connect Button](./connect-button) component
|
|
19
19
|
instead.
|
|
20
20
|
|
|
21
|
-
## Basic
|
|
21
|
+
## Basic usage
|
|
22
22
|
|
|
23
23
|
### Vanilla
|
|
24
24
|
|
|
@@ -90,8 +90,8 @@ DApp Kit React bindings provide a [React wrapper](../react/components/connect-mo
|
|
|
90
90
|
|
|
91
91
|
## Properties
|
|
92
92
|
|
|
93
|
-
- **instance
|
|
94
|
-
- **open
|
|
93
|
+
- **instance:** The dApp Kit instance
|
|
94
|
+
- **open:** Boolean to control modal visibility programmatically
|
|
95
95
|
- **filterFn** (optional) - Function to filter available wallets
|
|
96
96
|
- Type: `(wallet: UiWallet, index: number, array: UiWallet[]) => boolean`
|
|
97
97
|
- **sortFn** (optional) - Function to sort available wallets
|
|
@@ -121,11 +121,11 @@ await modal?.close('user-cancelled');
|
|
|
121
121
|
|
|
122
122
|
The modal fires several events during its lifecycle:
|
|
123
123
|
|
|
124
|
-
- **open
|
|
125
|
-
- **opened
|
|
126
|
-
- **close
|
|
127
|
-
- **closed
|
|
128
|
-
- **cancel
|
|
124
|
+
- **open:** Fired before the modal opens (cancelable)
|
|
125
|
+
- **opened:** Fired after the modal has fully opened
|
|
126
|
+
- **close:** Fired before the modal closes (cancelable)
|
|
127
|
+
- **closed:** Fired after the modal has fully closed
|
|
128
|
+
- **cancel:** Fired when clicking backdrop or pressing Escape (cancelable)
|
|
129
129
|
|
|
130
130
|
```js
|
|
131
131
|
const modal = document.querySelector('mysten-dapp-kit-connect-modal');
|
|
@@ -151,7 +151,7 @@ modal?.addEventListener('cancel', (event) => {
|
|
|
151
151
|
|
|
152
152
|
## Examples
|
|
153
153
|
|
|
154
|
-
### Programmatic
|
|
154
|
+
### Programmatic control
|
|
155
155
|
|
|
156
156
|
```js
|
|
157
157
|
const modal = document.querySelector('mysten-dapp-kit-connect-modal');
|
|
@@ -171,7 +171,7 @@ async function performAction() {
|
|
|
171
171
|
}
|
|
172
172
|
```
|
|
173
173
|
|
|
174
|
-
## Server-
|
|
174
|
+
## Server-side rendering (SSR)
|
|
175
175
|
|
|
176
176
|
The `<mysten-dapp-kit-connect-modal>` Web Component can be only client-side rendered, as wallets are
|
|
177
177
|
detected in the browser. For Next.js guide see [here](../getting-started/next-js).
|
package/dist/kiosk/from-v1.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Migrating from Kiosk SDK V1
|
|
2
2
|
|
|
3
|
-
> Migrate from Kiosk SDK v1 to the current version
|
|
3
|
+
> Migrate from Kiosk SDK v1 to the current version with the builder-pattern API.
|
|
4
4
|
|
|
5
5
|
The original version of Kiosk SDK provided basic experimentation with the Kiosk API. The new version
|
|
6
6
|
of the SDK (0.7+) provides a more robust experience for building kiosk/transfer policy transactions.
|
package/dist/kiosk/index.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# Kiosk SDK
|
|
2
2
|
|
|
3
|
-
> TypeScript SDK for interacting with Sui Kiosk
|
|
3
|
+
> TypeScript SDK for interacting with Sui Kiosk onchain commerce.
|
|
4
4
|
|
|
5
|
-
Kiosk SDK is a tool to interact with Sui
|
|
6
|
-
build transactions to interact, and extend Kiosk to support custom rules.
|
|
5
|
+
Kiosk SDK is a tool to interact with Sui and Mysten Kiosk. You can use it to query kiosk related
|
|
6
|
+
data, build transactions to interact, and extend Kiosk to support custom rules.
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
@@ -14,9 +14,9 @@ npm i @mysten/kiosk
|
|
|
14
14
|
## About
|
|
15
15
|
|
|
16
16
|
The Kiosk SDK exports a client extension that integrates with Sui clients. Add it to your client
|
|
17
|
-
using `$extend(kiosk())` to access kiosk functionality
|
|
17
|
+
using `$extend(kiosk())` to access kiosk functionality through `client.kiosk`.
|
|
18
18
|
|
|
19
|
-
>
|
|
19
|
+
> The Kiosk SDK requires `SuiJsonRpcClient` or `SuiGraphQLClient`. It does not work with
|
|
20
20
|
> `SuiGrpcClient` because it uses event queries that are not available in gRPC.
|
|
21
21
|
|
|
22
22
|
- [Read more about setting up the Kiosk client extension](/kiosk/kiosk-client/introduction)
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# Kiosk Client
|
|
2
2
|
|
|
3
|
-
> Introduction to the KioskClient for querying and managing kiosks
|
|
3
|
+
> Introduction to the KioskClient extension for querying and managing kiosks on Sui.
|
|
4
4
|
|
|
5
5
|
The Kiosk SDK exports a client extension that provides all Kiosk functionality.
|
|
6
6
|
|
|
7
|
-
> We recommend you keep only one client instance throughout your
|
|
7
|
+
> We recommend you keep only one client instance throughout your app or script. For example, in
|
|
8
8
|
> React, you'd use a context to provide the client.
|
|
9
9
|
|
|
10
|
-
>
|
|
10
|
+
> The Kiosk SDK requires `SuiJsonRpcClient` or `SuiGraphQLClient`. It does not work with
|
|
11
11
|
> `SuiGrpcClient` because it uses event queries that are not available in gRPC.
|
|
12
12
|
|
|
13
13
|
## Setting up the kiosk extension
|
|
@@ -15,8 +15,8 @@ The Kiosk SDK exports a client extension that provides all Kiosk functionality.
|
|
|
15
15
|
Add the kiosk extension to your Sui client using `$extend()`. The extension currently supports
|
|
16
16
|
`mainnet` and `testnet`. See the next section for usage on other networks.
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
require constantly changing the package IDs).
|
|
18
|
+
Mysten Kiosk rules and extensions are not supported in Devnet due to network wipes (that would
|
|
19
|
+
require constantly changing the package IDs).
|
|
20
20
|
|
|
21
21
|
```typescript
|
|
22
22
|
|
|
@@ -29,7 +29,7 @@ const client = new SuiJsonRpcClient({
|
|
|
29
29
|
const { kioskOwnerCaps } = await client.kiosk.getOwnedKiosks({ address: '0x...' });
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
### Using the kiosk extension on
|
|
32
|
+
### Using the kiosk extension on Devnet or Localnet
|
|
33
33
|
|
|
34
34
|
To use all the functionality of Kiosk SDK outside of `mainnet` and `testnet`, pass the `packageIds`
|
|
35
35
|
for the rules and extensions you want to use.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Examples
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Practical code examples for kiosk transactions including minting, listing, and purchasing.
|
|
4
4
|
|
|
5
|
-
The following
|
|
5
|
+
The following app-focused examples demonstrate how to use the SDK to interact with Kiosk.
|
|
6
6
|
|
|
7
7
|
## Minting into Kiosk example
|
|
8
8
|
|
|
9
|
-
For every scenario using Kiosk in
|
|
9
|
+
For every scenario using Kiosk in apps, the user who has connected their wallet either has at least
|
|
10
10
|
one kiosk already or you must create it for them.
|
|
11
11
|
|
|
12
12
|
The SDK supports the scenario of `silently` creating the kiosk, as part of our Programmable
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# KioskTransaction
|
|
2
2
|
|
|
3
|
-
> Build kiosk transactions for listing, purchasing, and managing items
|
|
3
|
+
> Build kiosk transactions for listing, purchasing, and managing items on Sui.
|
|
4
4
|
|
|
5
5
|
`KioskTransaction` is the client to build transactions that involve Kiosk. It's used similar to
|
|
6
6
|
`Transaction`, and helps in building a transaction.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Managing Owned Kiosk
|
|
2
2
|
|
|
3
|
-
> Manage kiosk items
|
|
3
|
+
> Manage kiosk items by placing, listing, delisting, and withdrawing using the Kiosk SDK.
|
|
4
4
|
|
|
5
5
|
The kiosk extension (`client.kiosk`) helps in managing a kiosk.
|
|
6
6
|
|
|
@@ -9,7 +9,7 @@ create a `KioskTransaction`.
|
|
|
9
9
|
|
|
10
10
|
## Available functions
|
|
11
11
|
|
|
12
|
-
### take
|
|
12
|
+
### `take`
|
|
13
13
|
|
|
14
14
|
Removes an item from the Kiosk and returns a `TransactionArgument` to use it in a different
|
|
15
15
|
Programmable Transaction Block (PTB) call.
|
|
@@ -37,7 +37,7 @@ kioskTx.finalize();
|
|
|
37
37
|
await signAndExecuteTransaction({ tx: tx });
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
### transfer
|
|
40
|
+
### `transfer`
|
|
41
41
|
|
|
42
42
|
Similar to `take`, but transfers the item to an address internally.
|
|
43
43
|
|
|
@@ -61,7 +61,7 @@ kioskTx
|
|
|
61
61
|
await signAndExecuteTransaction({ tx: tx });
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
### place
|
|
64
|
+
### `place`
|
|
65
65
|
|
|
66
66
|
Places an item in the kiosk.
|
|
67
67
|
|
|
@@ -83,7 +83,7 @@ kioskTx
|
|
|
83
83
|
await signAndExecuteTransaction({ tx: tx });
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
### list
|
|
86
|
+
### `list`
|
|
87
87
|
|
|
88
88
|
Lists an item for sale (the item must be in the kiosk).
|
|
89
89
|
|
|
@@ -106,7 +106,7 @@ kioskTx
|
|
|
106
106
|
await signAndExecuteTransaction({ tx: tx });
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
### placeAndList
|
|
109
|
+
### `placeAndList`
|
|
110
110
|
|
|
111
111
|
List an item for sale by first placing it in the kiosk (places the item and lists it for sale). It's
|
|
112
112
|
a short hand for `place()` and `list()`.
|
|
@@ -130,7 +130,7 @@ kioskTx
|
|
|
130
130
|
await signAndExecuteTransaction({ tx: tx });
|
|
131
131
|
```
|
|
132
132
|
|
|
133
|
-
### delist
|
|
133
|
+
### `delist`
|
|
134
134
|
|
|
135
135
|
Removes the listing, keeping the item placed in the kiosk.
|
|
136
136
|
|
|
@@ -152,7 +152,7 @@ kioskTx
|
|
|
152
152
|
await signAndExecuteTransaction({ tx: tx });
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
-
### withdraw
|
|
155
|
+
### `withdraw`
|
|
156
156
|
|
|
157
157
|
Withdraw (all or specific amount) from a kiosk.
|
|
158
158
|
|
|
@@ -168,7 +168,7 @@ kioskTx.withdraw('address_to_transfer_funds', 100000n).finalize();
|
|
|
168
168
|
await signAndExecuteTransaction({ tx: tx });
|
|
169
169
|
```
|
|
170
170
|
|
|
171
|
-
### borrowTx (callback)
|
|
171
|
+
### `borrowTx` (callback)
|
|
172
172
|
|
|
173
173
|
Borrows an item from a kiosk. This function follows the `callback` approach, similar to the
|
|
174
174
|
ownerCap. The return of the item happens automatically after the execution of the callback.
|
|
@@ -199,10 +199,10 @@ kioskTx
|
|
|
199
199
|
await signAndExecuteTransaction({ tx: tx });
|
|
200
200
|
```
|
|
201
201
|
|
|
202
|
-
### borrow / return
|
|
202
|
+
### `borrow` / `return`
|
|
203
203
|
|
|
204
204
|
Similar to `borrowTx`, borrows an item from the kiosk, but returns two transaction arguments: `item`
|
|
205
|
-
|
|
205
|
+
and `promise`. You can use the `item` in your PTBs, but you must always call the `return()` function
|
|
206
206
|
with the `item` and the `Promise`.
|
|
207
207
|
|
|
208
208
|
```typescript
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Purchasing from a kiosk
|
|
2
2
|
|
|
3
|
-
> Purchase items from kiosks with transfer policy resolution
|
|
3
|
+
> Purchase items from kiosks with automatic transfer policy rule resolution.
|
|
4
4
|
|
|
5
5
|
One of the base functionalities of the SDK is a seamless purchasing flow, allowing for ease of rules
|
|
6
6
|
resolving (hiding away the calls). The SDK supports all four rules by default, and works for
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Querying
|
|
2
2
|
|
|
3
|
-
> Query kiosk contents, items, and transfer policies
|
|
3
|
+
> Query kiosk contents, owned kiosks, items, and transfer policies using the Kiosk SDK.
|
|
4
4
|
|
|
5
5
|
You can use `client.kiosk` to query kiosk data. It helps you get owned kiosks for an address, as
|
|
6
6
|
well as fetching all the contents of a specified kiosk.
|