@xyo-network/react-module 2.38.17

package/src/components/CardActions.tsx

@@ -0,0 +1,15 @@
+import { CardActions, CardActionsProps } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { XyoModuleWrapper } from '@xyo-network/module'
+
+import { ModuleRenderProps } from '../ModuleRenderProps'
+
+export const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps> = ({ children, module, ...props }) => {
+  const wrapper = module ? new XyoModuleWrapper(module) : undefined
+  return (
+    <CardActions {...props}>
+      <ButtonEx onClick={() => wrapper?.discover()}>Discover</ButtonEx>
+      {children}
+    </CardActions>
+  )
+}

package/src/components/CardContent.tsx

@@ -0,0 +1,35 @@
+import { CardContent, CardContentProps, Typography } from '@mui/material'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { EthAddress } from '@xylabs/sdk-js'
+import { EthAccountBox } from '@xylabs/sdk-react'
+import { XyoModuleConfig, XyoModuleWrapper } from '@xyo-network/module'
+import { useState } from 'react'
+
+import { ModuleRenderProps } from '../ModuleRenderProps'
+
+export const ModuleCardContent: React.FC<ModuleRenderProps & CardContentProps> = ({ children, module, ...props }) => {
+  const [config, setConfig] = useState<XyoModuleConfig>()
+
+  const account = module?.address ? EthAddress.fromString(module?.address) : undefined
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      const wrapper = module ? new XyoModuleWrapper(module) : undefined
+      const payloads = await wrapper?.discover()
+      console.log(`Payloads: ${JSON.stringify(payloads, null, 2)}`)
+      if (mounted()) {
+        setConfig(payloads?.[0])
+      }
+    },
+    [module],
+  )
+
+  return (
+    <CardContent {...props}>
+      <EthAccountBox address={account} />
+      {children}
+      <Typography variant="subtitle2">{config?.schema}</Typography>
+    </CardContent>
+  )
+}

package/src/components/CardHeader.tsx

@@ -0,0 +1,17 @@
+import { CardHeader, CardHeaderProps } from '@mui/material'
+import { Identicon } from '@xylabs/react-identicon'
+import { XyoModuleWrapper } from '@xyo-network/module'
+
+import { ModuleRenderProps } from '../ModuleRenderProps'
+
+export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = ({ subheader, avatar, title, module, ...props }) => {
+  const wrapper = module ? new XyoModuleWrapper(module) : undefined
+  return (
+    <CardHeader
+      title={title ?? 'Module'}
+      subheader={subheader ?? wrapper?.address}
+      avatar={avatar ?? <Identicon size={24} value={wrapper?.address} />}
+      {...props}
+    />
+  )
+}

package/src/components/DetailsBox.tsx

@@ -0,0 +1,15 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { EthAddress } from '@xylabs/sdk-js'
+import { EthAccountBox } from '@xylabs/sdk-react'
+import { XyoModuleWrapper } from '@xyo-network/module'
+
+import { ModuleRenderProps } from '../ModuleRenderProps'
+
+export const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps> = ({ module, ...props }) => {
+  const wrapper = module ? new XyoModuleWrapper(module) : undefined
+  return (
+    <FlexCol {...props}>
+      <EthAccountBox address={EthAddress.fromString(wrapper?.address)} />
+    </FlexCol>
+  )
+}

package/src/components/TableCell.tsx

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

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './CardActions'
+export * from './CardContent'
+export * from './CardHeader'
+export * from './DetailsBox'
+export * from './TableCell'

package/src/index.ts

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