@mysten/dapp-kit 0.5.0 → 0.6.0

package/src/hooks/useSuiClientQuery.ts

@@ -5,6 +5,7 @@ import type { SuiClient } from '@mysten/sui.js/client';
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
+import type { PartialBy } from '../types/utilityTypes.js';
 import { useSuiClientContext } from './useSuiClient.js';
 
 export type SuiRpcMethodName = {
@@ -29,20 +30,23 @@ export type SuiRpcMethods = {
 		: never;
 };
 
-export type UseSuiClientQueryOptions<T extends keyof SuiRpcMethods> = Omit<
-	UseQueryOptions<SuiRpcMethods[T]['result'], Error, SuiRpcMethods[T]['result'], unknown[]>,
-	'queryFn'
+export type UseSuiClientQueryOptions<T extends keyof SuiRpcMethods, TData> = PartialBy<
+	Omit<UseQueryOptions<SuiRpcMethods[T]['result'], Error, TData, unknown[]>, 'queryFn'>,
+	'queryKey'
 >;
 
-export function useSuiClientQuery<T extends keyof SuiRpcMethods>(
+export function useSuiClientQuery<
+	T extends keyof SuiRpcMethods,
+	TData = SuiRpcMethods[T]['result'],
+>(
 	...args: undefined extends SuiRpcMethods[T]['params']
-		? [method: T, params?: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T>]
-		: [method: T, params: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T>]
+		? [method: T, params?: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T, TData>]
+		: [method: T, params: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T, TData>]
 ) {
 	const [method, params, { queryKey = [], ...options } = {}] = args as [
 		method: T,
 		params?: SuiRpcMethods[T]['params'],
-		options?: UseSuiClientQueryOptions<T>,
+		options?: UseSuiClientQueryOptions<T, TData>,
 	];
 
 	const suiContext = useSuiClientContext();

package/src/hooks/wallet/useAutoConnectWallet.ts

@@ -4,31 +4,48 @@
 import { useEffect } from 'react';
 
 import { useConnectWallet } from './useConnectWallet.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
 import { useWallets } from './useWallets.js';
 import { useWalletStore } from './useWalletStore.js';
 
 export function useAutoConnectWallet(autoConnectEnabled: boolean) {
 	const { mutate: connectWallet } = useConnectWallet();
-	const wallets = useWallets();
+	const setAutoConnectionStatus = useWalletStore((state) => state.setAutoConnectionStatus);
 	const lastConnectedWalletName = useWalletStore((state) => state.lastConnectedWalletName);
 	const lastConnectedAccountAddress = useWalletStore((state) => state.lastConnectedAccountAddress);
+	const wallets = useWallets();
+	const { isDisconnected } = useCurrentWallet();
 
 	useEffect(() => {
-		if (!autoConnectEnabled || !lastConnectedWalletName) return;
+		if (
+			!autoConnectEnabled ||
+			!lastConnectedWalletName ||
+			!lastConnectedAccountAddress ||
+			!isDisconnected
+		) {
+			return;
+		}
 
 		const wallet = wallets.find((wallet) => wallet.name === lastConnectedWalletName);
 		if (wallet) {
-			connectWallet({
-				wallet,
-				accountAddress: lastConnectedAccountAddress || undefined,
-				silent: true,
-			});
+			connectWallet(
+				{
+					wallet,
+					accountAddress: lastConnectedAccountAddress,
+					silent: true,
+				},
+				{
+					onSettled: () => setAutoConnectionStatus('settled'),
+				},
+			);
 		}
 	}, [
 		autoConnectEnabled,
 		connectWallet,
+		isDisconnected,
 		lastConnectedAccountAddress,
 		lastConnectedWalletName,
+		setAutoConnectionStatus,
 		wallets,
 	]);
 }

package/src/hooks/wallet/useAutoConnectionStatus.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves the status for the initial wallet auto-connection process.
+ */
+export function useAutoConnectionStatus() {
+	// TODO: Replace this with shareable mutation state once we require react-query v5
+	return useWalletStore((state) => state.autoConnectionStatus);
+}

package/src/hooks/wallet/useConnectWallet.ts

@@ -36,18 +36,27 @@ export function useConnectWallet({
 	...mutationOptions
 }: UseConnectWalletMutationOptions = {}) {
 	const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
+	const setConnectionStatus = useWalletStore((state) => state.setConnectionStatus);
 
 	return useMutation({
 		mutationKey: walletMutationKeys.connectWallet(mutationKey),
-		mutationFn: async ({ wallet, accountAddress, ...standardConnectInput }) => {
-			const connectResult = await wallet.features['standard:connect'].connect(standardConnectInput);
-			const connectedSuiAccounts = connectResult.accounts.filter((account) =>
-				account.chains.some((chain) => chain.split(':')[0] === 'sui'),
-			);
-			const selectedAccount = getSelectedAccount(connectedSuiAccounts, accountAddress);
+		mutationFn: async ({ wallet, accountAddress, ...connectArgs }) => {
+			try {
+				setConnectionStatus('connecting');
 
-			setWalletConnected(wallet, connectedSuiAccounts, selectedAccount);
-			return { accounts: connectedSuiAccounts };
+				const connectResult = await wallet.features['standard:connect'].connect(connectArgs);
+				const connectedSuiAccounts = connectResult.accounts.filter((account) =>
+					account.chains.some((chain) => chain.split(':')[0] === 'sui'),
+				);
+				const selectedAccount = getSelectedAccount(connectedSuiAccounts, accountAddress);
+
+				setWalletConnected(wallet, connectedSuiAccounts, selectedAccount);
+
+				return { accounts: connectedSuiAccounts };
+			} catch (error) {
+				setConnectionStatus('disconnected');
+				throw error;
+			}
 		},
 		...mutationOptions,
 	});

package/src/hooks/wallet/useCurrentWallet.ts

@@ -7,5 +7,34 @@ import { useWalletStore } from './useWalletStore.js';
  * Retrieves the wallet that is currently connected to the dApp, if one exists.
  */
 export function useCurrentWallet() {
-	return useWalletStore((state) => state.currentWallet);
+	const currentWallet = useWalletStore((state) => state.currentWallet);
+	const connectionStatus = useWalletStore((state) => state.connectionStatus);
+
+	switch (connectionStatus) {
+		case 'connecting':
+			return {
+				connectionStatus,
+				currentWallet: null,
+				isDisconnected: false,
+				isConnecting: true,
+				isConnected: false,
+			} as const;
+		case 'disconnected':
+			return {
+				connectionStatus,
+				currentWallet: null,
+				isDisconnected: true,
+				isConnecting: false,
+				isConnected: false,
+			} as const;
+		case 'connected': {
+			return {
+				connectionStatus,
+				currentWallet: currentWallet!,
+				isDisconnected: false,
+				isConnecting: false,
+				isConnected: true,
+			} as const;
+		}
+	}
 }

package/src/hooks/wallet/useDisconnectWallet.ts

@@ -23,7 +23,7 @@ export function useDisconnectWallet({
 	mutationKey,
 	...mutationOptions
 }: UseDisconnectWalletMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const setWalletDisconnected = useWalletStore((state) => state.setWalletDisconnected);
 
 	return useMutation({

package/src/hooks/wallet/useSignAndExecuteTransactionBlock.ts

@@ -52,7 +52,7 @@ export function useSignAndExecuteTransactionBlock({
 	executeFromWallet,
 	...mutationOptions
 }: UseSignAndExecuteTransactionBlockMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 	const client = useSuiClient();
 

package/src/hooks/wallet/useSignPersonalMessage.ts

@@ -45,7 +45,7 @@ export function useSignPersonalMessage({
 	mutationKey,
 	...mutationOptions
 }: UseSignPersonalMessageMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 
 	return useMutation({

package/src/hooks/wallet/useSignTransactionBlock.ts

@@ -45,7 +45,7 @@ export function useSignTransactionBlock({
 	mutationKey,
 	...mutationOptions
 }: UseSignTransactionBlockMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 
 	return useMutation({

package/src/hooks/wallet/useSwitchAccount.ts

@@ -30,7 +30,7 @@ export function useSwitchAccount({
 	mutationKey,
 	...mutationOptions
 }: UseSwitchAccountMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const setAccountSwitched = useWalletStore((state) => state.setAccountSwitched);
 
 	return useMutation({

package/src/hooks/wallet/useWalletPropertiesChanged.ts

@@ -10,7 +10,7 @@ import { useWalletStore } from './useWalletStore.js';
  * Internal hook for easily handling various changes in properties for a wallet.
  */
 export function useWalletPropertiesChanged() {
-	const currentWallet = useCurrentWallet();
+	const { currentWallet } = useCurrentWallet();
 	const updateWalletAccounts = useWalletStore((state) => state.updateWalletAccounts);
 
 	useEffect(() => {

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './hooks/useSuiClientInfiniteQuery.js';
 export * from './hooks/useSuiClientMutation.js';
 export * from './hooks/useSuiClientQuery.js';
 export * from './hooks/wallet/useAccounts.js';
+export * from './hooks/wallet/useAutoConnectionStatus.js';
 export * from './hooks/wallet/useConnectWallet.js';
 export * from './hooks/wallet/useCurrentAccount.js';
 export * from './hooks/wallet/useCurrentWallet.js';

package/src/walletStore.ts

@@ -6,8 +6,14 @@ import { createStore } from 'zustand';
 import type { StateStorage } from 'zustand/middleware';
 import { createJSONStorage, persist } from 'zustand/middleware';
 
+type WalletConnectionStatus = 'disconnected' | 'connecting' | 'connected';
+
+type WalletAutoConnectionStatus = 'disabled' | 'idle' | 'settled';
+
 export type WalletActions = {
 	setAccountSwitched: (selectedAccount: WalletAccount) => void;
+	setConnectionStatus: (connectionStatus: WalletConnectionStatus) => void;
+	setAutoConnectionStatus: (autoConnectionStatus: WalletAutoConnectionStatus) => void;
 	setWalletConnected: (
 		wallet: WalletWithRequiredFeatures,
 		connectedAccounts: readonly WalletAccount[],
@@ -31,15 +37,23 @@ export type StoreState = {
 	currentAccount: WalletAccount | null;
 	lastConnectedAccountAddress: string | null;
 	lastConnectedWalletName: string | null;
+	connectionStatus: WalletConnectionStatus;
+	autoConnectionStatus: WalletAutoConnectionStatus;
 } & WalletActions;
 
-export type WalletConfiguration = {
+type WalletConfiguration = {
 	wallets: WalletWithRequiredFeatures[];
+	autoConnect: boolean;
 	storage: StateStorage;
 	storageKey: string;
 };
 
-export function createWalletStore({ wallets, storage, storageKey }: WalletConfiguration) {
+export function createWalletStore({
+	wallets,
+	storage,
+	storageKey,
+	autoConnect,
+}: WalletConfiguration) {
 	return createStore<StoreState>()(
 		persist(
 			(set, get) => ({
@@ -50,6 +64,17 @@ export function createWalletStore({ wallets, storage, storageKey }: WalletConfig
 				lastConnectedAccountAddress: null,
 				lastConnectedWalletName: null,
 				connectionStatus: 'disconnected',
+				autoConnectionStatus: autoConnect ? 'idle' : 'disabled',
+				setConnectionStatus(connectionStatus) {
+					set(() => ({
+						connectionStatus,
+					}));
+				},
+				setAutoConnectionStatus(autoConnectionStatus) {
+					set(() => ({
+						autoConnectionStatus,
+					}));
+				},
 				setWalletConnected(wallet, connectedAccounts, selectedAccount) {
 					set(() => ({
 						accounts: connectedAccounts,
@@ -57,6 +82,7 @@ export function createWalletStore({ wallets, storage, storageKey }: WalletConfig
 						currentAccount: selectedAccount,
 						lastConnectedWalletName: wallet.name,
 						lastConnectedAccountAddress: selectedAccount?.address,
+						connectionStatus: 'connected',
 					}));
 				},
 				setWalletDisconnected() {
@@ -66,6 +92,7 @@ export function createWalletStore({ wallets, storage, storageKey }: WalletConfig
 						currentAccount: null,
 						lastConnectedWalletName: null,
 						lastConnectedAccountAddress: null,
+						connectionStatus: 'disconnected',
 					}));
 				},
 				setAccountSwitched(selectedAccount) {
@@ -86,6 +113,7 @@ export function createWalletStore({ wallets, storage, storageKey }: WalletConfig
 							currentAccount: null,
 							lastConnectedWalletName: null,
 							lastConnectedAccountAddress: null,
+							connectionStatus: 'disconnected',
 						}));
 					} else {
 						set(() => ({ wallets: updatedWallets }));