@xyo-network/react-connected-accounts 2.78.0 → 2.78.2

package/dist/browser/index.cjs

@@ -1,2 +1,575 @@
-"use strict";var He=Object.create;var H=Object.defineProperty;var Ke=Object.getOwnPropertyDescriptor;var Xe=Object.getOwnPropertyNames;var Ve=Object.getPrototypeOf,_e=Object.prototype.hasOwnProperty;var ze=(o,e)=>{for(var t in e)H(o,t,{get:e[t],enumerable:!0})},pe=(o,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Xe(e))!_e.call(o,n)&&n!==t&&H(o,n,{get:()=>e[n],enumerable:!(l=Ke(e,n))||l.enumerable});return o};var Ce=(o,e,t)=>(t=o!=null?He(Ve(o)):{},pe(e||!o||!o.__esModule?H(t,"default",{value:o,enumerable:!0}):t,o)),Je=o=>pe(H({},"__esModule",{value:!0}),o);var Ue={};ze(Ue,{CheckboxFormControl:()=>U,ConnectWalletDialog:()=>Z,ConnectedAccountsFlexbox:()=>Be,ConnectedWalletState:()=>ne,ConnectedWalletTableCells:()=>re,ConnectedWalletsAccountsTableCell:()=>ee,ConnectedWalletsActionsTableCell:()=>oe,ConnectedWalletsChainNameTableCell:()=>te,ConnectedWalletsTable:()=>ce,ConnectedWalletsWalletTableCell:()=>ae,EnabledEthWalletConnections:()=>k,RevokeWalletConnectionDialog:()=>j,WalletConnectionsTableRow:()=>ie,useActiveProviderDialogState:()=>_,useDetectedWallets:()=>$,useEnabledWallets:()=>G,useEnabledWalletsInner:()=>ge});module.exports=Je(Ue);var me="XYO|EnabledWallets",k=class{persistPreferences=!0;enabledWallets={};ethWalletsState={};listeners=[];localStorageKey=me;constructor(e=me){this.localStorageKey=e,this.reviveSettings()}get wallets(){return this.ethWalletsState}disableWallet(e){this.toggleEnabledWallet(e,!1)}enableWallet(e){this.toggleEnabledWallet(e,!0)}resetWallets(e){let t={},l=([n,a])=>{t[n]={enabled:n in this.enabledWallets?this.enabledWallets[n]:!0,wallet:a}};Object.entries(e).forEach(l.bind(this)),this.ethWalletsState=t,this.emitChange()}subscribe(e){return this.listeners=[...this.listeners,e],()=>{this.listeners=this.listeners.filter(t=>t!==e)}}toggleEnabledWallet(e,t){e&&this.ethWalletsState[e]&&(this.ethWalletsState[e].enabled=t,this.ethWalletsState={...this.ethWalletsState},this.emitChange())}emitChange(){for(let e of this.listeners)e();this.persistSettings()}isPersistance(e){this.persistPreferences&&e()}persistSettings(){this.isPersistance(()=>{let e=Object.entries(this.ethWalletsState).reduce((t,[l,{enabled:n}])=>(t[l]=n,t),{});localStorage.setItem(this.localStorageKey,JSON.stringify(e))})}reviveSettings(){this.isPersistance(()=>{let e=localStorage.getItem(this.localStorageKey);try{let t=e?JSON.parse(e):{};this.enabledWallets=t}catch(t){console.warn(`Error parsing saved enabled wallet entries: ${t.message}`)}})}};var Y=require("@mui/material"),de=require("@xylabs/react-flexbox"),Le=require("react");var R=require("@xylabs/react-crypto"),u=require("react"),$e=o=>Object.values(o).reduce((e,t)=>(t.allowedAccounts.length>0?e.unshift(t):e.push(t),e),[]),$=()=>{let o=(0,R.useWalletDiscovery)(),[e,t]=(0,u.useState)(0),[l,n]=(0,u.useState)([]);(0,u.useEffect)(()=>{n($e(o))},[o,e]),(0,u.useEffect)(()=>{let r=()=>{t(f=>f+1)};return window.addEventListener(R.AccountsChangedEventName,r),()=>{window.removeEventListener(R.AccountsChangedEventName,r)}},[o]);let a=(0,u.useMemo)(()=>Object.values(l).reduce((r,f)=>r+f.allowedAccounts.length,0),[l]);return{sortedWallets:l,totalConnectedAccounts:a}};var be=require("@xylabs/react-crypto"),I=require("react");var b,ge=o=>{let e=(0,be.useWalletDiscovery)(),t=(0,I.useMemo)(()=>{b===void 0&&(b=new k),b.resetWallets(e);for(let[l,n]of Object.entries(o??{}))b?.toggleEnabledWallet(l,n);return b},[e,o]);return(0,I.useSyncExternalStore)(t.subscribe.bind(t),()=>t.wallets)},G=o=>{let e=ge(o),t=(0,I.useMemo)(()=>Object.entries(e).reduce((l,[n,a])=>(a.enabled&&(l[n]=a),l),{}),[e]);return{disableWallet:b?.disableWallet.bind(b),enableWallet:b?.enableWallet.bind(b),enabledWallets:t,wallets:e}};var w=require("@mui/material"),L=require("react/jsx-runtime"),U=({onCheckChanged:o,...e})=>(0,L.jsx)(w.FormControl,{...e,children:(0,L.jsxs)(w.FormLabel,{children:[(0,L.jsx)(w.Checkbox,{onChange:(t,l)=>o?.(l)}),"Do not show this again."]})});var d=require("@mui/material");var he=require("@mui/icons-material"),Q=require("@mui/material"),fe=require("@xylabs/react-crypto"),B=require("@xylabs/react-flexbox");var q=Ce(require("./xyo-color-logo-LHR2SMEM.svg"),1),Ge=Ce(require("./xyo-color-logo-text-only-QPAW5BSQ.svg"),1);var C=require("react/jsx-runtime"),ve=({icon:o,providerName:e,...t})=>(0,C.jsxs)(B.FlexRow,{gap:4,justifyContent:"space-evenly",...t,children:[(0,C.jsxs)(B.FlexCol,{gap:.5,children:[(0,C.jsx)("img",{alt:"XYO Logo",src:q.default,style:{height:"48px"}}),(0,C.jsx)(Q.Typography,{variant:"subtitle1",children:"XYO App"})]}),(0,C.jsx)(he.SyncAlt,{fontSize:"large"}),(0,C.jsxs)(B.FlexCol,{gap:.5,children:[(0,C.jsx)(fe.ConstrainedImage,{constrainedValue:"48px",src:o,alt:e,style:{height:"48px",maxWidth:"48px"}}),(0,C.jsx)(Q.Typography,{variant:"subtitle1",children:e})]})]});var O=require("@mui/material"),ue=require("@xylabs/react-flexbox"),g=require("react/jsx-runtime"),We=o=>(0,g.jsxs)(ue.FlexCol,{gap:4,...o,children:[(0,g.jsx)(O.Typography,{fontWeight:"bold",sx:{textAlign:"center"},children:"This will allow XYO to:"}),(0,g.jsxs)("ul",{children:[(0,g.jsx)("li",{children:"View your wallet account(s) and address(es)"}),(0,g.jsx)("li",{children:"Read-only access to browse the public blockchain(s) you select"})]}),(0,g.jsxs)(O.Typography,{variant:"subtitle1",sx:{textAlign:"center"},children:["You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet's settings at anytime. View more on XYO's sovereign data philosophy"," ",(0,g.jsx)(O.Link,{href:"https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",sx:{fontWeight:"bold"},target:"_blank",children:"here"}),"."]})]});var c=require("react/jsx-runtime"),Z=({activeProvider:o,onIgnoreConnectDialog:e,...t})=>{let{icon:l,providerName:n}=o??{};return(0,c.jsxs)(d.Dialog,{PaperProps:{sx:{display:"flex",gap:4}},...t,children:[(0,c.jsx)(d.DialogTitle,{sx:{textAlign:"center"},children:"XYO Wants To Access The Blockchain on Your Behalf"}),(0,c.jsxs)(d.DialogContent,{sx:{display:"flex",flexDirection:"column",gap:4},children:[(0,c.jsx)(ve,{icon:l,providerName:n}),(0,c.jsx)(We,{}),(0,c.jsx)(U,{onCheckChanged:e})]}),(0,c.jsxs)(d.DialogActions,{children:[(0,c.jsx)(d.Button,{variant:"outlined",onClick:()=>t.onClose?.({},"escapeKeyDown"),children:"Close"}),(0,c.jsx)(d.Button,{variant:"contained",onClick:async()=>{try{await o?.connectWallet?.(),t.onClose?.({},"escapeKeyDown")}catch(r){console.warn(`Error connecting to wallet: ${r.message}`)}},children:"Connect"})]})]})};var s=require("@mui/material"),xe=require("@xylabs/react-crypto"),Pe=require("@xylabs/react-flexbox"),p=require("react/jsx-runtime"),j=({activeProvider:o,...e})=>(0,p.jsxs)(s.Dialog,{...e,children:[(0,p.jsxs)(Pe.FlexRow,{gap:2,justifyContent:"start",pl:2,children:[(0,p.jsx)(xe.ConstrainedImage,{src:o?.icon,constrainedValue:"24px"}),(0,p.jsxs)(s.DialogTitle,{sx:{pl:0},children:["Revoke ",o?.providerName," Access"]})]}),(0,p.jsxs)(s.DialogContent,{children:[(0,p.jsxs)(s.Typography,{children:["Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",o?.providerName,"'s documentation on how to revoke access to this website:"]}),(0,p.jsx)(s.Typography,{children:window.location.origin})]}),(0,p.jsx)(s.DialogActions,{children:(0,p.jsx)(s.Button,{variant:"contained",onClick:()=>e.onClose?.({},"escapeKeyDown"),children:"Close"})})]});var S=require("@mui/material"),N=require("react/jsx-runtime"),ee=({additionalAccounts:o,currentAccount:e,totalAccounts:t,tableCellProps:l})=>(0,N.jsx)(S.TableCell,{...l,children:(0,N.jsx)(S.Tooltip,{sx:{cursor:t>0?"pointer":"auto"},title:[...e??[],...o??[]].map((n,a)=>(0,N.jsx)("p",{children:n},a)),children:(0,N.jsx)(S.Typography,{children:t})})});var K=require("@mui/icons-material"),W=require("@mui/material"),Te=require("@xylabs/react-flexbox"),h=require("react/jsx-runtime"),oe=({connected:o,onConnect:e,onRevoke:t,tableCellProps:l})=>(0,h.jsx)(W.TableCell,{...l,children:(0,h.jsxs)(Te.FlexRow,{gap:2,justifyContent:"start",children:[o?(0,h.jsxs)(W.Typography,{sx:{display:"inline-flex",gap:.5},children:[(0,h.jsx)(K.Check,{}),"Connected"]}):(0,h.jsx)(W.Button,{variant:"contained",onClick:e,children:"Connect"}),o?(0,h.jsx)(W.IconButton,{onClick:t,children:(0,h.jsx)(K.InfoOutlined,{})}):null]})});var ye=require("@mui/material"),we=require("react/jsx-runtime"),te=({chainName:o,tableCellProps:e})=>(0,we.jsx)(ye.TableCell,{...e,children:o});var X=require("@mui/material"),Se=require("react");var le=require("react/jsx-runtime"),ne=({connected:o,walletRdns:e,tableCellProps:t})=>{let{disableWallet:l,enableWallet:n,wallets:a}=G(),r=(0,Se.useMemo)(()=>e?a[e].enabled:!1,[a,e]);return(0,le.jsx)(X.TableCell,{...t,children:(0,le.jsx)(X.Switch,{disabled:!o,checked:o&&r,onChange:v=>{let P=v.target?.checked;e&&(P?n?.(e):l?.(e))}})})};var V=require("@mui/material"),Ae=require("@xylabs/react-crypto"),Ee=require("@xylabs/react-flexbox"),M=require("react/jsx-runtime"),ae=({icon:o,walletName:e,tableCellProps:t})=>{let l=(0,V.useTheme)();return(0,M.jsx)(V.TableCell,{...t,children:(0,M.jsxs)(Ee.FlexRow,{gap:2,justifyContent:"start",children:[(0,M.jsx)(Ae.ConstrainedImage,{constrainedValue:l.spacing(4),src:o}),e]})})};var re=[ae,te,ee,oe,ne];var m=require("@mui/material"),Ie=require("react");var Fe=[{disablePadding:!1,id:"wallet",label:"Wallet",numeric:!1,showOnMobile:!0},{disablePadding:!1,id:"chain",label:"Chain",numeric:!1,showOnMobile:!0},{disablePadding:!1,id:"accounts",label:"Accounts",numeric:!0,showOnMobile:!0},{disablePadding:!1,id:"actions",label:"Actions",numeric:!1,showOnMobile:!0},{disablePadding:!1,id:"enabled",label:"Enabled",numeric:!1,showOnMobile:!0}];var De=require("@mui/material"),ke=require("@xylabs/react-crypto"),A=require("react");var se=require("react/jsx-runtime"),ie=({ignoreConnectDialog:o,onConnectClick:e,onRevoke:t,wallet:l,...n})=>{let{currentAccount:a,additionalAccounts:r,chainName:f,connectWallet:v,providerInfo:P}=(0,ke.useEthWallet)(l),E=a?.toString()?[a.toString()]:[],z=(r?.length??0)+(E?.length??0),T=!!(E?.length??!1),{icon:F,name:D,rdns:J}=(0,A.useMemo)(()=>P??{icon:void 0,name:void 0,rdns:void 0},[P]),y=(0,A.useMemo)(()=>({connectWallet:v,icon:F,providerName:D}),[v,F,D]),Oe=(0,A.useCallback)(()=>{t?.(y)},[y,t]),Ne=(0,A.useCallback)(async()=>{o?await v?.():e?.(y)},[y,v,o,e]);return(0,se.jsx)(De.TableRow,{...n,children:Object.values(re).map((Me,Ye)=>(0,se.jsx)(Me,{additionalAccounts:r,chainName:f,connected:T,currentAccount:E,icon:F,onConnect:Ne,onRevoke:Oe,totalAccounts:z,walletName:D,walletRdns:J},Ye))})};var Re=require("react"),_=o=>{let[e,t]=(0,Re.useState)(!1);return[e,a=>{t(!0),o(a)},()=>{t(!1),o({})}]};var i=require("react/jsx-runtime"),ce=({ignoreConnectDialog:o,onIgnoreConnectDialog:e,wallets:t,...l})=>{let[n,a]=(0,Ie.useState)(),[r,f,v]=_(a),[P,E,z]=_(a);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(m.Table,{...l,children:[(0,i.jsx)(m.TableHead,{children:(0,i.jsx)(m.TableRow,{children:Fe.map(({disablePadding:T,id:F,label:D,align:J,width:y})=>(0,i.jsx)(m.TableCell,{align:J,padding:T?"none":"normal",width:y??"auto",children:D},F))})}),(0,i.jsx)(m.TableBody,{children:(t??[]).map(T=>(0,i.jsx)(ie,{ignoreConnectDialog:o,onConnectClick:f,onRevoke:E,wallet:T},T.providerInfo?.rdns))})]}),(0,i.jsx)(j,{open:P,onClose:z,activeProvider:n}),(0,i.jsx)(Z,{activeProvider:n,onClose:v,open:r,onIgnoreConnectDialog:e})]})};var x=require("react/jsx-runtime"),Be=(0,Le.forwardRef)(({ignoreConnectDialog:o,onIgnoreConnectDialog:e,...t},l)=>{let n=(0,Y.useTheme)(),{totalConnectedAccounts:a,sortedWallets:r}=$();return(0,x.jsxs)(de.FlexCol,{alignItems:"stretch",justifyContent:"start",gap:2,ref:l,...t,children:[(0,x.jsxs)(de.FlexCol,{alignItems:"start",children:[(0,x.jsx)(Y.Typography,{variant:"h2",sx:{mb:.5},children:"Detected Web3 Wallets"}),a?(0,x.jsxs)(Y.Typography,{variant:"subtitle1",color:n.palette.secondary.main,sx:{opacity:.5},children:["Total Connected Accounts: ",a]}):null]}),(0,x.jsx)(ce,{wallets:r,ignoreConnectDialog:o,onIgnoreConnectDialog:e})]})});Be.displayName="ConnectedAccountsFlexbox";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CheckboxFormControl: () => CheckboxFormControl,
+  ConnectWalletDialog: () => ConnectWalletDialog,
+  ConnectedAccountsFlexbox: () => ConnectedAccountsFlexbox,
+  ConnectedWalletState: () => ConnectedWalletState,
+  ConnectedWalletTableCells: () => ConnectedWalletTableCells,
+  ConnectedWalletsAccountsTableCell: () => ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell: () => ConnectedWalletsActionsTableCell,
+  ConnectedWalletsChainNameTableCell: () => ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsTable: () => ConnectedWalletsTable,
+  ConnectedWalletsWalletTableCell: () => ConnectedWalletsWalletTableCell,
+  EnabledEthWalletConnections: () => EnabledEthWalletConnections,
+  RevokeWalletConnectionDialog: () => RevokeWalletConnectionDialog,
+  WalletConnectionsTableRow: () => WalletConnectionsTableRow,
+  useActiveProviderDialogState: () => useActiveProviderDialogState,
+  useDetectedWallets: () => useDetectedWallets,
+  useEnabledWallets: () => useEnabledWallets,
+  useEnabledWalletsInner: () => useEnabledWalletsInner
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/classes/EnabledWallets.ts
+var DEFAULT_LOCAL_STORAGE_KEY = "XYO|EnabledWallets";
+var EnabledEthWalletConnections = class {
+  // control whether or not enabled/disabled preferences are persisted (i.e. in localStorage)
+  persistPreferences = true;
+  // Map of wallet names and their enabled/disabled state
+  enabledWallets = {};
+  // Map of wallet names, their enabled/disabled state, and their wallet class
+  ethWalletsState = {};
+  // list of listeners that want to be notified on wallet changes
+  listeners = [];
+  // key to use in localStorage when persisting preferences
+  localStorageKey = DEFAULT_LOCAL_STORAGE_KEY;
+  constructor(localStorageKey = DEFAULT_LOCAL_STORAGE_KEY) {
+    this.localStorageKey = localStorageKey;
+    this.reviveSettings();
+  }
+  get wallets() {
+    return this.ethWalletsState;
+  }
+  disableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, false);
+  }
+  enableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, true);
+  }
+  /**
+   * Given a new set of wallets, set their enabled state based off previous preferences
+   */
+  resetWallets(wallets) {
+    const newWallets = {};
+    const addWallet = ([walletName, wallet]) => {
+      newWallets[walletName] = {
+        // preserve the existing enabled state
+        enabled: walletName in this.enabledWallets ? this.enabledWallets[walletName] : true,
+        wallet
+      };
+    };
+    Object.entries(wallets).forEach(addWallet.bind(this));
+    this.ethWalletsState = newWallets;
+    this.emitChange();
+  }
+  subscribe(listener) {
+    this.listeners = [...this.listeners, listener];
+    return () => {
+      this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
+    };
+  }
+  toggleEnabledWallet(rdns, enabled) {
+    if (rdns && this.ethWalletsState[rdns]) {
+      this.ethWalletsState[rdns].enabled = enabled;
+      this.ethWalletsState = { ...this.ethWalletsState };
+      this.emitChange();
+    }
+  }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+    this.persistSettings();
+  }
+  isPersistance(method) {
+    if (this.persistPreferences) {
+      method();
+    }
+  }
+  persistSettings() {
+    this.isPersistance(() => {
+      const enabledWallets = Object.entries(this.ethWalletsState).reduce((acc, [rdns, { enabled }]) => {
+        acc[rdns] = enabled;
+        return acc;
+      }, {});
+      localStorage.setItem(this.localStorageKey, JSON.stringify(enabledWallets));
+    });
+  }
+  reviveSettings() {
+    this.isPersistance(() => {
+      const existingEntries = localStorage.getItem(this.localStorageKey);
+      try {
+        const entries = existingEntries ? JSON.parse(existingEntries) : {};
+        this.enabledWallets = entries;
+      } catch (e) {
+        console.warn(`Error parsing saved enabled wallet entries: ${e.message}`);
+      }
+    });
+  }
+};
+
+// src/components/ConnectedAccountsFlexbox.tsx
+var import_material13 = require("@mui/material");
+var import_react_flexbox6 = require("@xylabs/react-flexbox");
+var import_react7 = require("react");
+
+// src/hooks/useDetectWallets.tsx
+var import_react_crypto = require("@xylabs/react-crypto");
+var import_react = require("react");
+var sortWallets = (wallets) => (
+  // eslint-disable-next-line unicorn/no-array-reduce
+  Object.values(wallets).reduce((acc, wallet) => {
+    wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet);
+    return acc;
+  }, [])
+);
+var useDetectedWallets = () => {
+  const wallets = (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/hooks/useEnabledWallets.tsx
+var import_react_crypto2 = require("@xylabs/react-crypto");
+var import_react2 = require("react");
+var enabledEthWallets;
+var useEnabledWalletsInner = (enabledWalletsRdns) => {
+  const discoveredWallets = (0, import_react_crypto2.useWalletDiscovery)();
+  const wallets = (0, import_react2.useMemo)(() => {
+    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 (0, import_react2.useSyncExternalStore)(wallets.subscribe.bind(wallets), () => wallets.wallets);
+};
+var useEnabledWallets = (enabledWalletsRdns) => {
+  const wallets = useEnabledWalletsInner(enabledWalletsRdns);
+  const enabledWallets = (0, import_react2.useMemo)(
+    () => (
+      // eslint-disable-next-line unicorn/no-array-reduce
+      Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
+        if (wallet.enabled) acc[walletName] = wallet;
+        return acc;
+      }, {})
+    ),
+    [wallets]
+  );
+  return {
+    disableWallet: enabledEthWallets?.disableWallet.bind(enabledEthWallets),
+    enableWallet: enabledEthWallets?.enableWallet.bind(enabledEthWallets),
+    enabledWallets,
+    wallets
+  };
+};
+
+// src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControl, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.FormLabel, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Checkbox, { onChange: (_, checked) => onCheckChanged?.(checked) }),
+    "Do not show this again."
+  ] }) });
+};
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+var import_material4 = require("@mui/material");
+
+// src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material2 = require("@mui/material");
+var import_react_crypto3 = require("@xylabs/react-crypto");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+
+// src/img/index.ts
+var import_xyo_color_logo = __toESM(require("./xyo-color-logo-LHR2SMEM.svg"), 1);
+var import_xyo_color_logo_text_only = __toESM(require("./xyo-color-logo-text-only-QPAW5BSQ.svg"), 1);
+
+// src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LinkedProvidersFlexbox = ({ icon, providerName, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexRow, { gap: 4, justifyContent: "space-evenly", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { alt: "XYO Logo", src: import_xyo_color_logo.default, style: { height: "48px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle1", children: "XYO App" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SyncAlt, { fontSize: "large" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_crypto3.ConstrainedImage, { constrainedValue: "48px", src: icon, alt: providerName, style: { height: "48px", maxWidth: "48px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "subtitle1", children: providerName })
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/connect/Permissions.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var WalletPermissionsFlexbox = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox2.FlexCol, { gap: 4, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { fontWeight: "bold", sx: { textAlign: "center" }, children: "This will allow XYO to:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: "View your wallet account(s) and address(es)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: "Read-only access to browse the public blockchain(s) you select" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Typography, { variant: "subtitle1", sx: { textAlign: "center" }, children: [
+      "You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet's settings at anytime. View more on XYO's sovereign data philosophy",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_material3.Link,
+        {
+          href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
+          sx: { fontWeight: "bold" },
+          target: "_blank",
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ConnectWalletDialog = ({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+  const { icon, providerName } = activeProvider ?? {};
+  const onConnect = async () => {
+    try {
+      await activeProvider?.connectWallet?.();
+      props.onClose?.({}, "escapeKeyDown");
+    } catch (e) {
+      console.warn(`Error connecting to wallet: ${e.message}`);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Dialog, { PaperProps: { sx: { display: "flex", gap: 4 } }, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogContent, { sx: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LinkedProvidersFlexbox, { icon, providerName }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WalletPermissionsFlexbox, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogActions, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { variant: "outlined", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { variant: "contained", onClick: onConnect, children: "Connect" })
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/revoke/Dialog.tsx
+var import_material5 = require("@mui/material");
+var import_react_crypto4 = require("@xylabs/react-crypto");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Dialog, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox3.FlexRow, { gap: 2, justifyContent: "start", pl: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_crypto4.ConstrainedImage, { src: activeProvider?.icon, constrainedValue: "24px" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.DialogTitle, { sx: { pl: 0 }, children: [
+        "Revoke ",
+        activeProvider?.providerName,
+        " Access"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.DialogContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.Typography, { children: [
+        "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",
+        activeProvider?.providerName,
+        "'s documentation on how to revoke access to this website:"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Typography, { children: window.location.origin })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.DialogActions, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Button, { variant: "contained", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }) })
+  ] });
+};
+
+// src/components/wallet/table/cells/Accounts.tsx
+var import_material6 = require("@mui/material");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ConnectedWalletsAccountsTableCell = ({
+  additionalAccounts,
+  currentAccount,
+  totalAccounts,
+  tableCellProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_material6.Tooltip,
+    {
+      sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
+      title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: address }, index)),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Typography, { children: totalAccounts })
+    }
+  ) });
+};
+
+// src/components/wallet/table/cells/Actions.tsx
+var import_icons_material2 = require("@mui/icons-material");
+var import_material7 = require("@mui/material");
+var import_react_flexbox4 = require("@xylabs/react-flexbox");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ConnectedWalletsActionsTableCell = ({ connected, onConnect, onRevoke, tableCellProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_flexbox4.FlexRow, { gap: 2, justifyContent: "start", children: [
+    connected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Typography, { sx: { display: "inline-flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material2.Check, {}),
+      "Connected"
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.Button, { variant: "contained", onClick: onConnect, children: "Connect" }),
+    connected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.IconButton, { onClick: onRevoke, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material2.InfoOutlined, {}) }) : null
+  ] }) });
+};
+
+// src/components/wallet/table/cells/ChainName.tsx
+var import_material8 = require("@mui/material");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.TableCell, { ...tableCellProps, children: chainName });
+};
+
+// src/components/wallet/table/cells/State.tsx
+var import_material9 = require("@mui/material");
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ConnectedWalletState = ({ connected, walletRdns, tableCellProps }) => {
+  const { disableWallet, enableWallet, wallets } = useEnabledWallets();
+  const enabled = (0, import_react3.useMemo)(() => walletRdns ? wallets[walletRdns].enabled : false, [wallets, walletRdns]);
+  const handleClick = (event) => {
+    const checked = event.target?.checked;
+    if (walletRdns) {
+      checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
+};
+
+// src/components/wallet/table/cells/Wallet.tsx
+var import_material10 = require("@mui/material");
+var import_react_crypto5 = require("@xylabs/react-crypto");
+var import_react_flexbox5 = require("@xylabs/react-flexbox");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ConnectedWalletsWalletTableCell = ({ icon, walletName, tableCellProps }) => {
+  const theme = (0, import_material10.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material10.TableCell, { ...tableCellProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox5.FlexRow, { gap: 2, justifyContent: "start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_crypto5.ConstrainedImage, { constrainedValue: theme.spacing(4), src: icon }),
+    walletName
+  ] }) });
+};
+
+// src/components/wallet/table/cells/Cells.tsx
+var ConnectedWalletTableCells = [
+  ConnectedWalletsWalletTableCell,
+  ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletState
+];
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+var import_material12 = require("@mui/material");
+var import_react6 = require("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
+var import_material11 = require("@mui/material");
+var import_react_crypto6 = require("@xylabs/react-crypto");
+var import_react4 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var WalletConnectionsTableRow = ({
+  ignoreConnectDialog,
+  onConnectClick,
+  onRevoke,
+  wallet,
+  ...props
+}) => {
+  const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = (0, import_react_crypto6.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 } = (0, import_react4.useMemo)(() => providerInfo ?? { icon: void 0, name: void 0, rdns: void 0 }, [providerInfo]);
+  const activeProvider = (0, import_react4.useMemo)(
+    () => ({
+      connectWallet,
+      icon,
+      providerName: name
+    }),
+    [connectWallet, icon, name]
+  );
+  const onRevokeLocal = (0, import_react4.useCallback)(() => {
+    onRevoke?.(activeProvider);
+  }, [activeProvider, onRevoke]);
+  const onConnectLocal = (0, import_react4.useCallback)(async () => {
+    if (ignoreConnectDialog) {
+      await connectWallet?.();
+    } else {
+      onConnectClick?.(activeProvider);
+    }
+  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material11.TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Cell,
+    {
+      additionalAccounts,
+      chainName,
+      connected,
+      currentAccount,
+      icon,
+      onConnect: onConnectLocal,
+      onRevoke: onRevokeLocal,
+      totalAccounts,
+      walletName: name,
+      walletRdns: rdns
+    },
+    index
+  )) });
+};
+
+// src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
+var import_react5 = require("react");
+var useActiveProviderDialogState = (setActiveProvider) => {
+  const [show, setShow] = (0, import_react5.useState)(false);
+  const onSetActiveProvider = (activeProvider) => {
+    setShow(true);
+    setActiveProvider(activeProvider);
+  };
+  const onClose = () => {
+    setShow(false);
+    setActiveProvider({});
+  };
+  return [show, onSetActiveProvider, onClose];
+};
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ConnectedWalletsTable = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = (0, import_react6.useState)();
+  const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
+  const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material12.Table, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableRow, { children: WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableCell, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.TableBody, { children: (wallets ?? []).map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        WalletConnectionsTableRow,
+        {
+          ignoreConnectDialog,
+          onConnectClick: onSetActiveProviderConnect,
+          onRevoke: onSetActiveProviderRevoke,
+          wallet
+        },
+        wallet.providerInfo?.rdns
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ConnectWalletDialog,
+      {
+        activeProvider,
+        onClose: onConnectClose,
+        open: showConnect,
+        onIgnoreConnectDialog
+      }
+    )
+  ] });
+};
+
+// src/components/ConnectedAccountsFlexbox.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ConnectedAccountsFlexbox = (0, import_react7.forwardRef)(
+  ({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
+    const theme = (0, import_material13.useTheme)();
+    const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_flexbox6.FlexCol, { alignItems: "stretch", justifyContent: "start", gap: 2, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_flexbox6.FlexCol, { alignItems: "start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material13.Typography, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
+        totalConnectedAccounts ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material13.Typography, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
+          "Total Connected Accounts: ",
+          totalConnectedAccounts
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
+    ] });
+  }
+);
+ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
 //# sourceMappingURL=index.cjs.map