@iota/dapp-kit 0.0.0-dev-20251015065834

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

package/src/components/connect-modal/views/ConnectionStatus.css.ts

@@ -0,0 +1,37 @@
+// 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 container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    overflowY: 'auto',
+});
+
+export const walletIcon = style({
+    objectFit: 'cover',
+    width: 72,
+    height: 72,
+    borderRadius: themeVars.radii.large,
+});
+
+export const title = style({
+    marginTop: 12,
+});
+
+export const connectionStatus = style({
+    marginTop: 4,
+});
+
+export const retryButtonContainer = style({
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+});

package/src/components/connect-modal/views/ConnectionStatus.tsx

@@ -0,0 +1,55 @@
+// 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 { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { Text } from '../../ui/Text.js';
+import * as styles from './ConnectionStatus.css.js';
+
+type ConnectionStatusProps = {
+    selectedWallet: WalletWithRequiredFeatures;
+    hadConnectionError: boolean;
+    onRetryConnection: (selectedWallet: WalletWithRequiredFeatures) => void;
+};
+
+export function ConnectionStatus({
+    selectedWallet,
+    hadConnectionError,
+    onRetryConnection,
+}: ConnectionStatusProps) {
+    return (
+        <div className={styles.container}>
+            <img
+                className={styles.walletIcon}
+                src={selectedWallet.icon}
+                alt={`${selectedWallet.name} logo`}
+            />
+            <div className={styles.title}>
+                <Heading as="h2" size="xl">
+                    Opening {selectedWallet.name}
+                </Heading>
+            </div>
+            <div className={styles.connectionStatus}>
+                {hadConnectionError ? (
+                    <Text color="danger">Connection failed</Text>
+                ) : (
+                    <Text color="muted">Confirm connection in the wallet...</Text>
+                )}
+            </div>
+            {hadConnectionError ? (
+                <div className={styles.retryButtonContainer}>
+                    <Button
+                        type="button"
+                        variant="primary"
+                        onClick={() => onRetryConnection(selectedWallet)}
+                    >
+                        Retry Connection
+                    </Button>
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/connect-modal/views/GetTheWallet.css.ts

@@ -0,0 +1,38 @@
+// 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 container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: themeVars.spacing.medium,
+    height: '100%',
+    gap: themeVars.spacing.xlarge,
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: themeVars.spacing.medium,
+});
+
+export const text = style({
+    fontSize: themeVars.fontSizes.medium,
+    textAlign: 'center',
+    color: themeVars.colors.body,
+});
+
+export const button = style({
+    display: 'flex',
+    alignItems: 'center',
+    gap: themeVars.spacing.xsmall,
+});
+
+export const icon = style({
+    color: themeVars.colors.body,
+});

package/src/components/connect-modal/views/GetTheWallet.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { WALLET_DOWNLOAD_URL } from '../../../constants/walletDefaults.js';
+import { ArrowTopRightIcon } from '../../icons/ArrowTopRightIcon.js';
+import { IotaIcon } from '../../icons/IotaIcon.js';
+import { Button } from '../../ui/Button.js';
+import * as styles from './GetTheWallet.css.js';
+
+export function GetTheWalletView() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>
+                <IotaIcon className={styles.icon} width={48} height={48} />
+                <p className={styles.text}>Don't have a wallet yet?</p>
+            </div>
+            <a href={WALLET_DOWNLOAD_URL} target="_blank" rel="noopener noreferrer">
+                <Button size="md" variant="primary" className={styles.button}>
+                    Get the IOTA wallet
+                    <ArrowTopRightIcon width={16} height={16} />
+                </Button>
+            </a>
+        </div>
+    );
+}

package/src/components/connect-modal/views/GettingStarted.css.ts

@@ -0,0 +1,29 @@
+// 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',
+    alignItems: 'center',
+    overflowY: 'auto',
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    gap: 20,
+    padding: 40,
+    paddingBottom: 60,
+    overflow: 'auto',
+});
+
+export const installButtonContainer = style({
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+});

package/src/components/connect-modal/views/GettingStarted.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './GettingStarted.css.js';
+
+export function GettingStarted() {
+    return (
+        <div className={styles.container}>
+            <Heading as="h2">Get Started with IOTA</Heading>
+            <div className={styles.content}>
+                <InfoSection title="Install the IOTA Wallet Extension">
+                    We recommend pinning IOTA Wallet to your taskbar for quicker access.
+                </InfoSection>
+                <InfoSection title="Create or Import a Wallet">
+                    Be sure to back up your wallet using a secure method. Never share your secret
+                    phrase with anyone.
+                </InfoSection>
+                <InfoSection title="Refresh Your Browser">
+                    Once you set up your wallet, refresh this window browser to load up the
+                    extension.
+                </InfoSection>
+                <div className={styles.installButtonContainer}>
+                    <Button variant="primary" asChild>
+                        <a
+                            href="https://chrome.google.com/webstore/detail/iota-wallet/iidjkmdceolghepehaaddojmnjnkkija"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Install Wallet Extension
+                        </a>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/connect-modal/views/WhatIsAWallet.css.ts

@@ -0,0 +1,21 @@
+// 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',
+    alignItems: 'center',
+});
+
+export const content = style({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    gap: 20,
+    padding: 40,
+    overflowY: 'auto',
+});

package/src/components/connect-modal/views/WhatIsAWallet.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Heading } from '../../ui/Heading.js';
+import { InfoSection } from '../InfoSection.js';
+import * as styles from './WhatIsAWallet.css.js';
+
+export function WhatIsAWallet() {
+    return (
+        <div className={styles.container}>
+            <Heading as="h2">What is a Wallet</Heading>
+            <div className={styles.content}>
+                <InfoSection title="Easy Login">
+                    No need to create new accounts and passwords for every website. Just connect
+                    your wallet and get going.
+                </InfoSection>
+                <InfoSection title="Store your Digital Assets">
+                    Send, receive, store, and display your digital assets like NFTs & coins.
+                </InfoSection>
+            </div>
+        </div>
+    );
+}

package/src/components/connect-modal/views/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ConnectionStatus.js';
+export * from './WhatIsAWallet.js';
+export * from './GetTheWallet.js';

package/src/components/connect-modal/wallet-list/WalletList.css.ts

@@ -0,0 +1,17 @@
+// 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 container = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    overflowY: 'auto',
+});
+
+export const icon = style({
+    color: themeVars.colors.body,
+});

package/src/components/connect-modal/wallet-list/WalletList.tsx

@@ -0,0 +1,43 @@
+// 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 { useWallets } from '../../../hooks/wallet/useWallets.js';
+import { getWalletUniqueIdentifier } from '../../../utils/walletUtils.js';
+import { IotaIcon } from '../../icons/IotaIcon.js';
+import * as styles from './WalletList.css.js';
+import { WalletListItem } from './WalletListItem.js';
+
+type WalletListProps = {
+    selectedWalletName?: string;
+    onPlaceholderClick: () => void;
+    onSelect: (wallet: WalletWithRequiredFeatures) => void;
+};
+
+export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }: WalletListProps) {
+    const wallets = useWallets();
+    return (
+        <ul className={styles.container}>
+            {wallets.length > 0 ? (
+                wallets.map((wallet) => (
+                    <WalletListItem
+                        key={getWalletUniqueIdentifier(wallet)}
+                        name={wallet.name}
+                        icon={wallet.icon}
+                        isSelected={getWalletUniqueIdentifier(wallet) === selectedWalletName}
+                        onClick={() => onSelect(wallet)}
+                    />
+                ))
+            ) : (
+                <WalletListItem
+                    name="IOTA Wallet"
+                    icon={<IotaIcon className={styles.icon} />}
+                    onClick={onPlaceholderClick}
+                    isSelected
+                />
+            )}
+        </ul>
+    );
+}

package/src/components/connect-modal/wallet-list/WalletListItem.css.ts

@@ -0,0 +1,36 @@
+// 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 container = style({
+    display: 'flex',
+});
+
+export const walletItem = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    padding: 8,
+    gap: 8,
+    borderRadius: themeVars.radii.large,
+    ':hover': {
+        backgroundColor: themeVars.backgroundColors.walletItemHover,
+    },
+});
+
+export const selectedWalletItem = style({
+    backgroundColor: themeVars.backgroundColors.walletItemSelected,
+    boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+});
+
+export const walletIcon = style({
+    width: 28,
+    height: 28,
+    flexShrink: 0,
+    objectFit: 'cover',
+    borderRadius: themeVars.radii.small,
+});

package/src/components/connect-modal/wallet-list/WalletListItem.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+
+import { Heading } from '../../ui/Heading.js';
+import * as styles from './WalletListItem.css.js';
+
+type WalletListItemProps = {
+    name: string;
+    icon: ReactNode;
+    isSelected?: boolean;
+    onClick: () => void;
+};
+
+export function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {
+    return (
+        <li className={styles.container}>
+            <button
+                className={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}
+                type="button"
+                onClick={onClick}
+            >
+                {typeof icon === 'string' ? (
+                    <img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
+                ) : (
+                    icon
+                )}
+                <Heading size="md" truncate asChild>
+                    <div>{name}</div>
+                </Heading>
+            </button>
+        </li>
+    );
+}

package/src/components/icons/ArrowRightIcon.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function ArrowRightIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                d="m10.707 6.293 5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L13.586 12 9.293 7.707a1 1 0 0 1 1.414-1.414Z"
+            />
+        </svg>
+    );
+}

package/src/components/icons/ArrowTopRightIcon.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+
+export function ArrowTopRightIcon(props: ComponentProps<'svg'>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path
+                d="M17.4825 6.29014C17.3873 6.19563 17.2778 6.12421 17.161 6.07588C17.0431 6.02699 16.9138 6 16.7782 6L8.70711 6C8.15482 6 7.70711 6.44772 7.70711 7C7.70711 7.55228 8.15482 8 8.70711 8L14.364 8L6.29289 16.0711C5.90237 16.4616 5.90237 17.0948 6.29289 17.4853C6.68342 17.8758 7.31658 17.8758 7.70711 17.4853L15.7782 9.41421V15.0711C15.7782 15.6234 16.2259 16.0711 16.7782 16.0711C17.3305 16.0711 17.7782 15.6234 17.7782 15.0711L17.7782 7.0008C17.7782 6.86458 17.7509 6.73391 17.7016 6.61556C17.6531 6.49895 17.5816 6.38966 17.487 6.29464L17.4853 6.29289L17.4825 6.29014Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}