@xyo-network/react-chain-network 1.19.6 → 1.19.7

package/dist/browser/index.mjs

@@ -1,9 +1,189 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
+// src/components/broadcast/Drawer.tsx
+import { Drawer, Stack as Stack3, Typography as Typography3 } from "@mui/material";
+import React4, { useMemo } from "react";
+
+// src/components/broadcast/CloseDrawerIconButton.tsx
+import { Cancel } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import React from "react";
+var CloseDrawerIconButton = /* @__PURE__ */ __name(({ anchor, onClose }) => {
+  return /* @__PURE__ */ React.createElement(IconButton, {
+    onClick: /* @__PURE__ */ __name((e) => onClose?.(e, "backdropClick"), "onClick"),
+    size: "small",
+    sx: {
+      alignSelf: anchor === "right" ? "start" : "end",
+      top: 8,
+      right: anchor === "right" ? void 0 : 8,
+      left: anchor === "left" ? void 0 : 8
+    }
+  }, /* @__PURE__ */ React.createElement(Cancel, {
+    fontSize: "small"
+  }));
+}, "CloseDrawerIconButton");
+
+// src/components/broadcast/details/Card.tsx
+import { Card, Collapse, Stack as Stack2, Typography as Typography2 } from "@mui/material";
+import { isDefined as isDefined2 } from "@xylabs/sdk-js";
+import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
+import React3, { useState } from "react";
+
+// src/components/broadcast/details/SummaryStack.tsx
+import { ArrowRight, CheckCircle, Warning } from "@mui/icons-material";
+import { Icon, IconButton as IconButton2, Stack, Typography } from "@mui/material";
+import { isDefined } from "@xylabs/sdk-js";
+import React2 from "react";
+var BroadcastedRpcCallDetailsSummaryStack = /* @__PURE__ */ __name(({ expanded, setExpanded, method, timestamp, hasResult, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center",
+    justifyContent: "space-between",
+    ...props
+  }, /* @__PURE__ */ React2.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center"
+  }, /* @__PURE__ */ React2.createElement(IconButton2, {
+    size: "small",
+    onClick: /* @__PURE__ */ __name(() => setExpanded?.(!expanded), "onClick")
+  }, /* @__PURE__ */ React2.createElement(ArrowRight, {
+    fontSize: "small"
+  })), /* @__PURE__ */ React2.createElement(Typography, {
+    component: "span",
+    variant: "body2",
+    fontFamily: "monospace"
+  }, method), /* @__PURE__ */ React2.createElement(Typography, {
+    component: "span",
+    variant: "caption",
+    color: "text.secondary",
+    sx: {
+      opacity: 0.6
+    }
+  }, isDefined(timestamp) ? new Date(timestamp).toLocaleString() : "")), /* @__PURE__ */ React2.createElement(Icon, {
+    sx: {
+      justifySelf: "end"
+    }
+  }, hasResult ? /* @__PURE__ */ React2.createElement(CheckCircle, {
+    color: "success"
+  }) : /* @__PURE__ */ React2.createElement(Warning, {
+    color: "warning"
+  })));
+}, "BroadcastedRpcCallDetailsSummaryStack");
+
+// src/components/broadcast/details/Card.tsx
+var BroadcastedRpcCallDetails = /* @__PURE__ */ __name(({ rpcRequestResponsePairs }) => {
+  const [expanded, setExpanded] = useState(false);
+  if (!rpcRequestResponsePairs) return null;
+  const { request, result, source } = rpcRequestResponsePairs;
+  return /* @__PURE__ */ React3.createElement(Card, {
+    sx: {
+      p: 1
+    }
+  }, /* @__PURE__ */ React3.createElement(BroadcastedRpcCallDetailsSummaryStack, {
+    expanded,
+    hasResult: isDefined2(result),
+    method: request.rpcCall.method,
+    setExpanded,
+    timestamp: request.timestamp
+  }), /* @__PURE__ */ React3.createElement(Collapse, {
+    in: expanded
+  }, /* @__PURE__ */ React3.createElement(Stack2, {
+    direction: "column",
+    p: 1,
+    gap: 2,
+    width: 600
+  }, /* @__PURE__ */ React3.createElement(Typography2, {
+    variant: "body2"
+  }, "Source:", /* @__PURE__ */ React3.createElement(Typography2, {
+    variant: "caption",
+    component: "span",
+    fontFamily: "monospace",
+    sx: {
+      ml: 1
+    }
+  }, source)), /* @__PURE__ */ React3.createElement(Typography2, {
+    variant: "body2"
+  }, "Request:"), /* @__PURE__ */ React3.createElement(JsonViewerEx, {
+    value: request,
+    sx: {
+      maxHeight: 300,
+      overflow: "auto"
+    }
+  }), isDefined2(result) ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography2, {
+    variant: "body2"
+  }, "Result:"), /* @__PURE__ */ React3.createElement(JsonViewerEx, {
+    value: result,
+    sx: {
+      maxHeight: 300,
+      overflow: "auto"
+    }
+  })) : null)));
+}, "BroadcastedRpcCallDetails");
+
+// src/components/broadcast/helpers/formatEvents.ts
+import { isJsonRpcRequest, isJsonRpcResponse } from "@metamask/utils";
+import { isArray, isDefined as isDefined3 } from "@xylabs/sdk-js";
+var formatEvents = /* @__PURE__ */ __name((events) => {
+  if (!isArray(events) || events.length === 0) return {};
+  const parseRpcCall = /* @__PURE__ */ __name((acc2, event) => {
+    if (isJsonRpcResponse(event.rpcCall)) {
+      const castedEvent = event;
+      acc2[castedEvent.rpcCall.id].result = castedEvent;
+    } else if (isJsonRpcRequest(event.rpcCall)) {
+      const castedEvent = event;
+      acc2[castedEvent.rpcCall.id].request = castedEvent;
+    } else {
+      console.error("Unknown RPC call type", event);
+    }
+    acc2[event.rpcCall.id].source = event.source;
+    return acc2;
+  }, "parseRpcCall");
+  let acc = {};
+  for (const event of events) {
+    const { id } = event.rpcCall;
+    if (isDefined3(acc[id])) {
+      acc = parseRpcCall(acc, event);
+    } else {
+      acc[id] = {};
+      acc = parseRpcCall(acc, event);
+    }
+  }
+  return acc;
+}, "formatEvents");
+
+// src/components/broadcast/Drawer.tsx
+var BroadcastedRpcCallsDrawer = /* @__PURE__ */ __name(({ anchor = "right", drawerTitle, events, onClose, ...props }) => {
+  const formattedEvents = useMemo(() => formatEvents(events), [
+    events
+  ]);
+  return /* @__PURE__ */ React4.createElement(Drawer, {
+    anchor,
+    onClose,
+    ...props
+  }, /* @__PURE__ */ React4.createElement(CloseDrawerIconButton, {
+    anchor,
+    onClose
+  }), /* @__PURE__ */ React4.createElement(Stack3, {
+    gap: 2,
+    sx: {
+      p: 3
+    }
+  }, /* @__PURE__ */ React4.createElement(Typography3, {
+    variant: "h6"
+  }, drawerTitle ?? "Broadcasted RPC Calls"), Object.entries(formattedEvents ?? {}).map(([id, broadcastedRpcCall]) => {
+    return /* @__PURE__ */ React4.createElement(BroadcastedRpcCallDetails, {
+      key: id,
+      rpcRequestResponsePairs: broadcastedRpcCall
+    });
+  })));
+}, "BroadcastedRpcCallsDrawer");
+
 // src/components/menu/Avatar.tsx
 import { Avatar } from "@mui/material";
-import React3 from "react";
+import React7 from "react";
 
 // src/context/network/context.ts
 import { createContextEx } from "@xylabs/react-shared";
@@ -12,12 +192,42 @@ var ChainNetworkContext = createContextEx();
 // src/context/network/Provider.tsx
 import { ErrorRender } from "@xylabs/react-error";
 import { usePromise } from "@xylabs/react-promise";
-import { isDefined } from "@xylabs/sdk-js";
+import { isDefined as isDefined4 } from "@xylabs/sdk-js";
 import { MainNetwork } from "@xyo-network/xl1-sdk";
-import React, { useCallback, useMemo, useState } from "react";
-var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork, networks, setActiveNetwork: setActiveNetworkExternal }) => {
-  const [activeNetwork, setActiveNetwork] = useState();
-  const [error, setError] = useState();
+import React5, { useCallback as useCallback2, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/context/network/settings/defaultChainNetworkSettings.ts
+import { LocalNetwork } from "@xyo-network/xl1-sdk";
+var defaultChainNetworkSettings = {
+  [LocalNetwork.id]: {
+    proxy: true
+  }
+};
+
+// src/context/network/settings/useChainNetworkSettings.ts
+import { useCallback, useState as useState2 } from "react";
+var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNetworkSettings) => {
+  const [networkSettings, setNetworkSettings] = useState2(defaults);
+  const updateNetworkSettings = useCallback((networkId, settings) => {
+    setNetworkSettings((prevSettings) => ({
+      ...prevSettings,
+      [networkId]: {
+        ...prevSettings[networkId],
+        ...settings
+      }
+    }));
+  }, []);
+  return {
+    networkSettings,
+    updateNetworkSettings
+  };
+}, "useChainNetworkSettings");
+
+// src/context/network/Provider.tsx
+var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork, networkSettings: networkSettingsProp = defaultChainNetworkSettings, networks, setActiveNetwork: setActiveNetworkExternal }) => {
+  const [activeNetwork, setActiveNetwork] = useState3();
+  const [error, setError] = useState3();
+  const { networkSettings, updateNetworkSettings } = useChainNetworkSettings(networkSettingsProp);
   const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {
     if (!networks) return;
     const activeNetwork2 = await getActiveNetwork?.();
@@ -31,12 +241,12 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
   }, [
     networks
   ]);
-  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState(resolvedActiveNetwork);
-  if (isDefined(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
+  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState3(resolvedActiveNetwork);
+  if (isDefined4(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
     setActiveNetwork(resolvedActiveNetwork);
     setPreviousResolvedActiveNetwork(resolvedActiveNetwork);
   }
-  const updateActiveNetwork = useCallback((networkId) => {
+  const updateActiveNetwork = useCallback2((networkId) => {
     setError(void 0);
     const network = networks?.find((network2) => network2.id === networkId);
     if (!network) {
@@ -49,22 +259,26 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
     networks,
     setActiveNetworkExternal
   ]);
-  const value = useMemo(() => ({
+  const value = useMemo2(() => ({
     activeNetwork,
     networks,
     provided: true,
     updateActiveNetwork,
+    networkSettings,
+    updateNetworkSettings,
     chainNetworkError: error ?? activeNetworkError
   }), [
     activeNetwork,
     activeNetworkError,
     error,
+    networkSettings,
     networks,
-    updateActiveNetwork
+    updateActiveNetwork,
+    updateNetworkSettings
   ]);
-  return /* @__PURE__ */ React.createElement(ChainNetworkContext, {
+  return /* @__PURE__ */ React5.createElement(ChainNetworkContext, {
     value
-  }, /* @__PURE__ */ React.createElement(ErrorRender, {
+  }, /* @__PURE__ */ React5.createElement(ErrorRender, {
     error: error ?? activeNetworkError,
     scope: "ChainNetworkProvider"
   }), children);
@@ -75,9 +289,9 @@ import { useContextEx } from "@xylabs/react-shared";
 var useChainNetwork = /* @__PURE__ */ __name((required = true) => useContextEx(ChainNetworkContext, "ChainNetwork", required), "useChainNetwork");
 
 // src/components/menu/Icon.tsx
-import React2 from "react";
+import React6 from "react";
 var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
-  return /* @__PURE__ */ React2.createElement("span", {
+  return /* @__PURE__ */ React6.createElement("span", {
     // eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
     dangerouslySetInnerHTML: {
       __html: icon ?? ""
@@ -94,14 +308,14 @@ var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
 
 // src/components/menu/Avatar.tsx
 var NetworkAvatar = /* @__PURE__ */ __name(({ icon, iconStyles, name, sx, ...props }) => {
-  return /* @__PURE__ */ React3.createElement(Avatar, {
+  return /* @__PURE__ */ React7.createElement(Avatar, {
     sx: {
       backgroundColor: "white",
       ...sx
     },
     alt: name,
     ...props
-  }, /* @__PURE__ */ React3.createElement(NetworkIcon, {
+  }, /* @__PURE__ */ React7.createElement(NetworkIcon, {
     icon,
     style: {
       ...iconStyles
@@ -110,7 +324,7 @@ var NetworkAvatar = /* @__PURE__ */ __name(({ icon, iconStyles, name, sx, ...pro
 }, "NetworkAvatar");
 var ActiveNetworkAvatar = /* @__PURE__ */ __name((props) => {
   const { activeNetwork } = useChainNetwork();
-  return /* @__PURE__ */ React3.createElement(NetworkAvatar, {
+  return /* @__PURE__ */ React7.createElement(NetworkAvatar, {
     icon: activeNetwork?.icon,
     name: activeNetwork?.name,
     ...props
@@ -120,14 +334,14 @@ var ActiveNetworkAvatar = /* @__PURE__ */ __name((props) => {
 // src/components/menu/MenuItem.tsx
 import { ListItemText } from "@mui/material";
 import { ActiveMenuItem } from "@xyo-network/react-chain-shared";
-import React4 from "react";
+import React8 from "react";
 var NetworkMenuItem = /* @__PURE__ */ __name(({ active, network, onClick, updateActiveNetwork, ...props }) => {
   const handleClick = /* @__PURE__ */ __name((event) => {
     if (network === void 0) throw new Error("Network is undefined");
     updateActiveNetwork?.(network.id);
     onClick?.(event);
   }, "handleClick");
-  return /* @__PURE__ */ React4.createElement(ActiveMenuItem, {
+  return /* @__PURE__ */ React8.createElement(ActiveMenuItem, {
     title: network?.name,
     disableRipple: true,
     onClick: handleClick,
@@ -136,38 +350,38 @@ var NetworkMenuItem = /* @__PURE__ */ __name(({ active, network, onClick, update
       py: 1
     },
     ...props
-  }, /* @__PURE__ */ React4.createElement(NetworkAvatar, {
+  }, /* @__PURE__ */ React8.createElement(NetworkAvatar, {
     icon: network?.icon,
     name: network?.name,
     sx: {
       width: 30,
       height: 30
     }
-  }), /* @__PURE__ */ React4.createElement(ListItemText, null, network?.name));
+  }), /* @__PURE__ */ React8.createElement(ListItemText, null, network?.name));
 }, "NetworkMenuItem");
 
 // src/components/status/Alert.tsx
 import { Alert, AlertTitle, Button as Button2 } from "@mui/material";
-import React6, { useMemo as useMemo2, useState as useState2 } from "react";
+import React10, { useMemo as useMemo3, useState as useState4 } from "react";
 
 // src/components/status/Dialog.tsx
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography } from "@mui/material";
-import React5 from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography as Typography4 } from "@mui/material";
+import React9 from "react";
 var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Dialog, props, /* @__PURE__ */ React5.createElement(DialogTitle, null, "Recent Status Updates"), /* @__PURE__ */ React5.createElement(DialogContent, null, /* @__PURE__ */ React5.createElement(List, null, updates.map(({ start, end, update }) => /* @__PURE__ */ React5.createElement(ListItem, {
+  return /* @__PURE__ */ React9.createElement(Dialog, props, /* @__PURE__ */ React9.createElement(DialogTitle, null, "Recent Status Updates"), /* @__PURE__ */ React9.createElement(DialogContent, null, /* @__PURE__ */ React9.createElement(List, null, updates.map(({ start, end, update }) => /* @__PURE__ */ React9.createElement(ListItem, {
     key: start + update,
     sx: {
       flexDirection: "column",
       alignItems: "start",
       pl: 0
     }
-  }, /* @__PURE__ */ React5.createElement(Typography, null, update), /* @__PURE__ */ React5.createElement(Typography, {
+  }, /* @__PURE__ */ React9.createElement(Typography4, null, update), /* @__PURE__ */ React9.createElement(Typography4, {
     gutterBottom: true,
     sx: {
       opacity: 0.75,
       fontSize: ".8333rem"
     }
-  }, "Start:", " ", new Date(start).toLocaleString(), " ", /* @__PURE__ */ React5.createElement("br", null), "End:", " ", new Date(end).toLocaleString()))))), /* @__PURE__ */ React5.createElement(DialogActions, null, /* @__PURE__ */ React5.createElement(Button, {
+  }, "Start:", " ", new Date(start).toLocaleString(), " ", /* @__PURE__ */ React9.createElement("br", null), "End:", " ", new Date(end).toLocaleString()))))), /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.createElement(Button, {
     onClick: /* @__PURE__ */ __name((e) => props.onClose?.(e, "backdropClick"), "onClick"),
     color: "primary",
     variant: "outlined"
@@ -176,9 +390,9 @@ var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
 
 // src/components/status/Alert.tsx
 var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
-  const [open, setOpen] = useState2(false);
+  const [open, setOpen] = useState4(false);
   const handleClose = /* @__PURE__ */ __name(() => setOpen(false), "handleClose");
-  const severity = useMemo2(() => {
+  const severity = useMemo3(() => {
     if (!status) return;
     switch (status.state) {
       case "online": {
@@ -197,15 +411,15 @@ var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
   }, [
     status
   ]);
-  return /* @__PURE__ */ React6.createElement(Alert, {
+  return /* @__PURE__ */ React10.createElement(Alert, {
     severity,
     ...props
-  }, /* @__PURE__ */ React6.createElement(AlertTitle, null, status?.description), status?.updates && status.updates.length > 0 ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Button2, {
+  }, /* @__PURE__ */ React10.createElement(AlertTitle, null, status?.description), status?.updates && status.updates.length > 0 ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Button2, {
     color: severity,
     variant: "outlined",
     size: "small",
     onClick: /* @__PURE__ */ __name(() => setOpen(true), "onClick")
-  }, "Updates"), /* @__PURE__ */ React6.createElement(NetworkStatusDialog, {
+  }, "Updates"), /* @__PURE__ */ React10.createElement(NetworkStatusDialog, {
     open,
     onClose: handleClose,
     updates: status.updates
@@ -213,22 +427,28 @@ var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
 }, "NetworkStatusAlert");
 
 // src/components/status/NetworkStatus.tsx
-import React7 from "react";
+import React11 from "react";
 
 // src/hooks/provider/useActiveNetworkCurrentBlock.ts
 import { useCurrentBlock, useViewerFromWallet as useViewerFromWallet2 } from "@xyo-network/react-chain-provider";
 
 // src/hooks/provider/useViewerInPage.ts
-import { isDefined as isDefined2, isDefinedNotNull, isUndefined } from "@xylabs/sdk-js";
+import { isDefined as isDefined5, isUndefined } from "@xylabs/sdk-js";
 import { useHttpRpcViewer, useViewerFromWallet } from "@xyo-network/react-chain-provider";
+var shouldProxy = /* @__PURE__ */ __name((networkSettings, networkBootstrap) => {
+  return isDefined5(networkBootstrap) && isDefined5(networkSettings[networkBootstrap.id]) && networkSettings[networkBootstrap.id].proxy;
+}, "shouldProxy");
 var useViewerInPage = /* @__PURE__ */ __name((networkOverride) => {
   let networkBootstrap;
-  const { activeNetwork } = useChainNetwork();
-  networkBootstrap = isDefined2(networkOverride) ? networkOverride : activeNetwork;
+  const { activeNetwork, networkSettings } = useChainNetwork();
+  networkBootstrap = isDefined5(networkOverride) ? networkOverride : activeNetwork;
   const httpRpcViewer = useHttpRpcViewer(networkBootstrap?.url);
   const [walletRpcViewer] = useViewerFromWallet(networkBootstrap?.id);
   if (isUndefined(walletRpcViewer)) return;
-  return isDefinedNotNull(walletRpcViewer) ? walletRpcViewer : httpRpcViewer;
+  if (shouldProxy(networkSettings, networkBootstrap) && isDefined5(walletRpcViewer)) {
+    return walletRpcViewer;
+  }
+  return httpRpcViewer;
 }, "useViewerInPage");
 
 // src/hooks/provider/useActiveNetworkCurrentBlock.ts
@@ -263,6 +483,46 @@ var useActiveNetworkRunner = /* @__PURE__ */ __name(() => {
   return runner;
 }, "useActiveNetworkRunner");
 
+// src/hooks/provider/useRpcBroadcastListener.ts
+import { isString } from "@xylabs/sdk-js";
+import { useEffect, useState as useState5 } from "react";
+var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
+  const [events, setEvents] = useState5([]);
+  useEffect(() => {
+    const listener = /* @__PURE__ */ __name((e) => {
+      if ("detail" in e) {
+        const { detail } = e ?? {};
+        if (isString(detail)) {
+          try {
+            const parsedDetail = JSON.parse(detail);
+            const { data: rpcCall, source } = parsedDetail;
+            const broadcastedRpcCall = {
+              rpcCall,
+              source,
+              timestamp: e.timeStamp
+            };
+            setEvents((prev) => [
+              broadcastedRpcCall,
+              ...prev
+            ]);
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      }
+    }, "listener");
+    globalThis.addEventListener("xyo:broadcast-rpc-request", listener);
+    globalThis.addEventListener("xyo:broadcast-rpc-response", listener);
+    return () => {
+      globalThis.removeEventListener("xyo:broadcast-rpc-request", listener);
+      globalThis.removeEventListener("xyo:broadcast-rpc-response", listener);
+    };
+  }, []);
+  return {
+    events
+  };
+}, "useRpcBroadcastListener");
+
 // src/hooks/provider/useViewerInWallet.ts
 import { useHttpRpcViewer as useHttpRpcViewer2 } from "@xyo-network/react-chain-provider";
 var useViewerInWallet = /* @__PURE__ */ __name(() => {
@@ -273,13 +533,13 @@ var useViewerInWallet = /* @__PURE__ */ __name(() => {
 
 // src/hooks/status/usePollNetworkStatus.ts
 import { delay, isUndefined as isUndefined2 } from "@xylabs/sdk-js";
-import { useEffect, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 var STATUS_CHECK_INTERVAL = 1e4;
 var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
   const network = useActiveNetworkNetwork();
-  const [networkStatus, setNetworkStatus] = useState3();
-  const [networkStatusError, setNetworkStatusError] = useState3();
-  useEffect(() => {
+  const [networkStatus, setNetworkStatus] = useState6();
+  const [networkStatusError, setNetworkStatusError] = useState6();
+  useEffect2(() => {
     let checkNetwork = true;
     void (async () => {
       if (isUndefined2(network)) return;
@@ -316,13 +576,24 @@ var validNetworkStates = /* @__PURE__ */ new Set([
 var NetworkStatus = /* @__PURE__ */ __name(({ children, ...props }) => {
   const [networkStatus] = usePollNetworkStatus();
   const showStatus = networkStatus && !validNetworkStates.has(networkStatus.state);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, showStatus ? /* @__PURE__ */ React7.createElement(NetworkStatusAlert, {
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, showStatus ? /* @__PURE__ */ React11.createElement(NetworkStatusAlert, {
     status: networkStatus,
     ...props
   }) : null, children);
 }, "NetworkStatus");
+
+// src/model/BroadcastRpc.ts
+var BroadcastRpcRequestEventName = "xyo:broadcast-rpc-request";
+var BroadcastRpcResponseEventName = "xyo:broadcast-rpc-response";
+var defaultBroadcastConfig = {
+  request: true,
+  response: true
+};
 export {
   ActiveNetworkAvatar,
+  BroadcastRpcRequestEventName,
+  BroadcastRpcResponseEventName,
+  BroadcastedRpcCallsDrawer,
   ChainNetworkContext,
   ChainNetworkProvider,
   NetworkAvatar,
@@ -330,13 +601,17 @@ export {
   NetworkMenuItem,
   NetworkStatus,
   NetworkStatusAlert,
+  defaultBroadcastConfig,
+  defaultChainNetworkSettings,
   useActiveNetworkCurrentBlock,
   useActiveNetworkCurrentBlockInPage,
   useActiveNetworkCurrentBlockInWallet,
   useActiveNetworkNetwork,
   useActiveNetworkRunner,
   useChainNetwork,
+  useChainNetworkSettings,
   usePollNetworkStatus,
+  useRpcBroadcastListener,
   useViewerInPage,
   useViewerInWallet
 };