@mysten/dapp-kit 1.0.5 → 1.0.6

package/docs/wallet-hooks/useSignAndExecuteTransaction.md

@@ -0,0 +1,124 @@
+# useSignAndExecuteTransaction
+
+> Legacy React hook to sign and execute a transaction block on the Sui network.
+
+Use the `useSignAndExecuteTransaction` hook to prompt the user to sign and execute a transaction
+block with their wallet.
+
+```ts
+
+function MyComponent() {
+	const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
+	const [digest, setDigest] = useState('');
+	const currentAccount = useCurrentAccount();
+
+	return (
+		<div style={{ padding: 20 }}>
+			<ConnectButton />
+			{currentAccount && (
+				<>
+					<div>
+						<button
+							onClick={() => {
+								signAndExecuteTransaction(
+									{
+										transaction: new Transaction(),
+										chain: 'sui:devnet',
+									},
+									{
+										onSuccess: (result) => {
+											console.log('executed transaction', result);
+											setDigest(result.digest);
+										},
+									},
+								);
+							}}
+						>
+							Sign and execute transaction
+						</button>
+					</div>
+					<div>Digest: {digest}</div>
+				</>
+			)}
+		</div>
+	);
+}
+```
+
+## Example
+
+## Return additional data, or executing through GraphQL
+
+To customize how transactions are executed, and what data is returned when executing a transaction,
+you can pass a custom `execute` function.
+
+```ts
+
+	ConnectButton,
+	useSuiClient,
+	useCurrentAccount,
+	useSignAndExecuteTransaction,
+} from '@mysten/dapp-kit';
+
+function MyComponent() {
+	const client = useSuiClient();
+	const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction({
+		execute: async ({ bytes, signature }) =>
+			await client.executeTransactionBlock({
+				transactionBlock: bytes,
+				signature,
+				options: {
+					// Raw effects are required so the effects can be reported back to the wallet
+					showRawEffects: true,
+					// Select additional data to return
+					showObjectChanges: true,
+				},
+			}),
+	});
+
+	const [digest, setDigest] = useState('');
+	const currentAccount = useCurrentAccount();
+
+	return (
+		<div style={{ padding: 20 }}>
+			<ConnectButton />
+			{currentAccount && (
+				<>
+					<div>
+						<button
+							onClick={() => {
+								signAndExecuteTransaction(
+									{
+										transaction: new Transaction(),
+										chain: 'sui:devnet',
+									},
+									{
+										onSuccess: (result) => {
+											console.log('object changes', result.objectChanges);
+											setDigest(result.digest);
+										},
+									},
+								);
+							}}
+						>
+							Sign and execute transaction
+						</button>
+					</div>
+					<div>Digest: {digest}</div>
+				</>
+			)}
+		</div>
+	);
+}
+```
+
+## Arguments
+
+- `transaction`: The transaction to sign and execute.
+- `chain`: (optional) The chain identifier the transaction should be signed for. Defaults to the
+  active network of the app.
+- `execute`: (optional) A custom function to execute the transaction
+
+In addition to these options, you can also pass any options that the
+[SuiJsonRpcClient.signAndExecuteTransaction](/typedoc/classes/_mysten_sui.client.SuiJsonRpcClient.html#signAndExecuteTransactionBlock)
+method accepts.

package/docs/wallet-hooks/useSignPersonalMessage.md

@@ -0,0 +1,59 @@
+# useSignPersonalMessage
+
+> Legacy React hook to sign a personal message with the connected wallet.
+
+Use the `useSignPersonalMessage` hook to prompt the user to sign a message with their wallet.
+
+```ts
+
+function MyComponent() {
+	const { mutate: signPersonalMessage } = useSignPersonalMessage();
+	const [message, setMessage] = useState('hello, World!');
+	const [signature, setSignature] = useState('');
+	const currentAccount = useCurrentAccount();
+
+	return (
+		<div style={{ padding: 20 }}>
+			<ConnectButton />
+			{currentAccount && (
+				<>
+					<div>
+						<label>
+							Message:{' '}
+							<input type="text" value={message} onChange={(ev) => setMessage(ev.target.value)} />
+						</label>
+					</div>
+					<button
+						onClick={() => {
+							signPersonalMessage(
+								{
+									message: new TextEncoder().encode(message),
+								},
+								{
+									onSuccess: (result) => setSignature(result.signature),
+								},
+							);
+						}}
+					>
+						Sign message
+					</button>
+					<div>Signature: {signature}</div>
+				</>
+			)}
+		</div>
+	);
+}
+```
+
+## Example
+
+## Arguments
+
+- `message`: The message to sign, as a `Uint8Array`.
+- `chain`: (optional) The chain identifier the message should be signed for. Defaults to the active
+  network of the app.
+
+## Result
+
+- `signature`: The signature of the message, as a `Base64`-encoded `string`.
+- `bytes`: The bytes of the message, as a `Base64`-encoded `string`.

package/docs/wallet-hooks/useSignTransaction.md

@@ -0,0 +1,67 @@
+# useSignTransaction
+
+> Legacy React hook to sign a transaction without executing it on the Sui network.
+
+Use the `useSignTransaction` hook to prompt the user to sign a transaction with their wallet.
+
+```ts
+
+	ConnectButton,
+	useCurrentAccount,
+	useSignTransaction,
+	useSuiClient,
+} from '@mysten/dapp-kit';
+
+function MyComponent() {
+	const { mutateAsync: signTransaction } = useSignTransaction();
+	const [signature, setSignature] = useState('');
+	const client = useSuiClient();
+	const currentAccount = useCurrentAccount();
+
+	return (
+		<div style={{ padding: 20 }}>
+			<ConnectButton />
+			{currentAccount && (
+				<>
+					<div>
+						<button
+							onClick={async () => {
+								const { bytes, signature } = await signTransaction({
+									transaction: new Transaction(),
+									chain: 'sui:devnet',
+								});
+
+								const executeResult = await client.executeTransactionBlock({
+									transactionBlock: bytes,
+									signature,
+									options: {
+										showRawEffects: true,
+									},
+								});
+
+								console.log(executeResult);
+							}}
+						>
+							Sign empty transaction
+						</button>
+					</div>
+					<div>Signature: {signature}</div>
+				</>
+			)}
+		</div>
+	);
+}
+```
+
+## Example
+
+## Arguments
+
+- `transactionBlock`: The transaction to sign.
+- `chain`: (optional) The chain identifier the transaction should be signed for. Defaults to the
+  active network of the app.
+
+## Result
+
+- `signature`: The signature of the message, as a Base64-encoded `string`.
+- `bytes`: The serialized transaction bytes, as a Base64-encoded `string`.

package/docs/wallet-hooks/useSwitchAccount.md

@@ -0,0 +1,47 @@
+# useSwitchAccount
+
+> Legacy React mutation hook to switch the active wallet account.
+
+The `useSwitchAccount` hook is a mutation hook for establishing a connection to a specific wallet.
+
+```ts
+
+function MyComponent() {
+	const { mutate: switchAccount } = useSwitchAccount();
+	const accounts = useAccounts();
+
+	return (
+		<div style={{ padding: 20 }}>
+			<ConnectButton />
+			<ul>
+				{accounts.map((account) => (
+					<li key={account.address}>
+						<button
+							onClick={() => {
+								switchAccount(
+									{ account },
+									{
+										onSuccess: () => console.log(`switched to ${account.address}`),
+									},
+								);
+							}}
+						>
+							Switch to {account.address}
+						</button>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+```
+
+## Example
+
+## Arguments
+
+- `args`: Arguments passed to the `connect` function of the wallet.
+  - `account`: The account to switch to.
+
+- `options`: Options passed the `useMutation` hook from
+  [@tanstack/react-query](https://tanstack.com/query/latest/docs/react/guides/mutations).

package/docs/wallet-hooks/useWallets.md

@@ -0,0 +1,38 @@
+# useWallets
+
+> Legacy React hook to list available wallet extensions sorted by priority.
+
+The `useWallets` hook returns an array of wallets that are available to the user. The wallets are
+sorted by their priority, with the highest priority wallet being the first in the array.
+
+```ts
+
+function MyComponent() {
+	const wallets = useWallets();
+
+	return (
+		<div>
+			<h2>Installed wallets</h2>
+			{wallets.length === 0 && <div>No wallets installed</div>}
+			<ul>
+				{wallets.map((wallet) => (
+					<li key={wallet.name}>{wallet.name}</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+```
+
+## Example
+
+## Wallet properties
+
+- `name`: The name of the wallet.
+- `version`: The version of the wallet as a string.
+- `icon`: A data URL of the wallet icon as an SVG.
+- `accounts`: An array of accounts that are available in the wallet.
+- `features`: An object with all the
+  [wallet-standard](https://github.com/wallet-standard/wallet-standard) features implemented by the
+  wallet.
+- `chains`: An array of chain identifiers that the wallet supports.

package/docs/wallet-provider.md

@@ -0,0 +1,38 @@
+# WalletProvider
+
+> React context provider for wallet connections in legacy dApp Kit.
+
+Use `WalletProvider` to set up the necessary context for your React app. Use it at the root of your
+app, so that you can use any of the dApp Kit wallet components underneath it.
+
+```tsx
+
+function App() {
+	return (
+		<WalletProvider>
+			<YourApp />
+		</WalletProvider>
+	);
+}
+```
+
+The `WalletProvider` manages all wallet state for you, and makes the current wallet state available
+to other dApp Kit hooks and components.
+
+### Props
+
+All props are optional.
+
+- `preferredWallets`: A list of wallets that are sorted to the top of the wallet list.
+- `walletFilter`: A filter function that accepts a wallet and returns a boolean. This filters the
+  list of wallets presented to users when selecting a wallet to connect from, ensuring that only
+  wallets that meet the app requirements can connect.
+- `enableUnsafeBurner`: Enables the development-only unsafe burner wallet, useful for testing.
+- `autoConnect`: Enables automatically reconnecting to the most recently used wallet account upon
+  mounting.
+- `slushWallet`: Enables and configures the Slush wallet. Read more about how to
+  [use the Slush integration](./slush).
+- `storage`: Configures how the most recently connected-to wallet account is stored. Set to `null`
+  to disable persisting state entirely. Defaults to using `localStorage` if it is available.
+- `storageKey`: The key to use to store the most recently connected wallet account.
+- `theme`: The theme to use for styling UI components. Defaults to using the light theme.

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mysten Labs <build@mystenlabs.com>",
   "description": "A collection of React hooks and components for interacting with the Sui blockchain and wallets.",
   "homepage": "https://sdk.mystenlabs.com/dapp-kit",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -65,14 +65,14 @@
     "@vanilla-extract/recipes": "^0.5.7",
     "clsx": "^2.1.1",
     "zustand": "^5.0.10",
-    "@mysten/utils": "^0.3.2",
-    "@mysten/wallet-standard": "^0.20.2",
-    "@mysten/slush-wallet": "^1.0.4"
+    "@mysten/utils": "^0.3.3",
+    "@mysten/slush-wallet": "^1.0.5",
+    "@mysten/wallet-standard": "^0.20.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "react": "*",
-    "@mysten/sui": "^2.16.1"
+    "@mysten/sui": "^2.16.2"
   },
   "sideEffects": [
     "*.css.ts",