@xyo-network/react-node 2.41.12 → 2.41.14

package/src/components/NodeQueryDiviner.tsx

@@ -0,0 +1,28 @@
+import { Button, TextField } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoPayload, XyoPayloadBuilder } from '@xyo-network/payload'
+import { useState } from 'react'
+
+import { useNodeQueryDiviner } from '../contexts'
+
+export const NodeQueryDiviner: React.FC = () => {
+  const [query, setQuery] = useState<XyoPayload>()
+  const [address, setAddress] = useState('')
+  const [result, error] = useNodeQueryDiviner('AddressHistoryDiviner', query)
+
+  const onClick = () => {
+    const query = new XyoPayloadBuilder({ schema: 'network.xyo.diviner.address.query' }).fields({ address }).build()
+    setQuery(query)
+  }
+
+  return (
+    <FlexCol rowGap={2}>
+      <TextField placeholder="Address on localhost" onChange={(event) => setAddress(event.target.value)} />
+      <Button disabled={!address} variant={'contained'} onClick={onClick}>
+        divine
+      </Button>
+      <code style={{ overflowWrap: 'anywhere' }}>{JSON.stringify(result, null, 2)}</code>
+      <code style={{ overflowWrap: 'anywhere' }}>{JSON.stringify(error, null, 2)}</code>
+    </FlexCol>
+  )
+}

package/src/contexts/Provider.tsx

@@ -1,19 +1,19 @@
 import { WithChildren } from '@xylabs/react-shared'
-import { AbstractNode } from '@xyo-network/node'
+import { NodeModule } from '@xyo-network/node'
 import { useEffect, useState } from 'react'
 
 import { NodeContext } from './Context'
 
 export interface NodeProviderProps {
   required?: boolean
-  node?: AbstractNode
+  node?: NodeModule
 }
 
 /** @deprecated use NodeProviderProps instead */
 export type XyoNodeProviderProps = NodeProviderProps
 
 export const NodeProvider: React.FC<WithChildren<NodeProviderProps>> = ({ node: nodeProp, required = false, children }) => {
-  const [node, setNode] = useState<AbstractNode>()
+  const [node, setNode] = useState<NodeModule>()
 
   useEffect(() => {
     setNode(nodeProp)

package/src/contexts/State.ts

@@ -1,7 +1,7 @@
-import { AbstractNode } from '@xyo-network/node'
+import { NodeModule } from '@xyo-network/node'
 import { Dispatch } from 'react'
 
 export interface NodeContextState {
-  node?: AbstractNode
-  setNode?: Dispatch<AbstractNode>
+  node?: NodeModule
+  setNode?: Dispatch<NodeModule>
 }

package/src/contexts/index.ts

@@ -3,6 +3,7 @@ export * from './MemoryProvider'
 export * from './NodeDrawerContext'
 export * from './Provider'
 export * from './State'
+export * from './useAddNamedModules'
 export * from './useArchivistModule'
 export * from './useArchivistModules'
 export * from './useDivinerModule'
@@ -10,5 +11,6 @@ export * from './useDivinerModules'
 export * from './useModuleAddresses'
 export * from './useModules'
 export * from './useNode'
+export * from './useNodeQueryDiviner'
 export * from './useWitnessModule'
 export * from './useWitnessModules'

package/src/contexts/useAddNamedModules.tsx

@@ -0,0 +1,72 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { ApiConfig } from '@xylabs/sdk-js'
+import { ArchivistWrapper } from '@xyo-network/archivist'
+import { DivinerWrapper } from '@xyo-network/diviner'
+import { HttpProxyModule } from '@xyo-network/http-proxy-module'
+import { AbstractModuleConfigSchema, Module, ModuleWrapper } from '@xyo-network/module'
+import { MemoryNode } from '@xyo-network/node'
+import { useState } from 'react'
+
+import { useNode } from './useNode'
+
+type ModuleList = Record<string, symbol>
+
+const addWrapper = (remoteModule: Module) => {
+  let wrapper: ModuleWrapper | undefined
+  if (remoteModule.config.schema.includes('divine')) {
+    wrapper = new DivinerWrapper(remoteModule)
+  } else if (remoteModule.config.schema.includes('archivist')) {
+    wrapper = new ArchivistWrapper(remoteModule)
+  }
+  return wrapper
+}
+
+const addToNode = (remoteModule: Module, name: string, memoryNode: MemoryNode) => {
+  const wrapper = addWrapper(remoteModule)
+  memoryNode.register(wrapper ?? remoteModule)
+  memoryNode.attach(remoteModule.address, name)
+  console.log('attached:', name)
+}
+
+const resolveNode = async (node: MemoryNode, reset?: boolean) => {
+  let localNode = node
+  if (reset) {
+    localNode = await MemoryNode.create()
+  }
+  return localNode
+}
+
+export const useAddNamedModules = (moduleList?: ModuleList, apiConfig?: ApiConfig, reset = false) => {
+  const [node, setNode] = useNode<MemoryNode>()
+  const [complete, setComplete] = useState(false)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (moduleList && apiConfig && node && !complete) {
+        const localNode = await resolveNode(node, reset)
+        await Promise.allSettled(
+          Object.entries(moduleList).map(async ([_key, { description }]) => {
+            try {
+              const remoteModule = await HttpProxyModule.create({
+                apiConfig,
+                config: { schema: AbstractModuleConfigSchema },
+                name: description,
+              })
+
+              addToNode(remoteModule, description ?? 'unknown', localNode)
+              // using .assign instead of spread because we need to keep the prototype chain intact for root node / module methods
+              const newNode = Object.assign(Object.create(Object.getPrototypeOf(node)), node)
+              setNode?.(newNode)
+              setComplete(true)
+            } catch (error) {
+              console.log(error)
+            }
+          }),
+        )
+      }
+    },
+    [apiConfig, complete, moduleList, node, reset, setNode],
+  )
+  return complete
+}

package/src/contexts/useArchivistModule.ts

@@ -1,9 +1,10 @@
 import { ArchivistWrapper } from '@xyo-network/archivist'
+import { ModuleFilter } from '@xyo-network/module'
 
 import { useModules } from './useModules'
 
-export const useArchivistModule = (address?: string) => {
-  const modules = useModules({ address: address ? [address] : undefined })
+export const useArchivistModule = (filter?: ModuleFilter) => {
+  const modules = useModules(filter)
   const foundModule = modules?.shift()
   return foundModule ? new ArchivistWrapper(foundModule) : undefined
 }

package/src/contexts/useDivinerModule.ts

@@ -1,9 +1,10 @@
 import { DivinerWrapper } from '@xyo-network/diviner'
+import { ModuleFilter } from '@xyo-network/module'
 
 import { useModules } from './useModules'
 
-export const useDivinerModule = (address?: string) => {
-  const modules = useModules({ address: address ? [address] : undefined })
+export const useDivinerModule = (filter?: ModuleFilter) => {
+  const modules = useModules(filter)
   const foundModule = modules?.shift()
   return foundModule ? new DivinerWrapper(foundModule) : undefined
 }

package/src/contexts/useModules.ts

@@ -1,11 +1,12 @@
 import { useAsyncEffect } from '@xylabs/react-shared'
 import { Module, ModuleFilter } from '@xyo-network/module'
+import { AbstractNode } from '@xyo-network/node'
 import { useState } from 'react'
 
 import { useNode } from './useNode'
 
 export const useModules = (filter?: ModuleFilter) => {
-  const [node] = useNode()
+  const [node] = useNode<AbstractNode>()
   const [modules, setModules] = useState<Module[]>()
 
   useAsyncEffect(

package/src/contexts/useNode.ts

@@ -1,11 +1,11 @@
-import { AbstractNode } from '@xyo-network/node'
+import { NodeModule } from '@xyo-network/node'
 import { useContextEx } from '@xyo-network/react-shared'
 import { Dispatch } from 'react'
 
 import { NodeContext } from './Context'
 
-export const useNode = (): [AbstractNode | undefined, Dispatch<AbstractNode> | undefined] => {
-  const { node, setNode } = useContextEx(NodeContext, 'XyoNode')
+export const useNode = <T extends NodeModule = NodeModule>(): [T | undefined, Dispatch<NodeModule> | undefined] => {
+  const { node, setNode } = useContextEx(NodeContext, 'Node')
 
-  return [node, setNode]
+  return [node as T, setNode]
 }

package/src/contexts/useNodeQueryDiviner.tsx

@@ -0,0 +1,34 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { DivinerWrapper } from '@xyo-network/diviner'
+import { MemoryNode } from '@xyo-network/node'
+import { XyoPayload, XyoPayloads } from '@xyo-network/payload'
+import { useState } from 'react'
+
+import { useNode } from './useNode'
+
+export const useNodeQueryDiviner = (moduleIdentifier?: string, query?: XyoPayload): [XyoPayloads | undefined, Error | undefined] => {
+  const [result, setResult] = useState<XyoPayloads>()
+  const [error, setError] = useState<Error>()
+  const [node] = useNode<MemoryNode>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (moduleIdentifier && query) {
+        try {
+          const diviner = (await node?.tryResolve({ name: [moduleIdentifier] }))?.[0] as DivinerWrapper
+          const result = await diviner?.divine([query])
+          setResult(result)
+          setError(undefined)
+        } catch (e) {
+          console.error(e)
+          setResult(undefined)
+          setError(e as Error)
+        }
+      }
+    },
+    [moduleIdentifier, node, query],
+  )
+
+  return [result, error]
+}

package/src/contexts/useWitnessModule.ts

@@ -1,9 +1,10 @@
+import { ModuleFilter } from '@xyo-network/module'
 import { WitnessWrapper } from '@xyo-network/witness'
 
 import { useModules } from './useModules'
 
-export const useWitnessModule = (address?: string) => {
-  const modules = useModules({ address: address ? [address] : undefined })
+export const useWitnessModule = (filter?: ModuleFilter) => {
+  const modules = useModules(filter)
   const foundModule = modules?.shift()
   return foundModule ? new WitnessWrapper(foundModule) : undefined
 }