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

package/dist/browser/index.d.ts

@@ -1,4 +1,119 @@
-export * from './classes/index.ts';
-export * from './components/index.ts';
-export * from './hooks/index.ts';
-//# sourceMappingURL=index.d.ts.map
+import { EIP6963Connector, DiscoveredWallets, EthWallet, EthWalletConnectorBase } from '@xylabs/react-crypto';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import React, { ComponentType, Dispatch, SetStateAction } from 'react';
+import { FormControlProps, DialogProps, TableCellProps, TableProps, TableRowProps } from '@mui/material';
+
+interface EnabledEthWalletsState {
+    [rdns: string]: {
+        enabled: boolean;
+        wallet: EIP6963Connector;
+    };
+}
+interface EnabledWalletsSavedState {
+    [rdns: string]: boolean;
+}
+type WalletListener = () => void;
+declare class EnabledEthWalletConnections {
+    persistPreferences: boolean;
+    private enabledWallets;
+    private ethWalletsState;
+    private listeners;
+    private localStorageKey;
+    constructor(localStorageKey?: string);
+    get wallets(): EnabledEthWalletsState;
+    disableWallet(rdns: string): void;
+    enableWallet(rdns: string): void;
+    resetWallets(wallets: DiscoveredWallets): void;
+    subscribe(listener: WalletListener): () => void;
+    toggleEnabledWallet(rdns: string, enabled: boolean): void;
+    private emitChange;
+    private isPersistance;
+    private persistSettings;
+    private reviveSettings;
+}
+
+interface ConnectedAccountsFlexboxProps extends FlexBoxProps {
+    ignoreConnectDialog?: boolean;
+    onIgnoreConnectDialog?: (checked: boolean) => void;
+}
+declare const ConnectedAccountsFlexbox: React.ForwardRefExoticComponent<ConnectedAccountsFlexboxProps & React.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxFormControlProps extends FormControlProps {
+    onCheckChanged?: (checked: boolean) => void;
+}
+declare const CheckboxFormControl: React.FC<CheckboxFormControlProps>;
+
+interface ActiveProvider {
+    connectWallet?: EthWallet['connectWallet'];
+    icon?: string;
+    providerName?: string;
+}
+
+interface ConnectWalletDialogProps extends DialogProps {
+    activeProvider?: ActiveProvider;
+    onIgnoreConnectDialog?: (checked: boolean) => void;
+}
+declare const ConnectWalletDialog: React.FC<ConnectWalletDialogProps>;
+
+interface RevokeWalletConnectionDialogProps extends DialogProps {
+    activeProvider?: ActiveProvider;
+}
+declare const RevokeWalletConnectionDialog: React.FC<RevokeWalletConnectionDialogProps>;
+
+interface ConnectedWalletTableCellProps {
+    additionalAccounts?: string[];
+    chainName?: string;
+    connected?: boolean;
+    currentAccount?: string[];
+    icon?: string;
+    onConnect?: () => Promise<void>;
+    onRevoke?: () => void;
+    tableCellProps?: TableCellProps;
+    totalAccounts: number;
+    walletName?: string;
+    walletRdns?: string;
+}
+
+declare const ConnectedWalletsAccountsTableCell: React.FC<ConnectedWalletTableCellProps>;
+
+declare const ConnectedWalletsActionsTableCell: React.FC<ConnectedWalletTableCellProps>;
+
+declare const ConnectedWalletTableCells: ComponentType<ConnectedWalletTableCellProps>[];
+
+declare const ConnectedWalletsChainNameTableCell: React.FC<ConnectedWalletTableCellProps>;
+
+declare const ConnectedWalletState: React.FC<ConnectedWalletTableCellProps>;
+
+declare const ConnectedWalletsWalletTableCell: React.FC<ConnectedWalletTableCellProps>;
+
+interface ConnectedWalletsTableProps extends TableProps {
+    ignoreConnectDialog?: boolean;
+    onIgnoreConnectDialog?: (checked: boolean) => void;
+    wallets?: EIP6963Connector[];
+}
+declare const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps>;
+
+interface WalletConnectionsTableRowProps extends TableRowProps {
+    ignoreConnectDialog?: boolean;
+    onConnectClick?: (activeProvider: ActiveProvider) => void;
+    onRevoke?: (activeProvider: ActiveProvider) => void;
+    wallet: EthWalletConnectorBase;
+}
+declare const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRowProps>;
+
+declare const useActiveProviderDialogState: (setActiveProvider: Dispatch<SetStateAction<ActiveProvider | undefined>>) => [boolean, (activeProvider: ActiveProvider) => void, () => void];
+
+declare const useDetectedWallets: () => {
+    sortedWallets: EIP6963Connector[];
+    totalConnectedAccounts: number;
+};
+
+declare const useEnabledWalletsInner: (enabledWalletsRdns?: EnabledWalletsSavedState) => EnabledEthWalletsState;
+declare const useEnabledWallets: (enabledWalletsRdns?: EnabledWalletsSavedState) => {
+    disableWallet: ((rdns: string) => void) | undefined;
+    enableWallet: ((rdns: string) => void) | undefined;
+    enabledWallets: EnabledEthWalletsState;
+    wallets: EnabledEthWalletsState;
+};
+
+export { CheckboxFormControl, type CheckboxFormControlProps, ConnectWalletDialog, type ConnectWalletDialogProps, ConnectedAccountsFlexbox, type ConnectedAccountsFlexboxProps, ConnectedWalletState, ConnectedWalletTableCells, ConnectedWalletsAccountsTableCell, ConnectedWalletsActionsTableCell, ConnectedWalletsChainNameTableCell, ConnectedWalletsTable, type ConnectedWalletsTableProps, ConnectedWalletsWalletTableCell, EnabledEthWalletConnections, type EnabledEthWalletsState, type EnabledWalletsSavedState, RevokeWalletConnectionDialog, type RevokeWalletConnectionDialogProps, WalletConnectionsTableRow, type WalletConnectionsTableRowProps, type WalletListener, useActiveProviderDialogState, useDetectedWallets, useEnabledWallets, useEnabledWalletsInner };

package/dist/browser/index.mjs

@@ -100,7 +100,7 @@ var EnabledEthWalletConnections = class {
 // src/components/ConnectedAccountsFlexbox.tsx
 import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
-import React13, { forwardRef } from "react";
+import React14, { forwardRef } from "react";
 
 // src/hooks/useDetectWallets.tsx
 import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
@@ -189,40 +189,48 @@ var CheckboxFormControl = /* @__PURE__ */ __name(({ onCheckChanged, ...props })
 
 // src/components/wallet/dialogs/connect/Dialog.tsx
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
-import React4 from "react";
+import React5 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";
+import React3 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/img/xyo-color-logo.svg
+import * as React2 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SvgXyoColorLogo = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxs("svg", { id: "Layer_1", "data-name": "Layer 1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 238", ...props, children: [
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("style", { children: ".cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}" }) }),
+  /* @__PURE__ */ jsx("path", { className: "cls-1", d: "M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z" }),
+  /* @__PURE__ */ jsx("path", { className: "cls-2", d: "M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z" }),
+  /* @__PURE__ */ jsx("path", { className: "cls-3", d: "M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z" }),
+  /* @__PURE__ */ jsx("path", { className: "cls-4", d: "M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z" })
+] }), "SvgXyoColorLogo");
+var xyo_color_logo_default = SvgXyoColorLogo;
 
 // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
 var LinkedProvidersFlexbox = /* @__PURE__ */ __name(({ icon, providerName, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(FlexRow, {
+  return /* @__PURE__ */ React3.createElement(FlexRow, {
     gap: 4,
     justifyContent: "space-evenly",
     ...props
-  }, /* @__PURE__ */ React2.createElement(FlexCol, {
+  }, /* @__PURE__ */ React3.createElement(FlexCol, {
     gap: 0.5
-  }, /* @__PURE__ */ React2.createElement("img", {
+  }, /* @__PURE__ */ React3.createElement("img", {
     alt: "XYO Logo",
-    src: default2,
+    src: xyo_color_logo_default,
     style: {
       height: "48px"
     }
-  }), /* @__PURE__ */ React2.createElement(Typography, {
+  }), /* @__PURE__ */ React3.createElement(Typography, {
     variant: "subtitle1"
-  }, "XYO App")), /* @__PURE__ */ React2.createElement(SyncAlt, {
+  }, "XYO App")), /* @__PURE__ */ React3.createElement(SyncAlt, {
     fontSize: "large"
-  }), /* @__PURE__ */ React2.createElement(FlexCol, {
+  }), /* @__PURE__ */ React3.createElement(FlexCol, {
     gap: 0.5
-  }, /* @__PURE__ */ React2.createElement(ConstrainedImage, {
+  }, /* @__PURE__ */ React3.createElement(ConstrainedImage, {
     constrainedValue: "48px",
     src: icon,
     alt: providerName,
@@ -230,7 +238,7 @@ var LinkedProvidersFlexbox = /* @__PURE__ */ __name(({ icon, providerName, ...pr
       height: "48px",
       maxWidth: "48px"
     }
-  }), /* @__PURE__ */ React2.createElement(Typography, {
+  }), /* @__PURE__ */ React3.createElement(Typography, {
     variant: "subtitle1"
   }, providerName)));
 }, "LinkedProvidersFlexbox");
@@ -238,22 +246,22 @@ var LinkedProvidersFlexbox = /* @__PURE__ */ __name(({ icon, providerName, ...pr
 // 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";
+import React4 from "react";
 var WalletPermissionsFlexbox = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React3.createElement(FlexCol2, {
+  return /* @__PURE__ */ React4.createElement(FlexCol2, {
     gap: 4,
     ...props
-  }, /* @__PURE__ */ React3.createElement(Typography2, {
+  }, /* @__PURE__ */ React4.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, {
+  }, "This will allow XYO to:"), /* @__PURE__ */ React4.createElement("ul", null, /* @__PURE__ */ React4.createElement("li", null, "View your wallet account(s) and address(es)"), /* @__PURE__ */ React4.createElement("li", null, "Read-only access to browse the public blockchain(s) you select")), /* @__PURE__ */ React4.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, {
+  }, "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__ */ React4.createElement(Link, {
     href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
     sx: {
       fontWeight: "bold"
@@ -273,7 +281,7 @@ var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConn
       console.warn(`Error connecting to wallet: ${e.message}`);
     }
   }, "onConnect");
-  return /* @__PURE__ */ React4.createElement(Dialog, {
+  return /* @__PURE__ */ React5.createElement(Dialog, {
     PaperProps: {
       sx: {
         display: "flex",
@@ -281,25 +289,25 @@ var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConn
       }
     },
     ...props
-  }, /* @__PURE__ */ React4.createElement(DialogTitle, {
+  }, /* @__PURE__ */ React5.createElement(DialogTitle, {
     sx: {
       textAlign: "center"
     }
-  }, "XYO Wants To Access The Blockchain on Your Behalf"), /* @__PURE__ */ React4.createElement(DialogContent, {
+  }, "XYO Wants To Access The Blockchain on Your Behalf"), /* @__PURE__ */ React5.createElement(DialogContent, {
     sx: {
       display: "flex",
       flexDirection: "column",
       gap: 4
     }
-  }, /* @__PURE__ */ React4.createElement(LinkedProvidersFlexbox, {
+  }, /* @__PURE__ */ React5.createElement(LinkedProvidersFlexbox, {
     icon,
     providerName
-  }), /* @__PURE__ */ React4.createElement(WalletPermissionsFlexbox, null), /* @__PURE__ */ React4.createElement(CheckboxFormControl, {
+  }), /* @__PURE__ */ React5.createElement(WalletPermissionsFlexbox, null), /* @__PURE__ */ React5.createElement(CheckboxFormControl, {
     onCheckChanged: onIgnoreConnectDialog
-  })), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button, {
+  })), /* @__PURE__ */ React5.createElement(DialogActions, null, /* @__PURE__ */ React5.createElement(Button, {
     variant: "outlined",
     onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
-  }, "Close"), /* @__PURE__ */ React4.createElement(Button, {
+  }, "Close"), /* @__PURE__ */ React5.createElement(Button, {
     variant: "contained",
     onClick: onConnect
   }, "Connect")));
@@ -309,20 +317,20 @@ var ConnectWalletDialog = /* @__PURE__ */ __name(({ activeProvider, onIgnoreConn
 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";
+import React6 from "react";
 var RevokeWalletConnectionDialog = /* @__PURE__ */ __name(({ activeProvider, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Dialog2, props, /* @__PURE__ */ React5.createElement(FlexRow2, {
+  return /* @__PURE__ */ React6.createElement(Dialog2, props, /* @__PURE__ */ React6.createElement(FlexRow2, {
     gap: 2,
     justifyContent: "start",
     pl: 2
-  }, /* @__PURE__ */ React5.createElement(ConstrainedImage2, {
+  }, /* @__PURE__ */ React6.createElement(ConstrainedImage2, {
     src: activeProvider?.icon,
     constrainedValue: "24px"
-  }), /* @__PURE__ */ React5.createElement(DialogTitle2, {
+  }), /* @__PURE__ */ React6.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, {
+  }, "Revoke", activeProvider?.providerName, " ", "Access")), /* @__PURE__ */ React6.createElement(DialogContent2, null, /* @__PURE__ */ React6.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__ */ React6.createElement(Typography3, null, window.location.origin)), /* @__PURE__ */ React6.createElement(DialogActions2, null, /* @__PURE__ */ React6.createElement(Button2, {
     variant: "contained",
     onClick: /* @__PURE__ */ __name(() => props.onClose?.({}, "escapeKeyDown"), "onClick")
   }, "Close")));
@@ -330,53 +338,53 @@ var RevokeWalletConnectionDialog = /* @__PURE__ */ __name(({ activeProvider, ...
 
 // src/components/wallet/table/cells/Accounts.tsx
 import { TableCell, Tooltip, Typography as Typography4 } from "@mui/material";
-import React6 from "react";
+import React7 from "react";
 var ConnectedWalletsAccountsTableCell = /* @__PURE__ */ __name(({ additionalAccounts, currentAccount, totalAccounts, tableCellProps }) => {
-  return /* @__PURE__ */ React6.createElement(TableCell, tableCellProps, /* @__PURE__ */ React6.createElement(Tooltip, {
+  return /* @__PURE__ */ React7.createElement(TableCell, tableCellProps, /* @__PURE__ */ React7.createElement(Tooltip, {
     sx: {
       cursor: totalAccounts > 0 ? "pointer" : "auto"
     },
     title: [
       ...currentAccount ?? [],
       ...additionalAccounts ?? []
-    ].map((address, index) => /* @__PURE__ */ React6.createElement("p", {
+    ].map((address, index) => /* @__PURE__ */ React7.createElement("p", {
       key: index
     }, address))
-  }, /* @__PURE__ */ React6.createElement(Typography4, null, totalAccounts)));
+  }, /* @__PURE__ */ React7.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";
+import React8 from "react";
 var ConnectedWalletsActionsTableCell = /* @__PURE__ */ __name(({ connected, onConnect, onRevoke, tableCellProps }) => {
-  return /* @__PURE__ */ React7.createElement(TableCell2, tableCellProps, /* @__PURE__ */ React7.createElement(FlexRow3, {
+  return /* @__PURE__ */ React8.createElement(TableCell2, tableCellProps, /* @__PURE__ */ React8.createElement(FlexRow3, {
     gap: 2,
     justifyContent: "start"
-  }, connected ? /* @__PURE__ */ React7.createElement(Typography5, {
+  }, connected ? /* @__PURE__ */ React8.createElement(Typography5, {
     sx: {
       display: "inline-flex",
       gap: 0.5
     }
-  }, /* @__PURE__ */ React7.createElement(Check, null), "Connected") : /* @__PURE__ */ React7.createElement(Button3, {
+  }, /* @__PURE__ */ React8.createElement(Check, null), "Connected") : /* @__PURE__ */ React8.createElement(Button3, {
     variant: "contained",
     onClick: onConnect
-  }, "Connect"), connected ? /* @__PURE__ */ React7.createElement(IconButton, {
+  }, "Connect"), connected ? /* @__PURE__ */ React8.createElement(IconButton, {
     onClick: onRevoke
-  }, /* @__PURE__ */ React7.createElement(InfoOutlined, null)) : null));
+  }, /* @__PURE__ */ React8.createElement(InfoOutlined, null)) : null));
 }, "ConnectedWalletsActionsTableCell");
 
 // src/components/wallet/table/cells/ChainName.tsx
 import { TableCell as TableCell3 } from "@mui/material";
-import React8 from "react";
+import React9 from "react";
 var ConnectedWalletsChainNameTableCell = /* @__PURE__ */ __name(({ chainName, tableCellProps }) => {
-  return /* @__PURE__ */ React8.createElement(TableCell3, tableCellProps, chainName);
+  return /* @__PURE__ */ React9.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";
+import React10, { 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, [
@@ -389,7 +397,7 @@ var ConnectedWalletState = /* @__PURE__ */ __name(({ connected, walletRdns, tabl
       checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
     }
   }, "handleClick");
-  return /* @__PURE__ */ React9.createElement(TableCell4, tableCellProps, /* @__PURE__ */ React9.createElement(Switch, {
+  return /* @__PURE__ */ React10.createElement(TableCell4, tableCellProps, /* @__PURE__ */ React10.createElement(Switch, {
     disabled: !connected,
     checked: connected && enabled,
     onChange: handleClick
@@ -400,13 +408,13 @@ var ConnectedWalletState = /* @__PURE__ */ __name(({ connected, walletRdns, tabl
 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";
+import React11 from "react";
 var ConnectedWalletsWalletTableCell = /* @__PURE__ */ __name(({ icon, walletName, tableCellProps }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ React10.createElement(TableCell5, tableCellProps, /* @__PURE__ */ React10.createElement(FlexRow4, {
+  return /* @__PURE__ */ React11.createElement(TableCell5, tableCellProps, /* @__PURE__ */ React11.createElement(FlexRow4, {
     gap: 2,
     justifyContent: "start"
-  }, /* @__PURE__ */ React10.createElement(ConstrainedImage3, {
+  }, /* @__PURE__ */ React11.createElement(ConstrainedImage3, {
     constrainedValue: theme.spacing(4),
     src: icon
   }), walletName));
@@ -423,7 +431,7 @@ var ConnectedWalletTableCells = [
 
 // src/components/wallet/table/ConnectedWalletsTable.tsx
 import { Table, TableBody, TableCell as TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
-import React12, { useState as useState3 } from "react";
+import React13, { useState as useState3 } from "react";
 
 // src/components/wallet/lib/TableHeadData.ts
 var WalletsTableHeadCells = [
@@ -467,7 +475,7 @@ var WalletsTableHeadCells = [
 // 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";
+import React12, { 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() ? [
@@ -509,7 +517,7 @@ var WalletConnectionsTableRow = /* @__PURE__ */ __name(({ ignoreConnectDialog, o
     ignoreConnectDialog,
     onConnectClick
   ]);
-  return /* @__PURE__ */ React11.createElement(TableRow, props, Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ React11.createElement(Cell, {
+  return /* @__PURE__ */ React12.createElement(TableRow, props, Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ React12.createElement(Cell, {
     key: index,
     additionalAccounts,
     chainName,
@@ -548,22 +556,22 @@ var ConnectedWalletsTable = /* @__PURE__ */ __name(({ ignoreConnectDialog, onIgn
   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, {
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Table, props, /* @__PURE__ */ React13.createElement(TableHead, null, /* @__PURE__ */ React13.createElement(TableRow2, null, WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ React13.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, {
+  }, label)))), /* @__PURE__ */ React13.createElement(TableBody, null, (wallets ?? []).map((wallet) => /* @__PURE__ */ React13.createElement(WalletConnectionsTableRow, {
     ignoreConnectDialog,
     key: wallet.providerInfo?.rdns,
     onConnectClick: onSetActiveProviderConnect,
     onRevoke: onSetActiveProviderRevoke,
     wallet
-  })))), /* @__PURE__ */ React12.createElement(RevokeWalletConnectionDialog, {
+  })))), /* @__PURE__ */ React13.createElement(RevokeWalletConnectionDialog, {
     open: showRevoke,
     onClose: onRevokeClose,
     activeProvider
-  }), /* @__PURE__ */ React12.createElement(ConnectWalletDialog, {
+  }), /* @__PURE__ */ React13.createElement(ConnectWalletDialog, {
     activeProvider,
     onClose: onConnectClose,
     open: showConnect,
@@ -575,26 +583,26 @@ var ConnectedWalletsTable = /* @__PURE__ */ __name(({ ignoreConnectDialog, onIgn
 var ConnectedAccountsFlexbox = /* @__PURE__ */ forwardRef(({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
   const theme = useTheme2();
   const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
-  return /* @__PURE__ */ React13.createElement(FlexCol3, {
+  return /* @__PURE__ */ React14.createElement(FlexCol3, {
     alignItems: "stretch",
     justifyContent: "start",
     gap: 2,
     ref,
     ...props
-  }, /* @__PURE__ */ React13.createElement(FlexCol3, {
+  }, /* @__PURE__ */ React14.createElement(FlexCol3, {
     alignItems: "start"
-  }, /* @__PURE__ */ React13.createElement(Typography6, {
+  }, /* @__PURE__ */ React14.createElement(Typography6, {
     variant: "h2",
     sx: {
       mb: 0.5
     }
-  }, "Detected Web3 Wallets"), totalConnectedAccounts ? /* @__PURE__ */ React13.createElement(Typography6, {
+  }, "Detected Web3 Wallets"), totalConnectedAccounts ? /* @__PURE__ */ React14.createElement(Typography6, {
     variant: "subtitle1",
     color: theme.palette.secondary.main,
     sx: {
       opacity: 0.5
     }
-  }, "Total Connected Accounts:", " ", totalConnectedAccounts) : null), /* @__PURE__ */ React13.createElement(ConnectedWalletsTable, {
+  }, "Total Connected Accounts:", " ", totalConnectedAccounts) : null), /* @__PURE__ */ React14.createElement(ConnectedWalletsTable, {
     wallets: sortedWallets,
     ignoreConnectDialog,
     onIgnoreConnectDialog