@xyo-network/react-chain-network 1.7.6 → 1.7.8

package/README.md

@@ -8,13 +8,516 @@
 [![npm-license-badge][]](LICENSE)
 [![socket-badge][]][socket-link]
 
-Version: 1.7.3
-
 XYO Layer One React SDK
 
 ## Documentation
 
-[TypeDoc Generated Documentation](https://gitbook.xyo.network/xyo-data-lab/xyo-reference/package-documentation/xyo-network__react-chain-network)
+## Reference
+
+**@xyo-network/react-chain-network**
+
+***
+
+## Interfaces
+
+- [NetworkAvatarProps](#interfaces/NetworkAvatarProps)
+- [NetworkIconProps](#interfaces/NetworkIconProps)
+- [NetworkMenuItemProps](#interfaces/NetworkMenuItemProps)
+- [NetworkStatusAlertProps](#interfaces/NetworkStatusAlertProps)
+- [NetworkStatusProps](#interfaces/NetworkStatusProps)
+- [ChainNetworkProviderProps](#interfaces/ChainNetworkProviderProps)
+
+## Type Aliases
+
+- [ChainNetworkState](#type-aliases/ChainNetworkState)
+
+## Variables
+
+- [NetworkAvatar](#variables/NetworkAvatar)
+- [ActiveNetworkAvatar](#variables/ActiveNetworkAvatar)
+- [NetworkIcon](#variables/NetworkIcon)
+- [NetworkMenuItem](#variables/NetworkMenuItem)
+- [NetworkStatusAlert](#variables/NetworkStatusAlert)
+- [NetworkStatus](#variables/NetworkStatus)
+- [ChainNetworkProvider](#variables/ChainNetworkProvider)
+- [ChainNetworkContext](#variables/ChainNetworkContext)
+
+## Functions
+
+- [useChainNetwork](#functions/useChainNetwork)
+- [useActiveNetworkCurrentBlock](#functions/useActiveNetworkCurrentBlock)
+- [useActiveNetworkCurrentBlockInPage](#functions/useActiveNetworkCurrentBlockInPage)
+- [useActiveNetworkCurrentBlockInWallet](#functions/useActiveNetworkCurrentBlockInWallet)
+- [useActiveNetworkNetwork](#functions/useActiveNetworkNetwork)
+- [useActiveNetworkRunner](#functions/useActiveNetworkRunner)
+- [useViewerInPage](#functions/useViewerInPage)
+- [useViewerInWallet](#functions/useViewerInWallet)
+- [usePollNetworkStatus](#functions/usePollNetworkStatus)
+
+### functions
+
+  ### <a id="useActiveNetworkCurrentBlock"></a>useActiveNetworkCurrentBlock
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useActiveNetworkCurrentBlock(refresh, viewer?): [undefined | HydratedBlock<BlockBoundWitness, Payload>, undefined | Error, undefined | UsePromiseState];
+```
+
+## Parameters
+
+### refresh
+
+`number` = `1`
+
+### viewer?
+
+`XyoViewer`
+
+## Returns
+
+\[`undefined` \| `HydratedBlock`\<`BlockBoundWitness`, `Payload`\>, `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
+
+  ### <a id="useActiveNetworkCurrentBlockInPage"></a>useActiveNetworkCurrentBlockInPage
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useActiveNetworkCurrentBlockInPage(refresh): [undefined | HydratedBlock<BlockBoundWitness, Payload>, undefined | Error, undefined | UsePromiseState];
+```
+
+## Parameters
+
+### refresh
+
+`number` = `1`
+
+## Returns
+
+\[`undefined` \| `HydratedBlock`\<`BlockBoundWitness`, `Payload`\>, `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
+
+  ### <a id="useActiveNetworkCurrentBlockInWallet"></a>useActiveNetworkCurrentBlockInWallet
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useActiveNetworkCurrentBlockInWallet(refresh): [undefined | HydratedBlock<BlockBoundWitness, Payload>, undefined | Error, undefined | UsePromiseState];
+```
+
+## Parameters
+
+### refresh
+
+`number` = `1`
+
+## Returns
+
+\[`undefined` \| `HydratedBlock`\<`BlockBoundWitness`, `Payload`\>, `undefined` \| `Error`, `undefined` \| `UsePromiseState`\]
+
+  ### <a id="useActiveNetworkNetwork"></a>useActiveNetworkNetwork
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useActiveNetworkNetwork(): undefined | MemoryXyoNetwork;
+```
+
+## Returns
+
+`undefined` \| `MemoryXyoNetwork`
+
+  ### <a id="useActiveNetworkRunner"></a>useActiveNetworkRunner
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useActiveNetworkRunner(): undefined | JsonRpcXyoRunner;
+```
+
+## Returns
+
+`undefined` \| `JsonRpcXyoRunner`
+
+  ### <a id="useChainNetwork"></a>useChainNetwork
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useChainNetwork(required): 
+  | Omit<{
+  activeNetwork?: NetworkBootstrap;
+  chainNetworkError?: Error;
+  networks?: NetworkBootstrap[];
+  updateActiveNetwork?: (networkId) => void;
+}, "provided">
+| Omit<NotProvidedContextExState<ChainNetworkState>, "provided">;
+```
+
+## Parameters
+
+### required
+
+`boolean` = `true`
+
+## Returns
+
+  \| `Omit`\<\{
+  `activeNetwork?`: `NetworkBootstrap`;
+  `chainNetworkError?`: `Error`;
+  `networks?`: `NetworkBootstrap`[];
+  `updateActiveNetwork?`: (`networkId`) => `void`;
+\}, `"provided"`\>
+  \| `Omit`\<`NotProvidedContextExState`\<[`ChainNetworkState`](#../type-aliases/ChainNetworkState)\>, `"provided"`\>
+
+  ### <a id="usePollNetworkStatus"></a>usePollNetworkStatus
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function usePollNetworkStatus(): readonly [undefined | NetworkStatus, undefined | Error];
+```
+
+## Returns
+
+readonly \[`undefined` \| `NetworkStatus`, `undefined` \| `Error`\]
+
+  ### <a id="useViewerInPage"></a>useViewerInPage
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useViewerInPage(): undefined | JsonRpcXyoViewer;
+```
+
+Get the viewer for the active network, first from the wallet or fallback to HTTP RPC
+
+## Returns
+
+`undefined` \| `JsonRpcXyoViewer`
+
+- XyoViewer for the active network
+
+  ### <a id="useViewerInWallet"></a>useViewerInWallet
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+function useViewerInWallet(): undefined | JsonRpcXyoViewer;
+```
+
+Get the viewer directly from the active network
+
+## Returns
+
+`undefined` \| `JsonRpcXyoViewer`
+
+- The viewer for the active network
+
+### interfaces
+
+  ### <a id="ChainNetworkProviderProps"></a>ChainNetworkProviderProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `PropsWithChildren`
+
+## Properties
+
+### getActiveNetwork()?
+
+```ts
+optional getActiveNetwork: () => Promise<undefined | NetworkBootstrap>;
+```
+
+### Returns
+
+`Promise`\<`undefined` \| `NetworkBootstrap`\>
+
+***
+
+### networks?
+
+```ts
+optional networks: NetworkBootstrap[];
+```
+
+***
+
+### setActiveNetwork()?
+
+```ts
+optional setActiveNetwork: (networkId) => Promise<NetworkBootstrap>;
+```
+
+### Parameters
+
+#### networkId
+
+`DefaultNetworkIds`
+
+### Returns
+
+`Promise`\<`NetworkBootstrap`\>
+
+  ### <a id="NetworkAvatarProps"></a>NetworkAvatarProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `AvatarProps`
+
+## Properties
+
+### icon?
+
+```ts
+optional icon: string;
+```
+
+***
+
+### iconStyles?
+
+```ts
+optional iconStyles: CSSProperties;
+```
+
+***
+
+### name?
+
+```ts
+optional name: string;
+```
+
+  ### <a id="NetworkIconProps"></a>NetworkIconProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `DetailedHTMLProps`\<`HtmlHTMLAttributes`\<`HTMLSpanElement`\>, `HTMLSpanElement`\>
+
+## Properties
+
+### icon?
+
+```ts
+optional icon: string;
+```
+
+  ### <a id="NetworkMenuItemProps"></a>NetworkMenuItemProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `MenuItemProps`
+
+## Properties
+
+### active?
+
+```ts
+optional active: boolean;
+```
+
+***
+
+### network?
+
+```ts
+optional network: NetworkBootstrap;
+```
+
+***
+
+### updateActiveNetwork()?
+
+```ts
+optional updateActiveNetwork: (networkId) => void;
+```
+
+### Parameters
+
+#### networkId
+
+`DefaultNetworkIds`
+
+### Returns
+
+`void`
+
+  ### <a id="NetworkStatusAlertProps"></a>NetworkStatusAlertProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `AlertProps`
+
+## Properties
+
+### status?
+
+```ts
+optional status: NetworkStatus;
+```
+
+  ### <a id="NetworkStatusProps"></a>NetworkStatusProps
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+## Extends
+
+- `PropsWithChildren`\<`AlertProps`\>
+
+### type-aliases
+
+  ### <a id="ChainNetworkState"></a>ChainNetworkState
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+type ChainNetworkState = ContextExState<{
+  activeNetwork?: NetworkBootstrap;
+  chainNetworkError?: Error;
+  networks?: NetworkBootstrap[];
+  updateActiveNetwork?: (networkId) => void;
+}>;
+```
+
+### variables
+
+  ### <a id="ActiveNetworkAvatar"></a>ActiveNetworkAvatar
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const ActiveNetworkAvatar: React.FC<AvatarProps>;
+```
+
+  ### <a id="ChainNetworkContext"></a>ChainNetworkContext
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const ChainNetworkContext: Context<
+  | object & object
+  | never
+  | FixedValues<ProvidedContextExState<{
+  activeNetwork?: NetworkBootstrap;
+  chainNetworkError?: Error;
+  networks?: NetworkBootstrap[];
+  updateActiveNetwork?: (networkId) => void;
+}>, never> & object
+  | FixedValues<NotProvidedContextExState<{
+  activeNetwork?: NetworkBootstrap;
+  chainNetworkError?: Error;
+  networks?: NetworkBootstrap[];
+  updateActiveNetwork?: (networkId) => void;
+}>, never> & object>;
+```
+
+  ### <a id="ChainNetworkProvider"></a>ChainNetworkProvider
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const ChainNetworkProvider: React.FC<ChainNetworkProviderProps>;
+```
+
+  ### <a id="NetworkAvatar"></a>NetworkAvatar
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const NetworkAvatar: React.FC<NetworkAvatarProps>;
+```
+
+  ### <a id="NetworkIcon"></a>NetworkIcon
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const NetworkIcon: React.FC<NetworkIconProps>;
+```
+
+  ### <a id="NetworkMenuItem"></a>NetworkMenuItem
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const NetworkMenuItem: React.FC<NetworkMenuItemProps>;
+```
+
+  ### <a id="NetworkStatus"></a>NetworkStatus
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const NetworkStatus: React.FC<NetworkStatusProps>;
+```
+
+  ### <a id="NetworkStatusAlert"></a>NetworkStatusAlert
+
+[**@xyo-network/react-chain-network**](#../README)
+
+***
+
+```ts
+const NetworkStatusAlert: React.FC<NetworkStatusAlertProps>;
+```
+
 
 ## Maintainers
 

package/dist/browser/components/menu/Avatar.d.ts

@@ -1,8 +1,11 @@
 import type { AvatarProps } from '@mui/material';
+import type { CSSProperties } from 'react';
 import React from 'react';
-export declare const NetworkAvatar: React.FC<AvatarProps & {
+export interface NetworkAvatarProps extends AvatarProps {
     icon?: string;
+    iconStyles?: CSSProperties;
     name?: string;
-}>;
+}
+export declare const NetworkAvatar: React.FC<NetworkAvatarProps>;
 export declare const ActiveNetworkAvatar: React.FC<AvatarProps>;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/browser/components/menu/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAclF,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAUrD,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAUrD,CAAA"}

package/dist/browser/components/menu/Icon.d.ts

@@ -1,6 +1,6 @@
-import type { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HtmlHTMLAttributes } from 'react';
 import React from 'react';
-export interface NetworkIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface NetworkIconProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     icon?: string;
 }
 export declare const NetworkIcon: React.FC<NetworkIconProps>;

package/dist/browser/components/menu/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAChH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAA"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;IAC/G,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAalD,CAAA"}

package/dist/browser/index.mjs

@@ -82,6 +82,8 @@ var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
     },
     style: {
       display: "inline-flex",
+      width: 24,
+      height: 24,
       ...style
     },
     ...props
@@ -89,17 +91,19 @@ var NetworkIcon = /* @__PURE__ */ __name(({ icon, style, ...props }) => {
 }, "NetworkIcon");
 
 // src/components/menu/Avatar.tsx
-var NetworkAvatar = /* @__PURE__ */ __name(({ icon, name, ...props }) => {
+var NetworkAvatar = /* @__PURE__ */ __name(({ icon, iconStyles, name, sx, ...props }) => {
   return /* @__PURE__ */ React3.createElement(Avatar, {
     sx: {
       backgroundColor: "white",
-      height: 30,
-      width: 30
+      ...sx
     },
     alt: name,
     ...props
   }, /* @__PURE__ */ React3.createElement(NetworkIcon, {
-    icon
+    icon,
+    style: {
+      ...iconStyles
+    }
   }));
 }, "NetworkAvatar");
 var ActiveNetworkAvatar = /* @__PURE__ */ __name((props) => {
@@ -132,7 +136,11 @@ var NetworkMenuItem = /* @__PURE__ */ __name(({ active, network, onClick, update
     ...props
   }, /* @__PURE__ */ React4.createElement(NetworkAvatar, {
     icon: network?.icon,
-    name: network?.name
+    name: network?.name,
+    sx: {
+      width: 30,
+      height: 30
+    }
   }), /* @__PURE__ */ React4.createElement(ListItemText, null, network?.name));
 }, "NetworkMenuItem");
 

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/menu/Avatar.tsx","../../src/context/network/context.ts","../../src/context/network/Provider.tsx","../../src/context/network/use.ts","../../src/components/menu/Icon.tsx","../../src/components/menu/MenuItem.tsx","../../src/components/status/Alert.tsx","../../src/components/status/Dialog.tsx","../../src/components/status/NetworkStatus.tsx","../../src/hooks/provider/useActiveNetworkCurrentBlock.ts","../../src/hooks/provider/useViewerInPage.ts","../../src/hooks/provider/useActiveNetworkNetwork.ts","../../src/hooks/provider/useActiveNetworkRunner.ts","../../src/hooks/provider/useViewerInWallet.ts","../../src/hooks/status/usePollNetworkStatus.ts"],"sourcesContent":["import type { AvatarProps } from '@mui/material'\nimport { Avatar } from '@mui/material'\nimport React from 'react'\n\nimport { useChainNetwork } from '../../context/index.ts'\nimport { NetworkIcon } from './Icon.tsx'\n\nexport const NetworkAvatar: React.FC<AvatarProps & { icon?: string; name?: string }> = ({\n  icon, name, ...props\n}) => {\n  return (\n    <Avatar\n      sx={{\n        backgroundColor: 'white', height: 30, width: 30,\n      }}\n      alt={name}\n      {...props}\n    >\n      <NetworkIcon icon={icon} />\n    </Avatar>\n  )\n}\n\nexport const ActiveNetworkAvatar: React.FC<AvatarProps> = (props) => {\n  const { activeNetwork } = useChainNetwork()\n\n  return (\n    <NetworkAvatar\n      icon={activeNetwork?.icon}\n      name={activeNetwork?.name}\n      {...props}\n    />\n  )\n}\n","import { createContextEx } from '@xylabs/react-shared'\n\nimport type { ChainNetworkState } from './state.ts'\n\nexport const ChainNetworkContext = createContextEx<ChainNetworkState>()\n","import { ErrorRender } from '@xylabs/react-error'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { NetworkBootstrap } from '@xyo-network/chain-network-model'\nimport { SequenceNetwork } from '@xyo-network/chain-network-model'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n  useCallback, useMemo, useState,\n} from 'react'\n\nimport { ChainNetworkContext } from './context.ts'\nimport type { ChainNetworkState } from './state.ts'\n\nexport interface ChainNetworkProviderProps extends PropsWithChildren {\n  getActiveNetwork?: () => Promise<NetworkBootstrap | undefined>\n  networks?: NetworkBootstrap[]\n  setActiveNetwork?: (networkId: NetworkBootstrap['id']) => Promise<NetworkBootstrap>\n}\n\nexport const ChainNetworkProvider: React.FC<ChainNetworkProviderProps> = ({\n  children, getActiveNetwork, networks, setActiveNetwork: setActiveNetworkExternal,\n}) => {\n  const [activeNetwork, setActiveNetwork] = useState<NetworkBootstrap>()\n  const [error, setError] = useState<Error>()\n\n  // Set the active network upon initialization\n  const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {\n    // ensure networks are loaded\n    if (!networks) return\n    // get last saved active network\n    const activeNetwork = await getActiveNetwork?.()\n    // ensure the active network saved is found in the list of networks\n    if (activeNetwork && networks?.find(network => network.id === activeNetwork.id)) {\n      // Set the active network if it exists\n      return activeNetwork\n    } else {\n      // Set the default network if no active network exists\n      const defaultNetwork = networks.find(network => network.id === SequenceNetwork.id) ?? networks[1]\n      await setActiveNetworkExternal?.(defaultNetwork.id)\n\n      // Set the active network in the context\n      return defaultNetwork\n    }\n  }, [networks])\n\n  useMemo(() => {\n    if (resolvedActiveNetwork) {\n      setActiveNetwork(resolvedActiveNetwork)\n    }\n  }, [resolvedActiveNetwork])\n\n  const updateActiveNetwork = useCallback((networkId: NetworkBootstrap['id']) => {\n    setError(undefined)\n    const network = networks?.find(network => network.id === networkId)\n    if (!network) {\n      setError(new Error(`Network with id ${networkId} not found`))\n      return\n    }\n    // set internally\n    setActiveNetwork(network)\n    // set externally\n    void setActiveNetworkExternal?.(networkId)\n  }, [networks])\n\n  const value: ChainNetworkState = useMemo(() => ({\n    activeNetwork,\n    networks,\n    provided: true,\n    updateActiveNetwork,\n    chainNetworkError: error ?? activeNetworkError,\n  }), [activeNetwork, networks, updateActiveNetwork])\n\n  return (\n    <ChainNetworkContext value={value}>\n      <ErrorRender error={error ?? activeNetworkError} scope=\"ChainNetworkProvider\" />\n      {children}\n    </ChainNetworkContext>\n  )\n}\n","import { useContextEx } from '@xylabs/react-shared'\n\nimport { ChainNetworkContext } from './context.ts'\n\nexport const useChainNetwork = (required = true) => useContextEx(ChainNetworkContext, 'ChainNetwork', required)\n","import type { DetailedHTMLProps, ImgHTMLAttributes } from 'react'\nimport React from 'react'\n\nexport interface NetworkIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n  icon?: string\n}\n\nexport const NetworkIcon: React.FC<NetworkIconProps> = ({\n  icon, style, ...props\n}) => {\n  return (\n    <span\n      // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml\n      dangerouslySetInnerHTML={{ __html: icon ?? '' }} // Placeholder for SVG\\\n      style={{ display: 'inline-flex', ...style }}\n      {...props}\n    />\n  )\n}\n","import type { MenuItemProps } from '@mui/material'\nimport { ListItemText } from '@mui/material'\nimport type { NetworkBootstrap } from '@xyo-network/chain-network-model'\nimport { ActiveMenuItem } from '@xyo-network/react-chain-shared'\nimport type { NetworkId } from '@xyo-network/xl1-protocol'\nimport type { MouseEvent as ReactMouseEvent } from 'react'\nimport React from 'react'\n\nimport { NetworkAvatar } from './Avatar.tsx'\n\nexport interface NetworkMenuItemProps extends MenuItemProps {\n  active?: boolean\n  network?: NetworkBootstrap\n  updateActiveNetwork?: (networkId: NetworkId) => void\n}\n\nexport const NetworkMenuItem: React.FC<NetworkMenuItemProps> = ({\n  active, network, onClick, updateActiveNetwork, ...props\n}) => {\n  const handleClick = (event: ReactMouseEvent<HTMLLIElement, MouseEvent>) => {\n    if (network === undefined) throw new Error('Network is undefined')\n    updateActiveNetwork?.(network.id)\n    onClick?.(event)\n  }\n\n  return (\n    <ActiveMenuItem\n      title={network?.name}\n      disableRipple\n      onClick={handleClick}\n      active={active}\n      sx={{ py: 1 }}\n      {...props}\n    >\n      <NetworkAvatar icon={network?.icon} name={network?.name} />\n      <ListItemText>{network?.name}</ListItemText>\n    </ActiveMenuItem>\n  )\n}\n","import type { AlertProps } from '@mui/material'\nimport {\n  Alert, AlertTitle, Button,\n} from '@mui/material'\nimport type { NetworkStatus } from '@xyo-network/xl1-protocol'\nimport React, { useMemo, useState } from 'react'\n\nimport { NetworkStatusDialog } from './Dialog.tsx'\n\nexport interface NetworkStatusAlertProps extends AlertProps {\n  status?: NetworkStatus\n}\n\nexport const NetworkStatusAlert: React.FC<NetworkStatusAlertProps> = ({ status, ...props }) => {\n  const [open, setOpen] = useState(false)\n  const handleClose = () => setOpen(false)\n\n  const severity = useMemo(() => {\n    if (!status) return\n    switch (status.state) {\n      case 'online': {\n        return 'success'\n      }\n      case 'offline': {\n        return 'error'\n      }\n      case 'degraded': {\n        return 'warning'\n      }\n      case 'unknown': {\n        return 'error'\n      }\n    }\n  }, [status])\n\n  return (\n    <Alert severity={severity} {...props}>\n      <AlertTitle>{status?.description}</AlertTitle>\n      {status?.updates && status.updates.length > 0 && (\n        <>\n          <Button color={severity} variant=\"outlined\" size=\"small\" onClick={() => setOpen(true)}>\n            Updates\n          </Button>\n          <NetworkStatusDialog open={open} onClose={handleClose} updates={status.updates} />\n        </>\n      )}\n    </Alert>\n  )\n}\n","import type { DialogProps } from '@mui/material'\nimport {\n  Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography,\n} from '@mui/material'\nimport type { NetworkStatusUpdate } from '@xyo-network/xl1-protocol'\nimport React from 'react'\n\nexport interface NetworkStatusDialogProps extends DialogProps {\n  updates: NetworkStatusUpdate[]\n}\n\nexport const NetworkStatusDialog: React.FC<NetworkStatusDialogProps> = ({ updates, ...props }) => {\n  return (\n    <Dialog {...props}>\n      <DialogTitle>Recent Status Updates</DialogTitle>\n      <DialogContent>\n        <List>\n          {updates.map(({\n            start, end, update,\n          }) => (\n            <ListItem\n              key={start + update}\n              sx={{\n                flexDirection: 'column', alignItems: 'start', pl: 0,\n              }}\n            >\n              <Typography>\n                {update}\n              </Typography>\n              <Typography gutterBottom sx={{ opacity: 0.75, fontSize: '.8333rem' }}>\n                Start:\n                {' '}\n                {new Date(start).toLocaleString()}\n                {' '}\n                <br />\n                End:\n                {' '}\n                {new Date(end).toLocaleString()}\n              </Typography>\n            </ListItem>\n          ))}\n        </List>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={e => props.onClose?.(e, 'backdropClick')} color=\"primary\" variant=\"outlined\">\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\n","import type { AlertProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { usePollNetworkStatus } from '../../hooks/index.ts'\nimport { NetworkStatusAlert } from './Alert.tsx'\n\nconst validNetworkStates = new Set(['online', 'unknown'])\n\nexport interface NetworkStatusProps extends PropsWithChildren<AlertProps> {}\n\nexport const NetworkStatus: React.FC<NetworkStatusProps> = ({ children, ...props }) => {\n  const [networkStatus] = usePollNetworkStatus()\n  const showStatus = networkStatus && !validNetworkStates.has(networkStatus.state)\n  return (\n    <>\n      {showStatus && <NetworkStatusAlert status={networkStatus} {...props} />}\n      {children}\n    </>\n  )\n}\n","import { useCurrentBlock, useViewerFromWallet } from '@xyo-network/react-chain-provider'\nimport type { XyoViewer } from '@xyo-network/xl1-protocol'\n\nimport { useViewerInPage } from './useViewerInPage.ts'\n\nexport const useActiveNetworkCurrentBlock = (refresh = 1, viewer?: XyoViewer) => {\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n\nexport const useActiveNetworkCurrentBlockInPage = (refresh = 1) => {\n  const viewer = useViewerInPage()\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n\nexport const useActiveNetworkCurrentBlockInWallet = (refresh = 1) => {\n  const viewer = useViewerFromWallet()\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n","import { useHttpRpcViewer, useViewerFromWallet } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\n/**\n * Get the viewer for the active network, first from the wallet or fallback to HTTP RPC\n * @returns - XyoViewer for the active network\n */\nexport const useViewerInPage = () => {\n  const { activeNetwork } = useChainNetwork()\n  const httpRpcViewer = useHttpRpcViewer(activeNetwork?.url)\n  const walletRpcViewer = useViewerFromWallet(activeNetwork?.id)\n  return walletRpcViewer ?? httpRpcViewer\n}\n","import { useNetwork } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\nexport const useActiveNetworkNetwork = () => {\n  const { activeNetwork } = useChainNetwork()\n  const network = useNetwork(activeNetwork?.id)\n  return network\n}\n","import { useHttpRpcRunner } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\nexport const useActiveNetworkRunner = () => {\n  const { activeNetwork } = useChainNetwork()\n  const runner = useHttpRpcRunner(activeNetwork?.url)\n\n  return runner\n}\n","import { useHttpRpcViewer } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\n/**\n * Get the viewer directly from the active network\n * @returns - The viewer for the active network\n */\nexport const useViewerInWallet = () => {\n  const { activeNetwork } = useChainNetwork()\n  const walletViewer = useHttpRpcViewer(activeNetwork?.url)\n  return walletViewer\n}\n","import { delay } from '@xylabs/delay'\nimport { isUndefined } from '@xylabs/typeof'\nimport type { NetworkStatus } from '@xyo-network/xl1-protocol'\nimport { useEffect, useState } from 'react'\n\nimport { useActiveNetworkNetwork } from '../index.ts'\n\nconst STATUS_CHECK_INTERVAL = 10_000\n\nexport const usePollNetworkStatus = () => {\n  const network = useActiveNetworkNetwork()\n  const [networkStatus, setNetworkStatus] = useState<NetworkStatus>()\n  const [networkStatusError, setNetworkStatusError] = useState<Error>()\n\n  // Check network status every 10 seconds\n  useEffect(() => {\n    let checkNetwork = true\n    void (async () => {\n      if (isUndefined(network)) return\n      while (checkNetwork) {\n        try {\n          const response = await network.status()\n          setNetworkStatus(response)\n          setNetworkStatusError(undefined)\n        } catch (error) {\n          console.error('Error fetching network status:', error)\n          setNetworkStatus(undefined)\n          setNetworkStatusError(error as Error)\n        }\n        await delay(STATUS_CHECK_INTERVAL)\n      }\n    })()\n\n    return () => {\n      // Cleanup function to stop checking network status at the current statusUrl\n      checkNetwork = false\n    }\n  }, [network])\n\n  return [networkStatus, networkStatusError] as const\n}\n"],"mappings":"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","names":["Avatar","React","createContextEx","ChainNetworkContext","ErrorRender","usePromise","SequenceNetwork","React","useCallback","useMemo","useState","ChainNetworkProvider","children","getActiveNetwork","networks","setActiveNetwork","setActiveNetworkExternal","activeNetwork","useState","error","setError","resolvedActiveNetwork","activeNetworkError","usePromise","find","network","id","defaultNetwork","SequenceNetwork","useMemo","updateActiveNetwork","useCallback","networkId","undefined","Error","value","provided","chainNetworkError","ChainNetworkContext","ErrorRender","scope","useContextEx","useChainNetwork","required","useContextEx","ChainNetworkContext","React","NetworkIcon","icon","style","props","React","span","dangerouslySetInnerHTML","__html","display","NetworkAvatar","icon","name","props","React","Avatar","sx","backgroundColor","height","width","alt","NetworkIcon","ActiveNetworkAvatar","activeNetwork","useChainNetwork","ListItemText","ActiveMenuItem","React","NetworkMenuItem","active","network","onClick","updateActiveNetwork","props","handleClick","event","undefined","Error","id","React","ActiveMenuItem","title","name","disableRipple","sx","py","NetworkAvatar","icon","ListItemText","Alert","AlertTitle","Button","React","useMemo","useState","Button","Dialog","DialogActions","DialogContent","DialogTitle","List","ListItem","Typography","React","NetworkStatusDialog","updates","props","React","Dialog","DialogTitle","DialogContent","List","map","start","end","update","ListItem","key","sx","flexDirection","alignItems","pl","Typography","gutterBottom","opacity","fontSize","Date","toLocaleString","br","DialogActions","Button","onClick","e","onClose","color","variant","NetworkStatusAlert","status","props","open","setOpen","useState","handleClose","severity","useMemo","state","React","Alert","AlertTitle","description","updates","length","Button","color","variant","size","onClick","NetworkStatusDialog","onClose","React","useCurrentBlock","useViewerFromWallet","useHttpRpcViewer","useViewerFromWallet","useViewerInPage","activeNetwork","useChainNetwork","httpRpcViewer","useHttpRpcViewer","url","walletRpcViewer","useViewerFromWallet","id","useActiveNetworkCurrentBlock","refresh","viewer","currentBlock","useCurrentBlock","useActiveNetworkCurrentBlockInPage","useViewerInPage","useActiveNetworkCurrentBlockInWallet","useViewerFromWallet","useNetwork","useActiveNetworkNetwork","activeNetwork","useChainNetwork","network","useNetwork","id","useHttpRpcRunner","useActiveNetworkRunner","activeNetwork","useChainNetwork","runner","useHttpRpcRunner","url","useHttpRpcViewer","useViewerInWallet","activeNetwork","useChainNetwork","walletViewer","useHttpRpcViewer","url","delay","isUndefined","useEffect","useState","STATUS_CHECK_INTERVAL","usePollNetworkStatus","network","useActiveNetworkNetwork","networkStatus","setNetworkStatus","useState","networkStatusError","setNetworkStatusError","useEffect","checkNetwork","isUndefined","response","status","undefined","error","console","delay","validNetworkStates","Set","NetworkStatus","children","props","networkStatus","usePollNetworkStatus","showStatus","has","state","React","NetworkStatusAlert","status"]}
+{"version":3,"sources":["../../src/components/menu/Avatar.tsx","../../src/context/network/context.ts","../../src/context/network/Provider.tsx","../../src/context/network/use.ts","../../src/components/menu/Icon.tsx","../../src/components/menu/MenuItem.tsx","../../src/components/status/Alert.tsx","../../src/components/status/Dialog.tsx","../../src/components/status/NetworkStatus.tsx","../../src/hooks/provider/useActiveNetworkCurrentBlock.ts","../../src/hooks/provider/useViewerInPage.ts","../../src/hooks/provider/useActiveNetworkNetwork.ts","../../src/hooks/provider/useActiveNetworkRunner.ts","../../src/hooks/provider/useViewerInWallet.ts","../../src/hooks/status/usePollNetworkStatus.ts"],"sourcesContent":["import type { AvatarProps } from '@mui/material'\nimport { Avatar } from '@mui/material'\nimport type { CSSProperties } from 'react'\nimport React from 'react'\n\nimport { useChainNetwork } from '../../context/index.ts'\nimport { NetworkIcon } from './Icon.tsx'\n\nexport interface NetworkAvatarProps extends AvatarProps {\n  icon?: string\n  iconStyles?: CSSProperties\n  name?: string\n}\n\nexport const NetworkAvatar: React.FC<NetworkAvatarProps> = ({\n  icon, iconStyles, name, sx, ...props\n}) => {\n  return (\n    <Avatar\n      sx={{ backgroundColor: 'white', ...sx }}\n      alt={name}\n      {...props}\n    >\n      <NetworkIcon\n        icon={icon}\n        style={{ ...iconStyles }}\n      />\n    </Avatar>\n  )\n}\n\nexport const ActiveNetworkAvatar: React.FC<AvatarProps> = (props) => {\n  const { activeNetwork } = useChainNetwork()\n\n  return (\n    <NetworkAvatar\n      icon={activeNetwork?.icon}\n      name={activeNetwork?.name}\n      {...props}\n    />\n  )\n}\n","import { createContextEx } from '@xylabs/react-shared'\n\nimport type { ChainNetworkState } from './state.ts'\n\nexport const ChainNetworkContext = createContextEx<ChainNetworkState>()\n","import { ErrorRender } from '@xylabs/react-error'\nimport { usePromise } from '@xylabs/react-promise'\nimport type { NetworkBootstrap } from '@xyo-network/chain-network-model'\nimport { SequenceNetwork } from '@xyo-network/chain-network-model'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n  useCallback, useMemo, useState,\n} from 'react'\n\nimport { ChainNetworkContext } from './context.ts'\nimport type { ChainNetworkState } from './state.ts'\n\nexport interface ChainNetworkProviderProps extends PropsWithChildren {\n  getActiveNetwork?: () => Promise<NetworkBootstrap | undefined>\n  networks?: NetworkBootstrap[]\n  setActiveNetwork?: (networkId: NetworkBootstrap['id']) => Promise<NetworkBootstrap>\n}\n\nexport const ChainNetworkProvider: React.FC<ChainNetworkProviderProps> = ({\n  children, getActiveNetwork, networks, setActiveNetwork: setActiveNetworkExternal,\n}) => {\n  const [activeNetwork, setActiveNetwork] = useState<NetworkBootstrap>()\n  const [error, setError] = useState<Error>()\n\n  // Set the active network upon initialization\n  const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {\n    // ensure networks are loaded\n    if (!networks) return\n    // get last saved active network\n    const activeNetwork = await getActiveNetwork?.()\n    // ensure the active network saved is found in the list of networks\n    if (activeNetwork && networks?.find(network => network.id === activeNetwork.id)) {\n      // Set the active network if it exists\n      return activeNetwork\n    } else {\n      // Set the default network if no active network exists\n      const defaultNetwork = networks.find(network => network.id === SequenceNetwork.id) ?? networks[1]\n      await setActiveNetworkExternal?.(defaultNetwork.id)\n\n      // Set the active network in the context\n      return defaultNetwork\n    }\n  }, [networks])\n\n  useMemo(() => {\n    if (resolvedActiveNetwork) {\n      setActiveNetwork(resolvedActiveNetwork)\n    }\n  }, [resolvedActiveNetwork])\n\n  const updateActiveNetwork = useCallback((networkId: NetworkBootstrap['id']) => {\n    setError(undefined)\n    const network = networks?.find(network => network.id === networkId)\n    if (!network) {\n      setError(new Error(`Network with id ${networkId} not found`))\n      return\n    }\n    // set internally\n    setActiveNetwork(network)\n    // set externally\n    void setActiveNetworkExternal?.(networkId)\n  }, [networks])\n\n  const value: ChainNetworkState = useMemo(() => ({\n    activeNetwork,\n    networks,\n    provided: true,\n    updateActiveNetwork,\n    chainNetworkError: error ?? activeNetworkError,\n  }), [activeNetwork, networks, updateActiveNetwork])\n\n  return (\n    <ChainNetworkContext value={value}>\n      <ErrorRender error={error ?? activeNetworkError} scope=\"ChainNetworkProvider\" />\n      {children}\n    </ChainNetworkContext>\n  )\n}\n","import { useContextEx } from '@xylabs/react-shared'\n\nimport { ChainNetworkContext } from './context.ts'\n\nexport const useChainNetwork = (required = true) => useContextEx(ChainNetworkContext, 'ChainNetwork', required)\n","import type { DetailedHTMLProps, HtmlHTMLAttributes } from 'react'\nimport React from 'react'\n\nexport interface NetworkIconProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {\n  icon?: string\n}\n\nexport const NetworkIcon: React.FC<NetworkIconProps> = ({\n  icon, style, ...props\n}) => {\n  return (\n    <span\n      // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml\n      dangerouslySetInnerHTML={{ __html: icon ?? '' }} // Placeholder for SVG\\\n      style={{\n        display: 'inline-flex', width: 24, height: 24, ...style,\n      }}\n      {...props}\n    />\n  )\n}\n","import type { MenuItemProps } from '@mui/material'\nimport { ListItemText } from '@mui/material'\nimport type { NetworkBootstrap } from '@xyo-network/chain-network-model'\nimport { ActiveMenuItem } from '@xyo-network/react-chain-shared'\nimport type { NetworkId } from '@xyo-network/xl1-protocol'\nimport type { MouseEvent as ReactMouseEvent } from 'react'\nimport React from 'react'\n\nimport { NetworkAvatar } from './Avatar.tsx'\n\nexport interface NetworkMenuItemProps extends MenuItemProps {\n  active?: boolean\n  network?: NetworkBootstrap\n  updateActiveNetwork?: (networkId: NetworkId) => void\n}\n\nexport const NetworkMenuItem: React.FC<NetworkMenuItemProps> = ({\n  active, network, onClick, updateActiveNetwork, ...props\n}) => {\n  const handleClick = (event: ReactMouseEvent<HTMLLIElement, MouseEvent>) => {\n    if (network === undefined) throw new Error('Network is undefined')\n    updateActiveNetwork?.(network.id)\n    onClick?.(event)\n  }\n\n  return (\n    <ActiveMenuItem\n      title={network?.name}\n      disableRipple\n      onClick={handleClick}\n      active={active}\n      sx={{ py: 1 }}\n      {...props}\n    >\n      <NetworkAvatar icon={network?.icon} name={network?.name} sx={{ width: 30, height: 30 }} />\n      <ListItemText>{network?.name}</ListItemText>\n    </ActiveMenuItem>\n  )\n}\n","import type { AlertProps } from '@mui/material'\nimport {\n  Alert, AlertTitle, Button,\n} from '@mui/material'\nimport type { NetworkStatus } from '@xyo-network/xl1-protocol'\nimport React, { useMemo, useState } from 'react'\n\nimport { NetworkStatusDialog } from './Dialog.tsx'\n\nexport interface NetworkStatusAlertProps extends AlertProps {\n  status?: NetworkStatus\n}\n\nexport const NetworkStatusAlert: React.FC<NetworkStatusAlertProps> = ({ status, ...props }) => {\n  const [open, setOpen] = useState(false)\n  const handleClose = () => setOpen(false)\n\n  const severity = useMemo(() => {\n    if (!status) return\n    switch (status.state) {\n      case 'online': {\n        return 'success'\n      }\n      case 'offline': {\n        return 'error'\n      }\n      case 'degraded': {\n        return 'warning'\n      }\n      case 'unknown': {\n        return 'error'\n      }\n    }\n  }, [status])\n\n  return (\n    <Alert severity={severity} {...props}>\n      <AlertTitle>{status?.description}</AlertTitle>\n      {status?.updates && status.updates.length > 0 && (\n        <>\n          <Button color={severity} variant=\"outlined\" size=\"small\" onClick={() => setOpen(true)}>\n            Updates\n          </Button>\n          <NetworkStatusDialog open={open} onClose={handleClose} updates={status.updates} />\n        </>\n      )}\n    </Alert>\n  )\n}\n","import type { DialogProps } from '@mui/material'\nimport {\n  Button, Dialog, DialogActions, DialogContent, DialogTitle, List, ListItem, Typography,\n} from '@mui/material'\nimport type { NetworkStatusUpdate } from '@xyo-network/xl1-protocol'\nimport React from 'react'\n\nexport interface NetworkStatusDialogProps extends DialogProps {\n  updates: NetworkStatusUpdate[]\n}\n\nexport const NetworkStatusDialog: React.FC<NetworkStatusDialogProps> = ({ updates, ...props }) => {\n  return (\n    <Dialog {...props}>\n      <DialogTitle>Recent Status Updates</DialogTitle>\n      <DialogContent>\n        <List>\n          {updates.map(({\n            start, end, update,\n          }) => (\n            <ListItem\n              key={start + update}\n              sx={{\n                flexDirection: 'column', alignItems: 'start', pl: 0,\n              }}\n            >\n              <Typography>\n                {update}\n              </Typography>\n              <Typography gutterBottom sx={{ opacity: 0.75, fontSize: '.8333rem' }}>\n                Start:\n                {' '}\n                {new Date(start).toLocaleString()}\n                {' '}\n                <br />\n                End:\n                {' '}\n                {new Date(end).toLocaleString()}\n              </Typography>\n            </ListItem>\n          ))}\n        </List>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={e => props.onClose?.(e, 'backdropClick')} color=\"primary\" variant=\"outlined\">\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\n","import type { AlertProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { usePollNetworkStatus } from '../../hooks/index.ts'\nimport { NetworkStatusAlert } from './Alert.tsx'\n\nconst validNetworkStates = new Set(['online', 'unknown'])\n\nexport interface NetworkStatusProps extends PropsWithChildren<AlertProps> {}\n\nexport const NetworkStatus: React.FC<NetworkStatusProps> = ({ children, ...props }) => {\n  const [networkStatus] = usePollNetworkStatus()\n  const showStatus = networkStatus && !validNetworkStates.has(networkStatus.state)\n  return (\n    <>\n      {showStatus && <NetworkStatusAlert status={networkStatus} {...props} />}\n      {children}\n    </>\n  )\n}\n","import { useCurrentBlock, useViewerFromWallet } from '@xyo-network/react-chain-provider'\nimport type { XyoViewer } from '@xyo-network/xl1-protocol'\n\nimport { useViewerInPage } from './useViewerInPage.ts'\n\nexport const useActiveNetworkCurrentBlock = (refresh = 1, viewer?: XyoViewer) => {\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n\nexport const useActiveNetworkCurrentBlockInPage = (refresh = 1) => {\n  const viewer = useViewerInPage()\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n\nexport const useActiveNetworkCurrentBlockInWallet = (refresh = 1) => {\n  const viewer = useViewerFromWallet()\n  const currentBlock = useCurrentBlock(refresh, viewer)\n\n  return currentBlock\n}\n","import { useHttpRpcViewer, useViewerFromWallet } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\n/**\n * Get the viewer for the active network, first from the wallet or fallback to HTTP RPC\n * @returns - XyoViewer for the active network\n */\nexport const useViewerInPage = () => {\n  const { activeNetwork } = useChainNetwork()\n  const httpRpcViewer = useHttpRpcViewer(activeNetwork?.url)\n  const walletRpcViewer = useViewerFromWallet(activeNetwork?.id)\n  return walletRpcViewer ?? httpRpcViewer\n}\n","import { useNetwork } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\nexport const useActiveNetworkNetwork = () => {\n  const { activeNetwork } = useChainNetwork()\n  const network = useNetwork(activeNetwork?.id)\n  return network\n}\n","import { useHttpRpcRunner } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\nexport const useActiveNetworkRunner = () => {\n  const { activeNetwork } = useChainNetwork()\n  const runner = useHttpRpcRunner(activeNetwork?.url)\n\n  return runner\n}\n","import { useHttpRpcViewer } from '@xyo-network/react-chain-provider'\n\nimport { useChainNetwork } from '../../context/index.ts'\n\n/**\n * Get the viewer directly from the active network\n * @returns - The viewer for the active network\n */\nexport const useViewerInWallet = () => {\n  const { activeNetwork } = useChainNetwork()\n  const walletViewer = useHttpRpcViewer(activeNetwork?.url)\n  return walletViewer\n}\n","import { delay } from '@xylabs/delay'\nimport { isUndefined } from '@xylabs/typeof'\nimport type { NetworkStatus } from '@xyo-network/xl1-protocol'\nimport { useEffect, useState } from 'react'\n\nimport { useActiveNetworkNetwork } from '../index.ts'\n\nconst STATUS_CHECK_INTERVAL = 10_000\n\nexport const usePollNetworkStatus = () => {\n  const network = useActiveNetworkNetwork()\n  const [networkStatus, setNetworkStatus] = useState<NetworkStatus>()\n  const [networkStatusError, setNetworkStatusError] = useState<Error>()\n\n  // Check network status every 10 seconds\n  useEffect(() => {\n    let checkNetwork = true\n    void (async () => {\n      if (isUndefined(network)) return\n      while (checkNetwork) {\n        try {\n          const response = await network.status()\n          setNetworkStatus(response)\n          setNetworkStatusError(undefined)\n        } catch (error) {\n          console.error('Error fetching network status:', error)\n          setNetworkStatus(undefined)\n          setNetworkStatusError(error as Error)\n        }\n        await delay(STATUS_CHECK_INTERVAL)\n      }\n    })()\n\n    return () => {\n      // Cleanup function to stop checking network status at the current statusUrl\n      checkNetwork = false\n    }\n  }, [network])\n\n  return [networkStatus, networkStatusError] as const\n}\n"],"mappings":"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","names":["Avatar","React","createContextEx","ChainNetworkContext","ErrorRender","usePromise","SequenceNetwork","React","useCallback","useMemo","useState","ChainNetworkProvider","children","getActiveNetwork","networks","setActiveNetwork","setActiveNetworkExternal","activeNetwork","useState","error","setError","resolvedActiveNetwork","activeNetworkError","usePromise","find","network","id","defaultNetwork","SequenceNetwork","useMemo","updateActiveNetwork","useCallback","networkId","undefined","Error","value","provided","chainNetworkError","ChainNetworkContext","ErrorRender","scope","useContextEx","useChainNetwork","required","useContextEx","ChainNetworkContext","React","NetworkIcon","icon","style","props","React","span","dangerouslySetInnerHTML","__html","display","width","height","NetworkAvatar","icon","iconStyles","name","sx","props","React","Avatar","backgroundColor","alt","NetworkIcon","style","ActiveNetworkAvatar","activeNetwork","useChainNetwork","ListItemText","ActiveMenuItem","React","NetworkMenuItem","active","network","onClick","updateActiveNetwork","props","handleClick","event","undefined","Error","id","React","ActiveMenuItem","title","name","disableRipple","sx","py","NetworkAvatar","icon","width","height","ListItemText","Alert","AlertTitle","Button","React","useMemo","useState","Button","Dialog","DialogActions","DialogContent","DialogTitle","List","ListItem","Typography","React","NetworkStatusDialog","updates","props","React","Dialog","DialogTitle","DialogContent","List","map","start","end","update","ListItem","key","sx","flexDirection","alignItems","pl","Typography","gutterBottom","opacity","fontSize","Date","toLocaleString","br","DialogActions","Button","onClick","e","onClose","color","variant","NetworkStatusAlert","status","props","open","setOpen","useState","handleClose","severity","useMemo","state","React","Alert","AlertTitle","description","updates","length","Button","color","variant","size","onClick","NetworkStatusDialog","onClose","React","useCurrentBlock","useViewerFromWallet","useHttpRpcViewer","useViewerFromWallet","useViewerInPage","activeNetwork","useChainNetwork","httpRpcViewer","useHttpRpcViewer","url","walletRpcViewer","useViewerFromWallet","id","useActiveNetworkCurrentBlock","refresh","viewer","currentBlock","useCurrentBlock","useActiveNetworkCurrentBlockInPage","useViewerInPage","useActiveNetworkCurrentBlockInWallet","useViewerFromWallet","useNetwork","useActiveNetworkNetwork","activeNetwork","useChainNetwork","network","useNetwork","id","useHttpRpcRunner","useActiveNetworkRunner","activeNetwork","useChainNetwork","runner","useHttpRpcRunner","url","useHttpRpcViewer","useViewerInWallet","activeNetwork","useChainNetwork","walletViewer","useHttpRpcViewer","url","delay","isUndefined","useEffect","useState","STATUS_CHECK_INTERVAL","usePollNetworkStatus","network","useActiveNetworkNetwork","networkStatus","setNetworkStatus","useState","networkStatusError","setNetworkStatusError","useEffect","checkNetwork","isUndefined","response","status","undefined","error","console","delay","validNetworkStates","Set","NetworkStatus","children","props","networkStatus","usePollNetworkStatus","showStatus","has","state","React","NetworkStatusAlert","status"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-network",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "XYO Layer One React SDK",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -38,14 +38,14 @@
     "start": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@xylabs/delay": "^4.13.19",
+    "@xylabs/delay": "^4.13.21",
     "@xylabs/react-error": "^6.3.13",
     "@xylabs/react-promise": "^6.3.13",
     "@xylabs/react-shared": "^6.3.13",
-    "@xylabs/typeof": "^4.13.19",
-    "@xyo-network/chain-network-model": "^1.7.6",
-    "@xyo-network/react-chain-provider": "^1.7.6",
-    "@xyo-network/react-chain-shared": "^1.7.6",
+    "@xylabs/typeof": "^4.13.21",
+    "@xyo-network/chain-network-model": "^1.7.8",
+    "@xyo-network/react-chain-provider": "^1.7.8",
+    "@xyo-network/react-chain-shared": "^1.7.8",
     "@xyo-network/xl1-protocol": "^1.7.5"
   },
   "devDependencies": {
@@ -57,7 +57,7 @@
     "@types/react": "^19.1.8",
     "@xylabs/ts-scripts-yarn3": "^7.0.0",
     "@xylabs/tsconfig-react": "^7.0.0",
-    "knip": "^5.61.3",
+    "knip": "^5.62.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.7.0",

package/src/components/menu/Avatar.tsx

@@ -1,22 +1,30 @@
 import type { AvatarProps } from '@mui/material'
 import { Avatar } from '@mui/material'
+import type { CSSProperties } from 'react'
 import React from 'react'
 
 import { useChainNetwork } from '../../context/index.ts'
 import { NetworkIcon } from './Icon.tsx'
 
-export const NetworkAvatar: React.FC<AvatarProps & { icon?: string; name?: string }> = ({
-  icon, name, ...props
+export interface NetworkAvatarProps extends AvatarProps {
+  icon?: string
+  iconStyles?: CSSProperties
+  name?: string
+}
+
+export const NetworkAvatar: React.FC<NetworkAvatarProps> = ({
+  icon, iconStyles, name, sx, ...props
 }) => {
   return (
     <Avatar
-      sx={{
-        backgroundColor: 'white', height: 30, width: 30,
-      }}
+      sx={{ backgroundColor: 'white', ...sx }}
       alt={name}
       {...props}
     >
-      <NetworkIcon icon={icon} />
+      <NetworkIcon
+        icon={icon}
+        style={{ ...iconStyles }}
+      />
     </Avatar>
   )
 }

package/src/components/menu/Icon.tsx

@@ -1,7 +1,7 @@
-import type { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
+import type { DetailedHTMLProps, HtmlHTMLAttributes } from 'react'
 import React from 'react'
 
-export interface NetworkIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface NetworkIconProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
   icon?: string
 }
 
@@ -12,7 +12,9 @@ export const NetworkIcon: React.FC<NetworkIconProps> = ({
     <span
       // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
       dangerouslySetInnerHTML={{ __html: icon ?? '' }} // Placeholder for SVG\
-      style={{ display: 'inline-flex', ...style }}
+      style={{
+        display: 'inline-flex', width: 24, height: 24, ...style,
+      }}
       {...props}
     />
   )

package/src/components/menu/MenuItem.tsx

@@ -32,7 +32,7 @@ export const NetworkMenuItem: React.FC<NetworkMenuItemProps> = ({
       sx={{ py: 1 }}
       {...props}
     >
-      <NetworkAvatar icon={network?.icon} name={network?.name} />
+      <NetworkAvatar icon={network?.icon} name={network?.name} sx={{ width: 30, height: 30 }} />
       <ListItemText>{network?.name}</ListItemText>
     </ActiveMenuItem>
   )