@iota/dapp-kit 0.0.0-dev-20251015065834

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@iota/dapp-kit",
+  "author": "IOTA Foundation <info@iota.org>",
+  "description": "A collection of React hooks and components for interacting with the IOTA blockchain and wallets.",
+  "homepage": "https://docs.iota.org/developer/ts-sdk/dapp-kit/",
+  "version": "0.0.0-dev-20251015065834",
+  "license": "Apache-2.0",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src"
+  ],
+  "type": "commonjs",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/esm/index.css",
+      "require": "./dist/cjs/index.css"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/iotaledger/iota/issues/new"
+  },
+  "size-limit": [
+    {
+      "path": "dist/esm/index.js",
+      "limit": "100 KB"
+    },
+    {
+      "path": "dist/cjs/index.js",
+      "limit": "100 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "@tanstack/react-query": "^5.50.1",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.3",
+    "@vanilla-extract/esbuild-plugin": "^2.3.8",
+    "@vanilla-extract/vite-plugin": "^4.0.13",
+    "dotenv": "^16.4.5",
+    "jsdom": "^24.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.1.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.12",
+    "vitest": "^2.1.9",
+    "@iota/build-scripts": "0.0.0"
+  },
+  "dependencies": {
+    "@iota/iota-names-sdk": "^0.3.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "@vanilla-extract/recipes": "^0.5.3",
+    "clsx": "^2.1.1",
+    "zustand": "^4.4.1",
+    "@iota/iota-sdk": "0.0.0-dev-20251015065834",
+    "@iota/wallet-standard": "0.0.0-dev-20251015065834"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.50.1",
+    "react": "*"
+  },
+  "sideEffects": [
+    "*.css.ts",
+    "*.css"
+  ],
+  "scripts": {
+    "clean": "rm -rf tsconfig.tsbuildinfo ./dist",
+    "build": "build-dapp-kit",
+    "test": "pnpm test:typecheck && pnpm vitest run",
+    "test:typecheck": "tsc -b ./test",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
+    "prettier:fix": "prettier -w --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
+    "eslint:check": "eslint --max-warnings=0 .",
+    "eslint:fix": "pnpm run eslint:check --fix",
+    "lint": "pnpm run eslint:check && pnpm run prettier:check",
+    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix"
+  }
+}

package/src/components/AccountDropdownMenu.css.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../themes/themeContract.js';
+
+export const connectedAccount = style({
+    gap: 8,
+});
+
+export const menuContainer = style({
+    zIndex: 999999999,
+});
+
+export const menuContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    width: 180,
+    maxHeight: 300,
+    marginTop: 4,
+    padding: 8,
+    gap: 8,
+    borderRadius: themeVars.radii.large,
+    backgroundColor: themeVars.backgroundColors.dropdownMenu,
+});
+
+export const scrollableContent = style({
+    overflowY: 'auto',
+    maxHeight: 300,
+    flexGrow: 1,
+});
+
+export const menuItem = style({
+    padding: 8,
+    height: 40,
+    userSelect: 'none',
+    outline: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: themeVars.radii.large,
+    selectors: {
+        '&[data-highlighted]': {
+            backgroundColor: themeVars.backgroundColors.primaryButton,
+        },
+    },
+});
+
+export const switchAccountMenuItem = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+
+export const separator = style({
+    height: 1,
+    flexShrink: 0,
+    backgroundColor: themeVars.backgroundColors.dropdownMenuSeparator,
+});

package/src/components/AccountDropdownMenu.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { formatAddress } from '@iota/iota-sdk/utils';
+import type { WalletAccount } from '@iota/wallet-standard';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+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';
+import { StyleMarker } from './styling/StyleMarker.js';
+import { Button } from './ui/Button.js';
+import { Text } from './ui/Text.js';
+import { useGetDefaultIotaName } from '../hooks/useGetDefaultIotaName.js';
+
+type AccountDropdownMenuProps = {
+    currentAccount: WalletAccount;
+    size?: React.ComponentProps<typeof Button>['size'];
+    iotaNamesEnabled: boolean;
+};
+
+export function AccountDropdownMenu({
+    currentAccount,
+    size = 'lg',
+    iotaNamesEnabled,
+}: AccountDropdownMenuProps) {
+    const { mutate: disconnectWallet } = useDisconnectWallet();
+    const accounts = useAccounts();
+    const { data: iotaName } = useGetDefaultIotaName(currentAccount.address, iotaNamesEnabled);
+    const displayAccount =
+        iotaName ?? currentAccount.label ?? formatAddress(currentAccount.address);
+
+    return (
+        <DropdownMenu.Root modal={false}>
+            <StyleMarker>
+                <DropdownMenu.Trigger asChild>
+                    <Button size={size} className={styles.connectedAccount}>
+                        <Text mono weight="bold">
+                            {displayAccount}
+                        </Text>
+                        <ChevronIcon />
+                    </Button>
+                </DropdownMenu.Trigger>
+            </StyleMarker>
+            <DropdownMenu.Portal>
+                <StyleMarker className={styles.menuContainer}>
+                    <DropdownMenu.Content className={styles.menuContent}>
+                        <div className={styles.scrollableContent}>
+                            {accounts.map((account) => (
+                                <AccountDropdownMenuItem
+                                    key={account.address}
+                                    account={account}
+                                    active={currentAccount.address === account.address}
+                                    iotaNamesEnabled={iotaNamesEnabled}
+                                />
+                            ))}
+                        </div>
+                        <DropdownMenu.Separator className={styles.separator} />
+                        <DropdownMenu.Item
+                            className={clsx(styles.menuItem)}
+                            onSelect={() => disconnectWallet()}
+                        >
+                            Disconnect
+                        </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </StyleMarker>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    );
+}
+
+export function AccountDropdownMenuItem({
+    account,
+    active,
+    iotaNamesEnabled,
+}: {
+    account: WalletAccount;
+    active?: boolean;
+    iotaNamesEnabled: boolean;
+}) {
+    const { mutate: switchAccount } = useSwitchAccount();
+    const { data: iotaName } = useGetDefaultIotaName(account.address, iotaNamesEnabled);
+    const displayAccount = iotaName ?? account.label ?? formatAddress(account.address);
+
+    return (
+        <DropdownMenu.Item
+            className={clsx(styles.menuItem, styles.switchAccountMenuItem)}
+            onSelect={() => switchAccount({ account })}
+        >
+            <Text mono>{displayAccount}</Text>
+            {active ? <CheckIcon /> : null}
+        </DropdownMenu.Item>
+    );
+}

package/src/components/ConnectButton.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// 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';
+import { StyleMarker } from './styling/StyleMarker.js';
+import { Button } from './ui/Button.js';
+
+type ConnectButtonProps = {
+    connectText?: ReactNode;
+    size?: React.ComponentProps<typeof Button>['size'];
+    iotaNamesEnabled?: boolean;
+} & React.ComponentProps<typeof Button>;
+
+export function ConnectButton({
+    connectText = 'Connect Wallet',
+    size,
+    iotaNamesEnabled = true,
+    ...buttonProps
+}: ConnectButtonProps) {
+    const currentAccount = useCurrentAccount();
+    return currentAccount ? (
+        <AccountDropdownMenu
+            currentAccount={currentAccount}
+            size={size}
+            iotaNamesEnabled={iotaNamesEnabled}
+        />
+    ) : (
+        <ConnectModal
+            trigger={
+                <StyleMarker>
+                    <Button {...buttonProps} size={size}>
+                        {connectText}
+                    </Button>
+                </StyleMarker>
+            }
+        />
+    );
+}

package/src/components/IotaClientProvider.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { getNetwork, isIotaClient, Network, IotaClient } from '@iota/iota-sdk/client';
+import type { IotaClientOptions } from '@iota/iota-sdk/client';
+import { createContext, useMemo, useState } from 'react';
+
+import type { NetworkConfig } from '../hooks/networkConfig.js';
+
+type NetworkConfigs<T extends NetworkConfig | IotaClient = NetworkConfig | IotaClient> = Record<
+    string,
+    T
+>;
+
+export interface IotaClientProviderContext {
+    client: IotaClient;
+    networks: NetworkConfigs;
+    network: string;
+    config: NetworkConfig | null;
+    selectNetwork: (network: string) => void;
+}
+
+export const IotaClientContext = createContext<IotaClientProviderContext | null>(null);
+
+export type IotaClientProviderProps<T extends NetworkConfigs> = {
+    createClient?: (name: keyof T, config: T[keyof T]) => IotaClient;
+    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: getNetwork(Network.Localnet)?.url },
+};
+
+const DEFAULT_CREATE_CLIENT = function createClient(
+    _name: string,
+    config: NetworkConfig | IotaClient,
+) {
+    if (isIotaClient(config)) {
+        return config;
+    }
+
+    return new IotaClient(config);
+};
+
+export function IotaClientProvider<T extends NetworkConfigs>(props: IotaClientProviderProps<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((): IotaClientProviderContext => {
+        return {
+            client,
+            networks,
+            network: currentNetwork,
+            config:
+                networks[currentNetwork] instanceof IotaClient
+                    ? null
+                    : (networks[currentNetwork] as IotaClientOptions),
+            selectNetwork: (newNetwork) => {
+                if (currentNetwork === newNetwork) {
+                    return;
+                }
+
+                if (!network && newNetwork !== selectedNetwork) {
+                    setSelectedNetwork(newNetwork);
+                }
+
+                onNetworkChange?.(newNetwork);
+            },
+        };
+    }, [client, networks, selectedNetwork, currentNetwork, network, onNetworkChange]);
+
+    return <IotaClientContext.Provider value={ctx}>{children}</IotaClientContext.Provider>;
+}

package/src/components/WalletProvider.tsx

@@ -0,0 +1,106 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithFeatures, WalletWithRequiredFeatures } from '@iota/wallet-standard';
+import type { ReactNode } from 'react';
+import { useRef } from 'react';
+import type { StateStorage } from 'zustand/middleware';
+
+import {
+    DEFAULT_PREFERRED_WALLETS,
+    DEFAULT_STORAGE,
+    DEFAULT_STORAGE_KEY,
+    DEFAULT_WALLET_FILTER,
+} from '../constants/walletDefaults.js';
+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 { lightTheme } from '../themes/lightTheme.js';
+import type { Theme } from '../themes/themeContract.js';
+import { createInMemoryStore } from '../utils/stateStorage.js';
+import { getRegisteredWallets } from '../utils/walletUtils.js';
+import { createWalletStore } from '../walletStore.js';
+import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
+
+export 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 filter function to select wallets that support features 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. */
+    walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
+
+    /** 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. Set to `null` to disable persisting state entirely. Defaults to using localStorage if it is available. */
+    storage?: StateStorage | null;
+
+    /** The key to use to store the most recently connected wallet account. */
+    storageKey?: string;
+
+    /** The theme to use for styling UI components. Defaults to using the light theme. */
+    theme?: Theme | null;
+
+    children: ReactNode;
+};
+
+export type { WalletWithFeatures };
+
+export function WalletProvider({
+    preferredWallets = DEFAULT_PREFERRED_WALLETS,
+    walletFilter = DEFAULT_WALLET_FILTER,
+    storage = DEFAULT_STORAGE,
+    storageKey = DEFAULT_STORAGE_KEY,
+    enableUnsafeBurner = false,
+    autoConnect = false,
+    theme = lightTheme,
+    children,
+}: WalletProviderProps) {
+    const storeRef = useRef(
+        createWalletStore({
+            autoConnectEnabled: autoConnect,
+            wallets: getRegisteredWallets(preferredWallets, walletFilter),
+            storage: storage || createInMemoryStore(),
+            storageKey,
+        }),
+    );
+
+    return (
+        <WalletContext.Provider value={storeRef.current}>
+            <WalletConnectionManager
+                preferredWallets={preferredWallets}
+                walletFilter={walletFilter}
+                enableUnsafeBurner={enableUnsafeBurner}
+            >
+                {/* TODO: We ideally don't want to inject styles if people aren't using the UI components */}
+                {theme ? <InjectedThemeStyles theme={theme} /> : null}
+                {children}
+            </WalletConnectionManager>
+        </WalletContext.Provider>
+    );
+}
+
+type WalletConnectionManagerProps = Pick<
+    WalletProviderProps,
+    'preferredWallets' | 'walletFilter' | 'enableUnsafeBurner' | 'children'
+>;
+
+function WalletConnectionManager({
+    preferredWallets = DEFAULT_PREFERRED_WALLETS,
+    walletFilter = DEFAULT_WALLET_FILTER,
+    enableUnsafeBurner = false,
+    children,
+}: WalletConnectionManagerProps) {
+    useWalletsChanged(preferredWallets, walletFilter);
+    useWalletPropertiesChanged();
+    useUnsafeBurnerWallet(enableUnsafeBurner);
+    useAutoConnectWallet();
+
+    return children;
+}

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

@@ -0,0 +1,125 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const overlay = style({
+    backgroundColor: themeVars.backgroundColors.modalOverlay,
+    backdropFilter: themeVars.blurs.modalOverlay,
+    position: 'fixed',
+    inset: 0,
+    zIndex: 999999999,
+});
+
+export const title = style({
+    paddingLeft: 8,
+});
+
+export const content = style({
+    backgroundColor: themeVars.backgroundColors.modalPrimary,
+    borderRadius: themeVars.radii.xlarge,
+    color: themeVars.colors.body,
+    position: 'fixed',
+    bottom: 16,
+    left: 16,
+    right: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+    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: themeVars.backgroundColors.modalSecondary,
+    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 backButtonContainer = style({
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    '@media': {
+        'screen and (min-width: 768px)': {
+            display: 'none',
+        },
+    },
+});
+
+export const closeButtonContainer = style({
+    position: 'absolute',
+    top: 16,
+    right: 16,
+});
+
+export const walletListContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    gap: 24,
+    padding: 20,
+    backgroundColor: themeVars.backgroundColors.modalPrimary,
+    '@media': {
+        'screen and (min-width: 768px)': {
+            backgroundColor: themeVars.backgroundColors.modalSecondary,
+        },
+    },
+});
+
+export const walletListContainer = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    flexGrow: 1,
+    '@media': {
+        'screen and (min-width: 768px)': {
+            flexDirection: 'row',
+            flexBasis: 240,
+            flexGrow: 0,
+            flexShrink: 0,
+        },
+    },
+});
+
+export const walletListContainerWithViewSelected = style({
+    display: 'none',
+    '@media': {
+        'screen and (min-width: 768px)': {
+            display: 'flex',
+        },
+    },
+});