@iota/dapp-kit 0.2.0 → 0.3.0

package/src/components/WalletProvider.tsx

@@ -9,9 +9,9 @@ import type { StateStorage } from 'zustand/middleware';
 
 import {
     DEFAULT_PREFERRED_WALLETS,
-    DEFAULT_REQUIRED_FEATURES,
     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';
@@ -19,29 +19,18 @@ 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 { DynamicTheme, Theme } from '../themes/themeContract.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';
-import { darkTheme } from '../themes/darkTheme.js';
-
-const themeWithSelectorAndMediaQuery: DynamicTheme[] = [
-    {
-        selector: '.dark',
-        variables: darkTheme,
-    },
-    {
-        variables: lightTheme,
-    },
-];
 
 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 list of features that are 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. */
-    requiredFeatures?: (keyof WalletWithRequiredFeatures['features'])[];
+    /** 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;
@@ -65,18 +54,18 @@ export type { WalletWithFeatures };
 
 export function WalletProvider({
     preferredWallets = DEFAULT_PREFERRED_WALLETS,
-    requiredFeatures = DEFAULT_REQUIRED_FEATURES,
+    walletFilter = DEFAULT_WALLET_FILTER,
     storage = DEFAULT_STORAGE,
     storageKey = DEFAULT_STORAGE_KEY,
     enableUnsafeBurner = false,
     autoConnect = false,
-    theme = themeWithSelectorAndMediaQuery,
+    theme = lightTheme,
     children,
 }: WalletProviderProps) {
     const storeRef = useRef(
         createWalletStore({
             autoConnectEnabled: autoConnect,
-            wallets: getRegisteredWallets(preferredWallets, requiredFeatures),
+            wallets: getRegisteredWallets(preferredWallets, walletFilter),
             storage: storage || createInMemoryStore(),
             storageKey,
         }),
@@ -86,7 +75,7 @@ export function WalletProvider({
         <WalletContext.Provider value={storeRef.current}>
             <WalletConnectionManager
                 preferredWallets={preferredWallets}
-                requiredFeatures={requiredFeatures}
+                walletFilter={walletFilter}
                 enableUnsafeBurner={enableUnsafeBurner}
             >
                 {/* TODO: We ideally don't want to inject styles if people aren't using the UI components */}
@@ -99,16 +88,16 @@ export function WalletProvider({
 
 type WalletConnectionManagerProps = Pick<
     WalletProviderProps,
-    'preferredWallets' | 'requiredFeatures' | 'enableUnsafeBurner' | 'children'
+    'preferredWallets' | 'walletFilter' | 'enableUnsafeBurner' | 'children'
 >;
 
 function WalletConnectionManager({
     preferredWallets = DEFAULT_PREFERRED_WALLETS,
-    requiredFeatures = DEFAULT_REQUIRED_FEATURES,
+    walletFilter = DEFAULT_WALLET_FILTER,
     enableUnsafeBurner = false,
     children,
 }: WalletConnectionManagerProps) {
-    useWalletsChanged(preferredWallets, requiredFeatures);
+    useWalletsChanged(preferredWallets, walletFilter);
     useWalletPropertiesChanged();
     useUnsafeBurnerWallet(enableUnsafeBurner);
     useAutoConnectWallet();

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

@@ -15,16 +15,7 @@ export const overlay = style({
 });
 
 export const title = style({
-    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%',
+    paddingLeft: 8,
 });
 
 export const content = style({
@@ -32,18 +23,20 @@ export const content = style({
     borderRadius: themeVars.radii.xlarge,
     color: themeVars.colors.body,
     position: 'fixed',
-    top: 0,
-    left: '50%',
+    bottom: 16,
+    left: 16,
+    right: 16,
     display: 'flex',
     flexDirection: 'column',
+    justifyContent: 'space-between',
     overflow: 'hidden',
     minHeight: '50vh',
     maxHeight: '85vh',
-    width: '330px',
-    transform: 'translate(-50%, 100%)',
+    maxWidth: 700,
     '@media': {
         'screen and (min-width: 768px)': {
             flexDirection: 'row',
+            width: '100%',
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
@@ -51,6 +44,31 @@ 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,
@@ -71,10 +89,9 @@ export const closeButtonContainer = style({
 export const walletListContent = style({
     display: 'flex',
     flexDirection: 'column',
-    width: '100%',
     flexGrow: 1,
-    gap: themeVars.spacing.medium,
-    padding: themeVars.spacing.medium,
+    gap: 24,
+    padding: 20,
     backgroundColor: themeVars.backgroundColors.modalPrimary,
     '@media': {
         'screen and (min-width: 768px)': {
@@ -82,3 +99,27 @@ 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,17 +2,26 @@
 // 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 { useWallets } from '../../hooks/wallet/useWallets.js';
-import { WalletConnectListView } from './views/WalletConnect.js';
-import { GetTheWalletView } from './views/GetTheWallet.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. */
@@ -39,14 +48,55 @@ 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>
@@ -54,19 +104,54 @@ export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: Conne
                 <StyleMarker>
                     <Dialog.Overlay className={styles.overlay}>
                         <Dialog.Content className={styles.content} aria-describedby={undefined}>
-                            <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
+                                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);
+                                            }
+                                        }}
                                     />
-                                ) : (
-                                    <GetTheWalletView />
-                                )}
+                                </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">

package/src/components/connect-modal/views/ConnectionStatus.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',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+});
+
+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="outline"
+                        onClick={() => onRetryConnection(selectedWallet)}
+                    >
+                        Retry Connection
+                    </Button>
+                </div>
+            ) : null}
+        </div>
+    );
+}

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

@@ -0,0 +1,26 @@
+// 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,
+});
+
+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="outline" asChild>
+                        <a
+                            href="https://chrome.google.com/webstore/detail/iota-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Install Wallet Extension
+                        </a>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,20 @@
+// 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,
+});

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

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

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

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

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

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