@provablehq/aleo-wallet-adaptor-react-ui 0.3.0-alpha.2 → 0.3.0-alpha.4

package/dist/index.js

@@ -87,7 +87,7 @@ var WalletIcon = ({ wallet, ...props }) => {
   return wallet && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "img",
     {
-      style: { borderRadius: "50%" },
+      style: { borderRadius: "22%" },
       src: wallet.adapter.icon,
       alt: `${wallet.adapter.name} icon`,
       ...props
@@ -216,62 +216,15 @@ var WalletListItem = ({ handleClick, tabIndex, wallet }) => {
   ] }) });
 };
 
-// src/AleoIcon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AleoIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "216",
-      height: "80",
-      viewBox: "0 0 216 80",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M73.426 0V8.93824H81.6842V78.8961H90.6045V0H73.426Z", fill: "#F5F5F5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "path",
-          {
-            d: "M154.145 51.4216C154.145 32.5518 143.683 21.297 127.604 21.297C111.526 21.297 100.954 32.0007 100.954 50.8687C100.954 69.7367 111.415 80 127.604 80C140.378 80 149.96 72.6061 152.603 62.3447H142.692C140.488 67.0902 135.975 71.2829 127.604 71.2829C116.812 71.2829 111.307 64.4419 110.205 54.6209H154.145V51.4216ZM110.316 46.125C111.636 36.6357 117.364 29.9035 127.604 29.9035C137.845 29.9035 143.242 36.5251 144.564 46.125H110.316Z",
-            fill: "#F5F5F5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "path",
-          {
-            d: "M189.272 21.297C173.083 21.297 162.622 32.0007 162.622 50.8687C162.622 69.7367 173.083 80 189.272 80C205.461 80 215.812 70.0684 215.812 50.8687C215.812 31.669 205.351 21.297 189.272 21.297ZM189.272 71.5041C177.709 71.5041 171.432 62.4553 171.432 50.76C171.432 39.0647 177.709 29.6842 189.272 29.6842C200.836 29.6842 207.003 38.8436 207.003 50.76C207.003 62.6764 200.946 71.5041 189.272 71.5041Z",
-            fill: "#F5F5F5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "path",
-          {
-            d: "M46.5565 0H28.3849L12.6134 46.125H22.2179L34.9933 8.49593H39.6189L52.3925 46.125H22.2179L19.2457 54.6209H55.2561L63.5143 78.8961H73.426L46.5565 0Z",
-            fill: "#F5F5F5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "path",
-          {
-            d: "M1.40508 78.8961H10.9857L19.2457 54.6209L9.7074 54.6209L1.40508 78.8961Z",
-            fill: "#F5F5F5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3.0935 46.125L0.1875 54.6209H9.7074L12.6134 46.125H3.0935Z", fill: "#F5F5F5" })
-      ]
-    }
-  );
-};
-
 // src/WalletModal.tsx
 var import_aleo_wallet_adaptor_react2 = require("@provablehq/aleo-wallet-adaptor-react");
 var import_aleo_wallet_standard2 = require("@provablehq/aleo-wallet-standard");
 var import_aleo_types2 = require("@provablehq/aleo-types");
 
 // src/ProvableLogo.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ProvableLogo = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "svg",
     {
       width: "115",
@@ -279,69 +232,69 @@ var ProvableLogo = () => {
       viewBox: "0 0 115 18",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { opacity: "0.88", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { opacity: "0.88", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M0 3.89265C0 2.29508 1.29508 1 2.89265 1H13.1073C14.7048 1 15.9999 2.29508 15.9999 3.89265V14.1074C15.9999 15.7049 14.7049 17 13.1073 17H10.4926C10.0937 17 9.7702 16.6766 9.7702 16.2776V8.67463C9.7702 7.87665 9.12331 7.22976 8.32533 7.22976H0.722439C0.323447 7.22976 0 6.90631 0 6.50732L0 3.89265Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M6.22973 12.2151C6.22973 11.4171 5.58284 10.7702 4.78485 10.7702H0.722439C0.323447 10.7702 0 11.0937 0 11.4927L0 14.1074C0 15.7049 1.29508 17 2.89265 17H5.50729C5.90628 17 6.22973 16.6766 6.22973 16.2776V12.2151Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M108.725 17.272C105.098 17.272 102.695 14.7107 102.695 10.88C102.695 7.04935 105.098 4.48802 108.725 4.48802C112.85 4.48802 115.275 7.52535 114.686 11.968H106.118C106.39 13.6453 107.319 14.5973 108.793 14.5973C110.039 14.5973 110.901 14.0533 111.263 13.056H114.663C114.006 15.7533 111.898 17.272 108.725 17.272ZM106.118 9.70135H111.467C111.195 8.04668 110.266 7.16268 108.793 7.16268C107.342 7.16268 106.413 8.06935 106.118 9.70135Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M98.3672 17V0.317363L101.699 0.0453644V17H98.3672Z", fill: "#0B0605" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M98.3672 17V0.317363L101.699 0.0453644V17H98.3672Z", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M84.9072 17V0.317363L88.2392 0.0453644V6.50535H88.3752C89.1232 5.21336 90.3246 4.55602 92.0245 4.55602C95.2432 4.55602 97.3512 7.07202 97.3512 10.88C97.3512 14.688 95.2432 17.2267 92.0245 17.2267C90.3246 17.2267 89.1232 16.5693 88.3752 15.2547H88.2392V17H84.9072ZM91.0952 7.32135C89.3726 7.32135 88.2392 8.72668 88.2392 10.88C88.2392 13.056 89.3726 14.4613 91.0952 14.4613C92.8405 14.4613 93.9512 13.056 93.9512 10.88C93.9512 8.72668 92.8405 7.32135 91.0952 7.32135Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M76.3143 17.1813C73.9117 17.1813 72.3477 15.6853 72.3477 13.3733C72.3477 11.4013 73.685 10.1093 76.0423 9.83735L79.2836 9.47468C79.8956 9.38401 80.1903 9.11201 80.1903 8.61335C80.1903 7.68402 79.4876 7.11735 78.3543 7.11735C77.221 7.11735 76.4503 7.68402 76.3143 8.61335H72.8917C73.141 6.05202 75.249 4.48802 78.3996 4.48802C81.641 4.48802 83.5223 6.09735 83.5223 8.88535V17H80.1903V15.4133H80.0543C79.4423 16.456 77.9236 17.1813 76.3143 17.1813ZM77.4023 14.5973C78.8303 14.5973 80.1903 13.3507 80.1903 11.9V11.4693C80.0316 11.5827 79.8503 11.628 79.6236 11.6507L77.1983 11.9227C76.3143 12.0133 75.8157 12.4893 75.8157 13.2373C75.8157 14.076 76.4276 14.5973 77.4023 14.5973Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M64.509 17L60.1797 4.76003H63.5117L66.549 13.94H66.685L69.6997 4.76003H72.873L68.5437 17H64.509Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M54.3613 17.272C50.6666 17.272 48.1279 14.6653 48.1279 10.88C48.1279 7.09468 50.6666 4.48802 54.3613 4.48802C58.0559 4.48802 60.5946 7.09468 60.5946 10.88C60.5946 14.6653 58.0559 17.272 54.3613 17.272ZM54.3613 14.5067C56.1519 14.5067 57.2399 13.1467 57.2399 10.88C57.2399 8.61335 56.1519 7.25335 54.3613 7.25335C52.5706 7.25335 51.4826 8.61335 51.4826 10.88C51.4826 13.1467 52.5706 14.5067 54.3613 14.5067Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M40.0801 17V4.76002H43.4121V6.23335H43.5481C43.9561 5.10002 44.8401 4.48802 46.1094 4.48802H47.8094L48.0814 7.93335H45.6561C44.2054 7.93335 43.4121 8.56802 43.4121 9.74668V17H40.0801Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "path",
           {
             d: "M26.3848 17V0.99736H33.0261C36.6981 0.99736 39.0554 3.08269 39.0554 6.34668C39.0554 9.63334 36.6981 11.764 33.0261 11.764H29.8754V17H26.3848ZM33.0261 8.72668C34.5674 8.72668 35.5647 7.82002 35.5647 6.41468C35.5647 5.00935 34.5674 4.10269 33.0261 4.10269H29.8754V8.72668H33.0261Z",
-            fill: "#0B0605"
+            fill: "currentColor"
           }
         )
       ] })
@@ -350,7 +303,9 @@ var ProvableLogo = () => {
 };
 
 // src/WalletModal.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var INSTALL_REDIRECT_MAX_AGE_MS = 10 * 60 * 1e3;
+var WALLET_INSTALL_REDIRECT_KEY = "aleo-wallet-adaptor-install-redirect-timestamp";
 var WalletModal = ({
   className = "",
   container = "body",
@@ -382,13 +337,28 @@ var WalletModal = ({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       installedWallets[0]
     ) : wallets.find(
-      (wallet2) => wallet2.adapter.name === "Puzzle Wallet"
-      // TODO: Add Provable Wallet
+      (wallet2) => wallet2.adapter.name.toLowerCase().includes("shield")
     ) || wallets.find(
       (wallet2) => wallet2.readyState === import_aleo_wallet_standard2.WalletReadyState.LOADABLE
     ) || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     otherWallets[0];
   }, [installedWallets, wallets, otherWallets]);
+  (0, import_react4.useEffect)(() => {
+    function handleVisibilityChange() {
+      if (document.visibilityState !== "visible") return;
+      try {
+        const raw = sessionStorage.getItem(WALLET_INSTALL_REDIRECT_KEY);
+        if (!raw) return;
+        const timestamp = Number(raw);
+        if (Number.isNaN(timestamp) || Date.now() - timestamp > INSTALL_REDIRECT_MAX_AGE_MS) return;
+        sessionStorage.removeItem(WALLET_INSTALL_REDIRECT_KEY);
+        window.location.reload();
+      } catch {
+      }
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, []);
   const hideModal = (0, import_react4.useCallback)(() => {
     setFadeIn(false);
     setTimeout(() => setVisible(false), 150);
@@ -407,6 +377,22 @@ var WalletModal = ({
     },
     [selectWallet, handleClose]
   );
+  const handleNotInstalledWalletClick = (0, import_react4.useCallback)(
+    (event, walletName) => {
+      event.preventDefault();
+      const wallet2 = wallets.find(
+        (wallet3) => wallet3.adapter.name === walletName
+      );
+      if (wallet2) {
+        try {
+          sessionStorage.setItem(WALLET_INSTALL_REDIRECT_KEY, String(Date.now()));
+        } catch {
+        }
+        window.open(wallet2.adapter.url, "_blank");
+      }
+    },
+    [wallets]
+  );
   const handleCollapseClick = (0, import_react4.useCallback)(() => setExpanded(!expanded), [expanded]);
   const handleTabKey = (0, import_react4.useCallback)(
     (event) => {
@@ -455,7 +441,7 @@ var WalletModal = ({
     }
   }, [wallet]);
   return portal && (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         "aria-labelledby": "wallet-adapter-modal-title",
@@ -464,12 +450,12 @@ var WalletModal = ({
         ref,
         role: "dialog",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "wallet-adapter-modal-container", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "wallet-adapter-modal-wrapper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: handleClose, className: "wallet-adapter-modal-button-close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "14", height: "14", children: /* @__PURE__ */ (0, import_jsx_runtime8.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 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "wallet-adapter-modal-title", children: "Connect an Aleo wallet" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ul", { className: "wallet-adapter-modal-list", children: [
-                installedWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "wallet-adapter-modal-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "wallet-adapter-modal-wrapper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: handleClose, className: "wallet-adapter-modal-button-close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", children: /* @__PURE__ */ (0, import_jsx_runtime7.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 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: "wallet-adapter-modal-title", children: "Connect an Aleo wallet" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("ul", { className: "wallet-adapter-modal-list", children: [
+                installedWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   WalletListItem,
                   {
                     handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
@@ -477,7 +463,7 @@ var WalletModal = ({
                   },
                   wallet2.adapter.name
                 )),
-                otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: otherWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: otherWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   WalletListItem,
                   {
                     handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
@@ -487,18 +473,18 @@ var WalletModal = ({
                   wallet2.adapter.name
                 )) }) : null
               ] }),
-              otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "button",
                 {
                   className: "wallet-adapter-modal-list-more",
                   onClick: handleCollapseClick,
                   tabIndex: 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                       expanded ? "Less " : "More ",
                       "options"
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "svg",
                       {
                         width: "13",
@@ -506,39 +492,36 @@ var WalletModal = ({
                         viewBox: "0 0 13 7",
                         xmlns: "http://www.w3.org/2000/svg",
                         className: `${expanded ? "wallet-adapter-modal-list-more-icon-rotate" : ""}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
                       }
                     )
                   ]
                 }
               ) : null
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "wallet-adapter-modal-title", children: "Get an Aleo wallet to continue" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "wallet-adapter-modal-middle", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AleoIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "wallet-adapter-modal-middle-button",
-                    onClick: (event) => handleWalletClick(event, getStartedWallet.adapter.name),
-                    children: "Get started"
-                  }
-                )
-              ] }),
-              otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: "wallet-adapter-modal-title", children: "Get an Aleo wallet to continue" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "wallet-adapter-modal-middle", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "wallet-adapter-modal-middle-button",
+                  onClick: (event) => handleNotInstalledWalletClick(event, getStartedWallet?.adapter.name),
+                  children: "Get started"
+                }
+              ) }),
+              otherWallets.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "button",
                   {
                     className: "wallet-adapter-modal-list-more",
                     onClick: handleCollapseClick,
                     tabIndex: 0,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                         expanded ? "Hide " : "View other ",
                         "options"
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "svg",
                         {
                           width: "13",
@@ -546,16 +529,16 @@ var WalletModal = ({
                           viewBox: "0 0 13 7",
                           xmlns: "http://www.w3.org/2000/svg",
                           className: `${expanded ? "wallet-adapter-modal-list-more-icon-rotate" : ""}`,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "wallet-adapter-modal-list", children: otherWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "wallet-adapter-modal-list", children: otherWallets.map((wallet2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   WalletListItem,
                   {
-                    handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
+                    handleClick: (event) => handleNotInstalledWalletClick(event, wallet2.adapter.name),
                     tabIndex: expanded ? 0 : -1,
                     wallet: wallet2
                   },
@@ -563,18 +546,18 @@ var WalletModal = ({
                 )) }) })
               ] }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "a",
               {
                 className: "wallet-adapter-modal-footer",
                 href: "https://provable.com/",
                 target: "_blank",
                 rel: "noopener noreferrer",
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProvableLogo, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProvableLogo, {})
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })
         ]
       }
     ),
@@ -584,7 +567,7 @@ var WalletModal = ({
 
 // src/WalletModalButton.tsx
 var import_react5 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var WalletModalButton = ({
   children = "Connect Wallet",
   onClick,
@@ -598,15 +581,15 @@ var WalletModalButton = ({
     },
     [onClick, setVisible, visible]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { className: "wallet-adapter-button-trigger", onClick: handleClick, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { className: "wallet-adapter-button-trigger", onClick: handleClick, ...props, children });
 };
 
 // src/WalletModalProvider.tsx
 var import_react6 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var WalletModalProvider = ({ children, ...props }) => {
   const [visible, setVisible] = (0, import_react6.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     WalletModalContext.Provider,
     {
       value: {
@@ -615,7 +598,7 @@ var WalletModalProvider = ({ children, ...props }) => {
       },
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WalletModal, { ...props })
+        visible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WalletModal, { ...props })
       ]
     }
   );
@@ -624,7 +607,7 @@ var WalletModalProvider = ({ children, ...props }) => {
 // src/WalletDisconnectButton.tsx
 var import_react7 = require("react");
 var import_aleo_wallet_adaptor_react3 = require("@provablehq/aleo-wallet-adaptor-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var WalletDisconnectButton = ({
   children,
   disabled,
@@ -646,12 +629,12 @@ var WalletDisconnectButton = ({
     if (wallet) return "Disconnect";
     return "Disconnect Wallet";
   }, [children, disconnecting, wallet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Button,
     {
       className: "wallet-adapter-button-trigger",
       disabled: disabled || !wallet,
-      startIcon: wallet ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WalletIcon, { wallet }) : void 0,
+      startIcon: wallet ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WalletIcon, { wallet }) : void 0,
       onClick: handleClick,
       ...props,
       children: content
@@ -664,8 +647,8 @@ var import_react8 = require("react");
 var import_aleo_wallet_adaptor_react4 = require("@provablehq/aleo-wallet-adaptor-react");
 
 // src/icons.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -678,12 +661,12 @@ var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
     ]
   }
 );
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -695,10 +678,10 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var GenericWalletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var GenericWalletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -711,14 +694,14 @@ var GenericWalletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })
     ]
   }
 );
 
 // src/WalletMultiButton.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var WalletMultiButton = ({ children, ...props }) => {
   const { address, wallet, disconnect } = (0, import_aleo_wallet_adaptor_react4.useWallet)();
   const { setVisible } = useWalletModal();
@@ -765,22 +748,22 @@ var WalletMultiButton = ({ children, ...props }) => {
       document.removeEventListener("touchstart", listener);
     };
   }, [ref, closeDropdown]);
-  if (!wallet) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WalletModalButton, { ...props, children });
-  if (!base58) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WalletConnectButton, { ...props, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "wallet-adapter-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  if (!wallet) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WalletModalButton, { ...props, children });
+  if (!base58) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WalletConnectButton, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wallet-adapter-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Button,
       {
         "aria-expanded": active,
         className: "wallet-adapter-button-trigger",
         style: { pointerEvents: active ? "none" : "auto", ...props.style },
         onClick: openDropdown,
-        startIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WalletIcon, { wallet }),
+        startIcon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WalletIcon, { wallet }),
         ...props,
         children: content
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "ul",
       {
         "aria-label": "dropdown-list",
@@ -788,18 +771,18 @@ var WalletMultiButton = ({ children, ...props }) => {
         ref,
         role: "menu",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { onClick: copyAddress, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { onClick: copyAddress, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
             "Copied",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckIcon, {})
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, {})
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
             "Copy address ",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CopyIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CopyIcon, {})
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { onClick: openModal, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { onClick: openModal, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: [
             "Change wallet ",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GenericWalletIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GenericWalletIcon, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { onClick: onDisconnect, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: "Disconnect" })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { onClick: onDisconnect, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: "Disconnect" })
         ]
       }
     )