@mysten/dapp-kit 1.0.4 → 1.0.6
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/CHANGELOG.md +26 -0
- package/docs/index.md +12 -10
- package/docs/llms-index.md +19 -24
- package/docs/rpc-hooks.md +15 -10
- package/docs/slush.md +5 -5
- package/docs/sui-client-provider.md +10 -5
- package/docs/themes.md +4 -2
- package/docs/wallet-components/ConnectButton.md +4 -4
- package/docs/wallet-components/ConnectModal.md +13 -12
- package/docs/wallet-hooks/useAccounts.md +3 -3
- package/docs/wallet-hooks/useAutoConnectWallet.md +5 -5
- package/docs/wallet-hooks/useConnectWallet.md +6 -6
- package/docs/wallet-hooks/useCurrentAccount.md +2 -2
- package/docs/wallet-hooks/useCurrentWallet.md +16 -16
- package/docs/wallet-hooks/useDisconnectWallet.md +2 -2
- package/docs/wallet-hooks/useSignAndExecuteTransaction.md +3 -3
- package/docs/wallet-hooks/useSignPersonalMessage.md +3 -3
- package/docs/wallet-hooks/useSignTransaction.md +3 -3
- package/docs/wallet-hooks/useSwitchAccount.md +5 -5
- package/docs/wallet-hooks/useWallets.md +7 -7
- package/docs/wallet-provider.md +11 -10
- package/package.json +10 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @mysten/dapp-kit
|
|
2
2
|
|
|
3
|
+
## 1.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f7de3e5: Restore type definitions in published package.
|
|
8
|
+
- f7de3e5: Restore docs in published tarballs.
|
|
9
|
+
- Updated dependencies [f7de3e5]
|
|
10
|
+
- @mysten/slush-wallet@1.0.5
|
|
11
|
+
- @mysten/sui@2.16.2
|
|
12
|
+
- @mysten/utils@0.3.3
|
|
13
|
+
- @mysten/wallet-standard@0.20.3
|
|
14
|
+
|
|
15
|
+
## 1.0.5
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 9e067cf: Validate the new per-package release flow end-to-end across every public @mysten package.
|
|
20
|
+
No functional changes — empty patch bump to force the orchestrator to dispatch every
|
|
21
|
+
release-<pkg>.yml workflow with `dry_run=false` so each package publishes via OIDC trusted
|
|
22
|
+
publishing.
|
|
23
|
+
- Updated dependencies [9e067cf]
|
|
24
|
+
- @mysten/slush-wallet@1.0.4
|
|
25
|
+
- @mysten/sui@2.16.1
|
|
26
|
+
- @mysten/utils@0.3.2
|
|
27
|
+
- @mysten/wallet-standard@0.20.2
|
|
28
|
+
|
|
3
29
|
## 1.0.4
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
package/docs/index.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# Sui dApp Kit (Legacy)
|
|
2
2
|
|
|
3
|
-
> dApp Kit API reference for @mysten/dapp-kit
|
|
3
|
+
> Legacy dApp Kit API reference for the deprecated @mysten/dapp-kit package using JSON RPC.
|
|
4
4
|
|
|
5
|
-
> **Warning:** **Deprecated - JSON RPC Only**: This legacy version of `@mysten/dapp-kit` only works
|
|
6
|
-
>
|
|
7
|
-
>
|
|
5
|
+
> **Warning:** **Deprecated - JSON RPC Only**: This legacy version of `@mysten/dapp-kit` only works with the
|
|
6
|
+
> deprecated JSON RPC API and will not be updated to support gRPC or GraphQL. For new projects, use
|
|
7
|
+
> [`@mysten/dapp-kit-core` and `@mysten/dapp-kit-react`](/dapp-kit).
|
|
8
8
|
|
|
9
|
-
The Sui dApp Kit is a set of React components, hooks, and utilities to help you build
|
|
9
|
+
The Sui dApp Kit is a set of React components, hooks, and utilities to help you build an app for the
|
|
10
10
|
Sui ecosystem. Its hooks and components provide an interface for querying data from the Sui network
|
|
11
11
|
and connecting to Sui wallets.
|
|
12
12
|
|
|
13
|
-
### Core
|
|
13
|
+
### Core features
|
|
14
14
|
|
|
15
15
|
Some of the core features of the dApp Kit include:
|
|
16
16
|
|
|
17
|
-
- Query hooks to get the information your
|
|
17
|
+
- Query hooks to get the information your app needs
|
|
18
18
|
- Automatic wallet state management
|
|
19
19
|
- Support for all Sui wallets
|
|
20
20
|
- Pre-built React components
|
|
@@ -35,6 +35,7 @@ following example. The props available on the providers are covered in more deta
|
|
|
35
35
|
respective pages.
|
|
36
36
|
|
|
37
37
|
```tsx
|
|
38
|
+
|
|
38
39
|
// Config options for the networks you want to connect to
|
|
39
40
|
const { networkConfig } = createNetworkConfig({
|
|
40
41
|
localnet: { url: getFullnodeUrl('localnet') },
|
|
@@ -58,10 +59,10 @@ function App() {
|
|
|
58
59
|
## Using UI components to connect to a wallet
|
|
59
60
|
|
|
60
61
|
The dApp Kit provides a set of flexible UI components that you can use to connect and manage wallet
|
|
61
|
-
accounts from your
|
|
62
|
+
accounts from your app. The components are built on top of
|
|
62
63
|
[Radix UI](https://www.radix-ui.com/primitives) and are customizable.
|
|
63
64
|
|
|
64
|
-
To use the provided UI components, import the dApp Kit CSS stylesheet into your
|
|
65
|
+
To use the provided UI components, import the dApp Kit CSS stylesheet into your app. For more
|
|
65
66
|
information regarding customization options, check out the respective documentation pages for the
|
|
66
67
|
components and [themes](/dapp-kit/legacy/themes).
|
|
67
68
|
|
|
@@ -77,6 +78,7 @@ to use these query hooks, check out the
|
|
|
77
78
|
[react-query documentation](https://tanstack.com/query/latest/docs/react/overview).
|
|
78
79
|
|
|
79
80
|
```tsx
|
|
81
|
+
|
|
80
82
|
function MyComponent() {
|
|
81
83
|
const { data, isPending, error, refetch } = useSuiClientQuery('getOwnedObjects', {
|
|
82
84
|
owner: '0x123',
|
|
@@ -88,4 +90,4 @@ function MyComponent() {
|
|
|
88
90
|
|
|
89
91
|
return <pre>{JSON.stringify(data, null, 2)}</pre>;
|
|
90
92
|
}
|
|
91
|
-
```
|
|
93
|
+
```
|
package/docs/llms-index.md
CHANGED
|
@@ -1,27 +1,22 @@
|
|
|
1
1
|
# dApp Kit (Legacy)
|
|
2
|
-
|
|
3
2
|
> Build Sui dapps in React with @mysten/dapp-kit
|
|
4
3
|
|
|
5
|
-
- [Sui dApp Kit (Legacy)](
|
|
6
|
-
- [SuiClientProvider](./sui-client-provider.md): React provider for
|
|
7
|
-
- [
|
|
8
|
-
- [WalletProvider](./wallet-provider.md): React provider for wallet connections
|
|
9
|
-
- [ConnectButton](./wallet-components/ConnectButton.md): React
|
|
10
|
-
- [ConnectModal](./wallet-components/ConnectModal.md): React
|
|
11
|
-
- [
|
|
12
|
-
- [
|
|
13
|
-
|
|
14
|
-
- [
|
|
15
|
-
- [
|
|
16
|
-
- [
|
|
17
|
-
- [useDisconnectWallet](./wallet-hooks/useDisconnectWallet.md):
|
|
18
|
-
- [
|
|
19
|
-
|
|
20
|
-
- [
|
|
21
|
-
|
|
22
|
-
- [
|
|
23
|
-
|
|
24
|
-
- [useSwitchAccount](./wallet-hooks/useSwitchAccount.md): Switch the active wallet account
|
|
25
|
-
- [useWallets](./wallet-hooks/useWallets.md): List available wallet extensions
|
|
26
|
-
- [Slush Integration](./slush.md): Slush wallet integration for dApp Kit
|
|
27
|
-
- [Themes](./themes.md): theming API for dApp Kit components
|
|
4
|
+
- [Sui dApp Kit (Legacy)](..md): Legacy dApp Kit API reference for the deprecated @mysten/dapp-kit package using JSON RPC.
|
|
5
|
+
- [SuiClientProvider](./sui-client-provider.md): React provider for managing the active SuiJsonRpcClient in legacy dApp Kit.
|
|
6
|
+
- [RPC Hooks](./rpc-hooks.md): React hooks for querying the Sui blockchain using JSON RPC methods.
|
|
7
|
+
- [WalletProvider](./wallet-provider.md): React context provider for wallet connections in legacy dApp Kit.
|
|
8
|
+
- [ConnectButton](./wallet-components/ConnectButton.md): Legacy React button component for connecting and disconnecting a Sui wallet.
|
|
9
|
+
- [ConnectModal](./wallet-components/ConnectModal.md): Legacy React modal component that guides users through connecting their wallet.
|
|
10
|
+
- [useWallets](./wallet-hooks/useWallets.md): Legacy React hook to list available wallet extensions sorted by priority.
|
|
11
|
+
- [useAccounts](./wallet-hooks/useAccounts.md): Legacy React hook to list connected wallet accounts authorized by the app.
|
|
12
|
+
- [useCurrentWallet](./wallet-hooks/useCurrentWallet.md): Legacy React hook to get the currently connected wallet and connection status.
|
|
13
|
+
- [useCurrentAccount](./wallet-hooks/useCurrentAccount.md): Legacy React hook to get the currently selected wallet account.
|
|
14
|
+
- [useAutoConnectWallet](./wallet-hooks/useAutoConnectWallet.md): Legacy React hook to check the auto-connection status for the last connected wallet.
|
|
15
|
+
- [useConnectWallet](./wallet-hooks/useConnectWallet.md): Legacy React mutation hook to establish a connection with a specific wallet.
|
|
16
|
+
- [useDisconnectWallet](./wallet-hooks/useDisconnectWallet.md): Legacy React mutation hook to disconnect from the currently connected wallet.
|
|
17
|
+
- [useSwitchAccount](./wallet-hooks/useSwitchAccount.md): Legacy React mutation hook to switch the active wallet account.
|
|
18
|
+
- [useSignPersonalMessage](./wallet-hooks/useSignPersonalMessage.md): Legacy React hook to sign a personal message with the connected wallet.
|
|
19
|
+
- [useSignTransaction](./wallet-hooks/useSignTransaction.md): Legacy React hook to sign a transaction without executing it on the Sui network.
|
|
20
|
+
- [useSignAndExecuteTransaction](./wallet-hooks/useSignAndExecuteTransaction.md): Legacy React hook to sign and execute a transaction block on the Sui network.
|
|
21
|
+
- [Slush Integration](./slush.md): Integrate Slush wallet with the legacy dApp Kit WalletProvider.
|
|
22
|
+
- [Themes](./themes.md): Theming API for customizing the appearance of legacy dApp Kit components.
|
package/docs/rpc-hooks.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
#
|
|
1
|
+
# RPC Hooks
|
|
2
2
|
|
|
3
|
-
> React hooks for Sui RPC
|
|
3
|
+
> React hooks for querying the Sui blockchain using JSON RPC methods.
|
|
4
4
|
|
|
5
5
|
Sui dApp Kit ships with hooks for each of the RPC methods defined in the
|
|
6
6
|
[JSON RPC specification](https://docs.sui.io/sui-api-ref).
|
|
7
7
|
|
|
8
|
-
## useSuiClientQuery
|
|
8
|
+
## `useSuiClientQuery`
|
|
9
9
|
|
|
10
10
|
Load data from the Sui RPC using the `useSuiClientQuery` hook. This hook is a wrapper around the
|
|
11
|
-
[useQuery](https://tanstack.com/query/latest/docs/react/guides/queries) hook from
|
|
11
|
+
[`useQuery`](https://tanstack.com/query/latest/docs/react/guides/queries) hook from
|
|
12
12
|
@tanstack/react-query.
|
|
13
13
|
|
|
14
14
|
The hook takes the RPC method name as the first argument and any parameters as the second argument.
|
|
@@ -17,6 +17,7 @@ You can pass any additional `useQuery` options as the third argument. You can re
|
|
|
17
17
|
details on the full set of options available.
|
|
18
18
|
|
|
19
19
|
```tsx
|
|
20
|
+
|
|
20
21
|
function MyComponent() {
|
|
21
22
|
const { data, isPending, isError, error, refetch } = useSuiClientQuery(
|
|
22
23
|
'getOwnedObjects',
|
|
@@ -38,11 +39,11 @@ function MyComponent() {
|
|
|
38
39
|
}
|
|
39
40
|
```
|
|
40
41
|
|
|
41
|
-
## useSuiClientQueries
|
|
42
|
+
## `useSuiClientQueries`
|
|
42
43
|
|
|
43
44
|
You can fetch a variable number of Sui RPC queries using the `useSuiClientQueries` hook. This hook
|
|
44
45
|
is a wrapper around the
|
|
45
|
-
[useQueries](https://tanstack.com/query/latest/docs/react/reference/useQueries) hook from
|
|
46
|
+
[`useQueries`](https://tanstack.com/query/latest/docs/react/reference/useQueries) hook from
|
|
46
47
|
@tanstack/react-query.
|
|
47
48
|
|
|
48
49
|
The `queries` value is an array of query option objects identical to the `useSuiClientQuery` hook.
|
|
@@ -51,6 +52,7 @@ The `combine` parameter is optional. Use this parameter to combine the results o
|
|
|
51
52
|
single value. The result is structurally shared to be as referentially stable as possible.
|
|
52
53
|
|
|
53
54
|
```tsx
|
|
55
|
+
|
|
54
56
|
function MyComponent() {
|
|
55
57
|
const { data, isPending, isError } = useSuiClientQueries({
|
|
56
58
|
queries: [
|
|
@@ -91,13 +93,14 @@ function MyComponent() {
|
|
|
91
93
|
}
|
|
92
94
|
```
|
|
93
95
|
|
|
94
|
-
## useSuiClientInfiniteQuery
|
|
96
|
+
## `useSuiClientInfiniteQuery`
|
|
95
97
|
|
|
96
98
|
For RPC methods that support pagination, dApp Kit also implements a `useSuiClientInfiniteQuery`
|
|
97
99
|
hook. For more details check out the
|
|
98
100
|
[`useInfiniteQuery` documentation](https://tanstack.com/query/latest/docs/react/guides/infinite-queries).
|
|
99
101
|
|
|
100
102
|
```tsx
|
|
103
|
+
|
|
101
104
|
function MyComponent() {
|
|
102
105
|
const { data, isPending, isError, error, isFetching, fetchNextPage, hasNextPage } =
|
|
103
106
|
useSuiClientInfiniteQuery('getOwnedObjects', {
|
|
@@ -116,13 +119,14 @@ function MyComponent() {
|
|
|
116
119
|
}
|
|
117
120
|
```
|
|
118
121
|
|
|
119
|
-
## useSuiClientMutation
|
|
122
|
+
## `useSuiClientMutation`
|
|
120
123
|
|
|
121
124
|
For RPC methods that mutate state, dApp Kit implements a `useSuiClientMutation` hook. Use this hook
|
|
122
125
|
with any RPC method to imperatively call the RPC method. For more details, check out the
|
|
123
126
|
[`useMutation` documentation](https://tanstack.com/query/latest/docs/react/guides/mutations).
|
|
124
127
|
|
|
125
128
|
```tsx
|
|
129
|
+
|
|
126
130
|
function MyComponent() {
|
|
127
131
|
const { mutate } = useSuiClientMutation('dryRunTransactionBlock');
|
|
128
132
|
|
|
@@ -140,11 +144,12 @@ function MyComponent() {
|
|
|
140
144
|
}
|
|
141
145
|
```
|
|
142
146
|
|
|
143
|
-
## useResolveSuiNSName
|
|
147
|
+
## `useResolveSuiNSName`
|
|
144
148
|
|
|
145
149
|
To get the SuiNS name for a given address, use the `useResolveSuiNSName` hook.
|
|
146
150
|
|
|
147
151
|
```tsx
|
|
152
|
+
|
|
148
153
|
function MyComponent() {
|
|
149
154
|
const { data, isPending } = useResolveSuiNSName('0x123');
|
|
150
155
|
|
|
@@ -158,4 +163,4 @@ function MyComponent() {
|
|
|
158
163
|
|
|
159
164
|
return <div>Domain name not found</div>;
|
|
160
165
|
}
|
|
161
|
-
```
|
|
166
|
+
```
|
package/docs/slush.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
# Slush Integration
|
|
2
2
|
|
|
3
|
-
> Slush wallet
|
|
3
|
+
> Integrate Slush wallet with the legacy dApp Kit WalletProvider.
|
|
4
4
|
|
|
5
|
-
dApp Kit provides out-of-the-box opt-in support for the [Slush wallet](/slush-wallet/dapp).
|
|
5
|
+
The dApp Kit provides out-of-the-box opt-in support for the [Slush wallet](/slush-wallet/dapp).
|
|
6
6
|
|
|
7
7
|
## Setup
|
|
8
8
|
|
|
9
9
|
To enable support for Slush wallets, pass the `slushWallet` object to the `WalletProvider`
|
|
10
10
|
component. This object has the following properties:
|
|
11
11
|
|
|
12
|
-
- **`name
|
|
12
|
+
- **`name`:** The name of your app, shown to the user when connecting to the app.
|
|
13
13
|
|
|
14
14
|
```tsx
|
|
15
15
|
function App({ children }) {
|
|
@@ -25,5 +25,5 @@ function App({ children }) {
|
|
|
25
25
|
}
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
>
|
|
29
|
-
>
|
|
28
|
+
> In the connect modal, users with the Slush Wallet extension installed will only see the extension.
|
|
29
|
+
> If they do not have it, the connection defaults to the Slush web app.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# SuiClientProvider
|
|
2
2
|
|
|
3
|
-
> React provider for
|
|
3
|
+
> React provider for managing the active SuiJsonRpcClient in legacy dApp Kit.
|
|
4
4
|
|
|
5
5
|
The `SuiClientProvider` manages the active `SuiJsonRpcClient` that hooks and components use in the
|
|
6
6
|
dApp Kit.
|
|
@@ -14,6 +14,7 @@ hooks.
|
|
|
14
14
|
for the currently active network.
|
|
15
15
|
|
|
16
16
|
```tsx
|
|
17
|
+
|
|
17
18
|
// Config options for the networks you want to connect to
|
|
18
19
|
const { networkConfig } = createNetworkConfig({
|
|
19
20
|
localnet: { url: getJsonRpcFullnodeUrl('localnet') },
|
|
@@ -47,6 +48,7 @@ function App() {
|
|
|
47
48
|
The following example demonstrates a `SuiClientProvider` used as a controlled component.
|
|
48
49
|
|
|
49
50
|
```tsx
|
|
51
|
+
|
|
50
52
|
// Config options for the networks you want to connect to
|
|
51
53
|
const { networkConfig } = createNetworkConfig({
|
|
52
54
|
localnet: { url: getJsonRpcFullnodeUrl('localnet') },
|
|
@@ -70,11 +72,12 @@ function App() {
|
|
|
70
72
|
}
|
|
71
73
|
```
|
|
72
74
|
|
|
73
|
-
## SuiJsonRpcClient customization
|
|
75
|
+
## `SuiJsonRpcClient` customization
|
|
74
76
|
|
|
75
77
|
The following example demonstrates how to create a custom `SuiJsonRpcClient`.
|
|
76
78
|
|
|
77
79
|
```tsx
|
|
80
|
+
|
|
78
81
|
// Config options for the networks you want to connect to
|
|
79
82
|
const networks = {
|
|
80
83
|
localnet: { url: getJsonRpcFullnodeUrl('localnet') },
|
|
@@ -105,12 +108,13 @@ function App() {
|
|
|
105
108
|
}
|
|
106
109
|
```
|
|
107
110
|
|
|
108
|
-
## Using the SuiJsonRpcClient from the provider
|
|
111
|
+
## Using the `SuiJsonRpcClient` from the provider
|
|
109
112
|
|
|
110
113
|
To use the `SuiJsonRpcClient` from the provider, import the `useSuiClient` function from the
|
|
111
114
|
`@mysten/dapp-kit` module.
|
|
112
115
|
|
|
113
116
|
```tsx
|
|
117
|
+
|
|
114
118
|
function MyComponent() {
|
|
115
119
|
const client = useSuiClient();
|
|
116
120
|
|
|
@@ -141,7 +145,7 @@ function NetworkSelector() {
|
|
|
141
145
|
|
|
142
146
|
## Using network specific configuration
|
|
143
147
|
|
|
144
|
-
If your
|
|
148
|
+
If your app runs on multiple networks, the IDs for packages and other configurations might change,
|
|
145
149
|
depending on which network you're using. You can use `createNetworkConfig` to create per-network
|
|
146
150
|
configurations that your components can access.
|
|
147
151
|
|
|
@@ -153,6 +157,7 @@ to get the variables defined in your configuration.
|
|
|
153
157
|
- `useNetworkVariable` returns a specific variable from the network configuration
|
|
154
158
|
|
|
155
159
|
```tsx
|
|
160
|
+
|
|
156
161
|
// Config options for the networks you want to connect to
|
|
157
162
|
const { networkConfig, useNetworkVariable } = createNetworkConfig({
|
|
158
163
|
localnet: {
|
|
@@ -188,4 +193,4 @@ function YourApp() {
|
|
|
188
193
|
|
|
189
194
|
return <div>Package ID: {id}</div>;
|
|
190
195
|
}
|
|
191
|
-
```
|
|
196
|
+
```
|
package/docs/themes.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
# Themes
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Theming API for customizing the appearance of legacy dApp Kit components.
|
|
4
4
|
|
|
5
5
|
You can provide a theme to the `WalletProvider` component to customize the components in dApp Kit.
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
+
|
|
8
9
|
const App = () => {
|
|
9
10
|
return (
|
|
10
11
|
<WalletProvider theme={lightTheme}>
|
|
@@ -19,6 +20,7 @@ const App = () => {
|
|
|
19
20
|
To dynamically change the theme, you can provide multiple themes to the `WalletProvider` component:
|
|
20
21
|
|
|
21
22
|
```tsx
|
|
23
|
+
|
|
22
24
|
const App = () => {
|
|
23
25
|
return (
|
|
24
26
|
<WalletProvider
|
|
@@ -112,4 +114,4 @@ theme:
|
|
|
112
114
|
letterSpacing: '1',
|
|
113
115
|
},
|
|
114
116
|
};
|
|
115
|
-
```
|
|
117
|
+
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ConnectButton
|
|
2
2
|
|
|
3
|
-
> React
|
|
3
|
+
> Legacy React button component for connecting and disconnecting a Sui wallet.
|
|
4
4
|
|
|
5
5
|
The `ConnectButton` shows the user a button to connect and disconnect a wallet. It automatically
|
|
6
6
|
uses the connected state to show a **connect** or **disconnect** button.
|
|
@@ -15,8 +15,8 @@ uses the connected state to show a **connect** or **disconnect** button.
|
|
|
15
15
|
|
|
16
16
|
All props are optional.
|
|
17
17
|
|
|
18
|
-
- `connectText = "Connect Wallet"
|
|
18
|
+
- `connectText = "Connect Wallet"`: The text that displays in the button when the user is not
|
|
19
19
|
currently connected to a wallet.
|
|
20
|
-
- `walletFilter
|
|
20
|
+
- `walletFilter`: A filter function that receives a wallet instance, and returns a boolean
|
|
21
21
|
indicating whether the wallet should be displayed in the wallet list. By default, all wallets are
|
|
22
|
-
displayed.
|
|
22
|
+
displayed.
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# ConnectModal
|
|
2
2
|
|
|
3
|
-
> React
|
|
3
|
+
> Legacy React modal component that guides users through connecting their wallet.
|
|
4
4
|
|
|
5
|
-
ControlledConnectModalExample,
|
|
6
|
-
|
|
5
|
+
ControlledConnectModalExample,
|
|
6
|
+
UncontrolledConnectModalExample,
|
|
7
|
+
} from '../../../../examples/wallet-components-client';
|
|
7
8
|
|
|
8
9
|
The `ConnectModal` component opens a modal that guides the user through connecting their wallet to
|
|
9
|
-
the
|
|
10
|
+
the app.
|
|
10
11
|
|
|
11
12
|
## Controlled example
|
|
12
13
|
|
|
@@ -49,18 +50,18 @@ Click **Connect** to connect your wallet and see the previous code in action:
|
|
|
49
50
|
|
|
50
51
|
## Controlled props
|
|
51
52
|
|
|
52
|
-
- `open
|
|
53
|
-
- `onOpenChange
|
|
54
|
-
- `trigger
|
|
55
|
-
- `walletFilter
|
|
53
|
+
- `open`: The controlled open state of the dialog.
|
|
54
|
+
- `onOpenChange`: Event handler called when the open state of the dialog changes.
|
|
55
|
+
- `trigger`: The trigger button that opens the dialog.
|
|
56
|
+
- `walletFilter`: A filter function that receives a wallet instance, and returns a boolean
|
|
56
57
|
indicating whether the wallet should be displayed in the wallet list. By default, all wallets are
|
|
57
58
|
displayed.
|
|
58
59
|
|
|
59
60
|
## Uncontrolled props
|
|
60
61
|
|
|
61
|
-
- `defaultOpen
|
|
62
|
+
- `defaultOpen`: The open state of the dialog when it is initially rendered. Use when you do not
|
|
62
63
|
need to control its open state.
|
|
63
|
-
- `trigger
|
|
64
|
-
- `walletFilter
|
|
64
|
+
- `trigger`: The trigger button that opens the dialog.
|
|
65
|
+
- `walletFilter`: A filter function that receives a wallet instance, and returns a boolean
|
|
65
66
|
indicating whether the wallet should be displayed in the wallet list. By default, all wallets are
|
|
66
|
-
displayed.
|
|
67
|
+
displayed.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# useAccounts
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to list connected wallet accounts authorized by the app.
|
|
4
4
|
|
|
5
|
-
The `useAccounts` hook retrieves a list of connected accounts the
|
|
5
|
+
The `useAccounts` hook retrieves a list of connected accounts the app authorizes.
|
|
6
6
|
|
|
7
7
|
```ts
|
|
8
8
|
|
|
@@ -33,4 +33,4 @@ function MyComponent() {
|
|
|
33
33
|
- `chains`: The chains the account supports.
|
|
34
34
|
- `features`: The features the account supports.
|
|
35
35
|
- `label`: An optional user-friendly descriptive label or name for the account.
|
|
36
|
-
- `icon`: An optional user-friendly icon for the account.
|
|
36
|
+
- `icon`: An optional user-friendly icon for the account.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useAutoConnectWallet
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to check the auto-connection status for the last connected wallet.
|
|
4
4
|
|
|
5
5
|
The `useAutoConnectWallet` hook retrieves the status for the initial wallet auto-connection process.
|
|
6
6
|
|
|
@@ -22,8 +22,8 @@ function MyComponent() {
|
|
|
22
22
|
|
|
23
23
|
## Auto-connection status properties
|
|
24
24
|
|
|
25
|
-
- `disabled
|
|
26
|
-
- `idle
|
|
27
|
-
- `attempted
|
|
25
|
+
- `disabled`: When the auto-connection functionality is disabled.
|
|
26
|
+
- `idle`: When the initial auto-connection attempt hasn't been made yet.
|
|
27
|
+
- `attempted`: When an auto-connection attempt has been made. This means either that there is no
|
|
28
28
|
previously connected wallet, the previously connected wallet was not found, or that it has
|
|
29
|
-
successfully connected to a wallet.
|
|
29
|
+
successfully connected to a wallet.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useConnectWallet
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React mutation hook to establish a connection with a specific wallet.
|
|
4
4
|
|
|
5
5
|
The `useConnectWallet` hook is a mutation hook for establishing a connection to a specific wallet.
|
|
6
6
|
|
|
@@ -40,9 +40,9 @@ function MyComponent() {
|
|
|
40
40
|
|
|
41
41
|
## Connect arguments
|
|
42
42
|
|
|
43
|
-
- `args
|
|
44
|
-
- `wallet
|
|
45
|
-
- `accountAddress
|
|
43
|
+
- `args`: Arguments passed to the `connect` function of the wallet.
|
|
44
|
+
- `wallet`: The wallet to connect to.
|
|
45
|
+
- `accountAddress`: (optional) The address in the wallet to connect to.
|
|
46
46
|
|
|
47
|
-
- `options
|
|
48
|
-
[@tanstack/react-query](https://tanstack.com/query/latest/docs/react/guides/mutations).
|
|
47
|
+
- `options`: Options passed the `useMutation` hook from
|
|
48
|
+
[@tanstack/react-query](https://tanstack.com/query/latest/docs/react/guides/mutations).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useCurrentAccount
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to get the currently selected wallet account.
|
|
4
4
|
|
|
5
5
|
The `useCurrentAccount` hook retrieves the wallet account that is currently selected, if one exists.
|
|
6
6
|
|
|
@@ -33,4 +33,4 @@ function MyComponent() {
|
|
|
33
33
|
- `chains`: The chains the account supports.
|
|
34
34
|
- `features`: The features the account supports.
|
|
35
35
|
- `label`: An optional user-friendly descriptive label or name for the account.
|
|
36
|
-
- `icon`: An optional user-friendly icon for the account.
|
|
36
|
+
- `icon`: An optional user-friendly icon for the account.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# useCurrentWallet
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to get the currently connected wallet and connection status.
|
|
4
4
|
|
|
5
|
-
The `useCurrentWallet` hook retrieves the wallet that is currently connected to the
|
|
5
|
+
The `useCurrentWallet` hook retrieves the wallet that is currently connected to the app, if one
|
|
6
6
|
exists.
|
|
7
7
|
|
|
8
8
|
```ts
|
|
@@ -38,22 +38,22 @@ function MyComponent() {
|
|
|
38
38
|
|
|
39
39
|
## Wallet properties
|
|
40
40
|
|
|
41
|
-
- `name
|
|
42
|
-
- `version
|
|
43
|
-
- `icon
|
|
44
|
-
- `accounts
|
|
45
|
-
- `features
|
|
46
|
-
[wallet-standard](https://github.com/wallet-standard/wallet-standard) features implemented by
|
|
47
|
-
wallet.
|
|
48
|
-
- `chains
|
|
41
|
+
- `name`: The name of the wallet.
|
|
42
|
+
- `version`: The version of the wallet as a string.
|
|
43
|
+
- `icon`: A data URL of the wallet icon as an SVG.
|
|
44
|
+
- `accounts`: An array of accounts that are available in the wallet.
|
|
45
|
+
- `features`: An object with all the
|
|
46
|
+
[`wallet-standard`](https://github.com/wallet-standard/wallet-standard) features implemented by
|
|
47
|
+
the wallet.
|
|
48
|
+
- `chains`: An array of chain identifiers that the wallet supports.
|
|
49
49
|
|
|
50
50
|
## Connection status properties
|
|
51
51
|
|
|
52
52
|
- `connectionStatus`
|
|
53
|
-
- `disconnected
|
|
54
|
-
- `connecting
|
|
55
|
-
- `connected
|
|
53
|
+
- `disconnected`: When no wallet is connected to the app.
|
|
54
|
+
- `connecting`: When a wallet connection attempt is in progress.
|
|
55
|
+
- `connected`: When a wallet is connected to the app.
|
|
56
56
|
|
|
57
|
-
- `isDisconnected
|
|
58
|
-
- `isConnecting
|
|
59
|
-
- `isConnected
|
|
57
|
+
- `isDisconnected`: A derived boolean from the status variable above, provided for convenience.
|
|
58
|
+
- `isConnecting`: A derived boolean from the status variable above, provided for convenience.
|
|
59
|
+
- `isConnected`: A derived boolean from the status variable above, provided for convenience.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useDisconnectWallet
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React mutation hook to disconnect from the currently connected wallet.
|
|
4
4
|
|
|
5
5
|
The `useDisconnectWallet` hook is a mutation hook for disconnecting from an active wallet
|
|
6
6
|
connection, if currently connected.
|
|
@@ -23,4 +23,4 @@ function MyComponent() {
|
|
|
23
23
|
|
|
24
24
|
## Arguments
|
|
25
25
|
|
|
26
|
-
There are no arguments for `useDisconnectWallet`.
|
|
26
|
+
There are no arguments for `useDisconnectWallet`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useSignAndExecuteTransaction
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to sign and execute a transaction block on the Sui network.
|
|
4
4
|
|
|
5
5
|
Use the `useSignAndExecuteTransaction` hook to prompt the user to sign and execute a transaction
|
|
6
6
|
block with their wallet.
|
|
@@ -116,9 +116,9 @@ function MyComponent() {
|
|
|
116
116
|
|
|
117
117
|
- `transaction`: The transaction to sign and execute.
|
|
118
118
|
- `chain`: (optional) The chain identifier the transaction should be signed for. Defaults to the
|
|
119
|
-
active network of the
|
|
119
|
+
active network of the app.
|
|
120
120
|
- `execute`: (optional) A custom function to execute the transaction
|
|
121
121
|
|
|
122
122
|
In addition to these options, you can also pass any options that the
|
|
123
123
|
[SuiJsonRpcClient.signAndExecuteTransaction](/typedoc/classes/_mysten_sui.client.SuiJsonRpcClient.html#signAndExecuteTransactionBlock)
|
|
124
|
-
method accepts.
|
|
124
|
+
method accepts.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useSignPersonalMessage
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to sign a personal message with the connected wallet.
|
|
4
4
|
|
|
5
5
|
Use the `useSignPersonalMessage` hook to prompt the user to sign a message with their wallet.
|
|
6
6
|
|
|
@@ -51,9 +51,9 @@ function MyComponent() {
|
|
|
51
51
|
|
|
52
52
|
- `message`: The message to sign, as a `Uint8Array`.
|
|
53
53
|
- `chain`: (optional) The chain identifier the message should be signed for. Defaults to the active
|
|
54
|
-
network of the
|
|
54
|
+
network of the app.
|
|
55
55
|
|
|
56
56
|
## Result
|
|
57
57
|
|
|
58
58
|
- `signature`: The signature of the message, as a `Base64`-encoded `string`.
|
|
59
|
-
- `bytes`: The bytes of the message, as a `Base64`-encoded `string`.
|
|
59
|
+
- `bytes`: The bytes of the message, as a `Base64`-encoded `string`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useSignTransaction
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to sign a transaction without executing it on the Sui network.
|
|
4
4
|
|
|
5
5
|
Use the `useSignTransaction` hook to prompt the user to sign a transaction with their wallet.
|
|
6
6
|
|
|
@@ -59,9 +59,9 @@ function MyComponent() {
|
|
|
59
59
|
|
|
60
60
|
- `transactionBlock`: The transaction to sign.
|
|
61
61
|
- `chain`: (optional) The chain identifier the transaction should be signed for. Defaults to the
|
|
62
|
-
active network of the
|
|
62
|
+
active network of the app.
|
|
63
63
|
|
|
64
64
|
## Result
|
|
65
65
|
|
|
66
66
|
- `signature`: The signature of the message, as a Base64-encoded `string`.
|
|
67
|
-
- `bytes`: The serialized transaction bytes, as a Base64-encoded `string`.
|
|
67
|
+
- `bytes`: The serialized transaction bytes, as a Base64-encoded `string`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useSwitchAccount
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React mutation hook to switch the active wallet account.
|
|
4
4
|
|
|
5
5
|
The `useSwitchAccount` hook is a mutation hook for establishing a connection to a specific wallet.
|
|
6
6
|
|
|
@@ -40,8 +40,8 @@ function MyComponent() {
|
|
|
40
40
|
|
|
41
41
|
## Arguments
|
|
42
42
|
|
|
43
|
-
- `args
|
|
44
|
-
- `account
|
|
43
|
+
- `args`: Arguments passed to the `connect` function of the wallet.
|
|
44
|
+
- `account`: The account to switch to.
|
|
45
45
|
|
|
46
|
-
- `options
|
|
47
|
-
[@tanstack/react-query](https://tanstack.com/query/latest/docs/react/guides/mutations).
|
|
46
|
+
- `options`: Options passed the `useMutation` hook from
|
|
47
|
+
[@tanstack/react-query](https://tanstack.com/query/latest/docs/react/guides/mutations).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# useWallets
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Legacy React hook to list available wallet extensions sorted by priority.
|
|
4
4
|
|
|
5
5
|
The `useWallets` hook returns an array of wallets that are available to the user. The wallets are
|
|
6
6
|
sorted by their priority, with the highest priority wallet being the first in the array.
|
|
@@ -28,11 +28,11 @@ function MyComponent() {
|
|
|
28
28
|
|
|
29
29
|
## Wallet properties
|
|
30
30
|
|
|
31
|
-
- `name
|
|
32
|
-
- `version
|
|
33
|
-
- `icon
|
|
34
|
-
- `accounts
|
|
35
|
-
- `features
|
|
31
|
+
- `name`: The name of the wallet.
|
|
32
|
+
- `version`: The version of the wallet as a string.
|
|
33
|
+
- `icon`: A data URL of the wallet icon as an SVG.
|
|
34
|
+
- `accounts`: An array of accounts that are available in the wallet.
|
|
35
|
+
- `features`: An object with all the
|
|
36
36
|
[wallet-standard](https://github.com/wallet-standard/wallet-standard) features implemented by the
|
|
37
37
|
wallet.
|
|
38
|
-
- `chains
|
|
38
|
+
- `chains`: An array of chain identifiers that the wallet supports.
|
package/docs/wallet-provider.md
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
# WalletProvider
|
|
2
2
|
|
|
3
|
-
> React provider for wallet connections
|
|
3
|
+
> React context provider for wallet connections in legacy dApp Kit.
|
|
4
4
|
|
|
5
5
|
Use `WalletProvider` to set up the necessary context for your React app. Use it at the root of your
|
|
6
6
|
app, so that you can use any of the dApp Kit wallet components underneath it.
|
|
7
7
|
|
|
8
8
|
```tsx
|
|
9
|
+
|
|
9
10
|
function App() {
|
|
10
11
|
return (
|
|
11
12
|
<WalletProvider>
|
|
@@ -22,16 +23,16 @@ to other dApp Kit hooks and components.
|
|
|
22
23
|
|
|
23
24
|
All props are optional.
|
|
24
25
|
|
|
25
|
-
- `preferredWallets
|
|
26
|
-
- `walletFilter
|
|
26
|
+
- `preferredWallets`: A list of wallets that are sorted to the top of the wallet list.
|
|
27
|
+
- `walletFilter`: A filter function that accepts a wallet and returns a boolean. This filters the
|
|
27
28
|
list of wallets presented to users when selecting a wallet to connect from, ensuring that only
|
|
28
|
-
wallets that meet the
|
|
29
|
-
- `enableUnsafeBurner
|
|
30
|
-
- `autoConnect
|
|
29
|
+
wallets that meet the app requirements can connect.
|
|
30
|
+
- `enableUnsafeBurner`: Enables the development-only unsafe burner wallet, useful for testing.
|
|
31
|
+
- `autoConnect`: Enables automatically reconnecting to the most recently used wallet account upon
|
|
31
32
|
mounting.
|
|
32
|
-
- `slushWallet
|
|
33
|
+
- `slushWallet`: Enables and configures the Slush wallet. Read more about how to
|
|
33
34
|
[use the Slush integration](./slush).
|
|
34
|
-
- `storage
|
|
35
|
+
- `storage`: Configures how the most recently connected-to wallet account is stored. Set to `null`
|
|
35
36
|
to disable persisting state entirely. Defaults to using `localStorage` if it is available.
|
|
36
|
-
- `storageKey
|
|
37
|
-
- `theme
|
|
37
|
+
- `storageKey`: The key to use to store the most recently connected wallet account.
|
|
38
|
+
- `theme`: The theme to use for styling UI components. Defaults to using the light theme.
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "Mysten Labs <build@mystenlabs.com>",
|
|
4
4
|
"description": "A collection of React hooks and components for interacting with the Sui blockchain and wallets.",
|
|
5
5
|
"homepage": "https://sdk.mystenlabs.com/dapp-kit",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.6",
|
|
7
7
|
"license": "Apache-2.0",
|
|
8
8
|
"files": [
|
|
9
9
|
"CHANGELOG.md",
|
|
@@ -35,7 +35,6 @@
|
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tanstack/react-query": "^5.90.16",
|
|
39
38
|
"@testing-library/dom": "^10.4.1",
|
|
40
39
|
"@testing-library/jest-dom": "^6.9.1",
|
|
41
40
|
"@testing-library/react": "^16.3.1",
|
|
@@ -48,16 +47,14 @@
|
|
|
48
47
|
"@vanilla-extract/vite-plugin": "^5.1.4",
|
|
49
48
|
"autoprefixer": "^10.4.23",
|
|
50
49
|
"esbuild": "^0.27.2",
|
|
51
|
-
"happy-dom": "^20.
|
|
50
|
+
"happy-dom": "^20.8.8",
|
|
52
51
|
"jsdom": "^27.4.0",
|
|
53
|
-
"postcss": "^8.5.
|
|
52
|
+
"postcss": "^8.5.14",
|
|
54
53
|
"postcss-prefix-selector": "^2.1.1",
|
|
55
|
-
"react": "^19.2.3",
|
|
56
54
|
"react-dom": "^19.2.3",
|
|
57
55
|
"typescript": "^5.9.3",
|
|
58
|
-
"vite": "^
|
|
59
|
-
"vitest": "^4.0.17"
|
|
60
|
-
"@mysten/sui": "^2.8.0"
|
|
56
|
+
"vite": "^8.0.5",
|
|
57
|
+
"vitest": "^4.0.17"
|
|
61
58
|
},
|
|
62
59
|
"dependencies": {
|
|
63
60
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
@@ -68,14 +65,14 @@
|
|
|
68
65
|
"@vanilla-extract/recipes": "^0.5.7",
|
|
69
66
|
"clsx": "^2.1.1",
|
|
70
67
|
"zustand": "^5.0.10",
|
|
71
|
-
"@mysten/
|
|
72
|
-
"@mysten/
|
|
73
|
-
"@mysten/wallet-standard": "^0.20.
|
|
68
|
+
"@mysten/utils": "^0.3.3",
|
|
69
|
+
"@mysten/slush-wallet": "^1.0.5",
|
|
70
|
+
"@mysten/wallet-standard": "^0.20.3"
|
|
74
71
|
},
|
|
75
72
|
"peerDependencies": {
|
|
76
73
|
"@tanstack/react-query": "^5.0.0",
|
|
77
74
|
"react": "*",
|
|
78
|
-
"@mysten/sui": "^2.
|
|
75
|
+
"@mysten/sui": "^2.16.2"
|
|
79
76
|
},
|
|
80
77
|
"sideEffects": [
|
|
81
78
|
"*.css.ts",
|
|
@@ -84,7 +81,7 @@
|
|
|
84
81
|
"scripts": {
|
|
85
82
|
"clean": "rm -rf tsconfig.tsbuildinfo ./dist",
|
|
86
83
|
"build": "tsx scripts/build.ts",
|
|
87
|
-
"build:docs": "
|
|
84
|
+
"build:docs": "node ../../../docs/scripts/build-docs.ts",
|
|
88
85
|
"test": "pnpm test:typecheck && pnpm vitest run",
|
|
89
86
|
"test:typecheck": "tsc -b ./test",
|
|
90
87
|
"prettier:check": "prettier -c --ignore-unknown .",
|