@mysten/dapp-kit 0.1.0 → 0.2.0

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>;

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/hooks/wallet/useConnectWallet.ts

@@ -41,10 +41,13 @@ export function useConnectWallet({
 		mutationKey: walletMutationKeys.connectWallet(mutationKey),
 		mutationFn: async ({ wallet, accountAddress, ...standardConnectInput }) => {
 			const connectResult = await wallet.features['standard:connect'].connect(standardConnectInput);
-			const selectedAccount = getSelectedAccount(connectResult.accounts, accountAddress);
+			const connectedSuiAccounts = connectResult.accounts.filter((account) =>
+				account.chains.some((chain) => chain.split(':')[0] === 'sui'),
+			);
+			const selectedAccount = getSelectedAccount(connectedSuiAccounts, accountAddress);
 
-			setWalletConnected(wallet, selectedAccount);
-			return connectResult;
+			setWalletConnected(wallet, connectedSuiAccounts, selectedAccount);
+			return { accounts: connectedSuiAccounts };
 		},
 		...mutationOptions,
 	});

package/src/index.ts

@@ -19,4 +19,5 @@ export * from './hooks/wallet/useSignAndExecuteTransactionBlock.js';
 export * from './hooks/useSuiClientMutation.js';
 export * from './hooks/useSuiClientQuery.js';
 export * from './hooks/useSuiClientInfiniteQuery.js';
+export * from './themes/lightTheme.js';
 export * from './types.js';

package/src/themes/lightTheme.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeVars } from './themeContract.js';
+
+export const lightTheme: ThemeVars = {
+	blurs: {
+		modalOverlay: 'blur(0)',
+	},
+	backgroundColors: {
+		primaryButton: '#F6F7F9',
+		primaryButtonHover: '#F0F2F5',
+		outlineButtonHover: '#F4F4F5',
+		modalOverlay: 'rgba(24 36 53 / 20%)',
+		modalPrimary: 'white',
+		modalSecondary: '#F7F8F8',
+		iconButton: 'transparent',
+		iconButtonHover: '#F0F1F2',
+		dropdownMenu: '#FFFFFF',
+		dropdownMenuSeparator: '#F3F6F8',
+		walletItemSelected: 'white',
+		walletItemHover: '#3C424226',
+	},
+	borderColors: {
+		outlineButton: '#E4E4E7',
+	},
+	colors: {
+		primaryButton: '#373737',
+		outlineButton: '#373737',
+		iconButton: '#000000',
+		body: '#182435',
+		bodyMuted: '#767A81',
+		bodyDanger: '#FF794B',
+	},
+	radii: {
+		small: '6px',
+		medium: '8px',
+		large: '12px',
+		xlarge: '16px',
+	},
+	shadows: {
+		primaryButton: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+		walletItemSelected: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+	},
+	fontWeights: {
+		normal: '400',
+		medium: '500',
+		bold: '600',
+	},
+	fontSizes: {
+		small: '14px',
+		medium: '16px',
+		large: '18px',
+		xlarge: '20px',
+	},
+	typography: {
+		fontFamily:
+			'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		fontStyle: 'normal',
+		lineHeight: '1.3',
+		letterSpacing: '1',
+	},
+};

package/src/themes/themeContract.ts

@@ -0,0 +1,97 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { createGlobalThemeContract } from '@vanilla-extract/css';
+
+const themeContractValues = {
+	blurs: {
+		modalOverlay: '',
+	},
+	backgroundColors: {
+		primaryButton: '',
+		primaryButtonHover: '',
+		outlineButtonHover: '',
+		walletItemHover: '',
+		walletItemSelected: '',
+		modalOverlay: '',
+		modalPrimary: '',
+		modalSecondary: '',
+		iconButton: '',
+		iconButtonHover: '',
+		dropdownMenu: '',
+		dropdownMenuSeparator: '',
+	},
+	borderColors: {
+		outlineButton: '',
+	},
+	colors: {
+		primaryButton: '',
+		outlineButton: '',
+		body: '',
+		bodyMuted: '',
+		bodyDanger: '',
+		iconButton: '',
+	},
+	radii: {
+		small: '',
+		medium: '',
+		large: '',
+		xlarge: '',
+	},
+	shadows: {
+		primaryButton: '',
+		walletItemSelected: '',
+	},
+	fontWeights: {
+		normal: '',
+		medium: '',
+		bold: '',
+	},
+	fontSizes: {
+		small: '',
+		medium: '',
+		large: '',
+		xlarge: '',
+	},
+	typography: {
+		fontFamily: '',
+		fontStyle: '',
+		lineHeight: '',
+		letterSpacing: '',
+	},
+};
+
+export type ThemeVars = typeof themeContractValues;
+
+/**
+ * A custom theme that is enabled when various conditions are
+ */
+export type DynamicTheme = {
+	/**
+	 * An optional media query required for the given theme to be enabled. This is useful
+	 * when you want the theme of your application to automatically switch depending on
+	 * a media feature.
+	 *
+	 * @example '(prefers-color-scheme: dark)'
+	 */
+	mediaQuery?: string;
+
+	/**
+	 * An optional CSS selector required for the given theme to be enabled. This is useful
+	 * when you have a manual theme switcher on your application that sets a top-level
+	 * class name or data-attribute to control the current theme.
+	 *
+	 * @example '.data-dark'
+	 */
+	selector?: string;
+
+	/** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */
+	variables: ThemeVars;
+};
+
+export type Theme = ThemeVars | DynamicTheme[];
+
+export const themeVars = createGlobalThemeContract(
+	themeContractValues,
+	(_, path) => `dapp-kit-${path.join('-')}`,
+);

package/src/walletStore.ts

@@ -10,6 +10,7 @@ export type WalletActions = {
 	setAccountSwitched: (selectedAccount: WalletAccount) => void;
 	setWalletConnected: (
 		wallet: WalletWithRequiredFeatures,
+		connectedAccounts: readonly WalletAccount[],
 		selectedAccount: WalletAccount | null,
 	) => void;
 	updateWalletAccounts: (accounts: readonly WalletAccount[]) => void;
@@ -49,9 +50,9 @@ export function createWalletStore({ wallets, storage, storageKey }: WalletConfig
 				lastConnectedAccountAddress: null,
 				lastConnectedWalletName: null,
 				connectionStatus: 'disconnected',
-				setWalletConnected(wallet, selectedAccount) {
+				setWalletConnected(wallet, connectedAccounts, selectedAccount) {
 					set(() => ({
-						accounts: wallet.accounts,
+						accounts: connectedAccounts,
 						currentWallet: wallet,
 						currentAccount: selectedAccount,
 						lastConnectedWalletName: wallet.name,