@xyo-network/react-chain-network 1.22.0 → 1.23.2

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.
@@ -1,15 +1,19 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
-
4
1
  // src/components/broadcast/Drawer.tsx
5
- import { Box, Button, Drawer, Pagination, Stack as Stack3, Typography as Typography3 } from "@mui/material";
6
- import React6, { useState as useState7 } from "react";
2
+ import {
3
+ Box,
4
+ Button,
5
+ Drawer,
6
+ Pagination,
7
+ Stack as Stack3,
8
+ Typography as Typography3
9
+ } from "@mui/material";
10
+ import { useState as useState7 } from "react";
7
11
 
8
12
  // src/hooks/provider/useRpcBroadcastListener.ts
9
13
  import { isJsonRpcRequest, isJsonRpcResponse } from "@metamask/utils";
10
14
  import { isDefined, isString } from "@xylabs/sdk-js";
11
15
  import { useEffect, useState } from "react";
12
- var parseRpcCall = /* @__PURE__ */ __name((acc, event) => {
16
+ var parseRpcCall = (acc, event) => {
13
17
  if (isJsonRpcResponse(event.rpcCall)) {
14
18
  const castedEvent = event;
15
19
  acc[castedEvent.rpcCall.id].result = castedEvent;
@@ -21,12 +25,12 @@ var parseRpcCall = /* @__PURE__ */ __name((acc, event) => {
21
25
  }
22
26
  acc[event.rpcCall.id].source = event.source;
23
27
  return acc;
24
- }, "parseRpcCall");
25
- var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
28
+ };
29
+ var useRpcBroadcastListener = () => {
26
30
  const [events, setEvents] = useState({});
27
- const clearEvents = /* @__PURE__ */ __name(() => setEvents({}), "clearEvents");
31
+ const clearEvents = () => setEvents({});
28
32
  useEffect(() => {
29
- const listener = /* @__PURE__ */ __name((e) => {
33
+ const listener = (e) => {
30
34
  if ("detail" in e) {
31
35
  const { detail } = e ?? {};
32
36
  if (isString(detail)) {
@@ -40,9 +44,7 @@ var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
40
44
  };
41
45
  setEvents((prev) => {
42
46
  const { id } = broadcastedRpcCall.rpcCall;
43
- const newState = {
44
- ...prev
45
- };
47
+ const newState = { ...prev };
46
48
  if (isDefined(newState[id])) {
47
49
  parseRpcCall(newState, broadcastedRpcCall);
48
50
  } else {
@@ -56,7 +58,7 @@ var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
56
58
  }
57
59
  }
58
60
  }
59
- }, "listener");
61
+ };
60
62
  globalThis.addEventListener("xyo:broadcast-rpc-request", listener);
61
63
  globalThis.addEventListener("xyo:broadcast-rpc-response", listener);
62
64
  return () => {
@@ -64,19 +66,19 @@ var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
64
66
  globalThis.removeEventListener("xyo:broadcast-rpc-response", listener);
65
67
  };
66
68
  }, []);
67
- return {
68
- events,
69
- clearEvents
70
- };
71
- }, "useRpcBroadcastListener");
69
+ return { events, clearEvents };
70
+ };
72
71
 
73
72
  // src/hooks/provider/useViewerInPage.ts
74
- import { isDefined as isDefined3, isNull, isUndefined } from "@xylabs/sdk-js";
75
- import { useProvidedGateway } from "@xyo-network/react-chain-client";
73
+ import {
74
+ isDefined as isDefined3,
75
+ isNull,
76
+ isUndefined
77
+ } from "@xylabs/sdk-js";
78
+ import { useProvidedGateway } from "@xyo-network/xl1-react-client-sdk";
76
79
 
77
80
  // src/context/ActiveGatewayProvider.tsx
78
81
  import { GatewayProvider, InPageGatewaysProvider } from "@xyo-network/react-chain-provider";
79
- import React2 from "react";
80
82
 
81
83
  // src/context/network/context.ts
82
84
  import { createContextEx } from "@xylabs/react-shared";
@@ -87,19 +89,19 @@ import { ErrorRender } from "@xylabs/react-error";
87
89
  import { usePromise } from "@xylabs/react-promise";
88
90
  import { isDefined as isDefined2 } from "@xylabs/sdk-js";
89
91
  import { MainNetwork } from "@xyo-network/xl1-sdk";
90
- import React, { useCallback as useCallback2, useMemo, useState as useState3 } from "react";
92
+ import {
93
+ useCallback as useCallback2,
94
+ useMemo,
95
+ useState as useState3
96
+ } from "react";
91
97
 
92
98
  // src/context/network/settings/defaultChainNetworkSettings.ts
93
99
  import { LocalNetwork } from "@xyo-network/xl1-sdk";
94
- var defaultChainNetworkSettings = {
95
- [LocalNetwork.id]: {
96
- proxy: true
97
- }
98
- };
100
+ var defaultChainNetworkSettings = { [LocalNetwork.id]: { proxy: true } };
99
101
 
100
102
  // src/context/network/settings/useChainNetworkSettings.ts
101
103
  import { useCallback, useState as useState2 } from "react";
102
- var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNetworkSettings) => {
104
+ var useChainNetworkSettings = (defaults = defaultChainNetworkSettings) => {
103
105
  const [networkSettings2, setNetworkSettings] = useState2(defaults);
104
106
  const updateNetworkSettings = useCallback((networkId, settings) => {
105
107
  setNetworkSettings((prevSettings) => ({
@@ -114,10 +116,17 @@ var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNet
114
116
  networkSettings: networkSettings2,
115
117
  updateNetworkSettings
116
118
  };
117
- }, "useChainNetworkSettings");
119
+ };
118
120
 
119
121
  // src/context/network/Provider.tsx
120
- var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork, networkSettings: networkSettingsProp = defaultChainNetworkSettings, networks, setActiveNetwork: setActiveNetworkExternal }) => {
122
+ import { jsx, jsxs } from "react/jsx-runtime";
123
+ var ChainNetworkProvider = ({
124
+ children,
125
+ getActiveNetwork,
126
+ networkSettings: networkSettingsProp = defaultChainNetworkSettings,
127
+ networks,
128
+ setActiveNetwork: setActiveNetworkExternal
129
+ }) => {
121
130
  const [activeNetwork, setActiveNetwork] = useState3();
122
131
  const [error, setError] = useState3();
123
132
  const { networkSettings: networkSettings2, updateNetworkSettings } = useChainNetworkSettings(networkSettingsProp);
@@ -131,9 +140,7 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
131
140
  await setActiveNetworkExternal?.(defaultNetwork.id);
132
141
  return defaultNetwork;
133
142
  }
134
- }, [
135
- networks
136
- ]);
143
+ }, [networks]);
137
144
  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState3(resolvedActiveNetwork);
138
145
  if (isDefined2(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
139
146
  setActiveNetwork(resolvedActiveNetwork);
@@ -148,10 +155,7 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
148
155
  }
149
156
  setActiveNetwork(network);
150
157
  void setActiveNetworkExternal?.(networkId);
151
- }, [
152
- networks,
153
- setActiveNetworkExternal
154
- ]);
158
+ }, [networks, setActiveNetworkExternal]);
155
159
  const value = useMemo(() => ({
156
160
  activeNetwork,
157
161
  networks,
@@ -160,42 +164,29 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
160
164
  networkSettings: networkSettings2,
161
165
  updateNetworkSettings,
162
166
  chainNetworkError: error ?? activeNetworkError
163
- }), [
164
- activeNetwork,
165
- activeNetworkError,
166
- error,
167
- networkSettings2,
168
- networks,
169
- updateActiveNetwork,
170
- updateNetworkSettings
171
- ]);
172
- return /* @__PURE__ */ React.createElement(ChainNetworkContext, {
173
- value
174
- }, /* @__PURE__ */ React.createElement(ErrorRender, {
175
- error: error ?? activeNetworkError,
176
- scope: "ChainNetworkProvider"
177
- }), children);
178
- }, "ChainNetworkProvider");
167
+ }), [activeNetwork, activeNetworkError, error, networkSettings2, networks, updateActiveNetwork, updateNetworkSettings]);
168
+ return /* @__PURE__ */ jsxs(ChainNetworkContext, { value, children: [
169
+ /* @__PURE__ */ jsx(ErrorRender, { error: error ?? activeNetworkError, scope: "ChainNetworkProvider" }),
170
+ children
171
+ ] });
172
+ };
179
173
 
180
174
  // src/context/network/use.ts
181
175
  import { useContextEx } from "@xylabs/react-shared";
182
- var useChainNetwork = /* @__PURE__ */ __name((required = true) => useContextEx(ChainNetworkContext, "ChainNetwork", required), "useChainNetwork");
176
+ var useChainNetwork = (required = true) => useContextEx(ChainNetworkContext, "ChainNetwork", required);
183
177
 
184
178
  // src/context/ActiveGatewayProvider.tsx
185
- var ActiveGatewayProvider = /* @__PURE__ */ __name(({ signerTransport, children }) => {
179
+ import { jsx as jsx2 } from "react/jsx-runtime";
180
+ var ActiveGatewayProvider = ({ signerTransport, children }) => {
186
181
  const { activeNetwork } = useChainNetwork();
187
- return /* @__PURE__ */ React2.createElement(InPageGatewaysProvider, {
188
- signerTransport
189
- }, /* @__PURE__ */ React2.createElement(GatewayProvider, {
190
- gatewayName: activeNetwork?.id
191
- }, children));
192
- }, "ActiveGatewayProvider");
182
+ return /* @__PURE__ */ jsx2(InPageGatewaysProvider, { signerTransport, children: /* @__PURE__ */ jsx2(GatewayProvider, { gatewayName: activeNetwork?.id, children }) });
183
+ };
193
184
 
194
185
  // src/hooks/provider/useViewerInPage.ts
195
- var shouldProxy = /* @__PURE__ */ __name((networkSettings2, networkId) => {
186
+ var shouldProxy = (networkSettings2, networkId) => {
196
187
  return isDefined3(networkId) && isDefined3(networkSettings2[networkId]) && networkSettings2[networkId].proxy;
197
- }, "shouldProxy");
198
- var useViewerInPage = /* @__PURE__ */ __name(() => {
188
+ };
189
+ var useViewerInPage = () => {
199
190
  const { networkSettings: networkSettings2, activeNetwork } = useChainNetwork();
200
191
  const { gateways } = useProvidedGateway();
201
192
  const { inPageGateway, walletGateway } = gateways;
@@ -210,7 +201,7 @@ var useViewerInPage = /* @__PURE__ */ __name(() => {
210
201
  return walletViewer;
211
202
  }
212
203
  return inPageViewer;
213
- }, "useViewerInPage");
204
+ };
214
205
  var useViewerInPageV2 = useViewerInPage;
215
206
 
216
207
  // src/hooks/status/usePollNetworkStatus.ts
@@ -218,7 +209,7 @@ import { delay, isUndefined as isUndefined2 } from "@xylabs/sdk-js";
218
209
  import { useNetworkFromGateway } from "@xyo-network/react-chain-provider";
219
210
  import { useEffect as useEffect2, useState as useState4 } from "react";
220
211
  var STATUS_CHECK_INTERVAL = 1e4;
221
- var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
212
+ var usePollNetworkStatus = () => {
222
213
  const network = useNetworkFromGateway();
223
214
  const [networkStatus, setNetworkStatus] = useState4();
224
215
  const [networkStatusError, setNetworkStatusError] = useState4();
@@ -242,242 +233,281 @@ var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
242
233
  return () => {
243
234
  checkNetwork = false;
244
235
  };
245
- }, [
246
- network
247
- ]);
248
- return [
249
- networkStatus,
250
- networkStatusError
251
- ];
252
- }, "usePollNetworkStatus");
236
+ }, [network]);
237
+ return [networkStatus, networkStatusError];
238
+ };
253
239
 
254
240
  // src/components/broadcast/CloseDrawerIconButton.tsx
255
241
  import { Cancel } from "@mui/icons-material";
256
242
  import { IconButton } from "@mui/material";
257
- import React3 from "react";
258
- var CloseDrawerIconButton = /* @__PURE__ */ __name(({ anchor, onClose }) => {
259
- return /* @__PURE__ */ React3.createElement(IconButton, {
260
- onClick: /* @__PURE__ */ __name((e) => onClose?.(e, "backdropClick"), "onClick"),
261
- size: "small",
262
- sx: {
263
- alignSelf: anchor === "right" ? "start" : "end",
264
- top: 8,
265
- right: anchor === "right" ? void 0 : 8,
266
- left: anchor === "left" ? void 0 : 8
267
- }
268
- }, /* @__PURE__ */ React3.createElement(Cancel, {
269
- sx: {
270
- fontSize: "small"
243
+ import { jsx as jsx3 } from "react/jsx-runtime";
244
+ var CloseDrawerIconButton = ({ anchor, onClose }) => {
245
+ return /* @__PURE__ */ jsx3(
246
+ IconButton,
247
+ {
248
+ onClick: (e) => onClose?.(e, "backdropClick"),
249
+ size: "small",
250
+ sx: {
251
+ alignSelf: anchor === "right" ? "start" : "end",
252
+ top: 8,
253
+ right: anchor === "right" ? void 0 : 8,
254
+ left: anchor === "left" ? void 0 : 8
255
+ },
256
+ children: /* @__PURE__ */ jsx3(Cancel, { sx: { fontSize: "small" } })
271
257
  }
272
- }));
273
- }, "CloseDrawerIconButton");
258
+ );
259
+ };
274
260
 
275
261
  // src/components/broadcast/details/Card.tsx
276
- import { Card, Collapse, Stack as Stack2, Typography as Typography2 } from "@mui/material";
262
+ import {
263
+ Card,
264
+ Collapse,
265
+ Stack as Stack2,
266
+ Typography as Typography2
267
+ } from "@mui/material";
277
268
  import { isDefined as isDefined5 } from "@xylabs/sdk-js";
278
269
  import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
279
- import React5, { memo, useState as useState5 } from "react";
270
+ import { memo, useState as useState5 } from "react";
280
271
 
281
272
  // src/components/broadcast/details/SummaryStack.tsx
282
- import { ArrowRight, CheckCircle, Warning } from "@mui/icons-material";
283
- import { Avatar, Icon, IconButton as IconButton2, Stack, Tooltip, Typography, useTheme } from "@mui/material";
273
+ import {
274
+ ArrowRight,
275
+ CheckCircle,
276
+ Warning
277
+ } from "@mui/icons-material";
278
+ import {
279
+ Avatar,
280
+ Icon,
281
+ IconButton as IconButton2,
282
+ Stack,
283
+ Tooltip,
284
+ Typography,
285
+ useTheme
286
+ } from "@mui/material";
284
287
  import { Identicon } from "@xylabs/react-identicon";
285
288
  import { usePromise as usePromise2 } from "@xylabs/react-promise";
286
289
  import { isDefined as isDefined4 } from "@xylabs/sdk-js";
287
290
  import { ObjectHasher } from "@xyo-network/hash";
288
- import React4, { useMemo as useMemo2 } from "react";
289
- var BroadcastedRpcCallDetailsSummaryStack = /* @__PURE__ */ __name(({ expanded, setExpanded, method, timestamp, hasResult, params, ...props }) => {
291
+ import { useMemo as useMemo2 } from "react";
292
+ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
293
+ var BroadcastedRpcCallDetailsSummaryStack = ({
294
+ expanded,
295
+ setExpanded,
296
+ method,
297
+ timestamp,
298
+ hasResult,
299
+ params,
300
+ ...props
301
+ }) => {
290
302
  const theme = useTheme();
291
303
  const [hash, hashError] = usePromise2(async () => {
292
304
  if (isDefined4(params)) {
293
305
  return await ObjectHasher.hash(params);
294
306
  }
295
- }, [
296
- params
297
- ]);
298
- const formattedTimestamp = useMemo2(() => isDefined4(timestamp) ? new Date(timestamp).toLocaleString() : "", [
299
- timestamp
300
- ]);
301
- return /* @__PURE__ */ React4.createElement(Stack, {
302
- direction: "row",
303
- ...props,
304
- sx: [
305
- {
307
+ }, [params]);
308
+ const formattedTimestamp = useMemo2(() => isDefined4(timestamp) ? new Date(timestamp).toLocaleString() : "", [timestamp]);
309
+ return /* @__PURE__ */ jsxs2(
310
+ Stack,
311
+ {
312
+ direction: "row",
313
+ ...props,
314
+ sx: [{
306
315
  gap: 2,
307
316
  alignItems: "center",
308
317
  justifyContent: "space-between"
309
- },
310
- ...Array.isArray(props.sx) ? props.sx : [
311
- props.sx
318
+ }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
319
+ children: [
320
+ /* @__PURE__ */ jsxs2(
321
+ Stack,
322
+ {
323
+ direction: "row",
324
+ sx: {
325
+ gap: 2,
326
+ alignItems: "center"
327
+ },
328
+ children: [
329
+ /* @__PURE__ */ jsx4(
330
+ IconButton2,
331
+ {
332
+ size: "small",
333
+ onClick: () => setExpanded?.(!expanded),
334
+ children: /* @__PURE__ */ jsx4(ArrowRight, { sx: { transform: expanded ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.2s ease-in-out" }, fontSize: "small" })
335
+ }
336
+ ),
337
+ /* @__PURE__ */ jsx4(
338
+ Tooltip,
339
+ {
340
+ title: isDefined4(hashError) ? `Error generating hash of params: ${hashError.message}` : isDefined4(params) ? `Params : ${JSON.stringify(params, null, 2)}` : "No Params Provided",
341
+ children: /* @__PURE__ */ jsx4(
342
+ Avatar,
343
+ {
344
+ sx: {
345
+ backgroundColor: theme.vars?.palette.text.primary,
346
+ width: 20,
347
+ height: 20,
348
+ opacity: isDefined4(hash) ? 1 : 0.5
349
+ },
350
+ children: /* @__PURE__ */ jsx4(Identicon, { value: hash, size: 14 })
351
+ }
352
+ )
353
+ }
354
+ ),
355
+ /* @__PURE__ */ jsx4(
356
+ Typography,
357
+ {
358
+ component: "span",
359
+ variant: "body2",
360
+ sx: { fontFamily: "monospace" },
361
+ children: method
362
+ }
363
+ ),
364
+ /* @__PURE__ */ jsx4(
365
+ Typography,
366
+ {
367
+ component: "span",
368
+ variant: "caption",
369
+ sx: {
370
+ color: "text.secondary",
371
+ opacity: 0.6
372
+ },
373
+ children: formattedTimestamp
374
+ }
375
+ )
376
+ ]
377
+ }
378
+ ),
379
+ /* @__PURE__ */ jsx4(Icon, { sx: { justifySelf: "end" }, children: hasResult ? /* @__PURE__ */ jsx4(CheckCircle, { sx: { color: "success" } }) : /* @__PURE__ */ jsx4(Warning, { color: "warning" }) })
312
380
  ]
313
- ]
314
- }, /* @__PURE__ */ React4.createElement(Stack, {
315
- direction: "row",
316
- sx: {
317
- gap: 2,
318
- alignItems: "center"
319
- }
320
- }, /* @__PURE__ */ React4.createElement(IconButton2, {
321
- size: "small",
322
- onClick: /* @__PURE__ */ __name(() => setExpanded?.(!expanded), "onClick")
323
- }, /* @__PURE__ */ React4.createElement(ArrowRight, {
324
- sx: {
325
- transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
326
- transition: "transform 0.2s ease-in-out"
327
- },
328
- fontSize: "small"
329
- })), /* @__PURE__ */ React4.createElement(Tooltip, {
330
- title: isDefined4(hashError) ? `Error generating hash of params: ${hashError.message}` : isDefined4(params) ? `Params : ${JSON.stringify(params, null, 2)}` : "No Params Provided"
331
- }, /* @__PURE__ */ React4.createElement(Avatar, {
332
- sx: {
333
- backgroundColor: theme.vars?.palette.text.primary,
334
- width: 20,
335
- height: 20,
336
- opacity: isDefined4(hash) ? 1 : 0.5
337
- }
338
- }, /* @__PURE__ */ React4.createElement(Identicon, {
339
- value: hash,
340
- size: 14
341
- }))), /* @__PURE__ */ React4.createElement(Typography, {
342
- component: "span",
343
- variant: "body2",
344
- sx: {
345
- fontFamily: "monospace"
346
381
  }
347
- }, method), /* @__PURE__ */ React4.createElement(Typography, {
348
- component: "span",
349
- variant: "caption",
350
- sx: {
351
- color: "text.secondary",
352
- opacity: 0.6
353
- }
354
- }, formattedTimestamp)), /* @__PURE__ */ React4.createElement(Icon, {
355
- sx: {
356
- justifySelf: "end"
357
- }
358
- }, hasResult ? /* @__PURE__ */ React4.createElement(CheckCircle, {
359
- sx: {
360
- color: "success"
361
- }
362
- }) : /* @__PURE__ */ React4.createElement(Warning, {
363
- color: "warning"
364
- })));
365
- }, "BroadcastedRpcCallDetailsSummaryStack");
382
+ );
383
+ };
366
384
 
367
385
  // src/components/broadcast/details/Card.tsx
386
+ import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
368
387
  var JSON_VIEWER_WIDTH = 600;
369
- var BroadcastedRpcCallDetailsCard = /* @__PURE__ */ memo(({ rpcRequestResponsePairs, sx, ...props }) => {
388
+ var BroadcastedRpcCallDetailsCard = memo(({
389
+ rpcRequestResponsePairs,
390
+ sx,
391
+ ...props
392
+ }) => {
370
393
  const [expanded, setExpanded] = useState5(false);
371
394
  if (!rpcRequestResponsePairs) return null;
372
- const { request, result, source } = rpcRequestResponsePairs;
373
- return /* @__PURE__ */ React5.createElement(Card, {
374
- sx: {
375
- p: 1,
376
- display: "flex",
377
- flexDirection: "column",
378
- width: JSON_VIEWER_WIDTH,
379
- ...sx
380
- },
381
- ...props
382
- }, /* @__PURE__ */ React5.createElement(BroadcastedRpcCallDetailsSummaryStack, {
383
- expanded,
384
- params: request.rpcCall.params,
385
- hasResult: isDefined5(result),
386
- method: request.rpcCall.method,
387
- setExpanded,
388
- timestamp: request.timestamp
389
- }), /* @__PURE__ */ React5.createElement(Collapse, {
390
- in: expanded,
391
- mountOnEnter: true,
392
- unmountOnExit: true
393
- }, /* @__PURE__ */ React5.createElement(Stack2, {
394
- direction: "column",
395
- sx: {
396
- p: 1,
397
- gap: 2,
398
- alignItems: "stretch"
399
- }
400
- }, /* @__PURE__ */ React5.createElement(Typography2, {
401
- variant: "body2"
402
- }, "Source:", /* @__PURE__ */ React5.createElement(Typography2, {
403
- variant: "caption",
404
- component: "span",
405
- sx: {
406
- fontFamily: "monospace",
407
- ml: 1
408
- }
409
- }, source)), /* @__PURE__ */ React5.createElement(Typography2, {
410
- variant: "body2"
411
- }, "Request:"), /* @__PURE__ */ React5.createElement(JsonViewerEx, {
412
- value: request,
413
- sx: {
414
- maxHeight: 300,
415
- overflow: "auto"
416
- }
417
- }), isDefined5(result) ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Typography2, {
418
- variant: "body2"
419
- }, "Result:"), /* @__PURE__ */ React5.createElement(JsonViewerEx, {
420
- value: result,
421
- sx: {
422
- maxHeight: 300,
423
- overflow: "auto"
395
+ const {
396
+ request,
397
+ result,
398
+ source
399
+ } = rpcRequestResponsePairs;
400
+ return /* @__PURE__ */ jsxs3(
401
+ Card,
402
+ {
403
+ sx: {
404
+ p: 1,
405
+ display: "flex",
406
+ flexDirection: "column",
407
+ width: JSON_VIEWER_WIDTH,
408
+ ...sx
409
+ },
410
+ ...props,
411
+ children: [
412
+ /* @__PURE__ */ jsx5(
413
+ BroadcastedRpcCallDetailsSummaryStack,
414
+ {
415
+ expanded,
416
+ params: request.rpcCall.params,
417
+ hasResult: isDefined5(result),
418
+ method: request.rpcCall.method,
419
+ setExpanded,
420
+ timestamp: request.timestamp
421
+ }
422
+ ),
423
+ /* @__PURE__ */ jsx5(Collapse, { in: expanded, mountOnEnter: true, unmountOnExit: true, children: /* @__PURE__ */ jsxs3(
424
+ Stack2,
425
+ {
426
+ direction: "column",
427
+ sx: {
428
+ p: 1,
429
+ gap: 2,
430
+ alignItems: "stretch"
431
+ },
432
+ children: [
433
+ /* @__PURE__ */ jsxs3(Typography2, { variant: "body2", children: [
434
+ "Source:",
435
+ /* @__PURE__ */ jsx5(
436
+ Typography2,
437
+ {
438
+ variant: "caption",
439
+ component: "span",
440
+ sx: {
441
+ fontFamily: "monospace",
442
+ ml: 1
443
+ },
444
+ children: source
445
+ }
446
+ )
447
+ ] }),
448
+ /* @__PURE__ */ jsx5(Typography2, { variant: "body2", children: "Request:" }),
449
+ /* @__PURE__ */ jsx5(
450
+ JsonViewerEx,
451
+ {
452
+ value: request,
453
+ sx: { maxHeight: 300, overflow: "auto" }
454
+ }
455
+ ),
456
+ isDefined5(result) ? /* @__PURE__ */ jsxs3(Fragment, { children: [
457
+ /* @__PURE__ */ jsx5(Typography2, { variant: "body2", children: "Result:" }),
458
+ /* @__PURE__ */ jsx5(
459
+ JsonViewerEx,
460
+ {
461
+ value: result,
462
+ sx: { maxHeight: 300, overflow: "auto" }
463
+ }
464
+ )
465
+ ] }) : null
466
+ ]
467
+ }
468
+ ) })
469
+ ]
424
470
  }
425
- })) : null)));
471
+ );
426
472
  });
427
473
 
428
474
  // src/components/broadcast/usePaginatedEventPairs.ts
429
475
  import { isDefinedNotNull } from "@xylabs/sdk-js";
430
- import { useCallback as useCallback3, useMemo as useMemo3, useState as useState6 } from "react";
431
- var usePaginatedEventPairs = /* @__PURE__ */ __name((formattedEvents, numberOfVisiblePairs, onClearEvents, scrollableDiv) => {
476
+ import {
477
+ useCallback as useCallback3,
478
+ useMemo as useMemo3,
479
+ useState as useState6
480
+ } from "react";
481
+ var usePaginatedEventPairs = (formattedEvents, numberOfVisiblePairs, onClearEvents, scrollableDiv) => {
432
482
  const [currentPage, setCurrentPage] = useState6(0);
433
483
  const allEventEntries = useMemo3(() => {
434
484
  return Object.entries(formattedEvents ?? {}).toSorted(([, a], [, b]) => b.request.timestamp - a.request.timestamp);
435
- }, [
436
- formattedEvents
437
- ]);
485
+ }, [formattedEvents]);
438
486
  const totalPages = useMemo3(() => {
439
487
  return Math.ceil(allEventEntries.length / numberOfVisiblePairs);
440
- }, [
441
- allEventEntries.length,
442
- numberOfVisiblePairs
443
- ]);
488
+ }, [allEventEntries.length, numberOfVisiblePairs]);
444
489
  const effectiveCurrentPage = useMemo3(() => {
445
490
  if (totalPages === 0) return 0;
446
491
  return Math.min(currentPage, totalPages - 1);
447
- }, [
448
- currentPage,
449
- totalPages
450
- ]);
492
+ }, [currentPage, totalPages]);
451
493
  const visibleEvents = useMemo3(() => {
452
494
  if (isDefinedNotNull(scrollableDiv)) {
453
- scrollableDiv.scrollTo({
454
- top: 0,
455
- behavior: "smooth"
456
- });
495
+ scrollableDiv.scrollTo({ top: 0, behavior: "smooth" });
457
496
  }
458
497
  const startIndex = effectiveCurrentPage * numberOfVisiblePairs;
459
498
  const endIndex = startIndex + numberOfVisiblePairs;
460
499
  return allEventEntries.slice(startIndex, endIndex);
461
- }, [
462
- allEventEntries,
463
- effectiveCurrentPage,
464
- numberOfVisiblePairs,
465
- scrollableDiv
466
- ]);
500
+ }, [allEventEntries, effectiveCurrentPage, numberOfVisiblePairs, scrollableDiv]);
467
501
  const handlePreviousPage = useCallback3(() => {
468
502
  setCurrentPage((prev) => Math.max(0, prev - 1));
469
503
  }, []);
470
504
  const handleNextPage = useCallback3(() => {
471
505
  setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
472
- }, [
473
- totalPages
474
- ]);
506
+ }, [totalPages]);
475
507
  const handleClearEvents = useCallback3(() => {
476
508
  setCurrentPage(0);
477
509
  onClearEvents?.();
478
- }, [
479
- onClearEvents
480
- ]);
510
+ }, [onClearEvents]);
481
511
  const handlePageChange = useCallback3((_event, page) => {
482
512
  setCurrentPage(page - 1);
483
513
  }, []);
@@ -485,193 +515,280 @@ var usePaginatedEventPairs = /* @__PURE__ */ __name((formattedEvents, numberOfVi
485
515
  allEventEntries,
486
516
  visibleEvents,
487
517
  effectiveCurrentPage: effectiveCurrentPage + 1,
518
+ // Return 1-indexed page
488
519
  totalPages,
489
520
  handlePreviousPage,
490
521
  handleNextPage,
491
522
  handleClearEvents,
492
523
  handlePageChange
493
524
  };
494
- }, "usePaginatedEventPairs");
525
+ };
495
526
 
496
527
  // src/components/broadcast/Drawer.tsx
497
- var BroadcastedRpcCallsDrawer = /* @__PURE__ */ __name(({ anchor = "right", onClearEvents, drawerTitle, events, onClose, numberOfVisibleEvents = 25, ...props }) => {
528
+ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
529
+ var BroadcastedRpcCallsDrawer = ({
530
+ anchor = "right",
531
+ onClearEvents,
532
+ drawerTitle,
533
+ events,
534
+ onClose,
535
+ numberOfVisibleEvents = 25,
536
+ ...props
537
+ }) => {
498
538
  const [scrollableDiv, setScrollableDiv] = useState7(null);
499
- const { allEventEntries, visibleEvents, totalPages, effectiveCurrentPage, handleClearEvents, handlePageChange } = usePaginatedEventPairs(events, numberOfVisibleEvents, onClearEvents, scrollableDiv);
500
- return /* @__PURE__ */ React6.createElement(Drawer, {
501
- anchor,
502
- onClose,
503
- keepMounted: false,
504
- ...props
505
- }, /* @__PURE__ */ React6.createElement(CloseDrawerIconButton, {
506
- anchor,
507
- onClose
508
- }), /* @__PURE__ */ React6.createElement(Stack3, {
509
- sx: {
510
- gap: 2,
511
- flexShrink: 0,
512
- p: 3
513
- }
514
- }, /* @__PURE__ */ React6.createElement(Stack3, {
515
- direction: "row",
516
- sx: {
517
- justifyContent: "space-between",
518
- alignItems: "center",
519
- gap: 4
520
- }
521
- }, /* @__PURE__ */ React6.createElement(Typography3, {
522
- variant: "h6"
523
- }, drawerTitle ?? "Broadcasted RPC Calls"), /* @__PURE__ */ React6.createElement(Button, {
524
- variant: "outlined",
525
- size: "small",
526
- onClick: handleClearEvents
527
- }, "Clear All")), allEventEntries.length > 0 && /* @__PURE__ */ React6.createElement(Pagination, {
528
- count: totalPages,
529
- page: effectiveCurrentPage,
530
- onChange: handlePageChange,
531
- color: "primary"
532
- })), /* @__PURE__ */ React6.createElement(Stack3, {
533
- direction: "column",
534
- id: "events-container",
535
- sx: {
536
- flexGrow: 1,
537
- overflowY: "hidden"
538
- }
539
- }, /* @__PURE__ */ React6.createElement(Box, {
540
- ref: /* @__PURE__ */ __name((el) => setScrollableDiv(el), "ref"),
541
- sx: {
542
- overflowY: "auto",
543
- px: 3,
544
- pb: 3
545
- }
546
- }, visibleEvents.map(([id, broadcastedRpcCall], index) => {
547
- return /* @__PURE__ */ React6.createElement(BroadcastedRpcCallDetailsCard, {
548
- key: id,
549
- rpcRequestResponsePairs: broadcastedRpcCall,
550
- sx: {
551
- mb: index < visibleEvents.length - 1 ? 2 : 0
539
+ const {
540
+ allEventEntries,
541
+ visibleEvents,
542
+ totalPages,
543
+ effectiveCurrentPage,
544
+ handleClearEvents,
545
+ handlePageChange
546
+ } = usePaginatedEventPairs(
547
+ events,
548
+ numberOfVisibleEvents,
549
+ onClearEvents,
550
+ scrollableDiv
551
+ );
552
+ return /* @__PURE__ */ jsxs4(Drawer, { anchor, onClose, keepMounted: false, ...props, children: [
553
+ /* @__PURE__ */ jsx6(CloseDrawerIconButton, { anchor, onClose }),
554
+ /* @__PURE__ */ jsxs4(
555
+ Stack3,
556
+ {
557
+ sx: {
558
+ gap: 2,
559
+ flexShrink: 0,
560
+ p: 3
561
+ },
562
+ children: [
563
+ /* @__PURE__ */ jsxs4(
564
+ Stack3,
565
+ {
566
+ direction: "row",
567
+ sx: {
568
+ justifyContent: "space-between",
569
+ alignItems: "center",
570
+ gap: 4
571
+ },
572
+ children: [
573
+ /* @__PURE__ */ jsx6(Typography3, { variant: "h6", children: drawerTitle ?? "Broadcasted RPC Calls" }),
574
+ /* @__PURE__ */ jsx6(Button, { variant: "outlined", size: "small", onClick: handleClearEvents, children: "Clear All" })
575
+ ]
576
+ }
577
+ ),
578
+ allEventEntries.length > 0 && /* @__PURE__ */ jsx6(
579
+ Pagination,
580
+ {
581
+ count: totalPages,
582
+ page: effectiveCurrentPage,
583
+ onChange: handlePageChange,
584
+ color: "primary"
585
+ }
586
+ )
587
+ ]
588
+ }
589
+ ),
590
+ /* @__PURE__ */ jsx6(
591
+ Stack3,
592
+ {
593
+ direction: "column",
594
+ id: "events-container",
595
+ sx: {
596
+ flexGrow: 1,
597
+ overflowY: "hidden"
598
+ },
599
+ children: /* @__PURE__ */ jsx6(
600
+ Box,
601
+ {
602
+ ref: (el) => setScrollableDiv(el),
603
+ sx: {
604
+ overflowY: "auto",
605
+ px: 3,
606
+ pb: 3
607
+ },
608
+ children: visibleEvents.map(([id, broadcastedRpcCall], index) => {
609
+ return /* @__PURE__ */ jsx6(BroadcastedRpcCallDetailsCard, { rpcRequestResponsePairs: broadcastedRpcCall, sx: { mb: index < visibleEvents.length - 1 ? 2 : 0 } }, id);
610
+ })
611
+ }
612
+ )
552
613
  }
553
- });
554
- }))));
555
- }, "BroadcastedRpcCallsDrawer");
556
- var BroadcastedRpcCallsDrawerWithEvents = /* @__PURE__ */ __name((props) => {
614
+ )
615
+ ] });
616
+ };
617
+ var BroadcastedRpcCallsDrawerWithEvents = (props) => {
557
618
  const { clearEvents, events } = useRpcBroadcastListener();
558
- return /* @__PURE__ */ React6.createElement(BroadcastedRpcCallsDrawer, {
559
- events,
560
- onClearEvents: clearEvents,
561
- ...props
562
- });
563
- }, "BroadcastedRpcCallsDrawerWithEvents");
619
+ return /* @__PURE__ */ jsx6(
620
+ BroadcastedRpcCallsDrawer,
621
+ {
622
+ events,
623
+ onClearEvents: clearEvents,
624
+ ...props
625
+ }
626
+ );
627
+ };
564
628
 
565
629
  // src/components/menu/Avatar.tsx
566
630
  import { Avatar as Avatar2 } from "@mui/material";
567
- import React8 from "react";
568
631
 
569
632
  // src/components/menu/Icon.tsx
570
- import React7 from "react";
571
- var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
572
- return /* @__PURE__ */ React7.createElement("span", {
573
- // eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
574
- dangerouslySetInnerHTML: {
575
- __html: icon ?? ""
576
- },
577
- style: {
578
- display: "inline-flex",
579
- width: 24,
580
- height: 24,
581
- ...style
582
- },
583
- ...props
584
- });
585
- }, "NetworkIcon");
633
+ import { jsx as jsx7 } from "react/jsx-runtime";
634
+ var NetworkIcon = ({
635
+ icon,
636
+ style,
637
+ ...props
638
+ }) => {
639
+ return /* @__PURE__ */ jsx7(
640
+ "span",
641
+ {
642
+ dangerouslySetInnerHTML: { __html: icon ?? "" },
643
+ style: {
644
+ display: "inline-flex",
645
+ width: 24,
646
+ height: 24,
647
+ ...style
648
+ },
649
+ ...props
650
+ }
651
+ );
652
+ };
586
653
 
587
654
  // src/components/menu/Avatar.tsx
588
- var NetworkAvatar = /* @__PURE__ */ __name(({ icon, iconStyles, name, sx, ...props }) => {
589
- return /* @__PURE__ */ React8.createElement(Avatar2, {
590
- sx: {
591
- backgroundColor: "white",
592
- ...sx
593
- },
594
- alt: name,
595
- ...props
596
- }, /* @__PURE__ */ React8.createElement(NetworkIcon, {
597
- icon,
598
- style: {
599
- ...iconStyles
655
+ import { jsx as jsx8 } from "react/jsx-runtime";
656
+ var NetworkAvatar = ({
657
+ icon,
658
+ iconStyles,
659
+ name,
660
+ sx,
661
+ ...props
662
+ }) => {
663
+ return /* @__PURE__ */ jsx8(
664
+ Avatar2,
665
+ {
666
+ sx: { backgroundColor: "white", ...sx },
667
+ alt: name,
668
+ ...props,
669
+ children: /* @__PURE__ */ jsx8(
670
+ NetworkIcon,
671
+ {
672
+ icon,
673
+ style: { ...iconStyles }
674
+ }
675
+ )
600
676
  }
601
- }));
602
- }, "NetworkAvatar");
603
- var ActiveNetworkAvatar = /* @__PURE__ */ __name((props) => {
677
+ );
678
+ };
679
+ var ActiveNetworkAvatar = (props) => {
604
680
  const { activeNetwork } = useChainNetwork();
605
- return /* @__PURE__ */ React8.createElement(NetworkAvatar, {
606
- icon: activeNetwork?.icon,
607
- name: activeNetwork?.name,
608
- ...props
609
- });
610
- }, "ActiveNetworkAvatar");
681
+ return /* @__PURE__ */ jsx8(
682
+ NetworkAvatar,
683
+ {
684
+ icon: activeNetwork?.icon,
685
+ name: activeNetwork?.name,
686
+ ...props
687
+ }
688
+ );
689
+ };
611
690
 
612
691
  // src/components/menu/MenuItem.tsx
613
692
  import { ListItemText } from "@mui/material";
614
693
  import { ActiveMenuItem } from "@xyo-network/react-chain-shared";
615
- import React9 from "react";
616
- var NetworkMenuItem = /* @__PURE__ */ __name(({ active, network, onClick, updateActiveNetwork, ...props }) => {
617
- const handleClick = /* @__PURE__ */ __name((event) => {
694
+ import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
695
+ var NetworkMenuItem = ({
696
+ active,
697
+ network,
698
+ onClick,
699
+ updateActiveNetwork,
700
+ ...props
701
+ }) => {
702
+ const handleClick = (event) => {
618
703
  if (network === void 0) throw new Error("Network is undefined");
619
704
  updateActiveNetwork?.(network.id);
620
705
  onClick?.(event);
621
- }, "handleClick");
622
- return /* @__PURE__ */ React9.createElement(ActiveMenuItem, {
623
- title: network?.name,
624
- disableRipple: true,
625
- onClick: handleClick,
626
- active,
627
- sx: {
628
- py: 1
629
- },
630
- ...props
631
- }, /* @__PURE__ */ React9.createElement(NetworkAvatar, {
632
- icon: network?.icon,
633
- name: network?.name,
634
- sx: {
635
- width: 30,
636
- height: 30
706
+ };
707
+ return /* @__PURE__ */ jsxs5(
708
+ ActiveMenuItem,
709
+ {
710
+ title: network?.name,
711
+ disableRipple: true,
712
+ onClick: handleClick,
713
+ active,
714
+ sx: { py: 1 },
715
+ ...props,
716
+ children: [
717
+ /* @__PURE__ */ jsx9(NetworkAvatar, { icon: network?.icon, name: network?.name, sx: { width: 30, height: 30 } }),
718
+ /* @__PURE__ */ jsx9(ListItemText, { children: network?.name })
719
+ ]
637
720
  }
638
- }), /* @__PURE__ */ React9.createElement(ListItemText, null, network?.name));
639
- }, "NetworkMenuItem");
721
+ );
722
+ };
640
723
 
641
724
  // src/components/status/Alert.tsx
642
- import { Alert, AlertTitle, Button as Button3 } from "@mui/material";
643
- import React11, { useMemo as useMemo4, useState as useState8 } from "react";
725
+ import {
726
+ Alert,
727
+ AlertTitle,
728
+ Button as Button3
729
+ } from "@mui/material";
730
+ import { useMemo as useMemo4, useState as useState8 } from "react";
644
731
 
645
732
  // src/components/status/Dialog.tsx
646
- import { Button as Button2, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography as Typography4 } from "@mui/material";
647
- import React10 from "react";
648
- var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
649
- return /* @__PURE__ */ React10.createElement(Dialog, props, /* @__PURE__ */ React10.createElement(DialogTitle, null, "Recent Status Updates"), /* @__PURE__ */ React10.createElement(DialogContent, null, /* @__PURE__ */ React10.createElement(List, null, updates.map(({ start, end, update }) => /* @__PURE__ */ React10.createElement(ListItem, {
650
- key: start + update,
651
- sx: {
652
- flexDirection: "column",
653
- alignItems: "start",
654
- pl: 0
655
- }
656
- }, /* @__PURE__ */ React10.createElement(Typography4, null, update), /* @__PURE__ */ React10.createElement(Typography4, {
657
- gutterBottom: true,
658
- sx: {
659
- opacity: 0.75,
660
- fontSize: ".8333rem"
661
- }
662
- }, "Start:", " ", new Date(start).toLocaleString(), " ", /* @__PURE__ */ React10.createElement("br", null), "End:", " ", new Date(end).toLocaleString()))))), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, {
663
- onClick: /* @__PURE__ */ __name((e) => props.onClose?.(e, "backdropClick"), "onClick"),
664
- variant: "outlined",
665
- sx: {
666
- color: "primary"
667
- }
668
- }, "Close")));
669
- }, "NetworkStatusDialog");
733
+ import {
734
+ Button as Button2,
735
+ Dialog,
736
+ DialogActions,
737
+ DialogContent,
738
+ DialogTitle,
739
+ List,
740
+ ListItem,
741
+ Typography as Typography4
742
+ } from "@mui/material";
743
+ import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
744
+ var NetworkStatusDialog = ({ updates, ...props }) => {
745
+ return /* @__PURE__ */ jsxs6(Dialog, { ...props, children: [
746
+ /* @__PURE__ */ jsx10(DialogTitle, { children: "Recent Status Updates" }),
747
+ /* @__PURE__ */ jsx10(DialogContent, { children: /* @__PURE__ */ jsx10(List, { children: updates.map(({
748
+ start,
749
+ end,
750
+ update
751
+ }) => /* @__PURE__ */ jsxs6(
752
+ ListItem,
753
+ {
754
+ sx: {
755
+ flexDirection: "column",
756
+ alignItems: "start",
757
+ pl: 0
758
+ },
759
+ children: [
760
+ /* @__PURE__ */ jsx10(Typography4, { children: update }),
761
+ /* @__PURE__ */ jsxs6(Typography4, { gutterBottom: true, sx: { opacity: 0.75, fontSize: ".8333rem" }, children: [
762
+ "Start:",
763
+ " ",
764
+ new Date(start).toLocaleString(),
765
+ " ",
766
+ /* @__PURE__ */ jsx10("br", {}),
767
+ "End:",
768
+ " ",
769
+ new Date(end).toLocaleString()
770
+ ] })
771
+ ]
772
+ },
773
+ start + update
774
+ )) }) }),
775
+ /* @__PURE__ */ jsx10(DialogActions, { children: /* @__PURE__ */ jsx10(
776
+ Button2,
777
+ {
778
+ onClick: (e) => props.onClose?.(e, "backdropClick"),
779
+ variant: "outlined",
780
+ sx: { color: "primary" },
781
+ children: "Close"
782
+ }
783
+ ) })
784
+ ] });
785
+ };
670
786
 
671
787
  // src/components/status/Alert.tsx
672
- var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
788
+ import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
789
+ var NetworkStatusAlert = ({ status, ...props }) => {
673
790
  const [open, setOpen] = useState8(false);
674
- const handleClose = /* @__PURE__ */ __name(() => setOpen(false), "handleClose");
791
+ const handleClose = () => setOpen(false);
675
792
  const severity = useMemo4(() => {
676
793
  if (!status) return;
677
794
  switch (status.state) {
@@ -688,86 +805,63 @@ var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
688
805
  return "error";
689
806
  }
690
807
  }
691
- }, [
692
- status
693
- ]);
694
- return /* @__PURE__ */ React11.createElement(Alert, {
695
- severity,
696
- ...props
697
- }, /* @__PURE__ */ React11.createElement(AlertTitle, null, status?.description), status?.updates && status.updates.length > 0 ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Button3, {
698
- variant: "outlined",
699
- size: "small",
700
- onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick"),
701
- sx: {
702
- color: severity
703
- }
704
- }, "Updates"), /* @__PURE__ */ React11.createElement(NetworkStatusDialog, {
705
- open,
706
- onClose: handleClose,
707
- updates: status.updates
708
- })) : null);
709
- }, "NetworkStatusAlert");
808
+ }, [status]);
809
+ return /* @__PURE__ */ jsxs7(Alert, { severity, ...props, children: [
810
+ /* @__PURE__ */ jsx11(AlertTitle, { children: status?.description }),
811
+ status?.updates && status.updates.length > 0 ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
812
+ /* @__PURE__ */ jsx11(
813
+ Button3,
814
+ {
815
+ variant: "outlined",
816
+ size: "small",
817
+ onClick: () => setOpen(true),
818
+ sx: { color: severity },
819
+ children: "Updates"
820
+ }
821
+ ),
822
+ /* @__PURE__ */ jsx11(NetworkStatusDialog, { open, onClose: handleClose, updates: status.updates })
823
+ ] }) : null
824
+ ] });
825
+ };
710
826
 
711
827
  // src/components/status/NetworkStatus.tsx
712
- import React12 from "react";
713
- var validNetworkStates = /* @__PURE__ */ new Set([
714
- "online",
715
- "unknown"
716
- ]);
717
- var NetworkStatus = /* @__PURE__ */ __name(({ children, ...props }) => {
828
+ import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
829
+ var validNetworkStates = /* @__PURE__ */ new Set(["online", "unknown"]);
830
+ var NetworkStatus = ({ children, ...props }) => {
718
831
  const [networkStatus] = usePollNetworkStatus();
719
832
  const showStatus = networkStatus && !validNetworkStates.has(networkStatus.state);
720
- return /* @__PURE__ */ React12.createElement(React12.Fragment, null, showStatus ? /* @__PURE__ */ React12.createElement(NetworkStatusAlert, {
721
- status: networkStatus,
722
- ...props
723
- }) : null, children);
724
- }, "NetworkStatus");
833
+ return /* @__PURE__ */ jsxs8(Fragment3, { children: [
834
+ showStatus ? /* @__PURE__ */ jsx12(NetworkStatusAlert, { status: networkStatus, ...props }) : null,
835
+ children
836
+ ] });
837
+ };
725
838
 
726
839
  // src/model/BroadcastRpc.ts
727
840
  var BroadcastRpcRequestEventName = "xyo:broadcast-rpc-request";
728
841
  var BroadcastRpcResponseEventName = "xyo:broadcast-rpc-response";
729
- var defaultBroadcastConfig = {
730
- request: true,
731
- response: true
732
- };
842
+ var defaultBroadcastConfig = { request: true, response: true };
733
843
 
734
844
  // src/story/NetworkGatewayDecorators.tsx
735
- import { LocalNetwork as LocalNetwork2, MainNetwork as MainNetwork2, SequenceNetwork } from "@xyo-network/xl1-sdk";
736
- import React13 from "react";
737
- var AvailableNetworks = [
738
- MainNetwork2,
739
- SequenceNetwork,
740
- LocalNetwork2
741
- ];
742
- var networkSettings = {
743
- [LocalNetwork2.id]: {
744
- proxy: true
745
- }
845
+ import {
846
+ LocalNetwork as LocalNetwork2,
847
+ MainNetwork as MainNetwork2,
848
+ SequenceNetwork
849
+ } from "@xyo-network/xl1-sdk";
850
+ import { jsx as jsx13 } from "react/jsx-runtime";
851
+ var AvailableNetworks = [MainNetwork2, SequenceNetwork, LocalNetwork2];
852
+ var networkSettings = { [LocalNetwork2.id]: { proxy: true } };
853
+ var getActiveMainnetNetwork = async () => await Promise.resolve(AvailableNetworks[0]);
854
+ var MainnetNetworkGatewayDecorator = (Story, args) => {
855
+ return /* @__PURE__ */ jsx13(ChainNetworkProvider, { networks: AvailableNetworks, networkSettings, getActiveNetwork: getActiveMainnetNetwork, children: /* @__PURE__ */ jsx13(ActiveGatewayProvider, { children: /* @__PURE__ */ jsx13(Story, { ...args }) }) });
856
+ };
857
+ var getActiveSequenceNetwork = async () => await Promise.resolve(AvailableNetworks[1]);
858
+ var SequenceNetworkGatewayDecorator = (Story, args) => {
859
+ return /* @__PURE__ */ jsx13(ChainNetworkProvider, { networks: AvailableNetworks, networkSettings, getActiveNetwork: getActiveSequenceNetwork, children: /* @__PURE__ */ jsx13(ActiveGatewayProvider, { children: /* @__PURE__ */ jsx13(Story, { ...args }) }) });
860
+ };
861
+ var getActiveLocalNetwork = async () => await Promise.resolve(AvailableNetworks[2]);
862
+ var LocalNetworkGatewayDecorator = (Story, args) => {
863
+ return /* @__PURE__ */ jsx13(ChainNetworkProvider, { networks: AvailableNetworks, networkSettings, getActiveNetwork: getActiveLocalNetwork, children: /* @__PURE__ */ jsx13(ActiveGatewayProvider, { children: /* @__PURE__ */ jsx13(Story, { ...args }) }) });
746
864
  };
747
- var getActiveMainnetNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[0]), "getActiveMainnetNetwork");
748
- var MainnetNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
749
- return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
750
- networks: AvailableNetworks,
751
- networkSettings,
752
- getActiveNetwork: getActiveMainnetNetwork
753
- }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
754
- }, "MainnetNetworkGatewayDecorator");
755
- var getActiveSequenceNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[1]), "getActiveSequenceNetwork");
756
- var SequenceNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
757
- return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
758
- networks: AvailableNetworks,
759
- networkSettings,
760
- getActiveNetwork: getActiveSequenceNetwork
761
- }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
762
- }, "SequenceNetworkGatewayDecorator");
763
- var getActiveLocalNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[2]), "getActiveLocalNetwork");
764
- var LocalNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
765
- return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
766
- networks: AvailableNetworks,
767
- networkSettings,
768
- getActiveNetwork: getActiveLocalNetwork
769
- }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
770
- }, "LocalNetworkGatewayDecorator");
771
865
  export {
772
866
  ActiveGatewayProvider,
773
867
  ActiveNetworkAvatar,
@@ -794,4 +888,4 @@ export {
794
888
  useViewerInPage,
795
889
  useViewerInPageV2
796
890
  };
797
- //# sourceMappingURL=index.mjs.map
891
+ //# sourceMappingURL=index.mjs.map