@miden-sdk/miden-wallet-adapter-reactui 0.17.3 → 0.17.5

package/AGENTS.md

@@ -58,7 +58,14 @@ network and permissions on `WalletProvider` or `MidenFiSignerProvider`.
 **The modal connects on its own.** `WalletModal` fires `connect()` from a
 layout effect whenever a wallet is selected, so opening it with a selection
 already stored starts a handshake immediately, and selecting an entry connects
-rather than just recording a choice.
+rather than just recording a choice. Bread while `Loadable` is the exception.
+In a phone browser the modal shows an "Open in Bread" button in place of the
+Chrome Web Store badge, and tapping it, or Bread's entry in the list, selects
+Bread and calls its `openInBread()` inside the tap, because the handoff to the
+Bread app only works from a tap. If the wallet turns out to be injected
+already, the adapter moves to `Installed` and the modal connects it through
+the provider like any other. Any other `Loadable` wallet is selected like the
+rest.
 
 **`WalletModalProvider` mounts the modal only while visible.** Open it with
 `useWalletModal().setVisible(true)`. While open, page scroll is locked, Escape

package/dist/WalletModal.js

@@ -3,10 +3,13 @@ import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { AllowedPrivateData, PrivateDataPermission, WalletAdapterNetwork, WalletReadyState, } from "@miden-sdk/miden-wallet-adapter-base";
 import { useWallet } from "@miden-sdk/miden-wallet-adapter-react";
-import { MidenWalletName } from "@miden-sdk/miden-wallet-adapter-miden";
+import { MidenWalletName, } from "@miden-sdk/miden-wallet-adapter-miden";
 import { useWalletModal } from "./useWalletModal";
 import { WalletListItem } from "./WalletListItem";
 import { DiscoverMidenMessage } from "./DiscoverMidenMessage";
+function opensInBread({ adapter, readyState }) {
+    return (adapter.name === MidenWalletName && readyState === WalletReadyState.Loadable);
+}
 export const WalletModal = ({ className = "", container = "body", privateDataPermission, network, allowedPrivateData, }) => {
     const ref = useRef(null);
     const { wallets, select, connect, wallet } = useWallet();
@@ -53,6 +56,13 @@ export const WalletModal = ({ className = "", container = "body", privateDataPer
         select(walletName);
         handleClose(event);
     }, [select, handleClose]);
+    const handleOpenInBreadClick = useCallback((event, { adapter }) => {
+        // The browser lets a page open an app only from inside the tap, so the
+        // handoff can't wait for the effect that select() drives.
+        select(adapter.name);
+        adapter.openInBread();
+        handleClose(event);
+    }, [select, handleClose]);
     const handleTabKey = useCallback((event) => {
         const node = ref.current;
         if (!node)
@@ -103,7 +113,8 @@ export const WalletModal = ({ className = "", container = "body", privateDataPer
     }, [hideModal, handleTabKey]);
     useLayoutEffect(() => setPortal(document.querySelector(container)), [container]);
     useLayoutEffect(() => {
-        if (wallet) {
+        // A Loadable Bread is handed off by its Open in Bread button, from the tap.
+        if (wallet && !opensInBread(wallet)) {
             connect(privateDataPermission || PrivateDataPermission.UponRequest, network || WalletAdapterNetwork.Testnet, allowedPrivateData ?? AllowedPrivateData.None).catch((e) => {
                 console.log({ e });
             });
@@ -111,6 +122,8 @@ export const WalletModal = ({ className = "", container = "body", privateDataPer
     }, [wallet, privateDataPermission, network, allowedPrivateData, connect]);
     return (portal &&
         createPortal(_jsxs("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", children: [_jsx("div", { className: "wallet-adapter-modal-container", children: _jsxs("div", { className: "wallet-adapter-modal-wrapper", children: [_jsxs("div", { className: "wallet-adapter-modal-title", children: ["Connect a Wallet", _jsx("button", { onClick: handleClose, className: "wallet-adapter-modal-button-close", children: _jsx("svg", { width: "14", height: "14", children: _jsx("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" }) }) })] }), installedWallets.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "wallet-adapter-modal-content", children: ["Connect your Bread Wallet and start exploring its powerful features now!", _jsx("hr", {})] }), _jsxs("ul", { className: "wallet-adapter-modal-list", children: [_jsx("span", { className: "wallet-adapter-modal-list-section-title", children: "Recommended" }), _jsx(WalletListItem, { handleClick: (event) => handleWalletClick(event, getStartedWallet.adapter.name), wallet: getStartedWallet }, getStartedWallet.adapter.name), (otherInstalledWallets.length > 0 ||
-                                                otherWallets.length > 0) && (_jsxs(_Fragment, { children: [_jsx("hr", {}), _jsx("span", { className: "wallet-adapter-modal-list-section-title", children: "Other wallets" }), otherInstalledWallets.map((wallet) => (_jsx(WalletListItem, { handleClick: (event) => handleWalletClick(event, wallet.adapter.name), wallet: wallet }, wallet.adapter.name))), otherWallets.map((wallet) => (_jsx(WalletListItem, { handleClick: (event) => handleWalletClick(event, wallet.adapter.name), wallet: wallet }, wallet.adapter.name)))] }))] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "wallet-adapter-modal-middle", children: [_jsx(DiscoverMidenMessage, {}), _jsx("a", { href: getStartedWallet.adapter.url, target: "_blank", rel: "noopener noreferrer", className: "wallet-adapter-modal-chrome-badge", children: _jsx("img", { src: "https://developer.chrome.com/static/docs/webstore/branding/image/HRs9MPufa1J1h5glNhut.png", alt: "Available in the Chrome Web Store" }) })] }) }))] }) }), _jsx("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })] }), portal));
+                                                otherWallets.length > 0) && (_jsxs(_Fragment, { children: [_jsx("hr", {}), _jsx("span", { className: "wallet-adapter-modal-list-section-title", children: "Other wallets" }), otherInstalledWallets.map((wallet) => (_jsx(WalletListItem, { handleClick: (event) => handleWalletClick(event, wallet.adapter.name), wallet: wallet }, wallet.adapter.name))), otherWallets.map((wallet) => (_jsx(WalletListItem, { handleClick: (event) => opensInBread(wallet)
+                                                            ? handleOpenInBreadClick(event, wallet)
+                                                            : handleWalletClick(event, wallet.adapter.name), wallet: wallet }, wallet.adapter.name)))] }))] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "wallet-adapter-modal-middle", children: [_jsx(DiscoverMidenMessage, {}), opensInBread(getStartedWallet) ? (_jsx("button", { type: "button", className: "wallet-adapter-modal-middle-button", onClick: (event) => handleOpenInBreadClick(event, getStartedWallet), children: "Open in Bread" })) : (_jsx("a", { href: getStartedWallet.adapter.url, target: "_blank", rel: "noopener noreferrer", className: "wallet-adapter-modal-chrome-badge", children: _jsx("img", { src: "https://developer.chrome.com/static/docs/webstore/branding/image/HRs9MPufa1J1h5glNhut.png", alt: "Available in the Chrome Web Store" }) }))] }) }))] }) }), _jsx("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })] }), portal));
 };
 //# sourceMappingURL=WalletModal.js.map

package/dist/WalletModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletModal.js","sourceRoot":"","sources":["../src/WalletModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC, MouseEvent } from \"react\";\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  AllowedPrivateData,\n  PrivateDataPermission,\n  WalletAdapterNetwork,\n  WalletName,\n  WalletReadyState,\n} from \"@miden-sdk/miden-wallet-adapter-base\";\nimport { useWallet, Wallet } from \"@miden-sdk/miden-wallet-adapter-react\";\nimport { MidenWalletName } from \"@miden-sdk/miden-wallet-adapter-miden\";\nimport { useWalletModal } from \"./useWalletModal\";\nimport { WalletListItem } from \"./WalletListItem\";\nimport { DiscoverMidenMessage } from \"./DiscoverMidenMessage\";\n\nexport interface WalletModalProps {\n  className?: string;\n  container?: string;\n  privateDataPermission?: PrivateDataPermission;\n  network?: WalletAdapterNetwork;\n  allowedPrivateData?: AllowedPrivateData;\n}\n\nexport const WalletModal: FC<WalletModalProps> = ({\n  className = \"\",\n  container = \"body\",\n  privateDataPermission,\n  network,\n  allowedPrivateData,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { wallets, select, connect, wallet } = useWallet();\n  const { setVisible } = useWalletModal();\n  const [fadeIn, setFadeIn] = useState(false);\n  const [portal, setPortal] = useState<Element | null>(null);\n\n  const [installedWallets, otherWallets] = useMemo(() => {\n    const installed: Wallet[] = [];\n    const notDetected: Wallet[] = [];\n    const loadable: Wallet[] = [];\n\n    for (const wallet of wallets) {\n      if (wallet.readyState === WalletReadyState.NotDetected) {\n        notDetected.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.Loadable) {\n        loadable.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.Installed) {\n        installed.push(wallet);\n      }\n    }\n\n    return [installed, [...loadable, ...notDetected]];\n  }, [wallets]);\n\n  const getStartedWallet = useMemo(() => {\n    return installedWallets.length\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        installedWallets[0]!\n      : wallets.find(\n          (wallet: { adapter: { name: WalletName } }) =>\n            wallet.adapter.name === MidenWalletName\n        ) ||\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          otherWallets[0]!;\n  }, [installedWallets, wallets, otherWallets]);\n\n  const otherInstalledWallets = useMemo(() => {\n    return installedWallets.filter(\n      (wallet) => wallet.adapter.name !== getStartedWallet.adapter.name\n    );\n  }, [installedWallets, getStartedWallet]);\n\n  const hideModal = useCallback(() => {\n    setFadeIn(false);\n    setTimeout(() => setVisible(false), 150);\n  }, [setVisible]);\n\n  const handleClose = useCallback(\n    (event: MouseEvent) => {\n      event.preventDefault();\n      hideModal();\n    },\n    [hideModal]\n  );\n\n  const handleWalletClick = useCallback(\n    (event: MouseEvent, walletName: WalletName) => {\n      select(walletName);\n      handleClose(event);\n    },\n    [select, handleClose]\n  );\n\n  const handleTabKey = useCallback(\n    (event: KeyboardEvent) => {\n      const node = ref.current;\n      if (!node) return;\n\n      // here we query all focusable elements\n      const focusableElements = node.querySelectorAll(\"button\");\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const firstElement = focusableElements[0]!;\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const lastElement = focusableElements[focusableElements.length - 1]!;\n\n      if (event.shiftKey) {\n        // if going backward by pressing tab and firstElement is active, shift focus to last focusable element\n        if (document.activeElement === firstElement) {\n          lastElement.focus();\n          event.preventDefault();\n        }\n      } else {\n        // if going forward by pressing tab and lastElement is active, shift focus to first focusable element\n        if (document.activeElement === lastElement) {\n          firstElement.focus();\n          event.preventDefault();\n        }\n      }\n    },\n    [ref]\n  );\n\n  useLayoutEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        hideModal();\n      } else if (event.key === \"Tab\") {\n        handleTabKey(event);\n      }\n    };\n\n    // Get original overflow\n    const { overflow } = window.getComputedStyle(document.body);\n    // Hack to enable fade in animation after mount\n    setTimeout(() => setFadeIn(true), 0);\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Listen for keydown events\n    window.addEventListener(\"keydown\", handleKeyDown, false);\n\n    return () => {\n      // Re-enable scrolling when component unmounts\n      document.body.style.overflow = overflow;\n      window.removeEventListener(\"keydown\", handleKeyDown, false);\n    };\n  }, [hideModal, handleTabKey]);\n\n  useLayoutEffect(\n    () => setPortal(document.querySelector(container)),\n    [container]\n  );\n\n  useLayoutEffect(() => {\n    if (wallet) {\n      connect(\n        privateDataPermission || PrivateDataPermission.UponRequest,\n        network || WalletAdapterNetwork.Testnet,\n        allowedPrivateData ?? AllowedPrivateData.None\n      ).catch((e) => {\n        console.log({ e });\n      });\n    }\n  }, [wallet, privateDataPermission, network, allowedPrivateData, connect]);\n\n  return (\n    portal &&\n    createPortal(\n      <div\n        aria-labelledby=\"wallet-adapter-modal-title\"\n        aria-modal=\"true\"\n        className={`wallet-adapter-modal ${\n          fadeIn && \"wallet-adapter-modal-fade-in\"\n        } ${className}`}\n        ref={ref}\n        role=\"dialog\"\n      >\n        <div className=\"wallet-adapter-modal-container\">\n          <div className=\"wallet-adapter-modal-wrapper\">\n            <div className=\"wallet-adapter-modal-title\">\n              Connect a Wallet\n              <button\n                onClick={handleClose}\n                className=\"wallet-adapter-modal-button-close\"\n              >\n                <svg width=\"14\" height=\"14\">\n                  <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\" />\n                </svg>\n              </button>\n            </div>\n            {installedWallets.length ? (\n              <>\n                <div className=\"wallet-adapter-modal-content\">\n                  Connect your Bread Wallet and start exploring its powerful\n                  features now!\n                  <hr />\n                </div>\n                <ul className=\"wallet-adapter-modal-list\">\n                  <span className=\"wallet-adapter-modal-list-section-title\">\n                    Recommended\n                  </span>\n                  <WalletListItem\n                    key={getStartedWallet.adapter.name}\n                    handleClick={(event) =>\n                      handleWalletClick(event, getStartedWallet.adapter.name)\n                    }\n                    wallet={getStartedWallet}\n                  />\n                  {(otherInstalledWallets.length > 0 ||\n                    otherWallets.length > 0) && (\n                    <>\n                      <hr />\n                      <span className=\"wallet-adapter-modal-list-section-title\">\n                        Other wallets\n                      </span>\n                      {otherInstalledWallets.map((wallet) => (\n                        <WalletListItem\n                          key={wallet.adapter.name}\n                          handleClick={(event) =>\n                            handleWalletClick(event, wallet.adapter.name)\n                          }\n                          wallet={wallet}\n                        />\n                      ))}\n                      {otherWallets.map((wallet) => (\n                        <WalletListItem\n                          key={wallet.adapter.name}\n                          handleClick={(event) =>\n                            handleWalletClick(event, wallet.adapter.name)\n                          }\n                          wallet={wallet}\n                        />\n                      ))}\n                    </>\n                  )}\n                </ul>\n              </>\n            ) : (\n              <>\n                <div className=\"wallet-adapter-modal-middle\">\n                  <DiscoverMidenMessage />\n                  <a\n                    href={getStartedWallet.adapter.url}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"wallet-adapter-modal-chrome-badge\"\n                  >\n                    <img\n                      src=\"https://developer.chrome.com/static/docs/webstore/branding/image/HRs9MPufa1J1h5glNhut.png\"\n                      alt=\"Available in the Chrome Web Store\"\n                    />\n                  </a>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <div\n          className=\"wallet-adapter-modal-overlay\"\n          onMouseDown={handleClose}\n        />\n      </div>,\n      portal\n    )\n  );\n};\n"]}
+{"version":3,"file":"WalletModal.js","sourceRoot":"","sources":["../src/WalletModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC, MouseEvent } from \"react\";\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  AllowedPrivateData,\n  PrivateDataPermission,\n  WalletAdapterNetwork,\n  WalletName,\n  WalletReadyState,\n} from \"@miden-sdk/miden-wallet-adapter-base\";\nimport { useWallet, Wallet } from \"@miden-sdk/miden-wallet-adapter-react\";\nimport {\n  MidenWalletName,\n  type MidenWalletAdapter,\n} from \"@miden-sdk/miden-wallet-adapter-miden\";\nimport { useWalletModal } from \"./useWalletModal\";\nimport { WalletListItem } from \"./WalletListItem\";\nimport { DiscoverMidenMessage } from \"./DiscoverMidenMessage\";\n\nexport interface WalletModalProps {\n  className?: string;\n  container?: string;\n  privateDataPermission?: PrivateDataPermission;\n  network?: WalletAdapterNetwork;\n  allowedPrivateData?: AllowedPrivateData;\n}\n\nfunction opensInBread({ adapter, readyState }: Wallet): boolean {\n  return (\n    adapter.name === MidenWalletName && readyState === WalletReadyState.Loadable\n  );\n}\n\nexport const WalletModal: FC<WalletModalProps> = ({\n  className = \"\",\n  container = \"body\",\n  privateDataPermission,\n  network,\n  allowedPrivateData,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { wallets, select, connect, wallet } = useWallet();\n  const { setVisible } = useWalletModal();\n  const [fadeIn, setFadeIn] = useState(false);\n  const [portal, setPortal] = useState<Element | null>(null);\n\n  const [installedWallets, otherWallets] = useMemo(() => {\n    const installed: Wallet[] = [];\n    const notDetected: Wallet[] = [];\n    const loadable: Wallet[] = [];\n\n    for (const wallet of wallets) {\n      if (wallet.readyState === WalletReadyState.NotDetected) {\n        notDetected.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.Loadable) {\n        loadable.push(wallet);\n      } else if (wallet.readyState === WalletReadyState.Installed) {\n        installed.push(wallet);\n      }\n    }\n\n    return [installed, [...loadable, ...notDetected]];\n  }, [wallets]);\n\n  const getStartedWallet = useMemo(() => {\n    return installedWallets.length\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        installedWallets[0]!\n      : wallets.find(\n          (wallet: { adapter: { name: WalletName } }) =>\n            wallet.adapter.name === MidenWalletName\n        ) ||\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          otherWallets[0]!;\n  }, [installedWallets, wallets, otherWallets]);\n\n  const otherInstalledWallets = useMemo(() => {\n    return installedWallets.filter(\n      (wallet) => wallet.adapter.name !== getStartedWallet.adapter.name\n    );\n  }, [installedWallets, getStartedWallet]);\n\n  const hideModal = useCallback(() => {\n    setFadeIn(false);\n    setTimeout(() => setVisible(false), 150);\n  }, [setVisible]);\n\n  const handleClose = useCallback(\n    (event: MouseEvent) => {\n      event.preventDefault();\n      hideModal();\n    },\n    [hideModal]\n  );\n\n  const handleWalletClick = useCallback(\n    (event: MouseEvent, walletName: WalletName) => {\n      select(walletName);\n      handleClose(event);\n    },\n    [select, handleClose]\n  );\n\n  const handleOpenInBreadClick = useCallback(\n    (event: MouseEvent, { adapter }: Wallet) => {\n      // The browser lets a page open an app only from inside the tap, so the\n      // handoff can't wait for the effect that select() drives.\n      select(adapter.name);\n      (adapter as MidenWalletAdapter).openInBread();\n      handleClose(event);\n    },\n    [select, handleClose]\n  );\n\n  const handleTabKey = useCallback(\n    (event: KeyboardEvent) => {\n      const node = ref.current;\n      if (!node) return;\n\n      // here we query all focusable elements\n      const focusableElements = node.querySelectorAll(\"button\");\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const firstElement = focusableElements[0]!;\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const lastElement = focusableElements[focusableElements.length - 1]!;\n\n      if (event.shiftKey) {\n        // if going backward by pressing tab and firstElement is active, shift focus to last focusable element\n        if (document.activeElement === firstElement) {\n          lastElement.focus();\n          event.preventDefault();\n        }\n      } else {\n        // if going forward by pressing tab and lastElement is active, shift focus to first focusable element\n        if (document.activeElement === lastElement) {\n          firstElement.focus();\n          event.preventDefault();\n        }\n      }\n    },\n    [ref]\n  );\n\n  useLayoutEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        hideModal();\n      } else if (event.key === \"Tab\") {\n        handleTabKey(event);\n      }\n    };\n\n    // Get original overflow\n    const { overflow } = window.getComputedStyle(document.body);\n    // Hack to enable fade in animation after mount\n    setTimeout(() => setFadeIn(true), 0);\n    // Prevent scrolling on mount\n    document.body.style.overflow = \"hidden\";\n    // Listen for keydown events\n    window.addEventListener(\"keydown\", handleKeyDown, false);\n\n    return () => {\n      // Re-enable scrolling when component unmounts\n      document.body.style.overflow = overflow;\n      window.removeEventListener(\"keydown\", handleKeyDown, false);\n    };\n  }, [hideModal, handleTabKey]);\n\n  useLayoutEffect(\n    () => setPortal(document.querySelector(container)),\n    [container]\n  );\n\n  useLayoutEffect(() => {\n    // A Loadable Bread is handed off by its Open in Bread button, from the tap.\n    if (wallet && !opensInBread(wallet)) {\n      connect(\n        privateDataPermission || PrivateDataPermission.UponRequest,\n        network || WalletAdapterNetwork.Testnet,\n        allowedPrivateData ?? AllowedPrivateData.None\n      ).catch((e) => {\n        console.log({ e });\n      });\n    }\n  }, [wallet, privateDataPermission, network, allowedPrivateData, connect]);\n\n  return (\n    portal &&\n    createPortal(\n      <div\n        aria-labelledby=\"wallet-adapter-modal-title\"\n        aria-modal=\"true\"\n        className={`wallet-adapter-modal ${\n          fadeIn && \"wallet-adapter-modal-fade-in\"\n        } ${className}`}\n        ref={ref}\n        role=\"dialog\"\n      >\n        <div className=\"wallet-adapter-modal-container\">\n          <div className=\"wallet-adapter-modal-wrapper\">\n            <div className=\"wallet-adapter-modal-title\">\n              Connect a Wallet\n              <button\n                onClick={handleClose}\n                className=\"wallet-adapter-modal-button-close\"\n              >\n                <svg width=\"14\" height=\"14\">\n                  <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\" />\n                </svg>\n              </button>\n            </div>\n            {installedWallets.length ? (\n              <>\n                <div className=\"wallet-adapter-modal-content\">\n                  Connect your Bread Wallet and start exploring its powerful\n                  features now!\n                  <hr />\n                </div>\n                <ul className=\"wallet-adapter-modal-list\">\n                  <span className=\"wallet-adapter-modal-list-section-title\">\n                    Recommended\n                  </span>\n                  <WalletListItem\n                    key={getStartedWallet.adapter.name}\n                    handleClick={(event) =>\n                      handleWalletClick(event, getStartedWallet.adapter.name)\n                    }\n                    wallet={getStartedWallet}\n                  />\n                  {(otherInstalledWallets.length > 0 ||\n                    otherWallets.length > 0) && (\n                    <>\n                      <hr />\n                      <span className=\"wallet-adapter-modal-list-section-title\">\n                        Other wallets\n                      </span>\n                      {otherInstalledWallets.map((wallet) => (\n                        <WalletListItem\n                          key={wallet.adapter.name}\n                          handleClick={(event) =>\n                            handleWalletClick(event, wallet.adapter.name)\n                          }\n                          wallet={wallet}\n                        />\n                      ))}\n                      {otherWallets.map((wallet) => (\n                        <WalletListItem\n                          key={wallet.adapter.name}\n                          handleClick={(event) =>\n                            opensInBread(wallet)\n                              ? handleOpenInBreadClick(event, wallet)\n                              : handleWalletClick(event, wallet.adapter.name)\n                          }\n                          wallet={wallet}\n                        />\n                      ))}\n                    </>\n                  )}\n                </ul>\n              </>\n            ) : (\n              <>\n                <div className=\"wallet-adapter-modal-middle\">\n                  <DiscoverMidenMessage />\n                  {opensInBread(getStartedWallet) ? (\n                    <button\n                      type=\"button\"\n                      className=\"wallet-adapter-modal-middle-button\"\n                      onClick={(event) =>\n                        handleOpenInBreadClick(event, getStartedWallet)\n                      }\n                    >\n                      Open in Bread\n                    </button>\n                  ) : (\n                    <a\n                      href={getStartedWallet.adapter.url}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"wallet-adapter-modal-chrome-badge\"\n                    >\n                      <img\n                        src=\"https://developer.chrome.com/static/docs/webstore/branding/image/HRs9MPufa1J1h5glNhut.png\"\n                        alt=\"Available in the Chrome Web Store\"\n                      />\n                    </a>\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n        <div\n          className=\"wallet-adapter-modal-overlay\"\n          onMouseDown={handleClose}\n        />\n      </div>,\n      portal\n    )\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/miden-wallet-adapter-reactui",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "description": "React UI Components for connecting Miden-compatible wallets to your dApp.",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,15 +17,17 @@
   "author": "Miden Contributors",
   "license": "MIT",
   "dependencies": {
-    "@miden-sdk/miden-wallet-adapter-base": "0.17.3",
-    "@miden-sdk/miden-wallet-adapter-react": "0.17.3",
-    "@miden-sdk/miden-wallet-adapter-miden": "0.17.3"
+    "@miden-sdk/miden-wallet-adapter-miden": "0.17.5",
+    "@miden-sdk/miden-wallet-adapter-base": "0.17.5",
+    "@miden-sdk/miden-wallet-adapter-react": "0.17.5"
   },
   "devDependencies": {
     "@types/react-dom": "^19.0.4",
     "copyfiles": "^2.4.1",
+    "jsdom": "^24.0.0",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "vitest": "^1.0.0"
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
@@ -39,8 +41,10 @@
   "homepage": "https://github.com/0xMiden/web-sdk",
   "scripts": {
     "build": "tsc && pnpm run copy-files",
+    "typecheck": "tsc --noEmit -p tsconfig.test.json",
     "clean": "rimraf dist/ node_modules/",
     "copy-files": "copyfiles styles.css dist/",
-    "doc": "typedoc --disableSources --plugin typedoc-plugin-markdown"
+    "doc": "typedoc --disableSources --plugin typedoc-plugin-markdown",
+    "test": "vitest run"
   }
 }