@miden-sdk/miden-wallet-adapter-reactui 0.13.0

package/src/WalletModal.tsx

@@ -0,0 +1,281 @@
+import type { FC, MouseEvent } from 'react';
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  AllowedPrivateData,
+  PrivateDataPermission,
+  WalletAdapterNetwork,
+  WalletName,
+  WalletReadyState,
+} from '@miden-sdk/miden-wallet-adapter-base';
+import { useWallet, Wallet } from '@miden-sdk/miden-wallet-adapter-react';
+import { useWalletModal } from './useWalletModal';
+import { WalletListItem } from './WalletListItem';
+import { DiscoverMidenMessage } from './DiscoverMidenMessage';
+
+export interface WalletModalProps {
+  className?: string;
+  container?: string;
+  privateDataPermission?: PrivateDataPermission;
+  network?: WalletAdapterNetwork;
+  allowedPrivateData?: AllowedPrivateData;
+}
+
+export const WalletModal: FC<WalletModalProps> = ({
+  className = '',
+  container = 'body',
+  privateDataPermission,
+  network,
+  allowedPrivateData,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { wallets, select, connect, wallet } = useWallet();
+  const { setVisible } = useWalletModal();
+  const [fadeIn, setFadeIn] = useState(false);
+  const [portal, setPortal] = useState<Element | null>(null);
+
+  const [installedWallets, otherWallets] = useMemo(() => {
+    const installed: Wallet[] = [];
+    const notDetected: Wallet[] = [];
+    const loadable: Wallet[] = [];
+
+    for (const wallet of wallets) {
+      if (wallet.readyState === WalletReadyState.NotDetected) {
+        notDetected.push(wallet);
+      } else if (wallet.readyState === WalletReadyState.Loadable) {
+        loadable.push(wallet);
+      } else if (wallet.readyState === WalletReadyState.Installed) {
+        installed.push(wallet);
+      }
+    }
+
+    return [installed, [...loadable, ...notDetected]];
+  }, [wallets]);
+
+  const getStartedWallet = useMemo(() => {
+    return installedWallets.length
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        installedWallets[0]!
+      : wallets.find(
+          (wallet: { adapter: { name: WalletName } }) =>
+            wallet.adapter.name === 'Miden Wallet'
+        ) ||
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          otherWallets[0]!;
+  }, [installedWallets, wallets, otherWallets]);
+
+  const otherInstalledWallets = useMemo(() => {
+    return installedWallets.filter(
+      (wallet) => wallet.adapter.name !== getStartedWallet.adapter.name
+    );
+  }, [installedWallets, getStartedWallet]);
+
+  const hideModal = useCallback(() => {
+    setFadeIn(false);
+    setTimeout(() => setVisible(false), 150);
+  }, [setVisible]);
+
+  const handleClose = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      hideModal();
+    },
+    [hideModal]
+  );
+
+  const handleWalletClick = useCallback(
+    (event: MouseEvent, walletName: WalletName) => {
+      select(walletName);
+      handleClose(event);
+    },
+    [select, handleClose]
+  );
+
+  const handleTabKey = useCallback(
+    (event: KeyboardEvent) => {
+      const node = ref.current;
+      if (!node) return;
+
+      // here we query all focusable elements
+      const focusableElements = node.querySelectorAll('button');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const firstElement = focusableElements[0]!;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const lastElement = focusableElements[focusableElements.length - 1]!;
+
+      if (event.shiftKey) {
+        // if going backward by pressing tab and firstElement is active, shift focus to last focusable element
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          event.preventDefault();
+        }
+      } else {
+        // if going forward by pressing tab and lastElement is active, shift focus to first focusable element
+        if (document.activeElement === lastElement) {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      }
+    },
+    [ref]
+  );
+
+  useLayoutEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        hideModal();
+      } else if (event.key === 'Tab') {
+        handleTabKey(event);
+      }
+    };
+
+    // Get original overflow
+    const { overflow } = window.getComputedStyle(document.body);
+    // Hack to enable fade in animation after mount
+    setTimeout(() => setFadeIn(true), 0);
+    // Prevent scrolling on mount
+    document.body.style.overflow = 'hidden';
+    // Listen for keydown events
+    window.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      // Re-enable scrolling when component unmounts
+      document.body.style.overflow = overflow;
+      window.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [hideModal, handleTabKey]);
+
+  useLayoutEffect(
+    () => setPortal(document.querySelector(container)),
+    [container]
+  );
+
+  useLayoutEffect(() => {
+    if (wallet) {
+      connect(
+        privateDataPermission || PrivateDataPermission.UponRequest,
+        network || WalletAdapterNetwork.Testnet,
+        allowedPrivateData ?? AllowedPrivateData.None
+      ).catch((e) => {
+        console.log({ e });
+      });
+    }
+  }, [wallet, privateDataPermission, network, allowedPrivateData, connect]);
+
+  return (
+    portal &&
+    createPortal(
+      <div
+        aria-labelledby="wallet-adapter-modal-title"
+        aria-modal="true"
+        className={`wallet-adapter-modal ${
+          fadeIn && 'wallet-adapter-modal-fade-in'
+        } ${className}`}
+        ref={ref}
+        role="dialog"
+      >
+        <div className="wallet-adapter-modal-container">
+          <div className="wallet-adapter-modal-wrapper">
+            <div className="wallet-adapter-modal-title">
+              Connect a Wallet
+              <button
+                onClick={handleClose}
+                className="wallet-adapter-modal-button-close"
+              >
+                <svg width="14" height="14">
+                  <path d="M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" />
+                </svg>
+              </button>
+            </div>
+            {installedWallets.length ? (
+              <>
+                <div className="wallet-adapter-modal-content">
+                  Connect your Miden Wallet and start exploring its powerful
+                  features now!
+                  <hr />
+                </div>
+                <ul className="wallet-adapter-modal-list">
+                  <span className="wallet-adapter-modal-list-section-title">
+                    Recommended
+                  </span>
+                  <WalletListItem
+                    key={getStartedWallet.adapter.name}
+                    handleClick={(event) =>
+                      handleWalletClick(event, getStartedWallet.adapter.name)
+                    }
+                    wallet={getStartedWallet}
+                  />
+                  {(otherInstalledWallets.length > 0 ||
+                    otherWallets.length > 0) && (
+                    <>
+                      <hr />
+                      <span className="wallet-adapter-modal-list-section-title">
+                        Other wallets
+                      </span>
+                      {otherInstalledWallets.map((wallet) => (
+                        <WalletListItem
+                          key={wallet.adapter.name}
+                          handleClick={(event) =>
+                            handleWalletClick(event, wallet.adapter.name)
+                          }
+                          wallet={wallet}
+                        />
+                      ))}
+                      {otherWallets.map((wallet) => (
+                        <WalletListItem
+                          key={wallet.adapter.name}
+                          handleClick={(event) =>
+                            handleWalletClick(event, wallet.adapter.name)
+                          }
+                          wallet={wallet}
+                        />
+                      ))}
+                    </>
+                  )}
+                </ul>
+              </>
+            ) : (
+              <>
+                <div className="wallet-adapter-modal-middle">
+                  <DiscoverMidenMessage />
+                  <button
+                    type="button"
+                    className="wallet-adapter-modal-middle-button"
+                    onClick={(event) =>
+                      handleWalletClick(event, getStartedWallet.adapter.name)
+                    }
+                  >
+                    Install Miden Wallet
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="25"
+                      height="24"
+                      viewBox="0 0 25 24"
+                      fill="none"
+                    >
+                      <path
+                        d="M10.1003 5L8.5 6.5745L13.6981 11.7L8.5 16.8255L10.1003 18.4L16.91 11.7L10.1003 5Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+        <div
+          className="wallet-adapter-modal-overlay"
+          onMouseDown={handleClose}
+        />
+      </div>,
+      portal
+    )
+  );
+};

package/src/WalletModalButton.tsx

@@ -0,0 +1,23 @@
+import type { FC, MouseEvent } from 'react';
+import { useCallback } from 'react';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+import { useWalletModal } from './useWalletModal';
+
+export const WalletModalButton: FC<ButtonProps> = ({ children = 'Select Wallet', onClick, ...props }) => {
+    const { visible, setVisible } = useWalletModal();
+
+    const handleClick = useCallback(
+        (event: MouseEvent<HTMLButtonElement>) => {
+            if (onClick) onClick(event);
+            if (!event.defaultPrevented) setVisible(!visible);
+        },
+        [onClick, setVisible, visible]
+    );
+
+    return (
+        <Button className="wallet-adapter-button-trigger" onClick={handleClick} {...props}>
+            {children}
+        </Button>
+    );
+};

package/src/WalletModalProvider.tsx

@@ -0,0 +1,25 @@
+import type { FC, ReactNode } from 'react';
+import React, { useState } from 'react';
+import { WalletModalContext } from './useWalletModal';
+import type { WalletModalProps } from './WalletModal';
+import { WalletModal } from './WalletModal';
+
+export interface WalletModalProviderProps extends WalletModalProps {
+    children: ReactNode;
+}
+
+export const WalletModalProvider: FC<WalletModalProviderProps> = ({ children, ...props }) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <WalletModalContext.Provider
+            value={{
+                visible,
+                setVisible,
+            }}
+        >
+            {children}
+            {visible && <WalletModal {...props} />}
+        </WalletModalContext.Provider>
+    );
+};

package/src/WalletMultiButton.tsx

@@ -0,0 +1,130 @@
+import type { FC } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useWallet } from '@miden-sdk/miden-wallet-adapter-react';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+import { useWalletModal } from './useWalletModal';
+import { WalletConnectButton } from './WalletConnectButton';
+import { WalletIcon } from './WalletIcon';
+import { WalletModalButton } from './WalletModalButton';
+
+export const WalletMultiButton: FC<ButtonProps> = ({ children, ...props }) => {
+  const { address, wallet, disconnect } = useWallet();
+  const { setVisible } = useWalletModal();
+  const [copied, setCopied] = useState(false);
+  const [active, setActive] = useState(false);
+  const ref = useRef<HTMLUListElement>(null);
+
+  const content = useMemo(() => {
+    if (children) return children;
+    if (!wallet || !address) return null;
+
+    const underscoreIndex = address.indexOf('_');
+    const frontPart = address.slice(0, 6);
+    const middlePart = address.slice(underscoreIndex - 4, underscoreIndex);
+    return `${frontPart}...${middlePart}`;
+  }, [children, wallet, address]);
+
+  const copyAddress = useCallback(async () => {
+    if (address) {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 400);
+    }
+  }, [address]);
+
+  const openDropdown = useCallback(() => {
+    setActive(true);
+  }, []);
+
+  const closeDropdown = useCallback(() => {
+    setActive(false);
+  }, []);
+
+  const openModal = useCallback(() => {
+    setVisible(true);
+    closeDropdown();
+  }, [setVisible, closeDropdown]);
+
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const node = ref.current;
+
+      // Do nothing if clicking dropdown or its descendants
+      if (!node || node.contains(event.target as Node)) return;
+
+      closeDropdown();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, closeDropdown]);
+
+  if (!wallet)
+    return <WalletModalButton {...props}>{children}</WalletModalButton>;
+  if (!address)
+    return <WalletConnectButton {...props}>{children}</WalletConnectButton>;
+
+  return (
+    <div className="wallet-adapter-dropdown">
+      <Button
+        aria-expanded={active}
+        className="wallet-adapter-button-trigger"
+        style={{
+          pointerEvents: active ? 'none' : 'auto',
+          width: '100%',
+          backgroundColor: '#FFFFFF',
+          border: '1px solid #D7D7D7',
+          color: 'black',
+          ...props.style
+        }}
+        onClick={openDropdown}
+        startIcon={<WalletIcon wallet={wallet} />}
+        {...props}
+      >
+        {content}
+      </Button>
+      <ul
+        aria-label="dropdown-list"
+        className={`wallet-adapter-dropdown-list ${
+          active && 'wallet-adapter-dropdown-list-active'
+        }`}
+        ref={ref}
+        role="menu"
+      >
+        <li
+          onClick={copyAddress}
+          className="wallet-adapter-dropdown-list-item"
+          role="menuitem"
+        >
+          {copied ? 'Copied' : 'Copy address'}
+        </li>
+        <li
+          onClick={openModal}
+          className="wallet-adapter-dropdown-list-item"
+          role="menuitem"
+        >
+          Change wallet
+        </li>
+        <li
+          onClick={disconnect}
+          className="wallet-adapter-dropdown-list-item"
+          role="menuitem"
+        >
+          Disconnect
+        </li>
+      </ul>
+    </div>
+  );
+};