@xyo-network/react-chain-network 1.19.10 → 1.19.12

package/dist/browser/index.mjs

@@ -2,15 +2,288 @@ 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";
+import { Box, Button, Drawer, Pagination, Stack as Stack3, Typography as Typography3 } from "@mui/material";
+import React5 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, isNull, isUndefined } from "@xylabs/sdk-js";
+import { useHttpRpcViewer, useViewerFromWallet } from "@xyo-network/react-chain-provider";
+
+// src/context/network/context.ts
+import { createContextEx } from "@xylabs/react-shared";
+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 { MainNetwork } from "@xyo-network/xl1-sdk";
+import React, { useCallback as useCallback2, useMemo, useState as useState2 } 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 } from "react";
+var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNetworkSettings) => {
+  const [networkSettings, setNetworkSettings] = useState(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] = useState2();
+  const [error, setError] = useState2();
+  const { networkSettings, updateNetworkSettings } = useChainNetworkSettings(networkSettingsProp);
+  const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {
+    if (!networks) return;
+    const activeNetwork2 = await getActiveNetwork?.();
+    if (activeNetwork2 && networks?.find((network) => network.id === activeNetwork2.id)) {
+      return activeNetwork2;
+    } else {
+      const defaultNetwork = networks.find((network) => network.id === MainNetwork.id) ?? networks[0];
+      await setActiveNetworkExternal?.(defaultNetwork.id);
+      return defaultNetwork;
+    }
+  }, [
+    networks
+  ]);
+  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState2(resolvedActiveNetwork);
+  if (isDefined(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
+    setActiveNetwork(resolvedActiveNetwork);
+    setPreviousResolvedActiveNetwork(resolvedActiveNetwork);
+  }
+  const updateActiveNetwork = useCallback2((networkId) => {
+    setError(void 0);
+    const network = networks?.find((network2) => network2.id === networkId);
+    if (!network) {
+      setError(new Error(`Network with id ${networkId} not found`));
+      return;
+    }
+    setActiveNetwork(network);
+    void setActiveNetworkExternal?.(networkId);
+  }, [
+    networks,
+    setActiveNetworkExternal
+  ]);
+  const value = useMemo(() => ({
+    activeNetwork,
+    networks,
+    provided: true,
+    updateActiveNetwork,
+    networkSettings,
+    updateNetworkSettings,
+    chainNetworkError: error ?? activeNetworkError
+  }), [
+    activeNetwork,
+    activeNetworkError,
+    error,
+    networkSettings,
+    networks,
+    updateActiveNetwork,
+    updateNetworkSettings
+  ]);
+  return /* @__PURE__ */ React.createElement(ChainNetworkContext, {
+    value
+  }, /* @__PURE__ */ React.createElement(ErrorRender, {
+    error: error ?? activeNetworkError,
+    scope: "ChainNetworkProvider"
+  }), children);
+}, "ChainNetworkProvider");
+
+// src/context/network/use.ts
+import { useContextEx } from "@xylabs/react-shared";
+var useChainNetwork = /* @__PURE__ */ __name((required = true) => useContextEx(ChainNetworkContext, "ChainNetwork", required), "useChainNetwork");
+
+// src/hooks/provider/useViewerInPage.ts
+var shouldProxy = /* @__PURE__ */ __name((networkSettings, networkBootstrap) => {
+  return isDefined2(networkBootstrap) && isDefined2(networkSettings[networkBootstrap.id]) && networkSettings[networkBootstrap.id].proxy;
+}, "shouldProxy");
+var useViewerInPage = /* @__PURE__ */ __name((networkOverride) => {
+  let networkBootstrap;
+  const { activeNetwork, networkSettings } = useChainNetwork();
+  networkBootstrap = isDefined2(networkOverride) ? networkOverride : activeNetwork;
+  const httpRpcViewer = useHttpRpcViewer(networkBootstrap?.url);
+  const [walletRpcViewer] = useViewerFromWallet(networkBootstrap?.id);
+  if (isUndefined(walletRpcViewer)) return;
+  if (shouldProxy(networkSettings, networkBootstrap)) {
+    if (isNull(walletRpcViewer)) {
+      console.warn(`Network ${networkBootstrap?.id} is set to proxy but no wallet viewer is available, falling back to HTTP RPC viewer`);
+      return httpRpcViewer;
+    }
+    return walletRpcViewer;
+  }
+  return httpRpcViewer;
+}, "useViewerInPage");
+
+// src/hooks/provider/useActiveNetworkCurrentBlock.ts
+var useActiveNetworkCurrentBlock = /* @__PURE__ */ __name((refresh = 1, viewer) => {
+  const currentBlock = useCurrentBlock(refresh, viewer);
+  return currentBlock;
+}, "useActiveNetworkCurrentBlock");
+var useActiveNetworkCurrentBlockInPage = /* @__PURE__ */ __name((refresh = 1) => {
+  const viewer = useViewerInPage();
+  const currentBlock = useCurrentBlock(refresh, viewer);
+  return currentBlock;
+}, "useActiveNetworkCurrentBlockInPage");
+var useActiveNetworkCurrentBlockInWallet = /* @__PURE__ */ __name((refresh = 1) => {
+  const [viewer] = useViewerFromWallet2();
+  const currentBlock = useCurrentBlock(refresh, viewer);
+  return currentBlock;
+}, "useActiveNetworkCurrentBlockInWallet");
+
+// src/hooks/provider/useActiveNetworkNetwork.ts
+import { useNetwork } from "@xyo-network/react-chain-provider";
+var useActiveNetworkNetwork = /* @__PURE__ */ __name(() => {
+  const { activeNetwork } = useChainNetwork();
+  const network = useNetwork(activeNetwork?.id);
+  return network;
+}, "useActiveNetworkNetwork");
+
+// src/hooks/provider/useActiveNetworkRunner.ts
+import { useHttpRpcRunner } from "@xyo-network/react-chain-provider";
+var useActiveNetworkRunner = /* @__PURE__ */ __name(() => {
+  const { activeNetwork } = useChainNetwork();
+  const runner = useHttpRpcRunner(activeNetwork?.url);
+  return runner;
+}, "useActiveNetworkRunner");
+
+// src/hooks/provider/useRpcBroadcastListener.ts
+import { isJsonRpcRequest, isJsonRpcResponse } from "@metamask/utils";
+import { isDefined as isDefined3, isString } from "@xylabs/sdk-js";
+import { useEffect, useState as useState3 } from "react";
+var parseRpcCall = /* @__PURE__ */ __name((acc, event) => {
+  if (isJsonRpcResponse(event.rpcCall)) {
+    const castedEvent = event;
+    acc[castedEvent.rpcCall.id].result = castedEvent;
+  } else if (isJsonRpcRequest(event.rpcCall)) {
+    const castedEvent = event;
+    acc[castedEvent.rpcCall.id].request = castedEvent;
+  } else {
+    console.error("Unknown RPC call type", event);
+  }
+  acc[event.rpcCall.id].source = event.source;
+  return acc;
+}, "parseRpcCall");
+var useRpcBroadcastListener = /* @__PURE__ */ __name(() => {
+  const [events, setEvents] = useState3({});
+  const clearEvents = /* @__PURE__ */ __name(() => setEvents({}), "clearEvents");
+  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: Date.now()
+            };
+            setEvents((prev) => {
+              const { id } = broadcastedRpcCall.rpcCall;
+              const newState = {
+                ...prev
+              };
+              if (isDefined3(newState[id])) {
+                parseRpcCall(newState, broadcastedRpcCall);
+              } else {
+                newState[id] = {};
+                parseRpcCall(newState, broadcastedRpcCall);
+              }
+              return newState;
+            });
+          } 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,
+    clearEvents
+  };
+}, "useRpcBroadcastListener");
+
+// src/hooks/provider/useViewerInWallet.ts
+import { useHttpRpcViewer as useHttpRpcViewer2 } from "@xyo-network/react-chain-provider";
+var useViewerInWallet = /* @__PURE__ */ __name(() => {
+  const { activeNetwork } = useChainNetwork();
+  const walletViewer = useHttpRpcViewer2(activeNetwork?.url);
+  return walletViewer;
+}, "useViewerInWallet");
+
+// src/hooks/status/usePollNetworkStatus.ts
+import { delay, isUndefined as isUndefined2 } from "@xylabs/sdk-js";
+import { useEffect as useEffect2, useState as useState4 } from "react";
+var STATUS_CHECK_INTERVAL = 1e4;
+var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
+  const network = useActiveNetworkNetwork();
+  const [networkStatus, setNetworkStatus] = useState4();
+  const [networkStatusError, setNetworkStatusError] = useState4();
+  useEffect2(() => {
+    let checkNetwork = true;
+    void (async () => {
+      if (isUndefined2(network)) return;
+      while (checkNetwork) {
+        try {
+          const response = await network.status();
+          setNetworkStatus(response);
+          setNetworkStatusError(void 0);
+        } catch (error) {
+          console.error("Error fetching network status:", error);
+          setNetworkStatus(void 0);
+          setNetworkStatusError(error);
+        }
+        await delay(STATUS_CHECK_INTERVAL);
+      }
+    })();
+    return () => {
+      checkNetwork = false;
+    };
+  }, [
+    network
+  ]);
+  return [
+    networkStatus,
+    networkStatusError
+  ];
+}, "usePollNetworkStatus");
 
 // src/components/broadcast/CloseDrawerIconButton.tsx
 import { Cancel } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
-import React from "react";
+import React2 from "react";
 var CloseDrawerIconButton = /* @__PURE__ */ __name(({ anchor, onClose }) => {
-  return /* @__PURE__ */ React.createElement(IconButton, {
+  return /* @__PURE__ */ React2.createElement(IconButton, {
     onClick: /* @__PURE__ */ __name((e) => onClose?.(e, "backdropClick"), "onClick"),
     size: "small",
     sx: {
@@ -19,275 +292,278 @@ var CloseDrawerIconButton = /* @__PURE__ */ __name(({ anchor, onClose }) => {
       right: anchor === "right" ? void 0 : 8,
       left: anchor === "left" ? void 0 : 8
     }
-  }, /* @__PURE__ */ React.createElement(Cancel, {
+  }, /* @__PURE__ */ React2.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 { isDefined as isDefined5 } from "@xylabs/sdk-js";
 import { JsonViewerEx } from "@xyo-network/react-payload-raw-info";
-import React3, { useState } from "react";
+import React4, { memo, useState as useState5 } 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, {
+import { Avatar, Icon, IconButton as IconButton2, Stack, Typography, useTheme } from "@mui/material";
+import { Identicon } from "@xylabs/react-identicon";
+import { isDefined as isDefined4, isHash } from "@xylabs/sdk-js";
+import React3 from "react";
+var inferParamsType = /* @__PURE__ */ __name((params) => {
+  if (!params || !Array.isArray(params)) return {
+    type: "unknown"
+  };
+  const firstParam = params[0];
+  if (isHash(firstParam)) {
+    return {
+      type: "hash",
+      value: firstParam
+    };
+  }
+  return {
+    type: "unknown"
+  };
+}, "inferParamsType");
+var BroadcastedRpcCallDetailsSummaryStack = /* @__PURE__ */ __name(({ expanded, setExpanded, method, timestamp, hasResult, params, ...props }) => {
+  const theme = useTheme();
+  const { type, value } = inferParamsType(params);
+  return /* @__PURE__ */ React3.createElement(Stack, {
     direction: "row",
     gap: 2,
     alignItems: "center",
     justifyContent: "space-between",
     ...props
-  }, /* @__PURE__ */ React2.createElement(Stack, {
+  }, /* @__PURE__ */ React3.createElement(Stack, {
     direction: "row",
     gap: 2,
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(IconButton2, {
+  }, /* @__PURE__ */ React3.createElement(IconButton2, {
     size: "small",
     onClick: /* @__PURE__ */ __name(() => setExpanded?.(!expanded), "onClick")
-  }, /* @__PURE__ */ React2.createElement(ArrowRight, {
+  }, /* @__PURE__ */ React3.createElement(ArrowRight, {
+    sx: {
+      transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+      transition: "transform 0.2s ease-in-out"
+    },
     fontSize: "small"
-  })), /* @__PURE__ */ React2.createElement(Typography, {
+  })), /* @__PURE__ */ React3.createElement(Typography, {
     component: "span",
     variant: "body2",
     fontFamily: "monospace"
-  }, method), /* @__PURE__ */ React2.createElement(Typography, {
+  }, method), type === "hash" ? /* @__PURE__ */ React3.createElement(Avatar, {
+    sx: {
+      backgroundColor: theme.vars?.palette.text.primary,
+      width: 20,
+      height: 20
+    }
+  }, /* @__PURE__ */ React3.createElement(Identicon, {
+    value,
+    size: 14
+  })) : null, /* @__PURE__ */ React3.createElement(Typography, {
     component: "span",
     variant: "caption",
     color: "text.secondary",
     sx: {
       opacity: 0.6
     }
-  }, isDefined(timestamp) ? new Date(timestamp).toLocaleString() : "")), /* @__PURE__ */ React2.createElement(Icon, {
+  }, isDefined4(timestamp) ? new Date(timestamp).toLocaleString() : "")), /* @__PURE__ */ React3.createElement(Icon, {
     sx: {
       justifySelf: "end"
     }
-  }, hasResult ? /* @__PURE__ */ React2.createElement(CheckCircle, {
+  }, hasResult ? /* @__PURE__ */ React3.createElement(CheckCircle, {
     color: "success"
-  }) : /* @__PURE__ */ React2.createElement(Warning, {
+  }) : /* @__PURE__ */ React3.createElement(Warning, {
     color: "warning"
   })));
 }, "BroadcastedRpcCallDetailsSummaryStack");
 
 // src/components/broadcast/details/Card.tsx
-var BroadcastedRpcCallDetails = /* @__PURE__ */ __name(({ rpcRequestResponsePairs }) => {
-  const [expanded, setExpanded] = useState(false);
+var JSON_VIEWER_WIDTH = 600;
+var BroadcastedRpcCallDetailsCard = /* @__PURE__ */ memo(({ rpcRequestResponsePairs, sx, ...props }) => {
+  const [expanded, setExpanded] = useState5(false);
   if (!rpcRequestResponsePairs) return null;
   const { request, result, source } = rpcRequestResponsePairs;
-  return /* @__PURE__ */ React3.createElement(Card, {
+  return /* @__PURE__ */ React4.createElement(Card, {
     sx: {
-      p: 1
-    }
-  }, /* @__PURE__ */ React3.createElement(BroadcastedRpcCallDetailsSummaryStack, {
+      p: 1,
+      display: "flex",
+      flexDirection: "column",
+      width: JSON_VIEWER_WIDTH,
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React4.createElement(BroadcastedRpcCallDetailsSummaryStack, {
     expanded,
-    hasResult: isDefined2(result),
+    params: request.rpcCall.params,
+    hasResult: isDefined5(result),
     method: request.rpcCall.method,
     setExpanded,
     timestamp: request.timestamp
-  }), /* @__PURE__ */ React3.createElement(Collapse, {
-    in: expanded
-  }, /* @__PURE__ */ React3.createElement(Stack2, {
+  }), /* @__PURE__ */ React4.createElement(Collapse, {
+    in: expanded,
+    unmountOnExit: true
+  }, /* @__PURE__ */ React4.createElement(Stack2, {
     direction: "column",
     p: 1,
     gap: 2,
-    width: 600
-  }, /* @__PURE__ */ React3.createElement(Typography2, {
+    alignItems: "stretch"
+  }, /* @__PURE__ */ React4.createElement(Typography2, {
     variant: "body2"
-  }, "Source:", /* @__PURE__ */ React3.createElement(Typography2, {
+  }, "Source:", /* @__PURE__ */ React4.createElement(Typography2, {
     variant: "caption",
     component: "span",
     fontFamily: "monospace",
     sx: {
       ml: 1
     }
-  }, source)), /* @__PURE__ */ React3.createElement(Typography2, {
+  }, source)), /* @__PURE__ */ React4.createElement(Typography2, {
     variant: "body2"
-  }, "Request:"), /* @__PURE__ */ React3.createElement(JsonViewerEx, {
+  }, "Request:"), /* @__PURE__ */ React4.createElement(JsonViewerEx, {
     value: request,
     sx: {
       maxHeight: 300,
       overflow: "auto"
     }
-  }), isDefined2(result) ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography2, {
+  }), isDefined5(result) ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography2, {
     variant: "body2"
-  }, "Result:"), /* @__PURE__ */ React3.createElement(JsonViewerEx, {
+  }, "Result:"), /* @__PURE__ */ React4.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/usePaginatedEventPairs.ts
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState6 } from "react";
+var usePaginatedEventPairs = /* @__PURE__ */ __name((formattedEvents, numberOfVisiblePairs, onClearEvents) => {
+  const [currentPage, setCurrentPage] = useState6(0);
+  const allEventEntries = useMemo2(() => {
+    return Object.entries(formattedEvents ?? {}).toSorted(([, a], [, b]) => b.request.timestamp - a.request.timestamp);
+  }, [
+    formattedEvents
+  ]);
+  const totalPages = useMemo2(() => {
+    return Math.ceil(allEventEntries.length / numberOfVisiblePairs);
+  }, [
+    allEventEntries.length,
+    numberOfVisiblePairs
+  ]);
+  const effectiveCurrentPage = useMemo2(() => {
+    if (totalPages === 0) return 0;
+    return Math.min(currentPage, totalPages - 1);
+  }, [
+    currentPage,
+    totalPages
+  ]);
+  const visibleEvents = useMemo2(() => {
+    const startIndex = effectiveCurrentPage * numberOfVisiblePairs;
+    const endIndex = startIndex + numberOfVisiblePairs;
+    return allEventEntries.slice(startIndex, endIndex);
+  }, [
+    allEventEntries,
+    effectiveCurrentPage,
+    numberOfVisiblePairs
+  ]);
+  const handlePreviousPage = useCallback3(() => {
+    setCurrentPage((prev) => Math.max(0, prev - 1));
+  }, []);
+  const handleNextPage = useCallback3(() => {
+    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
+  }, [
+    totalPages
+  ]);
+  const handleClearEvents = useCallback3(() => {
+    setCurrentPage(0);
+    onClearEvents?.();
+  }, [
+    onClearEvents
+  ]);
+  const handlePageChange = useCallback3((_event, page) => {
+    setCurrentPage(page - 1);
+  }, []);
+  return {
+    allEventEntries,
+    visibleEvents,
+    effectiveCurrentPage: effectiveCurrentPage + 1,
+    totalPages,
+    handlePreviousPage,
+    handleNextPage,
+    handleClearEvents,
+    handlePageChange
+  };
+}, "usePaginatedEventPairs");
 
 // 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, {
+var BroadcastedRpcCallsDrawer = /* @__PURE__ */ __name(({ anchor = "right", onClearEvents, drawerTitle, events, onClose, numberOfVisibleEvents = 25, ...props }) => {
+  const { allEventEntries, visibleEvents, totalPages, effectiveCurrentPage, handleClearEvents, handlePageChange } = usePaginatedEventPairs(events, numberOfVisibleEvents, onClearEvents);
+  return /* @__PURE__ */ React5.createElement(Drawer, {
     anchor,
     onClose,
+    keepMounted: false,
     ...props
-  }, /* @__PURE__ */ React4.createElement(CloseDrawerIconButton, {
+  }, /* @__PURE__ */ React5.createElement(CloseDrawerIconButton, {
     anchor,
     onClose
-  }), /* @__PURE__ */ React4.createElement(Stack3, {
+  }), /* @__PURE__ */ React5.createElement(Stack3, {
     gap: 2,
     sx: {
       p: 3
-    }
-  }, /* @__PURE__ */ React4.createElement(Typography3, {
+    },
+    flexShrink: 0
+  }, /* @__PURE__ */ React5.createElement(Stack3, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 4
+  }, /* @__PURE__ */ React5.createElement(Typography3, {
     variant: "h6"
-  }, drawerTitle ?? "Broadcasted RPC Calls"), Object.entries(formattedEvents ?? {}).map(([id, broadcastedRpcCall]) => {
-    return /* @__PURE__ */ React4.createElement(BroadcastedRpcCallDetails, {
+  }, drawerTitle ?? "Broadcasted RPC Calls"), /* @__PURE__ */ React5.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    onClick: handleClearEvents
+  }, "Clear All")), allEventEntries.length > 0 && /* @__PURE__ */ React5.createElement(Pagination, {
+    count: totalPages,
+    page: effectiveCurrentPage,
+    onChange: handlePageChange,
+    color: "primary"
+  })), /* @__PURE__ */ React5.createElement(Stack3, {
+    direction: "column",
+    id: "events-container",
+    flexGrow: 1,
+    sx: {
+      overflowY: "hidden"
+    }
+  }, /* @__PURE__ */ React5.createElement(Box, {
+    sx: {
+      overflowY: "auto",
+      px: 3,
+      pb: 3
+    }
+  }, visibleEvents.map(([id, broadcastedRpcCall], index) => {
+    return /* @__PURE__ */ React5.createElement(BroadcastedRpcCallDetailsCard, {
       key: id,
-      rpcRequestResponsePairs: broadcastedRpcCall
+      rpcRequestResponsePairs: broadcastedRpcCall,
+      sx: {
+        mb: index < visibleEvents.length - 1 ? 2 : 0
+      }
     });
-  })));
+  }))));
 }, "BroadcastedRpcCallsDrawer");
+var BroadcastedRpcCallsDrawerWithEvents = /* @__PURE__ */ __name((props) => {
+  const { clearEvents, events } = useRpcBroadcastListener();
+  return /* @__PURE__ */ React5.createElement(BroadcastedRpcCallsDrawer, {
+    events,
+    onClearEvents: clearEvents,
+    ...props
+  });
+}, "BroadcastedRpcCallsDrawerWithEvents");
 
 // src/components/menu/Avatar.tsx
-import { Avatar } from "@mui/material";
+import { Avatar as Avatar2 } from "@mui/material";
 import React7 from "react";
 
-// src/context/network/context.ts
-import { createContextEx } from "@xylabs/react-shared";
-var ChainNetworkContext = createContextEx();
-
-// src/context/network/Provider.tsx
-import { ErrorRender } from "@xylabs/react-error";
-import { usePromise } from "@xylabs/react-promise";
-import { isDefined as isDefined4 } from "@xylabs/sdk-js";
-import { MainNetwork } from "@xyo-network/xl1-sdk";
-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?.();
-    if (activeNetwork2 && networks?.find((network) => network.id === activeNetwork2.id)) {
-      return activeNetwork2;
-    } else {
-      const defaultNetwork = networks.find((network) => network.id === MainNetwork.id) ?? networks[0];
-      await setActiveNetworkExternal?.(defaultNetwork.id);
-      return defaultNetwork;
-    }
-  }, [
-    networks
-  ]);
-  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState3(resolvedActiveNetwork);
-  if (isDefined4(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
-    setActiveNetwork(resolvedActiveNetwork);
-    setPreviousResolvedActiveNetwork(resolvedActiveNetwork);
-  }
-  const updateActiveNetwork = useCallback2((networkId) => {
-    setError(void 0);
-    const network = networks?.find((network2) => network2.id === networkId);
-    if (!network) {
-      setError(new Error(`Network with id ${networkId} not found`));
-      return;
-    }
-    setActiveNetwork(network);
-    void setActiveNetworkExternal?.(networkId);
-  }, [
-    networks,
-    setActiveNetworkExternal
-  ]);
-  const value = useMemo2(() => ({
-    activeNetwork,
-    networks,
-    provided: true,
-    updateActiveNetwork,
-    networkSettings,
-    updateNetworkSettings,
-    chainNetworkError: error ?? activeNetworkError
-  }), [
-    activeNetwork,
-    activeNetworkError,
-    error,
-    networkSettings,
-    networks,
-    updateActiveNetwork,
-    updateNetworkSettings
-  ]);
-  return /* @__PURE__ */ React5.createElement(ChainNetworkContext, {
-    value
-  }, /* @__PURE__ */ React5.createElement(ErrorRender, {
-    error: error ?? activeNetworkError,
-    scope: "ChainNetworkProvider"
-  }), children);
-}, "ChainNetworkProvider");
-
-// src/context/network/use.ts
-import { useContextEx } from "@xylabs/react-shared";
-var useChainNetwork = /* @__PURE__ */ __name((required = true) => useContextEx(ChainNetworkContext, "ChainNetwork", required), "useChainNetwork");
-
 // src/components/menu/Icon.tsx
 import React6 from "react";
 var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
@@ -308,7 +584,7 @@ var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
 
 // src/components/menu/Avatar.tsx
 var NetworkAvatar = /* @__PURE__ */ __name(({ icon, iconStyles, name, sx, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(Avatar, {
+  return /* @__PURE__ */ React7.createElement(Avatar2, {
     sx: {
       backgroundColor: "white",
       ...sx
@@ -361,11 +637,11 @@ var NetworkMenuItem = /* @__PURE__ */ __name(({ active, network, onClick, update
 }, "NetworkMenuItem");
 
 // src/components/status/Alert.tsx
-import { Alert, AlertTitle, Button as Button2 } from "@mui/material";
-import React10, { useMemo as useMemo3, useState as useState4 } from "react";
+import { Alert, AlertTitle, Button as Button3 } from "@mui/material";
+import React10, { useMemo as useMemo3, useState as useState7 } from "react";
 
 // src/components/status/Dialog.tsx
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography as Typography4 } from "@mui/material";
+import { Button as Button2, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography as Typography4 } from "@mui/material";
 import React9 from "react";
 var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
   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, {
@@ -381,7 +657,7 @@ var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
       opacity: 0.75,
       fontSize: ".8333rem"
     }
-  }, "Start:", " ", new Date(start).toLocaleString(), " ", /* @__PURE__ */ React9.createElement("br", null), "End:", " ", new Date(end).toLocaleString()))))), /* @__PURE__ */ React9.createElement(DialogActions, null, /* @__PURE__ */ React9.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(Button2, {
     onClick: /* @__PURE__ */ __name((e) => props.onClose?.(e, "backdropClick"), "onClick"),
     color: "primary",
     variant: "outlined"
@@ -390,7 +666,7 @@ var NetworkStatusDialog = /* @__PURE__ */ __name(({ updates, ...props }) => {
 
 // src/components/status/Alert.tsx
 var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState7(false);
   const handleClose = /* @__PURE__ */ __name(() => setOpen(false), "handleClose");
   const severity = useMemo3(() => {
     if (!status) return;
@@ -414,7 +690,7 @@ var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
   return /* @__PURE__ */ React10.createElement(Alert, {
     severity,
     ...props
-  }, /* @__PURE__ */ React10.createElement(AlertTitle, null, status?.description), status?.updates && status.updates.length > 0 ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Button2, {
+  }, /* @__PURE__ */ React10.createElement(AlertTitle, null, status?.description), status?.updates && status.updates.length > 0 ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Button3, {
     color: severity,
     variant: "outlined",
     size: "small",
@@ -428,151 +704,6 @@ var NetworkStatusAlert = /* @__PURE__ */ __name(({ status, ...props }) => {
 
 // src/components/status/NetworkStatus.tsx
 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 isDefined5, isNull, 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, networkSettings } = useChainNetwork();
-  networkBootstrap = isDefined5(networkOverride) ? networkOverride : activeNetwork;
-  const httpRpcViewer = useHttpRpcViewer(networkBootstrap?.url);
-  const [walletRpcViewer] = useViewerFromWallet(networkBootstrap?.id);
-  if (isUndefined(walletRpcViewer)) return;
-  if (shouldProxy(networkSettings, networkBootstrap)) {
-    if (isNull(walletRpcViewer)) {
-      console.warn(`Network ${networkBootstrap?.id} is set to proxy but no wallet viewer is available, falling back to HTTP RPC viewer`);
-      return httpRpcViewer;
-    }
-    return walletRpcViewer;
-  }
-  return httpRpcViewer;
-}, "useViewerInPage");
-
-// src/hooks/provider/useActiveNetworkCurrentBlock.ts
-var useActiveNetworkCurrentBlock = /* @__PURE__ */ __name((refresh = 1, viewer) => {
-  const currentBlock = useCurrentBlock(refresh, viewer);
-  return currentBlock;
-}, "useActiveNetworkCurrentBlock");
-var useActiveNetworkCurrentBlockInPage = /* @__PURE__ */ __name((refresh = 1) => {
-  const viewer = useViewerInPage();
-  const currentBlock = useCurrentBlock(refresh, viewer);
-  return currentBlock;
-}, "useActiveNetworkCurrentBlockInPage");
-var useActiveNetworkCurrentBlockInWallet = /* @__PURE__ */ __name((refresh = 1) => {
-  const [viewer] = useViewerFromWallet2();
-  const currentBlock = useCurrentBlock(refresh, viewer);
-  return currentBlock;
-}, "useActiveNetworkCurrentBlockInWallet");
-
-// src/hooks/provider/useActiveNetworkNetwork.ts
-import { useNetwork } from "@xyo-network/react-chain-provider";
-var useActiveNetworkNetwork = /* @__PURE__ */ __name(() => {
-  const { activeNetwork } = useChainNetwork();
-  const network = useNetwork(activeNetwork?.id);
-  return network;
-}, "useActiveNetworkNetwork");
-
-// src/hooks/provider/useActiveNetworkRunner.ts
-import { useHttpRpcRunner } from "@xyo-network/react-chain-provider";
-var useActiveNetworkRunner = /* @__PURE__ */ __name(() => {
-  const { activeNetwork } = useChainNetwork();
-  const runner = useHttpRpcRunner(activeNetwork?.url);
-  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(() => {
-  const { activeNetwork } = useChainNetwork();
-  const walletViewer = useHttpRpcViewer2(activeNetwork?.url);
-  return walletViewer;
-}, "useViewerInWallet");
-
-// src/hooks/status/usePollNetworkStatus.ts
-import { delay, isUndefined as isUndefined2 } from "@xylabs/sdk-js";
-import { useEffect as useEffect2, useState as useState6 } from "react";
-var STATUS_CHECK_INTERVAL = 1e4;
-var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
-  const network = useActiveNetworkNetwork();
-  const [networkStatus, setNetworkStatus] = useState6();
-  const [networkStatusError, setNetworkStatusError] = useState6();
-  useEffect2(() => {
-    let checkNetwork = true;
-    void (async () => {
-      if (isUndefined2(network)) return;
-      while (checkNetwork) {
-        try {
-          const response = await network.status();
-          setNetworkStatus(response);
-          setNetworkStatusError(void 0);
-        } catch (error) {
-          console.error("Error fetching network status:", error);
-          setNetworkStatus(void 0);
-          setNetworkStatusError(error);
-        }
-        await delay(STATUS_CHECK_INTERVAL);
-      }
-    })();
-    return () => {
-      checkNetwork = false;
-    };
-  }, [
-    network
-  ]);
-  return [
-    networkStatus,
-    networkStatusError
-  ];
-}, "usePollNetworkStatus");
-
-// src/components/status/NetworkStatus.tsx
 var validNetworkStates = /* @__PURE__ */ new Set([
   "online",
   "unknown"
@@ -598,6 +729,7 @@ export {
   BroadcastRpcRequestEventName,
   BroadcastRpcResponseEventName,
   BroadcastedRpcCallsDrawer,
+  BroadcastedRpcCallsDrawerWithEvents,
   ChainNetworkContext,
   ChainNetworkProvider,
   NetworkAvatar,