npm - @miden-sdk/miden-wallet-adapter-reactui - Versions diffs - 0.17.4 → 0.17.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/AGENTS.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 {\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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/miden-wallet-adapter-reactui",
-  "version": "0.17.4",
+  "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-react": "0.17.4",
-    "@miden-sdk/miden-wallet-adapter-base": "0.17.4",
-    "@miden-sdk/miden-wallet-adapter-miden": "0.17.4"
+    "@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"
   }
 }