@miden-sdk/miden-wallet-adapter-reactui 0.16.2 → 0.17.0-rc.2

package/src/WalletModal.tsx

@@ -1,266 +0,0 @@
-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 { MidenWalletName } from "@miden-sdk/miden-wallet-adapter-miden";
-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 === MidenWalletName
-        ) ||
-          // 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 Bread 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 />
-                  <a
-                    href={getStartedWallet.adapter.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="wallet-adapter-modal-chrome-badge"
-                  >
-                    <img
-                      src="https://developer.chrome.com/static/docs/webstore/branding/image/HRs9MPufa1J1h5glNhut.png"
-                      alt="Available in the Chrome Web Store"
-                    />
-                  </a>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-        <div
-          className="wallet-adapter-modal-overlay"
-          onMouseDown={handleClose}
-        />
-      </div>,
-      portal
-    )
-  );
-};

package/src/WalletModalButton.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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