@xyo-network/react-connected-accounts 2.81.10 → 2.82.0

package/dist/browser/index.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -53,6 +54,9 @@ module.exports = __toCommonJS(src_exports);
 // src/classes/EnabledWallets.ts
 var DEFAULT_LOCAL_STORAGE_KEY = "XYO|EnabledWallets";
 var EnabledEthWalletConnections = class {
+  static {
+    __name(this, "EnabledEthWalletConnections");
+  }
   // control whether or not enabled/disabled preferences are persisted (i.e. in localStorage)
   persistPreferences = true;
   // Map of wallet names and their enabled/disabled state
@@ -77,23 +81,26 @@ var EnabledEthWalletConnections = class {
     this.toggleEnabledWallet(rdns, true);
   }
   /**
-   * Given a new set of wallets, set their enabled state based off previous preferences
-   */
+  * Given a new set of wallets, set their enabled state based off previous preferences
+  */
   resetWallets(wallets) {
     const newWallets = {};
-    const addWallet = ([walletName, wallet]) => {
+    const addWallet = /* @__PURE__ */ __name(([walletName, wallet]) => {
       newWallets[walletName] = {
         // preserve the existing enabled state
         enabled: walletName in this.enabledWallets ? this.enabledWallets[walletName] : true,
         wallet
       };
-    };
+    }, "addWallet");
     Object.entries(wallets).forEach(addWallet.bind(this));
     this.ethWalletsState = newWallets;
     this.emitChange();
   }
   subscribe(listener) {
-    this.listeners = [...this.listeners, listener];
+    this.listeners = [
+      ...this.listeners,
+      listener
+    ];
     return () => {
       this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
     };
@@ -101,7 +108,9 @@ var EnabledEthWalletConnections = class {
   toggleEnabledWallet(rdns, enabled) {
     if (rdns && this.ethWalletsState[rdns]) {
       this.ethWalletsState[rdns].enabled = enabled;
-      this.ethWalletsState = { ...this.ethWalletsState };
+      this.ethWalletsState = {
+        ...this.ethWalletsState
+      };
       this.emitChange();
     }
   }
@@ -141,264 +150,317 @@ var EnabledEthWalletConnections = class {
 // src/components/ConnectedAccountsFlexbox.tsx
 var import_material13 = require("@mui/material");
 var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_react7 = require("react");
+var import_react16 = __toESM(require("react"), 1);
 
 // src/hooks/useDetectWallets.tsx
 var import_react_crypto = require("@xylabs/react-crypto");
 var import_react = require("react");
-var sortWallets = (wallets) => (
+var sortWallets = /* @__PURE__ */ __name((wallets) => (
   // eslint-disable-next-line unicorn/no-array-reduce
   Object.values(wallets).reduce((acc, wallet) => {
     wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet);
     return acc;
   }, [])
-);
-var useDetectedWallets = () => {
+), "sortWallets");
+var useDetectedWallets = /* @__PURE__ */ __name(() => {
   const wallets = (0, import_react_crypto.useWalletDiscovery)();
   const [refresh, setRefresh] = (0, import_react.useState)(0);
   const [sortedWallets, setSortedWallets] = (0, import_react.useState)([]);
   (0, import_react.useEffect)(() => {
     setSortedWallets(sortWallets(wallets));
-  }, [wallets, refresh]);
+  }, [
+    wallets,
+    refresh
+  ]);
   (0, import_react.useEffect)(() => {
-    const listener = () => {
+    const listener = /* @__PURE__ */ __name(() => {
       setRefresh((refresh2) => refresh2 + 1);
-    };
+    }, "listener");
     window.addEventListener(import_react_crypto.AccountsChangedEventName, listener);
     return () => {
       window.removeEventListener(import_react_crypto.AccountsChangedEventName, listener);
     };
-  }, [wallets]);
-  const totalConnectedAccounts = (0, import_react.useMemo)(
-    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
-    [sortedWallets]
-  );
-  return { sortedWallets, totalConnectedAccounts };
-};
+  }, [
+    wallets
+  ]);
+  const totalConnectedAccounts = (0, import_react.useMemo)(() => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0), [
+    sortedWallets
+  ]);
+  return {
+    sortedWallets,
+    totalConnectedAccounts
+  };
+}, "useDetectedWallets");
 
 // src/hooks/useEnabledWallets.tsx
 var import_react_crypto2 = require("@xylabs/react-crypto");
 var import_react2 = require("react");
 var enabledEthWallets;
-var useEnabledWalletsInner = (enabledWalletsRdns) => {
+var useEnabledWalletsInner = /* @__PURE__ */ __name((enabledWalletsRdns) => {
   const discoveredWallets = (0, import_react_crypto2.useWalletDiscovery)();
   const wallets = (0, import_react2.useMemo)(() => {
     if (enabledEthWallets === void 0) enabledEthWallets = new EnabledEthWalletConnections();
     enabledEthWallets.resetWallets(discoveredWallets);
     for (const [rdns, enabled] of Object.entries(enabledWalletsRdns ?? {})) enabledEthWallets?.toggleEnabledWallet(rdns, enabled);
     return enabledEthWallets;
-  }, [discoveredWallets, enabledWalletsRdns]);
+  }, [
+    discoveredWallets,
+    enabledWalletsRdns
+  ]);
   return (0, import_react2.useSyncExternalStore)(wallets.subscribe.bind(wallets), () => wallets.wallets);
-};
-var useEnabledWallets = (enabledWalletsRdns) => {
+}, "useEnabledWalletsInner");
+var useEnabledWallets = /* @__PURE__ */ __name((enabledWalletsRdns) => {
   const wallets = useEnabledWalletsInner(enabledWalletsRdns);
-  const enabledWallets = (0, import_react2.useMemo)(
-    () => (
-      // eslint-disable-next-line unicorn/no-array-reduce
-      Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
-        if (wallet.enabled) acc[walletName] = wallet;
-        return acc;
-      }, {})
-    ),
-    [wallets]
-  );
+  const enabledWallets = (0, import_react2.useMemo)(() => (
+    // eslint-disable-next-line unicorn/no-array-reduce
+    Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
+      if (wallet.enabled) acc[walletName] = wallet;
+      return acc;
+    }, {})
+  ), [
+    wallets
+  ]);
   return {
     disableWallet: enabledEthWallets?.disableWallet.bind(enabledEthWallets),
     enableWallet: enabledEthWallets?.enableWallet.bind(enabledEthWallets),
     enabledWallets,
     wallets
   };
-};
+}, "useEnabledWallets");
 
 // src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
 var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControl, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormLabel, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Checkbox, { onChange: (_, checked) => onCheckChanged?.(checked) }),
-    "Do not show this again."
-  ] }) });
-};
+var import_react3 = __toESM(require("react"), 1);
+var CheckboxFormControl = /* @__PURE__ */ __name(({ onCheckChanged, ...props }) => {
+  return /* @__PURE__ */ import_react3.default.createElement(import_material.FormControl, props, /* @__PURE__ */ import_react3.default.createElement(import_material.FormLabel, null, /* @__PURE__ */ import_react3.default.createElement(import_material.Checkbox, {
+    onChange: /* @__PURE__ */ __name((_, checked) => onCheckChanged?.(checked), "onChange")
+  }), "Do not show this again."));
+}, "CheckboxFormControl");
 
 // src/components/wallet/dialogs/connect/Dialog.tsx
 var import_material4 = require("@mui/material");
+var import_react6 = __toESM(require("react"), 1);
 
 // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
 var import_icons_material = require("@mui/icons-material");
 var import_material2 = require("@mui/material");
 var import_react_crypto3 = require("@xylabs/react-crypto");
 var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react4 = __toESM(require("react"), 1);
 
 // src/img/index.ts
 var import_xyo_color_logo = __toESM(require("./xyo-color-logo-LHR2SMEM.svg"), 1);
 var import_xyo_color_logo_text_only = __toESM(require("./xyo-color-logo-text-only-QPAW5BSQ.svg"), 1);
 
 // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LinkedProvidersFlexbox = ({ icon, providerName, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexRow, { gap: 4, justifyContent: "space-evenly", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { gap: 0.5, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { alt: "XYO Logo", src: import_xyo_color_logo.default, style: { height: "48px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle1", children: "XYO App" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SyncAlt, { fontSize: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { gap: 0.5, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_crypto3.ConstrainedImage, { constrainedValue: "48px", src: icon, alt: providerName, style: { height: "48px", maxWidth: "48px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle1", children: providerName })
-    ] })
-  ] });
-};
+var LinkedProvidersFlexbox = /* @__PURE__ */ __name(({ icon, providerName, ...props }) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexRow, {
+    gap: 4,
+    justifyContent: "space-evenly",
+    ...props
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexCol, {
+    gap: 0.5
+  }, /* @__PURE__ */ import_react4.default.createElement("img", {
+    alt: "XYO Logo",
+    src: import_xyo_color_logo.default,
+    style: {
+      height: "48px"
+    }
+  }), /* @__PURE__ */ import_react4.default.createElement(import_material2.Typography, {
+    variant: "subtitle1"
+  }, "XYO App")), /* @__PURE__ */ import_react4.default.createElement(import_icons_material.SyncAlt, {
+    fontSize: "large"
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_flexbox.FlexCol, {
+    gap: 0.5
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_crypto3.ConstrainedImage, {
+    constrainedValue: "48px",
+    src: icon,
+    alt: providerName,
+    style: {
+      height: "48px",
+      maxWidth: "48px"
+    }
+  }), /* @__PURE__ */ import_react4.default.createElement(import_material2.Typography, {
+    variant: "subtitle1"
+  }, providerName)));
+}, "LinkedProvidersFlexbox");
 
 // src/components/wallet/dialogs/connect/Permissions.tsx
 var import_material3 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var WalletPermissionsFlexbox = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox2.FlexCol, { gap: 4, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { fontWeight: "bold", sx: { textAlign: "center" }, children: "This will allow XYO to:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: "View your wallet account(s) and address(es)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: "Read-only access to browse the public blockchain(s) you select" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Typography, { variant: "subtitle1", sx: { textAlign: "center" }, children: [
-      "You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet's settings at anytime. View more on XYO's sovereign data philosophy",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_material3.Link,
-        {
-          href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
-          sx: { fontWeight: "bold" },
-          target: "_blank",
-          children: "here"
-        }
-      ),
-      "."
-    ] })
-  ] });
-};
+var import_react5 = __toESM(require("react"), 1);
+var WalletPermissionsFlexbox = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_flexbox2.FlexCol, {
+    gap: 4,
+    ...props
+  }, /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, {
+    fontWeight: "bold",
+    sx: {
+      textAlign: "center"
+    }
+  }, "This will allow XYO to:"), /* @__PURE__ */ import_react5.default.createElement("ul", null, /* @__PURE__ */ import_react5.default.createElement("li", null, "View your wallet account(s) and address(es)"), /* @__PURE__ */ import_react5.default.createElement("li", null, "Read-only access to browse the public blockchain(s) you select")), /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, {
+    variant: "subtitle1",
+    sx: {
+      textAlign: "center"
+    }
+  }, "You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet's settings at anytime. View more on XYO's sovereign data philosophy", " ", /* @__PURE__ */ import_react5.default.createElement(import_material3.Link, {
+    href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
+    sx: {
+      fontWeight: "bold"
+    },
+    target: "_blank"
+  }, "here"), "."));
+}, "WalletPermissionsFlexbox");
 
 // src/components/wallet/dialogs/connect/Dialog.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ConnectWalletDialog = ({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConnectDialog, ...props }) => {
   const { icon, providerName } = activeProvider ?? {};
-  const onConnect = async () => {
+  const onConnect = /* @__PURE__ */ __name(async () => {
     try {
       await activeProvider?.connectWallet?.();
       props.onClose?.({}, "escapeKeyDown");
     } catch (e) {
       console.warn(`Error connecting to wallet: ${e.message}`);
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Dialog, { PaperProps: { sx: { display: "flex", gap: 4 } }, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogContent, { sx: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LinkedProvidersFlexbox, { icon, providerName }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletPermissionsFlexbox, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogActions, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { variant: "outlined", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { variant: "contained", onClick: onConnect, children: "Connect" })
-    ] })
-  ] });
-};
+  }, "onConnect");
+  return /* @__PURE__ */ import_react6.default.createElement(import_material4.Dialog, {
+    PaperProps: {
+      sx: {
+        display: "flex",
+        gap: 4
+      }
+    },
+    ...props
+  }, /* @__PURE__ */ import_react6.default.createElement(import_material4.DialogTitle, {
+    sx: {
+      textAlign: "center"
+    }
+  }, "XYO Wants To Access The Blockchain on Your Behalf"), /* @__PURE__ */ import_react6.default.createElement(import_material4.DialogContent, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4
+    }
+  }, /* @__PURE__ */ import_react6.default.createElement(LinkedProvidersFlexbox, {
+    icon,
+    providerName
+  }), /* @__PURE__ */ import_react6.default.createElement(WalletPermissionsFlexbox, null), /* @__PURE__ */ import_react6.default.createElement(CheckboxFormControl, {
+    onCheckChanged: onIgnoreConnectDialog
+  })), /* @__PURE__ */ import_react6.default.createElement(import_material4.DialogActions, null, /* @__PURE__ */ import_react6.default.createElement(import_material4.Button, {
+    variant: "outlined",
+    onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
+  }, "Close"), /* @__PURE__ */ import_react6.default.createElement(import_material4.Button, {
+    variant: "contained",
+    onClick: onConnect
+  }, "Connect")));
+}, "ConnectWalletDialog");
 
 // src/components/wallet/dialogs/revoke/Dialog.tsx
 var import_material5 = require("@mui/material");
 var import_react_crypto4 = require("@xylabs/react-crypto");
 var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Dialog, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox3.FlexRow, { gap: 2, justifyContent: "start", pl: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_crypto4.ConstrainedImage, { src: activeProvider?.icon, constrainedValue: "24px" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.DialogTitle, { sx: { pl: 0 }, children: [
-        "Revoke ",
-        activeProvider?.providerName,
-        " Access"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.DialogContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Typography, { children: [
-        "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",
-        activeProvider?.providerName,
-        "'s documentation on how to revoke access to this website:"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { children: window.location.origin })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.DialogActions, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Button, { variant: "contained", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }) })
-  ] });
-};
+var import_react7 = __toESM(require("react"), 1);
+var RevokeWalletConnectionDialog = /* @__PURE__ */ __name(({ activeProvider, ...props }) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_material5.Dialog, props, /* @__PURE__ */ import_react7.default.createElement(import_react_flexbox3.FlexRow, {
+    gap: 2,
+    justifyContent: "start",
+    pl: 2
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_crypto4.ConstrainedImage, {
+    src: activeProvider?.icon,
+    constrainedValue: "24px"
+  }), /* @__PURE__ */ import_react7.default.createElement(import_material5.DialogTitle, {
+    sx: {
+      pl: 0
+    }
+  }, "Revoke", activeProvider?.providerName, " ", "Access")), /* @__PURE__ */ import_react7.default.createElement(import_material5.DialogContent, null, /* @__PURE__ */ import_react7.default.createElement(import_material5.Typography, null, "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult", " ", activeProvider?.providerName, "'s documentation on how to revoke access to this website:"), /* @__PURE__ */ import_react7.default.createElement(import_material5.Typography, null, window.location.origin)), /* @__PURE__ */ import_react7.default.createElement(import_material5.DialogActions, null, /* @__PURE__ */ import_react7.default.createElement(import_material5.Button, {
+    variant: "contained",
+    onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
+  }, "Close")));
+}, "RevokeWalletConnectionDialog");
 
 // src/components/wallet/table/cells/Accounts.tsx
 var import_material6 = require("@mui/material");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ConnectedWalletsAccountsTableCell = ({
-  additionalAccounts,
-  currentAccount,
-  totalAccounts,
-  tableCellProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_material6.Tooltip,
-    {
-      sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
-      title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: address }, index)),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Typography, { children: totalAccounts })
-    }
-  ) });
-};
+var import_react8 = __toESM(require("react"), 1);
+var ConnectedWalletsAccountsTableCell = /* @__PURE__ */ __name(({ additionalAccounts, currentAccount, totalAccounts, tableCellProps }) => {
+  return /* @__PURE__ */ import_react8.default.createElement(import_material6.TableCell, tableCellProps, /* @__PURE__ */ import_react8.default.createElement(import_material6.Tooltip, {
+    sx: {
+      cursor: totalAccounts > 0 ? "pointer" : "auto"
+    },
+    title: [
+      ...currentAccount ?? [],
+      ...additionalAccounts ?? []
+    ].map((address, index) => /* @__PURE__ */ import_react8.default.createElement("p", {
+      key: index
+    }, address))
+  }, /* @__PURE__ */ import_react8.default.createElement(import_material6.Typography, null, totalAccounts)));
+}, "ConnectedWalletsAccountsTableCell");
 
 // src/components/wallet/table/cells/Actions.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material7 = require("@mui/material");
 var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ConnectedWalletsActionsTableCell = ({ connected, onConnect, onRevoke, tableCellProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_flexbox4.FlexRow, { gap: 2, justifyContent: "start", children: [
-    connected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Typography, { sx: { display: "inline-flex", gap: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material2.Check, {}),
-      "Connected"
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.Button, { variant: "contained", onClick: onConnect, children: "Connect" }),
-    connected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.IconButton, { onClick: onRevoke, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material2.InfoOutlined, {}) }) : null
-  ] }) });
-};
+var import_react9 = __toESM(require("react"), 1);
+var ConnectedWalletsActionsTableCell = /* @__PURE__ */ __name(({ connected, onConnect, onRevoke, tableCellProps }) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_material7.TableCell, tableCellProps, /* @__PURE__ */ import_react9.default.createElement(import_react_flexbox4.FlexRow, {
+    gap: 2,
+    justifyContent: "start"
+  }, connected ? /* @__PURE__ */ import_react9.default.createElement(import_material7.Typography, {
+    sx: {
+      display: "inline-flex",
+      gap: 0.5
+    }
+  }, /* @__PURE__ */ import_react9.default.createElement(import_icons_material2.Check, null), "Connected") : /* @__PURE__ */ import_react9.default.createElement(import_material7.Button, {
+    variant: "contained",
+    onClick: onConnect
+  }, "Connect"), connected ? /* @__PURE__ */ import_react9.default.createElement(import_material7.IconButton, {
+    onClick: onRevoke
+  }, /* @__PURE__ */ import_react9.default.createElement(import_icons_material2.InfoOutlined, null)) : null));
+}, "ConnectedWalletsActionsTableCell");
 
 // src/components/wallet/table/cells/ChainName.tsx
 var import_material8 = require("@mui/material");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.TableCell, { ...tableCellProps, children: chainName });
-};
+var import_react10 = __toESM(require("react"), 1);
+var ConnectedWalletsChainNameTableCell = /* @__PURE__ */ __name(({ chainName, tableCellProps }) => {
+  return /* @__PURE__ */ import_react10.default.createElement(import_material8.TableCell, tableCellProps, chainName);
+}, "ConnectedWalletsChainNameTableCell");
 
 // src/components/wallet/table/cells/State.tsx
 var import_material9 = require("@mui/material");
-var import_react3 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ConnectedWalletState = ({ connected, walletRdns, tableCellProps }) => {
+var import_react11 = __toESM(require("react"), 1);
+var ConnectedWalletState = /* @__PURE__ */ __name(({ connected, walletRdns, tableCellProps }) => {
   const { disableWallet, enableWallet, wallets } = useEnabledWallets();
-  const enabled = (0, import_react3.useMemo)(() => walletRdns ? wallets[walletRdns].enabled : false, [wallets, walletRdns]);
-  const handleClick = (event) => {
+  const enabled = (0, import_react11.useMemo)(() => walletRdns ? wallets[walletRdns].enabled : false, [
+    wallets,
+    walletRdns
+  ]);
+  const handleClick = /* @__PURE__ */ __name((event) => {
     const checked = event.target?.checked;
     if (walletRdns) {
       checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
-};
+  }, "handleClick");
+  return /* @__PURE__ */ import_react11.default.createElement(import_material9.TableCell, tableCellProps, /* @__PURE__ */ import_react11.default.createElement(import_material9.Switch, {
+    disabled: !connected,
+    checked: connected && enabled,
+    onChange: handleClick
+  }));
+}, "ConnectedWalletState");
 
 // src/components/wallet/table/cells/Wallet.tsx
 var import_material10 = require("@mui/material");
 var import_react_crypto5 = require("@xylabs/react-crypto");
 var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ConnectedWalletsWalletTableCell = ({ icon, walletName, tableCellProps }) => {
+var import_react12 = __toESM(require("react"), 1);
+var ConnectedWalletsWalletTableCell = /* @__PURE__ */ __name(({ icon, walletName, tableCellProps }) => {
   const theme = (0, import_material10.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material10.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox5.FlexRow, { gap: 2, justifyContent: "start", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_crypto5.ConstrainedImage, { constrainedValue: theme.spacing(4), src: icon }),
-    walletName
-  ] }) });
-};
+  return /* @__PURE__ */ import_react12.default.createElement(import_material10.TableCell, tableCellProps, /* @__PURE__ */ import_react12.default.createElement(import_react_flexbox5.FlexRow, {
+    gap: 2,
+    justifyContent: "start"
+  }, /* @__PURE__ */ import_react12.default.createElement(import_react_crypto5.ConstrainedImage, {
+    constrainedValue: theme.spacing(4),
+    src: icon
+  }), walletName));
+}, "ConnectedWalletsWalletTableCell");
 
 // src/components/wallet/table/cells/Cells.tsx
 var ConnectedWalletTableCells = [
@@ -411,7 +473,7 @@ var ConnectedWalletTableCells = [
 
 // src/components/wallet/table/ConnectedWalletsTable.tsx
 var import_material12 = require("@mui/material");
-var import_react6 = require("react");
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/wallet/lib/TableHeadData.ts
 var WalletsTableHeadCells = [
@@ -455,121 +517,138 @@ var WalletsTableHeadCells = [
 // src/components/wallet/table/ConnectedWalletsTableRow.tsx
 var import_material11 = require("@mui/material");
 var import_react_crypto6 = require("@xylabs/react-crypto");
-var import_react4 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var WalletConnectionsTableRow = ({
-  ignoreConnectDialog,
-  onConnectClick,
-  onRevoke,
-  wallet,
-  ...props
-}) => {
+var import_react13 = __toESM(require("react"), 1);
+var WalletConnectionsTableRow = /* @__PURE__ */ __name(({ ignoreConnectDialog, onConnectClick, onRevoke, wallet, ...props }) => {
   const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = (0, import_react_crypto6.useEthWallet)(wallet);
-  const currentAccount = currentAccountFromWallet?.toString() ? [currentAccountFromWallet.toString()] : [];
+  const currentAccount = currentAccountFromWallet?.toString() ? [
+    currentAccountFromWallet.toString()
+  ] : [];
   const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0);
   const connected = !!(currentAccount?.length ?? 0 > 0);
-  const { icon, name, rdns } = (0, import_react4.useMemo)(() => providerInfo ?? { icon: void 0, name: void 0, rdns: void 0 }, [providerInfo]);
-  const activeProvider = (0, import_react4.useMemo)(
-    () => ({
-      connectWallet,
-      icon,
-      providerName: name
-    }),
-    [connectWallet, icon, name]
-  );
-  const onRevokeLocal = (0, import_react4.useCallback)(() => {
+  const { icon, name, rdns } = (0, import_react13.useMemo)(() => providerInfo ?? {
+    icon: void 0,
+    name: void 0,
+    rdns: void 0
+  }, [
+    providerInfo
+  ]);
+  const activeProvider = (0, import_react13.useMemo)(() => ({
+    connectWallet,
+    icon,
+    providerName: name
+  }), [
+    connectWallet,
+    icon,
+    name
+  ]);
+  const onRevokeLocal = (0, import_react13.useCallback)(() => {
     onRevoke?.(activeProvider);
-  }, [activeProvider, onRevoke]);
-  const onConnectLocal = (0, import_react4.useCallback)(async () => {
+  }, [
+    activeProvider,
+    onRevoke
+  ]);
+  const onConnectLocal = (0, import_react13.useCallback)(async () => {
     if (ignoreConnectDialog) {
       await connectWallet?.();
     } else {
       onConnectClick?.(activeProvider);
     }
-  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material11.TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Cell,
-    {
-      additionalAccounts,
-      chainName,
-      connected,
-      currentAccount,
-      icon,
-      onConnect: onConnectLocal,
-      onRevoke: onRevokeLocal,
-      totalAccounts,
-      walletName: name,
-      walletRdns: rdns
-    },
-    index
-  )) });
-};
+  }, [
+    activeProvider,
+    connectWallet,
+    ignoreConnectDialog,
+    onConnectClick
+  ]);
+  return /* @__PURE__ */ import_react13.default.createElement(import_material11.TableRow, props, Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ import_react13.default.createElement(Cell, {
+    key: index,
+    additionalAccounts,
+    chainName,
+    connected,
+    currentAccount,
+    icon,
+    onConnect: onConnectLocal,
+    onRevoke: onRevokeLocal,
+    totalAccounts,
+    walletName: name,
+    walletRdns: rdns
+  })));
+}, "WalletConnectionsTableRow");
 
 // src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
-var import_react5 = require("react");
-var useActiveProviderDialogState = (setActiveProvider) => {
-  const [show, setShow] = (0, import_react5.useState)(false);
-  const onSetActiveProvider = (activeProvider) => {
+var import_react14 = require("react");
+var useActiveProviderDialogState = /* @__PURE__ */ __name((setActiveProvider) => {
+  const [show, setShow] = (0, import_react14.useState)(false);
+  const onSetActiveProvider = /* @__PURE__ */ __name((activeProvider) => {
     setShow(true);
     setActiveProvider(activeProvider);
-  };
-  const onClose = () => {
+  }, "onSetActiveProvider");
+  const onClose = /* @__PURE__ */ __name(() => {
     setShow(false);
     setActiveProvider({});
-  };
-  return [show, onSetActiveProvider, onClose];
-};
+  }, "onClose");
+  return [
+    show,
+    onSetActiveProvider,
+    onClose
+  ];
+}, "useActiveProviderDialogState");
 
 // src/components/wallet/table/ConnectedWalletsTable.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ConnectedWalletsTable = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
-  const [activeProvider, setActiveProvider] = (0, import_react6.useState)();
+var ConnectedWalletsTable = /* @__PURE__ */ __name(({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = (0, import_react15.useState)();
   const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
   const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material12.Table, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableRow, { children: WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableCell, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableBody, { children: (wallets ?? []).map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        WalletConnectionsTableRow,
-        {
-          ignoreConnectDialog,
-          onConnectClick: onSetActiveProviderConnect,
-          onRevoke: onSetActiveProviderRevoke,
-          wallet
-        },
-        wallet.providerInfo?.rdns
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      ConnectWalletDialog,
-      {
-        activeProvider,
-        onClose: onConnectClose,
-        open: showConnect,
-        onIgnoreConnectDialog
-      }
-    )
-  ] });
-};
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(import_material12.Table, props, /* @__PURE__ */ import_react15.default.createElement(import_material12.TableHead, null, /* @__PURE__ */ import_react15.default.createElement(import_material12.TableRow, null, WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ import_react15.default.createElement(import_material12.TableCell, {
+    align,
+    key: id,
+    padding: disablePadding ? "none" : "normal",
+    width: width ?? "auto"
+  }, label)))), /* @__PURE__ */ import_react15.default.createElement(import_material12.TableBody, null, (wallets ?? []).map((wallet) => /* @__PURE__ */ import_react15.default.createElement(WalletConnectionsTableRow, {
+    ignoreConnectDialog,
+    key: wallet.providerInfo?.rdns,
+    onConnectClick: onSetActiveProviderConnect,
+    onRevoke: onSetActiveProviderRevoke,
+    wallet
+  })))), /* @__PURE__ */ import_react15.default.createElement(RevokeWalletConnectionDialog, {
+    open: showRevoke,
+    onClose: onRevokeClose,
+    activeProvider
+  }), /* @__PURE__ */ import_react15.default.createElement(ConnectWalletDialog, {
+    activeProvider,
+    onClose: onConnectClose,
+    open: showConnect,
+    onIgnoreConnectDialog
+  }));
+}, "ConnectedWalletsTable");
 
 // src/components/ConnectedAccountsFlexbox.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ConnectedAccountsFlexbox = (0, import_react7.forwardRef)(
-  ({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
-    const theme = (0, import_material13.useTheme)();
-    const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_flexbox6.FlexCol, { alignItems: "stretch", justifyContent: "start", gap: 2, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_flexbox6.FlexCol, { alignItems: "start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material13.Typography, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
-        totalConnectedAccounts ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material13.Typography, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
-          "Total Connected Accounts: ",
-          totalConnectedAccounts
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
-    ] });
-  }
-);
+var ConnectedAccountsFlexbox = /* @__PURE__ */ (0, import_react16.forwardRef)(({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
+  const theme = (0, import_material13.useTheme)();
+  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox6.FlexCol, {
+    alignItems: "stretch",
+    justifyContent: "start",
+    gap: 2,
+    ref,
+    ...props
+  }, /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox6.FlexCol, {
+    alignItems: "start"
+  }, /* @__PURE__ */ import_react16.default.createElement(import_material13.Typography, {
+    variant: "h2",
+    sx: {
+      mb: 0.5
+    }
+  }, "Detected Web3 Wallets"), totalConnectedAccounts ? /* @__PURE__ */ import_react16.default.createElement(import_material13.Typography, {
+    variant: "subtitle1",
+    color: theme.palette.secondary.main,
+    sx: {
+      opacity: 0.5
+    }
+  }, "Total Connected Accounts:", " ", totalConnectedAccounts) : null), /* @__PURE__ */ import_react16.default.createElement(ConnectedWalletsTable, {
+    wallets: sortedWallets,
+    ignoreConnectDialog,
+    onIgnoreConnectDialog
+  }));
+});
 ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
 //# sourceMappingURL=index.cjs.map