@iota/dapp-kit 0.0.0-experimental-20250610130929

package/src/components/AccountDropdownMenu.tsx

@@ -0,0 +1,85 @@
+// 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';
+
+type AccountDropdownMenuProps = {
+    currentAccount: WalletAccount;
+    size?: React.ComponentProps<typeof Button>['size'];
+};
+
+export function AccountDropdownMenu({ currentAccount, size = 'lg' }: AccountDropdownMenuProps) {
+    const { mutate: disconnectWallet } = useDisconnectWallet();
+    const accounts = useAccounts();
+
+    return (
+        <DropdownMenu.Root modal={false}>
+            <StyleMarker>
+                <DropdownMenu.Trigger asChild>
+                    <Button size={size} className={styles.connectedAccount}>
+                        <Text mono weight="bold">
+                            {currentAccount.label ?? formatAddress(currentAccount.address)}
+                        </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}
+                                />
+                            ))}
+                        </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,
+}: {
+    account: WalletAccount;
+    active?: boolean;
+}) {
+    const { mutate: switchAccount } = useSwitchAccount();
+
+    return (
+        <DropdownMenu.Item
+            className={clsx(styles.menuItem, styles.switchAccountMenuItem)}
+            onSelect={() => switchAccount({ account })}
+        >
+            <Text mono>{account.label ?? formatAddress(account.address)}</Text>
+            {active ? <CheckIcon /> : null}
+        </DropdownMenu.Item>
+    );
+}

package/src/components/ConnectButton.tsx

@@ -0,0 +1,37 @@
+// 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'];
+} & React.ComponentProps<typeof Button>;
+
+export function ConnectButton({
+    connectText = 'Connect Wallet',
+    size,
+    ...buttonProps
+}: ConnectButtonProps) {
+    const currentAccount = useCurrentAccount();
+    return currentAccount ? (
+        <AccountDropdownMenu currentAccount={currentAccount} size={size} />
+    ) : (
+        <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',
+        },
+    },
+});

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

@@ -0,0 +1,167 @@
+// 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 * 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 { getWalletUniqueIdentifier } from '../../utils/walletUtils.js';
+import { BackIcon } from '../icons/BackIcon.js';
+import { CloseIcon } from '../icons/CloseIcon.js';
+import { StyleMarker } from '../styling/StyleMarker.js';
+import { Heading } from '../ui/Heading.js';
+import { IconButton } from '../ui/IconButton.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 ControlledModalProps = {
+    /** The controlled open state of the dialog. */
+    open: boolean;
+
+    /** Event handler called when the open state of the dialog changes. */
+    onOpenChange: (open: boolean) => void;
+
+    defaultOpen?: never;
+};
+
+type UncontrolledModalProps = {
+    open?: never;
+
+    onOpenChange?: never;
+
+    /** The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. */
+    defaultOpen?: boolean;
+};
+
+type ConnectModalProps = {
+    /** The trigger button that opens the dialog. */
+    trigger: NonNullable<ReactNode>;
+} & (ControlledModalProps | UncontrolledModalProps);
+
+export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: ConnectModalProps) {
+    const [isModalOpen, setModalOpen] = useState(open ?? defaultOpen);
+    const [currentView, setCurrentView] = useState<ConnectModalView>();
+    const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
+    const { mutate, isError } = useConnectWallet();
+
+    const resetSelection = () => {
+        setSelectedWallet(undefined);
+        setCurrentView(undefined);
+    };
+
+    const handleOpenChange = (open: boolean) => {
+        if (!open) {
+            resetSelection();
+        }
+        setModalOpen(open);
+        onOpenChange?.(open);
+    };
+
+    const connectWallet = (wallet: WalletWithRequiredFeatures) => {
+        setCurrentView('connection-status');
+        mutate(
+            { wallet, silent: false },
+            {
+                onSuccess: () => handleOpenChange(false),
+            },
+        );
+    };
+
+    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={open ?? isModalOpen} onOpenChange={handleOpenChange}>
+            <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+            <Dialog.Portal>
+                <StyleMarker>
+                    <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} asChild>
+                                        <Heading as="h2">Connect a Wallet</Heading>
+                                    </Dialog.Title>
+                                    <WalletList
+                                        selectedWalletName={getWalletUniqueIdentifier(
+                                            selectedWallet,
+                                        )}
+                                        onPlaceholderClick={() => setCurrentView('getting-started')}
+                                        onSelect={(wallet) => {
+                                            if (
+                                                getWalletUniqueIdentifier(selectedWallet) !==
+                                                getWalletUniqueIdentifier(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,
+                                })}
+                            >
+                                <div className={styles.backButtonContainer}>
+                                    <IconButton
+                                        type="button"
+                                        aria-label="Back"
+                                        onClick={() => resetSelection()}
+                                    >
+                                        <BackIcon />
+                                    </IconButton>
+                                </div>
+                                {modalContent}
+                            </div>
+                            <Dialog.Close className={styles.closeButtonContainer} asChild>
+                                <IconButton type="button" aria-label="Close">
+                                    <CloseIcon />
+                                </IconButton>
+                            </Dialog.Close>
+                        </Dialog.Content>
+                    </Dialog.Overlay>
+                </StyleMarker>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+}

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

@@ -0,0 +1,11 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+});

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

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Heading } from '../ui/Heading.js';
+import { Text } from '../ui/Text.js';
+import * as styles from './InfoSection.css.js';
+
+type InfoSectionProps = {
+    title: string;
+    children: string;
+};
+
+export function InfoSection({ title, children }: InfoSectionProps) {
+    return (
+        <section className={styles.container}>
+            <Heading as="h3" size="sm" weight="normal">
+                {title}
+            </Heading>
+            <Text weight="medium" color="muted">
+                {children}
+            </Text>
+        </section>
+    );
+}