@haneullabs/dapp-kit 0.1.0

package/src/components/ui/Heading.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import { headingVariants } from './Heading.css.js';
+import type { HeadingVariants } from './Heading.css.js';
+
+type HeadingAsChildProps = {
+	asChild?: boolean;
+	as?: never;
+};
+
+type HeadingAsProps = {
+	as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	asChild?: never;
+};
+
+type HeadingProps = (HeadingAsChildProps | HeadingAsProps) &
+	React.HTMLAttributes<HTMLHeadingElement> &
+	HeadingVariants;
+
+const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+	(
+		{
+			children,
+			className,
+			asChild = false,
+			as: Tag = 'h1',
+			size,
+			weight,
+			truncate,
+			...headingProps
+		},
+		forwardedRef,
+	) => {
+		return (
+			<Slot
+				{...headingProps}
+				ref={forwardedRef}
+				className={clsx(headingVariants({ size, weight, truncate }), className)}
+			>
+				{asChild ? children : <Tag>{children}</Tag>}
+			</Slot>
+		);
+	},
+);
+Heading.displayName = 'Heading';
+
+export { Heading };

package/src/components/ui/IconButton.css.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const container = style({
+	borderRadius: 9999,
+	padding: 8,
+	color: themeVars.colors.iconButton,
+	backgroundColor: themeVars.backgroundColors.iconButton,
+	':hover': {
+		backgroundColor: themeVars.backgroundColors.iconButtonHover,
+	},
+});

package/src/components/ui/IconButton.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import * as styles from './IconButton.css.js';
+
+type IconButtonProps = {
+	asChild?: boolean;
+	'aria-label': string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+	({ className, asChild = false, ...props }, forwardedRef) => {
+		const Comp = asChild ? Slot : 'button';
+		return <Comp {...props} className={clsx(styles.container, className)} ref={forwardedRef} />;
+	},
+);
+IconButton.displayName = 'Button';
+
+export { IconButton };

package/src/components/ui/Text.css.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const textVariants = recipe({
+	variants: {
+		size: {
+			sm: {
+				fontSize: themeVars.fontSizes.small,
+			},
+		},
+		weight: {
+			normal: { fontWeight: themeVars.fontWeights.normal },
+			medium: { fontWeight: themeVars.fontWeights.medium },
+			bold: { fontWeight: themeVars.fontWeights.bold },
+		},
+		color: {
+			muted: { color: themeVars.colors.bodyMuted },
+			danger: { color: themeVars.colors.bodyDanger },
+		},
+		mono: {
+			true: {
+				fontFamily:
+					'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+			},
+		},
+	},
+	defaultVariants: {
+		size: 'sm',
+		weight: 'normal',
+	},
+});
+
+export type TextVariants = RecipeVariants<typeof textVariants>;

package/src/components/ui/Text.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import { textVariants } from './Text.css.js';
+import type { TextVariants } from './Text.css.js';
+
+type TextAsChildProps = {
+	asChild?: boolean;
+	as?: never;
+};
+
+type TextDivProps = { as: 'div'; asChild?: never };
+
+type TextProps = (TextAsChildProps | TextDivProps) &
+	React.HTMLAttributes<HTMLDivElement> &
+	TextVariants;
+
+const Text = forwardRef<HTMLDivElement, TextProps>(
+	(
+		{
+			children,
+			className,
+			asChild = false,
+			as: Tag = 'div',
+			size,
+			weight,
+			color,
+			mono,
+			...textProps
+		},
+		forwardedRef,
+	) => {
+		return (
+			<Slot
+				{...textProps}
+				ref={forwardedRef}
+				className={clsx(textVariants({ size, weight, color, mono }), className)}
+			>
+				{asChild ? children : <Tag>{children}</Tag>}
+			</Slot>
+		);
+	},
+);
+Text.displayName = 'Text';
+
+export { Text };

package/src/constants/styleDataAttribute.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export const styleDataAttributeName = 'data-dapp-kit';
+
+export const styleDataAttributeSelector = `[${styleDataAttributeName}]`;
+
+export const styleDataAttribute = { [styleDataAttributeName]: '' };

package/src/constants/walletDefaults.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HaneulWalletFeatures, WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import { SLUSH_WALLET_NAME } from '@haneullabs/slush-wallet';
+
+import { createInMemoryStore } from '../utils/stateStorage.js';
+
+export const SUI_WALLET_NAME = 'Sui Wallet';
+
+export const DEFAULT_STORAGE =
+	typeof window !== 'undefined' && window.localStorage ? localStorage : createInMemoryStore();
+
+export const DEFAULT_STORAGE_KEY = 'sui-dapp-kit:wallet-connection-info';
+
+const SIGN_FEATURES = [
+	'sui:signTransaction',
+	'sui:signTransactionBlock',
+] satisfies (keyof HaneulWalletFeatures)[];
+
+export const DEFAULT_WALLET_FILTER = (wallet: WalletWithRequiredFeatures) =>
+	SIGN_FEATURES.some((feature) => wallet.features[feature]);
+
+export const DEFAULT_PREFERRED_WALLETS = [SUI_WALLET_NAME, SLUSH_WALLET_NAME];

package/src/constants/walletMutationKeys.ts

@@ -0,0 +1,22 @@
+// 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'),
+	autoconnectWallet: formMutationKeyFn('autoconnect-wallet'),
+	disconnectWallet: formMutationKeyFn('disconnect-wallet'),
+	signPersonalMessage: formMutationKeyFn('sign-personal-message'),
+	signTransaction: formMutationKeyFn('sign-transaction'),
+	signAndExecuteTransaction: formMutationKeyFn('sign-and-execute-transaction'),
+	switchAccount: formMutationKeyFn('switch-account'),
+	reportTransactionEffects: formMutationKeyFn('report-transaction-effects'),
+};
+
+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/networkConfig.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HaneulClientOptions } from '@haneullabs/haneul/client';
+
+import { useHaneulClientContext } from './useHaneulClient.js';
+
+export type NetworkConfig<T extends object = object> = HaneulClientOptions & {
+	variables?: T;
+};
+
+export function createNetworkConfig<
+	const T extends Record<string, Config>,
+	Config extends NetworkConfig<Variables> = T[keyof T],
+	Variables extends object = NonNullable<Config['variables']>,
+>(networkConfig: T) {
+	function useNetworkConfig(): Config {
+		const { config } = useHaneulClientContext();
+
+		if (!config) {
+			throw new Error('No network config found');
+		}
+
+		return config as T[keyof T];
+	}
+
+	function useNetworkVariables(): Variables {
+		const { variables } = useNetworkConfig();
+
+		return (variables ?? {}) as Variables;
+	}
+
+	function useNetworkVariable<K extends keyof Variables>(name: K): Variables[K] {
+		const variables = useNetworkVariables();
+
+		return variables[name];
+	}
+
+	return {
+		networkConfig,
+		useNetworkConfig,
+		useNetworkVariables,
+		useNetworkVariable,
+	};
+}

package/src/hooks/useHaneulClient.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HaneulClient } from '@haneullabs/haneul/client';
+import { useContext } from 'react';
+
+import { HaneulClientContext } from '../components/HaneulClientProvider.js';
+
+export function useHaneulClientContext() {
+	const haneulClient = useContext(HaneulClientContext);
+
+	if (!haneulClient) {
+		throw new Error(
+			'Could not find HaneulClientContext. Ensure that you have set up the HaneulClientProvider',
+		);
+	}
+
+	return haneulClient;
+}
+
+export function useHaneulClient(): HaneulClient {
+	return useHaneulClientContext().client;
+}

package/src/hooks/useHaneulClientInfiniteQuery.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HaneulClient } from '@haneullabs/haneul/client';
+import type {
+	InfiniteData,
+	UseInfiniteQueryOptions,
+	UseInfiniteQueryResult,
+} from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import type { PartialBy } from '../types/utilityTypes.js';
+import { useHaneulClientContext } from './useHaneulClient.js';
+
+interface PaginatedResult {
+	data?: unknown;
+	nextCursor?: unknown;
+	hasNextPage: boolean;
+}
+
+export type SuiRpcPaginatedMethodName = {
+	[K in keyof HaneulClient]: HaneulClient[K] extends (input: any) => Promise<PaginatedResult> ? K : never;
+}[keyof HaneulClient];
+
+export type SuiRpcPaginatedMethods = {
+	[K in SuiRpcPaginatedMethodName]: HaneulClient[K] extends (
+		input: infer Params,
+	) => Promise<
+		infer Result extends { hasNextPage?: boolean | null; nextCursor?: infer Cursor | null }
+	>
+		? {
+				name: K;
+				result: Result;
+				params: Params;
+				cursor: Cursor;
+			}
+		: never;
+};
+
+export type UseHaneulClientInfiniteQueryOptions<
+	T extends keyof SuiRpcPaginatedMethods,
+	TData,
+> = PartialBy<
+	Omit<
+		UseInfiniteQueryOptions<SuiRpcPaginatedMethods[T]['result'], Error, TData, unknown[]>,
+		'queryFn' | 'initialPageParam' | 'getNextPageParam'
+	>,
+	'queryKey'
+>;
+
+export function useHaneulClientInfiniteQuery<
+	T extends keyof SuiRpcPaginatedMethods,
+	TData = InfiniteData<SuiRpcPaginatedMethods[T]['result']>,
+>(
+	method: T,
+	params: SuiRpcPaginatedMethods[T]['params'],
+	{
+		queryKey = [],
+		enabled = !!params,
+		...options
+	}: UseHaneulClientInfiniteQueryOptions<T, TData> = {},
+): UseInfiniteQueryResult<TData, Error> {
+	const suiContext = useHaneulClientContext();
+
+	return useInfiniteQuery({
+		...options,
+		initialPageParam: null,
+		queryKey: [suiContext.network, method, params, ...queryKey],
+		enabled,
+		queryFn: ({ pageParam }) =>
+			suiContext.client[method]({
+				// oxlint-disable-next-line no-useless-fallback-in-spread
+				...(params ?? {}),
+				cursor: pageParam,
+			} as never),
+		getNextPageParam: (lastPage) => (lastPage.hasNextPage ? (lastPage.nextCursor ?? null) : null),
+	});
+}

package/src/hooks/useHaneulClientMutation.ts

@@ -0,0 +1,27 @@
+// 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 { useHaneulClientContext } from './useHaneulClient.js';
+import type { SuiRpcMethods } from './useHaneulClientQuery.js';
+
+export type UseHaneulClientMutationOptions<T extends keyof SuiRpcMethods> = Omit<
+	UseMutationOptions<SuiRpcMethods[T]['result'], Error, SuiRpcMethods[T]['params'], unknown[]>,
+	'mutationFn'
+>;
+
+export function useHaneulClientMutation<T extends keyof SuiRpcMethods>(
+	method: T,
+	options: UseHaneulClientMutationOptions<T> = {},
+): UseMutationResult<SuiRpcMethods[T]['result'], Error, SuiRpcMethods[T]['params'], unknown[]> {
+	const suiContext = useHaneulClientContext();
+
+	return useMutation({
+		...options,
+		mutationFn: async (params) => {
+			return await suiContext.client[method](params as never);
+		},
+	});
+}

package/src/hooks/useHaneulClientQueries.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
+
+import { useHaneulClientContext } from './useHaneulClient.js';
+import type { SuiRpcMethods, UseHaneulClientQueryOptions } from './useHaneulClientQuery.js';
+
+type HaneulClientQueryOptions = SuiRpcMethods[keyof SuiRpcMethods] extends infer Method
+	? Method extends {
+			name: infer M extends keyof SuiRpcMethods;
+			params?: infer P;
+		}
+		? undefined extends P
+			? {
+					method: M;
+					params?: P;
+					options?: UseHaneulClientQueryOptions<M, unknown>;
+				}
+			: {
+					method: M;
+					params: P;
+					options?: UseHaneulClientQueryOptions<M, unknown>;
+				}
+		: never
+	: never;
+
+export type UseHaneulClientQueriesResults<Args extends readonly HaneulClientQueryOptions[]> = {
+	-readonly [K in keyof Args]: Args[K] extends {
+		method: infer M extends keyof SuiRpcMethods;
+		readonly options?:
+			| {
+					select?: (...args: any[]) => infer R;
+			  }
+			| object;
+	}
+		? UseQueryResult<unknown extends R ? SuiRpcMethods[M]['result'] : R>
+		: never;
+};
+
+export function useHaneulClientQueries<
+	const Queries extends readonly HaneulClientQueryOptions[],
+	Results = UseHaneulClientQueriesResults<Queries>,
+>({
+	queries,
+	combine,
+}: {
+	queries: Queries;
+	combine?: (results: UseHaneulClientQueriesResults<Queries>) => Results;
+}): Results {
+	const suiContext = useHaneulClientContext();
+
+	return useQueries({
+		combine: combine as never,
+		queries: queries.map((query) => {
+			const { method, params, options: { queryKey = [], ...restOptions } = {} } = query;
+
+			return {
+				...restOptions,
+				queryKey: [suiContext.network, method, params, ...queryKey],
+				queryFn: async () => {
+					return await suiContext.client[method](params as never);
+				},
+			};
+		}) as [],
+	});
+}

package/src/hooks/useHaneulClientQuery.ts

@@ -0,0 +1,123 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { HaneulClient } from '@haneullabs/haneul/client';
+import type {
+	UndefinedInitialDataOptions,
+	UseQueryOptions,
+	UseQueryResult,
+} from '@tanstack/react-query';
+import { queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import type { PartialBy } from '../types/utilityTypes.js';
+import { useHaneulClientContext } from './useHaneulClient.js';
+
+export type SuiRpcMethodName = {
+	[K in keyof HaneulClient]: HaneulClient[K] extends ((input: any) => Promise<any>) | (() => Promise<any>)
+		? K
+		: never;
+}[keyof HaneulClient];
+
+export type SuiRpcMethods = {
+	[K in SuiRpcMethodName]: HaneulClient[K] extends (input: infer P) => Promise<infer R>
+		? {
+				name: K;
+				result: R;
+				params: P;
+			}
+		: HaneulClient[K] extends () => Promise<infer R>
+			? {
+					name: K;
+					result: R;
+					params: undefined | object;
+				}
+			: never;
+};
+
+export type UseHaneulClientQueryOptions<T extends keyof SuiRpcMethods, TData> = PartialBy<
+	Omit<UseQueryOptions<SuiRpcMethods[T]['result'], Error, TData, unknown[]>, 'queryFn'>,
+	'queryKey'
+>;
+
+export type GetHaneulClientQueryOptions<T extends keyof SuiRpcMethods> = {
+	client: HaneulClient;
+	network: string;
+	method: T;
+	options?: PartialBy<
+		Omit<UndefinedInitialDataOptions<SuiRpcMethods[T]['result']>, 'queryFn'>,
+		'queryKey'
+	>;
+} & (undefined extends SuiRpcMethods[T]['params']
+	? { params?: SuiRpcMethods[T]['params'] }
+	: { params: SuiRpcMethods[T]['params'] });
+
+export function getHaneulClientQuery<T extends keyof SuiRpcMethods>({
+	client,
+	network,
+	method,
+	params,
+	options,
+}: GetHaneulClientQueryOptions<T>) {
+	return queryOptions<SuiRpcMethods[T]['result']>({
+		...options,
+		queryKey: [network, method, params],
+		queryFn: async () => {
+			return await client[method](params as never);
+		},
+	});
+}
+
+export function useHaneulClientQuery<
+	T extends keyof SuiRpcMethods,
+	TData = SuiRpcMethods[T]['result'],
+>(
+	...args: undefined extends SuiRpcMethods[T]['params']
+		? [method: T, params?: SuiRpcMethods[T]['params'], options?: UseHaneulClientQueryOptions<T, TData>]
+		: [method: T, params: SuiRpcMethods[T]['params'], options?: UseHaneulClientQueryOptions<T, TData>]
+): UseQueryResult<TData, Error> {
+	const [method, params, { queryKey = [], ...options } = {}] = args as [
+		method: T,
+		params?: SuiRpcMethods[T]['params'],
+		options?: UseHaneulClientQueryOptions<T, TData>,
+	];
+
+	const suiContext = useHaneulClientContext();
+
+	return useQuery({
+		...options,
+		queryKey: [suiContext.network, method, params, ...queryKey],
+		queryFn: async () => {
+			return await suiContext.client[method](params as never);
+		},
+	});
+}
+
+export function useHaneulClientSuspenseQuery<
+	T extends keyof SuiRpcMethods,
+	TData = SuiRpcMethods[T]['result'],
+>(
+	...args: undefined extends SuiRpcMethods[T]['params']
+		? [method: T, params?: SuiRpcMethods[T]['params'], options?: UndefinedInitialDataOptions<TData>]
+		: [method: T, params: SuiRpcMethods[T]['params'], options?: UndefinedInitialDataOptions<TData>]
+) {
+	const [method, params, options = {}] = args as [
+		method: T,
+		params?: SuiRpcMethods[T]['params'],
+		options?: UndefinedInitialDataOptions<TData>,
+	];
+
+	const suiContext = useHaneulClientContext();
+
+	const query = useMemo(() => {
+		return getHaneulClientQuery<T>({
+			client: suiContext.client,
+			network: suiContext.network,
+			method,
+			params,
+			options,
+		});
+	}, [suiContext.client, suiContext.network, method, params, options]);
+
+	return useSuspenseQuery(query);
+}

package/src/hooks/useResolveHaneulNSNames.ts

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

package/src/hooks/wallet/useAccounts.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 a list of connected accounts authorized by the dApp.
+ */
+export function useAccounts(): readonly WalletAccount[] {
+	return useWalletStore((state) => state.accounts);
+}