@xyo-network/react-connected-accounts 6.2.0 → 7.0.1

package/dist/browser/index.mjs

@@ -1,12 +1,6 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // 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
@@ -31,26 +25,27 @@ 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 = /* @__PURE__ */ __name(([walletName, wallet]) => {
+    const addWallet = ([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));
+    };
+    Object.entries(wallets).forEach((wallet) => {
+      if (wallet !== void 0) {
+        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);
     };
@@ -58,9 +53,7 @@ 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();
     }
   }
@@ -100,219 +93,236 @@ var EnabledEthWalletConnections = class {
 // src/components/ConnectedAccountsFlexbox.tsx
 import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
-import React13 from "react";
 
 // src/hooks/useDetectWallets.tsx
 import { useWalletDiscovery } from "@xylabs/react-crypto";
 import { useMemo } from "react";
-var sortWallets = /* @__PURE__ */ __name((wallets) => {
+var sortWallets = (wallets) => {
   const result = [];
   for (const wallet of Object.values(wallets)) {
-    if (wallet.allowedAccounts.length > 0) result.unshift(wallet);
-    else result.push(wallet);
+    if (wallet) {
+      if (wallet.allowedAccounts.length > 0)
+        result.unshift(wallet);
+      else
+        result.push(wallet);
+    }
   }
   return result;
-}, "sortWallets");
-var useDetectedWallets = /* @__PURE__ */ __name(() => {
+};
+var useDetectedWallets = () => {
   const wallets = useWalletDiscovery();
-  const sortedWallets = useMemo(() => sortWallets(wallets), [
-    wallets
-  ]);
-  const totalConnectedAccounts = useMemo(() => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0), [
-    sortedWallets
-  ]);
-  return {
-    sortedWallets,
-    totalConnectedAccounts
-  };
-}, "useDetectedWallets");
+  const sortedWallets = useMemo(() => sortWallets(wallets), [wallets]);
+  const totalConnectedAccounts = useMemo(
+    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
+    [sortedWallets]
+  );
+  return { sortedWallets, totalConnectedAccounts };
+};
 
 // src/hooks/useEnabledWallets.tsx
 import { useWalletDiscovery as useWalletDiscovery2 } from "@xylabs/react-crypto";
 import { useMemo as useMemo2, useSyncExternalStore } from "react";
 var enabledEthWallets;
-var useEnabledWalletsInner = /* @__PURE__ */ __name((enabledWalletsRdns) => {
+var useEnabledWalletsInner = (enabledWalletsRdns) => {
   const discoveredWallets = useWalletDiscovery2();
   const wallets = useMemo2(() => {
     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 useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
-}, "useEnabledWalletsInner");
-var useEnabledWallets = /* @__PURE__ */ __name((enabledWalletsRdns) => {
+};
+var useEnabledWallets = (enabledWalletsRdns) => {
   const wallets = useEnabledWalletsInner(enabledWalletsRdns);
-  const enabledWallets = useMemo2(() => (
-    // 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 = useMemo2(
+    () => (
+      // 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
-import { Checkbox, FormControl, FormLabel } from "@mui/material";
-import React from "react";
-var CheckboxFormControl = /* @__PURE__ */ __name(({ onCheckChanged, ...props }) => {
-  return /* @__PURE__ */ React.createElement(FormControl, props, /* @__PURE__ */ React.createElement(FormLabel, null, /* @__PURE__ */ React.createElement(Checkbox, {
-    onChange: /* @__PURE__ */ __name((_, checked) => onCheckChanged?.(checked), "onChange")
-  }), "Do not show this again."));
-}, "CheckboxFormControl");
+import {
+  Checkbox,
+  FormControl,
+  FormLabel
+} from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
+  return /* @__PURE__ */ jsx(FormControl, { ...props, children: /* @__PURE__ */ jsxs(FormLabel, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { onChange: (_, checked) => onCheckChanged?.(checked) }),
+    "Do not show this again."
+  ] }) });
+};
 
 // src/components/wallet/dialogs/connect/Dialog.tsx
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
-import React4 from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
+} from "@mui/material";
 
 // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
 import { SyncAlt } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import { ConstrainedImage } from "@xylabs/react-crypto";
 import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
-import React2 from "react";
 
 // src/img/xyo-color-logo.svg
 var xyo_color_logo_default = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>';
 
 // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
-var LinkedProvidersFlexbox = /* @__PURE__ */ __name(({ icon, providerName, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(FlexRow, {
-    gap: 4,
-    justifyContent: "space-evenly",
-    ...props
-  }, /* @__PURE__ */ React2.createElement(FlexCol, {
-    gap: 0.5
-  }, /* @__PURE__ */ React2.createElement("img", {
-    alt: "XYO Logo",
-    src: xyo_color_logo_default,
-    style: {
-      height: "48px"
-    }
-  }), /* @__PURE__ */ React2.createElement(Typography, {
-    variant: "subtitle1"
-  }, "XYO App")), /* @__PURE__ */ React2.createElement(SyncAlt, {
-    fontSize: "large"
-  }), /* @__PURE__ */ React2.createElement(FlexCol, {
-    gap: 0.5
-  }, /* @__PURE__ */ React2.createElement(ConstrainedImage, {
-    constrainedValue: "48px",
-    src: icon,
-    alt: providerName,
-    style: {
-      height: "48px",
-      maxWidth: "48px"
-    }
-  }), /* @__PURE__ */ React2.createElement(Typography, {
-    variant: "subtitle1"
-  }, providerName)));
-}, "LinkedProvidersFlexbox");
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LinkedProvidersFlexbox = ({
+  icon,
+  providerName,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs2(FlexRow, { gap: 4, justifyContent: "space-evenly", ...props, children: [
+    /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ jsx2("img", { alt: "XYO Logo", src: xyo_color_logo_default, style: { height: "48px" } }),
+      /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: "XYO App" })
+    ] }),
+    /* @__PURE__ */ jsx2(SyncAlt, { fontSize: "large" }),
+    /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ jsx2(
+        ConstrainedImage,
+        {
+          constrainedValue: "48px",
+          src: icon,
+          alt: providerName,
+          style: { height: "48px", maxWidth: "48px" }
+        }
+      ),
+      /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: providerName })
+    ] })
+  ] });
+};
 
 // src/components/wallet/dialogs/connect/Permissions.tsx
 import { Link, Typography as Typography2 } from "@mui/material";
 import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-import React3 from "react";
-var WalletPermissionsFlexbox = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React3.createElement(FlexCol2, {
-    gap: 4,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(Typography2, {
-    fontWeight: "bold",
-    sx: {
-      textAlign: "center"
-    }
-  }, "This will allow XYO to:"), /* @__PURE__ */ React3.createElement("ul", null, /* @__PURE__ */ React3.createElement("li", null, "View your wallet account(s) and address(es)"), /* @__PURE__ */ React3.createElement("li", null, "Read-only access to browse the public blockchain(s) you select")), /* @__PURE__ */ React3.createElement(Typography2, {
-    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__ */ React3.createElement(Link, {
-    href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
-    sx: {
-      fontWeight: "bold"
-    },
-    target: "_blank"
-  }, "here"), "."));
-}, "WalletPermissionsFlexbox");
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WalletPermissionsFlexbox = (props) => {
+  return /* @__PURE__ */ jsxs3(FlexCol2, { gap: 4, ...props, children: [
+    /* @__PURE__ */ jsx3(Typography2, { fontWeight: "bold", sx: { textAlign: "center" }, children: "This will allow XYO to:" }),
+    /* @__PURE__ */ jsxs3("ul", { children: [
+      /* @__PURE__ */ jsx3("li", { children: "View your wallet account(s) and address(es)" }),
+      /* @__PURE__ */ jsx3("li", { children: "Read-only access to browse the public blockchain(s) you select" })
+    ] }),
+    /* @__PURE__ */ jsxs3(Typography2, { 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__ */ jsx3(
+        Link,
+        {
+          href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
+          sx: { fontWeight: "bold" },
+          target: "_blank",
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  ] });
+};
 
 // src/components/wallet/dialogs/connect/Dialog.tsx
-var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConnectWalletDialog = ({
+  activeProvider,
+  onIgnoreConnectDialog,
+  ...props
+}) => {
   const { icon, providerName } = activeProvider ?? {};
-  const onConnect = /* @__PURE__ */ __name(async () => {
+  const onConnect = async () => {
     try {
       await activeProvider?.connectWallet?.();
       props.onClose?.({}, "escapeKeyDown");
     } catch (e) {
       console.warn(`Error connecting to wallet: ${e.message}`);
     }
-  }, "onConnect");
-  return /* @__PURE__ */ React4.createElement(Dialog, {
-    slotProps: {
-      paper: {
-        sx: {
-          display: "flex",
-          gap: 4
-        }
-      }
-    },
-    ...props
-  }, /* @__PURE__ */ React4.createElement(DialogTitle, {
-    sx: {
-      textAlign: "center"
-    }
-  }, "XYO Wants To Access The Blockchain on Your Behalf"), /* @__PURE__ */ React4.createElement(DialogContent, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 4
+  };
+  return /* @__PURE__ */ jsxs4(
+    Dialog,
+    {
+      slotProps: { paper: { sx: { display: "flex", gap: 4 } } },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
+        /* @__PURE__ */ jsxs4(
+          DialogContent,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx4(LinkedProvidersFlexbox, { icon, providerName }),
+              /* @__PURE__ */ jsx4(WalletPermissionsFlexbox, {}),
+              /* @__PURE__ */ jsx4(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(DialogActions, { children: [
+          /* @__PURE__ */ jsx4(Button, { variant: "outlined", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }),
+          /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: onConnect, children: "Connect" })
+        ] })
+      ]
     }
-  }, /* @__PURE__ */ React4.createElement(LinkedProvidersFlexbox, {
-    icon,
-    providerName
-  }), /* @__PURE__ */ React4.createElement(WalletPermissionsFlexbox, null), /* @__PURE__ */ React4.createElement(CheckboxFormControl, {
-    onCheckChanged: onIgnoreConnectDialog
-  })), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button, {
-    variant: "outlined",
-    onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
-  }, "Close"), /* @__PURE__ */ React4.createElement(Button, {
-    variant: "contained",
-    onClick: onConnect
-  }, "Connect")));
-}, "ConnectWalletDialog");
+  );
+};
 
 // src/components/wallet/dialogs/revoke/Dialog.tsx
-import { Button as Button2, Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, Typography as Typography3 } from "@mui/material";
+import {
+  Button as Button2,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogTitle as DialogTitle2,
+  Typography as Typography3
+} from "@mui/material";
 import { ConstrainedImage as ConstrainedImage2 } from "@xylabs/react-crypto";
 import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React5 from "react";
-var RevokeWalletConnectionDialog = /* @__PURE__ */ __name(({ activeProvider, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Dialog2, props, /* @__PURE__ */ React5.createElement(FlexRow2, {
-    gap: 2,
-    justifyContent: "start",
-    pl: 2
-  }, /* @__PURE__ */ React5.createElement(ConstrainedImage2, {
-    src: activeProvider?.icon,
-    constrainedValue: "24px"
-  }), /* @__PURE__ */ React5.createElement(DialogTitle2, {
-    sx: {
-      pl: 0
-    }
-  }, "Revoke", activeProvider?.providerName, " ", "Access")), /* @__PURE__ */ React5.createElement(DialogContent2, null, /* @__PURE__ */ React5.createElement(Typography3, 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__ */ React5.createElement(Typography3, null, globalThis.location.origin)), /* @__PURE__ */ React5.createElement(DialogActions2, null, /* @__PURE__ */ React5.createElement(Button2, {
-    variant: "contained",
-    onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
-  }, "Close")));
-}, "RevokeWalletConnectionDialog");
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
+  return /* @__PURE__ */ jsxs5(Dialog2, { ...props, children: [
+    /* @__PURE__ */ jsxs5(FlexRow2, { gap: 2, justifyContent: "start", pl: 2, children: [
+      /* @__PURE__ */ jsx5(ConstrainedImage2, { src: activeProvider?.icon, constrainedValue: "24px" }),
+      /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { pl: 0 }, children: [
+        "Revoke",
+        activeProvider?.providerName,
+        " ",
+        "Access"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(DialogContent2, { children: [
+      /* @__PURE__ */ jsxs5(Typography3, { 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__ */ jsx5(Typography3, { children: globalThis.location.origin })
+    ] }),
+    /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }) })
+  ] });
+};
 
 // src/components/wallet/lib/TableHeadData.ts
 var WalletsTableHeadCells = [
@@ -354,88 +364,100 @@ var WalletsTableHeadCells = [
 ];
 
 // src/components/wallet/table/cells/Accounts.tsx
-import { TableCell, Tooltip, Typography as Typography4 } from "@mui/material";
-import React6 from "react";
-var ConnectedWalletsAccountsTableCell = /* @__PURE__ */ __name(({ additionalAccounts, currentAccount, totalAccounts, tableCellProps }) => {
-  return /* @__PURE__ */ React6.createElement(TableCell, tableCellProps, /* @__PURE__ */ React6.createElement(Tooltip, {
-    sx: {
-      cursor: totalAccounts > 0 ? "pointer" : "auto"
-    },
-    title: [
-      ...currentAccount ?? [],
-      ...additionalAccounts ?? []
-    ].map((address, index) => /* @__PURE__ */ React6.createElement("p", {
-      key: index
-    }, address))
-  }, /* @__PURE__ */ React6.createElement(Typography4, null, totalAccounts)));
-}, "ConnectedWalletsAccountsTableCell");
+import {
+  TableCell,
+  Tooltip,
+  Typography as Typography4
+} from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ConnectedWalletsAccountsTableCell = ({
+  additionalAccounts,
+  currentAccount,
+  totalAccounts,
+  tableCellProps
+}) => {
+  return /* @__PURE__ */ jsx6(TableCell, { ...tableCellProps, children: /* @__PURE__ */ jsx6(
+    Tooltip,
+    {
+      sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
+      title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ jsx6("p", { children: address }, index)),
+      children: /* @__PURE__ */ jsx6(Typography4, { children: totalAccounts })
+    }
+  ) });
+};
 
 // src/components/wallet/table/cells/Actions.tsx
 import { Check, InfoOutlined } from "@mui/icons-material";
-import { Button as Button3, IconButton, TableCell as TableCell2, Typography as Typography5 } from "@mui/material";
+import {
+  Button as Button3,
+  IconButton,
+  TableCell as TableCell2,
+  Typography as Typography5
+} from "@mui/material";
 import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import React7 from "react";
-var ConnectedWalletsActionsTableCell = /* @__PURE__ */ __name(({ connected, onConnect, onRevoke, tableCellProps }) => {
-  return /* @__PURE__ */ React7.createElement(TableCell2, tableCellProps, /* @__PURE__ */ React7.createElement(FlexRow3, {
-    gap: 2,
-    justifyContent: "start"
-  }, connected ? /* @__PURE__ */ React7.createElement(Typography5, {
-    sx: {
-      display: "inline-flex",
-      gap: 0.5
-    }
-  }, /* @__PURE__ */ React7.createElement(Check, null), "Connected") : /* @__PURE__ */ React7.createElement(Button3, {
-    variant: "contained",
-    onClick: onConnect
-  }, "Connect"), connected ? /* @__PURE__ */ React7.createElement(IconButton, {
-    onClick: onRevoke
-  }, /* @__PURE__ */ React7.createElement(InfoOutlined, null)) : null));
-}, "ConnectedWalletsActionsTableCell");
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ConnectedWalletsActionsTableCell = ({
+  connected,
+  onConnect,
+  onRevoke,
+  tableCellProps
+}) => {
+  return /* @__PURE__ */ jsx7(TableCell2, { ...tableCellProps, children: /* @__PURE__ */ jsxs6(FlexRow3, { gap: 2, justifyContent: "start", children: [
+    connected ? /* @__PURE__ */ jsxs6(Typography5, { sx: { display: "inline-flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx7(Check, {}),
+      "Connected"
+    ] }) : /* @__PURE__ */ jsx7(Button3, { variant: "contained", onClick: onConnect, children: "Connect" }),
+    connected ? /* @__PURE__ */ jsx7(IconButton, { onClick: onRevoke, children: /* @__PURE__ */ jsx7(InfoOutlined, {}) }) : null
+  ] }) });
+};
 
 // src/components/wallet/table/cells/ChainName.tsx
 import { TableCell as TableCell3 } from "@mui/material";
-import React8 from "react";
-var ConnectedWalletsChainNameTableCell = /* @__PURE__ */ __name(({ chainName, tableCellProps }) => {
-  return /* @__PURE__ */ React8.createElement(TableCell3, tableCellProps, chainName);
-}, "ConnectedWalletsChainNameTableCell");
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
+  return /* @__PURE__ */ jsx8(TableCell3, { ...tableCellProps, children: chainName });
+};
 
 // src/components/wallet/table/cells/State.tsx
 import { Switch, TableCell as TableCell4 } from "@mui/material";
-import React9, { useMemo as useMemo3 } from "react";
-var ConnectedWalletState = /* @__PURE__ */ __name(({ connected, walletRdns, tableCellProps }) => {
-  const { disableWallet, enableWallet, wallets } = useEnabledWallets();
-  const enabled = useMemo3(() => walletRdns ? wallets[walletRdns].enabled : false, [
-    wallets,
-    walletRdns
-  ]);
-  const handleClick = /* @__PURE__ */ __name((event) => {
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ConnectedWalletState = ({
+  connected,
+  walletRdns,
+  tableCellProps
+}) => {
+  const {
+    disableWallet,
+    enableWallet,
+    wallets
+  } = useEnabledWallets();
+  const enabled = useMemo3(() => walletRdns ? wallets[walletRdns].enabled : false, [wallets, walletRdns]);
+  const handleClick = (event) => {
     const checked = event.target?.checked;
     if (walletRdns) {
       checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
     }
-  }, "handleClick");
-  return /* @__PURE__ */ React9.createElement(TableCell4, tableCellProps, /* @__PURE__ */ React9.createElement(Switch, {
-    disabled: !connected,
-    checked: connected && enabled,
-    onChange: handleClick
-  }));
-}, "ConnectedWalletState");
+  };
+  return /* @__PURE__ */ jsx9(TableCell4, { ...tableCellProps, children: /* @__PURE__ */ jsx9(Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
+};
 
 // src/components/wallet/table/cells/Wallet.tsx
 import { TableCell as TableCell5, useTheme } from "@mui/material";
 import { ConstrainedImage as ConstrainedImage3 } from "@xylabs/react-crypto";
 import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import React10 from "react";
-var ConnectedWalletsWalletTableCell = /* @__PURE__ */ __name(({ icon, walletName, tableCellProps }) => {
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ConnectedWalletsWalletTableCell = ({
+  icon,
+  walletName,
+  tableCellProps
+}) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React10.createElement(TableCell5, tableCellProps, /* @__PURE__ */ React10.createElement(FlexRow4, {
-    gap: 2,
-    justifyContent: "start"
-  }, /* @__PURE__ */ React10.createElement(ConstrainedImage3, {
-    constrainedValue: theme.spacing(4),
-    src: icon
-  }), walletName));
-}, "ConnectedWalletsWalletTableCell");
+  return /* @__PURE__ */ jsx10(TableCell5, { ...tableCellProps, children: /* @__PURE__ */ jsxs7(FlexRow4, { gap: 2, justifyContent: "start", children: [
+    /* @__PURE__ */ jsx10(ConstrainedImage3, { constrainedValue: theme.spacing(4), src: icon }),
+    walletName
+  ] }) });
+};
 
 // src/components/wallet/table/cells/Cells.tsx
 var ConnectedWalletTableCells = [
@@ -447,145 +469,163 @@ var ConnectedWalletTableCells = [
 ];
 
 // src/components/wallet/table/ConnectedWalletsTable.tsx
-import { Table, TableBody, TableCell as TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
-import React12, { useState as useState2 } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell as TableCell6,
+  TableHead,
+  TableRow as TableRow2
+} from "@mui/material";
+import { useState as useState2 } from "react";
 
 // src/components/wallet/table/ConnectedWalletsTableRow.tsx
 import { TableRow } from "@mui/material";
 import { useEthWallet } from "@xylabs/react-crypto";
-import React11, { useCallback, useMemo as useMemo4 } from "react";
-var WalletConnectionsTableRow = /* @__PURE__ */ __name(({ ignoreConnectDialog, onConnectClick, onRevoke, wallet, ...props }) => {
-  const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = useEthWallet(wallet);
-  const currentAccount = currentAccountFromWallet?.toString() ? [
-    currentAccountFromWallet.toString()
-  ] : [];
+import { useCallback, useMemo as useMemo4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var WalletConnectionsTableRow = ({
+  ignoreConnectDialog,
+  onConnectClick,
+  onRevoke,
+  wallet,
+  ...props
+}) => {
+  const {
+    currentAccount: currentAccountFromWallet,
+    additionalAccounts,
+    chainName,
+    connectWallet,
+    providerInfo
+  } = useEthWallet(wallet);
+  const currentAccount = currentAccountFromWallet?.toString() ? [currentAccountFromWallet.toString()] : [];
   const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0);
   const connected = !!currentAccount?.length;
-  const { icon, name, rdns } = useMemo4(() => providerInfo ?? {
+  const {
+    icon,
+    name,
+    rdns
+  } = useMemo4(() => providerInfo ?? {
     icon: void 0,
     name: void 0,
     rdns: void 0
-  }, [
-    providerInfo
-  ]);
-  const activeProvider = useMemo4(() => ({
-    connectWallet,
-    icon,
-    providerName: name
-  }), [
-    connectWallet,
-    icon,
-    name
-  ]);
+  }, [providerInfo]);
+  const activeProvider = useMemo4(
+    () => ({
+      connectWallet,
+      icon,
+      providerName: name
+    }),
+    [connectWallet, icon, name]
+  );
   const onRevokeLocal = useCallback(() => {
     onRevoke?.(activeProvider);
-  }, [
-    activeProvider,
-    onRevoke
-  ]);
+  }, [activeProvider, onRevoke]);
   const onConnectLocal = useCallback(async () => {
     if (ignoreConnectDialog) {
       await connectWallet?.();
     } else {
       onConnectClick?.(activeProvider);
     }
-  }, [
-    activeProvider,
-    connectWallet,
-    ignoreConnectDialog,
-    onConnectClick
-  ]);
-  return /* @__PURE__ */ React11.createElement(TableRow, props, Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ React11.createElement(Cell, {
-    key: index,
-    additionalAccounts,
-    chainName,
-    connected,
-    currentAccount,
-    icon,
-    onConnect: onConnectLocal,
-    onRevoke: onRevokeLocal,
-    totalAccounts,
-    walletName: name,
-    walletRdns: rdns
-  })));
-}, "WalletConnectionsTableRow");
+  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
+  return /* @__PURE__ */ jsx11(TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ jsx11(
+    Cell,
+    {
+      additionalAccounts,
+      chainName,
+      connected,
+      currentAccount,
+      icon,
+      onConnect: onConnectLocal,
+      onRevoke: onRevokeLocal,
+      totalAccounts,
+      walletName: name,
+      walletRdns: rdns
+    },
+    index
+  )) });
+};
 
 // src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
 import { useState } from "react";
-var useActiveProviderDialogState = /* @__PURE__ */ __name((setActiveProvider) => {
+var useActiveProviderDialogState = (setActiveProvider) => {
   const [show, setShow] = useState(false);
-  const onSetActiveProvider = /* @__PURE__ */ __name((activeProvider) => {
+  const onSetActiveProvider = (activeProvider) => {
     setShow(true);
     setActiveProvider(activeProvider);
-  }, "onSetActiveProvider");
-  const onClose = /* @__PURE__ */ __name(() => {
+  };
+  const onClose = () => {
     setShow(false);
     setActiveProvider({});
-  }, "onClose");
-  return [
-    show,
-    onSetActiveProvider,
-    onClose
-  ];
-}, "useActiveProviderDialogState");
+  };
+  return [show, onSetActiveProvider, onClose];
+};
 
 // src/components/wallet/table/ConnectedWalletsTable.tsx
-var ConnectedWalletsTable = /* @__PURE__ */ __name(({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var ConnectedWalletsTable = ({
+  ignoreConnectDialog,
+  onIgnoreConnectDialog,
+  wallets,
+  ...props
+}) => {
   const [activeProvider, setActiveProvider] = useState2();
   const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
   const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Table, props, /* @__PURE__ */ React12.createElement(TableHead, null, /* @__PURE__ */ React12.createElement(TableRow2, null, WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ React12.createElement(TableCell6, {
-    align,
-    key: id,
-    padding: disablePadding ? "none" : "normal",
-    width: width ?? "auto"
-  }, label)))), /* @__PURE__ */ React12.createElement(TableBody, null, (wallets ?? []).map((wallet) => /* @__PURE__ */ React12.createElement(WalletConnectionsTableRow, {
-    ignoreConnectDialog,
-    key: wallet.providerInfo?.rdns,
-    onConnectClick: onSetActiveProviderConnect,
-    onRevoke: onSetActiveProviderRevoke,
-    wallet
-  })))), /* @__PURE__ */ React12.createElement(RevokeWalletConnectionDialog, {
-    open: showRevoke,
-    onClose: onRevokeClose,
-    activeProvider
-  }), /* @__PURE__ */ React12.createElement(ConnectWalletDialog, {
-    activeProvider,
-    onClose: onConnectClose,
-    open: showConnect,
-    onIgnoreConnectDialog
-  }));
-}, "ConnectedWalletsTable");
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(Table, { ...props, children: [
+      /* @__PURE__ */ jsx12(TableHead, { children: /* @__PURE__ */ jsx12(TableRow2, { children: WalletsTableHeadCells.map(({
+        disablePadding,
+        id,
+        label,
+        align,
+        width
+      }) => /* @__PURE__ */ jsx12(TableCell6, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
+      /* @__PURE__ */ jsx12(TableBody, { children: (wallets ?? []).map((wallet) => /* @__PURE__ */ jsx12(
+        WalletConnectionsTableRow,
+        {
+          ignoreConnectDialog,
+          onConnectClick: onSetActiveProviderConnect,
+          onRevoke: onSetActiveProviderRevoke,
+          wallet
+        },
+        wallet.providerInfo?.rdns
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx12(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
+    /* @__PURE__ */ jsx12(
+      ConnectWalletDialog,
+      {
+        activeProvider,
+        onClose: onConnectClose,
+        open: showConnect,
+        onIgnoreConnectDialog
+      }
+    )
+  ] });
+};
 
 // src/components/ConnectedAccountsFlexbox.tsx
-var ConnectedAccountsFlexbox = /* @__PURE__ */ __name(({ ref, ignoreConnectDialog, onIgnoreConnectDialog, ...props }) => {
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ConnectedAccountsFlexbox = ({
+  ref,
+  ignoreConnectDialog,
+  onIgnoreConnectDialog,
+  ...props
+}) => {
   const theme = useTheme2();
   const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
-  return /* @__PURE__ */ React13.createElement(FlexCol3, {
-    alignItems: "stretch",
-    justifyContent: "start",
-    gap: 2,
-    ref,
-    ...props
-  }, /* @__PURE__ */ React13.createElement(FlexCol3, {
-    alignItems: "start"
-  }, /* @__PURE__ */ React13.createElement(Typography6, {
-    variant: "h2",
-    sx: {
-      mb: 0.5
-    }
-  }, "Detected Web3 Wallets"), totalConnectedAccounts ? /* @__PURE__ */ React13.createElement(Typography6, {
-    variant: "subtitle1",
-    color: theme.vars.palette.secondary.main,
-    sx: {
-      opacity: 0.5
-    }
-  }, "Total Connected Accounts:", " ", totalConnectedAccounts) : null), /* @__PURE__ */ React13.createElement(ConnectedWalletsTable, {
-    wallets: sortedWallets,
-    ignoreConnectDialog,
-    onIgnoreConnectDialog
-  }));
-}, "ConnectedAccountsFlexbox");
+  return /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "stretch", justifyContent: "start", gap: 2, ref, ...props, children: [
+    /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "start", children: [
+      /* @__PURE__ */ jsx13(Typography6, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
+      totalConnectedAccounts ? /* @__PURE__ */ jsxs9(Typography6, { variant: "subtitle1", color: theme.vars.palette.secondary.main, sx: { opacity: 0.5 }, children: [
+        "Total Connected Accounts:",
+        " ",
+        totalConnectedAccounts
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx13(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
+  ] });
+};
 ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
 export {
   CheckboxFormControl,