@haneullabs/dapp-kit 0.1.0

package/src/hooks/wallet/useAutoConnectWallet.ts

@@ -0,0 +1,92 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useQuery } from '@tanstack/react-query';
+import { useLayoutEffect, useState } from 'react';
+
+import { getWalletUniqueIdentifier } from '../../utils/walletUtils.js';
+import { useConnectWallet } from './useConnectWallet.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useWallets } from './useWallets.js';
+import { useWalletStore } from './useWalletStore.js';
+
+export function useAutoConnectWallet(): 'disabled' | 'idle' | 'attempted' {
+	const { mutateAsync: connectWallet } = useConnectWallet();
+	const autoConnectEnabled = useWalletStore((state) => state.autoConnectEnabled);
+	const lastConnectedWalletName = useWalletStore((state) => state.lastConnectedWalletName);
+	const lastConnectedAccountAddress = useWalletStore((state) => state.lastConnectedAccountAddress);
+	const wallets = useWallets();
+	const { isConnected } = useCurrentWallet();
+
+	const [clientOnly, setClientOnly] = useState(false);
+	useLayoutEffect(() => {
+		setClientOnly(true);
+	}, []);
+
+	const { data, isError } = useQuery({
+		queryKey: [
+			'@haneullabs/dapp-kit',
+			'autoconnect',
+			{
+				isConnected,
+				autoConnectEnabled,
+				lastConnectedWalletName,
+				lastConnectedAccountAddress,
+				walletCount: wallets.length,
+			},
+		],
+		queryFn: async () => {
+			if (!autoConnectEnabled) {
+				return 'disabled';
+			}
+
+			if (!lastConnectedWalletName || !lastConnectedAccountAddress || isConnected) {
+				return 'attempted';
+			}
+
+			const wallet = wallets.find(
+				(wallet) => getWalletUniqueIdentifier(wallet) === lastConnectedWalletName,
+			);
+			if (wallet) {
+				await connectWallet({
+					wallet,
+					accountAddress: lastConnectedAccountAddress,
+					silent: true,
+				});
+			}
+
+			return 'attempted';
+		},
+		enabled: autoConnectEnabled,
+		persister: undefined,
+		gcTime: 0,
+		staleTime: 0,
+		networkMode: 'always',
+		retry: false,
+		retryOnMount: false,
+		refetchInterval: false,
+		refetchIntervalInBackground: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		refetchOnWindowFocus: false,
+	});
+
+	if (!autoConnectEnabled) {
+		return 'disabled';
+	}
+
+	// We always initialize with "idle" so that in SSR environments, we guarantee that the initial render states always agree:
+	if (!clientOnly) {
+		return 'idle';
+	}
+
+	if (isConnected) {
+		return 'attempted';
+	}
+
+	if (!lastConnectedWalletName) {
+		return 'attempted';
+	}
+
+	return isError ? 'attempted' : (data ?? 'idle');
+}

package/src/hooks/wallet/useConnectWallet.ts

@@ -0,0 +1,86 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type {
+	StandardConnectInput,
+	StandardConnectOutput,
+	WalletAccount,
+	WalletWithRequiredFeatures,
+} from '@haneullabs/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } 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 = {}): 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, ...connectArgs }) => {
+			try {
+				setConnectionStatus('connecting');
+
+				const connectResult = await wallet.features['standard:connect'].connect(connectArgs);
+				let supportedIntents = connectResult.supportedIntents;
+				if (!supportedIntents && wallet.features['sui:getCapabilities']) {
+					supportedIntents =
+						(await wallet.features['sui:getCapabilities'].getCapabilities()).supportedIntents ?? [];
+				}
+				const connectedHaneulAccounts = connectResult.accounts.filter((account) =>
+					account.chains.some((chain) => chain.split(':')[0] === 'sui'),
+				);
+				const selectedAccount = getSelectedAccount(connectedHaneulAccounts, accountAddress);
+
+				setWalletConnected(wallet, connectedHaneulAccounts, selectedAccount, supportedIntents);
+
+				return { accounts: connectedHaneulAccounts };
+			} catch (error) {
+				setConnectionStatus('disconnected');
+				throw error;
+			}
+		},
+		...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,13 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletAccount } from '@haneullabs/wallet-standard';
+
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves the wallet account that is currently selected, if one exists.
+ */
+export function useCurrentAccount(): WalletAccount | null {
+	return useWalletStore((state) => state.currentAccount);
+}

package/src/hooks/wallet/useCurrentWallet.ts

@@ -0,0 +1,44 @@
+// 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() {
+	const currentWallet = useWalletStore((state) => state.currentWallet);
+	const connectionStatus = useWalletStore((state) => state.connectionStatus);
+	const supportedIntents = useWalletStore((state) => state.supportedIntents);
+
+	switch (connectionStatus) {
+		case 'connecting':
+			return {
+				connectionStatus,
+				currentWallet: null,
+				isDisconnected: false,
+				isConnecting: true,
+				isConnected: false,
+				supportedIntents: [],
+			} as const;
+		case 'disconnected':
+			return {
+				connectionStatus,
+				currentWallet: null,
+				isDisconnected: true,
+				isConnecting: false,
+				isConnected: false,
+				supportedIntents: [],
+			} as const;
+		case 'connected': {
+			return {
+				connectionStatus,
+				currentWallet: currentWallet!,
+				isDisconnected: false,
+				isConnecting: false,
+				isConnected: true,
+				supportedIntents,
+			} as const;
+		}
+	}
+}

package/src/hooks/wallet/useDisconnectWallet.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseMutationOptions, UseMutationResult } 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 UseDisconnectWalletError = WalletNotConnectedError | Error;
+
+type UseDisconnectWalletMutationOptions = Omit<
+	UseMutationOptions<void, UseDisconnectWalletError, void, unknown>,
+	'mutationFn'
+>;
+
+/**
+ * Mutation hook for disconnecting from an active wallet connection, if currently connected.
+ */
+export function useDisconnectWallet({
+	mutationKey,
+	...mutationOptions
+}: UseDisconnectWalletMutationOptions = {}): UseMutationResult<
+	void,
+	UseDisconnectWalletError,
+	void
+> {
+	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,
+	});
+}

package/src/hooks/wallet/useReportTransactionEffects.ts

@@ -0,0 +1,82 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { toBase64 } from '@haneullabs/haneul/utils';
+import type { HaneulReportTransactionEffectsInput } from '@haneullabs/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import type { WalletFeatureNotSupportedError } from '../../errors/walletErrors.js';
+import {
+	WalletNoAccountSelectedError,
+	WalletNotConnectedError,
+} from '../../errors/walletErrors.js';
+import type { PartialBy } from '../../types/utilityTypes.js';
+import { useCurrentAccount } from './useCurrentAccount.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+
+type UseReportTransactionEffectsArgs = Omit<
+	PartialBy<HaneulReportTransactionEffectsInput, 'account' | 'chain'>,
+	'effects'
+> & {
+	effects: string | number[];
+};
+
+type UseReportTransactionEffectsError =
+	| WalletFeatureNotSupportedError
+	| WalletNoAccountSelectedError
+	| WalletNotConnectedError
+	| Error;
+
+type UseReportTransactionEffectsMutationOptions = Omit<
+	UseMutationOptions<
+		void,
+		UseReportTransactionEffectsError,
+		UseReportTransactionEffectsArgs,
+		unknown
+	>,
+	'mutationFn'
+>;
+
+/**
+ * Mutation hook for prompting the user to sign a message.
+ */
+export function useReportTransactionEffects({
+	mutationKey,
+	...mutationOptions
+}: UseReportTransactionEffectsMutationOptions = {}): UseMutationResult<
+	void,
+	UseReportTransactionEffectsError,
+	UseReportTransactionEffectsArgs
+> {
+	const { currentWallet } = useCurrentWallet();
+	const currentAccount = useCurrentAccount();
+
+	return useMutation({
+		mutationKey: walletMutationKeys.reportTransactionEffects(mutationKey),
+		mutationFn: async ({ effects, chain = currentWallet?.chains[0], account = currentAccount }) => {
+			if (!currentWallet) {
+				throw new WalletNotConnectedError('No wallet is connected.');
+			}
+
+			if (!account) {
+				throw new WalletNoAccountSelectedError(
+					'No wallet account is selected to report transaction effects for',
+				);
+			}
+
+			const reportTransactionEffectsFeature =
+				currentWallet.features['sui:reportTransactionEffects'];
+
+			if (reportTransactionEffectsFeature) {
+				return await reportTransactionEffectsFeature.reportTransactionEffects({
+					effects: Array.isArray(effects) ? toBase64(new Uint8Array(effects)) : effects,
+					account,
+					chain: chain ?? currentWallet?.chains[0],
+				});
+			}
+		},
+		...mutationOptions,
+	});
+}

package/src/hooks/wallet/useSignAndExecuteTransaction.ts

@@ -0,0 +1,171 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Transaction } from '@haneullabs/haneul/transactions';
+import { toBase64 } from '@haneullabs/haneul/utils';
+import type {
+	HaneulSignAndExecuteTransactionInput,
+	HaneulSignAndExecuteTransactionOutput,
+} from '@haneullabs/wallet-standard';
+import { signTransaction } from '@haneullabs/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import {
+	WalletFeatureNotSupportedError,
+	WalletNoAccountSelectedError,
+	WalletNotConnectedError,
+} from '../../errors/walletErrors.js';
+import type { PartialBy } from '../../types/utilityTypes.js';
+import { useHaneulClientContext } from '../useHaneulClient.js';
+import { useCurrentAccount } from './useCurrentAccount.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useReportTransactionEffects } from './useReportTransactionEffects.js';
+
+type UseSignAndExecuteTransactionArgs = PartialBy<
+	Omit<HaneulSignAndExecuteTransactionInput, 'transaction'>,
+	'account' | 'chain'
+> & {
+	transaction: Transaction | string;
+};
+
+type UseSignAndExecuteTransactionResult = HaneulSignAndExecuteTransactionOutput;
+
+type UseSignAndExecuteTransactionError =
+	| WalletFeatureNotSupportedError
+	| WalletNoAccountSelectedError
+	| WalletNotConnectedError
+	| Error;
+
+type ExecuteTransactionResult =
+	| {
+			digest: string;
+			rawEffects?: number[];
+	  }
+	| {
+			effects?: {
+				bcs?: string;
+			};
+	  };
+
+type UseSignAndExecuteTransactionMutationOptions<Result extends ExecuteTransactionResult> = Omit<
+	UseMutationOptions<
+		Result,
+		UseSignAndExecuteTransactionError,
+		UseSignAndExecuteTransactionArgs,
+		unknown
+	>,
+	'mutationFn'
+> & {
+	execute?: ({ bytes, signature }: { bytes: string; signature: string }) => Promise<Result>;
+};
+
+/**
+ * Mutation hook for prompting the user to sign and execute a transaction.
+ */
+export function useSignAndExecuteTransaction<
+	Result extends ExecuteTransactionResult = UseSignAndExecuteTransactionResult,
+>({
+	mutationKey,
+	execute,
+	...mutationOptions
+}: UseSignAndExecuteTransactionMutationOptions<Result> = {}): UseMutationResult<
+	Result,
+	UseSignAndExecuteTransactionError,
+	UseSignAndExecuteTransactionArgs
+> {
+	const { currentWallet, supportedIntents } = useCurrentWallet();
+	const currentAccount = useCurrentAccount();
+	const { client, network } = useHaneulClientContext();
+	const { mutate: reportTransactionEffects } = useReportTransactionEffects();
+
+	const executeTransaction: ({
+		bytes,
+		signature,
+	}: {
+		bytes: string;
+		signature: string;
+	}) => Promise<ExecuteTransactionResult> =
+		execute ??
+		(async ({ bytes, signature }) => {
+			const { digest, rawEffects } = await client.executeTransactionBlock({
+				transactionBlock: bytes,
+				signature,
+				options: {
+					showRawEffects: true,
+				},
+			});
+
+			return {
+				digest,
+				rawEffects,
+				effects: toBase64(new Uint8Array(rawEffects!)),
+				bytes,
+				signature,
+			};
+		});
+
+	return useMutation({
+		mutationKey: walletMutationKeys.signAndExecuteTransaction(mutationKey),
+		mutationFn: async ({ transaction, ...signTransactionArgs }): Promise<Result> => {
+			if (!currentWallet) {
+				throw new WalletNotConnectedError('No wallet is connected.');
+			}
+
+			const signerAccount = signTransactionArgs.account ?? currentAccount;
+			if (!signerAccount) {
+				throw new WalletNoAccountSelectedError(
+					'No wallet account is selected to sign the transaction with.',
+				);
+			}
+
+			if (
+				!currentWallet.features['sui:signTransaction'] &&
+				!currentWallet.features['sui:signTransactionBlock']
+			) {
+				throw new WalletFeatureNotSupportedError(
+					"This wallet doesn't support the `signTransaction` feature.",
+				);
+			}
+
+			if (typeof transaction !== 'string' && 'setSenderIfNotSet' in transaction) {
+				transaction.setSenderIfNotSet(signerAccount.address);
+			}
+
+			const chain = signTransactionArgs.chain ?? `sui:${network}`;
+			const { signature, bytes } = await signTransaction(currentWallet, {
+				...signTransactionArgs,
+				transaction: {
+					async toJSON() {
+						return typeof transaction === 'string'
+							? transaction
+							: await transaction.toJSON({
+									supportedIntents,
+									client,
+								});
+					},
+				},
+				account: signerAccount,
+				chain,
+			});
+
+			const result = await executeTransaction({ bytes, signature });
+
+			let effects: string;
+
+			if ('effects' in result && result.effects?.bcs) {
+				effects = result.effects.bcs;
+			} else if ('rawEffects' in result) {
+				effects = toBase64(new Uint8Array(result.rawEffects!));
+			} else {
+				throw new Error('Could not parse effects from transaction result.');
+			}
+
+			reportTransactionEffects({ effects, account: signerAccount, chain });
+
+			return result as Result;
+		},
+		...mutationOptions,
+	});
+}

package/src/hooks/wallet/useSignPersonalMessage.ts

@@ -0,0 +1,100 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type {
+	HaneulSignPersonalMessageInput,
+	HaneulSignPersonalMessageOutput,
+} from '@haneullabs/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import {
+	WalletFeatureNotSupportedError,
+	WalletNoAccountSelectedError,
+	WalletNotConnectedError,
+} from '../..//errors/walletErrors.js';
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import type { PartialBy } from '../../types/utilityTypes.js';
+import { useHaneulClientContext } from '../useHaneulClient.js';
+import { useCurrentAccount } from './useCurrentAccount.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+
+type UseSignPersonalMessageArgs = PartialBy<HaneulSignPersonalMessageInput, 'account' | 'chain'>;
+
+type UseSignPersonalMessageResult = HaneulSignPersonalMessageOutput;
+
+type UseSignPersonalMessageError =
+	| WalletFeatureNotSupportedError
+	| WalletNoAccountSelectedError
+	| WalletNotConnectedError
+	| Error;
+
+type UseSignPersonalMessageMutationOptions = Omit<
+	UseMutationOptions<
+		UseSignPersonalMessageResult,
+		UseSignPersonalMessageError,
+		UseSignPersonalMessageArgs,
+		unknown
+	>,
+	'mutationFn'
+>;
+
+/**
+ * Mutation hook for prompting the user to sign a message.
+ */
+export function useSignPersonalMessage({
+	mutationKey,
+	...mutationOptions
+}: UseSignPersonalMessageMutationOptions = {}): UseMutationResult<
+	UseSignPersonalMessageResult,
+	UseSignPersonalMessageError,
+	UseSignPersonalMessageArgs
+> {
+	const { currentWallet } = useCurrentWallet();
+	const currentAccount = useCurrentAccount();
+	const { network } = useHaneulClientContext();
+
+	return useMutation({
+		mutationKey: walletMutationKeys.signPersonalMessage(mutationKey),
+		mutationFn: async (signPersonalMessageArgs) => {
+			if (!currentWallet) {
+				throw new WalletNotConnectedError('No wallet is connected.');
+			}
+
+			const signerAccount = signPersonalMessageArgs.account ?? currentAccount;
+			if (!signerAccount) {
+				throw new WalletNoAccountSelectedError(
+					'No wallet account is selected to sign the personal message with.',
+				);
+			}
+
+			const signPersonalMessageFeature = currentWallet.features['sui:signPersonalMessage'];
+			if (signPersonalMessageFeature) {
+				return await signPersonalMessageFeature.signPersonalMessage({
+					...signPersonalMessageArgs,
+					account: signerAccount,
+					chain: signPersonalMessageArgs.chain ?? `sui:${network}`,
+				});
+			}
+
+			// TODO: Remove this once we officially discontinue sui:signMessage in the wallet standard
+			const signMessageFeature = currentWallet.features['sui:signMessage'];
+			if (signMessageFeature) {
+				console.warn(
+					"This wallet doesn't support the `signPersonalMessage` feature... falling back to `signMessage`.",
+				);
+
+				const { messageBytes, signature } = await signMessageFeature.signMessage({
+					...signPersonalMessageArgs,
+					account: signerAccount,
+				});
+				return { bytes: messageBytes, signature };
+			}
+
+			throw new WalletFeatureNotSupportedError(
+				"This wallet doesn't support the `signPersonalMessage` feature.",
+			);
+		},
+		...mutationOptions,
+	});
+}