@xyo-network/react-chain-network 1.20.4 → 1.20.5

package/dist/browser/hooks/provider/index.d.ts

@@ -1,7 +1,3 @@
-export * from './useActiveNetworkCurrentBlock.ts';
-export * from './useActiveNetworkNetwork.ts';
-export * from './useActiveNetworkRunner.ts';
 export * from './useRpcBroadcastListener.ts';
 export * from './useViewerInPage.ts';
-export * from './useViewerInWallet.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/hooks/provider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/provider/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/provider/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA"}

package/dist/browser/hooks/provider/useViewerInPage.d.ts

@@ -1,8 +1,11 @@
-import type { NetworkBootstrap } from '@xyo-network/xl1-sdk';
 /**
- * Get the viewer for the active network, first from the wallet or fallback to HTTP RPC
- * @returns - XyoViewer for the active network
+ * Finds the appropriate viewer based on network settings and available gateways
+ *
+ * Specifically, if the network settings indicate that the network should be proxied, it will attempt to use the wallet viewer.
+ * If the wallet viewer is not available, it will fall back to the in-page viewer and log a warning. If the network should not
+ * be proxied, it will use the in-page viewer.
  */
-export declare const useViewerInPage: (networkOverride?: NetworkBootstrap) => import("@xyo-network/xl1-sdk").XyoViewer | undefined;
+export declare const useViewerInPage: () => import("@xyo-network/xl1-sdk").XyoViewer | undefined;
+/** @deprecated - use useViewerInPage instead */
 export declare const useViewerInPageV2: () => import("@xyo-network/xl1-sdk").XyoViewer | undefined;
 //# sourceMappingURL=useViewerInPage.d.ts.map

package/dist/browser/hooks/provider/useViewerInPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewerInPage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/provider/useViewerInPage.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,sBAAsB,CAAA;AAWvE;;;GAGG;AAEH,eAAO,MAAM,eAAe,GAAI,kBAAkB,gBAAgB,yDAsBjE,CAAA;AAED,eAAO,MAAM,iBAAiB,4DAuB7B,CAAA"}
+{"version":3,"file":"useViewerInPage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/provider/useViewerInPage.ts"],"names":[],"mappings":"AAeA;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,4DAuB3B,CAAA;AACD,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,4DAAkB,CAAA"}

package/dist/browser/hooks/status/usePollNetworkStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePollNetworkStatus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/status/usePollNetworkStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAOzD,eAAO,MAAM,oBAAoB,+DA+BhC,CAAA"}
+{"version":3,"file":"usePollNetworkStatus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/status/usePollNetworkStatus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAKzD,eAAO,MAAM,oBAAoB,+DA+BhC,CAAA"}

package/dist/browser/index.d.ts

@@ -2,4 +2,5 @@ export * from './components/index.ts';
 export * from './context/index.ts';
 export * from './hooks/index.ts';
 export * from './model/index.ts';
+export * from './story/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA"}

package/dist/browser/index.mjs

@@ -5,12 +5,74 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { Box, Button, Drawer, Pagination, Stack as Stack3, Typography as Typography3 } from "@mui/material";
 import React6, { useState as useState7 } from "react";
 
-// src/hooks/provider/useActiveNetworkCurrentBlock.ts
-import { useCurrentBlock, useViewerFromWallet as useViewerFromWallet2 } from "@xyo-network/react-chain-provider";
+// src/hooks/provider/useRpcBroadcastListener.ts
+import { isJsonRpcRequest, isJsonRpcResponse } from "@metamask/utils";
+import { isDefined, isString } from "@xylabs/sdk-js";
+import { useEffect, useState } 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] = useState({});
+  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 (isDefined(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/useViewerInPage.ts
-import { isDefined as isDefined2, isNull, isUndefined } from "@xylabs/sdk-js";
-import { useHttpRpcViewer, useProvidedGateway, useViewerFromWallet } from "@xyo-network/react-chain-provider";
+import { isDefined as isDefined3, isNull, isUndefined } from "@xylabs/sdk-js";
+import { useProvidedGateway } from "@xyo-network/react-chain-provider";
 
 // src/context/ActiveGatewayProvider.tsx
 import { GatewayProvider, InPageGatewaysProvider } from "@xyo-network/react-chain-provider";
@@ -23,9 +85,9 @@ 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 isDefined2 } from "@xylabs/sdk-js";
 import { MainNetwork } from "@xyo-network/xl1-sdk";
-import React, { useCallback as useCallback2, useMemo, useState as useState2 } from "react";
+import React, { useCallback as useCallback2, useMemo, useState as useState3 } from "react";
 
 // src/context/network/settings/defaultChainNetworkSettings.ts
 import { LocalNetwork } from "@xyo-network/xl1-sdk";
@@ -36,9 +98,9 @@ var defaultChainNetworkSettings = {
 };
 
 // src/context/network/settings/useChainNetworkSettings.ts
-import { useCallback, useState } from "react";
+import { useCallback, useState as useState2 } from "react";
 var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNetworkSettings) => {
-  const [networkSettings, setNetworkSettings] = useState(defaults);
+  const [networkSettings2, setNetworkSettings] = useState2(defaults);
   const updateNetworkSettings = useCallback((networkId, settings) => {
     setNetworkSettings((prevSettings) => ({
       ...prevSettings,
@@ -49,16 +111,16 @@ var useChainNetworkSettings = /* @__PURE__ */ __name((defaults = defaultChainNet
     }));
   }, []);
   return {
-    networkSettings,
+    networkSettings: networkSettings2,
     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 [activeNetwork, setActiveNetwork] = useState3();
+  const [error, setError] = useState3();
+  const { networkSettings: networkSettings2, updateNetworkSettings } = useChainNetworkSettings(networkSettingsProp);
   const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {
     if (!networks) return;
     const activeNetwork2 = await getActiveNetwork?.();
@@ -72,8 +134,8 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
   }, [
     networks
   ]);
-  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState2(resolvedActiveNetwork);
-  if (isDefined(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
+  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState3(resolvedActiveNetwork);
+  if (isDefined2(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
     setActiveNetwork(resolvedActiveNetwork);
     setPreviousResolvedActiveNetwork(resolvedActiveNetwork);
   }
@@ -95,14 +157,14 @@ var ChainNetworkProvider = /* @__PURE__ */ __name(({ children, getActiveNetwork,
     networks,
     provided: true,
     updateActiveNetwork,
-    networkSettings,
+    networkSettings: networkSettings2,
     updateNetworkSettings,
     chainNetworkError: error ?? activeNetworkError
   }), [
     activeNetwork,
     activeNetworkError,
     error,
-    networkSettings,
+    networkSettings2,
     networks,
     updateActiveNetwork,
     updateNetworkSettings
@@ -130,33 +192,17 @@ var ActiveGatewayProvider = /* @__PURE__ */ __name(({ account, children }) => {
 }, "ActiveGatewayProvider");
 
 // src/hooks/provider/useViewerInPage.ts
-var shouldProxy = /* @__PURE__ */ __name((networkSettings, networkId) => {
-  return isDefined2(networkId) && isDefined2(networkSettings[networkId]) && networkSettings[networkId].proxy;
+var shouldProxy = /* @__PURE__ */ __name((networkSettings2, networkId) => {
+  return isDefined3(networkId) && isDefined3(networkSettings2[networkId]) && networkSettings2[networkId].proxy;
 }, "shouldProxy");
-var useViewerInPage = /* @__PURE__ */ __name((networkOverride) => {
-  let networkBootstrap;
-  const { activeNetwork, networkSettings } = useChainNetwork();
-  networkBootstrap = isDefined2(networkOverride) ? networkOverride : activeNetwork;
-  const httpRpcViewer = useHttpRpcViewer(networkBootstrap);
-  const [walletRpcViewer] = useViewerFromWallet(networkBootstrap?.id);
-  if (isUndefined(walletRpcViewer)) return;
-  if (shouldProxy(networkSettings, networkBootstrap?.id)) {
-    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");
-var useViewerInPageV2 = /* @__PURE__ */ __name(() => {
-  const { networkSettings, activeNetwork } = useChainNetwork();
+var useViewerInPage = /* @__PURE__ */ __name(() => {
+  const { networkSettings: networkSettings2, activeNetwork } = useChainNetwork();
   const { gateways } = useProvidedGateway();
   const { inPageGateway, walletGateway } = gateways;
   const inPageViewer = inPageGateway?.connection?.viewer;
   const walletViewer = walletGateway?.connection?.viewer;
   if (isUndefined(walletGateway)) return;
-  if (shouldProxy(networkSettings, activeNetwork?.id)) {
+  if (shouldProxy(networkSettings2, activeNetwork?.id)) {
     if (isNull(walletGateway)) {
       console.warn(`Network ${activeNetwork?.id} is set to proxy but no wallet viewer is available, falling back to HTTP RPC viewer`);
       return inPageViewer;
@@ -164,119 +210,16 @@ var useViewerInPageV2 = /* @__PURE__ */ __name(() => {
     return walletViewer;
   }
   return inPageViewer;
-}, "useViewerInPageV2");
-
-// 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");
+}, "useViewerInPage");
+var useViewerInPageV2 = useViewerInPage;
 
 // src/hooks/status/usePollNetworkStatus.ts
 import { delay, isUndefined as isUndefined2 } from "@xylabs/sdk-js";
+import { useNetworkFromGateway } from "@xyo-network/react-chain-provider";
 import { useEffect as useEffect2, useState as useState4 } from "react";
 var STATUS_CHECK_INTERVAL = 1e4;
 var usePollNetworkStatus = /* @__PURE__ */ __name(() => {
-  const network = useActiveNetworkNetwork();
+  const network = useNetworkFromGateway();
   const [networkStatus, setNetworkStatus] = useState4();
   const [networkStatusError, setNetworkStatusError] = useState4();
   useEffect2(() => {
@@ -761,6 +704,44 @@ var defaultBroadcastConfig = {
   request: true,
   response: true
 };
+
+// src/story/NetworkGatewayDecorators.tsx
+import { LocalNetwork as LocalNetwork2, MainNetwork as MainNetwork2, SequenceNetwork } from "@xyo-network/xl1-sdk";
+import React13 from "react";
+var AvailableNetworks = [
+  MainNetwork2,
+  SequenceNetwork,
+  LocalNetwork2
+];
+var networkSettings = {
+  [LocalNetwork2.id]: {
+    proxy: true
+  }
+};
+var getActiveMainnetNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[0]), "getActiveMainnetNetwork");
+var MainnetNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
+  return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
+    networks: AvailableNetworks,
+    networkSettings,
+    getActiveNetwork: getActiveMainnetNetwork
+  }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
+}, "MainnetNetworkGatewayDecorator");
+var getActiveSequenceNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[1]), "getActiveSequenceNetwork");
+var SequenceNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
+  return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
+    networks: AvailableNetworks,
+    networkSettings,
+    getActiveNetwork: getActiveSequenceNetwork
+  }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
+}, "SequenceNetworkGatewayDecorator");
+var getActiveLocalNetwork = /* @__PURE__ */ __name(async () => await Promise.resolve(AvailableNetworks[2]), "getActiveLocalNetwork");
+var LocalNetworkGatewayDecorator = /* @__PURE__ */ __name((Story, args) => {
+  return /* @__PURE__ */ React13.createElement(ChainNetworkProvider, {
+    networks: AvailableNetworks,
+    networkSettings,
+    getActiveNetwork: getActiveLocalNetwork
+  }, /* @__PURE__ */ React13.createElement(ActiveGatewayProvider, null, /* @__PURE__ */ React13.createElement(Story, args)));
+}, "LocalNetworkGatewayDecorator");
 export {
   ActiveGatewayProvider,
   ActiveNetworkAvatar,
@@ -770,24 +751,21 @@ export {
   BroadcastedRpcCallsDrawerWithEvents,
   ChainNetworkContext,
   ChainNetworkProvider,
+  LocalNetworkGatewayDecorator,
+  MainnetNetworkGatewayDecorator,
   NetworkAvatar,
   NetworkIcon,
   NetworkMenuItem,
   NetworkStatus,
   NetworkStatusAlert,
+  SequenceNetworkGatewayDecorator,
   defaultBroadcastConfig,
   defaultChainNetworkSettings,
-  useActiveNetworkCurrentBlock,
-  useActiveNetworkCurrentBlockInPage,
-  useActiveNetworkCurrentBlockInWallet,
-  useActiveNetworkNetwork,
-  useActiveNetworkRunner,
   useChainNetwork,
   useChainNetworkSettings,
   usePollNetworkStatus,
   useRpcBroadcastListener,
   useViewerInPage,
-  useViewerInPageV2,
-  useViewerInWallet
+  useViewerInPageV2
 };
 //# sourceMappingURL=index.mjs.map