@xyo-network/react-module 2.56.2 → 2.56.4

package/src/components/Card/Module/CardHeader.tsx

@@ -1,26 +1,24 @@
 import { CardHeader, CardHeaderProps } from '@mui/material'
-import { ModuleWrapper } from '@xyo-network/module'
+import { Module } from '@xyo-network/module'
 import { findNetworkComponent } from '@xyo-network/react-shared'
 
 import { ModuleRenderProps } from '../../../ModuleRenderProps'
 
-const getModuleIcons = (moduleType: string, wrapper: ModuleWrapper) => {
-  return wrapper?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null
+const getModuleIcons = (moduleType: string, module: Module) => {
+  return module?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null
 }
 
 export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = ({ subheader, avatar, title, module, ...props }) => {
-  const wrapper = module ? ModuleWrapper.wrap(module) : undefined
-
   return (
     <CardHeader
       title={title ?? module?.config.name ?? 'Module'}
-      subheader={subheader ?? wrapper?.address}
+      subheader={subheader ?? module?.address}
       avatar={
         avatar ?? (
           <>
-            {wrapper
+            {module
               ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness'].map((moduleType) => {
-                  const Icon = getModuleIcons(moduleType, wrapper)
+                  const Icon = getModuleIcons(moduleType, module)
                   return Icon ? <Icon fontSize={'large'} color="primary" /> : null
                 })
               : null}

package/src/components/DetailsBox.tsx

@@ -2,25 +2,24 @@ import { EthAddress } from '@xylabs/eth-address'
 import { ButtonEx } from '@xylabs/react-button'
 import { EthAccountBox } from '@xylabs/react-crypto'
 import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { ModuleWrapper } from '@xyo-network/module'
+import { Module } from '@xyo-network/module'
 import { findNetworkComponent } from '@xyo-network/react-shared'
 import { useState } from 'react'
 
 import { ModuleRenderProps } from '../ModuleRenderProps'
 
-const getModuleIcon = (moduleType: string, wrapper: ModuleWrapper) => {
-  return wrapper?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null
+const getModuleIcon = (moduleType: string, module: Module) => {
+  return module?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null
 }
 
 export const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps> = ({ children, module, ...props }) => {
-  const wrapper = module ? ModuleWrapper.wrap(module) : undefined
   const [showQueries, setShowQueries] = useState(false)
   return (
     <FlexCol {...props}>
       <FlexRow>
-        {wrapper
+        {module
           ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
-              const icon = getModuleIcon(moduleType, wrapper)
+              const icon = getModuleIcon(moduleType, module)
               return icon ? (
                 <ButtonEx onClick={() => setShowQueries(!showQueries)} key={moduleType}>
                   {icon}
@@ -28,11 +27,11 @@ export const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps> = ({ c
               ) : null
             })
           : null}
-        <EthAccountBox address={EthAddress.fromString(wrapper?.address)} />
+        <EthAccountBox address={EthAddress.fromString(module?.address)} />
       </FlexRow>
 
       {showQueries
-        ? wrapper?.queries.map((query) => {
+        ? module?.queries.map((query) => {
             return <FlexRow key={query}>{query}</FlexRow>
           })
         : null}

package/src/components/TableCell.tsx

@@ -1,15 +1,13 @@
 import { TableCell, TableCellProps } from '@mui/material'
 import { EthAddress } from '@xylabs/eth-address'
 import { EthAccountBox } from '@xylabs/react-crypto'
-import { ModuleWrapper } from '@xyo-network/module'
 
 import { ModuleRenderProps } from '../ModuleRenderProps'
 
 export const ModuleTableCell: React.FC<ModuleRenderProps & TableCellProps> = ({ children, module, ...props }) => {
-  const wrapper = module ? ModuleWrapper.wrap(module) : undefined
   return (
     <TableCell {...props}>
-      <EthAccountBox address={EthAddress.fromString(wrapper?.address)} />
+      <EthAccountBox address={EthAddress.fromString(module?.address)} />
       {children}
     </TableCell>
   )

package/src/hooks/WrappedModuleHookFactory.tsx

@@ -0,0 +1,41 @@
+import { AccountInstance } from '@xyo-network/account-model'
+import { Logger } from '@xyo-network/core'
+import { ConstructableModuleWrapper, ModuleWrapper } from '@xyo-network/module'
+import { useWrapperAccount } from '@xyo-network/react-wallet'
+import { useEffect, useState } from 'react'
+
+export const WrappedModuleHookFactory = {
+  create: <TModuleWrapper extends ModuleWrapper>(wrapperObject: ConstructableModuleWrapper<TModuleWrapper>, name?: string) => {
+    const useHook = (
+      module?: TModuleWrapper['module'] | null,
+      account?: AccountInstance | null,
+      logger?: Logger,
+    ): [TModuleWrapper | undefined, Error | undefined] => {
+      logger?.debug(`Render: ${name}`)
+      const [wrapperAccount] = useWrapperAccount()
+
+      const [wrapper, setWrapper] = useState<TModuleWrapper>()
+      const [error, setError] = useState<Error>()
+
+      useEffect(() => {
+        const walletToUse = account || wrapperAccount
+        if (module && walletToUse) {
+          try {
+            const wrapper = wrapperObject.wrap(module, walletToUse)
+            setWrapper(wrapper)
+            setError(undefined)
+          } catch (ex) {
+            setWrapper(undefined)
+            setError(ex as Error)
+          }
+        } else {
+          setWrapper(undefined)
+          setError(undefined)
+        }
+      }, [module, account, wrapperAccount])
+
+      return [wrapper, error]
+    }
+    return useHook
+  },
+}

package/src/hooks/WrappedModulesHookFactory.tsx

@@ -0,0 +1,41 @@
+import { AccountInstance } from '@xyo-network/account-model'
+import { Logger } from '@xyo-network/core'
+import { ConstructableModuleWrapper, ModuleWrapper } from '@xyo-network/module'
+import { useWrapperAccount } from '@xyo-network/react-wallet'
+import { useEffect, useState } from 'react'
+
+export const WrappedModulesHookFactory = {
+  create: <TModuleWrapper extends ModuleWrapper>(wrapperObject: ConstructableModuleWrapper<TModuleWrapper>, name?: string) => {
+    const useHook = (
+      modules?: TModuleWrapper['module'][],
+      account?: AccountInstance,
+      logger?: Logger,
+    ): [TModuleWrapper[] | undefined, Error | undefined] => {
+      logger?.debug(`Render: ${name}`)
+      const [wrapperAccount] = useWrapperAccount()
+
+      const [wrappers, setWrappers] = useState<TModuleWrapper[]>()
+      const [error, setError] = useState<Error>()
+
+      useEffect(() => {
+        const walletToUse = account || wrapperAccount
+        if (module && walletToUse) {
+          try {
+            const wrappers = modules?.map((module) => wrapperObject.wrap(module, walletToUse))
+            setWrappers(wrappers)
+            setError(undefined)
+          } catch (ex) {
+            setWrappers(undefined)
+            setError(ex as Error)
+          }
+        } else {
+          setWrappers(undefined)
+          setError(undefined)
+        }
+      }, [modules, account, wrapperAccount])
+
+      return [wrappers, error]
+    }
+    return useHook
+  },
+}

package/src/hooks/index.ts

@@ -1 +1,5 @@
+export * from './useRefresh'
 export * from './useWrappedModule'
+export * from './useWrappedModules'
+export * from './WrappedModuleHookFactory'
+export * from './WrappedModulesHookFactory'

package/src/hooks/useRefresh.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+export type RefreshCallback = () => boolean
+export type DisableCallback = () => void
+
+export const useRefresh = (): [boolean, RefreshCallback, DisableCallback] => {
+  const [enabled, setEnabled] = useState(1)
+  return [
+    !!enabled,
+    () => {
+      const enabledCount = enabled + 1
+      setEnabled(enabledCount)
+      return !!enabledCount
+    },
+    () => setEnabled(0),
+  ]
+}

package/src/hooks/useWrappedModule.tsx

@@ -1,40 +1,5 @@
-import { Logger } from '@xyo-network/core'
-import { ConstructableModuleWrapper, Module, ModuleWrapper } from '@xyo-network/module'
-import { useWrapperWallet } from '@xyo-network/react-wallet'
-import { WalletInstance } from '@xyo-network/wallet-model'
-import { useEffect, useState } from 'react'
+import { ModuleWrapper } from '@xyo-network/module'
 
-export const WrappedModuleHookFactory = <TModuleWrapper extends ModuleWrapper>(
-  wrapperObject: ConstructableModuleWrapper<TModuleWrapper>,
-  name?: string,
-) => {
-  const useHook = (module?: Module, wallet?: WalletInstance, logger?: Logger): [TModuleWrapper | undefined, Error | undefined] => {
-    logger?.debug(`Render: ${name}`)
-    const wrapperWallet = useWrapperWallet()
+import { WrappedModuleHookFactory } from './WrappedModuleHookFactory'
 
-    const [wrapper, setWrapper] = useState<TModuleWrapper>()
-    const [error, setError] = useState<Error>()
-
-    useEffect(() => {
-      const walletToUse = wallet || wrapperWallet
-      if (module && walletToUse) {
-        try {
-          const wrapper = wrapperObject.wrap(module, walletToUse)
-          setWrapper(wrapper)
-          setError(undefined)
-        } catch (ex) {
-          setWrapper(undefined)
-          setError(ex as Error)
-        }
-      } else {
-        setWrapper(undefined)
-        setError(undefined)
-      }
-    }, [module, wallet, wrapperWallet])
-
-    return [wrapper, error]
-  }
-  return useHook
-}
-
-export const useWrappedModule = WrappedModuleHookFactory(ModuleWrapper, 'useWrappedModule')
+export const useWrappedModule = WrappedModuleHookFactory.create(ModuleWrapper, 'useWrappedModule')

package/src/hooks/useWrappedModules.tsx

@@ -0,0 +1,5 @@
+import { ModuleWrapper } from '@xyo-network/module'
+
+import { WrappedModulesHookFactory } from './WrappedModulesHookFactory'
+
+export const useWrappedModules = WrappedModulesHookFactory.create(ModuleWrapper, 'useWrappedModules')

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components'
+export * from './hooks'
 export * from './ModuleRenderProps'