@xyo-network/react-connected-accounts 2.66.3 → 2.66.4

package/dist/node/index.js

@@ -1,6 +1,95 @@
+// src/classes/EnabledWallets.ts
+var DEFAULT_LOCAL_STORAGE_KEY = "XYO|EnabledWallets";
+var EnabledEthWalletConnections = class {
+  // control whether or not enabled/disabled preferences are persisted (i.e. in localStorage)
+  persistPreferences = true;
+  // Map of wallet names and their enabled/disabled state
+  enabledWallets = {};
+  // Map of wallet names, their enabled/disabled state, and their wallet class
+  ethWalletsState = {};
+  // list of listeners that want to be notified on wallet changes
+  listeners = [];
+  // key to use in localStorage when persisting preferences
+  localStorageKey = DEFAULT_LOCAL_STORAGE_KEY;
+  constructor(localStorageKey = DEFAULT_LOCAL_STORAGE_KEY) {
+    this.localStorageKey = localStorageKey;
+    this.reviveSettings();
+  }
+  get wallets() {
+    return this.ethWalletsState;
+  }
+  disableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, false);
+  }
+  enableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, true);
+  }
+  /**
+   * Given a new set of wallets, set their enabled state based off previous preferences
+   */
+  resetWallets(wallets) {
+    const newWallets = {};
+    const addWallet = ([walletName, wallet]) => {
+      newWallets[walletName] = {
+        // preserve the existing enabled state
+        enabled: walletName in this.enabledWallets ? this.enabledWallets[walletName] : true,
+        wallet
+      };
+    };
+    Object.entries(wallets).forEach(addWallet.bind(this));
+    this.ethWalletsState = newWallets;
+    this.emitChange();
+  }
+  subscribe(listener) {
+    this.listeners = [...this.listeners, listener];
+    return () => {
+      this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
+    };
+  }
+  toggleEnabledWallet(rdns, enabled) {
+    if (rdns && this.ethWalletsState[rdns]) {
+      this.ethWalletsState[rdns].enabled = enabled;
+      this.ethWalletsState = { ...this.ethWalletsState };
+      this.emitChange();
+    }
+  }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+    this.persistSettings();
+  }
+  isPersistance(method) {
+    if (this.persistPreferences) {
+      method();
+    }
+  }
+  persistSettings() {
+    this.isPersistance(() => {
+      const enabledWallets = Object.entries(this.ethWalletsState).reduce((acc, [rdns, { enabled }]) => {
+        acc[rdns] = enabled;
+        return acc;
+      }, {});
+      localStorage.setItem(this.localStorageKey, JSON.stringify(enabledWallets));
+    });
+  }
+  reviveSettings() {
+    this.isPersistance(() => {
+      const existingEntries = localStorage.getItem(this.localStorageKey);
+      try {
+        const entries = existingEntries ? JSON.parse(existingEntries) : {};
+        this.enabledWallets = entries;
+      } catch (e) {
+        console.warn(`Error parsing saved enabled wallet entries: ${e.message}`);
+      }
+    });
+  }
+};
+
 // src/components/ConnectedAccountsFlexbox.tsx
-import { Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
-import { FlexCol } from "@xylabs/react-flexbox";
+import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
 
 // src/hooks/useDetectWallets.tsx
 import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
@@ -32,8 +121,249 @@ var useDetectedWallets = () => {
   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 = (enabledWalletsRdns) => {
+  const discoveredWallets = useWalletDiscovery2();
+  const wallets = useMemo2(() => {
+    if (enabledEthWallets === void 0)
+      enabledEthWallets = new EnabledEthWalletConnections();
+    enabledEthWallets.resetWallets(discoveredWallets);
+    Object.entries(enabledWalletsRdns ?? {}).forEach(([rdns, enabled]) => enabledEthWallets == null ? void 0 : enabledEthWallets.toggleEnabledWallet(rdns, enabled));
+    return enabledEthWallets;
+  }, [discoveredWallets, enabledWalletsRdns]);
+  return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
+};
+var useEnabledWallets = (enabledWalletsRdns) => {
+  const wallets = useEnabledWalletsInner(enabledWalletsRdns);
+  const enabledWallets = useMemo2(
+    () => Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
+      if (wallet.enabled)
+        acc[walletName] = wallet;
+      return acc;
+    }, {}),
+    [wallets]
+  );
+  return {
+    disableWallet: enabledEthWallets == null ? void 0 : enabledEthWallets.disableWallet.bind(enabledEthWallets),
+    enableWallet: enabledEthWallets == null ? void 0 : enabledEthWallets.enableWallet.bind(enabledEthWallets),
+    enabledWallets,
+    wallets
+  };
+};
+
+// src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
+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 == null ? void 0 : onCheckChanged(checked) }),
+    "Do not show this again."
+  ] }) });
+};
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+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";
+
+// src/img/index.ts
+import xyoColorLogo from "./xyo-color-logo-LHR2SMEM.svg";
+import xyoColorLogoText from "./xyo-color-logo-text-only-QPAW5BSQ.svg";
+
+// src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
+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: xyoColorLogo, 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 { 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
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConnectWalletDialog = ({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+  const { icon, providerName } = activeProvider ?? {};
+  const onConnect = async () => {
+    var _a, _b;
+    try {
+      await ((_a = activeProvider == null ? void 0 : activeProvider.connectWallet) == null ? void 0 : _a.call(activeProvider));
+      (_b = props.onClose) == null ? void 0 : _b.call(props, {}, "escapeKeyDown");
+    } catch (e) {
+      console.warn(`Error connecting to wallet: ${e.message}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(Dialog, { PaperProps: { 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: () => {
+        var _a;
+        return (_a = props.onClose) == null ? void 0 : _a.call(props, {}, "escapeKeyDown");
+      }, children: "Close" }),
+      /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: onConnect, children: "Connect" })
+    ] })
+  ] });
+};
+
+// 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 { ConstrainedImage as ConstrainedImage2 } from "@xylabs/react-crypto";
+import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+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 == null ? void 0 : activeProvider.icon, constrainedValue: "24px" }),
+      /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { pl: 0 }, children: [
+        "Revoke ",
+        activeProvider == null ? void 0 : 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 == null ? void 0 : activeProvider.providerName,
+        "'s documentation on how to revoke access to this website:"
+      ] }),
+      /* @__PURE__ */ jsx5(Typography3, { children: window.location.origin })
+    ] }),
+    /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => {
+      var _a;
+      return (_a = props.onClose) == null ? void 0 : _a.call(props, {}, "escapeKeyDown");
+    }, children: "Close" }) })
+  ] });
+};
+
+// src/components/wallet/table/cells/Accounts.tsx
+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 { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
+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 { 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 { 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) => {
+    var _a;
+    const checked = (_a = event.target) == null ? void 0 : _a.checked;
+    if (walletRdns) {
+      checked ? enableWallet == null ? void 0 : enableWallet(walletRdns) : disableWallet == null ? void 0 : disableWallet(walletRdns);
+    }
+  };
+  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 { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ConnectedWalletsWalletTableCell = ({ icon, walletName, tableCellProps }) => {
+  const theme = useTheme();
+  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 = [
+  ConnectedWalletsWalletTableCell,
+  ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletState
+];
+
 // src/components/wallet/table/ConnectedWalletsTable.tsx
-import { Table, TableBody, TableCell as TableCell2, TableHead, TableRow as TableRow2 } from "@mui/material";
+import { Table, TableBody, TableCell as TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
+import { useState as useState3 } from "react";
 
 // src/components/wallet/lib/TableHeadData.ts
 var WalletsTableHeadCells = [
@@ -64,105 +394,156 @@ var WalletsTableHeadCells = [
     label: "Actions",
     numeric: false,
     showOnMobile: true
+  },
+  {
+    disablePadding: false,
+    id: "enabled",
+    label: "Enabled",
+    numeric: false,
+    showOnMobile: true
   }
 ];
 
 // src/components/wallet/table/ConnectedWalletsTableRow.tsx
-import { Check } from "@mui/icons-material";
-import { Button, TableCell, TableRow, Tooltip, Typography, useTheme } from "@mui/material";
-import { ConstrainedImage, useEthWallet } from "@xylabs/react-crypto";
-import { FlexRow } from "@xylabs/react-flexbox";
-import { useMemo as useMemo2 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var WalletConnectionsTableRowInner = ({
-  additionalAccounts,
-  currentAccount,
-  chainName,
-  icon,
-  name,
+import { TableRow } from "@mui/material";
+import { useEthWallet } from "@xylabs/react-crypto";
+import { useCallback, useMemo as useMemo4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var WalletConnectionsTableRow = ({
+  ignoreConnectDialog,
+  onConnectClick,
+  onRevoke,
+  wallet,
   ...props
 }) => {
-  const theme = useTheme();
+  const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = useEthWallet(wallet);
+  const currentAccount = (currentAccountFromWallet == null ? void 0 : currentAccountFromWallet.toString()) ? [currentAccountFromWallet.toString()] : [];
   const totalAccounts = ((additionalAccounts == null ? void 0 : additionalAccounts.length) ?? 0) + ((currentAccount == null ? void 0 : currentAccount.length) ?? 0);
-  const connected = (currentAccount == null ? void 0 : currentAccount.length) ?? 0 > 0;
-  const Cells = useMemo2(() => {
-    const TableCells = {
-      wallet: /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: 2, justifyContent: "start", children: [
-        /* @__PURE__ */ jsx(ConstrainedImage, { constrainedValue: theme.spacing(4), src: icon }),
-        name
-      ] }) }, 1),
-      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
-      chain: /* @__PURE__ */ jsx(TableCell, { children: chainName }, 2),
-      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
-      accounts: /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
-          title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ jsx("p", { children: address }, index)),
-          children: /* @__PURE__ */ jsx(Typography, { children: totalAccounts })
-        }
-      ) }, 3),
-      actions: /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(FlexRow, { gap: 2, justifyContent: "start", children: [
-        connected ? /* @__PURE__ */ jsxs(Typography, { sx: { display: "inline-flex", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(Check, {}),
-          "Connected"
-        ] }) : /* @__PURE__ */ jsx(Button, { variant: "contained", children: "Connect" }),
-        connected ? /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "error", children: "Revoke" }) : null
-      ] }) }, 4)
-    };
-    return TableCells;
-  }, [additionalAccounts, chainName, connected, currentAccount, icon, name, theme, totalAccounts]);
-  return /* @__PURE__ */ jsx(TableRow, { ...props, children: Object.values(Cells).map((cell) => cell) });
-};
-var WalletConnectionsTableRow = ({ wallet, ...props }) => {
-  const { currentAccount, additionalAccounts, chainName, providerInfo, providerName } = useEthWallet(wallet);
-  const currentAccountString = currentAccount == null ? void 0 : currentAccount.toString();
-  return /* @__PURE__ */ jsx(
-    WalletConnectionsTableRowInner,
+  const connected = !!((currentAccount == null ? void 0 : currentAccount.length) ?? 0 > 0);
+  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]
+  );
+  const onRevokeLocal = useCallback(() => {
+    onRevoke == null ? void 0 : onRevoke(activeProvider);
+  }, [activeProvider, onRevoke]);
+  const onConnectLocal = useCallback(async () => {
+    if (ignoreConnectDialog) {
+      await (connectWallet == null ? void 0 : connectWallet());
+    } else {
+      onConnectClick == null ? void 0 : onConnectClick(activeProvider);
+    }
+  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
+  return /* @__PURE__ */ jsx11(TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ jsx11(
+    Cell,
     {
       additionalAccounts,
-      currentAccount: currentAccountString ? [currentAccountString] : [],
       chainName,
-      icon: providerInfo == null ? void 0 : providerInfo.icon,
-      name: providerName,
-      ...props
-    }
-  );
+      connected,
+      currentAccount,
+      icon,
+      onConnect: onConnectLocal,
+      onRevoke: onRevokeLocal,
+      totalAccounts,
+      walletName: name,
+      walletRdns: rdns
+    },
+    index
+  )) });
 };
 
-// src/components/wallet/table/ConnectedWalletsTable.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ConnectedWalletsTable = ({ wallets, ...props }) => {
-  return /* @__PURE__ */ jsxs2(Table, { ...props, children: [
-    /* @__PURE__ */ jsx2(TableHead, { children: /* @__PURE__ */ jsx2(TableRow2, { children: WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ jsx2(TableCell2, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
-    /* @__PURE__ */ jsx2(TableBody, { children: (wallets ?? []).map((wallet) => {
-      var _a;
-      return /* @__PURE__ */ jsx2(WalletConnectionsTableRow, { wallet }, (_a = wallet.providerInfo) == null ? void 0 : _a.rdns);
-    }) })
-  ] });
+// src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
+import { useState as useState2 } from "react";
+var useActiveProviderDialogState = (setActiveProvider) => {
+  const [show, setShow] = useState2(false);
+  const onSetActiveProvider = (activeProvider) => {
+    setShow(true);
+    setActiveProvider(activeProvider);
+  };
+  const onClose = () => {
+    setShow(false);
+    setActiveProvider({});
+  };
+  return [show, onSetActiveProvider, onClose];
 };
 
-// src/components/ConnectedAccountsFlexbox.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ConnectedAccountsFlexbox = (props) => {
-  const theme = useTheme2();
-  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
-  return /* @__PURE__ */ jsxs3(FlexCol, { alignItems: "stretch", justifyContent: "start", gap: 2, ...props, children: [
-    /* @__PURE__ */ jsxs3(FlexCol, { alignItems: "start", children: [
-      /* @__PURE__ */ jsx3(Typography2, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
-      totalConnectedAccounts ? /* @__PURE__ */ jsxs3(Typography2, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
-        "Total Connected Accounts: ",
-        totalConnectedAccounts
-      ] }) : null
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var ConnectedWalletsTable = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = useState3();
+  const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
+  const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
+  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) => {
+        var _a;
+        return /* @__PURE__ */ jsx12(
+          WalletConnectionsTableRow,
+          {
+            ignoreConnectDialog,
+            onConnectClick: onSetActiveProviderConnect,
+            onRevoke: onSetActiveProviderRevoke,
+            wallet
+          },
+          (_a = wallet.providerInfo) == null ? void 0 : _a.rdns
+        );
+      }) })
     ] }),
-    /* @__PURE__ */ jsx3(ConnectedWalletsTable, { wallets: sortedWallets })
+    /* @__PURE__ */ jsx12(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
+    /* @__PURE__ */ jsx12(
+      ConnectWalletDialog,
+      {
+        activeProvider,
+        onClose: onConnectClose,
+        open: showConnect,
+        onIgnoreConnectDialog
+      }
+    )
   ] });
 };
+
+// src/components/ConnectedAccountsFlexbox.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ConnectedAccountsFlexbox = forwardRef(
+  ({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
+    const theme = useTheme2();
+    const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
+    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.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,
+  ConnectWalletDialog,
   ConnectedAccountsFlexbox,
+  ConnectedWalletState,
+  ConnectedWalletTableCells,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletsChainNameTableCell,
   ConnectedWalletsTable,
+  ConnectedWalletsWalletTableCell,
+  EnabledEthWalletConnections,
+  RevokeWalletConnectionDialog,
   WalletConnectionsTableRow,
-  WalletConnectionsTableRowInner,
-  useDetectedWallets
+  useActiveProviderDialogState,
+  useDetectedWallets,
+  useEnabledWallets,
+  useEnabledWalletsInner
 };
 //# sourceMappingURL=index.js.map