@xyo-network/react-connected-accounts 2.66.3

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.cts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TableRowProps } from '@mui/material';
+import { EthWalletConnectorBase } from '@xylabs/react-crypto';
+export interface WalletConnectionsTableRowInnerProps extends TableRowProps {
+    additionalAccounts?: string[];
+    chainName?: string;
+    currentAccount?: string[];
+    icon?: string;
+    name?: string;
+}
+export declare const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps>;
+export interface WalletConnectionsTableRow extends TableRowProps {
+    wallet: EthWalletConnectorBase;
+}
+export declare const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow>;
+//# sourceMappingURL=ConnectedWalletsTableRow.d.ts.map

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedWalletsTableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/ConnectedWalletsTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAA+B,aAAa,EAAiC,MAAM,eAAe,CAAA;AACzG,OAAO,EAAoB,sBAAsB,EAAgB,MAAM,sBAAsB,CAAA;AAI7F,MAAM,WAAW,mCAAoC,SAAQ,aAAa;IACxE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CA8DxF,CAAA;AAED,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,MAAM,EAAE,sBAAsB,CAAA;CAC/B;AACD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAazE,CAAA"}

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.mts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TableRowProps } from '@mui/material';
+import { EthWalletConnectorBase } from '@xylabs/react-crypto';
+export interface WalletConnectionsTableRowInnerProps extends TableRowProps {
+    additionalAccounts?: string[];
+    chainName?: string;
+    currentAccount?: string[];
+    icon?: string;
+    name?: string;
+}
+export declare const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps>;
+export interface WalletConnectionsTableRow extends TableRowProps {
+    wallet: EthWalletConnectorBase;
+}
+export declare const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow>;
+//# sourceMappingURL=ConnectedWalletsTableRow.d.ts.map

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedWalletsTableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/ConnectedWalletsTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAA+B,aAAa,EAAiC,MAAM,eAAe,CAAA;AACzG,OAAO,EAAoB,sBAAsB,EAAgB,MAAM,sBAAsB,CAAA;AAI7F,MAAM,WAAW,mCAAoC,SAAQ,aAAa;IACxE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CA8DxF,CAAA;AAED,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,MAAM,EAAE,sBAAsB,CAAA;CAC/B;AACD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAazE,CAAA"}

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TableRowProps } from '@mui/material';
+import { EthWalletConnectorBase } from '@xylabs/react-crypto';
+export interface WalletConnectionsTableRowInnerProps extends TableRowProps {
+    additionalAccounts?: string[];
+    chainName?: string;
+    currentAccount?: string[];
+    icon?: string;
+    name?: string;
+}
+export declare const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps>;
+export interface WalletConnectionsTableRow extends TableRowProps {
+    wallet: EthWalletConnectorBase;
+}
+export declare const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow>;
+//# sourceMappingURL=ConnectedWalletsTableRow.d.ts.map

package/dist/node/components/wallet/table/ConnectedWalletsTableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedWalletsTableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/ConnectedWalletsTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAA+B,aAAa,EAAiC,MAAM,eAAe,CAAA;AACzG,OAAO,EAAoB,sBAAsB,EAAgB,MAAM,sBAAsB,CAAA;AAI7F,MAAM,WAAW,mCAAoC,SAAQ,aAAa;IACxE,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CA8DxF,CAAA;AAED,MAAM,WAAW,yBAA0B,SAAQ,aAAa;IAC9D,MAAM,EAAE,sBAAsB,CAAA;CAC/B;AACD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAazE,CAAA"}

package/dist/node/components/wallet/table/index.d.cts

@@ -0,0 +1,3 @@
+export * from './ConnectedWalletsTable';
+export * from './ConnectedWalletsTableRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/wallet/table/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/node/components/wallet/table/index.d.mts

@@ -0,0 +1,3 @@
+export * from './ConnectedWalletsTable';
+export * from './ConnectedWalletsTableRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/wallet/table/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/node/components/wallet/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ConnectedWalletsTable';
+export * from './ConnectedWalletsTableRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/wallet/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/wallet/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/node/hooks/index.d.cts

@@ -0,0 +1,2 @@
+export * from './useDetectWallets';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/node/hooks/index.d.mts

@@ -0,0 +1,2 @@
+export * from './useDetectWallets';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/node/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDetectWallets';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/node/hooks/useDetectWallets.d.cts

@@ -0,0 +1,6 @@
+import { EIP6963Connector } from '@xylabs/react-crypto';
+export declare const useDetectedWallets: () => {
+    sortedWallets: EIP6963Connector[];
+    totalConnectedAccounts: number;
+};
+//# sourceMappingURL=useDetectWallets.d.ts.map

package/dist/node/hooks/useDetectWallets.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectWallets.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDetectWallets.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,gBAAgB,EAAsB,MAAM,sBAAsB,CAAA;AASxH,eAAO,MAAM,kBAAkB;;;CA8B9B,CAAA"}

package/dist/node/hooks/useDetectWallets.d.mts

@@ -0,0 +1,6 @@
+import { EIP6963Connector } from '@xylabs/react-crypto';
+export declare const useDetectedWallets: () => {
+    sortedWallets: EIP6963Connector[];
+    totalConnectedAccounts: number;
+};
+//# sourceMappingURL=useDetectWallets.d.ts.map

package/dist/node/hooks/useDetectWallets.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectWallets.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDetectWallets.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,gBAAgB,EAAsB,MAAM,sBAAsB,CAAA;AASxH,eAAO,MAAM,kBAAkB;;;CA8B9B,CAAA"}

package/dist/node/hooks/useDetectWallets.d.ts

@@ -0,0 +1,6 @@
+import { EIP6963Connector } from '@xylabs/react-crypto';
+export declare const useDetectedWallets: () => {
+    sortedWallets: EIP6963Connector[];
+    totalConnectedAccounts: number;
+};
+//# sourceMappingURL=useDetectWallets.d.ts.map

package/dist/node/hooks/useDetectWallets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectWallets.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDetectWallets.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,gBAAgB,EAAsB,MAAM,sBAAsB,CAAA;AASxH,eAAO,MAAM,kBAAkB;;;CA8B9B,CAAA"}

package/dist/node/index.cjs

@@ -0,0 +1,199 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ConnectedAccountsFlexbox: () => ConnectedAccountsFlexbox,
+  ConnectedWalletsTable: () => ConnectedWalletsTable,
+  WalletConnectionsTableRow: () => WalletConnectionsTableRow,
+  WalletConnectionsTableRowInner: () => WalletConnectionsTableRowInner,
+  useDetectedWallets: () => useDetectedWallets
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/ConnectedAccountsFlexbox.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+
+// src/hooks/useDetectWallets.tsx
+var import_react_crypto = require("@xylabs/react-crypto");
+var import_react = require("react");
+var sortWallets = (wallets) => Object.values(wallets).reduce((acc, wallet) => {
+  wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet);
+  return acc;
+}, []);
+var useDetectedWallets = () => {
+  const wallets = (0, import_react_crypto.useWalletDiscovery)();
+  const [refresh, setRefresh] = (0, import_react.useState)(0);
+  const [sortedWallets, setSortedWallets] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    setSortedWallets(sortWallets(wallets));
+  }, [wallets, refresh]);
+  (0, import_react.useEffect)(() => {
+    const listener = () => {
+      setRefresh((refresh2) => refresh2 + 1);
+    };
+    window.addEventListener(import_react_crypto.AccountsChangedEventName, listener);
+    return () => {
+      window.removeEventListener(import_react_crypto.AccountsChangedEventName, listener);
+    };
+  }, [wallets]);
+  const totalConnectedAccounts = (0, import_react.useMemo)(
+    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
+    [sortedWallets]
+  );
+  return { sortedWallets, totalConnectedAccounts };
+};
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+var import_material2 = require("@mui/material");
+
+// 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
+  }
+];
+
+// src/components/wallet/table/ConnectedWalletsTableRow.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material = require("@mui/material");
+var import_react_crypto2 = require("@xylabs/react-crypto");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var WalletConnectionsTableRowInner = ({
+  additionalAccounts,
+  currentAccount,
+  chainName,
+  icon,
+  name,
+  ...props
+}) => {
+  const theme = (0, import_material.useTheme)();
+  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 = (0, import_react2.useMemo)(() => {
+    const TableCells = {
+      wallet: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, justifyContent: "start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_crypto2.ConstrainedImage, { constrainedValue: theme.spacing(4), src: icon }),
+        name
+      ] }) }, 1),
+      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+      chain: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { children: chainName }, 2),
+      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+      accounts: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_material.Tooltip,
+        {
+          sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
+          title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: address }, index)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: totalAccounts })
+        }
+      ) }, 3),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexRow, { gap: 2, justifyContent: "start", children: [
+        connected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { sx: { display: "inline-flex", gap: 0.5 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Check, {}),
+          "Connected"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant: "contained", children: "Connect" }),
+        connected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { variant: "outlined", color: "error", children: "Revoke" }) : null
+      ] }) }, 4)
+    };
+    return TableCells;
+  }, [additionalAccounts, chainName, connected, currentAccount, icon, name, theme, totalAccounts]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableRow, { ...props, children: Object.values(Cells).map((cell) => cell) });
+};
+var WalletConnectionsTableRow = ({ wallet, ...props }) => {
+  const { currentAccount, additionalAccounts, chainName, providerInfo, providerName } = (0, import_react_crypto2.useEthWallet)(wallet);
+  const currentAccountString = currentAccount == null ? void 0 : currentAccount.toString();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    WalletConnectionsTableRowInner,
+    {
+      additionalAccounts,
+      currentAccount: currentAccountString ? [currentAccountString] : [],
+      chainName,
+      icon: providerInfo == null ? void 0 : providerInfo.icon,
+      name: providerName,
+      ...props
+    }
+  );
+};
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ConnectedWalletsTable = ({ wallets, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Table, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TableRow, { children: WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TableCell, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TableBody, { children: (wallets ?? []).map((wallet) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletConnectionsTableRow, { wallet }, (_a = wallet.providerInfo) == null ? void 0 : _a.rdns);
+    }) })
+  ] });
+};
+
+// src/components/ConnectedAccountsFlexbox.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ConnectedAccountsFlexbox = (props) => {
+  const theme = (0, import_material3.useTheme)();
+  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox2.FlexCol, { alignItems: "stretch", justifyContent: "start", gap: 2, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox2.FlexCol, { alignItems: "start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
+      totalConnectedAccounts ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Typography, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
+        "Total Connected Accounts: ",
+        totalConnectedAccounts
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectedWalletsTable, { wallets: sortedWallets })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectedAccountsFlexbox,
+  ConnectedWalletsTable,
+  WalletConnectionsTableRow,
+  WalletConnectionsTableRowInner,
+  useDetectedWallets
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/ConnectedAccountsFlexbox.tsx","../../src/hooks/useDetectWallets.tsx","../../src/components/wallet/table/ConnectedWalletsTable.tsx","../../src/components/wallet/lib/TableHeadData.ts","../../src/components/wallet/table/ConnectedWalletsTableRow.tsx"],"sourcesContent":["export * from './components'\nexport * from './hooks'\n","import { Typography, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\n\nimport { useDetectedWallets } from '../hooks'\nimport { ConnectedWalletsTable } from './wallet'\n\nexport const ConnectedAccountsFlexbox: React.FC<FlexBoxProps> = (props) => {\n  const theme = useTheme()\n\n  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets()\n\n  return (\n    <FlexCol alignItems=\"stretch\" justifyContent=\"start\" gap={2} {...props}>\n      <FlexCol alignItems=\"start\">\n        <Typography variant={'h2'} sx={{ mb: 0.5 }}>\n          Detected Web3 Wallets\n        </Typography>\n        {totalConnectedAccounts ? (\n          <Typography variant={'subtitle1'} color={theme.palette.secondary.main} sx={{ opacity: 0.5 }}>\n            Total Connected Accounts: {totalConnectedAccounts}\n          </Typography>\n        ) : null}\n      </FlexCol>\n      <ConnectedWalletsTable wallets={sortedWallets} />\n    </FlexCol>\n  )\n}\n","import { AccountsChangedEventName, DiscoveredWallets, EIP6963Connector, useWalletDiscovery } from '@xylabs/react-crypto'\nimport { useEffect, useMemo, useState } from 'react'\n\nconst sortWallets = (wallets: DiscoveredWallets) =>\n  Object.values(wallets).reduce((acc, wallet) => {\n    wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet)\n    return acc\n  }, [] as EIP6963Connector[])\n\nexport const useDetectedWallets = () => {\n  const wallets = useWalletDiscovery()\n  const [refresh, setRefresh] = useState(0)\n  const [sortedWallets, setSortedWallets] = useState<EIP6963Connector[]>([])\n\n  useEffect(() => {\n    setSortedWallets(sortWallets(wallets))\n  }, [wallets, refresh])\n\n  /**\n   * Rely on custom events from the wallet base class to know when accounts are changed.\n   * This approach prevents the need to loop through all wallets and set up individual listeners.\n   */\n  useEffect(() => {\n    const listener: (event: CustomEventInit) => void = () => {\n      setRefresh((refresh) => refresh + 1)\n    }\n    window.addEventListener(AccountsChangedEventName, listener)\n\n    return () => {\n      window.removeEventListener(AccountsChangedEventName, listener)\n    }\n  }, [wallets])\n\n  const totalConnectedAccounts = useMemo(\n    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),\n    [sortedWallets],\n  )\n\n  return { sortedWallets, totalConnectedAccounts }\n}\n","import { Table, TableBody, TableCell, TableHead, TableProps, TableRow } from '@mui/material'\nimport { EIP6963Connector } from '@xylabs/react-crypto'\n\nimport { WalletsTableHeadCells } from '../lib'\nimport { WalletConnectionsTableRow } from './ConnectedWalletsTableRow'\n\nexport interface ConnectedWalletsTableProps extends TableProps {\n  wallets?: EIP6963Connector[]\n}\n\nexport const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps> = ({ wallets, ...props }) => {\n  return (\n    <Table {...props}>\n      <TableHead>\n        <TableRow>\n          {WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => (\n            <TableCell align={align} key={id} padding={disablePadding ? 'none' : 'normal'} width={width ?? 'auto'}>\n              {label}\n            </TableCell>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {(wallets ?? []).map((wallet) => (\n          <WalletConnectionsTableRow wallet={wallet} key={wallet.providerInfo?.rdns} />\n        ))}\n      </TableBody>\n    </Table>\n  )\n}\n","import { TableHeadCell } from '@xyo-network/react-table'\n\nexport const WalletsTableHeadCells: TableHeadCell[] = [\n  {\n    disablePadding: false,\n    id: 'wallet',\n    label: 'Wallet',\n    numeric: false,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'chain',\n    label: 'Chain',\n    numeric: false,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'accounts',\n    label: 'Accounts',\n    numeric: true,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'actions',\n    label: 'Actions',\n    numeric: false,\n    showOnMobile: true,\n  },\n]\n","import { Check } from '@mui/icons-material'\nimport { Button, TableCell, TableRow, TableRowProps, Tooltip, Typography, useTheme } from '@mui/material'\nimport { ConstrainedImage, EthWalletConnectorBase, useEthWallet } from '@xylabs/react-crypto'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { ReactNode, useMemo } from 'react'\n\nexport interface WalletConnectionsTableRowInnerProps extends TableRowProps {\n  additionalAccounts?: string[]\n  chainName?: string\n  currentAccount?: string[]\n  icon?: string\n  name?: string\n}\n\nexport const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps> = ({\n  additionalAccounts,\n  currentAccount,\n  chainName,\n  icon,\n  name,\n  ...props\n}) => {\n  const theme = useTheme()\n\n  const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0)\n  const connected = currentAccount?.length ?? 0 > 0\n\n  const Cells = useMemo(() => {\n    const TableCells: Record<string, ReactNode> = {\n      wallet: (\n        <TableCell key={1}>\n          <FlexRow gap={2} justifyContent=\"start\">\n            <ConstrainedImage constrainedValue={theme.spacing(4)} src={icon} />\n            {name}\n          </FlexRow>\n        </TableCell>\n      ),\n      // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n      chain: <TableCell key={2}>{chainName}</TableCell>,\n      // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n      accounts: (\n        <TableCell key={3}>\n          <Tooltip\n            sx={{ cursor: totalAccounts > 0 ? 'pointer' : 'auto' }}\n            title={[...(currentAccount ?? []), ...(additionalAccounts ?? [])].map((address, index) => (\n              <p key={index}>{address}</p>\n            ))}\n          >\n            <Typography>{totalAccounts}</Typography>\n          </Tooltip>\n        </TableCell>\n      ),\n      actions: (\n        <TableCell key={4}>\n          <FlexRow gap={2} justifyContent=\"start\">\n            {connected ? (\n              <Typography sx={{ display: 'inline-flex', gap: 0.5 }}>\n                <Check />\n                Connected\n              </Typography>\n            ) : (\n              <Button variant={'contained'}>Connect</Button>\n            )}\n            {connected ? (\n              <Button variant={'outlined'} color={'error'}>\n                Revoke\n              </Button>\n            ) : null}\n          </FlexRow>\n        </TableCell>\n      ),\n    }\n    return TableCells\n  }, [additionalAccounts, chainName, connected, currentAccount, icon, name, theme, totalAccounts])\n\n  return <TableRow {...props}>{Object.values(Cells).map((cell) => cell)}</TableRow>\n}\n\nexport interface WalletConnectionsTableRow extends TableRowProps {\n  wallet: EthWalletConnectorBase\n}\nexport const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow> = ({ wallet, ...props }) => {\n  const { currentAccount, additionalAccounts, chainName, providerInfo, providerName } = useEthWallet(wallet)\n  const currentAccountString = currentAccount?.toString()\n  return (\n    <WalletConnectionsTableRowInner\n      additionalAccounts={additionalAccounts}\n      currentAccount={currentAccountString ? [currentAccountString] : []}\n      chainName={chainName}\n      icon={providerInfo?.icon}\n      name={providerName}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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","names":["import_material","import_react_flexbox","refresh","import_material","import_react_crypto","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/node/index.d.cts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.d.mts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}

package/dist/node/index.js

@@ -0,0 +1,168 @@
+// src/components/ConnectedAccountsFlexbox.tsx
+import { Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+
+// src/hooks/useDetectWallets.tsx
+import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
+import { useEffect, useMemo, useState } from "react";
+var sortWallets = (wallets) => 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/components/wallet/table/ConnectedWalletsTable.tsx
+import { Table, TableBody, TableCell as TableCell2, TableHead, TableRow as TableRow2 } from "@mui/material";
+
+// 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
+  }
+];
+
+// 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,
+  ...props
+}) => {
+  const theme = useTheme();
+  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,
+    {
+      additionalAccounts,
+      currentAccount: currentAccountString ? [currentAccountString] : [],
+      chainName,
+      icon: providerInfo == null ? void 0 : providerInfo.icon,
+      name: providerName,
+      ...props
+    }
+  );
+};
+
+// 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/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
+    ] }),
+    /* @__PURE__ */ jsx3(ConnectedWalletsTable, { wallets: sortedWallets })
+  ] });
+};
+export {
+  ConnectedAccountsFlexbox,
+  ConnectedWalletsTable,
+  WalletConnectionsTableRow,
+  WalletConnectionsTableRowInner,
+  useDetectedWallets
+};
+//# sourceMappingURL=index.js.map

package/dist/node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ConnectedAccountsFlexbox.tsx","../../src/hooks/useDetectWallets.tsx","../../src/components/wallet/table/ConnectedWalletsTable.tsx","../../src/components/wallet/lib/TableHeadData.ts","../../src/components/wallet/table/ConnectedWalletsTableRow.tsx"],"sourcesContent":["import { Typography, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\n\nimport { useDetectedWallets } from '../hooks'\nimport { ConnectedWalletsTable } from './wallet'\n\nexport const ConnectedAccountsFlexbox: React.FC<FlexBoxProps> = (props) => {\n  const theme = useTheme()\n\n  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets()\n\n  return (\n    <FlexCol alignItems=\"stretch\" justifyContent=\"start\" gap={2} {...props}>\n      <FlexCol alignItems=\"start\">\n        <Typography variant={'h2'} sx={{ mb: 0.5 }}>\n          Detected Web3 Wallets\n        </Typography>\n        {totalConnectedAccounts ? (\n          <Typography variant={'subtitle1'} color={theme.palette.secondary.main} sx={{ opacity: 0.5 }}>\n            Total Connected Accounts: {totalConnectedAccounts}\n          </Typography>\n        ) : null}\n      </FlexCol>\n      <ConnectedWalletsTable wallets={sortedWallets} />\n    </FlexCol>\n  )\n}\n","import { AccountsChangedEventName, DiscoveredWallets, EIP6963Connector, useWalletDiscovery } from '@xylabs/react-crypto'\nimport { useEffect, useMemo, useState } from 'react'\n\nconst sortWallets = (wallets: DiscoveredWallets) =>\n  Object.values(wallets).reduce((acc, wallet) => {\n    wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet)\n    return acc\n  }, [] as EIP6963Connector[])\n\nexport const useDetectedWallets = () => {\n  const wallets = useWalletDiscovery()\n  const [refresh, setRefresh] = useState(0)\n  const [sortedWallets, setSortedWallets] = useState<EIP6963Connector[]>([])\n\n  useEffect(() => {\n    setSortedWallets(sortWallets(wallets))\n  }, [wallets, refresh])\n\n  /**\n   * Rely on custom events from the wallet base class to know when accounts are changed.\n   * This approach prevents the need to loop through all wallets and set up individual listeners.\n   */\n  useEffect(() => {\n    const listener: (event: CustomEventInit) => void = () => {\n      setRefresh((refresh) => refresh + 1)\n    }\n    window.addEventListener(AccountsChangedEventName, listener)\n\n    return () => {\n      window.removeEventListener(AccountsChangedEventName, listener)\n    }\n  }, [wallets])\n\n  const totalConnectedAccounts = useMemo(\n    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),\n    [sortedWallets],\n  )\n\n  return { sortedWallets, totalConnectedAccounts }\n}\n","import { Table, TableBody, TableCell, TableHead, TableProps, TableRow } from '@mui/material'\nimport { EIP6963Connector } from '@xylabs/react-crypto'\n\nimport { WalletsTableHeadCells } from '../lib'\nimport { WalletConnectionsTableRow } from './ConnectedWalletsTableRow'\n\nexport interface ConnectedWalletsTableProps extends TableProps {\n  wallets?: EIP6963Connector[]\n}\n\nexport const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps> = ({ wallets, ...props }) => {\n  return (\n    <Table {...props}>\n      <TableHead>\n        <TableRow>\n          {WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => (\n            <TableCell align={align} key={id} padding={disablePadding ? 'none' : 'normal'} width={width ?? 'auto'}>\n              {label}\n            </TableCell>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {(wallets ?? []).map((wallet) => (\n          <WalletConnectionsTableRow wallet={wallet} key={wallet.providerInfo?.rdns} />\n        ))}\n      </TableBody>\n    </Table>\n  )\n}\n","import { TableHeadCell } from '@xyo-network/react-table'\n\nexport const WalletsTableHeadCells: TableHeadCell[] = [\n  {\n    disablePadding: false,\n    id: 'wallet',\n    label: 'Wallet',\n    numeric: false,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'chain',\n    label: 'Chain',\n    numeric: false,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'accounts',\n    label: 'Accounts',\n    numeric: true,\n    showOnMobile: true,\n  },\n  {\n    disablePadding: false,\n    id: 'actions',\n    label: 'Actions',\n    numeric: false,\n    showOnMobile: true,\n  },\n]\n","import { Check } from '@mui/icons-material'\nimport { Button, TableCell, TableRow, TableRowProps, Tooltip, Typography, useTheme } from '@mui/material'\nimport { ConstrainedImage, EthWalletConnectorBase, useEthWallet } from '@xylabs/react-crypto'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { ReactNode, useMemo } from 'react'\n\nexport interface WalletConnectionsTableRowInnerProps extends TableRowProps {\n  additionalAccounts?: string[]\n  chainName?: string\n  currentAccount?: string[]\n  icon?: string\n  name?: string\n}\n\nexport const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps> = ({\n  additionalAccounts,\n  currentAccount,\n  chainName,\n  icon,\n  name,\n  ...props\n}) => {\n  const theme = useTheme()\n\n  const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0)\n  const connected = currentAccount?.length ?? 0 > 0\n\n  const Cells = useMemo(() => {\n    const TableCells: Record<string, ReactNode> = {\n      wallet: (\n        <TableCell key={1}>\n          <FlexRow gap={2} justifyContent=\"start\">\n            <ConstrainedImage constrainedValue={theme.spacing(4)} src={icon} />\n            {name}\n          </FlexRow>\n        </TableCell>\n      ),\n      // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n      chain: <TableCell key={2}>{chainName}</TableCell>,\n      // eslint-disable-next-line sort-keys-fix/sort-keys-fix\n      accounts: (\n        <TableCell key={3}>\n          <Tooltip\n            sx={{ cursor: totalAccounts > 0 ? 'pointer' : 'auto' }}\n            title={[...(currentAccount ?? []), ...(additionalAccounts ?? [])].map((address, index) => (\n              <p key={index}>{address}</p>\n            ))}\n          >\n            <Typography>{totalAccounts}</Typography>\n          </Tooltip>\n        </TableCell>\n      ),\n      actions: (\n        <TableCell key={4}>\n          <FlexRow gap={2} justifyContent=\"start\">\n            {connected ? (\n              <Typography sx={{ display: 'inline-flex', gap: 0.5 }}>\n                <Check />\n                Connected\n              </Typography>\n            ) : (\n              <Button variant={'contained'}>Connect</Button>\n            )}\n            {connected ? (\n              <Button variant={'outlined'} color={'error'}>\n                Revoke\n              </Button>\n            ) : null}\n          </FlexRow>\n        </TableCell>\n      ),\n    }\n    return TableCells\n  }, [additionalAccounts, chainName, connected, currentAccount, icon, name, theme, totalAccounts])\n\n  return <TableRow {...props}>{Object.values(Cells).map((cell) => cell)}</TableRow>\n}\n\nexport interface WalletConnectionsTableRow extends TableRowProps {\n  wallet: EthWalletConnectorBase\n}\nexport const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow> = ({ wallet, ...props }) => {\n  const { currentAccount, additionalAccounts, chainName, providerInfo, providerName } = useEthWallet(wallet)\n  const currentAccountString = currentAccount?.toString()\n  return (\n    <WalletConnectionsTableRowInner\n      additionalAccounts={additionalAccounts}\n      currentAccount={currentAccountString ? [currentAccountString] : []}\n      chainName={chainName}\n      icon={providerInfo?.icon}\n      name={providerName}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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","names":["Typography","useTheme","refresh","TableCell","TableRow","useMemo","jsx","jsxs","TableRow","TableCell","jsx","jsxs","useTheme","Typography"]}