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

package/dist/browser/index.mjs

@@ -0,0 +1,623 @@
+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
+  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 = /* @__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
+    ];
+    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 React13, { forwardRef } from "react";
+
+// src/hooks/useDetectWallets.tsx
+import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
+import { useEffect, useMemo, useState } from "react";
+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;
+  }, [])
+), "sortWallets");
+var useDetectedWallets = /* @__PURE__ */ __name(() => {
+  const wallets = useWalletDiscovery();
+  const [refresh, setRefresh] = useState(0);
+  const [sortedWallets, setSortedWallets] = useState([]);
+  useEffect(() => {
+    setSortedWallets(sortWallets(wallets));
+  }, [
+    wallets,
+    refresh
+  ]);
+  useEffect(() => {
+    const listener = /* @__PURE__ */ __name(() => {
+      setRefresh((refresh2) => refresh2 + 1);
+    }, "listener");
+    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
+  };
+}, "useDetectedWallets");
+
+// 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) => {
+  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);
+}, "useEnabledWalletsInner");
+var useEnabledWallets = /* @__PURE__ */ __name((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
+  };
+}, "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");
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import React4 from "react";
+
+// 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/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
+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: default2,
+    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");
+
+// 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");
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+  const { icon, providerName } = activeProvider ?? {};
+  const onConnect = /* @__PURE__ */ __name(async () => {
+    try {
+      await activeProvider?.connectWallet?.();
+      props.onClose?.({}, "escapeKeyDown");
+    } catch (e) {
+      console.warn(`Error connecting to wallet: ${e.message}`);
+    }
+  }, "onConnect");
+  return /* @__PURE__ */ React4.createElement(Dialog, {
+    PaperProps: {
+      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
+    }
+  }, /* @__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 { 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, window.location.origin)), /* @__PURE__ */ React5.createElement(DialogActions2, null, /* @__PURE__ */ React5.createElement(Button2, {
+    variant: "contained",
+    onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
+  }, "Close")));
+}, "RevokeWalletConnectionDialog");
+
+// 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");
+
+// 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 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");
+
+// 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");
+
+// 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) => {
+    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");
+
+// 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 }) => {
+  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");
+
+// 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 React12, { 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 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()
+  ] : [];
+  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__ */ 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");
+
+// src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
+import { useState as useState2 } from "react";
+var useActiveProviderDialogState = /* @__PURE__ */ __name((setActiveProvider) => {
+  const [show, setShow] = useState2(false);
+  const onSetActiveProvider = /* @__PURE__ */ __name((activeProvider) => {
+    setShow(true);
+    setActiveProvider(activeProvider);
+  }, "onSetActiveProvider");
+  const onClose = /* @__PURE__ */ __name(() => {
+    setShow(false);
+    setActiveProvider({});
+  }, "onClose");
+  return [
+    show,
+    onSetActiveProvider,
+    onClose
+  ];
+}, "useActiveProviderDialogState");
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+var ConnectedWalletsTable = /* @__PURE__ */ __name(({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = useState3();
+  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");
+
+// src/components/ConnectedAccountsFlexbox.tsx
+var ConnectedAccountsFlexbox = /* @__PURE__ */ forwardRef(({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
+  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.palette.secondary.main,
+    sx: {
+      opacity: 0.5
+    }
+  }, "Total Connected Accounts:", " ", totalConnectedAccounts) : null), /* @__PURE__ */ React13.createElement(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.mjs.map