@xyo-network/react-connected-accounts 10.0.5 → 10.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/browser/index.d.ts +1 -3
  2. package/dist/browser/index.d.ts.map +1 -1
  3. package/dist/browser/index.mjs +2 -724
  4. package/dist/browser/index.mjs.map +4 -4
  5. package/package.json +70 -9
  6. package/dist/browser/classes/EnabledWallets.d.ts +0 -35
  7. package/dist/browser/classes/EnabledWallets.d.ts.map +0 -1
  8. package/dist/browser/classes/index.d.ts +0 -2
  9. package/dist/browser/classes/index.d.ts.map +0 -1
  10. package/dist/browser/components/ConnectedAccountsFlexbox.d.ts +0 -11
  11. package/dist/browser/components/ConnectedAccountsFlexbox.d.ts.map +0 -1
  12. package/dist/browser/components/index.d.ts +0 -3
  13. package/dist/browser/components/index.d.ts.map +0 -1
  14. package/dist/browser/components/wallet/dialogs/connect/CheckboxFormControl.d.ts +0 -7
  15. package/dist/browser/components/wallet/dialogs/connect/CheckboxFormControl.d.ts.map +0 -1
  16. package/dist/browser/components/wallet/dialogs/connect/Dialog.d.ts +0 -9
  17. package/dist/browser/components/wallet/dialogs/connect/Dialog.d.ts.map +0 -1
  18. package/dist/browser/components/wallet/dialogs/connect/LinkedProvidersFlexbox.d.ts +0 -8
  19. package/dist/browser/components/wallet/dialogs/connect/LinkedProvidersFlexbox.d.ts.map +0 -1
  20. package/dist/browser/components/wallet/dialogs/connect/Permissions.d.ts +0 -6
  21. package/dist/browser/components/wallet/dialogs/connect/Permissions.d.ts.map +0 -1
  22. package/dist/browser/components/wallet/dialogs/connect/index.d.ts +0 -3
  23. package/dist/browser/components/wallet/dialogs/connect/index.d.ts.map +0 -1
  24. package/dist/browser/components/wallet/dialogs/index.d.ts +0 -3
  25. package/dist/browser/components/wallet/dialogs/index.d.ts.map +0 -1
  26. package/dist/browser/components/wallet/dialogs/revoke/Dialog.d.ts +0 -8
  27. package/dist/browser/components/wallet/dialogs/revoke/Dialog.d.ts.map +0 -1
  28. package/dist/browser/components/wallet/dialogs/revoke/index.d.ts +0 -2
  29. package/dist/browser/components/wallet/dialogs/revoke/index.d.ts.map +0 -1
  30. package/dist/browser/components/wallet/index.d.ts +0 -4
  31. package/dist/browser/components/wallet/index.d.ts.map +0 -1
  32. package/dist/browser/components/wallet/lib/ActiveProvider.d.ts +0 -7
  33. package/dist/browser/components/wallet/lib/ActiveProvider.d.ts.map +0 -1
  34. package/dist/browser/components/wallet/lib/TableHeadData.d.ts +0 -3
  35. package/dist/browser/components/wallet/lib/TableHeadData.d.ts.map +0 -1
  36. package/dist/browser/components/wallet/lib/index.d.ts +0 -3
  37. package/dist/browser/components/wallet/lib/index.d.ts.map +0 -1
  38. package/dist/browser/components/wallet/table/ConnectedWalletsTable.d.ts +0 -10
  39. package/dist/browser/components/wallet/table/ConnectedWalletsTable.d.ts.map +0 -1
  40. package/dist/browser/components/wallet/table/ConnectedWalletsTableRow.d.ts +0 -12
  41. package/dist/browser/components/wallet/table/ConnectedWalletsTableRow.d.ts.map +0 -1
  42. package/dist/browser/components/wallet/table/cells/Accounts.d.ts +0 -4
  43. package/dist/browser/components/wallet/table/cells/Accounts.d.ts.map +0 -1
  44. package/dist/browser/components/wallet/table/cells/Actions.d.ts +0 -4
  45. package/dist/browser/components/wallet/table/cells/Actions.d.ts.map +0 -1
  46. package/dist/browser/components/wallet/table/cells/Cells.d.ts +0 -4
  47. package/dist/browser/components/wallet/table/cells/Cells.d.ts.map +0 -1
  48. package/dist/browser/components/wallet/table/cells/ChainName.d.ts +0 -4
  49. package/dist/browser/components/wallet/table/cells/ChainName.d.ts.map +0 -1
  50. package/dist/browser/components/wallet/table/cells/State.d.ts +0 -4
  51. package/dist/browser/components/wallet/table/cells/State.d.ts.map +0 -1
  52. package/dist/browser/components/wallet/table/cells/Wallet.d.ts +0 -4
  53. package/dist/browser/components/wallet/table/cells/Wallet.d.ts.map +0 -1
  54. package/dist/browser/components/wallet/table/cells/index.d.ts +0 -7
  55. package/dist/browser/components/wallet/table/cells/index.d.ts.map +0 -1
  56. package/dist/browser/components/wallet/table/cells/lib/ConnectedWalletTableCellProps.d.ts +0 -15
  57. package/dist/browser/components/wallet/table/cells/lib/ConnectedWalletTableCellProps.d.ts.map +0 -1
  58. package/dist/browser/components/wallet/table/cells/lib/index.d.ts +0 -2
  59. package/dist/browser/components/wallet/table/cells/lib/index.d.ts.map +0 -1
  60. package/dist/browser/components/wallet/table/hooks/index.d.ts +0 -2
  61. package/dist/browser/components/wallet/table/hooks/index.d.ts.map +0 -1
  62. package/dist/browser/components/wallet/table/hooks/useActiveProviderDialogState.d.ts +0 -4
  63. package/dist/browser/components/wallet/table/hooks/useActiveProviderDialogState.d.ts.map +0 -1
  64. package/dist/browser/components/wallet/table/index.d.ts +0 -5
  65. package/dist/browser/components/wallet/table/index.d.ts.map +0 -1
  66. package/dist/browser/hooks/index.d.ts +0 -3
  67. package/dist/browser/hooks/index.d.ts.map +0 -1
  68. package/dist/browser/hooks/useDetectWallets.d.ts +0 -6
  69. package/dist/browser/hooks/useDetectWallets.d.ts.map +0 -1
  70. package/dist/browser/hooks/useEnabledWallets.d.ts +0 -15
  71. package/dist/browser/hooks/useEnabledWallets.d.ts.map +0 -1
  72. package/dist/browser/img/index.d.ts +0 -3
  73. package/dist/browser/img/index.d.ts.map +0 -1
@@ -1,725 +1,3 @@
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((wallet) => {
40
- if (wallet !== void 0) {
41
- addWallet.bind(this);
42
- }
43
- });
44
- this.ethWalletsState = newWallets;
45
- this.emitChange();
46
- }
47
- subscribe(listener) {
48
- this.listeners = [...this.listeners, listener];
49
- return () => {
50
- this.listeners = this.listeners.filter((existingListener) => existingListener !== listener);
51
- };
52
- }
53
- toggleEnabledWallet(rdns, enabled) {
54
- if (rdns && this.ethWalletsState[rdns]) {
55
- this.ethWalletsState[rdns].enabled = enabled;
56
- this.ethWalletsState = { ...this.ethWalletsState };
57
- this.emitChange();
58
- }
59
- }
60
- emitChange() {
61
- for (const listener of this.listeners) {
62
- listener();
63
- }
64
- this.persistSettings();
65
- }
66
- isPersistance(method) {
67
- if (this.persistPreferences) {
68
- method();
69
- }
70
- }
71
- persistSettings() {
72
- this.isPersistance(() => {
73
- const enabledWallets = Object.entries(this.ethWalletsState).reduce((acc, [rdns, { enabled }]) => {
74
- acc[rdns] = enabled;
75
- return acc;
76
- }, {});
77
- localStorage.setItem(this.localStorageKey, JSON.stringify(enabledWallets));
78
- });
79
- }
80
- reviveSettings() {
81
- this.isPersistance(() => {
82
- const existingEntries = localStorage.getItem(this.localStorageKey);
83
- try {
84
- const entries = existingEntries ? JSON.parse(existingEntries) : {};
85
- this.enabledWallets = entries;
86
- } catch (e) {
87
- console.warn(`Error parsing saved enabled wallet entries: ${e.message}`);
88
- }
89
- });
90
- }
91
- };
92
-
93
- // src/components/ConnectedAccountsFlexbox.tsx
94
- import { FlexCol as FlexCol3 } from "@ariestools/sdk-react/flexbox";
95
- import { Typography as Typography6, useTheme as useTheme2 } from "@mui/material";
96
-
97
- // src/hooks/useDetectWallets.tsx
98
- import { useWalletDiscovery } from "@ariestools/sdk-react/crypto";
99
- import { useMemo } from "react";
100
- var sortWallets = (wallets) => {
101
- const result = [];
102
- for (const wallet of Object.values(wallets)) {
103
- if (wallet) {
104
- if (wallet.allowedAccounts.length > 0)
105
- result.unshift(wallet);
106
- else
107
- result.push(wallet);
108
- }
109
- }
110
- return result;
111
- };
112
- var useDetectedWallets = () => {
113
- const wallets = useWalletDiscovery();
114
- const sortedWallets = useMemo(() => sortWallets(wallets), [wallets]);
115
- const totalConnectedAccounts = useMemo(
116
- () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
117
- [sortedWallets]
118
- );
119
- return { sortedWallets, totalConnectedAccounts };
120
- };
121
-
122
- // src/hooks/useEnabledWallets.tsx
123
- import { useWalletDiscovery as useWalletDiscovery2 } from "@ariestools/sdk-react/crypto";
124
- import { useMemo as useMemo2, useSyncExternalStore } from "react";
125
- var enabledEthWalletsRef = { current: void 0 };
126
- var useEnabledWalletsInner = (enabledWalletsRdns) => {
127
- const discoveredWallets = useWalletDiscovery2();
128
- const wallets = useMemo2(() => {
129
- if (enabledEthWalletsRef.current === void 0) enabledEthWalletsRef.current = new EnabledEthWalletConnections();
130
- enabledEthWalletsRef.current.resetWallets(discoveredWallets);
131
- for (const [rdns, enabled] of Object.entries(enabledWalletsRdns ?? {})) enabledEthWalletsRef.current?.toggleEnabledWallet(rdns, enabled);
132
- return enabledEthWalletsRef.current;
133
- }, [discoveredWallets, enabledWalletsRdns]);
134
- return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets);
135
- };
136
- var useEnabledWallets = (enabledWalletsRdns) => {
137
- const wallets = useEnabledWalletsInner(enabledWalletsRdns);
138
- const enabledWallets = useMemo2(
139
- () => Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
140
- if (wallet.enabled) acc[walletName] = wallet;
141
- return acc;
142
- }, {}),
143
- [wallets]
144
- );
145
- return {
146
- disableWallet: enabledEthWalletsRef.current?.disableWallet.bind(enabledEthWalletsRef.current),
147
- enableWallet: enabledEthWalletsRef.current?.enableWallet.bind(enabledEthWalletsRef.current),
148
- enabledWallets,
149
- wallets
150
- };
151
- };
152
-
153
- // src/components/wallet/dialogs/connect/CheckboxFormControl.tsx
154
- import {
155
- Checkbox,
156
- FormControl,
157
- FormLabel
158
- } from "@mui/material";
159
- import { jsx, jsxs } from "react/jsx-runtime";
160
- var CheckboxFormControl = ({ onCheckChanged, ...props }) => {
161
- return /* @__PURE__ */ jsx(FormControl, { ...props, children: /* @__PURE__ */ jsxs(FormLabel, { children: [
162
- /* @__PURE__ */ jsx(Checkbox, { onChange: (_, checked) => onCheckChanged?.(checked) }),
163
- "Do not show this again."
164
- ] }) });
165
- };
166
-
167
- // src/components/wallet/dialogs/connect/Dialog.tsx
168
- import {
169
- Button,
170
- Dialog,
171
- DialogActions,
172
- DialogContent,
173
- DialogTitle
174
- } from "@mui/material";
175
-
176
- // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
177
- import { ConstrainedImage } from "@ariestools/sdk-react/crypto";
178
- import { FlexCol, FlexRow } from "@ariestools/sdk-react/flexbox";
179
- import { SyncAlt } from "@mui/icons-material";
180
- import { Typography } from "@mui/material";
181
-
182
- // src/img/xyo-color-logo.svg
183
- var xyo_color_logo_default = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>';
184
-
185
- // src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx
186
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
187
- var LinkedProvidersFlexbox = ({
188
- icon,
189
- providerName,
190
- ...props
191
- }) => {
192
- return /* @__PURE__ */ jsxs2(
193
- FlexRow,
194
- {
195
- ...props,
196
- sx: [{
197
- gap: 4,
198
- justifyContent: "space-evenly"
199
- }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
200
- children: [
201
- /* @__PURE__ */ jsxs2(FlexCol, { sx: { gap: 0.5 }, children: [
202
- /* @__PURE__ */ jsx2("img", { alt: "XYO Logo", src: xyo_color_logo_default, style: { height: "48px" } }),
203
- /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: "XYO App" })
204
- ] }),
205
- /* @__PURE__ */ jsx2(SyncAlt, { sx: { fontSize: "large" } }),
206
- /* @__PURE__ */ jsxs2(FlexCol, { sx: { gap: 0.5 }, children: [
207
- /* @__PURE__ */ jsx2(
208
- ConstrainedImage,
209
- {
210
- constrainedValue: "48px",
211
- src: icon,
212
- alt: providerName,
213
- style: { height: "48px", maxWidth: "48px" }
214
- }
215
- ),
216
- /* @__PURE__ */ jsx2(Typography, { variant: "subtitle1", children: providerName })
217
- ] })
218
- ]
219
- }
220
- );
221
- };
222
-
223
- // src/components/wallet/dialogs/connect/Permissions.tsx
224
- import { FlexCol as FlexCol2 } from "@ariestools/sdk-react/flexbox";
225
- import { Link, Typography as Typography2 } from "@mui/material";
226
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
227
- var WalletPermissionsFlexbox = (props) => {
228
- return /* @__PURE__ */ jsxs3(
229
- FlexCol2,
230
- {
231
- ...props,
232
- sx: [{ gap: 4 }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
233
- children: [
234
- /* @__PURE__ */ jsx3(
235
- Typography2,
236
- {
237
- sx: {
238
- fontWeight: "bold",
239
- textAlign: "center"
240
- },
241
- children: "This will allow XYO to:"
242
- }
243
- ),
244
- /* @__PURE__ */ jsxs3("ul", { children: [
245
- /* @__PURE__ */ jsx3("li", { children: "View your wallet account(s) and address(es)" }),
246
- /* @__PURE__ */ jsx3("li", { children: "Read-only access to browse the public blockchain(s) you select" })
247
- ] }),
248
- /* @__PURE__ */ jsxs3(Typography2, { variant: "subtitle1", sx: { textAlign: "center" }, children: [
249
- "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",
250
- " ",
251
- /* @__PURE__ */ jsx3(
252
- Link,
253
- {
254
- href: "https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty",
255
- sx: { fontWeight: "bold" },
256
- target: "_blank",
257
- children: "here"
258
- }
259
- ),
260
- "."
261
- ] })
262
- ]
263
- }
264
- );
265
- };
266
-
267
- // src/components/wallet/dialogs/connect/Dialog.tsx
268
- import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
269
- var ConnectWalletDialog = ({
270
- activeProvider,
271
- onIgnoreConnectDialog,
272
- ...props
273
- }) => {
274
- const { icon, providerName } = activeProvider ?? {};
275
- const onConnect = async () => {
276
- try {
277
- await activeProvider?.connectWallet?.();
278
- props.onClose?.({}, "escapeKeyDown");
279
- } catch (e) {
280
- console.warn(`Error connecting to wallet: ${e.message}`);
281
- }
282
- };
283
- return /* @__PURE__ */ jsxs4(
284
- Dialog,
285
- {
286
- slotProps: { paper: { sx: { display: "flex", gap: 4 } } },
287
- ...props,
288
- children: [
289
- /* @__PURE__ */ jsx4(DialogTitle, { sx: { textAlign: "center" }, children: "XYO Wants To Access The Blockchain on Your Behalf" }),
290
- /* @__PURE__ */ jsxs4(
291
- DialogContent,
292
- {
293
- sx: {
294
- display: "flex",
295
- flexDirection: "column",
296
- gap: 4
297
- },
298
- children: [
299
- /* @__PURE__ */ jsx4(LinkedProvidersFlexbox, { icon, providerName }),
300
- /* @__PURE__ */ jsx4(WalletPermissionsFlexbox, {}),
301
- /* @__PURE__ */ jsx4(CheckboxFormControl, { onCheckChanged: onIgnoreConnectDialog })
302
- ]
303
- }
304
- ),
305
- /* @__PURE__ */ jsxs4(DialogActions, { children: [
306
- /* @__PURE__ */ jsx4(Button, { variant: "outlined", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }),
307
- /* @__PURE__ */ jsx4(Button, { variant: "contained", onClick: onConnect, children: "Connect" })
308
- ] })
309
- ]
310
- }
311
- );
312
- };
313
-
314
- // src/components/wallet/dialogs/revoke/Dialog.tsx
315
- import { ConstrainedImage as ConstrainedImage2 } from "@ariestools/sdk-react/crypto";
316
- import { FlexRow as FlexRow2 } from "@ariestools/sdk-react/flexbox";
317
- import {
318
- Button as Button2,
319
- Dialog as Dialog2,
320
- DialogActions as DialogActions2,
321
- DialogContent as DialogContent2,
322
- DialogTitle as DialogTitle2,
323
- Typography as Typography3
324
- } from "@mui/material";
325
- import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
326
- var RevokeWalletConnectionDialog = ({ activeProvider, ...props }) => {
327
- return /* @__PURE__ */ jsxs5(Dialog2, { ...props, children: [
328
- /* @__PURE__ */ jsxs5(
329
- FlexRow2,
330
- {
331
- sx: {
332
- gap: 2,
333
- justifyContent: "start",
334
- pl: 2
335
- },
336
- children: [
337
- /* @__PURE__ */ jsx5(ConstrainedImage2, { src: activeProvider?.icon, constrainedValue: "24px" }),
338
- /* @__PURE__ */ jsxs5(DialogTitle2, { sx: { pl: 0 }, children: [
339
- "Revoke",
340
- activeProvider?.providerName,
341
- " ",
342
- "Access"
343
- ] })
344
- ]
345
- }
346
- ),
347
- /* @__PURE__ */ jsxs5(DialogContent2, { children: [
348
- /* @__PURE__ */ jsxs5(Typography3, { children: [
349
- "Revoking access to your wallet must be done from the wallet's browser extension. Wallets grant access to specific domains please consult",
350
- " ",
351
- activeProvider?.providerName,
352
- "'s documentation on how to revoke access to this website:"
353
- ] }),
354
- /* @__PURE__ */ jsx5(Typography3, { children: globalThis.location.origin })
355
- ] }),
356
- /* @__PURE__ */ jsx5(DialogActions2, { children: /* @__PURE__ */ jsx5(Button2, { variant: "contained", onClick: () => props.onClose?.({}, "escapeKeyDown"), children: "Close" }) })
357
- ] });
358
- };
359
-
360
- // src/components/wallet/lib/TableHeadData.ts
361
- var WalletsTableHeadCells = [
362
- {
363
- disablePadding: false,
364
- id: "wallet",
365
- label: "Wallet",
366
- numeric: false,
367
- showOnMobile: true
368
- },
369
- {
370
- disablePadding: false,
371
- id: "chain",
372
- label: "Chain",
373
- numeric: false,
374
- showOnMobile: true
375
- },
376
- {
377
- disablePadding: false,
378
- id: "accounts",
379
- label: "Accounts",
380
- numeric: true,
381
- showOnMobile: true
382
- },
383
- {
384
- disablePadding: false,
385
- id: "actions",
386
- label: "Actions",
387
- numeric: false,
388
- showOnMobile: true
389
- },
390
- {
391
- disablePadding: false,
392
- id: "enabled",
393
- label: "Enabled",
394
- numeric: false,
395
- showOnMobile: true
396
- }
397
- ];
398
-
399
- // src/components/wallet/table/cells/Accounts.tsx
400
- import {
401
- TableCell,
402
- Tooltip,
403
- Typography as Typography4
404
- } from "@mui/material";
405
- import { jsx as jsx6 } from "react/jsx-runtime";
406
- var ConnectedWalletsAccountsTableCell = ({
407
- additionalAccounts,
408
- currentAccount,
409
- totalAccounts,
410
- tableCellProps
411
- }) => {
412
- return /* @__PURE__ */ jsx6(TableCell, { ...tableCellProps, children: /* @__PURE__ */ jsx6(
413
- Tooltip,
414
- {
415
- sx: { cursor: totalAccounts > 0 ? "pointer" : "auto" },
416
- title: [...currentAccount ?? [], ...additionalAccounts ?? []].map((address) => /* @__PURE__ */ jsx6("p", { children: address }, address)),
417
- children: /* @__PURE__ */ jsx6(Typography4, { children: totalAccounts })
418
- }
419
- ) });
420
- };
421
-
422
- // src/components/wallet/table/cells/Actions.tsx
423
- import { FlexRow as FlexRow3 } from "@ariestools/sdk-react/flexbox";
424
- import { Check, InfoOutlined } from "@mui/icons-material";
425
- import {
426
- Button as Button3,
427
- IconButton,
428
- TableCell as TableCell2,
429
- Typography as Typography5
430
- } from "@mui/material";
431
- import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
432
- var ConnectedWalletsActionsTableCell = ({
433
- connected,
434
- onConnect,
435
- onRevoke,
436
- tableCellProps
437
- }) => {
438
- return /* @__PURE__ */ jsx7(TableCell2, { ...tableCellProps, children: /* @__PURE__ */ jsxs6(
439
- FlexRow3,
440
- {
441
- sx: {
442
- gap: 2,
443
- justifyContent: "start"
444
- },
445
- children: [
446
- connected ? /* @__PURE__ */ jsxs6(Typography5, { sx: { display: "inline-flex", gap: 0.5 }, children: [
447
- /* @__PURE__ */ jsx7(Check, {}),
448
- "Connected"
449
- ] }) : /* @__PURE__ */ jsx7(Button3, { variant: "contained", onClick: onConnect, children: "Connect" }),
450
- connected ? /* @__PURE__ */ jsx7(IconButton, { onClick: onRevoke, children: /* @__PURE__ */ jsx7(InfoOutlined, {}) }) : null
451
- ]
452
- }
453
- ) });
454
- };
455
-
456
- // src/components/wallet/table/cells/ChainName.tsx
457
- import { TableCell as TableCell3 } from "@mui/material";
458
- import { jsx as jsx8 } from "react/jsx-runtime";
459
- var ConnectedWalletsChainNameTableCell = ({ chainName, tableCellProps }) => {
460
- return /* @__PURE__ */ jsx8(TableCell3, { ...tableCellProps, children: chainName });
461
- };
462
-
463
- // src/components/wallet/table/cells/State.tsx
464
- import { isDefined } from "@ariestools/sdk";
465
- import { Switch, TableCell as TableCell4 } from "@mui/material";
466
- import { useMemo as useMemo3 } from "react";
467
- import { jsx as jsx9 } from "react/jsx-runtime";
468
- var ConnectedWalletState = ({
469
- connected,
470
- walletRdns,
471
- tableCellProps
472
- }) => {
473
- const {
474
- disableWallet,
475
- enableWallet,
476
- wallets
477
- } = useEnabledWallets();
478
- const enabled = useMemo3(() => isDefined(walletRdns) ? wallets[walletRdns]?.enabled : false, [wallets, walletRdns]);
479
- const handleClick = (event) => {
480
- const checked = event.target?.checked;
481
- if (isDefined(walletRdns)) {
482
- checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns);
483
- }
484
- };
485
- return /* @__PURE__ */ jsx9(TableCell4, { ...tableCellProps, children: /* @__PURE__ */ jsx9(Switch, { disabled: !connected, checked: connected && enabled, onChange: handleClick }) });
486
- };
487
-
488
- // src/components/wallet/table/cells/Wallet.tsx
489
- import { ConstrainedImage as ConstrainedImage3 } from "@ariestools/sdk-react/crypto";
490
- import { FlexRow as FlexRow4 } from "@ariestools/sdk-react/flexbox";
491
- import { TableCell as TableCell5, useTheme } from "@mui/material";
492
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
493
- var ConnectedWalletsWalletTableCell = ({
494
- icon,
495
- walletName,
496
- tableCellProps
497
- }) => {
498
- const theme = useTheme();
499
- return /* @__PURE__ */ jsx10(TableCell5, { ...tableCellProps, children: /* @__PURE__ */ jsxs7(
500
- FlexRow4,
501
- {
502
- sx: {
503
- gap: 2,
504
- justifyContent: "start"
505
- },
506
- children: [
507
- /* @__PURE__ */ jsx10(ConstrainedImage3, { constrainedValue: theme.spacing(4), src: icon }),
508
- walletName
509
- ]
510
- }
511
- ) });
512
- };
513
-
514
- // src/components/wallet/table/cells/Cells.tsx
515
- var ConnectedWalletTableCells = [
516
- ConnectedWalletsWalletTableCell,
517
- ConnectedWalletsChainNameTableCell,
518
- ConnectedWalletsAccountsTableCell,
519
- ConnectedWalletsActionsTableCell,
520
- ConnectedWalletState
521
- ];
522
-
523
- // src/components/wallet/table/ConnectedWalletsTable.tsx
524
- import {
525
- Table,
526
- TableBody,
527
- TableCell as TableCell6,
528
- TableHead,
529
- TableRow as TableRow2
530
- } from "@mui/material";
531
- import { useState as useState2 } from "react";
532
-
533
- // src/components/wallet/table/ConnectedWalletsTableRow.tsx
534
- import { useEthWallet } from "@ariestools/sdk-react/crypto";
535
- import { TableRow } from "@mui/material";
536
- import { useCallback, useMemo as useMemo4 } from "react";
537
- import { jsx as jsx11 } from "react/jsx-runtime";
538
- var WalletConnectionsTableRow = ({
539
- ignoreConnectDialog,
540
- onConnectClick,
541
- onRevoke,
542
- wallet,
543
- ...props
544
- }) => {
545
- const {
546
- currentAccount: currentAccountFromWallet,
547
- additionalAccounts,
548
- chainName,
549
- connectWallet,
550
- providerInfo
551
- } = useEthWallet(wallet);
552
- const currentAccount = currentAccountFromWallet?.toString() ? [currentAccountFromWallet.toString()] : [];
553
- const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0);
554
- const connected = !!currentAccount?.length;
555
- const {
556
- icon,
557
- name,
558
- rdns
559
- } = useMemo4(() => providerInfo ?? {
560
- icon: void 0,
561
- name: void 0,
562
- rdns: void 0
563
- }, [providerInfo]);
564
- const activeProvider = useMemo4(
565
- () => ({
566
- connectWallet,
567
- icon,
568
- providerName: name
569
- }),
570
- [connectWallet, icon, name]
571
- );
572
- const onRevokeLocal = useCallback(() => {
573
- onRevoke?.(activeProvider);
574
- }, [activeProvider, onRevoke]);
575
- const onConnectLocal = useCallback(async () => {
576
- if (ignoreConnectDialog) {
577
- await connectWallet?.();
578
- } else {
579
- onConnectClick?.(activeProvider);
580
- }
581
- }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick]);
582
- return /* @__PURE__ */ jsx11(TableRow, { ...props, children: Object.entries(ConnectedWalletTableCells).map(([cellName, Cell]) => /* @__PURE__ */ jsx11(
583
- Cell,
584
- {
585
- additionalAccounts,
586
- chainName,
587
- connected,
588
- currentAccount,
589
- icon,
590
- onConnect: onConnectLocal,
591
- onRevoke: onRevokeLocal,
592
- totalAccounts,
593
- walletName: name,
594
- walletRdns: rdns
595
- },
596
- cellName
597
- )) });
598
- };
599
-
600
- // src/components/wallet/table/hooks/useActiveProviderDialogState.tsx
601
- import { useState } from "react";
602
- var useActiveProviderDialogState = (setActiveProvider) => {
603
- const [show, setShow] = useState(false);
604
- const onSetActiveProvider = (activeProvider) => {
605
- setShow(true);
606
- setActiveProvider(activeProvider);
607
- };
608
- const onClose = () => {
609
- setShow(false);
610
- setActiveProvider({});
611
- };
612
- return [show, onSetActiveProvider, onClose];
613
- };
614
-
615
- // src/components/wallet/table/ConnectedWalletsTable.tsx
616
- import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
617
- var ConnectedWalletsTable = ({
618
- ignoreConnectDialog,
619
- onIgnoreConnectDialog,
620
- wallets,
621
- ...props
622
- }) => {
623
- const [activeProvider, setActiveProvider] = useState2();
624
- const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider);
625
- const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider);
626
- return /* @__PURE__ */ jsxs8(Fragment, { children: [
627
- /* @__PURE__ */ jsxs8(Table, { ...props, children: [
628
- /* @__PURE__ */ jsx12(TableHead, { children: /* @__PURE__ */ jsx12(TableRow2, { children: WalletsTableHeadCells.map(({
629
- disablePadding,
630
- id,
631
- label,
632
- align,
633
- width
634
- }) => /* @__PURE__ */ jsx12(
635
- TableCell6,
636
- {
637
- align,
638
- sx: {
639
- padding: disablePadding ? "none" : "normal",
640
- width: width ?? "auto"
641
- },
642
- children: label
643
- },
644
- id
645
- )) }) }),
646
- /* @__PURE__ */ jsx12(TableBody, { children: (wallets ?? []).map((wallet) => /* @__PURE__ */ jsx12(
647
- WalletConnectionsTableRow,
648
- {
649
- ignoreConnectDialog,
650
- onConnectClick: onSetActiveProviderConnect,
651
- onRevoke: onSetActiveProviderRevoke,
652
- wallet
653
- },
654
- wallet.providerInfo?.rdns
655
- )) })
656
- ] }),
657
- /* @__PURE__ */ jsx12(RevokeWalletConnectionDialog, { open: showRevoke, onClose: onRevokeClose, activeProvider }),
658
- /* @__PURE__ */ jsx12(
659
- ConnectWalletDialog,
660
- {
661
- activeProvider,
662
- onClose: onConnectClose,
663
- open: showConnect,
664
- onIgnoreConnectDialog
665
- }
666
- )
667
- ] });
668
- };
669
-
670
- // src/components/ConnectedAccountsFlexbox.tsx
671
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
672
- var ConnectedAccountsFlexbox = ({
673
- ref,
674
- ignoreConnectDialog,
675
- onIgnoreConnectDialog,
676
- ...props
677
- }) => {
678
- const theme = useTheme2();
679
- const { totalConnectedAccounts, sortedWallets } = useDetectedWallets();
680
- return /* @__PURE__ */ jsxs9(
681
- FlexCol3,
682
- {
683
- ref,
684
- ...props,
685
- sx: [{
686
- alignItems: "stretch",
687
- justifyContent: "start",
688
- gap: 2
689
- }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
690
- children: [
691
- /* @__PURE__ */ jsxs9(FlexCol3, { sx: { alignItems: "start" }, children: [
692
- /* @__PURE__ */ jsx13(Typography6, { variant: "h2", sx: { mb: 0.5 }, children: "Detected Web3 Wallets" }),
693
- totalConnectedAccounts ? /* @__PURE__ */ jsxs9(Typography6, { variant: "subtitle1", color: theme.vars.palette.secondary.main, sx: { opacity: 0.5 }, children: [
694
- "Total Connected Accounts:",
695
- " ",
696
- totalConnectedAccounts
697
- ] }) : null
698
- ] }),
699
- /* @__PURE__ */ jsx13(ConnectedWalletsTable, { wallets: sortedWallets, ignoreConnectDialog, onIgnoreConnectDialog })
700
- ]
701
- }
702
- );
703
- };
704
- ConnectedAccountsFlexbox.displayName = "ConnectedAccountsFlexbox";
705
- export {
706
- CheckboxFormControl,
707
- ConnectWalletDialog,
708
- ConnectedAccountsFlexbox,
709
- ConnectedWalletState,
710
- ConnectedWalletTableCells,
711
- ConnectedWalletsAccountsTableCell,
712
- ConnectedWalletsActionsTableCell,
713
- ConnectedWalletsChainNameTableCell,
714
- ConnectedWalletsTable,
715
- ConnectedWalletsWalletTableCell,
716
- EnabledEthWalletConnections,
717
- RevokeWalletConnectionDialog,
718
- WalletConnectionsTableRow,
719
- WalletsTableHeadCells,
720
- useActiveProviderDialogState,
721
- useDetectedWallets,
722
- useEnabledWallets,
723
- useEnabledWalletsInner
724
- };
1
+ // src/index.ts
2
+ export * from "@xyo-network/react-sdk/connected-accounts";
725
3
  //# sourceMappingURL=index.mjs.map