@xyo-network/react-chain-network 1.20.15 → 1.20.16

package/src/context/index.ts

@@ -1,2 +0,0 @@
-export * from './ActiveGatewayProvider.tsx'
-export * from './network/index.ts'

package/src/context/network/Provider.tsx

@@ -1,85 +0,0 @@
-import { ErrorRender } from '@xylabs/react-error'
-import { usePromise } from '@xylabs/react-promise'
-import { isDefined } from '@xylabs/sdk-js'
-import type { NetworkBootstrap } from '@xyo-network/xl1-sdk'
-import { MainNetwork } from '@xyo-network/xl1-sdk'
-import type { PropsWithChildren } from 'react'
-import React, {
-  useCallback, useMemo, useState,
-} from 'react'
-
-import { ChainNetworkContext } from './context.ts'
-import type { ChainNetworkSettings } from './settings/index.ts'
-import { defaultChainNetworkSettings, useChainNetworkSettings } from './settings/index.ts'
-import type { ChainNetworkState } from './state.ts'
-
-export interface ChainNetworkProviderProps extends PropsWithChildren {
-  getActiveNetwork?: () => Promise<NetworkBootstrap | undefined>
-  networkSettings?: ChainNetworkSettings
-  networks?: NetworkBootstrap[]
-  setActiveNetwork?: (networkId: NetworkBootstrap['id']) => Promise<NetworkBootstrap>
-}
-
-export const ChainNetworkProvider: React.FC<ChainNetworkProviderProps> = ({
-  children, getActiveNetwork, networkSettings: networkSettingsProp = defaultChainNetworkSettings, networks, setActiveNetwork: setActiveNetworkExternal,
-}) => {
-  const [activeNetwork, setActiveNetwork] = useState<NetworkBootstrap>()
-  const [error, setError] = useState<Error>()
-  const { networkSettings, updateNetworkSettings } = useChainNetworkSettings(networkSettingsProp)
-
-  // Set the active network upon initialization
-  const [resolvedActiveNetwork, activeNetworkError] = usePromise(async () => {
-    // ensure networks are loaded
-    if (!networks) return
-    // get last saved active network
-    const activeNetwork = await getActiveNetwork?.()
-    // ensure the active network saved is found in the list of networks
-    if (activeNetwork && networks?.find(network => network.id === activeNetwork.id)) {
-      // Set the active network if it exists
-      return activeNetwork
-    } else {
-      // Set the default network if no active network exists
-      const defaultNetwork = networks.find(network => network.id === MainNetwork.id) ?? networks[0]
-      await setActiveNetworkExternal?.(defaultNetwork.id)
-
-      // Set the active network in the context
-      return defaultNetwork
-    }
-  }, [networks])
-
-  const [previousResolvedActiveNetwork, setPreviousResolvedActiveNetwork] = useState(resolvedActiveNetwork)
-  if (isDefined(resolvedActiveNetwork) && resolvedActiveNetwork !== previousResolvedActiveNetwork) {
-    setActiveNetwork(resolvedActiveNetwork)
-    setPreviousResolvedActiveNetwork(resolvedActiveNetwork)
-  }
-
-  const updateActiveNetwork = useCallback((networkId: NetworkBootstrap['id']) => {
-    setError(undefined)
-    const network = networks?.find(network => network.id === networkId)
-    if (!network) {
-      setError(new Error(`Network with id ${networkId} not found`))
-      return
-    }
-    // set internally
-    setActiveNetwork(network)
-    // set externally
-    void setActiveNetworkExternal?.(networkId)
-  }, [networks, setActiveNetworkExternal])
-
-  const value: ChainNetworkState = useMemo(() => ({
-    activeNetwork,
-    networks,
-    provided: true,
-    updateActiveNetwork,
-    networkSettings,
-    updateNetworkSettings,
-    chainNetworkError: error ?? activeNetworkError,
-  }), [activeNetwork, activeNetworkError, error, networkSettings, networks, updateActiveNetwork, updateNetworkSettings])
-
-  return (
-    <ChainNetworkContext value={value}>
-      <ErrorRender error={error ?? activeNetworkError} scope="ChainNetworkProvider" />
-      {children}
-    </ChainNetworkContext>
-  )
-}

package/src/context/network/context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { ChainNetworkState } from './state.ts'
-
-export const ChainNetworkContext = createContextEx<ChainNetworkState>()

package/src/context/network/index.ts

@@ -1,5 +0,0 @@
-export * from './context.ts'
-export * from './Provider.tsx'
-export * from './settings/index.ts'
-export * from './state.ts'
-export * from './use.ts'

package/src/context/network/settings/defaultChainNetworkSettings.ts

@@ -1,5 +0,0 @@
-import { LocalNetwork } from '@xyo-network/xl1-sdk'
-
-import type { ChainNetworkSettings } from './types.ts'
-
-export const defaultChainNetworkSettings: ChainNetworkSettings = { [LocalNetwork.id]: { proxy: true } }

package/src/context/network/settings/index.ts

@@ -1,3 +0,0 @@
-export * from './defaultChainNetworkSettings.ts'
-export * from './types.ts'
-export * from './useChainNetworkSettings.ts'

package/src/context/network/settings/types.ts

@@ -1,7 +0,0 @@
-import type { GatewayName } from '@xyo-network/xl1-sdk'
-
-export type NetworkSetting = {
-  proxy: boolean
-}
-
-export type ChainNetworkSettings = Record<GatewayName, NetworkSetting>

package/src/context/network/settings/useChainNetworkSettings.ts

@@ -1,27 +0,0 @@
-import type { NetworkBootstrap } from '@xyo-network/xl1-sdk'
-import { useCallback, useState } from 'react'
-
-import { defaultChainNetworkSettings } from './defaultChainNetworkSettings.ts'
-import type { ChainNetworkSettings } from './types.ts'
-
-export const useChainNetworkSettings = (defaults = defaultChainNetworkSettings) => {
-  const [networkSettings, setNetworkSettings] = useState<ChainNetworkSettings>(defaults)
-
-  const updateNetworkSettings = useCallback((
-    networkId: NetworkBootstrap['id'],
-    settings: Partial<ChainNetworkSettings>,
-  ) => {
-    setNetworkSettings(prevSettings => ({
-      ...prevSettings,
-      [networkId]: {
-        ...prevSettings[networkId],
-        ...settings,
-      },
-    }))
-  }, [])
-
-  return {
-    networkSettings,
-    updateNetworkSettings,
-  }
-}

package/src/context/network/state.ts

@@ -1,13 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { NetworkBootstrap } from '@xyo-network/xl1-sdk'
-
-import type { ChainNetworkSettings, NetworkSetting } from './settings/index.ts'
-
-export type ChainNetworkState = ContextExState<{
-  activeNetwork?: NetworkBootstrap
-  chainNetworkError?: Error
-  networkSettings: ChainNetworkSettings
-  networks?: NetworkBootstrap[]
-  updateActiveNetwork?: (networkId: NetworkBootstrap['id']) => void
-  updateNetworkSettings?: (networkId: NetworkBootstrap['id'], settings: NetworkSetting) => void
-}>

package/src/context/network/use.ts

@@ -1,5 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { ChainNetworkContext } from './context.ts'
-
-export const useChainNetwork = (required = true) => useContextEx(ChainNetworkContext, 'ChainNetwork', required)

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './provider/index.ts'
-export * from './status/index.ts'

package/src/hooks/provider/UseViewerInPageV2.stories.tsx

@@ -1,126 +0,0 @@
-import {
-  MenuItem, Select, Stack, Typography,
-} from '@mui/material'
-import type { Decorator, StoryFn } from '@storybook/react-vite'
-import { ButtonEx } from '@xylabs/react-button'
-import { ErrorRender } from '@xylabs/react-error'
-import {
-  isDefined, isDefinedNotNull, isUndefined, isUndefinedOrNull,
-} from '@xylabs/sdk-js'
-import { IframeWalletWarningDecorator } from '@xyo-network/react-chain-shared'
-import type { HydratedBlock, NetworkId } from '@xyo-network/xl1-sdk'
-import {
-  LocalNetwork, MainNetwork, SequenceNetwork,
-} from '@xyo-network/xl1-sdk'
-import React, { useCallback, useState } from 'react'
-
-import { BroadcastedRpcCallsDrawer } from '../../components/index.ts'
-import type { ChainNetworkSettings } from '../../context/index.ts'
-import {
-  ActiveGatewayProvider, ChainNetworkProvider, useChainNetwork,
-} from '../../context/index.ts'
-import { LocalNetworkGatewayDecorator } from '../../story/index.ts'
-import { useRpcBroadcastListener } from './useRpcBroadcastListener.ts'
-import { useViewerInPage } from './useViewerInPage.ts'
-
-const AvailableNetworks = [MainNetwork, SequenceNetwork, LocalNetwork]
-const networkSettings: ChainNetworkSettings = { [LocalNetwork.id]: { proxy: true } }
-const getActiveNetwork = async () => await Promise.resolve(AvailableNetworks[2])
-
-const UseViewerInPageV2StoryProxyDecorator: Decorator = (Story, args) => {
-  return (
-    <ChainNetworkProvider networks={AvailableNetworks} networkSettings={networkSettings} getActiveNetwork={getActiveNetwork}>
-      <ActiveGatewayProvider>
-        <StubNetworkSelector />
-        <Story {...args} />
-      </ActiveGatewayProvider>
-    </ChainNetworkProvider>
-  )
-}
-
-const StubNetworkSelector: React.FC = () => {
-  const { updateActiveNetwork } = useChainNetwork()
-  return (
-    <Select size="small" defaultValue={LocalNetwork.id} onChange={event => updateActiveNetwork?.(event.target.value as NetworkId)}>
-      {AvailableNetworks.map(network => (
-        <MenuItem key={network.id} value={network.id}>{network.name}</MenuItem>
-      ))}
-    </Select>
-  )
-}
-
-const UseViewerInPageV2StoryTemplate: React.FC = () => {
-  const viewer = useViewerInPage()
-  const [error, setError] = useState<Error | null>(null)
-  const [result, setResult] = useState<HydratedBlock | null | undefined>()
-  const [loading, setLoading] = useState(false)
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const { clearEvents, events } = useRpcBroadcastListener()
-
-  const handleClick = useCallback(async () => {
-    if (isDefinedNotNull(viewer)) {
-      try {
-        setError(null)
-        setResult(undefined)
-        setLoading(true)
-        const block = await viewer.currentBlock()
-        setError(null)
-        setResult(block)
-        setLoading(false)
-      } catch (err) {
-        setError(err as Error)
-        setResult(undefined)
-        setLoading(false)
-      }
-    }
-  }, [viewer])
-
-  if (isDefined(viewer) && isUndefined(result) && isUndefinedOrNull(error) && !loading) {
-    void handleClick()
-  }
-
-  return (
-    <Stack gap={2} alignItems="center">
-      <BroadcastedRpcCallsDrawer
-        open={drawerOpen}
-        events={events}
-        onClearEvents={clearEvents}
-        onClose={() => setDrawerOpen(false)}
-      />
-      <ButtonEx disabled={Object.keys(events).length === 0} variant="contained" onClick={() => setDrawerOpen(true)}>
-        Show Broadcasted RPC Calls
-      </ButtonEx>
-      <ButtonEx loading={loading} variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
-        Get Current Block
-      </ButtonEx>
-      {isDefined(result)
-        ? (
-            <Typography variant="h4">
-              Block:
-              {result?.[0].block}
-            </Typography>
-          )
-        : null}
-      <pre>
-        {JSON.stringify(result, null, 2)}
-      </pre>
-      <ErrorRender error={error} />
-    </Stack>
-  )
-}
-
-export default {
-  title: 'provider/useViewerInPage',
-  component: UseViewerInPageV2StoryTemplate,
-}
-
-const Template: StoryFn<typeof UseViewerInPageV2StoryTemplate> = args => <UseViewerInPageV2StoryTemplate {...args} />
-
-const Default = Template.bind({})
-Default.decorators = [LocalNetworkGatewayDecorator]
-Default.args = {}
-const Proxy = Template.bind({})
-Proxy.decorators = [IframeWalletWarningDecorator, UseViewerInPageV2StoryProxyDecorator]
-Proxy.args = {}
-
-export { Default, Proxy }

package/src/hooks/provider/index.ts

@@ -1,2 +0,0 @@
-export * from './useRpcBroadcastListener.ts'
-export * from './useViewerInPage.ts'

package/src/hooks/provider/useRpcBroadcastListener.ts

@@ -1,70 +0,0 @@
-import type { JsonRpcRequest, JsonRpcResponse } from '@metamask/utils'
-import { isJsonRpcRequest, isJsonRpcResponse } from '@metamask/utils'
-import { isDefined, isString } from '@xylabs/sdk-js'
-import { useEffect, useState } from 'react'
-
-import type {
-  BroadcastedRpcCall, RpcRequestResponsePairs, RpcRequestResponsePairsById,
-} from '../../model/index.ts'
-
-const parseRpcCall = (acc: RpcRequestResponsePairsById, event: BroadcastedRpcCall) => {
-  if (isJsonRpcResponse(event.rpcCall)) {
-    const castedEvent = event as BroadcastedRpcCall<JsonRpcResponse>
-    acc[castedEvent.rpcCall.id as string].result = castedEvent
-  } else if (isJsonRpcRequest(event.rpcCall)) {
-    const castedEvent = event as BroadcastedRpcCall<JsonRpcRequest>
-    acc[castedEvent.rpcCall.id as string].request = castedEvent
-  } else {
-    console.error('Unknown RPC call type', event)
-  }
-  acc[event.rpcCall.id as string].source = event.source
-
-  return acc
-}
-
-export const useRpcBroadcastListener = () => {
-  const [events, setEvents] = useState<RpcRequestResponsePairsById>({})
-  const clearEvents = () => setEvents({})
-
-  useEffect(() => {
-    const listener = (e: Event) => {
-      if ('detail' in e) {
-        const { detail } = e ?? {}
-        if (isString(detail)) {
-          try {
-            const parsedDetail = JSON.parse(detail)
-            const { data: rpcCall, source } = parsedDetail
-            // TODO - make zod type for parsing details
-            const broadcastedRpcCall: BroadcastedRpcCall = {
-              rpcCall,
-              source,
-              timestamp: Date.now(),
-            }
-            setEvents((prev) => {
-              const { id } = broadcastedRpcCall.rpcCall
-              const newState = { ...prev }
-              if (isDefined(newState[id as string])) {
-                parseRpcCall(newState, broadcastedRpcCall)
-              } else {
-                newState[id as string] = {} as RpcRequestResponsePairs
-                parseRpcCall(newState, broadcastedRpcCall)
-              }
-              return newState
-            })
-          } catch (err) {
-            console.error(err)
-          }
-        }
-      }
-    }
-    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 }
-}

package/src/hooks/provider/useViewerInPage.ts

@@ -1,49 +0,0 @@
-import {
-  isDefined, isNull, isUndefined,
-} from '@xylabs/sdk-js'
-import { useProvidedGateway } from '@xyo-network/react-chain-provider'
-import type { NetworkId } from '@xyo-network/xl1-sdk'
-
-import type { ChainNetworkSettings } from '../../context/index.ts'
-import { useChainNetwork } from '../../context/index.ts'
-
-const shouldProxy = (networkSettings: ChainNetworkSettings, networkId: NetworkId | undefined) => {
-  return isDefined(networkId)
-    && isDefined(networkSettings[networkId])
-    && networkSettings[networkId].proxy
-}
-
-/**
- * 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 const useViewerInPage = () => {
-  const { networkSettings, activeNetwork } = useChainNetwork()
-  const { gateways } = useProvidedGateway()
-
-  const { inPageGateway, walletGateway } = gateways
-
-  const inPageViewer = inPageGateway?.connection?.viewer
-  const walletViewer = walletGateway?.connection?.viewer
-
-  // If the wallet viewer is undefined, don't return it yet, walletViewer is still checking
-  if (isUndefined(walletGateway)) return
-
-  if (shouldProxy(networkSettings, activeNetwork?.id)) {
-    if (isNull(walletGateway)) {
-      // eslint-disable-next-line react-x/purity
-      console.warn(`Network ${activeNetwork?.id} is set to proxy but no wallet viewer is available, falling back to HTTP RPC viewer`)
-      return inPageViewer
-    }
-    // If the network setting is to proxy and the wallet viewer is available,
-    // try to use the wallet viewer
-    return walletViewer
-  }
-
-  return inPageViewer
-}
-/** @deprecated - use useViewerInPage instead */
-export const useViewerInPageV2 = useViewerInPage

package/src/hooks/status/index.ts

@@ -1 +0,0 @@
-export * from './usePollNetworkStatus.ts'

package/src/hooks/status/usePollNetworkStatus.ts

@@ -1,39 +0,0 @@
-import { delay, isUndefined } from '@xylabs/sdk-js'
-import { useNetworkFromGateway } from '@xyo-network/react-chain-provider'
-import type { NetworkStatus } from '@xyo-network/xl1-sdk'
-import { useEffect, useState } from 'react'
-
-const STATUS_CHECK_INTERVAL = 10_000
-
-export const usePollNetworkStatus = () => {
-  const network = useNetworkFromGateway()
-  const [networkStatus, setNetworkStatus] = useState<NetworkStatus>()
-  const [networkStatusError, setNetworkStatusError] = useState<Error>()
-
-  // Check network status every 10 seconds
-  useEffect(() => {
-    let checkNetwork = true
-    void (async () => {
-      if (isUndefined(network)) return
-      while (checkNetwork) {
-        try {
-          const response = await network.status()
-          setNetworkStatus(response)
-          setNetworkStatusError(undefined)
-        } catch (error) {
-          console.info('Error fetching network status:', error)
-          setNetworkStatus(undefined)
-          setNetworkStatusError(error as Error)
-        }
-        await delay(STATUS_CHECK_INTERVAL)
-      }
-    })()
-
-    return () => {
-      // Cleanup function to stop checking network status at the current statusUrl
-      checkNetwork = false
-    }
-  }, [network])
-
-  return [networkStatus, networkStatusError] as const
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-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'

package/src/model/BroadcastRpc.ts

@@ -1,29 +0,0 @@
-import type { JsonRpcRequest } from '@metamask/json-rpc-engine/v2'
-import type { JsonRpcResponse } from '@metamask/utils'
-
-// Configuration options for broadcasting RPC calls
-export type BroadcastRpcConfig = { request: boolean; response: boolean }
-
-// Event Names
-export const BroadcastRpcRequestEventName = 'xyo:broadcast-rpc-request' as const
-export const BroadcastRpcResponseEventName = 'xyo:broadcast-rpc-response' as const
-export type BroadcastRpcEventNames = typeof BroadcastRpcRequestEventName | typeof BroadcastRpcResponseEventName
-
-// default options are to broadcast all events
-export const defaultBroadcastConfig: BroadcastRpcConfig = { request: true, response: true }
-
-export interface BroadcastedRpcCall<TRpcCall extends JsonRpcRequest | JsonRpcResponse = JsonRpcRequest | JsonRpcResponse> {
-  rpcCall: TRpcCall
-  source: string
-  timestamp: number
-}
-
-export type RpcRequestResponsePairs = {
-  request: BroadcastedRpcCall<JsonRpcRequest>
-  result?: BroadcastedRpcCall<JsonRpcResponse>
-  source?: string
-}
-
-export type RpcRequestResponsePairsById = {
-  [id: string]: RpcRequestResponsePairs
-}

package/src/model/index.ts

@@ -1 +0,0 @@
-export * from './BroadcastRpc.ts'

package/src/story/NetworkGatewayDecorators.tsx

@@ -1,44 +0,0 @@
-import type { Decorator } from '@storybook/react-vite'
-import {
-  LocalNetwork, MainNetwork, SequenceNetwork,
-} from '@xyo-network/xl1-sdk'
-import React from 'react'
-
-import type { ChainNetworkSettings } from '../context/index.ts'
-import { ActiveGatewayProvider, ChainNetworkProvider } from '../context/index.ts'
-
-const AvailableNetworks = [MainNetwork, SequenceNetwork, LocalNetwork]
-const networkSettings: ChainNetworkSettings = { [LocalNetwork.id]: { proxy: true } }
-
-const getActiveMainnetNetwork = async () => await Promise.resolve(AvailableNetworks[0])
-export const MainnetNetworkGatewayDecorator: Decorator = (Story, args) => {
-  return (
-    <ChainNetworkProvider networks={AvailableNetworks} networkSettings={networkSettings} getActiveNetwork={getActiveMainnetNetwork}>
-      <ActiveGatewayProvider>
-        <Story {...args} />
-      </ActiveGatewayProvider>
-    </ChainNetworkProvider>
-  )
-}
-
-const getActiveSequenceNetwork = async () => await Promise.resolve(AvailableNetworks[1])
-export const SequenceNetworkGatewayDecorator: Decorator = (Story, args) => {
-  return (
-    <ChainNetworkProvider networks={AvailableNetworks} networkSettings={networkSettings} getActiveNetwork={getActiveSequenceNetwork}>
-      <ActiveGatewayProvider>
-        <Story {...args} />
-      </ActiveGatewayProvider>
-    </ChainNetworkProvider>
-  )
-}
-
-const getActiveLocalNetwork = async () => await Promise.resolve(AvailableNetworks[2])
-export const LocalNetworkGatewayDecorator: Decorator = (Story, args) => {
-  return (
-    <ChainNetworkProvider networks={AvailableNetworks} networkSettings={networkSettings} getActiveNetwork={getActiveLocalNetwork}>
-      <ActiveGatewayProvider>
-        <Story {...args} />
-      </ActiveGatewayProvider>
-    </ChainNetworkProvider>
-  )
-}

package/src/story/index.ts

@@ -1 +0,0 @@
-export * from './NetworkGatewayDecorators.tsx'

package/src/types/global.d.ts

@@ -1,9 +0,0 @@
-import type { XyoGlobal } from '@xyo-network/react-chain-model'
-
-export declare global {
-  interface Window {
-    xyo: XyoGlobal
-  }
-
-  var xyo: XyoGlobal
-}

package/src/types/images.d.ts

@@ -1,20 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.gif'
-declare module '*.webp'
-
-declare module '*.svg?react' {
-  import type * as React from 'react'
-  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
-  export default ReactComponent
-}
-
-declare module '*.svg' {
-  const src: string
-  export default src
-}
-
-declare module '*.svg?raw' {
-  const content: string
-  export default content
-}