@xyo-network/react-network 2.26.36 → 2.26.39

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/3b6a925/packages/network/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/413a933/packages/network/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -18,7 +18,7 @@
     "@xylabs/react-shared": "^2.14.10",
     "@xylabs/sdk-js": "^2.6.2",
     "@xyo-network/network": "^2.22.15",
-    "@xyo-network/react-shared": "^2.26.36",
+    "@xyo-network/react-shared": "^2.26.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
@@ -81,5 +81,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.36"
+  "version": "2.26.39"
 }

package/src/components/SelectEx/NetworkSelectEx.stories.tsx

@@ -0,0 +1,100 @@
+import { Card, CardContent } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { useEffect, useState } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { NetworkMemoryProvider, NetworkRouteProvider, useNetwork } from '../../contexts'
+import { NetworkSelectEx } from './NetworkSelectEx'
+
+const StorybookEntry = {
+  argTypes: {
+    responsive: {
+      defaultValue: false,
+    },
+  },
+  component: NetworkSelectEx,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'network/NetworkSelectEx',
+} as ComponentMeta<typeof NetworkSelectEx>
+
+const NetworkConfigOutput = () => {
+  const { network } = useNetwork()
+  return (
+    <FlexCol my={2}>
+      <Card>
+        <CardContent>
+          <pre>{JSON.stringify(network, null, 2)}</pre>
+        </CardContent>
+      </Card>
+    </FlexCol>
+  )
+}
+
+const Template: ComponentStory<typeof NetworkSelectEx> = (args) => {
+  return <NetworkSelectEx {...args}></NetworkSelectEx>
+}
+
+const TemplateWithMemoryProvider: ComponentStory<typeof NetworkSelectEx> = (props) => {
+  return (
+    <NetworkMemoryProvider>
+      <NetworkSelectEx {...props}></NetworkSelectEx>
+      <NetworkConfigOutput />
+    </NetworkMemoryProvider>
+  )
+}
+
+const TemplateWithRouteProvider: ComponentStory<typeof NetworkSelectEx> = (props) => {
+  const url = new URL(window.location.toString())
+  url.searchParams.set('network', 'main')
+  history.pushState({}, '', url)
+  return (
+    <BrowserRouter>
+      <NetworkRouteProvider>
+        <TemplateWithRouteProviderInner {...props} />
+      </NetworkRouteProvider>
+    </BrowserRouter>
+  )
+}
+
+const TemplateWithRouteProviderInner: ComponentStory<typeof NetworkSelectEx> = (props) => {
+  const { network } = useNetwork()
+  const [uris, setUris] = useState<(string | undefined)[]>([])
+
+  useEffect(() => {
+    setUris((previous) => [...previous, network?.nodes?.find((node) => node.type === 'archivist')?.uri])
+  }, [network?.nodes])
+
+  useEffect(() => {
+    if (uris.length > 1) {
+      throw Error('Error: Route Provider sent multiple network uris but should only send one.')
+    }
+  })
+
+  return (
+    <>
+      <NetworkSelectEx {...props}></NetworkSelectEx>
+      {uris.map((uri) => (
+        <p key={uri}>{uri}</p>
+      ))}
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithMemoryProvider = TemplateWithMemoryProvider.bind({})
+WithMemoryProvider.args = {}
+
+const WithRouteProvider = TemplateWithRouteProvider.bind({})
+WithRouteProvider.args = {}
+
+export { Default, WithMemoryProvider, WithRouteProvider }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SelectEx/NetworkSelectEx.tsx

@@ -0,0 +1,38 @@
+import { MenuItem } from '@mui/material'
+import { SelectEx, SelectExProps } from '@xylabs/react-common'
+import { useBreakpoint } from '@xylabs/react-shared'
+import { assertEx } from '@xylabs/sdk-js'
+
+import { useNetwork } from '../../contexts'
+import { findNetworkConfig } from '../../lib'
+
+export interface NetworkSelectExProps extends SelectExProps<string> {
+  responsive?: boolean
+}
+
+export const NetworkSelectEx: React.FC<NetworkSelectExProps> = ({ onChange, responsive = true, ...props }) => {
+  const { network, setNetwork, networks } = useNetwork(false)
+  const sm = useBreakpoint() === 'sm'
+  return (
+    <SelectEx
+      variant="outlined"
+      size="small"
+      value={network?.slug ?? ''}
+      onChange={(event, child) => {
+        if (event.target.value !== network?.slug) {
+          onChange?.(event, child)
+          setNetwork?.(assertEx(findNetworkConfig(event.target.value, networks)))
+        }
+      }}
+      {...props}
+    >
+      {networks?.map((network) => {
+        return (
+          <MenuItem key={network.slug} value={network.slug}>
+            {responsive && sm ? network.name?.[0].toUpperCase() : network.name}
+          </MenuItem>
+        )
+      })}
+    </SelectEx>
+  )
+}

package/src/components/SelectEx/index.ts

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

package/src/components/index.ts

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

package/src/contexts/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { NetworkContextState } from './State'
+
+export const NetworkContext = createContextEx<NetworkContextState>()

package/src/contexts/Provider/Memory.tsx

@@ -0,0 +1,15 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { defaultNetworkConfigs } from '../../lib'
+import { NetworkContext } from '../Context'
+import { NetworkProviderProps } from './Props'
+
+export const NetworkMemoryProvider: React.FC<WithChildren<NetworkProviderProps>> = ({ defaultNetwork, ...props }) => {
+  const [network, setNetwork] = useState(defaultNetwork ?? defaultNetworkConfigs[0])
+
+  return <NetworkContext.Provider value={{ network, networks: defaultNetworkConfigs, provided: true, setNetwork }} {...props} />
+}
+
+/** @deprecated use NetworkMemoryProvider instead */
+export const NetworkProvider = NetworkMemoryProvider

package/src/contexts/Provider/Props.tsx

@@ -0,0 +1,5 @@
+import { XyoNetworkPayload } from '@xyo-network/network'
+
+export interface NetworkProviderProps {
+  defaultNetwork?: XyoNetworkPayload
+}

package/src/contexts/Provider/Route.tsx

@@ -0,0 +1,71 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { XyoNetworkPayload } from '@xyo-network/network'
+import { useCallback, useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import { defaultNetworkConfigs, findNetworkConfig } from '../../lib'
+import { NetworkContext } from '../Context'
+import { useNetwork } from '../use'
+import { NetworkMemoryProvider } from './Memory'
+import { NetworkProviderProps } from './Props'
+
+const NetworkRouteProviderInner: React.FC<WithChildren> = ({ children }) => {
+  const [initialized, setInitialized] = useState(false)
+  const { network, setNetwork } = useNetwork()
+
+  const [params, setParams] = useSearchParams()
+
+  const slug = params.get('network')
+  const routeNetwork = slug ? findNetworkConfig(slug) : undefined
+
+  //update the network stored in the route
+  const setNetworkParam = useCallback(
+    (network?: XyoNetworkPayload) => {
+      if (network) {
+        params.set('network', network.slug)
+        setParams(params, { replace: true })
+        setNetwork?.(network)
+      } else {
+        params.delete('network')
+      }
+    },
+    [params, setParams, setNetwork]
+  )
+
+  //if the network is actively changed, update both memory and route
+  const setNetworkLocal = useCallback(
+    (network: XyoNetworkPayload) => {
+      setNetworkParam(network)
+      setNetwork?.(network)
+    },
+    [setNetworkParam, setNetwork]
+  )
+
+  //sync memory and route storage of network
+  useEffect(() => {
+    if (routeNetwork !== network) {
+      if (routeNetwork === undefined && network !== undefined) {
+        //if the route does not have a network selected, use what is in the memory context
+        setNetworkParam(network)
+      } else if (routeNetwork) {
+        //if the route has a selection and it is different from memory, update memory
+        setNetwork?.(routeNetwork)
+      }
+    }
+    setInitialized(true)
+  }, [routeNetwork, network, setNetworkParam, setNetwork])
+
+  return (
+    <NetworkContext.Provider value={{ network, networks: defaultNetworkConfigs, provided: true, setNetwork: setNetworkLocal }}>
+      {initialized ? children : null}
+    </NetworkContext.Provider>
+  )
+}
+
+export const NetworkRouteProvider: React.FC<WithChildren<NetworkProviderProps>> = ({ defaultNetwork, ...props }) => {
+  return (
+    <NetworkMemoryProvider defaultNetwork={defaultNetwork}>
+      <NetworkRouteProviderInner {...props} />
+    </NetworkMemoryProvider>
+  )
+}

package/src/contexts/Provider/index.ts

@@ -0,0 +1,3 @@
+export * from './Memory'
+export * from './Props'
+export * from './Route'

package/src/contexts/State.ts

@@ -0,0 +1,12 @@
+import { XyoNetworkPayload } from '@xyo-network/network'
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch } from 'react'
+
+export interface NetworkContextState extends ContextExState {
+  /** @field The currently selected XYO Network */
+  network?: XyoNetworkPayload
+  /** @field The list of known available networks */
+  networks?: XyoNetworkPayload[]
+  /** @field Function to set the selected Network */
+  setNetwork?: Dispatch<XyoNetworkPayload>
+}

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/use.ts

@@ -0,0 +1,8 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { NetworkContext } from './Context'
+import { NetworkContextState } from './State'
+
+export const useNetwork = (required = false) => {
+  return useContextEx<NetworkContextState>(NetworkContext, 'Network', required)
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './contexts'
+export * from './lib'

package/src/lib/Config/default.ts

@@ -0,0 +1,28 @@
+import { XyoNetworkPayload, XyoNetworkPayloadSchema } from '@xyo-network/network'
+
+import { findArchivistPreset } from '../archivistPresets'
+import { findDivinerPreset } from '../divinerPresets'
+
+export const defaultNetworkConfigs: XyoNetworkPayload[] = [
+  {
+    name: 'Kerplunk',
+    nodes: [findArchivistPreset('kerplunk-archivist-xyo-network'), findDivinerPreset('beta-location-diviner-xyo-network')],
+    schema: XyoNetworkPayloadSchema,
+    slug: 'kerplunk',
+  },
+  {
+    name: 'Main',
+    nodes: [findArchivistPreset('main-archivist-xyo-network'), findDivinerPreset('location-diviner-xyo-network')],
+    schema: XyoNetworkPayloadSchema,
+    slug: 'main',
+  },
+  {
+    name: 'Local',
+    nodes: [findArchivistPreset('local-archivist-xyo-network'), findDivinerPreset('local-location-diviner-xyo-network')],
+    schema: XyoNetworkPayloadSchema,
+    slug: 'local',
+  },
+]
+
+/** @deprecated use defaultNetworkConfigs instead */
+export const networkPresets = defaultNetworkConfigs

package/src/lib/Config/find.ts

@@ -0,0 +1,10 @@
+import { defaultNetworkConfigs } from './default'
+
+export const findNetworkConfig = (slug: string, configs = defaultNetworkConfigs) => {
+  return configs.find((item) => {
+    return item.slug === slug
+  })
+}
+
+/** @deprecated use findNetworkConfig instead */
+export const findNetworkPreset = findNetworkConfig

package/src/lib/Config/index.ts

@@ -0,0 +1,2 @@
+export * from './default'
+export * from './find'

package/src/lib/ExplorerMapHashes.ts

@@ -0,0 +1,16 @@
+export const ExplorerMapHashes = {
+  animatedAnswerHashes: [
+    '79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5',
+    '531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898',
+    'c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb',
+    '29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e',
+    'cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c',
+    '1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d',
+    '1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9',
+    '973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9',
+    '463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95',
+    '15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555',
+    '32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e',
+  ],
+  staticAnswerHash: 'c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5',
+}

package/src/lib/archivistPresets.ts

@@ -0,0 +1,50 @@
+import { XyoNetworkNodePayload, XyoNetworkNodePayloadSchema } from '@xyo-network/network'
+
+import { ExplorerMapHashes } from './ExplorerMapHashes'
+
+export interface XyoArchivistPreset extends XyoNetworkNodePayload {
+  explorerMapHashes?: {
+    staticAnswerHash: string
+    animatedAnswerHashes: string[]
+  }
+}
+
+export const findArchivistPreset = (slug: string) => {
+  return (
+    archivistPresets.find((item) => {
+      return item.slug === slug
+    }) ?? archivistPresets[0]
+  )
+}
+
+export const archivistPresets: XyoArchivistPreset[] = [
+  {
+    docs: 'https://beta.archivist.xyo.network/api',
+    explorerMapHashes: ExplorerMapHashes,
+    name: 'XYO Shared Archivist (kerplunk)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'kerplunk-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'https://beta.api.archivist.xyo.network',
+    web: 'https://beta.archivist.xyo.network',
+  },
+  {
+    docs: 'https://archivist.xyo.network/api',
+    explorerMapHashes: ExplorerMapHashes,
+    name: 'XYO Shared Archivist (main)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'main-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'https://api.archivist.xyo.network',
+    web: 'https://archivist.xyo.network',
+  },
+  {
+    docs: 'http://localhost:8080/api',
+    name: 'XYO Shared Archivist (local)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'local-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'http://localhost:8080',
+    web: 'http://localhost:8081',
+  },
+]

package/src/lib/divinerPresets.ts

@@ -0,0 +1,36 @@
+import { XyoNetworkNodePayload, XyoNetworkNodePayloadSchema } from '@xyo-network/network'
+
+export const findDivinerPreset = (slug: string) => {
+  return (
+    divinerPresets.find((item) => {
+      return item.slug === slug
+    }) ?? divinerPresets[0]
+  )
+}
+
+export const divinerPresets: XyoNetworkNodePayload[] = [
+  {
+    name: 'XYO Location (beta)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'beta-location-diviner-xyo-network',
+    type: 'diviner',
+    uri: 'https://beta.api.location.diviner.xyo.network',
+    web: 'https://beta.explore.xyo.network',
+  },
+  {
+    name: 'XYO Location',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'location-diviner-xyo-network',
+    type: 'diviner',
+    uri: 'https://api.location.diviner.xyo.network',
+    web: 'https://explore.xyo.network',
+  },
+  {
+    name: 'XYO Location (local)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'local-location-diviner-xyo-network',
+    type: 'diviner',
+    uri: 'http://localhost:8082',
+    web: 'http://localhost:3000',
+  },
+]

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './archivistPresets'
+export * from './Config'
+export * from './divinerPresets'