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

package/dist/browser/index.js

@@ -1,2 +1,542 @@
-var R="XYO|EnabledWallets",x=class{persistPreferences=!0;enabledWallets={};ethWalletsState={};listeners=[];localStorageKey=R;constructor(e=R){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 o={},l=([n,a])=>{o[n]={enabled:n in this.enabledWallets?this.enabledWallets[n]:!0,wallet:a}};Object.entries(e).forEach(l.bind(this)),this.ethWalletsState=o,this.emitChange()}subscribe(e){return this.listeners=[...this.listeners,e],()=>{this.listeners=this.listeners.filter(o=>o!==e)}}toggleEnabledWallet(e,o){e&&this.ethWalletsState[e]&&(this.ethWalletsState[e].enabled=o,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((o,[l,{enabled:n}])=>(o[l]=n,o),{});localStorage.setItem(this.localStorageKey,JSON.stringify(e))})}reviveSettings(){this.isPersistance(()=>{let e=localStorage.getItem(this.localStorageKey);try{let o=e?JSON.parse(e):{};this.enabledWallets=o}catch(o){console.warn(`Error parsing saved enabled wallet entries: ${o.message}`)}})}};import{Typography as me,useTheme as To}from"@mui/material";import{FlexCol as be}from"@xylabs/react-flexbox";import{forwardRef as yo}from"react";import{AccountsChangedEventName as I,useWalletDiscovery as We}from"@xylabs/react-crypto";import{useEffect as L,useMemo as xe,useState as B}from"react";var Pe=t=>Object.values(t).reduce((e,o)=>(o.allowedAccounts.length>0?e.unshift(o):e.push(o),e),[]),O=()=>{let t=We(),[e,o]=B(0),[l,n]=B([]);L(()=>{n(Pe(t))},[t,e]),L(()=>{let r=()=>{o(i=>i+1)};return window.addEventListener(I,r),()=>{window.removeEventListener(I,r)}},[t]);let a=xe(()=>Object.values(l).reduce((r,i)=>r+i.allowedAccounts.length,0),[l]);return{sortedWallets:l,totalConnectedAccounts:a}};import{useWalletDiscovery as Te}from"@xylabs/react-crypto";import{useMemo as N,useSyncExternalStore as ye}from"react";var s,we=t=>{let e=Te(),o=N(()=>{s===void 0&&(s=new x),s.resetWallets(e);for(let[l,n]of Object.entries(t??{}))s?.toggleEnabledWallet(l,n);return s},[e,t]);return ye(o.subscribe.bind(o),()=>o.wallets)},M=t=>{let e=we(t),o=N(()=>Object.entries(e).reduce((l,[n,a])=>(a.enabled&&(l[n]=a),l),{}),[e]);return{disableWallet:s?.disableWallet.bind(s),enableWallet:s?.enableWallet.bind(s),enabledWallets:o,wallets:e}};import{Checkbox as Se,FormControl as Ae,FormLabel as Ee}from"@mui/material";import{jsx as Y,jsxs as Fe}from"react/jsx-runtime";var H=({onCheckChanged:t,...e})=>Y(Ae,{...e,children:Fe(Ee,{children:[Y(Se,{onChange:(o,l)=>t?.(l)}),"Do not show this again."]})});import{Button as $,Dialog as Be,DialogActions as Oe,DialogContent as Ne,DialogTitle as Me}from"@mui/material";import{SyncAlt as De}from"@mui/icons-material";import{Typography as X}from"@mui/material";import{ConstrainedImage as ke}from"@xylabs/react-crypto";import{FlexCol as V,FlexRow as Re}from"@xylabs/react-flexbox";import{default as K}from"./xyo-color-logo-LHR2SMEM.svg";import{default as zo}from"./xyo-color-logo-text-only-QPAW5BSQ.svg";import{jsx as v,jsxs as A}from"react/jsx-runtime";var _=({icon:t,providerName:e,...o})=>A(Re,{gap:4,justifyContent:"space-evenly",...o,children:[A(V,{gap:.5,children:[v("img",{alt:"XYO Logo",src:K,style:{height:"48px"}}),v(X,{variant:"subtitle1",children:"XYO App"})]}),v(De,{fontSize:"large"}),A(V,{gap:.5,children:[v(ke,{constrainedValue:"48px",src:t,alt:e,style:{height:"48px",maxWidth:"48px"}}),v(X,{variant:"subtitle1",children:e})]})]});import{Link as Ie,Typography as z}from"@mui/material";import{FlexCol as Le}from"@xylabs/react-flexbox";import{jsx as P,jsxs as E}from"react/jsx-runtime";var J=t=>E(Le,{gap:4,...t,children:[P(z,{fontWeight:"bold",sx:{textAlign:"center"},children:"This will allow XYO to:"}),E("ul",{children:[P("li",{children:"View your wallet account(s) and address(es)"}),P("li",{children:"Read-only access to browse the public blockchain(s) you select"})]}),E(z,{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"," ",P(Ie,{href:"https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",sx:{fontWeight:"bold"},target:"_blank",children:"here"}),"."]})]});import{jsx as b,jsxs as F}from"react/jsx-runtime";var G=({activeProvider:t,onIgnoreConnectDialog:e,...o})=>{let{icon:l,providerName:n}=t??{};return F(Be,{PaperProps:{sx:{display:"flex",gap:4}},...o,children:[b(Me,{sx:{textAlign:"center"},children:"XYO Wants To Access The Blockchain on Your Behalf"}),F(Ne,{sx:{display:"flex",flexDirection:"column",gap:4},children:[b(_,{icon:l,providerName:n}),b(J,{}),b(H,{onCheckChanged:e})]}),F(Oe,{children:[b($,{variant:"outlined",onClick:()=>o.onClose?.({},"escapeKeyDown"),children:"Close"}),b($,{variant:"contained",onClick:async()=>{try{await t?.connectWallet?.(),o.onClose?.({},"escapeKeyDown")}catch(r){console.warn(`Error connecting to wallet: ${r.message}`)}},children:"Connect"})]})]})};import{Button as Ye,Dialog as He,DialogActions as Ke,DialogContent as Xe,DialogTitle as Ve,Typography as U}from"@mui/material";import{ConstrainedImage as _e}from"@xylabs/react-crypto";import{FlexRow as ze}from"@xylabs/react-flexbox";import{jsx as T,jsxs as u}from"react/jsx-runtime";var q=({activeProvider:t,...e})=>u(He,{...e,children:[u(ze,{gap:2,justifyContent:"start",pl:2,children:[T(_e,{src:t?.icon,constrainedValue:"24px"}),u(Ve,{sx:{pl:0},children:["Revoke ",t?.providerName," Access"]})]}),u(Xe,{children:[u(U,{children:["Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",t?.providerName,"'s documentation on how to revoke access to this website:"]}),T(U,{children:window.location.origin})]}),T(Ke,{children:T(Ye,{variant:"contained",onClick:()=>e.onClose?.({},"escapeKeyDown"),children:"Close"})})]});import{TableCell as Je,Tooltip as $e,Typography as Ge}from"@mui/material";import{jsx as y}from"react/jsx-runtime";var Q=({additionalAccounts:t,currentAccount:e,totalAccounts:o,tableCellProps:l})=>y(Je,{...l,children:y($e,{sx:{cursor:o>0?"pointer":"auto"},title:[...e??[],...t??[]].map((n,a)=>y("p",{children:n},a)),children:y(Ge,{children:o})})});import{Check as Ue,InfoOutlined as qe}from"@mui/icons-material";import{Button as Qe,IconButton as Ze,TableCell as je,Typography as eo}from"@mui/material";import{FlexRow as oo}from"@xylabs/react-flexbox";import{jsx as W,jsxs as Z}from"react/jsx-runtime";var j=({connected:t,onConnect:e,onRevoke:o,tableCellProps:l})=>W(je,{...l,children:Z(oo,{gap:2,justifyContent:"start",children:[t?Z(eo,{sx:{display:"inline-flex",gap:.5},children:[W(Ue,{}),"Connected"]}):W(Qe,{variant:"contained",onClick:e,children:"Connect"}),t?W(Ze,{onClick:o,children:W(qe,{})}):null]})});import{TableCell as to}from"@mui/material";import{jsx as lo}from"react/jsx-runtime";var ee=({chainName:t,tableCellProps:e})=>lo(to,{...e,children:t});import{Switch as no,TableCell as ao}from"@mui/material";import{useMemo as ro}from"react";import{jsx as oe}from"react/jsx-runtime";var te=({connected:t,walletRdns:e,tableCellProps:o})=>{let{disableWallet:l,enableWallet:n,wallets:a}=M(),r=ro(()=>e?a[e].enabled:!1,[a,e]);return oe(ao,{...o,children:oe(no,{disabled:!t,checked:t&&r,onChange:c=>{let p=c.target?.checked;e&&(p?n?.(e):l?.(e))}})})};import{TableCell as so,useTheme as io}from"@mui/material";import{ConstrainedImage as co}from"@xylabs/react-crypto";import{FlexRow as po}from"@xylabs/react-flexbox";import{jsx as le,jsxs as Co}from"react/jsx-runtime";var ne=({icon:t,walletName:e,tableCellProps:o})=>{let l=io();return le(so,{...o,children:Co(po,{gap:2,justifyContent:"start",children:[le(co,{constrainedValue:l.spacing(4),src:t}),e]})})};var ae=[ne,ee,Q,j,te];import{Table as ho,TableBody as fo,TableCell as vo,TableHead as uo,TableRow as Wo}from"@mui/material";import{useState as xo}from"react";var re=[{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}];import{TableRow as mo}from"@mui/material";import{useEthWallet as bo}from"@xylabs/react-crypto";import{useCallback as se,useMemo as ie}from"react";import{jsx as ce}from"react/jsx-runtime";var de=({ignoreConnectDialog:t,onConnectClick:e,onRevoke:o,wallet:l,...n})=>{let{currentAccount:a,additionalAccounts:r,chainName:i,connectWallet:c,providerInfo:p}=bo(l),g=a?.toString()?[a.toString()]:[],w=(r?.length??0)+(g?.length??0),C=!!(g?.length??!1),{icon:h,name:f,rdns:S}=ie(()=>p??{icon:void 0,name:void 0,rdns:void 0},[p]),m=ie(()=>({connectWallet:c,icon:h,providerName:f}),[c,h,f]),he=se(()=>{o?.(m)},[m,o]),fe=se(async()=>{t?await c?.():e?.(m)},[m,c,t,e]);return ce(mo,{...n,children:Object.values(ae).map((ve,ue)=>ce(ve,{additionalAccounts:r,chainName:i,connected:C,currentAccount:g,icon:h,onConnect:fe,onRevoke:he,totalAccounts:w,walletName:f,walletRdns:S},ue))})};import{useState as go}from"react";var D=t=>{let[e,o]=go(!1);return[e,a=>{o(!0),t(a)},()=>{o(!1),t({})}]};import{Fragment as Po,jsx as d,jsxs as pe}from"react/jsx-runtime";var Ce=({ignoreConnectDialog:t,onIgnoreConnectDialog:e,wallets:o,...l})=>{let[n,a]=xo(),[r,i,c]=D(a),[p,g,w]=D(a);return pe(Po,{children:[pe(ho,{...l,children:[d(uo,{children:d(Wo,{children:re.map(({disablePadding:C,id:h,label:f,align:S,width:m})=>d(vo,{align:S,padding:C?"none":"normal",width:m??"auto",children:f},h))})}),d(fo,{children:(o??[]).map(C=>d(de,{ignoreConnectDialog:t,onConnectClick:i,onRevoke:g,wallet:C},C.providerInfo?.rdns))})]}),d(q,{open:p,onClose:w,activeProvider:n}),d(G,{activeProvider:n,onClose:c,open:r,onIgnoreConnectDialog:e})]})};import{jsx as ge,jsxs as k}from"react/jsx-runtime";var wo=yo(({ignoreConnectDialog:t,onIgnoreConnectDialog:e,...o},l)=>{let n=To(),{totalConnectedAccounts:a,sortedWallets:r}=O();return k(be,{alignItems:"stretch",justifyContent:"start",gap:2,ref:l,...o,children:[k(be,{alignItems:"start",children:[ge(me,{variant:"h2",sx:{mb:.5},children:"Detected Web3 Wallets"}),a?k(me,{variant:"subtitle1",color:n.palette.secondary.main,sx:{opacity:.5},children:["Total Connected Accounts: ",a]}):null]}),ge(Ce,{wallets:r,ignoreConnectDialog:t,onIgnoreConnectDialog:e})]})});wo.displayName="ConnectedAccountsFlexbox";export{H as CheckboxFormControl,G as ConnectWalletDialog,wo as ConnectedAccountsFlexbox,te as ConnectedWalletState,ae as ConnectedWalletTableCells,Q as ConnectedWalletsAccountsTableCell,j as ConnectedWalletsActionsTableCell,ee as ConnectedWalletsChainNameTableCell,Ce as ConnectedWalletsTable,ne as ConnectedWalletsWalletTableCell,x as EnabledEthWalletConnections,q as RevokeWalletConnectionDialog,de as WalletConnectionsTableRow,D as useActiveProviderDialogState,O as useDetectedWallets,M as useEnabledWallets,we as useEnabledWalletsInner};
+// src/classes/EnabledWallets.ts
+var DEFAULT_LOCAL_STORAGE_KEY = "XYO|EnabledWallets";
+var EnabledEthWalletConnections = class {
+  // control whether or not enabled/disabled preferences are persisted (i.e. in localStorage)
+  persistPreferences = true;
+  // Map of wallet names and their enabled/disabled state
+  enabledWallets = {};
+  // Map of wallet names, their enabled/disabled state, and their wallet class
+  ethWalletsState = {};
+  // list of listeners that want to be notified on wallet changes
+  listeners = [];
+  // key to use in localStorage when persisting preferences
+  localStorageKey = DEFAULT_LOCAL_STORAGE_KEY;
+  constructor(localStorageKey = DEFAULT_LOCAL_STORAGE_KEY) {
+    this.localStorageKey = localStorageKey;
+    this.reviveSettings();
+  }
+  get wallets() {
+    return this.ethWalletsState;
+  }
+  disableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, false);
+  }
+  enableWallet(rdns) {
+    this.toggleEnabledWallet(rdns, true);
+  }
+  /**
+   * Given a new set of wallets, set their enabled state based off previous preferences
+   */
+  resetWallets(wallets) {
+    const newWallets = {};
+    const addWallet = ([walletName, wallet]) => {
+      newWallets[walletName] = {
+        // preserve the existing enabled state
+        enabled: walletName in this.enabledWallets ? this.enabledWallets[walletName] : true,
+        wallet
+      };
+    };
+    Object.entries(wallets).forEach(addWallet.bind(this));
+    this.ethWalletsState = newWallets;
+    this.emitChange();
+  }
+  subscribe(listener) {
+    this.listeners = [...this.listeners, listener];
+    return () => {
+      this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
+    };
+  }
+  toggleEnabledWallet(rdns, enabled) {
+    if (rdns && this.ethWalletsState[rdns]) {
+      this.ethWalletsState[rdns].enabled = enabled;
+      this.ethWalletsState = { ...this.ethWalletsState };
+      this.emitChange();
+    }
+  }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+    this.persistSettings();
+  }
+  isPersistance(method) {
+    if (this.persistPreferences) {
+      method();
+    }
+  }
+  persistSettings() {
+    this.isPersistance(() => {
+      const enabledWallets = Object.entries(this.ethWalletsState).reduce((acc, [rdns, { enabled }]) => {
+        acc[rdns] = enabled;
+        return acc;
+      }, {});
+      localStorage.setItem(this.localStorageKey, JSON.stringify(enabledWallets));
+    });
+  }
+  reviveSettings() {
+    this.isPersistance(() => {
+      const existingEntries = localStorage.getItem(this.localStorageKey);
+      try {
+        const entries = existingEntries ? JSON.parse(existingEntries) : {};
+        this.enabledWallets = entries;
+      } catch (e) {
+        console.warn(`Error parsing saved enabled wallet entries: ${e.message}`);
+      }
+    });
+  }
+};
+
+// src/components/ConnectedAccountsFlexbox.tsx
+import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import { forwardRef } from "react";
+
+// src/hooks/useDetectWallets.tsx
+import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
+import { useEffect, useMemo, useState } from "react";
+var sortWallets = (wallets) => (
+  // eslint-disable-next-line unicorn/no-array-reduce
+  Object.values(wallets).reduce((acc, wallet) => {
+    wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet);
+    return acc;
+  }, [])
+);
+var useDetectedWallets = () => {
+  const wallets = useWalletDiscovery();
+  const [refresh, setRefresh] = useState(0);
+  const [sortedWallets, setSortedWallets] = useState([]);
+  useEffect(() => {
+    setSortedWallets(sortWallets(wallets));
+  }, [wallets, refresh]);
+  useEffect(() => {
+    const listener = () => {
+      setRefresh((refresh2) => refresh2 + 1);
+    };
+    window.addEventListener(AccountsChangedEventName, listener);
+    return () => {
+      window.removeEventListener(AccountsChangedEventName, listener);
+    };
+  }, [wallets]);
+  const totalConnectedAccounts = useMemo(
+    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
+    [sortedWallets]
+  );
+  return { sortedWallets, totalConnectedAccounts };
+};
+
+// src/hooks/useEnabledWallets.tsx
+import { useWalletDiscovery as useWalletDiscovery2 } from "@xylabs/react-crypto";
+import { useMemo as useMemo2, useSyncExternalStore } from "react";
+var enabledEthWallets;
+var useEnabledWalletsInner = (enabledWalletsRdns) => {
+  const discoveredWallets = useWalletDiscovery2();
+  const wallets = useMemo2(() => {
+    if (enabledEthWallets === void 0) enabledEthWallets = new EnabledEthWalletConnections();
+    enabledEthWallets.resetWallets(discoveredWallets);
+    for (const [rdns, enabled] of Object.entries(enabledWalletsRdns ?? {})) enabledEthWallets?.toggleEnabledWallet(rdns, enabled);
+    return enabledEthWallets;
+  }, [discoveredWallets, enabledWalletsRdns]);
+  return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
+};
+var useEnabledWallets = (enabledWalletsRdns) => {
+  const wallets = useEnabledWalletsInner(enabledWalletsRdns);
+  const enabledWallets = useMemo2(
+    () => (
+      // eslint-disable-next-line unicorn/no-array-reduce
+      Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
+        if (wallet.enabled) acc[walletName] = wallet;
+        return acc;
+      }, {})
+    ),
+    [wallets]
+  );
+  return {
+    disableWallet: enabledEthWallets?.disableWallet.bind(enabledEthWallets),
+    enableWallet: enabledEthWallets?.enableWallet.bind(enabledEthWallets),
+    enabledWallets,
+    wallets
+  };
+};
+
+// src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
+import { Checkbox, FormControl, FormLabel } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
+  return /* @__PURE__ */ jsx(FormControl, { ...props, children: /* @__PURE__ */ jsxs(FormLabel, { children: [
+    /* @__PURE__ */ jsx(Checkbox, { onChange: (_, checked) => onCheckChanged?.(checked) }),
+    "Do not show this again."
+  ] }) });
+};
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+
+// src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
+import { SyncAlt } from "@mui/icons-material";
+import { Typography } from "@mui/material";
+import { ConstrainedImage } from "@xylabs/react-crypto";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+
+// src/img/index.ts
+import { default as default2 } from "./xyo-color-logo-LHR2SMEM.svg";
+import { default as default3 } from "./xyo-color-logo-text-only-QPAW5BSQ.svg";
+
+// src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LinkedProvidersFlexbox = ({ icon, providerName, ...props }) => {
+  return /* @__PURE__ */ jsxs2(FlexRow, { gap: 4, justifyContent: "space-evenly", ...props, children: [
+    /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ jsx2("img", { alt: "XYO Logo", src: default2, style: { height: "48px" } }),
+      /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: "XYO App" })
+    ] }),
+    /* @__PURE__ */ jsx2(SyncAlt, { fontSize: "large" }),
+    /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
+      /* @__PURE__ */ jsx2(ConstrainedImage, { constrainedValue: "48px", src: icon, alt: providerName, style: { height: "48px", maxWidth: "48px" } }),
+      /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: providerName })
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/connect/Permissions.tsx
+import { Link, Typography as Typography2 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WalletPermissionsFlexbox = (props) => {
+  return /* @__PURE__ */ jsxs3(FlexCol2, { gap: 4, ...props, children: [
+    /* @__PURE__ */ jsx3(Typography2, { fontWeight: "bold", sx: { textAlign: "center" }, children: "This will allow XYO to:" }),
+    /* @__PURE__ */ jsxs3("ul", { children: [
+      /* @__PURE__ */ jsx3("li", { children: "View your wallet account(s) and address(es)" }),
+      /* @__PURE__ */ jsx3("li", { children: "Read-only access to browse the public blockchain(s) you select" })
+    ] }),
+    /* @__PURE__ */ jsxs3(Typography2, { variant: "subtitle1", sx: { textAlign: "center" }, children: [
+      "You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet's settings at anytime. View more on XYO's sovereign data philosophy",
+      " ",
+      /* @__PURE__ */ jsx3(
+        Link,
+        {
+          href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
+          sx: { fontWeight: "bold" },
+          target: "_blank",
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/connect/Dialog.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConnectWalletDialog = ({ activeProvider, onIgnoreConnectDialog, ...props }) => {
+  const { icon, providerName } = activeProvider ?? {};
+  const onConnect = async () => {
+    try {
+      await activeProvider?.connectWallet?.();
+      props.onClose?.({}, "escapeKeyDown");
+    } catch (e) {
+      console.warn(`Error connecting to wallet: ${e.message}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(Dialog, { PaperProps: { sx: { display: "flex", gap: 4 } }, ...props, children: [
+    /* @__PURE__ */ jsx4(DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
+    /* @__PURE__ */ jsxs4(DialogContent, { sx: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx4(LinkedProvidersFlexbox, { icon, providerName }),
+      /* @__PURE__ */ jsx4(WalletPermissionsFlexbox, {}),
+      /* @__PURE__ */ jsx4(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
+    ] }),
+    /* @__PURE__ */ jsxs4(DialogActions, { children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "outlined", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }),
+      /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: onConnect, children: "Connect" })
+    ] })
+  ] });
+};
+
+// src/components/wallet/dialogs/revoke/Dialog.tsx
+import { Button as Button2, Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, Typography as Typography3 } from "@mui/material";
+import { ConstrainedImage as ConstrainedImage2 } from "@xylabs/react-crypto";
+import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
+  return /* @__PURE__ */ jsxs5(Dialog2, { ...props, children: [
+    /* @__PURE__ */ jsxs5(FlexRow2, { gap: 2, justifyContent: "start", pl: 2, children: [
+      /* @__PURE__ */ jsx5(ConstrainedImage2, { src: activeProvider?.icon, constrainedValue: "24px" }),
+      /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { pl: 0 }, children: [
+        "Revoke ",
+        activeProvider?.providerName,
+        " Access"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(DialogContent2, { children: [
+      /* @__PURE__ */ jsxs5(Typography3, { children: [
+        "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",
+        activeProvider?.providerName,
+        "'s documentation on how to revoke access to this website:"
+      ] }),
+      /* @__PURE__ */ jsx5(Typography3, { children: window.location.origin })
+    ] }),
+    /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }) })
+  ] });
+};
+
+// src/components/wallet/table/cells/Accounts.tsx
+import { TableCell, Tooltip, Typography as Typography4 } from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ConnectedWalletsAccountsTableCell = ({
+  additionalAccounts,
+  currentAccount,
+  totalAccounts,
+  tableCellProps
+}) => {
+  return /* @__PURE__ */ jsx6(TableCell, { ...tableCellProps, children: /* @__PURE__ */ jsx6(
+    Tooltip,
+    {
+      sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
+      title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ jsx6("p", { children: address }, index)),
+      children: /* @__PURE__ */ jsx6(Typography4, { children: totalAccounts })
+    }
+  ) });
+};
+
+// src/components/wallet/table/cells/Actions.tsx
+import { Check, InfoOutlined } from "@mui/icons-material";
+import { Button as Button3, IconButton, TableCell as TableCell2, Typography as Typography5 } from "@mui/material";
+import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ConnectedWalletsActionsTableCell = ({ connected, onConnect, onRevoke, tableCellProps }) => {
+  return /* @__PURE__ */ jsx7(TableCell2, { ...tableCellProps, children: /* @__PURE__ */ jsxs6(FlexRow3, { gap: 2, justifyContent: "start", children: [
+    connected ? /* @__PURE__ */ jsxs6(Typography5, { sx: { display: "inline-flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx7(Check, {}),
+      "Connected"
+    ] }) : /* @__PURE__ */ jsx7(Button3, { variant: "contained", onClick: onConnect, children: "Connect" }),
+    connected ? /* @__PURE__ */ jsx7(IconButton, { onClick: onRevoke, children: /* @__PURE__ */ jsx7(InfoOutlined, {}) }) : null
+  ] }) });
+};
+
+// src/components/wallet/table/cells/ChainName.tsx
+import { TableCell as TableCell3 } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
+  return /* @__PURE__ */ jsx8(TableCell3, { ...tableCellProps, children: chainName });
+};
+
+// src/components/wallet/table/cells/State.tsx
+import { Switch, TableCell as TableCell4 } from "@mui/material";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ConnectedWalletState = ({ connected, walletRdns, tableCellProps }) => {
+  const { disableWallet, enableWallet, wallets } = useEnabledWallets();
+  const enabled = useMemo3(() => walletRdns ? wallets[walletRdns].enabled : false, [wallets, walletRdns]);
+  const handleClick = (event) => {
+    const checked = event.target?.checked;
+    if (walletRdns) {
+      checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
+    }
+  };
+  return /* @__PURE__ */ jsx9(TableCell4, { ...tableCellProps, children: /* @__PURE__ */ jsx9(Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
+};
+
+// src/components/wallet/table/cells/Wallet.tsx
+import { TableCell as TableCell5, useTheme } from "@mui/material";
+import { ConstrainedImage as ConstrainedImage3 } from "@xylabs/react-crypto";
+import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ConnectedWalletsWalletTableCell = ({ icon, walletName, tableCellProps }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx10(TableCell5, { ...tableCellProps, children: /* @__PURE__ */ jsxs7(FlexRow4, { gap: 2, justifyContent: "start", children: [
+    /* @__PURE__ */ jsx10(ConstrainedImage3, { constrainedValue: theme.spacing(4), src: icon }),
+    walletName
+  ] }) });
+};
+
+// src/components/wallet/table/cells/Cells.tsx
+var ConnectedWalletTableCells = [
+  ConnectedWalletsWalletTableCell,
+  ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletState
+];
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+import { Table, TableBody, TableCell as TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
+import { useState as useState3 } from "react";
+
+// src/components/wallet/lib/TableHeadData.ts
+var WalletsTableHeadCells = [
+  {
+    disablePadding: false,
+    id: "wallet",
+    label: "Wallet",
+    numeric: false,
+    showOnMobile: true
+  },
+  {
+    disablePadding: false,
+    id: "chain",
+    label: "Chain",
+    numeric: false,
+    showOnMobile: true
+  },
+  {
+    disablePadding: false,
+    id: "accounts",
+    label: "Accounts",
+    numeric: true,
+    showOnMobile: true
+  },
+  {
+    disablePadding: false,
+    id: "actions",
+    label: "Actions",
+    numeric: false,
+    showOnMobile: true
+  },
+  {
+    disablePadding: false,
+    id: "enabled",
+    label: "Enabled",
+    numeric: false,
+    showOnMobile: true
+  }
+];
+
+// src/components/wallet/table/ConnectedWalletsTableRow.tsx
+import { TableRow } from "@mui/material";
+import { useEthWallet } from "@xylabs/react-crypto";
+import { useCallback, useMemo as useMemo4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var WalletConnectionsTableRow = ({
+  ignoreConnectDialog,
+  onConnectClick,
+  onRevoke,
+  wallet,
+  ...props
+}) => {
+  const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = useEthWallet(wallet);
+  const currentAccount = currentAccountFromWallet?.toString() ? [currentAccountFromWallet.toString()] : [];
+  const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0);
+  const connected = !!(currentAccount?.length ?? 0 > 0);
+  const { icon, name, rdns } = useMemo4(() => providerInfo ?? { icon: void 0, name: void 0, rdns: void 0 }, [providerInfo]);
+  const activeProvider = useMemo4(
+    () => ({
+      connectWallet,
+      icon,
+      providerName: name
+    }),
+    [connectWallet, icon, name]
+  );
+  const onRevokeLocal = useCallback(() => {
+    onRevoke?.(activeProvider);
+  }, [activeProvider, onRevoke]);
+  const onConnectLocal = useCallback(async () => {
+    if (ignoreConnectDialog) {
+      await connectWallet?.();
+    } else {
+      onConnectClick?.(activeProvider);
+    }
+  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
+  return /* @__PURE__ */ jsx11(TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ jsx11(
+    Cell,
+    {
+      additionalAccounts,
+      chainName,
+      connected,
+      currentAccount,
+      icon,
+      onConnect: onConnectLocal,
+      onRevoke: onRevokeLocal,
+      totalAccounts,
+      walletName: name,
+      walletRdns: rdns
+    },
+    index
+  )) });
+};
+
+// src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
+import { useState as useState2 } from "react";
+var useActiveProviderDialogState = (setActiveProvider) => {
+  const [show, setShow] = useState2(false);
+  const onSetActiveProvider = (activeProvider) => {
+    setShow(true);
+    setActiveProvider(activeProvider);
+  };
+  const onClose = () => {
+    setShow(false);
+    setActiveProvider({});
+  };
+  return [show, onSetActiveProvider, onClose];
+};
+
+// src/components/wallet/table/ConnectedWalletsTable.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var ConnectedWalletsTable = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = useState3();
+  const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
+  const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(Table, { ...props, children: [
+      /* @__PURE__ */ jsx12(TableHead, { children: /* @__PURE__ */ jsx12(TableRow2, { children: WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => /* @__PURE__ */ jsx12(TableCell6, { align, padding: disablePadding ? "none" : "normal", width: width ?? "auto", children: label }, id)) }) }),
+      /* @__PURE__ */ jsx12(TableBody, { children: (wallets ?? []).map((wallet) => /* @__PURE__ */ jsx12(
+        WalletConnectionsTableRow,
+        {
+          ignoreConnectDialog,
+          onConnectClick: onSetActiveProviderConnect,
+          onRevoke: onSetActiveProviderRevoke,
+          wallet
+        },
+        wallet.providerInfo?.rdns
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx12(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
+    /* @__PURE__ */ jsx12(
+      ConnectWalletDialog,
+      {
+        activeProvider,
+        onClose: onConnectClose,
+        open: showConnect,
+        onIgnoreConnectDialog
+      }
+    )
+  ] });
+};
+
+// src/components/ConnectedAccountsFlexbox.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ConnectedAccountsFlexbox = forwardRef(
+  ({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
+    const theme = useTheme2();
+    const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
+    return /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "stretch", justifyContent: "start", gap: 2, ref, ...props, children: [
+      /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "start", children: [
+        /* @__PURE__ */ jsx13(Typography6, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
+        totalConnectedAccounts ? /* @__PURE__ */ jsxs9(Typography6, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
+          "Total Connected Accounts: ",
+          totalConnectedAccounts
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx13(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
+    ] });
+  }
+);
+ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
+export {
+  CheckboxFormControl,
+  ConnectWalletDialog,
+  ConnectedAccountsFlexbox,
+  ConnectedWalletState,
+  ConnectedWalletTableCells,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsTable,
+  ConnectedWalletsWalletTableCell,
+  EnabledEthWalletConnections,
+  RevokeWalletConnectionDialog,
+  WalletConnectionsTableRow,
+  useActiveProviderDialogState,
+  useDetectedWallets,
+  useEnabledWallets,
+  useEnabledWalletsInner
+};
 //# sourceMappingURL=index.js.map