@iota/dapp-kit 0.0.0-experimental-20250610130929

package/src/hooks/wallet/useWalletsChanged.ts

@@ -0,0 +1,42 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';
+import { getWallets } from '@iota/wallet-standard';
+import { useEffect } from 'react';
+
+import { getRegisteredWallets } from '../../utils/walletUtils.js';
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Internal hook for easily handling the addition and removal of new wallets.
+ */
+export function useWalletsChanged(
+    preferredWallets: string[],
+    walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean,
+) {
+    const setWalletRegistered = useWalletStore((state) => state.setWalletRegistered);
+    const setWalletUnregistered = useWalletStore((state) => state.setWalletUnregistered);
+
+    useEffect(() => {
+        const walletsApi = getWallets();
+        setWalletRegistered(getRegisteredWallets(preferredWallets, walletFilter));
+
+        const unsubscribeFromRegister = walletsApi.on('register', () => {
+            setWalletRegistered(getRegisteredWallets(preferredWallets, walletFilter));
+        });
+
+        const unsubscribeFromUnregister = walletsApi.on('unregister', (unregisteredWallet) => {
+            setWalletUnregistered(
+                getRegisteredWallets(preferredWallets, walletFilter),
+                unregisteredWallet,
+            );
+        });
+
+        return () => {
+            unsubscribeFromRegister();
+            unsubscribeFromUnregister();
+        };
+    }, [preferredWallets, walletFilter, setWalletRegistered, setWalletUnregistered]);
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './components/connect-modal/ConnectModal.js';
+export * from './components/ConnectButton.js';
+export * from './components/IotaClientProvider.js';
+export * from './components/WalletProvider.js';
+export * from './hooks/networkConfig.js';
+export * from './hooks/useIotaClient.js';
+export * from './hooks/useIotaClientInfiniteQuery.js';
+export * from './hooks/useIotaClientMutation.js';
+export * from './hooks/useIotaClientQuery.js';
+export * from './hooks/useIotaClientQueries.js';
+export * from './hooks/wallet/useAccounts.js';
+export * from './hooks/wallet/useAutoConnectWallet.js';
+export * from './hooks/wallet/useConnectWallet.js';
+export * from './hooks/wallet/useCurrentAccount.js';
+export * from './hooks/wallet/useCurrentWallet.js';
+export * from './hooks/wallet/useDisconnectWallet.js';
+export * from './hooks/wallet/useSignAndExecuteTransaction.js';
+export * from './hooks/wallet/useSignPersonalMessage.js';
+export * from './hooks/wallet/useSignTransaction.js';
+export * from './hooks/wallet/useReportTransactionEffects.js';
+export * from './hooks/wallet/useSwitchAccount.js';
+export * from './hooks/wallet/useWallets.js';
+export * from './themes/lightTheme.js';
+export * from './themes/darkTheme.js';
+export * from './types.js';
+
+export type { Theme, ThemeVars, DynamicTheme } from './themes/themeContract.js';

package/src/themes/darkTheme.ts

@@ -0,0 +1,69 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeVars } from './themeContract.js';
+
+export const darkTheme: ThemeVars = {
+    blurs: {
+        modalOverlay: 'blur(12px)',
+    },
+    backgroundColors: {
+        primaryButton: '#253041',
+        primaryButtonHover: '#313D50',
+        outlineButtonHover: '#313D50',
+        modalOverlay: 'rgba(0, 47, 109, 0.72)',
+        modalPrimary: '#0f141c',
+        modalSecondary: '#171d26',
+        iconButton: 'transparent',
+        dropdownMenu: '#0f141c',
+        dropdownMenuSeparator: '#bed8ff14',
+        walletItemSelected: 'rgba(190, 216, 255, 0.12)',
+        walletItemHover: 'rgba(190, 216, 255, 0.06)',
+        scrollThumb: '#3c4656',
+    },
+    borderColors: {
+        outlineButton: '#8892A1',
+    },
+    colors: {
+        primaryButton: '#E3EAF6',
+        outlineButtonHover: '#171D26',
+        iconButton: '#E3EAF6',
+        body: '#E3EAF6',
+        bodyMuted: '#8892A1',
+        bodyDanger: '#FFB0BE',
+    },
+    radii: {
+        small: '6px',
+        medium: '8px',
+        large: '12px',
+        xlarge: '16px',
+        full: '120px',
+    },
+    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: '24px',
+        letterSpacing: '0.1px',
+    },
+    spacing: {
+        xxsmall: '4px',
+        xsmall: '8px',
+        small: '12px',
+        medium: '16px',
+        large: '24px',
+        xlarge: '32px',
+    },
+};

package/src/themes/lightTheme.ts

@@ -0,0 +1,69 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// 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',
+        dropdownMenu: '#FFFFFF',
+        dropdownMenuSeparator: '#F3F6F8',
+        walletItemSelected: 'white',
+        walletItemHover: '#3C424226',
+        scrollThumb: '#cad4e2',
+    },
+    borderColors: {
+        outlineButton: '#E4E4E7',
+    },
+    colors: {
+        primaryButton: '#373737',
+        outlineButtonHover: '#373737',
+        iconButton: '#000000',
+        body: '#182435',
+        bodyMuted: '#767A81',
+        bodyDanger: '#FF794B',
+    },
+    radii: {
+        small: '6px',
+        medium: '8px',
+        large: '12px',
+        xlarge: '16px',
+        full: '120px',
+    },
+    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: '24px',
+        letterSpacing: '0.1px',
+    },
+    spacing: {
+        xxsmall: '4px',
+        xsmall: '8px',
+        small: '12px',
+        medium: '16px',
+        large: '24px',
+        xlarge: '32px',
+    },
+};

package/src/themes/themeContract.ts

@@ -0,0 +1,103 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// 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: '',
+        dropdownMenu: '',
+        dropdownMenuSeparator: '',
+        scrollThumb: '',
+    },
+    borderColors: {
+        outlineButton: '',
+    },
+    colors: {
+        primaryButton: '',
+        outlineButtonHover: '',
+        body: '',
+        bodyMuted: '',
+        bodyDanger: '',
+        iconButton: '',
+    },
+    radii: {
+        small: '',
+        medium: '',
+        large: '',
+        xlarge: '',
+        full: '',
+    },
+    fontWeights: {
+        normal: '',
+        medium: '',
+        bold: '',
+    },
+    fontSizes: {
+        small: '',
+        medium: '',
+        large: '',
+        xlarge: '',
+    },
+    typography: {
+        fontFamily: '',
+        fontStyle: '',
+        lineHeight: '',
+        letterSpacing: '',
+    },
+    spacing: {
+        xxsmall: '',
+        xsmall: '',
+        small: '',
+        medium: '',
+        large: '',
+        xlarge: '',
+    },
+};
+
+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,5 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// 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,6 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export type { SignedPersonalMessage, SignedTransaction } from '@iota/wallet-standard';
+export type { ThemeVars } from './themes/themeContract.js';

package/src/utils/assertUnreachable.ts

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

package/src/walletStore.ts

@@ -0,0 +1,152 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Wallet, WalletAccount, WalletWithRequiredFeatures } from '@iota/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,
+                }),
+            },
+        ),
+    );
+}