@iota/dapp-kit 0.0.0-dev-20251015065834

package/src/hooks/wallet/useUnsafeBurnerWallet.ts

@@ -0,0 +1,168 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import { Ed25519Keypair } from '@iota/iota-sdk/keypairs/ed25519';
+import { Transaction } from '@iota/iota-sdk/transactions';
+import { toBase64 } from '@iota/iota-sdk/utils';
+import type {
+    StandardConnectFeature,
+    StandardConnectMethod,
+    StandardEventsFeature,
+    StandardEventsOnMethod,
+    IotaFeatures,
+    IotaSignAndExecuteTransactionMethod,
+    IotaSignPersonalMessageMethod,
+    IotaSignTransactionMethod,
+    Wallet,
+} from '@iota/wallet-standard';
+import { getWallets, ReadonlyWalletAccount, SUPPORTED_CHAINS } from '@iota/wallet-standard';
+import { useEffect } from 'react';
+
+import { useIotaClient } from '../useIotaClient.js';
+
+const WALLET_NAME = 'Unsafe Burner Wallet';
+
+export function useUnsafeBurnerWallet(enabled: boolean) {
+    const iotaClient = useIotaClient();
+
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const unregister = registerUnsafeBurnerWallet(iotaClient);
+        return unregister;
+    }, [enabled, iotaClient]);
+}
+
+function registerUnsafeBurnerWallet(iotaClient: IotaClient) {
+    const walletsApi = getWallets();
+    const registeredWallets = walletsApi.get();
+
+    if (registeredWallets.find((wallet) => wallet.name === WALLET_NAME)) {
+        console.warn(
+            'registerUnsafeBurnerWallet: Unsafe Burner Wallet already registered, skipping duplicate registration.',
+        );
+        return;
+    }
+
+    console.warn(
+        'Your application is currently using the unsafe burner wallet. Make sure that this wallet is disabled in production.',
+    );
+
+    const keypair = new Ed25519Keypair();
+    const account = new ReadonlyWalletAccount({
+        address: keypair.getPublicKey().toIotaAddress(),
+        publicKey: keypair.getPublicKey().toIotaBytes(),
+        chains: ['iota:unknown'],
+        features: ['iota:signTransaction', 'iota:signAndExecuteTransaction'],
+    });
+
+    class UnsafeBurnerWallet implements Wallet {
+        get version() {
+            return '1.0.0' as const;
+        }
+
+        get name() {
+            return WALLET_NAME;
+        }
+
+        get icon() {
+            return 'data:image/png;base64,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' as const;
+        }
+
+        // Return the IOTA chains that your wallet supports.
+        get chains() {
+            return SUPPORTED_CHAINS;
+        }
+
+        get accounts() {
+            return [account];
+        }
+
+        get features(): StandardConnectFeature & StandardEventsFeature & IotaFeatures {
+            return {
+                'standard:connect': {
+                    version: '1.0.0',
+                    connect: this.#connect,
+                },
+                'standard:events': {
+                    version: '1.0.0',
+                    on: this.#on,
+                },
+                'iota:signPersonalMessage': {
+                    version: '1.0.0',
+                    signPersonalMessage: this.#signPersonalMessage,
+                },
+                'iota:signTransaction': {
+                    version: '2.0.0',
+                    signTransaction: this.#signTransaction,
+                },
+                'iota:signAndExecuteTransaction': {
+                    version: '2.0.0',
+                    signAndExecuteTransaction: this.#signAndExecuteTransaction,
+                },
+            };
+        }
+
+        #on: StandardEventsOnMethod = () => {
+            return () => {};
+        };
+
+        #connect: StandardConnectMethod = async () => {
+            return { accounts: this.accounts };
+        };
+
+        #signPersonalMessage: IotaSignPersonalMessageMethod = async (messageInput) => {
+            const { bytes, signature } = await keypair.signPersonalMessage(messageInput.message);
+            return { bytes, signature };
+        };
+
+        #signTransaction: IotaSignTransactionMethod = async (transactionInput) => {
+            const { bytes, signature } = await Transaction.from(
+                await transactionInput.transaction.toJSON(),
+            ).sign({
+                client: iotaClient,
+                signer: keypair,
+            });
+
+            transactionInput.signal?.throwIfAborted();
+
+            return {
+                bytes,
+                signature: signature,
+            };
+        };
+
+        #signAndExecuteTransaction: IotaSignAndExecuteTransactionMethod = async (
+            transactionInput,
+        ) => {
+            const { bytes, signature } = await Transaction.from(
+                await transactionInput.transaction.toJSON(),
+            ).sign({
+                client: iotaClient,
+                signer: keypair,
+            });
+
+            transactionInput.signal?.throwIfAborted();
+
+            const { rawEffects, digest } = await iotaClient.executeTransactionBlock({
+                signature,
+                transactionBlock: bytes,
+                options: {
+                    showRawEffects: true,
+                },
+            });
+
+            return {
+                bytes,
+                signature,
+                digest,
+                effects: toBase64(new Uint8Array(rawEffects!)),
+            };
+        };
+    }
+
+    return walletsApi.register(new UnsafeBurnerWallet());
+}

package/src/hooks/wallet/useWalletPropertiesChanged.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect } from 'react';
+
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Internal hook for easily handling various changes in properties for a wallet.
+ */
+export function useWalletPropertiesChanged() {
+    const { currentWallet } = useCurrentWallet();
+    const updateWalletAccounts = useWalletStore((state) => state.updateWalletAccounts);
+
+    useEffect(() => {
+        const unsubscribeFromEvents = currentWallet?.features['standard:events'].on(
+            'change',
+            ({ accounts }) => {
+                // TODO: We should handle features changing that might make the list of wallets
+                // or even the current wallet incompatible with the dApp.
+                if (accounts) {
+                    updateWalletAccounts(accounts);
+                }
+            },
+        );
+        return unsubscribeFromEvents;
+    }, [currentWallet?.features, updateWalletAccounts]);
+}

package/src/hooks/wallet/useWalletStore.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useContext } from 'react';
+import { useStore } from 'zustand';
+
+import { WalletContext } from '../../contexts/walletContext.js';
+import type { StoreState } from '../../walletStore.js';
+
+export function useWalletStore<T>(selector: (state: StoreState) => T): T {
+    const store = useContext(WalletContext);
+    if (!store) {
+        throw new Error(
+            'Could not find WalletContext. Ensure that you have set up the WalletProvider.',
+        );
+    }
+    return useStore(store, selector);
+}

package/src/hooks/wallet/useWallets.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves a list of registered wallets available to the dApp sorted by preference.
+ */
+export function useWallets() {
+    return useWalletStore((state) => state.wallets);
+}

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