@iota/dapp-kit 0.1.1 → 0.2.0

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

@@ -15,7 +15,16 @@ export const overlay = style({
 });
 
 export const title = style({
-    paddingLeft: 8,
+    color: themeVars.colors.body,
+    fontSize: themeVars.fontSizes.xlarge,
+    fontWeight: themeVars.fontWeights.medium,
+    margin: 0,
+});
+
+export const separator = style({
+    height: 1,
+    backgroundColor: themeVars.backgroundColors.dropdownMenuSeparator,
+    width: '100%',
 });
 
 export const content = style({
@@ -23,20 +32,18 @@ export const content = style({
     borderRadius: themeVars.radii.xlarge,
     color: themeVars.colors.body,
     position: 'fixed',
-    bottom: 16,
-    left: 16,
-    right: 16,
+    top: 0,
+    left: '50%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between',
     overflow: 'hidden',
     minHeight: '50vh',
     maxHeight: '85vh',
-    maxWidth: 700,
+    width: '330px',
+    transform: 'translate(-50%, 100%)',
     '@media': {
         'screen and (min-width: 768px)': {
             flexDirection: 'row',
-            width: '100%',
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
@@ -44,31 +51,6 @@ export const content = style({
     },
 });
 
-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,
@@ -89,9 +71,10 @@ export const closeButtonContainer = style({
 export const walletListContent = style({
     display: 'flex',
     flexDirection: 'column',
+    width: '100%',
     flexGrow: 1,
-    gap: 24,
-    padding: 20,
+    gap: themeVars.spacing.medium,
+    padding: themeVars.spacing.medium,
     backgroundColor: themeVars.backgroundColors.modalPrimary,
     '@media': {
         'screen and (min-width: 768px)': {
@@ -99,27 +82,3 @@ export const walletListContent = style({
         },
     },
 });
-
-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

@@ -2,26 +2,17 @@
 // 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';
+import { useWallets } from '../../hooks/wallet/useWallets.js';
+import { WalletConnectListView } from './views/WalletConnect.js';
+import { GetTheWalletView } from './views/GetTheWallet.js';
 
 type ControlledModalProps = {
     /** The controlled open state of the dialog. */
@@ -48,55 +39,14 @@ type ConnectModalProps = {
 } & (ControlledModalProps | UncontrolledModalProps);
 
 export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: ConnectModalProps) {
+    const wallets = useWallets();
     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 },
-            {
-                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>
@@ -104,54 +54,19 @@ export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: Conne
                 <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 className={styles.walletListContent}>
+                                <Dialog.Title className={styles.title} asChild>
+                                    <Heading as="h2">Connect a Wallet</Heading>
+                                </Dialog.Title>
+                                <div className={styles.separator} />
+                                {wallets?.length ? (
+                                    <WalletConnectListView
+                                        wallets={wallets}
+                                        onOpenChange={handleOpenChange}
                                     />
-                                </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}
+                                ) : (
+                                    <GetTheWalletView />
+                                )}
                             </div>
                             <Dialog.Close className={styles.closeButtonContainer} asChild>
                                 <IconButton type="button" aria-label="Close">

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/WalletConnect.css.ts

@@ -0,0 +1,55 @@
+// 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 walletConnectContainer = style({
+    height: '100%',
+    width: '100%',
+    overflow: 'auto',
+});
+
+export const walletConnectFooter = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: themeVars.spacing.small,
+});
+
+export const errorContainer = style({
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: themeVars.spacing.small,
+});
+
+export const errorMessage = style({
+    fontSize: themeVars.fontSizes.small,
+    color: themeVars.colors.bodyDanger,
+});
+
+export const successContainer = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: themeVars.spacing.small,
+});
+
+export const openingText = style({
+    fontSize: themeVars.fontSizes.small,
+    color: themeVars.colors.bodyMuted,
+});
+
+export const confirmText = style({
+    fontSize: themeVars.fontSizes.medium,
+    color: themeVars.colors.body,
+});
+
+export const separator = style({
+    height: 1,
+    backgroundColor: themeVars.backgroundColors.dropdownMenuSeparator,
+    width: '100%',
+});

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

@@ -0,0 +1,79 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletWithRequiredFeatures } from '@iota/wallet-standard';
+import { useState } from 'react';
+import { getWalletUniqueIdentifier } from '../../../utils/walletUtils.js';
+import { useConnectWallet } from '../../../hooks/wallet/useConnectWallet.js';
+import { WalletList } from '../wallet-list/WalletList.js';
+import * as styles from './WalletConnect.css.js';
+import { Button } from '../../ui/Button.js';
+
+interface WalletConnectListViewProps {
+    wallets: WalletWithRequiredFeatures[];
+    onOpenChange: (isOpen: boolean) => void;
+}
+export function WalletConnectListView({ wallets, onOpenChange }: WalletConnectListViewProps) {
+    const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
+    const { mutate, isError } = useConnectWallet();
+    function handleSelectWallet(wallet: WalletWithRequiredFeatures) {
+        if (getWalletUniqueIdentifier(selectedWallet) !== getWalletUniqueIdentifier(wallet)) {
+            setSelectedWallet(wallet);
+            connectWallet(wallet);
+        }
+    }
+    function resetSelection() {
+        setSelectedWallet(undefined);
+    }
+
+    function handleOpenChange(open: boolean) {
+        if (!open) {
+            resetSelection();
+        }
+        onOpenChange(open);
+    }
+
+    function connectWallet(wallet: WalletWithRequiredFeatures) {
+        mutate(
+            { wallet },
+            {
+                onSuccess: () => handleOpenChange(false),
+            },
+        );
+    }
+    return (
+        <>
+            <div className={styles.walletConnectContainer}>
+                <WalletList
+                    selectedWalletName={getWalletUniqueIdentifier(selectedWallet)}
+                    onSelect={handleSelectWallet}
+                    wallets={wallets}
+                />
+            </div>
+            {selectedWallet && (
+                <div className={styles.walletConnectFooter}>
+                    {isError ? (
+                        <div className={styles.errorContainer}>
+                            <p className={styles.errorMessage}>Connection failed</p>
+                            <Button
+                                size="md"
+                                variant="outline"
+                                onClick={() => connectWallet(selectedWallet)}
+                            >
+                                Retry
+                            </Button>
+                        </div>
+                    ) : (
+                        <div className={styles.successContainer}>
+                            <p className={styles.openingText}>Opening {selectedWallet.name}...</p>
+                            <div className={styles.separator} />
+                            <p className={styles.confirmText}>
+                                Please confirm the connection in your wallet
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </>
+    );
+}

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

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

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

@@ -3,9 +3,13 @@
 // 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,
+    gap: themeVars.spacing.xsmall,
+    height: '100%',
+    width: '100%',
+    maxHeight: '330px',
 });

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

@@ -3,41 +3,27 @@
 // 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 = {
+interface WalletListProps {
     selectedWalletName?: string;
-    onPlaceholderClick: () => void;
     onSelect: (wallet: WalletWithRequiredFeatures) => void;
-};
-
-export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }: WalletListProps) {
-    const wallets = useWallets();
+    wallets: WalletWithRequiredFeatures[];
+}
+export function WalletList({ selectedWalletName, onSelect, wallets }: WalletListProps) {
     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)}
-                    />
-                ))
-            ) : (
+            {wallets.map((wallet) => (
                 <WalletListItem
-                    name="Iota Wallet"
-                    icon={<IotaIcon />}
-                    onClick={onPlaceholderClick}
-                    isSelected
+                    key={getWalletUniqueIdentifier(wallet)}
+                    name={wallet.name}
+                    icon={wallet.icon}
+                    isSelected={getWalletUniqueIdentifier(wallet) === selectedWalletName}
+                    onClick={() => onSelect(wallet)}
                 />
-            )}
+            ))}
         </ul>
     );
 }

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

@@ -3,28 +3,36 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { style } from '@vanilla-extract/css';
-
 import { themeVars } from '../../../themes/themeContract.js';
 
 export const container = style({
     display: 'flex',
+    width: '100%',
 });
 
 export const walletItem = style({
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
     flexGrow: 1,
-    padding: 8,
-    gap: 8,
+    padding: themeVars.spacing.medium,
     borderRadius: themeVars.radii.large,
     ':hover': {
-        backgroundColor: themeVars.backgroundColors.walletItemHover,
+        backgroundColor: themeVars.backgroundColors.primaryButtonHover,
     },
 });
 
 export const selectedWalletItem = style({
-    backgroundColor: themeVars.backgroundColors.walletItemSelected,
-    boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+    border: `1px solid ${themeVars.borderColors.outlineButton}`,
+    borderRadius: themeVars.radii.large,
+});
+
+export const walletName = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: themeVars.spacing.small,
 });
 
 export const walletIcon = style({

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

@@ -4,9 +4,9 @@
 
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
-
 import { Heading } from '../../ui/Heading.js';
 import * as styles from './WalletListItem.css.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
 
 type WalletListItemProps = {
     name: string;
@@ -23,14 +23,17 @@ export function WalletListItem({ name, icon, onClick, isSelected = false }: Wall
                 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>
+                <div className={clsx(styles.walletName)}>
+                    {typeof icon === 'string' ? (
+                        <img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
+                    ) : (
+                        icon
+                    )}
+                    <Heading size="md" truncate asChild>
+                        <div>{name}</div>
+                    </Heading>
+                </div>
+                <ArrowRightIcon />
             </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>
+    );
+}