@mysten/dapp-kit 0.0.0-experimental-20230928204256

package/src/components/connect-modal/views/WhatIsAWallet.css.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+});
+
+export const title = style({});
+
+export const content = style({
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+	flexGrow: 1,
+	gap: 20,
+	padding: 40,
+});

package/src/components/connect-modal/views/WhatIsAWallet.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './WhatIsAWallet.css.js';
+
+export function WhatIsAWallet() {
+	return (
+		<div className={styles.container}>
+			<h2 className={styles.title}>What is a Wallet</h2>
+			<div className={styles.content}>
+				<InfoSection title="Easy Login">
+					No need to create new accounts and passwords for every website. Just connect your wallet
+					and get going.
+				</InfoSection>
+				<InfoSection title="Store your Digital Assets">
+					Send, receive, store, and display your digital assets like NFTs & coins.
+				</InfoSection>
+			</div>
+		</div>
+	);
+}

package/src/components/connect-modal/wallet-list/WalletList.css.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+	display: 'flex',
+	flexDirection: 'column',
+	gap: '4px',
+});

package/src/components/connect-modal/wallet-list/WalletList.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+
+import { useWallets } from '../../../hooks/wallet/useWallets.js';
+import { SuiIcon } from '../../icons/SuiIcon.js';
+import * as styles from './WalletList.css.js';
+import { WalletListItem } from './WalletListItem.js';
+
+type WalletListProps = {
+	selectedWalletName?: string;
+	onPlaceholderClick: () => void;
+	onSelect: (wallet: WalletWithRequiredFeatures) => void;
+};
+
+export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }: WalletListProps) {
+	const wallets = useWallets();
+	return (
+		<ul className={styles.container}>
+			{wallets.length > 0 ? (
+				wallets.map((wallet) => (
+					<WalletListItem
+						key={wallet.name}
+						name={wallet.name}
+						icon={wallet.icon}
+						isSelected={wallet.name === selectedWalletName}
+						onClick={() => onSelect(wallet)}
+					/>
+				))
+			) : (
+				<WalletListItem
+					name="Sui Wallet"
+					icon={<SuiIcon />}
+					onClick={onPlaceholderClick}
+					isSelected
+				/>
+			)}
+		</ul>
+	);
+}

package/src/components/connect-modal/wallet-list/WalletListItem.css.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+	padding: 8,
+	borderRadius: 8,
+});
+
+export const selectedContainer = style({
+	background: '#FFFFFF',
+	boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+});
+
+export const buttonContainer = style({
+	width: '100%',
+	display: 'flex',
+	alignItems: 'center',
+	gap: '8px',
+});
+
+export const walletName = style({
+	overflow: 'hidden',
+	textOverflow: 'ellipsis',
+	whiteSpace: 'nowrap',
+});
+
+export const walletIcon = style({
+	width: 28,
+	height: 28,
+	borderRadius: 6,
+	flexShrink: 0,
+	background: 'white',
+	objectFit: 'cover',
+});

package/src/components/connect-modal/wallet-list/WalletListItem.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+
+import * as styles from './WalletListItem.css.js';
+
+type WalletListItemProps = {
+	name: string;
+	icon: ReactNode;
+	isSelected?: boolean;
+	onClick: () => void;
+};
+
+export function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {
+	return (
+		<li className={clsx(styles.container, { [styles.selectedContainer]: isSelected })}>
+			<button className={styles.buttonContainer} type="button" onClick={onClick}>
+				{typeof icon === 'string' ? (
+					<img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
+				) : (
+					icon
+				)}
+				<div className={styles.walletName}>{name}</div>
+			</button>
+		</li>
+	);
+}

package/src/components/icons/BackIcon.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function BackIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z"
+				fill="#383F47"
+			/>
+		</svg>
+	);
+}

package/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function CheckIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+			<path
+				fill="#007195"
+				d="m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
+			/>
+		</svg>
+	);
+}

package/src/components/icons/ChevronIcon.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function ChevronIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+			<path
+				stroke="#A0B6C3"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth={1.5}
+				d="m4 6 4 4 4-4"
+			/>
+		</svg>
+	);
+}

package/src/components/icons/CloseIcon.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function CloseIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg width={10} height={10} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M9.708.292a.999.999 0 0 0-1.413 0l-3.289 3.29L1.717.291A.999.999 0 0 0 .305 1.705l3.289 3.289-3.29 3.289a.999.999 0 1 0 1.413 1.412l3.29-3.289 3.288 3.29a.999.999 0 0 0 1.413-1.413l-3.29-3.29 3.29-3.288a.999.999 0 0 0 0-1.413Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

package/src/components/icons/SuiIcon.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function SuiIcon(props: ComponentProps<'svg'>) {
+	return (
+		<svg width={28} height={28} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<rect width={28} height={28} rx={6} fill="#6FBCF0" />
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M7.942 20.527A6.875 6.875 0 0 0 13.957 24c2.51 0 4.759-1.298 6.015-3.473a6.875 6.875 0 0 0 0-6.945l-5.29-9.164a.837.837 0 0 0-1.45 0l-5.29 9.164a6.875 6.875 0 0 0 0 6.945Zm4.524-11.75 1.128-1.953a.418.418 0 0 1 .725 0l4.34 7.516a5.365 5.365 0 0 1 .449 4.442 4.675 4.675 0 0 0-.223-.73c-.599-1.512-1.954-2.68-4.029-3.47-1.426-.54-2.336-1.336-2.706-2.364-.476-1.326.021-2.77.316-3.44Zm-1.923 3.332L9.255 14.34a5.373 5.373 0 0 0 0 5.43 5.373 5.373 0 0 0 4.702 2.714 5.38 5.38 0 0 0 3.472-1.247c.125-.314.51-1.462.034-2.646-.44-1.093-1.5-1.965-3.15-2.594-1.864-.707-3.076-1.811-3.6-3.28a4.601 4.601 0 0 1-.17-.608Z"
+				fill="#fff"
+			/>
+		</svg>
+	);
+}

package/src/constants/walletMutationKeys.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { MutationKey } from '@tanstack/react-query';
+
+export const walletMutationKeys = {
+	all: { baseScope: 'wallet' },
+	connectWallet: formMutationKeyFn('connect-wallet'),
+	disconnectWallet: formMutationKeyFn('disconnect-wallet'),
+	signPersonalMessage: formMutationKeyFn('sign-personal-message'),
+	signTransactionBlock: formMutationKeyFn('sign-transaction-block'),
+	signAndExecuteTransactionBlock: formMutationKeyFn('sign-and-execute-transaction-block'),
+	switchAccount: formMutationKeyFn('switch-account'),
+};
+
+function formMutationKeyFn(baseEntity: string) {
+	return function mutationKeyFn(additionalKeys: MutationKey = []) {
+		return [{ ...walletMutationKeys.all, baseEntity }, ...additionalKeys];
+	};
+}

package/src/contexts/walletContext.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext } from 'react';
+
+import type { WalletStore } from '../walletStore.js';
+
+export const WalletContext = createContext<WalletStore | null>(null);

package/src/errors/walletErrors.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that requires an active wallet connection.
+ */
+export class WalletNotConnectedError extends Error {}
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that requires a selected wallet account.
+ * This is more of an edge case stemming from the fact that wallets don't technically require you to authorize any
+ * accounts when connecting a wallet.
+ */
+export class WalletNoAccountSelectedError extends Error {}
+
+/**
+ * An error that is instantiated when someone attempts to perform an action that isn't supported by a wallet.
+ */
+export class WalletFeatureNotSupportedError extends Error {}
+
+/**
+ * An error that is instantiated when a wallet account can't be found for a specific wallet.
+ */
+export class WalletAccountNotFoundError extends Error {}

package/src/hooks/useSuiClient.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useContext } from 'react';
+
+import { SuiClientContext } from '../components/SuiClientProvider.js';
+
+export function useSuiClientContext() {
+	const suiClient = useContext(SuiClientContext);
+
+	if (!suiClient) {
+		throw new Error(
+			'Could not find SuiClientContext. Ensure that you have set up the SuiClientProvider',
+		);
+	}
+
+	return suiClient;
+}
+
+export function useSuiClient() {
+	return useSuiClientContext().client;
+}

package/src/hooks/useSuiClientInfiniteQuery.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SuiClient } from '@mysten/sui.js/client';
+import type { UseInfiniteQueryOptions } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { useSuiClientContext } from './useSuiClient.js';
+
+interface PaginatedResult {
+	data?: unknown;
+	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;
+	}>
+		? {
+				name: K;
+				result: R;
+				params: P;
+				cursor: Cursor;
+		  }
+		: never;
+};
+
+export type UseSuiClientInfiniteQueryOptions<T extends keyof SuiRpcPaginatedMethods> = Omit<
+	UseInfiniteQueryOptions<
+		SuiRpcPaginatedMethods[T]['result'],
+		Error,
+		SuiRpcPaginatedMethods[T]['result'],
+		SuiRpcPaginatedMethods[T]['result'],
+		unknown[]
+	>,
+	'queryFn'
+>;
+
+export function useSuiClientInfiniteQuery<T extends keyof SuiRpcPaginatedMethods>(
+	method: T,
+	params: SuiRpcPaginatedMethods[T]['params'],
+	{ queryKey = [], enabled = !!params, ...options }: UseSuiClientInfiniteQueryOptions<T> = {},
+) {
+	const suiContext = useSuiClientContext();
+
+	return useInfiniteQuery({
+		...options,
+		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;
+		},
+	});
+}

package/src/hooks/useSuiClientMutation.ts

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

package/src/hooks/useSuiClientQuery.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SuiClient } from '@mysten/sui.js/client';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import { useSuiClientContext } from './useSuiClient.js';
+
+export type SuiRpcMethodName = {
+	[K in keyof SuiClient]: SuiClient[K] extends ((input: any) => Promise<any>) | (() => Promise<any>)
+		? K
+		: never;
+}[keyof SuiClient];
+
+export type SuiRpcMethods = {
+	[K in SuiRpcMethodName]: SuiClient[K] extends (input: infer P) => Promise<infer R>
+		? {
+				name: K;
+				result: R;
+				params: P;
+		  }
+		: SuiClient[K] extends () => Promise<infer R>
+		? {
+				name: K;
+				result: R;
+				params: undefined | object;
+		  }
+		: never;
+};
+
+export type UseSuiClientQueryOptions<T extends keyof SuiRpcMethods> = Omit<
+	UseQueryOptions<SuiRpcMethods[T]['result'], Error, SuiRpcMethods[T]['result'], unknown[]>,
+	'queryFn'
+>;
+
+export function useSuiClientQuery<T extends keyof SuiRpcMethods>(
+	...args: undefined extends SuiRpcMethods[T]['params']
+		? [method: T, params?: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T>]
+		: [method: T, params: SuiRpcMethods[T]['params'], options?: UseSuiClientQueryOptions<T>]
+) {
+	const [method, params, { queryKey = [], enabled = !!params, ...options } = {}] = args as [
+		method: T,
+		params?: SuiRpcMethods[T]['params'],
+		options?: UseSuiClientQueryOptions<T>,
+	];
+
+	const suiContext = useSuiClientContext();
+
+	return useQuery({
+		...options,
+		queryKey: [suiContext.network, method, params, ...queryKey],
+		enabled,
+		queryFn: async () => {
+			return await suiContext.client[method](params as never);
+		},
+	});
+}

package/src/hooks/wallet/useAccounts.ts

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

package/src/hooks/wallet/useAutoConnectWallet.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from 'react';
+
+import { useConnectWallet } from './useConnectWallet.js';
+import { useWallets } from './useWallets.js';
+import { useWalletStore } from './useWalletStore.js';
+
+export function useAutoConnectWallet(autoConnectEnabled: boolean) {
+	const { mutate: connectWallet } = useConnectWallet();
+	const wallets = useWallets();
+	const lastConnectedWalletName = useWalletStore((state) => state.lastConnectedWalletName);
+	const lastConnectedAccountAddress = useWalletStore((state) => state.lastConnectedAccountAddress);
+
+	useEffect(() => {
+		if (!autoConnectEnabled || !lastConnectedWalletName) return;
+
+		const wallet = wallets.find((wallet) => wallet.name === lastConnectedWalletName);
+		if (wallet) {
+			connectWallet({
+				wallet,
+				accountAddress: lastConnectedAccountAddress || undefined,
+				silent: true,
+			});
+		}
+	}, [
+		autoConnectEnabled,
+		connectWallet,
+		lastConnectedAccountAddress,
+		lastConnectedWalletName,
+		wallets,
+	]);
+}

package/src/hooks/wallet/useConnectWallet.ts

@@ -0,0 +1,64 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type {
+	StandardConnectInput,
+	StandardConnectOutput,
+	WalletAccount,
+	WalletWithRequiredFeatures,
+} from '@mysten/wallet-standard';
+import type { UseMutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import { useWalletStore } from './useWalletStore.js';
+
+type ConnectWalletArgs = {
+	/** The wallet to connect to. */
+	wallet: WalletWithRequiredFeatures;
+
+	/** An optional account address to connect to. Defaults to the first authorized account. */
+	accountAddress?: string;
+} & StandardConnectInput;
+
+type ConnectWalletResult = StandardConnectOutput;
+
+type UseConnectWalletMutationOptions = Omit<
+	UseMutationOptions<ConnectWalletResult, Error, ConnectWalletArgs, unknown>,
+	'mutationFn'
+>;
+
+/**
+ * Mutation hook for establishing a connection to a specific wallet.
+ */
+export function useConnectWallet({
+	mutationKey,
+	...mutationOptions
+}: UseConnectWalletMutationOptions = {}) {
+	const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
+
+	return useMutation({
+		mutationKey: walletMutationKeys.connectWallet(mutationKey),
+		mutationFn: async ({ wallet, accountAddress, ...standardConnectInput }) => {
+			const connectResult = await wallet.features['standard:connect'].connect(standardConnectInput);
+			const selectedAccount = getSelectedAccount(connectResult.accounts, accountAddress);
+
+			setWalletConnected(wallet, selectedAccount);
+			return connectResult;
+		},
+		...mutationOptions,
+	});
+}
+
+function getSelectedAccount(connectedAccounts: readonly WalletAccount[], accountAddress?: string) {
+	if (connectedAccounts.length === 0) {
+		return null;
+	}
+
+	if (accountAddress) {
+		const selectedAccount = connectedAccounts.find((account) => account.address === accountAddress);
+		return selectedAccount ?? connectedAccounts[0];
+	}
+
+	return connectedAccounts[0];
+}

package/src/hooks/wallet/useCurrentAccount.ts

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

package/src/hooks/wallet/useCurrentWallet.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+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);
+}

package/src/hooks/wallet/useDisconnectWallet.ts

@@ -0,0 +1,47 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseMutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import { WalletNotConnectedError } from '../../errors/walletErrors.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useWalletStore } from './useWalletStore.js';
+
+type UseDisconnectWalletMutationOptions = Omit<
+	UseMutationOptions<void, Error, void, unknown>,
+	'mutationFn'
+>;
+
+/**
+ * Mutation hook for disconnecting from an active wallet connection, if currently connected.
+ */
+export function useDisconnectWallet({
+	mutationKey,
+	...mutationOptions
+}: UseDisconnectWalletMutationOptions = {}) {
+	const currentWallet = useCurrentWallet();
+	const setWalletDisconnected = useWalletStore((state) => state.setWalletDisconnected);
+
+	return useMutation({
+		mutationKey: walletMutationKeys.disconnectWallet(mutationKey),
+		mutationFn: async () => {
+			if (!currentWallet) {
+				throw new WalletNotConnectedError('No wallet is connected.');
+			}
+
+			try {
+				// Wallets aren't required to implement the disconnect feature, so we'll
+				// optionally call the disconnect feature if it exists and reset the UI
+				// state on the frontend at a minimum.
+				await currentWallet.features['standard:disconnect']?.disconnect();
+			} catch (error) {
+				console.error('Failed to disconnect the application from the current wallet.', error);
+			}
+
+			setWalletDisconnected();
+		},
+		...mutationOptions,
+	});
+}