@mysten/dapp-kit 0.5.0 → 0.7.0

package/src/hooks/useSuiClientInfiniteQuery.ts

@@ -2,9 +2,14 @@
 // 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,
+	UseInfiniteQueryResult,
+} 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 +17,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> = {},
+): UseInfiniteQueryResult<TData, Error> {
 	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/useSuiClientMutation.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import { useSuiClientContext } from './useSuiClient.js';
@@ -15,7 +15,7 @@ export type UseSuiClientMutationOptions<T extends keyof SuiRpcMethods> = Omit<
 export function useSuiClientMutation<T extends keyof SuiRpcMethods>(
 	method: T,
 	options: UseSuiClientMutationOptions<T> = {},
-) {
+): UseMutationResult<SuiRpcMethods[T]['result'], Error, SuiRpcMethods[T]['params'], unknown[]> {
 	const suiContext = useSuiClientContext();
 
 	return useMutation({

package/src/hooks/useSuiClientQuery.ts

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { SuiClient } from '@mysten/sui.js/client';
-import type { UseQueryOptions } from '@tanstack/react-query';
+import type { UseQueryOptions, UseQueryResult } 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>]
+): UseQueryResult<TData, Error> {
 	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/useAccounts.ts

@@ -1,11 +1,13 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { WalletAccount } from '@mysten/wallet-standard';
+
 import { useWalletStore } from './useWalletStore.js';
 
 /**
  * Retrieves a list of connected accounts authorized by the dApp.
  */
-export function useAccounts() {
+export function useAccounts(): readonly WalletAccount[] {
 	return useWalletStore((state) => state.accounts);
 }

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

@@ -7,7 +7,7 @@ import type {
 	WalletAccount,
 	WalletWithRequiredFeatures,
 } from '@mysten/wallet-standard';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
@@ -34,20 +34,34 @@ type UseConnectWalletMutationOptions = Omit<
 export function useConnectWallet({
 	mutationKey,
 	...mutationOptions
-}: UseConnectWalletMutationOptions = {}) {
+}: UseConnectWalletMutationOptions = {}): UseMutationResult<
+	ConnectWalletResult,
+	Error,
+	ConnectWalletArgs,
+	unknown
+> {
 	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/useCurrentAccount.ts

@@ -1,11 +1,13 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { WalletAccount } from '@mysten/wallet-standard';
+
 import { useWalletStore } from './useWalletStore.js';
 
 /**
  * Retrieves the wallet account that is currently selected, if one exists.
  */
-export function useCurrentAccount() {
+export function useCurrentAccount(): WalletAccount | null {
 	return useWalletStore((state) => state.currentAccount);
 }

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

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
@@ -22,8 +22,12 @@ type UseDisconnectWalletMutationOptions = Omit<
 export function useDisconnectWallet({
 	mutationKey,
 	...mutationOptions
-}: UseDisconnectWalletMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+}: UseDisconnectWalletMutationOptions = {}): UseMutationResult<
+	void,
+	UseDisconnectWalletError,
+	void
+> {
+	const { currentWallet } = useCurrentWallet();
 	const setWalletDisconnected = useWalletStore((state) => state.setWalletDisconnected);
 
 	return useMutation({

package/src/hooks/wallet/useSignAndExecuteTransactionBlock.ts

@@ -5,7 +5,7 @@ import type {
 	SuiSignAndExecuteTransactionBlockInput,
 	SuiSignAndExecuteTransactionBlockOutput,
 } from '@mysten/wallet-standard';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
@@ -51,8 +51,12 @@ export function useSignAndExecuteTransactionBlock({
 	mutationKey,
 	executeFromWallet,
 	...mutationOptions
-}: UseSignAndExecuteTransactionBlockMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+}: UseSignAndExecuteTransactionBlockMutationOptions = {}): UseMutationResult<
+	UseSignAndExecuteTransactionBlockResult,
+	UseSignAndExecuteTransactionBlockError,
+	UseSignAndExecuteTransactionBlockArgs
+> {
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 	const client = useSuiClient();
 

package/src/hooks/wallet/useSignPersonalMessage.ts

@@ -5,7 +5,7 @@ import type {
 	SuiSignPersonalMessageInput,
 	SuiSignPersonalMessageOutput,
 } from '@mysten/wallet-standard';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import {
@@ -44,8 +44,12 @@ type UseSignPersonalMessageMutationOptions = Omit<
 export function useSignPersonalMessage({
 	mutationKey,
 	...mutationOptions
-}: UseSignPersonalMessageMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+}: UseSignPersonalMessageMutationOptions = {}): UseMutationResult<
+	UseSignPersonalMessageResult,
+	UseSignPersonalMessageError,
+	UseSignPersonalMessageArgs
+> {
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 
 	return useMutation({

package/src/hooks/wallet/useSignTransactionBlock.ts

@@ -5,7 +5,7 @@ import type {
 	SuiSignTransactionBlockInput,
 	SuiSignTransactionBlockOutput,
 } from '@mysten/wallet-standard';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import {
@@ -44,8 +44,12 @@ type UseSignTransactionBlockMutationOptions = Omit<
 export function useSignTransactionBlock({
 	mutationKey,
 	...mutationOptions
-}: UseSignTransactionBlockMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+}: UseSignTransactionBlockMutationOptions = {}): UseMutationResult<
+	UseSignTransactionBlockResult,
+	UseSignTransactionBlockError,
+	UseSignTransactionBlockArgs
+> {
+	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
 
 	return useMutation({

package/src/hooks/wallet/useSwitchAccount.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { WalletAccount } from '@mysten/wallet-standard';
-import type { UseMutationOptions } from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 
 import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
@@ -29,8 +29,12 @@ type UseSwitchAccountMutationOptions = Omit<
 export function useSwitchAccount({
 	mutationKey,
 	...mutationOptions
-}: UseSwitchAccountMutationOptions = {}) {
-	const currentWallet = useCurrentWallet();
+}: UseSwitchAccountMutationOptions = {}): UseMutationResult<
+	SwitchAccountResult,
+	UseSwitchAccountError,
+	SwitchAccountArgs
+> {
+	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 }));