Merge pull request #685 from XYOracleNetwork/feature/module-details

fix console errors in module renderer stories

packages/modules/packages/archivist/package.json

@@ -39,6 +39,7 @@
     "@xyo-network/archivist": "^2.77.7",
     "@xyo-network/boundwitness-builder": "^2.77.7",
     "@xyo-network/module": "^2.77.7",
+    "@xyo-network/node-memory": "^2.77.7",
     "@xyo-network/payload-model": "^2.77.7",
     "@xyo-network/react-storybook": "workspace:~",
     "typescript": "^5.2.2"

packages/modules/packages/archivist/src/components/Card/Card.stories.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
 import { Account } from '@xyo-network/account'
 import { ArchivistInsertQuerySchema, ArchivistInstance, MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { QueryBoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
-import { useState } from 'react'
+import { MemoryNode } from '@xyo-network/node-memory'
 
 import { ArchivistCard } from './Card'
 
@@ -23,8 +23,8 @@ const insertPayload = async (archivist?: ArchivistInstance) => {
   if (archivist) {
     const payload = { schema: 'network.xyo.payload', timestamp: Date.now() }
     const insertQuery = { schema: ArchivistInsertQuerySchema }
-    const account = await Account.randomSync()
-    const builder = new QueryBoundWitnessBuilder({ inlinePayloads: true }).payloads([insertQuery, payload]).witness(account).query(insertQuery)
+    const account = Account.randomSync()
+    const builder = new QueryBoundWitnessBuilder().payloads([insertQuery, payload]).witness(account).query(insertQuery)
     const [insertQueryBoundWitness, payloads] = await builder.build()
     await archivist.insert([insertQueryBoundWitness, ...payloads])
   }
@@ -35,28 +35,30 @@ const clearArchivist = async (archivist?: ArchivistInstance) => {
 }
 
 const Template: StoryFn<typeof ArchivistCard> = () => {
-  const [module, setModule] = useState<ArchivistInstance>()
+  const [node] = usePromise(async () => {
+    return await MemoryNode.create()
+  }, [])
 
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if (!module) {
-        const newParentModule = await MemoryArchivist.create()
-        const newModule = await MemoryArchivist.create({
-          config: {
-            name: 'MemoryArchivist',
-            parents: { commit: [newParentModule.address], read: [newParentModule.address], write: [newParentModule.address] },
-            schema: MemoryArchivistConfigSchema,
-          },
-        })
-        await insertPayload(newModule)
-        if (mounted()) {
-          setModule(newModule)
-        }
-      }
-    },
-    [module],
-  )
+  const [module] = usePromise(async () => {
+    if (node) {
+      const newParentModule = await MemoryArchivist.create()
+      await node?.register(newParentModule)
+      await node?.attach(newParentModule.address)
+
+      const newModule = await MemoryArchivist.create({
+        config: {
+          name: 'MemoryArchivist',
+          parents: { commit: [newParentModule.address], read: [newParentModule.address], write: [newParentModule.address] },
+          schema: MemoryArchivistConfigSchema,
+        },
+      })
+      await node?.register(newModule)
+      await node?.attach(newModule.address)
+
+      await insertPayload(newModule)
+      return newModule
+    }
+  }, [node])
 
   return (
     <FlexCol gap={2}>

packages/modules/packages/archivist/src/components/Card/components/Stats/MemoryArchivistStats.stories.tsx

@@ -3,6 +3,7 @@ import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { Account } from '@xyo-network/account'
 import { ArchivistInsertQuerySchema, ArchivistInstance, MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { QueryBoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
+import { MemoryNode } from '@xyo-network/node-memory'
 import { useState } from 'react'
 
 import { MemoryArchivistsStats } from './MemoryArchivistStats'
@@ -22,8 +23,9 @@ const Template: StoryFn<typeof MemoryArchivistsStats> = () => {
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
+    async () => {
       if (!module) {
+        const node = await MemoryNode.create()
         const newParentModule = await MemoryArchivist.create()
         const newModule = await MemoryArchivist.create({
           config: {
@@ -34,13 +36,15 @@ const Template: StoryFn<typeof MemoryArchivistsStats> = () => {
         })
         const payload = { schema: 'network.xyo.payload' }
         const insertQuery = { schema: ArchivistInsertQuerySchema }
-        const account = await Account.randomSync()
-        const builder = new QueryBoundWitnessBuilder({ inlinePayloads: true }).payloads([insertQuery, payload]).witness(account).query(insertQuery)
+        const account = Account.randomSync()
+        const builder = new QueryBoundWitnessBuilder().payloads([insertQuery, payload]).witness(account).query(insertQuery)
         const [insertQueryBoundWitness, payloads] = await builder.build()
+        await node.register(newParentModule)
+        await node.attach(newParentModule.address)
+        await node.register(newModule)
+        await node.attach(newModule.address)
         await newModule.insert([insertQueryBoundWitness, ...payloads])
-        if (mounted()) {
-          setModule(newModule)
-        }
+        setModule(newModule)
       }
     },
     [module],

packages/modules/packages/module/src/components/Card/Module/CardHeader.tsx

@@ -4,6 +4,8 @@ import { findNetworkComponent } from '@xyo-network/react-shared'
 
 import { ModuleRenderProps } from '../../../ModuleRenderProps'
 
+const moduleTypes = ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness']
+
 const getModuleIcons = (moduleType: string, module: Module) => {
   return module?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null
 }
@@ -17,9 +19,9 @@ export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = (
         avatar ?? (
           <>
             {module
-              ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness'].map((moduleType) => {
+              ? moduleTypes.map((moduleType) => {
                   const Icon = getModuleIcons(moduleType, module)
-                  return Icon ? <Icon fontSize={'large'} color="primary" /> : null
+                  return Icon ? <Icon key={moduleType} fontSize={'large'} color="primary" /> : null
                 })
               : null}
           </>

packages/sdk/packages/node-renderer/src/hooks/cytoscape/elements/useNewElements.tsx

@@ -1,10 +1,15 @@
 import { useModuleFromNode } from '@xyo-network/react-node'
 import { NodeSingular } from 'cytoscape'
+import { useMemo } from 'react'
 
 import { useCytoscapeElements } from './useCytoscapeElements'
 
 export const useNewElements = (selectedElement?: NodeSingular) => {
-  const { address: selectedAddress } = selectedElement?.data() ?? {}
+  const selectedAddress = useMemo(() => {
+    const { address: selectedAddress } = selectedElement?.data() ?? {}
+    return selectedAddress
+  }, [selectedElement])
+
   const [module] = useModuleFromNode(selectedAddress)
   const newElements = useCytoscapeElements(module)
 

yarn.lock

@@ -8806,6 +8806,7 @@ __metadata:
     "@xyo-network/boundwitness-wrapper": ^2.77.7
     "@xyo-network/module": ^2.77.7
     "@xyo-network/module-model": ^2.77.7
+    "@xyo-network/node-memory": ^2.77.7
     "@xyo-network/payload-model": ^2.77.7
     "@xyo-network/react-module": "workspace:~"
     "@xyo-network/react-node": "workspace:~"