@haneullabs/dapp-kit 0.1.0

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

@@ -0,0 +1,35 @@
+// 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({
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+	alignItems: 'center',
+	width: '100%',
+});
+
+export const walletIcon = style({
+	objectFit: 'cover',
+	width: 72,
+	height: 72,
+	borderRadius: themeVars.radii.large,
+});
+
+export const title = style({
+	marginTop: 12,
+});
+
+export const connectionStatus = style({
+	marginTop: 4,
+});
+
+export const retryButtonContainer = style({
+	position: 'absolute',
+	bottom: 20,
+	right: 20,
+});

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

@@ -0,0 +1,52 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { Text } from '../../ui/Text.js';
+import * as styles from './ConnectionStatus.css.js';
+
+type ConnectionStatusProps = {
+	selectedWallet: WalletWithRequiredFeatures;
+	hadConnectionError: boolean;
+	onRetryConnection: (selectedWallet: WalletWithRequiredFeatures) => void;
+};
+
+export function ConnectionStatus({
+	selectedWallet,
+	hadConnectionError,
+	onRetryConnection,
+}: ConnectionStatusProps) {
+	return (
+		<div className={styles.container}>
+			{selectedWallet.icon && (
+				<img
+					className={styles.walletIcon}
+					src={selectedWallet.icon}
+					alt={`${selectedWallet.name} logo`}
+				/>
+			)}
+			<div className={styles.title}>
+				<Heading as="h2" size="xl">
+					Opening {selectedWallet.name}
+				</Heading>
+			</div>
+			<div className={styles.connectionStatus}>
+				{hadConnectionError ? (
+					<Text color="danger">Connection failed</Text>
+				) : (
+					<Text color="muted">Confirm connection in the wallet...</Text>
+				)}
+			</div>
+			{hadConnectionError ? (
+				<div className={styles.retryButtonContainer}>
+					<Button type="button" variant="outline" onClick={() => onRetryConnection(selectedWallet)}>
+						Retry Connection
+					</Button>
+				</div>
+			) : null}
+		</div>
+	);
+}

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

@@ -0,0 +1,25 @@
+// 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 content = style({
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+	flexGrow: 1,
+	gap: 20,
+	padding: 40,
+});
+
+export const installButtonContainer = style({
+	position: 'absolute',
+	bottom: 20,
+	right: 20,
+});

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

@@ -0,0 +1,38 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './GettingStarted.css.js';
+
+export function GettingStarted() {
+	return (
+		<div className={styles.container}>
+			<Heading as="h2">Get Started with Sui</Heading>
+			<div className={styles.content}>
+				<InfoSection title="Install the Slush Extension">
+					We recommend pinning Slush to your taskbar for quicker access.
+				</InfoSection>
+				<InfoSection title="Create or Import a Wallet">
+					Be sure to back up your wallet using a secure method. Never share your secret phrase with
+					anyone.
+				</InfoSection>
+				<InfoSection title="Refresh Your Browser">
+					Once you set up your wallet, refresh this window browser to load up the extension.
+				</InfoSection>
+				<div className={styles.installButtonContainer}>
+					<Button variant="outline" asChild>
+						<a
+							href="https://chromewebstore.google.com/detail/slush-%E2%80%94-a-sui-wallet/opcgpfmipidbgpenhmajoajpbobppdi"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Install Wallet Extension
+						</a>
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,19 @@
+// 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 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,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './WhatIsAWallet.css.js';
+
+export function WhatIsAWallet() {
+	return (
+		<div className={styles.container}>
+			<Heading as="h2">What is a Wallet</Heading>
+			<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: 4,
+});

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

@@ -0,0 +1,46 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import { SLUSH_WALLET_NAME, SLUSH_WALLET_ICON } from '@haneullabs/slush-wallet';
+
+import { getWalletUniqueIdentifier } from '../../../utils/walletUtils.js';
+import * as styles from './WalletList.css.js';
+import { WalletListItem } from './WalletListItem.js';
+
+type WalletListProps = {
+	selectedWalletName?: string;
+	onPlaceholderClick: () => void;
+	onSelect: (wallet: WalletWithRequiredFeatures) => void;
+	wallets: WalletWithRequiredFeatures[];
+};
+
+export function WalletList({
+	selectedWalletName,
+	onPlaceholderClick,
+	onSelect,
+	wallets,
+}: WalletListProps) {
+	return (
+		<ul className={styles.container}>
+			{wallets.length > 0 ? (
+				wallets.map((wallet) => (
+					<WalletListItem
+						key={getWalletUniqueIdentifier(wallet)}
+						name={wallet.name}
+						icon={wallet.icon}
+						isSelected={getWalletUniqueIdentifier(wallet) === selectedWalletName}
+						onClick={() => onSelect(wallet)}
+					/>
+				))
+			) : (
+				<WalletListItem
+					name={SLUSH_WALLET_NAME}
+					icon={SLUSH_WALLET_ICON}
+					onClick={onPlaceholderClick}
+					isSelected
+				/>
+			)}
+		</ul>
+	);
+}

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

@@ -0,0 +1,35 @@
+// 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({
+	display: 'flex',
+});
+
+export const walletItem = style({
+	display: 'flex',
+	alignItems: 'center',
+	flexGrow: 1,
+	padding: 8,
+	gap: 8,
+	borderRadius: themeVars.radii.large,
+	':hover': {
+		backgroundColor: themeVars.backgroundColors.walletItemHover,
+	},
+});
+
+export const selectedWalletItem = style({
+	backgroundColor: themeVars.backgroundColors.walletItemSelected,
+	boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+});
+
+export const walletIcon = style({
+	width: 28,
+	height: 28,
+	flexShrink: 0,
+	objectFit: 'cover',
+	borderRadius: themeVars.radii.small,
+});

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

@@ -0,0 +1,36 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+
+import { Heading } from '../../ui/Heading.js';
+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={styles.container}>
+			<button
+				className={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}
+				type="button"
+				onClick={onClick}
+			>
+				{icon && typeof icon === 'string' ? (
+					<img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
+				) : (
+					icon
+				)}
+				<Heading size="md" truncate asChild>
+					<div>{name}</div>
+				</Heading>
+			</button>
+		</li>
+	);
+}

package/src/components/icons/BackIcon.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+// FIXME: Replace this with a 10x10 icon to match the CheckIcon, or alternatively make the CheckIcon bigger
+// Right now, the icons don't align on mobile :(
+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="currentColor"
+			/>
+		</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="currentColor"
+				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/styling/InjectedThemeStyles.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js';
+import { themeVars } from '../../themes/themeContract.js';
+import type { DynamicTheme, Theme, ThemeVars } from '../../themes/themeContract.js';
+
+type InjectedThemeStylesProps = {
+	theme: Theme;
+};
+
+export function InjectedThemeStyles({ theme }: InjectedThemeStylesProps) {
+	const themeStyles = Array.isArray(theme)
+		? getDynamicThemeStyles(theme)
+		: getStaticThemeStyles(theme);
+
+	return (
+		<style
+			precedence="default"
+			href="haneullabs-dapp-kit-theme"
+			dangerouslySetInnerHTML={{
+				__html: themeStyles,
+			}}
+		/>
+	);
+}
+
+function getDynamicThemeStyles(themes: DynamicTheme[]) {
+	return themes
+		.map(({ mediaQuery, selector, variables }) => {
+			const themeStyles = getStaticThemeStyles(variables);
+			const themeStylesWithSelectorPrefix = selector ? `${selector} ${themeStyles}` : themeStyles;
+
+			return mediaQuery
+				? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}`
+				: themeStylesWithSelectorPrefix;
+		})
+		.join(' ');
+}
+
+function getStaticThemeStyles(theme: ThemeVars) {
+	return `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;
+}
+
+function cssStringFromTheme(theme: ThemeVars) {
+	return Object.entries(assignInlineVars(themeVars, theme))
+		.map(([key, value]) => `${key}:${value};`)
+		.join('');
+}

package/src/components/styling/StyleMarker.css.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { globalStyle } from '@vanilla-extract/css';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+globalStyle(':where(*)', {
+	boxSizing: 'border-box',
+	color: themeVars.colors.body,
+	fontFamily: themeVars.typography.fontFamily,
+	fontSize: themeVars.fontWeights.normal,
+	fontStyle: themeVars.typography.fontStyle,
+	fontWeight: themeVars.fontWeights.normal,
+	lineHeight: themeVars.typography.lineHeight,
+	letterSpacing: themeVars.typography.letterSpacing,
+});
+
+globalStyle(':where(button)', {
+	appearance: 'none',
+	backgroundColor: 'transparent',
+	fontSize: 'inherit',
+	fontFamily: 'inherit',
+	lineHeight: 'inherit',
+	letterSpacing: 'inherit',
+	color: 'inherit',
+	border: 0,
+	padding: 0,
+	margin: 0,
+});
+
+globalStyle(':where(a)', {
+	textDecoration: 'none',
+	color: 'inherit',
+	outline: 'none',
+});
+
+globalStyle(':where(ol, ul)', {
+	listStyle: 'none',
+	margin: 0,
+	padding: 0,
+});
+
+globalStyle(':where(h1, h2, h3, h4, h5, h6)', {
+	fontSize: 'inherit',
+	fontWeight: 'inherit',
+	margin: 0,
+});

package/src/components/styling/StyleMarker.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Slot } from '@radix-ui/react-slot';
+import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { styleDataAttribute } from '../../constants/styleDataAttribute.js';
+
+import './StyleMarker.css.js';
+
+type StyleMarker = {
+	children: ReactNode;
+};
+
+export const StyleMarker = forwardRef<
+	ElementRef<typeof Slot>,
+	ComponentPropsWithoutRef<typeof Slot>
+>(({ children, ...props }, forwardedRef) => (
+	<Slot ref={forwardedRef} {...props} {...styleDataAttribute}>
+		{children}
+	</Slot>
+));
+StyleMarker.displayName = 'StyleMarker';

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

@@ -0,0 +1,50 @@
+// 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 buttonVariants = recipe({
+	base: {
+		display: 'inline-flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		fontWeight: themeVars.fontWeights.medium,
+		':disabled': {
+			opacity: 0.5,
+		},
+	},
+	variants: {
+		variant: {
+			primary: {
+				backgroundColor: themeVars.backgroundColors.primaryButton,
+				color: themeVars.colors.primaryButton,
+				boxShadow: themeVars.shadows.primaryButton,
+				':hover': {
+					backgroundColor: themeVars.backgroundColors.primaryButtonHover,
+				},
+			},
+			outline: {
+				borderWidth: 1,
+				borderStyle: 'solid',
+				borderColor: themeVars.borderColors.outlineButton,
+				color: themeVars.colors.outlineButton,
+				':hover': {
+					backgroundColor: themeVars.backgroundColors.outlineButtonHover,
+				},
+			},
+		},
+		size: {
+			md: { borderRadius: themeVars.radii.medium, padding: '8px 16px' },
+			lg: { borderRadius: themeVars.radii.large, padding: '16px 24px ' },
+		},
+	},
+	defaultVariants: {
+		variant: 'primary',
+		size: 'md',
+	},
+});
+
+export type ButtonVariants = RecipeVariants<typeof buttonVariants>;

package/src/components/ui/Button.tsx

@@ -0,0 +1,31 @@
+// 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 { buttonVariants } from './Button.css.js';
+import type { ButtonVariants } from './Button.css.js';
+
+type ButtonProps = {
+	asChild?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+	ButtonVariants;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
+		const Comp = asChild ? Slot : 'button';
+		return (
+			<Comp
+				{...props}
+				className={clsx(buttonVariants({ variant, size }), className)}
+				ref={forwardedRef}
+			/>
+		);
+	},
+);
+Button.displayName = 'Button';
+
+export { Button };

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

@@ -0,0 +1,43 @@
+// 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 headingVariants = recipe({
+	variants: {
+		size: {
+			sm: {
+				fontSize: themeVars.fontSizes.small,
+			},
+			md: {
+				fontSize: themeVars.fontSizes.medium,
+			},
+			lg: {
+				fontSize: themeVars.fontSizes.large,
+			},
+			xl: {
+				fontSize: themeVars.fontSizes.xlarge,
+			},
+		},
+		weight: {
+			normal: { fontWeight: themeVars.fontWeights.normal },
+			bold: { fontWeight: themeVars.fontWeights.bold },
+		},
+		truncate: {
+			true: {
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+			},
+		},
+	},
+	defaultVariants: {
+		size: 'lg',
+		weight: 'bold',
+	},
+});
+
+export type HeadingVariants = RecipeVariants<typeof headingVariants>;