@haneullabs/dapp-kit 0.1.0

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/types/utilityTypes.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<T>;

package/src/types.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export type { SignedPersonalMessage, SignedTransaction } from '@haneullabs/wallet-standard';
+export type { ThemeVars } from './themes/themeContract.js';

package/src/utils/assertUnreachable.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Utility for compile-time exhaustiveness checking.
+ */
+export function assertUnreachable(value: never): never {
+	throw new Error(`ERROR! Encountered an unexpected value: ${value}`);
+}

package/src/utils/stateStorage.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StateStorage } from 'zustand/middleware';
+
+export function createInMemoryStore(): StateStorage {
+	const store = new Map();
+	return {
+		getItem(key: string) {
+			return store.get(key);
+		},
+		setItem(key: string, value: string) {
+			store.set(key, value);
+		},
+		removeItem(key: string) {
+			store.delete(key);
+		},
+	};
+}

package/src/utils/walletUtils.ts

@@ -0,0 +1,37 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type {
+	MinimallyRequiredFeatures,
+	Wallet,
+	WalletWithFeatures,
+	WalletWithRequiredFeatures,
+} from '@haneullabs/wallet-standard';
+import { getWallets, isWalletWithRequiredFeatureSet } from '@haneullabs/wallet-standard';
+
+export function getRegisteredWallets<AdditionalFeatures extends Wallet['features']>(
+	preferredWallets: string[],
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean,
+) {
+	const walletsApi = getWallets();
+	const wallets = walletsApi.get();
+
+	const suiWallets = wallets.filter(
+		(wallet): wallet is WalletWithFeatures<MinimallyRequiredFeatures & AdditionalFeatures> =>
+			isWalletWithRequiredFeatureSet(wallet) && (!walletFilter || walletFilter(wallet)),
+	);
+
+	return [
+		// Preferred wallets, in order:
+		...(preferredWallets
+			.map((name) => suiWallets.find((wallet) => wallet.name === name))
+			.filter(Boolean) as WalletWithFeatures<MinimallyRequiredFeatures & AdditionalFeatures>[]),
+
+		// Wallets in default order:
+		...suiWallets.filter((wallet) => !preferredWallets.includes(wallet.name)),
+	];
+}
+
+export function getWalletUniqueIdentifier(wallet?: Wallet) {
+	return wallet?.id ?? wallet?.name;
+}

package/src/walletStore.ts

@@ -0,0 +1,144 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Wallet, WalletAccount, WalletWithRequiredFeatures } from '@haneullabs/wallet-standard';
+import { createStore } from 'zustand';
+import type { StateStorage } from 'zustand/middleware';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+import { getWalletUniqueIdentifier } from './utils/walletUtils.js';
+
+type WalletConnectionStatus = 'disconnected' | 'connecting' | 'connected';
+
+export type WalletActions = {
+	setAccountSwitched: (selectedAccount: WalletAccount) => void;
+	setConnectionStatus: (connectionStatus: WalletConnectionStatus) => void;
+	setWalletConnected: (
+		wallet: WalletWithRequiredFeatures,
+		connectedAccounts: readonly WalletAccount[],
+		selectedAccount: WalletAccount | null,
+		supportedIntents?: string[],
+	) => void;
+	updateWalletAccounts: (accounts: readonly WalletAccount[]) => void;
+	setWalletDisconnected: () => void;
+	setWalletRegistered: (updatedWallets: WalletWithRequiredFeatures[]) => void;
+	setWalletUnregistered: (
+		updatedWallets: WalletWithRequiredFeatures[],
+		unregisteredWallet: Wallet,
+	) => void;
+};
+
+export type WalletStore = ReturnType<typeof createWalletStore>;
+
+export type StoreState = {
+	autoConnectEnabled: boolean;
+	wallets: WalletWithRequiredFeatures[];
+	accounts: readonly WalletAccount[];
+	currentWallet: WalletWithRequiredFeatures | null;
+	currentAccount: WalletAccount | null;
+	lastConnectedAccountAddress: string | null;
+	lastConnectedWalletName: string | null;
+	connectionStatus: WalletConnectionStatus;
+	supportedIntents: string[];
+} & WalletActions;
+
+type WalletConfiguration = {
+	autoConnectEnabled: boolean;
+	wallets: WalletWithRequiredFeatures[];
+	storage: StateStorage;
+	storageKey: string;
+};
+
+export function createWalletStore({
+	wallets,
+	storage,
+	storageKey,
+	autoConnectEnabled,
+}: WalletConfiguration) {
+	return createStore<StoreState>()(
+		persist(
+			(set, get) => ({
+				autoConnectEnabled,
+				wallets,
+				accounts: [] as WalletAccount[],
+				currentWallet: null,
+				currentAccount: null,
+				lastConnectedAccountAddress: null,
+				lastConnectedWalletName: null,
+				connectionStatus: 'disconnected',
+				supportedIntents: [],
+				setConnectionStatus(connectionStatus) {
+					set(() => ({
+						connectionStatus,
+					}));
+				},
+				setWalletConnected(wallet, connectedAccounts, selectedAccount, supportedIntents = []) {
+					set(() => ({
+						accounts: connectedAccounts,
+						currentWallet: wallet,
+						currentAccount: selectedAccount,
+						lastConnectedWalletName: getWalletUniqueIdentifier(wallet),
+						lastConnectedAccountAddress: selectedAccount?.address,
+						connectionStatus: 'connected',
+						supportedIntents,
+					}));
+				},
+				setWalletDisconnected() {
+					set(() => ({
+						accounts: [],
+						currentWallet: null,
+						currentAccount: null,
+						lastConnectedWalletName: null,
+						lastConnectedAccountAddress: null,
+						connectionStatus: 'disconnected',
+						supportedIntents: [],
+					}));
+				},
+				setAccountSwitched(selectedAccount) {
+					set(() => ({
+						currentAccount: selectedAccount,
+						lastConnectedAccountAddress: selectedAccount.address,
+					}));
+				},
+				setWalletRegistered(updatedWallets) {
+					set(() => ({ wallets: updatedWallets }));
+				},
+				setWalletUnregistered(updatedWallets, unregisteredWallet) {
+					if (unregisteredWallet === get().currentWallet) {
+						set(() => ({
+							wallets: updatedWallets,
+							accounts: [],
+							currentWallet: null,
+							currentAccount: null,
+							lastConnectedWalletName: null,
+							lastConnectedAccountAddress: null,
+							connectionStatus: 'disconnected',
+							supportedIntents: [],
+						}));
+					} else {
+						set(() => ({ wallets: updatedWallets }));
+					}
+				},
+				updateWalletAccounts(accounts) {
+					const currentAccount = get().currentAccount;
+
+					set(() => ({
+						accounts,
+						currentAccount:
+							(currentAccount &&
+								accounts.find(({ address }) => address === currentAccount.address)) ||
+							accounts[0],
+					}));
+				},
+			}),
+			{
+				name: storageKey,
+				storage: createJSONStorage(() => storage),
+				partialize: ({ lastConnectedWalletName, lastConnectedAccountAddress }) => ({
+					lastConnectedWalletName,
+					lastConnectedAccountAddress,
+				}),
+			},
+		),
+	);
+}