@mysten/dapp-kit 0.0.0-experimental-20230928204256

package/src/components/AccountDropdownMenu.tsx

@@ -0,0 +1,58 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { formatAddress } from '@mysten/sui.js/utils';
+import type { WalletAccount } from '@mysten/wallet-standard';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+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';
+
+type AccountDropdownMenuProps = {
+	currentAccount: WalletAccount;
+};
+
+export function AccountDropdownMenu({ currentAccount }: AccountDropdownMenuProps) {
+	const { mutate: disconnectWallet } = useDisconnectWallet();
+	const { mutate: switchAccount } = useSwitchAccount();
+	const accounts = useAccounts();
+
+	return (
+		<DropdownMenu.Root modal={false}>
+			<DropdownMenu.Trigger className={styles.triggerButton}>
+				{formatAddress(currentAccount.address)}
+				<ChevronIcon />
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Portal>
+				<DropdownMenu.Content className={styles.menuContent}>
+					{accounts.map((account) => (
+						<DropdownMenu.Item key={account.address} asChild>
+							<button
+								type="button"
+								className={styles.switchAccountButton}
+								onClick={() => switchAccount({ account })}
+							>
+								{formatAddress(account.address)}
+								{currentAccount.address === account.address ? <CheckIcon /> : null}
+							</button>
+						</DropdownMenu.Item>
+					))}
+					<DropdownMenu.Separator className={styles.separator} />
+					<DropdownMenu.Item asChild>
+						<button
+							className={styles.disconnectButton}
+							type="button"
+							onClick={() => disconnectWallet()}
+						>
+							Disconnect
+						</button>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}

package/src/components/ConnectButton.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactNode } from 'react';
+
+import { useCurrentAccount } from '../hooks/wallet/useCurrentAccount.js';
+import { AccountDropdownMenu } from './AccountDropdownMenu.js';
+import { ConnectModal } from './connect-modal/ConnectModal.js';
+
+type ConnectButtonProps = {
+	connectText?: ReactNode;
+};
+
+export function ConnectButton({ connectText = 'Connect Wallet' }: ConnectButtonProps) {
+	const currentAccount = useCurrentAccount();
+	return currentAccount ? (
+		<AccountDropdownMenu currentAccount={currentAccount} />
+	) : (
+		<ConnectModal trigger={connectText} />
+	);
+}

package/src/components/SuiClientProvider.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getFullnodeUrl, isSuiClient, SuiClient } from '@mysten/sui.js/client';
+import type { SuiClientOptions } from '@mysten/sui.js/client';
+import { createContext, useMemo, useState } from 'react';
+
+type NetworkConfig = SuiClient | SuiClientOptions;
+type NetworkConfigs<T extends NetworkConfig = NetworkConfig> = Record<string, T>;
+
+export interface SuiClientProviderContext {
+	client: SuiClient;
+	networks: NetworkConfigs;
+	network: string;
+	selectNetwork: (network: string) => void;
+}
+
+export const SuiClientContext = createContext<SuiClientProviderContext | null>(null);
+
+export type SuiClientProviderProps<T extends NetworkConfigs> = {
+	createClient?: (name: keyof T, config: T[keyof T]) => SuiClient;
+	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 | SuiClient,
+) {
+	if (isSuiClient(config)) {
+		return config;
+	}
+
+	return new SuiClient(config);
+};
+
+export function SuiClientProvider<T extends NetworkConfigs>(props: SuiClientProviderProps<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((): SuiClientProviderContext => {
+		return {
+			client,
+			networks,
+			network: currentNetwork,
+			selectNetwork: (newNetwork) => {
+				if (currentNetwork === newNetwork) {
+					return;
+				}
+
+				if (!network && newNetwork !== selectedNetwork) {
+					setSelectedNetwork(newNetwork);
+				}
+
+				onNetworkChange?.(newNetwork);
+			},
+		};
+	}, [client, networks, selectedNetwork, currentNetwork, network, onNetworkChange]);
+
+	return <SuiClientContext.Provider value={ctx}>{children}</SuiClientContext.Provider>;
+}

package/src/components/WalletProvider.tsx

@@ -0,0 +1,93 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+import type { ReactNode } from 'react';
+import { useRef } from 'react';
+import type { StateStorage } from 'zustand/middleware';
+
+import { WalletContext } from '../contexts/walletContext.js';
+import { useAutoConnectWallet } from '../hooks/wallet/useAutoConnectWallet.js';
+import { useUnsafeBurnerWallet } from '../hooks/wallet/useUnsafeBurnerWallet.js';
+import { useWalletPropertiesChanged } from '../hooks/wallet/useWalletPropertiesChanged.js';
+import { useWalletsChanged } from '../hooks/wallet/useWalletsChanged.js';
+import { getRegisteredWallets } from '../utils/walletUtils.js';
+import { createWalletStore } from '../walletStore.js';
+
+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 list of features that are 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. */
+	requiredFeatures?: (keyof WalletWithRequiredFeatures['features'])[];
+
+	/** 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;
+
+	/** Configures how the most recently connected to wallet account is stored. Defaults to using localStorage. */
+	storage?: StateStorage;
+
+	/** The key to use to store the most recently connected wallet account. */
+	storageKey?: string;
+
+	children: ReactNode;
+};
+
+const SUI_WALLET_NAME = 'Sui Wallet';
+const DEFUALT_STORAGE_KEY = 'sui-dapp-kit:wallet-connection-info';
+
+export function WalletProvider({
+	preferredWallets = [SUI_WALLET_NAME],
+	requiredFeatures = [],
+	storage = localStorage,
+	storageKey = DEFUALT_STORAGE_KEY,
+	enableUnsafeBurner = false,
+	autoConnect = false,
+	children,
+}: WalletProviderProps) {
+	const storeRef = useRef(
+		createWalletStore({
+			wallets: getRegisteredWallets(preferredWallets, requiredFeatures),
+			storageKey,
+			storage,
+		}),
+	);
+
+	return (
+		<WalletContext.Provider value={storeRef.current}>
+			<WalletConnectionManager
+				preferredWallets={preferredWallets}
+				requiredFeatures={requiredFeatures}
+				enableUnsafeBurner={enableUnsafeBurner}
+				autoConnect={autoConnect}
+			>
+				{children}
+			</WalletConnectionManager>
+		</WalletContext.Provider>
+	);
+}
+
+type WalletConnectionManagerProps = Required<
+	Pick<
+		WalletProviderProps,
+		'preferredWallets' | 'requiredFeatures' | 'enableUnsafeBurner' | 'autoConnect' | 'children'
+	>
+>;
+
+function WalletConnectionManager({
+	preferredWallets,
+	requiredFeatures,
+	enableUnsafeBurner,
+	autoConnect,
+	children,
+}: WalletConnectionManagerProps) {
+	useWalletsChanged(preferredWallets, requiredFeatures);
+	useWalletPropertiesChanged();
+	useUnsafeBurnerWallet(enableUnsafeBurner);
+	useAutoConnectWallet(autoConnect);
+
+	return children;
+}

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

@@ -0,0 +1,135 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const overlay = style({
+	backgroundColor: 'rgba(24 36 53 / 20%)',
+	position: 'fixed',
+	inset: 0,
+	zIndex: 999999999,
+});
+
+export const title = style({
+	paddingLeft: 8,
+});
+
+export const content = style({
+	backgroundColor: 'white',
+	position: 'fixed',
+	bottom: 16,
+	left: 16,
+	right: 16,
+	zIndex: 999999999,
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'space-between',
+	overflow: 'hidden',
+	borderRadius: 16,
+	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: '#F7F8F8',
+	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 triggerButton = style({
+	backgroundColor: '#0284AD',
+	boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+	color: 'white',
+	borderRadius: 12,
+	paddingLeft: 24,
+	paddingRight: 24,
+	paddingTop: 16,
+	paddingBottom: 16,
+	':hover': {
+		backgroundColor: '#007194',
+	},
+});
+
+export const backButton = style({
+	position: 'absolute',
+	top: 20,
+	left: 20,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			display: 'none',
+		},
+	},
+});
+
+export const closeButton = style({
+	position: 'absolute',
+	padding: 7,
+	top: 16,
+	right: 16,
+	borderRadius: 9999,
+	backgroundColor: '#F0F1F2',
+});
+
+export const walletListContent = style({
+	padding: 20,
+	minWidth: 240,
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 24,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			backgroundColor: '#F7F8F8',
+		},
+	},
+});
+
+export const walletListContainer = style({
+	display: 'flex',
+	justifyContent: 'space-between',
+	flexDirection: 'column',
+	flexGrow: 1,
+	'@media': {
+		'screen and (min-width: 768px)': {
+			flexDirection: 'row',
+			flexGrow: 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,122 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+import * as Dialog from '@radix-ui/react-dialog';
+import clsx from 'clsx';
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { useConnectWallet } from '../../hooks/wallet/useConnectWallet.js';
+import { BackIcon } from '../icons/BackIcon.js';
+import { CloseIcon } from '../icons/CloseIcon.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 ConnectModalProps = {
+	trigger: ReactNode;
+};
+
+export function ConnectModal({ trigger }: ConnectModalProps) {
+	const [isConnectModalOpen, setConnectModalOpen] = useState(false);
+	const [currentView, setCurrentView] = useState<ConnectModalView>();
+	const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
+	const { mutate, isError } = useConnectWallet();
+
+	const connectWallet = (wallet: WalletWithRequiredFeatures) => {
+		setCurrentView('connection-status');
+		mutate({ wallet }, { onSuccess: () => setConnectModalOpen(false) });
+	};
+
+	const resetSelection = () => {
+		setSelectedWallet(undefined);
+		setCurrentView(undefined);
+	};
+
+	const onOpenChange = (open: boolean) => {
+		if (!open) {
+			resetSelection();
+		}
+		setConnectModalOpen(open);
+	};
+
+	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={isConnectModalOpen} onOpenChange={onOpenChange}>
+			<Dialog.Trigger className={styles.triggerButton}>{trigger}</Dialog.Trigger>
+			<Dialog.Portal>
+				<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}>Connect a Wallet</Dialog.Title>
+							<WalletList
+								selectedWalletName={selectedWallet?.name}
+								onPlaceholderClick={() => setCurrentView('getting-started')}
+								onSelect={(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,
+						})}
+					>
+						<button
+							className={styles.backButton}
+							onClick={() => resetSelection()}
+							type="button"
+							aria-label="Back"
+						>
+							<BackIcon />
+						</button>
+						{modalContent}
+					</div>
+					<Dialog.Close className={styles.closeButton} aria-label="Close">
+						<CloseIcon />
+					</Dialog.Close>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}

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

@@ -0,0 +1,14 @@
+// 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,
+});
+
+export const heading = style({});
+
+export const description = style({});

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

@@ -0,0 +1,18 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as styles from './InfoSection.css.js';
+
+type InfoSectionProps = {
+	title: string;
+	children: string;
+};
+
+export function InfoSection({ title, children }: InfoSectionProps) {
+	return (
+		<section className={styles.container}>
+			<h3 className={styles.heading}>{title}</h3>
+			<div className={styles.description}>{children}</div>
+		</section>
+	);
+}

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

@@ -0,0 +1,32 @@
+// 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',
+	justifyContent: 'center',
+	alignItems: 'center',
+	width: '100%',
+});
+
+export const walletIcon = style({
+	backgroundColor: 'white',
+	objectFit: 'cover',
+	width: 72,
+	height: 72,
+	borderRadius: 16,
+});
+
+export const walletName = style({
+	marginTop: 12,
+});
+
+export const connectionStatus = style({
+	marginTop: 4,
+});
+
+export const connectionStatusWithError = style({
+	color: 'red',
+});

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

@@ -0,0 +1,42 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+import clsx from 'clsx';
+
+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}>
+			<img
+				className={styles.walletIcon}
+				src={selectedWallet.icon}
+				alt={`${selectedWallet.name} logo`}
+			/>
+			<div className={styles.walletName}>Opening {selectedWallet.name}</div>
+			<div
+				className={clsx(styles.connectionStatus, {
+					[styles.connectionStatusWithError]: hadConnectionError,
+				})}
+			>
+				{hadConnectionError ? 'Connection failed' : 'Confirm connection in the wallet...'}
+			</div>
+			{hadConnectionError ? (
+				<button type="button" onClick={() => onRetryConnection(selectedWallet)}>
+					Retry Connection
+				</button>
+			) : null}
+		</div>
+	);
+}

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

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

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

@@ -0,0 +1,33 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './GettingStarted.css.js';
+
+export function GettingStarted() {
+	return (
+		<div className={styles.container}>
+			<h2 className={styles.title}>Get Started with Sui</h2>
+			<div className={styles.content}>
+				<InfoSection title="Install the Sui Wallet Extension">
+					We recommend pinning Sui Wallet 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>
+				<a
+					className={styles.installLink}
+					href="https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
+					target="_blank"
+					rel="noreferrer"
+				>
+					Install Wallet Extension
+				</a>
+			</div>
+		</div>
+	);
+}