@haneullabs/dapp-kit 0.1.0

package/src/components/AccountDropdownMenu.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { formatAddress } from '@haneullabs/haneul/utils';
+import type { WalletAccount } from '@haneullabs/wallet-standard';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+import { useResolveHaneulNSName } from '../hooks/useResolveHaneulNSNames.js';
+import { useAccounts } from '../hooks/wallet/useAccounts.js';
+import { useDisconnectWallet } from '../hooks/wallet/useDisconnectWallet.js';
+import { useSwitchAccount } from '../hooks/wallet/useSwitchAccount.js';
+import * as styles from './AccountDropdownMenu.css.js';
+import { CheckIcon } from './icons/CheckIcon.js';
+import { ChevronIcon } from './icons/ChevronIcon.js';
+import { StyleMarker } from './styling/StyleMarker.js';
+import { Button } from './ui/Button.js';
+import { Text } from './ui/Text.js';
+
+type AccountDropdownMenuProps = {
+	currentAccount: WalletAccount;
+};
+
+export function AccountDropdownMenu({ currentAccount }: AccountDropdownMenuProps) {
+	const { mutate: disconnectWallet } = useDisconnectWallet();
+
+	const { data: domain } = useResolveHaneulNSName(
+		currentAccount.label ? null : currentAccount.address,
+	);
+	const accounts = useAccounts();
+
+	return (
+		<DropdownMenu.Root modal={false}>
+			<StyleMarker>
+				<DropdownMenu.Trigger asChild>
+					<Button size="lg" className={styles.connectedAccount}>
+						<Text mono weight="bold">
+							{currentAccount.label ?? domain ?? formatAddress(currentAccount.address)}
+						</Text>
+						<ChevronIcon />
+					</Button>
+				</DropdownMenu.Trigger>
+			</StyleMarker>
+			<DropdownMenu.Portal>
+				<StyleMarker className={styles.menuContainer}>
+					<DropdownMenu.Content className={styles.menuContent}>
+						{accounts.map((account) => (
+							<AccountDropdownMenuItem
+								key={account.address}
+								account={account}
+								active={currentAccount.address === account.address}
+							/>
+						))}
+						<DropdownMenu.Separator className={styles.separator} />
+						<DropdownMenu.Item
+							className={clsx(styles.menuItem)}
+							onSelect={() => disconnectWallet()}
+						>
+							Disconnect
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</StyleMarker>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}
+
+export function AccountDropdownMenuItem({
+	account,
+	active,
+}: {
+	account: WalletAccount;
+	active?: boolean;
+}) {
+	const { mutate: switchAccount } = useSwitchAccount();
+	const { data: domain } = useResolveHaneulNSName(account.label ? null : account.address);
+
+	return (
+		<DropdownMenu.Item
+			className={clsx(styles.menuItem, styles.switchAccountMenuItem)}
+			onSelect={() => switchAccount({ account })}
+		>
+			<Text mono>{account.label ?? domain ?? formatAddress(account.address)}</Text>
+			{active ? <CheckIcon /> : null}
+		</DropdownMenu.Item>
+	);
+}

package/src/components/ConnectButton.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { useCurrentAccount } from '../hooks/wallet/useCurrentAccount.js';
+import { AccountDropdownMenu } from './AccountDropdownMenu.js';
+import { ConnectModal } from './connect-modal/ConnectModal.js';
+import { StyleMarker } from './styling/StyleMarker.js';
+import { Button } from './ui/Button.js';
+
+type ConnectButtonProps = {
+	connectText?: ReactNode;
+	/** Filter the wallets shown in the connect modal */
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function ConnectButton({
+	connectText = 'Connect Wallet',
+	walletFilter,
+	...buttonProps
+}: ConnectButtonProps) {
+	const currentAccount = useCurrentAccount();
+	return currentAccount ? (
+		<AccountDropdownMenu currentAccount={currentAccount} />
+	) : (
+		<ConnectModal
+			walletFilter={walletFilter}
+			trigger={
+				<StyleMarker>
+					<Button {...buttonProps}>{connectText}</Button>
+				</StyleMarker>
+			}
+		/>
+	);
+}

package/src/components/HaneulClientProvider.tsx

@@ -0,0 +1,96 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getFullnodeUrl, isHaneulClient, HaneulClient } from '@haneullabs/haneul/client';
+import type { HaneulClientOptions } from '@haneullabs/haneul/client';
+import { createContext, useMemo, useState } from 'react';
+
+import type { NetworkConfig } from '../hooks/networkConfig.js';
+
+type NetworkConfigs<T extends NetworkConfig | HaneulClient = NetworkConfig | HaneulClient> = Record<
+	string,
+	T
+>;
+
+export interface HaneulClientProviderContext {
+	client: HaneulClient;
+	networks: NetworkConfigs;
+	network: string;
+	config: NetworkConfig | null;
+	selectNetwork: (network: string) => void;
+}
+
+export const HaneulClientContext = createContext<HaneulClientProviderContext | null>(null);
+
+export type HaneulClientProviderProps<T extends NetworkConfigs> = {
+	createClient?: (name: keyof T, config: T[keyof T]) => HaneulClient;
+	children: React.ReactNode;
+	networks?: T;
+	onNetworkChange?: (network: keyof T & string) => void;
+} & (
+	| {
+			defaultNetwork?: keyof T & string;
+			network?: never;
+	  }
+	| {
+			defaultNetwork?: never;
+			network?: keyof T & string;
+	  }
+);
+
+const DEFAULT_NETWORKS = {
+	localnet: { url: getFullnodeUrl('localnet') },
+};
+
+const DEFAULT_CREATE_CLIENT = function createClient(
+	_name: string,
+	config: NetworkConfig | HaneulClient,
+) {
+	if (isHaneulClient(config)) {
+		return config;
+	}
+
+	return new HaneulClient(config);
+};
+
+export function HaneulClientProvider<T extends NetworkConfigs>(props: HaneulClientProviderProps<T>) {
+	const { onNetworkChange, network, children } = props;
+	const networks = (props.networks ?? DEFAULT_NETWORKS) as T;
+	const createClient =
+		(props.createClient as typeof DEFAULT_CREATE_CLIENT) ?? DEFAULT_CREATE_CLIENT;
+
+	const [selectedNetwork, setSelectedNetwork] = useState<keyof T & string>(
+		props.network ?? props.defaultNetwork ?? (Object.keys(networks)[0] as keyof T & string),
+	);
+
+	const currentNetwork = props.network ?? selectedNetwork;
+
+	const client = useMemo(() => {
+		return createClient(currentNetwork, networks[currentNetwork]);
+	}, [createClient, currentNetwork, networks]);
+
+	const ctx = useMemo((): HaneulClientProviderContext => {
+		return {
+			client,
+			networks,
+			network: currentNetwork,
+			config:
+				networks[currentNetwork] instanceof HaneulClient
+					? null
+					: (networks[currentNetwork] as HaneulClientOptions),
+			selectNetwork: (newNetwork) => {
+				if (currentNetwork === newNetwork) {
+					return;
+				}
+
+				if (!network && newNetwork !== selectedNetwork) {
+					setSelectedNetwork(newNetwork);
+				}
+
+				onNetworkChange?.(newNetwork);
+			},
+		};
+	}, [client, networks, selectedNetwork, currentNetwork, network, onNetworkChange]);
+
+	return <HaneulClientContext.Provider value={ctx}>{children}</HaneulClientContext.Provider>;
+}

package/src/components/WalletProvider.tsx

@@ -0,0 +1,114 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithFeatures, WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import type { ReactNode } from 'react';
+import { useRef } from 'react';
+import type { StateStorage } from 'zustand/middleware';
+
+import {
+	DEFAULT_PREFERRED_WALLETS,
+	DEFAULT_STORAGE,
+	DEFAULT_STORAGE_KEY,
+	DEFAULT_WALLET_FILTER,
+} from '../constants/walletDefaults.js';
+import { WalletContext } from '../contexts/walletContext.js';
+import { useAutoConnectWallet } from '../hooks/wallet/useAutoConnectWallet.js';
+import type { SlushWalletConfig } from '../hooks/wallet/useSlushWallet.js';
+import { useSlushWallet } from '../hooks/wallet/useSlushWallet.js';
+import { useUnsafeBurnerWallet } from '../hooks/wallet/useUnsafeBurnerWallet.js';
+import { useWalletPropertiesChanged } from '../hooks/wallet/useWalletPropertiesChanged.js';
+import { useWalletsChanged } from '../hooks/wallet/useWalletsChanged.js';
+import { lightTheme } from '../themes/lightTheme.js';
+import type { Theme } from '../themes/themeContract.js';
+import { createInMemoryStore } from '../utils/stateStorage.js';
+import { getRegisteredWallets } from '../utils/walletUtils.js';
+import { createWalletStore } from '../walletStore.js';
+import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
+
+export type WalletProviderProps = {
+	/** A list of wallets that are sorted to the top of the wallet list, if they are available to connect to. By default, wallets are sorted by the order they are loaded in. */
+	preferredWallets?: string[];
+
+	/** A filter function to select wallets that support features required for the dApp to function. This filters the list of wallets presented to users when selecting a wallet to connect from, ensuring that only wallets that meet the dApps requirements can connect. */
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
+
+	/** Enables the development-only unsafe burner wallet, which can be useful for testing. */
+	enableUnsafeBurner?: boolean;
+
+	/** Enables automatically reconnecting to the most recently used wallet account upon mounting. */
+	autoConnect?: boolean;
+
+	/** Enables the Slush wallet */
+	slushWallet?: SlushWalletConfig;
+
+	/** Configures how the most recently connected to wallet account is stored. Set to `null` to disable persisting state entirely. Defaults to using localStorage if it is available. */
+	storage?: StateStorage | null;
+
+	/** The key to use to store the most recently connected wallet account. */
+	storageKey?: string;
+
+	/** The theme to use for styling UI components. Defaults to using the light theme. */
+	theme?: Theme | null;
+
+	children: ReactNode;
+};
+
+export type { WalletWithFeatures };
+
+export function WalletProvider({
+	preferredWallets = DEFAULT_PREFERRED_WALLETS,
+	walletFilter = DEFAULT_WALLET_FILTER,
+	storage = DEFAULT_STORAGE,
+	storageKey = DEFAULT_STORAGE_KEY,
+	enableUnsafeBurner = false,
+	autoConnect = false,
+	slushWallet,
+	theme = lightTheme,
+	children,
+}: WalletProviderProps) {
+	const storeRef = useRef(
+		createWalletStore({
+			autoConnectEnabled: autoConnect,
+			wallets: getRegisteredWallets(preferredWallets, walletFilter),
+			storage: storage || createInMemoryStore(),
+			storageKey,
+		}),
+	);
+
+	return (
+		<WalletContext.Provider value={storeRef.current}>
+			<WalletConnectionManager
+				preferredWallets={preferredWallets}
+				walletFilter={walletFilter}
+				enableUnsafeBurner={enableUnsafeBurner}
+				slushWallet={slushWallet}
+			>
+				{/* TODO: We ideally don't want to inject styles if people aren't using the UI components */}
+				{theme ? <InjectedThemeStyles theme={theme} /> : null}
+				{children}
+			</WalletConnectionManager>
+		</WalletContext.Provider>
+	);
+}
+
+type WalletConnectionManagerProps = Pick<
+	WalletProviderProps,
+	'preferredWallets' | 'walletFilter' | 'enableUnsafeBurner' | 'slushWallet' | 'children'
+>;
+
+function WalletConnectionManager({
+	preferredWallets = DEFAULT_PREFERRED_WALLETS,
+	walletFilter = DEFAULT_WALLET_FILTER,
+	enableUnsafeBurner = false,
+	slushWallet,
+	children,
+}: WalletConnectionManagerProps) {
+	useWalletsChanged(preferredWallets, walletFilter);
+	useWalletPropertiesChanged();
+	useSlushWallet(slushWallet);
+	useUnsafeBurnerWallet(enableUnsafeBurner);
+	useAutoConnectWallet();
+
+	return children;
+}

package/src/components/connect-modal/ConnectModal.css.ts

@@ -0,0 +1,124 @@
+// 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 overlay = style({
+	backgroundColor: themeVars.backgroundColors.modalOverlay,
+	backdropFilter: themeVars.blurs.modalOverlay,
+	position: 'fixed',
+	inset: 0,
+	zIndex: 999999999,
+});
+
+export const title = style({
+	paddingLeft: 8,
+});
+
+export const content = style({
+	backgroundColor: themeVars.backgroundColors.modalPrimary,
+	borderRadius: themeVars.radii.xlarge,
+	color: themeVars.colors.body,
+	position: 'fixed',
+	bottom: 16,
+	left: 16,
+	right: 16,
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'space-between',
+	overflow: 'hidden',
+	minHeight: '50vh',
+	maxHeight: '85vh',
+	maxWidth: 700,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			flexDirection: 'row',
+			width: '100%',
+			top: '50%',
+			left: '50%',
+			transform: 'translate(-50%, -50%)',
+		},
+	},
+});
+
+export const whatIsAWalletButton = style({
+	backgroundColor: themeVars.backgroundColors.modalSecondary,
+	padding: 16,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			display: 'none',
+		},
+	},
+});
+
+export const viewContainer = style({
+	display: 'none',
+	padding: 20,
+	flexGrow: 1,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			display: 'flex',
+		},
+	},
+});
+
+export const selectedViewContainer = style({
+	display: 'flex',
+});
+
+export const backButtonContainer = style({
+	position: 'absolute',
+	top: 20,
+	left: 20,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			display: 'none',
+		},
+	},
+});
+
+export const closeButtonContainer = style({
+	position: 'absolute',
+	top: 16,
+	right: 16,
+});
+
+export const walletListContent = style({
+	display: 'flex',
+	flexDirection: 'column',
+	flexGrow: 1,
+	gap: 24,
+	padding: 20,
+	backgroundColor: themeVars.backgroundColors.modalPrimary,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			backgroundColor: themeVars.backgroundColors.modalSecondary,
+		},
+	},
+});
+
+export const walletListContainer = style({
+	display: 'flex',
+	justifyContent: 'space-between',
+	flexDirection: 'column',
+	flexGrow: 1,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			flexDirection: 'row',
+			flexBasis: 240,
+			flexGrow: 0,
+			flexShrink: 0,
+		},
+	},
+});
+
+export const walletListContainerWithViewSelected = style({
+	display: 'none',
+	'@media': {
+		'screen and (min-width: 768px)': {
+			display: 'flex',
+		},
+	},
+});

package/src/components/connect-modal/ConnectModal.tsx

@@ -0,0 +1,174 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import * as Dialog from '@radix-ui/react-dialog';
+import clsx from 'clsx';
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { DEFAULT_WALLET_FILTER } from '../../constants/walletDefaults.js';
+import { useConnectWallet } from '../../hooks/wallet/useConnectWallet.js';
+import { useWallets } from '../../hooks/wallet/useWallets.js';
+import { getWalletUniqueIdentifier } from '../../utils/walletUtils.js';
+import { BackIcon } from '../icons/BackIcon.js';
+import { CloseIcon } from '../icons/CloseIcon.js';
+import { StyleMarker } from '../styling/StyleMarker.js';
+import { Heading } from '../ui/Heading.js';
+import { IconButton } from '../ui/IconButton.js';
+import * as styles from './ConnectModal.css.js';
+import { ConnectionStatus } from './views/ConnectionStatus.js';
+import { GettingStarted } from './views/GettingStarted.js';
+import { WhatIsAWallet } from './views/WhatIsAWallet.js';
+import { WalletList } from './wallet-list/WalletList.js';
+
+type ConnectModalView = 'getting-started' | 'what-is-a-wallet' | 'connection-status';
+
+type ControlledModalProps = {
+	/** The controlled open state of the dialog. */
+	open: boolean;
+
+	/** Event handler called when the open state of the dialog changes. */
+	onOpenChange: (open: boolean) => void;
+
+	defaultOpen?: never;
+};
+
+type UncontrolledModalProps = {
+	open?: never;
+
+	onOpenChange?: never;
+
+	/** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */
+	defaultOpen?: boolean;
+};
+
+type ConnectModalProps = {
+	/** The trigger button that opens the dialog. */
+	trigger: NonNullable<ReactNode>;
+
+	/** Filter the wallets shown in the modal. */
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
+} & (ControlledModalProps | UncontrolledModalProps);
+
+export function ConnectModal({
+	trigger,
+	open,
+	defaultOpen,
+	onOpenChange,
+	walletFilter = DEFAULT_WALLET_FILTER,
+}: ConnectModalProps) {
+	const [isModalOpen, setModalOpen] = useState(open ?? defaultOpen);
+	const [currentView, setCurrentView] = useState<ConnectModalView>();
+	const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
+
+	const wallets = useWallets().filter(walletFilter);
+	const { mutate, isError } = useConnectWallet();
+
+	const resetSelection = () => {
+		setSelectedWallet(undefined);
+		setCurrentView(undefined);
+	};
+
+	const handleOpenChange = (open: boolean) => {
+		if (!open) {
+			resetSelection();
+		}
+		setModalOpen(open);
+		onOpenChange?.(open);
+	};
+
+	const connectWallet = (wallet: WalletWithRequiredFeatures) => {
+		setCurrentView('connection-status');
+		mutate(
+			{ wallet },
+			{
+				onSuccess: () => handleOpenChange(false),
+			},
+		);
+	};
+
+	let modalContent: ReactNode | undefined;
+	switch (currentView) {
+		case 'what-is-a-wallet':
+			modalContent = <WhatIsAWallet />;
+			break;
+		case 'getting-started':
+			modalContent = <GettingStarted />;
+			break;
+		case 'connection-status':
+			modalContent = (
+				<ConnectionStatus
+					selectedWallet={selectedWallet!}
+					hadConnectionError={isError}
+					onRetryConnection={connectWallet}
+				/>
+			);
+			break;
+		default:
+			modalContent = <WhatIsAWallet />;
+	}
+
+	return (
+		<Dialog.Root open={open ?? isModalOpen} onOpenChange={handleOpenChange}>
+			<Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+			<Dialog.Portal>
+				<StyleMarker>
+					<Dialog.Overlay className={styles.overlay}>
+						<Dialog.Content className={styles.content} aria-describedby={undefined}>
+							<div
+								className={clsx(styles.walletListContainer, {
+									[styles.walletListContainerWithViewSelected]: !!currentView,
+								})}
+							>
+								<div className={styles.walletListContent}>
+									<Dialog.Title className={styles.title} asChild>
+										<Heading as="h2">Connect a Wallet</Heading>
+									</Dialog.Title>
+									<WalletList
+										wallets={wallets}
+										selectedWalletName={getWalletUniqueIdentifier(selectedWallet)}
+										onPlaceholderClick={() => setCurrentView('getting-started')}
+										onSelect={(wallet) => {
+											if (
+												getWalletUniqueIdentifier(selectedWallet) !==
+												getWalletUniqueIdentifier(wallet)
+											) {
+												setSelectedWallet(wallet);
+												connectWallet(wallet);
+											}
+										}}
+									/>
+								</div>
+								<button
+									className={styles.whatIsAWalletButton}
+									onClick={() => setCurrentView('what-is-a-wallet')}
+									type="button"
+								>
+									What is a Wallet?
+								</button>
+							</div>
+							<div
+								className={clsx(styles.viewContainer, {
+									[styles.selectedViewContainer]: !!currentView,
+								})}
+							>
+								<div className={styles.backButtonContainer}>
+									<IconButton type="button" aria-label="Back" onClick={() => resetSelection()}>
+										<BackIcon />
+									</IconButton>
+								</div>
+								{modalContent}
+							</div>
+							<Dialog.Close className={styles.closeButtonContainer} asChild>
+								<IconButton type="button" aria-label="Close">
+									<CloseIcon />
+								</IconButton>
+							</Dialog.Close>
+						</Dialog.Content>
+					</Dialog.Overlay>
+				</StyleMarker>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}

package/src/components/connect-modal/InfoSection.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: 4,
+});

package/src/components/connect-modal/InfoSection.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Heading } from '../ui/Heading.js';
+import { Text } from '../ui/Text.js';
+import * as styles from './InfoSection.css.js';
+
+type InfoSectionProps = {
+	title: string;
+	children: string;
+};
+
+export function InfoSection({ title, children }: InfoSectionProps) {
+	return (
+		<section className={styles.container}>
+			<Heading as="h3" size="sm" weight="normal">
+				{title}
+			</Heading>
+			<Text weight="medium" color="muted">
+				{children}
+			</Text>
+		</section>
+	);
+}