@xyo-network/react-connected-accounts 2.77.0 → 2.77.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. package/dist/browser/classes/EnabledWallets.d.cts +0 -9
  2. package/dist/browser/classes/EnabledWallets.d.cts.map +1 -1
  3. package/dist/browser/classes/EnabledWallets.d.mts +0 -9
  4. package/dist/browser/classes/EnabledWallets.d.mts.map +1 -1
  5. package/dist/browser/classes/EnabledWallets.d.ts +0 -9
  6. package/dist/browser/classes/EnabledWallets.d.ts.map +1 -1
  7. package/dist/browser/hooks/useEnabledWallets.d.cts +0 -6
  8. package/dist/browser/hooks/useEnabledWallets.d.cts.map +1 -1
  9. package/dist/browser/hooks/useEnabledWallets.d.mts +0 -6
  10. package/dist/browser/hooks/useEnabledWallets.d.mts.map +1 -1
  11. package/dist/browser/hooks/useEnabledWallets.d.ts +0 -6
  12. package/dist/browser/hooks/useEnabledWallets.d.ts.map +1 -1
  13. package/dist/browser/index.cjs +1 -577
  14. package/dist/browser/index.cjs.map +1 -1
  15. package/dist/browser/index.js +1 -544
  16. package/dist/browser/index.js.map +1 -1
  17. package/dist/neutral/classes/EnabledWallets.d.cts +0 -9
  18. package/dist/neutral/classes/EnabledWallets.d.cts.map +1 -1
  19. package/dist/neutral/classes/EnabledWallets.d.mts +0 -9
  20. package/dist/neutral/classes/EnabledWallets.d.mts.map +1 -1
  21. package/dist/neutral/classes/EnabledWallets.d.ts +0 -9
  22. package/dist/neutral/classes/EnabledWallets.d.ts.map +1 -1
  23. package/dist/neutral/hooks/useEnabledWallets.d.cts +0 -6
  24. package/dist/neutral/hooks/useEnabledWallets.d.cts.map +1 -1
  25. package/dist/neutral/hooks/useEnabledWallets.d.mts +0 -6
  26. package/dist/neutral/hooks/useEnabledWallets.d.mts.map +1 -1
  27. package/dist/neutral/hooks/useEnabledWallets.d.ts +0 -6
  28. package/dist/neutral/hooks/useEnabledWallets.d.ts.map +1 -1
  29. package/dist/neutral/index.cjs +1 -577
  30. package/dist/neutral/index.cjs.map +1 -1
  31. package/dist/neutral/index.js +1 -544
  32. package/dist/neutral/index.js.map +1 -1
  33. package/dist/node/classes/EnabledWallets.d.cts +0 -9
  34. package/dist/node/classes/EnabledWallets.d.cts.map +1 -1
  35. package/dist/node/classes/EnabledWallets.d.mts +0 -9
  36. package/dist/node/classes/EnabledWallets.d.mts.map +1 -1
  37. package/dist/node/classes/EnabledWallets.d.ts +0 -9
  38. package/dist/node/classes/EnabledWallets.d.ts.map +1 -1
  39. package/dist/node/hooks/useEnabledWallets.d.cts +0 -6
  40. package/dist/node/hooks/useEnabledWallets.d.cts.map +1 -1
  41. package/dist/node/hooks/useEnabledWallets.d.mts +0 -6
  42. package/dist/node/hooks/useEnabledWallets.d.mts.map +1 -1
  43. package/dist/node/hooks/useEnabledWallets.d.ts +0 -6
  44. package/dist/node/hooks/useEnabledWallets.d.ts.map +1 -1
  45. package/dist/node/index.cjs +1 -608
  46. package/dist/node/index.cjs.map +1 -1
  47. package/dist/node/index.js +1 -555
  48. package/dist/node/index.js.map +1 -1
  49. package/package.json +4 -4
@@ -1,556 +1,2 @@
1
- // src/classes/EnabledWallets.ts
2
- var DEFAULT_LOCAL_STORAGE_KEY = "XYO|EnabledWallets";
3
- var EnabledEthWalletConnections = class {
4
- // control whether or not enabled/disabled preferences are persisted (i.e. in localStorage)
5
- persistPreferences = true;
6
- // Map of wallet names and their enabled/disabled state
7
- enabledWallets = {};
8
- // Map of wallet names, their enabled/disabled state, and their wallet class
9
- ethWalletsState = {};
10
- // list of listeners that want to be notified on wallet changes
11
- listeners = [];
12
- // key to use in localStorage when persisting preferences
13
- localStorageKey = DEFAULT_LOCAL_STORAGE_KEY;
14
- constructor(localStorageKey = DEFAULT_LOCAL_STORAGE_KEY) {
15
- this.localStorageKey = localStorageKey;
16
- this.reviveSettings();
17
- }
18
- get wallets() {
19
- return this.ethWalletsState;
20
- }
21
- disableWallet(rdns) {
22
- this.toggleEnabledWallet(rdns, false);
23
- }
24
- enableWallet(rdns) {
25
- this.toggleEnabledWallet(rdns, true);
26
- }
27
- /**
28
- * Given a new set of wallets, set their enabled state based off previous preferences
29
- */
30
- resetWallets(wallets) {
31
- const newWallets = {};
32
- const addWallet = ([walletName, wallet]) => {
33
- newWallets[walletName] = {
34
- // preserve the existing enabled state
35
- enabled: walletName in this.enabledWallets ? this.enabledWallets[walletName] : true,
36
- wallet
37
- };
38
- };
39
- Object.entries(wallets).forEach(addWallet.bind(this));
40
- this.ethWalletsState = newWallets;
41
- this.emitChange();
42
- }
43
- subscribe(listener) {
44
- this.listeners = [...this.listeners, listener];
45
- return () => {
46
- this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
47
- };
48
- }
49
- toggleEnabledWallet(rdns, enabled) {
50
- if (rdns && this.ethWalletsState[rdns]) {
51
- this.ethWalletsState[rdns].enabled = enabled;
52
- this.ethWalletsState = { ...this.ethWalletsState };
53
- this.emitChange();
54
- }
55
- }
56
- emitChange() {
57
- for (const listener of this.listeners) {
58
- listener();
59
- }
60
- this.persistSettings();
61
- }
62
- isPersistance(method) {
63
- if (this.persistPreferences) {
64
- method();
65
- }
66
- }
67
- persistSettings() {
68
- this.isPersistance(() => {
69
- const enabledWallets = Object.entries(this.ethWalletsState).reduce((acc, [rdns, { enabled }]) => {
70
- acc[rdns] = enabled;
71
- return acc;
72
- }, {});
73
- localStorage.setItem(this.localStorageKey, JSON.stringify(enabledWallets));
74
- });
75
- }
76
- reviveSettings() {
77
- this.isPersistance(() => {
78
- const existingEntries = localStorage.getItem(this.localStorageKey);
79
- try {
80
- const entries = existingEntries ? JSON.parse(existingEntries) : {};
81
- this.enabledWallets = entries;
82
- } catch (e) {
83
- console.warn(`Error parsing saved enabled wallet entries: ${e.message}`);
84
- }
85
- });
86
- }
87
- };
88
-
89
- // src/components/ConnectedAccountsFlexbox.tsx
90
- import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
91
- import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
92
- import { forwardRef } from "react";
93
-
94
- // src/hooks/useDetectWallets.tsx
95
- import { AccountsChangedEventName, useWalletDiscovery } from "@xylabs/react-crypto";
96
- import { useEffect, useMemo, useState } from "react";
97
- var sortWallets = (wallets) => (
98
- // eslint-disable-next-line unicorn/no-array-reduce
99
- Object.values(wallets).reduce((acc, wallet) => {
100
- wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet);
101
- return acc;
102
- }, [])
103
- );
104
- var useDetectedWallets = () => {
105
- const wallets = useWalletDiscovery();
106
- const [refresh, setRefresh] = useState(0);
107
- const [sortedWallets, setSortedWallets] = useState([]);
108
- useEffect(() => {
109
- setSortedWallets(sortWallets(wallets));
110
- }, [wallets, refresh]);
111
- useEffect(() => {
112
- const listener = () => {
113
- setRefresh((refresh2) => refresh2 + 1);
114
- };
115
- window.addEventListener(AccountsChangedEventName, listener);
116
- return () => {
117
- window.removeEventListener(AccountsChangedEventName, listener);
118
- };
119
- }, [wallets]);
120
- const totalConnectedAccounts = useMemo(
121
- () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
122
- [sortedWallets]
123
- );
124
- return { sortedWallets, totalConnectedAccounts };
125
- };
126
-
127
- // src/hooks/useEnabledWallets.tsx
128
- import { useWalletDiscovery as useWalletDiscovery2 } from "@xylabs/react-crypto";
129
- import { useMemo as useMemo2, useSyncExternalStore } from "react";
130
- var enabledEthWallets;
131
- var useEnabledWalletsInner = (enabledWalletsRdns) => {
132
- const discoveredWallets = useWalletDiscovery2();
133
- const wallets = useMemo2(() => {
134
- if (enabledEthWallets === void 0)
135
- enabledEthWallets = new EnabledEthWalletConnections();
136
- enabledEthWallets.resetWallets(discoveredWallets);
137
- for (const [rdns, enabled] of Object.entries(enabledWalletsRdns ?? {}))
138
- enabledEthWallets == null ? void 0 : enabledEthWallets.toggleEnabledWallet(rdns, enabled);
139
- return enabledEthWallets;
140
- }, [discoveredWallets, enabledWalletsRdns]);
141
- return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
142
- };
143
- var useEnabledWallets = (enabledWalletsRdns) => {
144
- const wallets = useEnabledWalletsInner(enabledWalletsRdns);
145
- const enabledWallets = useMemo2(
146
- () => (
147
- // eslint-disable-next-line unicorn/no-array-reduce
148
- Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
149
- if (wallet.enabled)
150
- acc[walletName] = wallet;
151
- return acc;
152
- }, {})
153
- ),
154
- [wallets]
155
- );
156
- return {
157
- disableWallet: enabledEthWallets == null ? void 0 : enabledEthWallets.disableWallet.bind(enabledEthWallets),
158
- enableWallet: enabledEthWallets == null ? void 0 : enabledEthWallets.enableWallet.bind(enabledEthWallets),
159
- enabledWallets,
160
- wallets
161
- };
162
- };
163
-
164
- // src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
165
- import { Checkbox, FormControl, FormLabel } from "@mui/material";
166
- import { jsx, jsxs } from "react/jsx-runtime";
167
- var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
168
- return /* @__PURE__ */ jsx(FormControl, { ...props, children: /* @__PURE__ */ jsxs(FormLabel, { children: [
169
- /* @__PURE__ */ jsx(Checkbox, { onChange: (_, checked) => onCheckChanged == null ? void 0 : onCheckChanged(checked) }),
170
- "Do not show this again."
171
- ] }) });
172
- };
173
-
174
- // src/components/wallet/dialogs/connect/Dialog.tsx
175
- import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
176
-
177
- // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
178
- import { SyncAlt } from "@mui/icons-material";
179
- import { Typography } from "@mui/material";
180
- import { ConstrainedImage } from "@xylabs/react-crypto";
181
- import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
182
-
183
- // src/img/index.ts
184
- import { default as default2 } from "./xyo-color-logo-LHR2SMEM.svg";
185
- import { default as default3 } from "./xyo-color-logo-text-only-QPAW5BSQ.svg";
186
-
187
- // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
188
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
189
- var LinkedProvidersFlexbox = ({ icon, providerName, ...props }) => {
190
- return /* @__PURE__ */ jsxs2(FlexRow, { gap: 4, justifyContent: "space-evenly", ...props, children: [
191
- /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
192
- /* @__PURE__ */ jsx2("img", { alt: "XYO Logo", src: default2, style: { height: "48px" } }),
193
- /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: "XYO App" })
194
- ] }),
195
- /* @__PURE__ */ jsx2(SyncAlt, { fontSize: "large" }),
196
- /* @__PURE__ */ jsxs2(FlexCol, { gap: 0.5, children: [
197
- /* @__PURE__ */ jsx2(ConstrainedImage, { constrainedValue: "48px", src: icon, alt: providerName, style: { height: "48px", maxWidth: "48px" } }),
198
- /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: providerName })
199
- ] })
200
- ] });
201
- };
202
-
203
- // src/components/wallet/dialogs/connect/Permissions.tsx
204
- import { Link, Typography as Typography2 } from "@mui/material";
205
- import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
206
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
207
- var WalletPermissionsFlexbox = (props) => {
208
- return /* @__PURE__ */ jsxs3(FlexCol2, { gap: 4, ...props, children: [
209
- /* @__PURE__ */ jsx3(Typography2, { fontWeight: "bold", sx: { textAlign: "center" }, children: "This will allow XYO to:" }),
210
- /* @__PURE__ */ jsxs3("ul", { children: [
211
- /* @__PURE__ */ jsx3("li", { children: "View your wallet account(s) and address(es)" }),
212
- /* @__PURE__ */ jsx3("li", { children: "Read-only access to browse the public blockchain(s) you select" })
213
- ] }),
214
- /* @__PURE__ */ jsxs3(Typography2, { variant: "subtitle1", sx: { textAlign: "center" }, children: [
215
- "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",
216
- " ",
217
- /* @__PURE__ */ jsx3(
218
- Link,
219
- {
220
- href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
221
- sx: { fontWeight: "bold" },
222
- target: "_blank",
223
- children: "here"
224
- }
225
- ),
226
- "."
227
- ] })
228
- ] });
229
- };
230
-
231
- // src/components/wallet/dialogs/connect/Dialog.tsx
232
- import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
233
- var ConnectWalletDialog = ({ activeProvider, onIgnoreConnectDialog, ...props }) => {
234
- const { icon, providerName } = activeProvider ?? {};
235
- const onConnect = async () => {
236
- var _a, _b;
237
- try {
238
- await ((_a = activeProvider == null ? void 0 : activeProvider.connectWallet) == null ? void 0 : _a.call(activeProvider));
239
- (_b = props.onClose) == null ? void 0 : _b.call(props, {}, "escapeKeyDown");
240
- } catch (e) {
241
- console.warn(`Error connecting to wallet: ${e.message}`);
242
- }
243
- };
244
- return /* @__PURE__ */ jsxs4(Dialog, { PaperProps: { sx: { display: "flex", gap: 4 } }, ...props, children: [
245
- /* @__PURE__ */ jsx4(DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
246
- /* @__PURE__ */ jsxs4(DialogContent, { sx: { display: "flex", flexDirection: "column", gap: 4 }, children: [
247
- /* @__PURE__ */ jsx4(LinkedProvidersFlexbox, { icon, providerName }),
248
- /* @__PURE__ */ jsx4(WalletPermissionsFlexbox, {}),
249
- /* @__PURE__ */ jsx4(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
250
- ] }),
251
- /* @__PURE__ */ jsxs4(DialogActions, { children: [
252
- /* @__PURE__ */ jsx4(Button, { variant: "outlined", onClick: () => {
253
- var _a;
254
- return (_a = props.onClose) == null ? void 0 : _a.call(props, {}, "escapeKeyDown");
255
- }, children: "Close" }),
256
- /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: onConnect, children: "Connect" })
257
- ] })
258
- ] });
259
- };
260
-
261
- // src/components/wallet/dialogs/revoke/Dialog.tsx
262
- import { Button as Button2, Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2, DialogTitle as DialogTitle2, Typography as Typography3 } from "@mui/material";
263
- import { ConstrainedImage as ConstrainedImage2 } from "@xylabs/react-crypto";
264
- import { FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
265
- import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
266
- var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
267
- return /* @__PURE__ */ jsxs5(Dialog2, { ...props, children: [
268
- /* @__PURE__ */ jsxs5(FlexRow2, { gap: 2, justifyContent: "start", pl: 2, children: [
269
- /* @__PURE__ */ jsx5(ConstrainedImage2, { src: activeProvider == null ? void 0 : activeProvider.icon, constrainedValue: "24px" }),
270
- /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { pl: 0 }, children: [
271
- "Revoke ",
272
- activeProvider == null ? void 0 : activeProvider.providerName,
273
- " Access"
274
- ] })
275
- ] }),
276
- /* @__PURE__ */ jsxs5(DialogContent2, { children: [
277
- /* @__PURE__ */ jsxs5(Typography3, { children: [
278
- "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult ",
279
- activeProvider == null ? void 0 : activeProvider.providerName,
280
- "'s documentation on how to revoke access to this website:"
281
- ] }),
282
- /* @__PURE__ */ jsx5(Typography3, { children: window.location.origin })
283
- ] }),
284
- /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => {
285
- var _a;
286
- return (_a = props.onClose) == null ? void 0 : _a.call(props, {}, "escapeKeyDown");
287
- }, children: "Close" }) })
288
- ] });
289
- };
290
-
291
- // src/components/wallet/table/cells/Accounts.tsx
292
- import { TableCell, Tooltip, Typography as Typography4 } from "@mui/material";
293
- import { jsx as jsx6 } from "react/jsx-runtime";
294
- var ConnectedWalletsAccountsTableCell = ({
295
- additionalAccounts,
296
- currentAccount,
297
- totalAccounts,
298
- tableCellProps
299
- }) => {
300
- return /* @__PURE__ */ jsx6(TableCell, { ...tableCellProps, children: /* @__PURE__ */ jsx6(
301
- Tooltip,
302
- {
303
- sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
304
- title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address, index) => /* @__PURE__ */ jsx6("p", { children: address }, index)),
305
- children: /* @__PURE__ */ jsx6(Typography4, { children: totalAccounts })
306
- }
307
- ) });
308
- };
309
-
310
- // src/components/wallet/table/cells/Actions.tsx
311
- import { Check, InfoOutlined } from "@mui/icons-material";
312
- import { Button as Button3, IconButton, TableCell as TableCell2, Typography as Typography5 } from "@mui/material";
313
- import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
314
- import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
315
- var ConnectedWalletsActionsTableCell = ({ connected, onConnect, onRevoke, tableCellProps }) => {
316
- return /* @__PURE__ */ jsx7(TableCell2, { ...tableCellProps, children: /* @__PURE__ */ jsxs6(FlexRow3, { gap: 2, justifyContent: "start", children: [
317
- connected ? /* @__PURE__ */ jsxs6(Typography5, { sx: { display: "inline-flex", gap: 0.5 }, children: [
318
- /* @__PURE__ */ jsx7(Check, {}),
319
- "Connected"
320
- ] }) : /* @__PURE__ */ jsx7(Button3, { variant: "contained", onClick: onConnect, children: "Connect" }),
321
- connected ? /* @__PURE__ */ jsx7(IconButton, { onClick: onRevoke, children: /* @__PURE__ */ jsx7(InfoOutlined, {}) }) : null
322
- ] }) });
323
- };
324
-
325
- // src/components/wallet/table/cells/ChainName.tsx
326
- import { TableCell as TableCell3 } from "@mui/material";
327
- import { jsx as jsx8 } from "react/jsx-runtime";
328
- var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
329
- return /* @__PURE__ */ jsx8(TableCell3, { ...tableCellProps, children: chainName });
330
- };
331
-
332
- // src/components/wallet/table/cells/State.tsx
333
- import { Switch, TableCell as TableCell4 } from "@mui/material";
334
- import { useMemo as useMemo3 } from "react";
335
- import { jsx as jsx9 } from "react/jsx-runtime";
336
- var ConnectedWalletState = ({ connected, walletRdns, tableCellProps }) => {
337
- const { disableWallet, enableWallet, wallets } = useEnabledWallets();
338
- const enabled = useMemo3(() => walletRdns ? wallets[walletRdns].enabled : false, [wallets, walletRdns]);
339
- const handleClick = (event) => {
340
- var _a;
341
- const checked = (_a = event.target) == null ? void 0 : _a.checked;
342
- if (walletRdns) {
343
- checked ? enableWallet == null ? void 0 : enableWallet(walletRdns) : disableWallet == null ? void 0 : disableWallet(walletRdns);
344
- }
345
- };
346
- return /* @__PURE__ */ jsx9(TableCell4, { ...tableCellProps, children: /* @__PURE__ */ jsx9(Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
347
- };
348
-
349
- // src/components/wallet/table/cells/Wallet.tsx
350
- import { TableCell as TableCell5, useTheme } from "@mui/material";
351
- import { ConstrainedImage as ConstrainedImage3 } from "@xylabs/react-crypto";
352
- import { FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
353
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
354
- var ConnectedWalletsWalletTableCell = ({ icon, walletName, tableCellProps }) => {
355
- const theme = useTheme();
356
- return /* @__PURE__ */ jsx10(TableCell5, { ...tableCellProps, children: /* @__PURE__ */ jsxs7(FlexRow4, { gap: 2, justifyContent: "start", children: [
357
- /* @__PURE__ */ jsx10(ConstrainedImage3, { constrainedValue: theme.spacing(4), src: icon }),
358
- walletName
359
- ] }) });
360
- };
361
-
362
- // src/components/wallet/table/cells/Cells.tsx
363
- var ConnectedWalletTableCells = [
364
- ConnectedWalletsWalletTableCell,
365
- ConnectedWalletsChainNameTableCell,
366
- ConnectedWalletsAccountsTableCell,
367
- ConnectedWalletsActionsTableCell,
368
- ConnectedWalletState
369
- ];
370
-
371
- // src/components/wallet/table/ConnectedWalletsTable.tsx
372
- import { Table, TableBody, TableCell as TableCell6, TableHead, TableRow as TableRow2 } from "@mui/material";
373
- import { useState as useState3 } from "react";
374
-
375
- // src/components/wallet/lib/TableHeadData.ts
376
- var WalletsTableHeadCells = [
377
- {
378
- disablePadding: false,
379
- id: "wallet",
380
- label: "Wallet",
381
- numeric: false,
382
- showOnMobile: true
383
- },
384
- {
385
- disablePadding: false,
386
- id: "chain",
387
- label: "Chain",
388
- numeric: false,
389
- showOnMobile: true
390
- },
391
- {
392
- disablePadding: false,
393
- id: "accounts",
394
- label: "Accounts",
395
- numeric: true,
396
- showOnMobile: true
397
- },
398
- {
399
- disablePadding: false,
400
- id: "actions",
401
- label: "Actions",
402
- numeric: false,
403
- showOnMobile: true
404
- },
405
- {
406
- disablePadding: false,
407
- id: "enabled",
408
- label: "Enabled",
409
- numeric: false,
410
- showOnMobile: true
411
- }
412
- ];
413
-
414
- // src/components/wallet/table/ConnectedWalletsTableRow.tsx
415
- import { TableRow } from "@mui/material";
416
- import { useEthWallet } from "@xylabs/react-crypto";
417
- import { useCallback, useMemo as useMemo4 } from "react";
418
- import { jsx as jsx11 } from "react/jsx-runtime";
419
- var WalletConnectionsTableRow = ({
420
- ignoreConnectDialog,
421
- onConnectClick,
422
- onRevoke,
423
- wallet,
424
- ...props
425
- }) => {
426
- const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = useEthWallet(wallet);
427
- const currentAccount = (currentAccountFromWallet == null ? void 0 : currentAccountFromWallet.toString()) ? [currentAccountFromWallet.toString()] : [];
428
- const totalAccounts = ((additionalAccounts == null ? void 0 : additionalAccounts.length) ?? 0) + ((currentAccount == null ? void 0 : currentAccount.length) ?? 0);
429
- const connected = !!((currentAccount == null ? void 0 : currentAccount.length) ?? 0 > 0);
430
- const { icon, name, rdns } = useMemo4(() => providerInfo ?? { icon: void 0, name: void 0, rdns: void 0 }, [providerInfo]);
431
- const activeProvider = useMemo4(
432
- () => ({
433
- connectWallet,
434
- icon,
435
- providerName: name
436
- }),
437
- [connectWallet, icon, name]
438
- );
439
- const onRevokeLocal = useCallback(() => {
440
- onRevoke == null ? void 0 : onRevoke(activeProvider);
441
- }, [activeProvider, onRevoke]);
442
- const onConnectLocal = useCallback(async () => {
443
- if (ignoreConnectDialog) {
444
- await (connectWallet == null ? void 0 : connectWallet());
445
- } else {
446
- onConnectClick == null ? void 0 : onConnectClick(activeProvider);
447
- }
448
- }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
449
- return /* @__PURE__ */ jsx11(TableRow, { ...props, children: Object.values(ConnectedWalletTableCells).map((Cell, index) => /* @__PURE__ */ jsx11(
450
- Cell,
451
- {
452
- additionalAccounts,
453
- chainName,
454
- connected,
455
- currentAccount,
456
- icon,
457
- onConnect: onConnectLocal,
458
- onRevoke: onRevokeLocal,
459
- totalAccounts,
460
- walletName: name,
461
- walletRdns: rdns
462
- },
463
- index
464
- )) });
465
- };
466
-
467
- // src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
468
- import { useState as useState2 } from "react";
469
- var useActiveProviderDialogState = (setActiveProvider) => {
470
- const [show, setShow] = useState2(false);
471
- const onSetActiveProvider = (activeProvider) => {
472
- setShow(true);
473
- setActiveProvider(activeProvider);
474
- };
475
- const onClose = () => {
476
- setShow(false);
477
- setActiveProvider({});
478
- };
479
- return [show, onSetActiveProvider, onClose];
480
- };
481
-
482
- // src/components/wallet/table/ConnectedWalletsTable.tsx
483
- import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
484
- var ConnectedWalletsTable = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
485
- const [activeProvider, setActiveProvider] = useState3();
486
- const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
487
- const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
488
- return /* @__PURE__ */ jsxs8(Fragment, { children: [
489
- /* @__PURE__ */ jsxs8(Table, { ...props, children: [
490
- /* @__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)) }) }),
491
- /* @__PURE__ */ jsx12(TableBody, { children: (wallets ?? []).map((wallet) => {
492
- var _a;
493
- return /* @__PURE__ */ jsx12(
494
- WalletConnectionsTableRow,
495
- {
496
- ignoreConnectDialog,
497
- onConnectClick: onSetActiveProviderConnect,
498
- onRevoke: onSetActiveProviderRevoke,
499
- wallet
500
- },
501
- (_a = wallet.providerInfo) == null ? void 0 : _a.rdns
502
- );
503
- }) })
504
- ] }),
505
- /* @__PURE__ */ jsx12(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
506
- /* @__PURE__ */ jsx12(
507
- ConnectWalletDialog,
508
- {
509
- activeProvider,
510
- onClose: onConnectClose,
511
- open: showConnect,
512
- onIgnoreConnectDialog
513
- }
514
- )
515
- ] });
516
- };
517
-
518
- // src/components/ConnectedAccountsFlexbox.tsx
519
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
520
- var ConnectedAccountsFlexbox = forwardRef(
521
- ({ ignoreConnectDialog, onIgnoreConnectDialog, ...props }, ref) => {
522
- const theme = useTheme2();
523
- const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
524
- return /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "stretch", justifyContent: "start", gap: 2, ref, ...props, children: [
525
- /* @__PURE__ */ jsxs9(FlexCol3, { alignItems: "start", children: [
526
- /* @__PURE__ */ jsx13(Typography6, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
527
- totalConnectedAccounts ? /* @__PURE__ */ jsxs9(Typography6, { variant: "subtitle1", color: theme.palette.secondary.main, sx: { opacity: 0.5 }, children: [
528
- "Total Connected Accounts: ",
529
- totalConnectedAccounts
530
- ] }) : null
531
- ] }),
532
- /* @__PURE__ */ jsx13(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
533
- ] });
534
- }
535
- );
536
- ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
537
- export {
538
- CheckboxFormControl,
539
- ConnectWalletDialog,
540
- ConnectedAccountsFlexbox,
541
- ConnectedWalletState,
542
- ConnectedWalletTableCells,
543
- ConnectedWalletsAccountsTableCell,
544
- ConnectedWalletsActionsTableCell,
545
- ConnectedWalletsChainNameTableCell,
546
- ConnectedWalletsTable,
547
- ConnectedWalletsWalletTableCell,
548
- EnabledEthWalletConnections,
549
- RevokeWalletConnectionDialog,
550
- WalletConnectionsTableRow,
551
- useActiveProviderDialogState,
552
- useDetectedWallets,
553
- useEnabledWallets,
554
- useEnabledWalletsInner
555
- };
1
+ var R="XYO|EnabledWallets",v=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 Ce,useTheme as yo}from"@mui/material";import{FlexCol as be}from"@xylabs/react-flexbox";import{forwardRef as Po}from"react";import{AccountsChangedEventName as I,useWalletDiscovery as We}from"@xylabs/react-crypto";import{useEffect as L,useMemo as ve,useState as B}from"react";var Te=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(Te(t))},[t,e]),L(()=>{let r=()=>{o(p=>p+1)};return window.addEventListener(I,r),()=>{window.removeEventListener(I,r)}},[t]);let a=ve(()=>Object.values(l).reduce((r,p)=>r+p.allowedAccounts.length,0),[l]);return{sortedWallets:l,totalConnectedAccounts:a}};import{useWalletDiscovery as ye}from"@xylabs/react-crypto";import{useMemo as N,useSyncExternalStore as Pe}from"react";var s,we=t=>{let e=ye(),o=N(()=>{s===void 0&&(s=new v),s.resetWallets(e);for(let[l,n]of Object.entries(t??{}))s==null||s.toggleEnabledWallet(l,n);return s},[e,t]);return Pe(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==null?void 0:s.disableWallet.bind(s),enableWallet:s==null?void 0:s.enableWallet.bind(s),enabledWallets:o,wallets:e}};import{Checkbox as Se,FormControl as De,FormLabel as Fe}from"@mui/material";import{jsx as Y,jsxs as Ee}from"react/jsx-runtime";var H=({onCheckChanged:t,...e})=>Y(De,{...e,children:Ee(Fe,{children:[Y(Se,{onChange:(o,l)=>t==null?void 0: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 Ae}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 u,jsxs as D}from"react/jsx-runtime";var _=({icon:t,providerName:e,...o})=>D(Re,{gap:4,justifyContent:"space-evenly",...o,children:[D(V,{gap:.5,children:[u("img",{alt:"XYO Logo",src:K,style:{height:"48px"}}),u(X,{variant:"subtitle1",children:"XYO App"})]}),u(Ae,{fontSize:"large"}),D(V,{gap:.5,children:[u(ke,{constrainedValue:"48px",src:t,alt:e,style:{height:"48px",maxWidth:"48px"}}),u(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 T,jsxs as F}from"react/jsx-runtime";var J=t=>F(Le,{gap:4,...t,children:[T(z,{fontWeight:"bold",sx:{textAlign:"center"},children:"This will allow XYO to:"}),F("ul",{children:[T("li",{children:"View your wallet account(s) and address(es)"}),T("li",{children:"Read-only access to browse the public blockchain(s) you select"})]}),F(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"," ",T(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 f,jsxs as E}from"react/jsx-runtime";var G=({activeProvider:t,onIgnoreConnectDialog:e,...o})=>{let{icon:l,providerName:n}=t??{};return E(Be,{PaperProps:{sx:{display:"flex",gap:4}},...o,children:[f(Me,{sx:{textAlign:"center"},children:"XYO Wants To Access The Blockchain on Your Behalf"}),E(Ne,{sx:{display:"flex",flexDirection:"column",gap:4},children:[f(_,{icon:l,providerName:n}),f(J,{}),f(H,{onCheckChanged:e})]}),E(Oe,{children:[f($,{variant:"outlined",onClick:()=>{var r;return(r=o.onClose)==null?void 0:r.call(o,{},"escapeKeyDown")},children:"Close"}),f($,{variant:"contained",onClick:async()=>{var r,p;try{await((r=t==null?void 0:t.connectWallet)==null?void 0:r.call(t)),(p=o.onClose)==null||p.call(o,{},"escapeKeyDown")}catch(i){console.warn(`Error connecting to wallet: ${i.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 y,jsxs as x}from"react/jsx-runtime";var q=({activeProvider:t,...e})=>x(He,{...e,children:[x(ze,{gap:2,justifyContent:"start",pl:2,children:[y(_e,{src:t==null?void 0:t.icon,constrainedValue:"24px"}),x(Ve,{sx:{pl:0},children:["Revoke ",t==null?void 0:t.providerName," Access"]})]}),x(Xe,{children:[x(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==null?void 0:t.providerName,"'s documentation on how to revoke access to this website:"]}),y(U,{children:window.location.origin})]}),y(Ke,{children:y(Ye,{variant:"contained",onClick:()=>{var o;return(o=e.onClose)==null?void 0:o.call(e,{},"escapeKeyDown")},children:"Close"})})]});import{TableCell as Je,Tooltip as $e,Typography as Ge}from"@mui/material";import{jsx as P}from"react/jsx-runtime";var Q=({additionalAccounts:t,currentAccount:e,totalAccounts:o,tableCellProps:l})=>P(Je,{...l,children:P($e,{sx:{cursor:o>0?"pointer":"auto"},title:[...e??[],...t??[]].map((n,a)=>P("p",{children:n},a)),children:P(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:i=>{var c;let C=(c=i.target)==null?void 0:c.checked;e&&(C?n==null||n(e):l==null||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 mo}from"react/jsx-runtime";var ne=({icon:t,walletName:e,tableCellProps:o})=>{let l=io();return le(so,{...o,children:mo(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 fo,TableBody as ho,TableCell as uo,TableHead as xo,TableRow as Wo}from"@mui/material";import{useState as vo}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 Co}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 pe=({ignoreConnectDialog:t,onConnectClick:e,onRevoke:o,wallet:l,...n})=>{let{currentAccount:a,additionalAccounts:r,chainName:p,connectWallet:i,providerInfo:C}=bo(l),c=a!=null&&a.toString()?[a.toString()]:[],w=((r==null?void 0:r.length)??0)+((c==null?void 0:c.length)??0),b=!!((c==null?void 0:c.length)??!1),{icon:d,name:h,rdns:S}=ie(()=>C??{icon:void 0,name:void 0,rdns:void 0},[C]),g=ie(()=>({connectWallet:i,icon:d,providerName:h}),[i,d,h]),fe=se(()=>{o==null||o(g)},[g,o]),he=se(async()=>{t?await(i==null?void 0:i()):e==null||e(g)},[g,i,t,e]);return ce(Co,{...n,children:Object.values(ae).map((ue,xe)=>ce(ue,{additionalAccounts:r,chainName:p,connected:b,currentAccount:c,icon:d,onConnect:he,onRevoke:fe,totalAccounts:w,walletName:h,walletRdns:S},xe))})};import{useState as go}from"react";var A=t=>{let[e,o]=go(!1);return[e,a=>{o(!0),t(a)},()=>{o(!1),t({})}]};import{Fragment as To,jsx as m,jsxs as de}from"react/jsx-runtime";var me=({ignoreConnectDialog:t,onIgnoreConnectDialog:e,wallets:o,...l})=>{let[n,a]=vo(),[r,p,i]=A(a),[C,c,w]=A(a);return de(To,{children:[de(fo,{...l,children:[m(xo,{children:m(Wo,{children:re.map(({disablePadding:b,id:d,label:h,align:S,width:g})=>m(uo,{align:S,padding:b?"none":"normal",width:g??"auto",children:h},d))})}),m(ho,{children:(o??[]).map(b=>{var d;return m(pe,{ignoreConnectDialog:t,onConnectClick:p,onRevoke:c,wallet:b},(d=b.providerInfo)==null?void 0:d.rdns)})})]}),m(q,{open:C,onClose:w,activeProvider:n}),m(G,{activeProvider:n,onClose:i,open:r,onIgnoreConnectDialog:e})]})};import{jsx as ge,jsxs as k}from"react/jsx-runtime";var wo=Po(({ignoreConnectDialog:t,onIgnoreConnectDialog:e,...o},l)=>{let n=yo(),{totalConnectedAccounts:a,sortedWallets:r}=O();return k(be,{alignItems:"stretch",justifyContent:"start",gap:2,ref:l,...o,children:[k(be,{alignItems:"start",children:[ge(Ce,{variant:"h2",sx:{mb:.5},children:"Detected Web3 Wallets"}),a?k(Ce,{variant:"subtitle1",color:n.palette.secondary.main,sx:{opacity:.5},children:["Total Connected Accounts: ",a]}):null]}),ge(me,{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,me as ConnectedWalletsTable,ne as ConnectedWalletsWalletTableCell,v as EnabledEthWalletConnections,q as RevokeWalletConnectionDialog,pe as WalletConnectionsTableRow,A as useActiveProviderDialogState,O as useDetectedWallets,M as useEnabledWallets,we as useEnabledWalletsInner};
556
2
  //# sourceMappingURL=index.js.map