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

package/src/hooks/useDetectWallets.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react'
 const sortWallets = (wallets: DiscoveredWallets) =>
   // eslint-disable-next-line unicorn/no-array-reduce
   Object.values(wallets).reduce((acc, wallet) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet)
     return acc
   }, [] as EIP6963Connector[])
@@ -23,7 +24,7 @@ export const useDetectedWallets = () => {
    */
   useEffect(() => {
     const listener: (event: CustomEventInit) => void = () => {
-      setRefresh((refresh) => refresh + 1)
+      setRefresh(refresh => refresh + 1)
     }
     window.addEventListener(AccountsChangedEventName, listener)
 

package/src/hooks/useEnabledWallets.tsx

@@ -1,7 +1,7 @@
 import { useWalletDiscovery } from '@xylabs/react-crypto'
 import { useMemo, useSyncExternalStore } from 'react'
 
-import { EnabledEthWalletConnections, EnabledEthWalletsState, EnabledWalletsSavedState } from '../classes/index.js'
+import { EnabledEthWalletConnections, EnabledEthWalletsState, EnabledWalletsSavedState } from '../classes/index.ts'
 
 let enabledEthWallets: EnabledEthWalletConnections | undefined
 

package/src/index.ts

@@ -1,3 +1,3 @@
-export * from './classes/index.js'
-export * from './components/index.js'
-export * from './hooks/index.js'
+export * from './classes/index.ts'
+export * from './components/index.ts'
+export * from './hooks/index.ts'

package/dist/browser/index.js

@@ -1,542 +0,0 @@
-// 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 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";
-import { useEffect, useMemo, useState } from "react";
-var sortWallets = (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 = () => {
-  const wallets = useWalletDiscovery();
-  const [refresh, setRefresh] = useState(0);
-  const [sortedWallets, setSortedWallets] = useState([]);
-  useEffect(() => {
-    setSortedWallets(sortWallets(wallets));
-  }, [wallets, refresh]);
-  useEffect(() => {
-    const listener = () => {
-      setRefresh((refresh2) => refresh2 + 1);
-    };
-    window.addEventListener(AccountsChangedEventName, listener);
-    return () => {
-      window.removeEventListener(AccountsChangedEventName, listener);
-    };
-  }, [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 = (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]);
-  return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
-};
-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]
-  );
-  return {
-    disableWallet: enabledEthWallets?.disableWallet.bind(enabledEthWallets),
-    enableWallet: 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?.(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 { default as default2 } from "./xyo-color-logo-LHR2SMEM.svg";
-import { default as default3 } 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: default2, 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 () => {
-    try {
-      await activeProvider?.connectWallet?.();
-      props.onClose?.({}, "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: () => props.onClose?.({}, "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?.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: window.location.origin })
-    ] }),
-    /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => props.onClose?.({}, "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) => {
-    const checked = event.target?.checked;
-    if (walletRdns) {
-      checked ? enableWallet?.(walletRdns) : 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 TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
-import { useState as useState3 } from "react";
-
-// src/components/wallet/lib/TableHeadData.ts
-var WalletsTableHeadCells = [
-  {
-    disablePadding: false,
-    id: "wallet",
-    label: "Wallet",
-    numeric: false,
-    showOnMobile: true
-  },
-  {
-    disablePadding: false,
-    id: "chain",
-    label: "Chain",
-    numeric: false,
-    showOnMobile: true
-  },
-  {
-    disablePadding: false,
-    id: "accounts",
-    label: "Accounts",
-    numeric: true,
-    showOnMobile: true
-  },
-  {
-    disablePadding: false,
-    id: "actions",
-    label: "Actions",
-    numeric: false,
-    showOnMobile: true
-  },
-  {
-    disablePadding: false,
-    id: "enabled",
-    label: "Enabled",
-    numeric: false,
-    showOnMobile: true
-  }
-];
-
-// src/components/wallet/table/ConnectedWalletsTableRow.tsx
-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 { 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 ?? 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?.(activeProvider);
-  }, [activeProvider, onRevoke]);
-  const onConnectLocal = useCallback(async () => {
-    if (ignoreConnectDialog) {
-      await connectWallet?.();
-    } else {
-      onConnectClick?.(activeProvider);
-    }
-  }, [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 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/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) => /* @__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
-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,
-  useActiveProviderDialogState,
-  useDetectedWallets,
-  useEnabledWallets,
-  useEnabledWalletsInner
-};
-//# sourceMappingURL=index.js.map