@mysten/dapp-kit 0.4.0 → 0.6.0

package/src/hooks/useResolveSuiNSNames.ts

@@ -1,21 +1,30 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ResolvedNameServiceNames } from '@mysten/sui.js/client';
+import type { UseQueryOptions } from '@tanstack/react-query';
+
 import { useSuiClientQuery } from './useSuiClientQuery.js';
 
-export function useResolveSuiNSName(address?: string | null) {
-	const { data, ...rest } = useSuiClientQuery(
+export function useResolveSuiNSName(
+	address?: string | null,
+	options?: Omit<
+		UseQueryOptions<ResolvedNameServiceNames, Error, string | null, unknown[]>,
+		'queryFn' | 'queryKey'
+	>,
+) {
+	return useSuiClientQuery(
 		'resolveNameServiceNames',
 		{
 			address: address!,
 			limit: 1,
 		},
 		{
-			enabled: !!address,
+			...options,
 			refetchOnWindowFocus: false,
 			retry: false,
+			select: (data) => (data.data.length > 0 ? data.data[0] : null),
+			enabled: !!address && options?.enabled !== false,
 		},
 	);
-
-	return { data: data?.data?.[0] ?? null, ...rest };
 }

package/src/hooks/useSuiClientInfiniteQuery.ts

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { SuiClient } from '@mysten/sui.js/client';
-import type { UseInfiniteQueryOptions } from '@tanstack/react-query';
+import type { InfiniteData, UseInfiniteQueryOptions } from '@tanstack/react-query';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
+import type { PartialBy } from '../types/utilityTypes.js';
 import { useSuiClientContext } from './useSuiClient.js';
 
 interface PaginatedResult {
@@ -12,52 +13,65 @@ interface PaginatedResult {
 	nextCursor?: unknown;
 	hasNextPage: boolean;
 }
+
 export type SuiRpcPaginatedMethodName = {
 	[K in keyof SuiClient]: SuiClient[K] extends (input: any) => Promise<PaginatedResult> ? K : never;
 }[keyof SuiClient];
 
 export type SuiRpcPaginatedMethods = {
-	[K in SuiRpcPaginatedMethodName]: SuiClient[K] extends (input: infer P) => Promise<{
-		data?: infer R;
-		nextCursor?: infer Cursor | null;
-		hasNextPage: boolean;
-	}>
+	[K in SuiRpcPaginatedMethodName]: SuiClient[K] extends (
+		input: infer Params,
+	) => Promise<infer Result extends { nextCursor?: infer Cursor | null }>
 		? {
 				name: K;
-				result: R;
-				params: P;
+				result: Result;
+				params: Params;
 				cursor: Cursor;
 		  }
 		: never;
 };
 
-export type UseSuiClientInfiniteQueryOptions<T extends keyof SuiRpcPaginatedMethods> = Omit<
-	UseInfiniteQueryOptions<
-		SuiRpcPaginatedMethods[T]['result'],
-		Error,
-		SuiRpcPaginatedMethods[T]['result'],
-		SuiRpcPaginatedMethods[T]['result'],
-		unknown[]
+export type UseSuiClientInfiniteQueryOptions<
+	T extends keyof SuiRpcPaginatedMethods,
+	TData,
+> = PartialBy<
+	Omit<
+		UseInfiniteQueryOptions<
+			SuiRpcPaginatedMethods[T]['result'],
+			Error,
+			TData,
+			SuiRpcPaginatedMethods[T]['result'],
+			unknown[]
+		>,
+		'queryFn' | 'initialPageParam' | 'getNextPageParam'
 	>,
-	'queryFn'
+	'queryKey'
 >;
 
-export function useSuiClientInfiniteQuery<T extends keyof SuiRpcPaginatedMethods>(
+export function useSuiClientInfiniteQuery<
+	T extends keyof SuiRpcPaginatedMethods,
+	TData = InfiniteData<SuiRpcPaginatedMethods[T]['result']>,
+>(
 	method: T,
 	params: SuiRpcPaginatedMethods[T]['params'],
-	{ queryKey = [], enabled = !!params, ...options }: UseSuiClientInfiniteQueryOptions<T> = {},
+	{
+		queryKey = [],
+		enabled = !!params,
+		...options
+	}: UseSuiClientInfiniteQueryOptions<T, TData> = {},
 ) {
 	const suiContext = useSuiClientContext();
 
 	return useInfiniteQuery({
 		...options,
+		initialPageParam: null,
 		queryKey: [suiContext.network, method, params, ...queryKey],
 		enabled,
-		queryFn: async () => {
-			return await suiContext.client[method](params as never);
-		},
-		getNextPageParam: (lastPage) => {
-			return (lastPage as PaginatedResult).nextCursor ?? null;
-		},
+		queryFn: ({ pageParam }) =>
+			suiContext.client[method]({
+				...(params ?? {}),
+				cursor: pageParam,
+			} as never),
+		getNextPageParam: ({ nextCursor }) => nextCursor ?? null,
 	});
 }

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

@@ -1,24 +1,28 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './hooks/useSuiClient.js';
-export * from './components/ConnectButton.js';
 export * from './components/connect-modal/ConnectModal.js';
+export * from './components/ConnectButton.js';
 export * from './components/SuiClientProvider.js';
 export * from './components/WalletProvider.js';
-export * from './hooks/wallet/useCurrentAccount.js';
-export * from './hooks/wallet/useCurrentWallet.js';
-export * from './hooks/wallet/useWallets.js';
+export * from './hooks/networkConfig.js';
+export * from './hooks/useResolveSuiNSNames.js';
+export * from './hooks/useSuiClient.js';
+export * from './hooks/useSuiClientInfiniteQuery.js';
+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/useSwitchAccount.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';
 export * from './hooks/wallet/useDisconnectWallet.js';
+export * from './hooks/wallet/useSignAndExecuteTransactionBlock.js';
 export * from './hooks/wallet/useSignPersonalMessage.js';
 export * from './hooks/wallet/useSignTransactionBlock.js';
-export * from './hooks/wallet/useSignAndExecuteTransactionBlock.js';
-export * from './hooks/useSuiClientMutation.js';
-export * from './hooks/useSuiClientQuery.js';
-export * from './hooks/useSuiClientInfiniteQuery.js';
+export * from './hooks/wallet/useSwitchAccount.js';
+export * from './hooks/wallet/useWallets.js';
 export * from './themes/lightTheme.js';
 export * from './types.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 }));