@xyo-network/react-powered-by-xyo 7.5.8 → 7.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/components/PoweredByXyo.d.ts.map +1 -1
- package/dist/browser/components/XyoBusy.d.ts.map +1 -1
- package/dist/browser/index.mjs +274 -336
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +151 -44
- package/src/components/ArchivistSummary.tsx +0 -10
- package/src/components/BridgeSummary.tsx +0 -10
- package/src/components/DebugDialog.tsx +0 -23
- package/src/components/DivinerSummary.tsx +0 -10
- package/src/components/JsonViewerButton.tsx +0 -37
- package/src/components/ModuleAccordion.tsx +0 -28
- package/src/components/ModuleDetails.tsx +0 -92
- package/src/components/ModuleSummary.tsx +0 -45
- package/src/components/NodeDetails.tsx +0 -30
- package/src/components/NodeSummary.tsx +0 -31
- package/src/components/PoweredByXyo.tsx +0 -136
- package/src/components/PoweredByXyoButton.tsx +0 -55
- package/src/components/SentinelSummary.tsx +0 -10
- package/src/components/TypedModuleSummary.tsx +0 -38
- package/src/components/WitnessSummary.tsx +0 -10
- package/src/components/XyoBusy.tsx +0 -40
- package/src/components/index.ts +0 -14
- package/src/components/stories/PoweredByXyo.stories.tsx +0 -81
- package/src/components/stories/PoweredByXyoButton.stories.tsx +0 -21
- package/src/components/stories/XyoBusy.stories.tsx +0 -21
- package/src/components/stories/manifest.ts +0 -1
- package/src/components/stories/simple-node-inline-manifest.json +0 -56
- package/src/img/index.ts +0 -2
- package/src/img/xyo-color-logo-text-only.svg +0 -1
- package/src/img/xyo-color-logo.svg +0 -1
- package/src/index.ts +0 -1
- package/src/types/images.d.ts +0 -5
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { ButtonGroup } from '@mui/material'
|
|
2
|
-
import { ButtonEx } from '@xylabs/react-button'
|
|
3
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
4
|
-
import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
-
import { usePromise } from '@xylabs/react-promise'
|
|
6
|
-
import type { ModuleDescriptionPayload, ModuleInstance } from '@xyo-network/module-model'
|
|
7
|
-
import { ModuleDescriptionSchema } from '@xyo-network/module-model'
|
|
8
|
-
import { isPayloadOfSchemaType } from '@xyo-network/payload-model'
|
|
9
|
-
import { Property } from '@xyo-network/react-property'
|
|
10
|
-
import React from 'react'
|
|
11
|
-
|
|
12
|
-
import { JsonViewerButton } from './JsonViewerButton.tsx'
|
|
13
|
-
|
|
14
|
-
export interface ModuleDetailsProps<T extends ModuleInstance = ModuleInstance> extends FlexBoxProps {
|
|
15
|
-
mod?: T
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const ModuleDetails: React.FC<ModuleDetailsProps> = ({ mod, ...props }) => {
|
|
19
|
-
const [manifest] = usePromise(async () => {
|
|
20
|
-
return await mod?.manifest()
|
|
21
|
-
}, [mod])
|
|
22
|
-
|
|
23
|
-
const [discover] = usePromise(async () => {
|
|
24
|
-
return await mod?.state()
|
|
25
|
-
}, [mod])
|
|
26
|
-
|
|
27
|
-
const [describe] = usePromise(async () => {
|
|
28
|
-
const state = await mod?.state()
|
|
29
|
-
return state?.find<ModuleDescriptionPayload>(isPayloadOfSchemaType(ModuleDescriptionSchema))
|
|
30
|
-
}, [mod])
|
|
31
|
-
|
|
32
|
-
const queries = mod?.queries
|
|
33
|
-
|
|
34
|
-
const config = mod?.config
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<FlexCol alignItems="stretch" {...props}>
|
|
38
|
-
<Property title="Address" value={mod?.address} />
|
|
39
|
-
|
|
40
|
-
<FlexRow gap={1} justifyContent="space-between">
|
|
41
|
-
<ButtonGroup>
|
|
42
|
-
{manifest
|
|
43
|
-
? (
|
|
44
|
-
<JsonViewerButton variant="contained" src={manifest}>
|
|
45
|
-
Manifest
|
|
46
|
-
</JsonViewerButton>
|
|
47
|
-
)
|
|
48
|
-
: null}
|
|
49
|
-
{config
|
|
50
|
-
? (
|
|
51
|
-
<JsonViewerButton variant="contained" src={config}>
|
|
52
|
-
Config
|
|
53
|
-
</JsonViewerButton>
|
|
54
|
-
)
|
|
55
|
-
: null}
|
|
56
|
-
{discover
|
|
57
|
-
? (
|
|
58
|
-
<JsonViewerButton variant="contained" src={discover}>
|
|
59
|
-
Discover
|
|
60
|
-
</JsonViewerButton>
|
|
61
|
-
)
|
|
62
|
-
: null}
|
|
63
|
-
{describe
|
|
64
|
-
? (
|
|
65
|
-
<JsonViewerButton variant="contained" src={describe}>
|
|
66
|
-
Describe
|
|
67
|
-
</JsonViewerButton>
|
|
68
|
-
)
|
|
69
|
-
: null}
|
|
70
|
-
{queries
|
|
71
|
-
? (
|
|
72
|
-
<JsonViewerButton variant="contained" src={queries}>
|
|
73
|
-
Queries
|
|
74
|
-
</JsonViewerButton>
|
|
75
|
-
)
|
|
76
|
-
: null}
|
|
77
|
-
</ButtonGroup>
|
|
78
|
-
<ButtonGroup>
|
|
79
|
-
<ButtonEx target="_blank" href={`https://explore.xyo.network/block?network=main&address=${mod?.address}`} variant="outlined">
|
|
80
|
-
Main
|
|
81
|
-
</ButtonEx>
|
|
82
|
-
<ButtonEx target="_blank" href={`https://beta.explore.xyo.network/block?network=kerplunk&address=${mod?.address}`} variant="outlined">
|
|
83
|
-
Kerplunk
|
|
84
|
-
</ButtonEx>
|
|
85
|
-
<ButtonEx target="_blank" href={`https://beta.explore.xyo.network/block?network=local&address=${mod?.address}`} variant="outlined">
|
|
86
|
-
Local
|
|
87
|
-
</ButtonEx>
|
|
88
|
-
</ButtonGroup>
|
|
89
|
-
</FlexRow>
|
|
90
|
-
</FlexCol>
|
|
91
|
-
)
|
|
92
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Extension as ExtensionIcon } from '@mui/icons-material'
|
|
2
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
-
import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
|
4
|
-
import { delay } from '@xylabs/sdk-js'
|
|
5
|
-
import type { ModuleInstance } from '@xyo-network/module-model'
|
|
6
|
-
import { useWeakModulesFromNode } from '@xyo-network/react-node'
|
|
7
|
-
import { TypographyEx } from '@xyo-network/react-shared'
|
|
8
|
-
import type { ReactNode } from 'react'
|
|
9
|
-
import React, { useState } from 'react'
|
|
10
|
-
|
|
11
|
-
export interface ModuleSummaryProps<T extends ModuleInstance = ModuleInstance> extends FlexBoxProps {
|
|
12
|
-
icon?: ReactNode
|
|
13
|
-
mod?: T
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const ModuleSummary: React.FC<ModuleSummaryProps> = ({
|
|
17
|
-
children, icon, mod, ...props
|
|
18
|
-
}) => {
|
|
19
|
-
const [downModules] = useWeakModulesFromNode(undefined, { direction: 'down' })
|
|
20
|
-
const [upModules] = useWeakModulesFromNode(undefined, { direction: 'up' })
|
|
21
|
-
const [busy, setBusy] = useState(false)
|
|
22
|
-
|
|
23
|
-
const downModulesFromResolve = downModules?.length
|
|
24
|
-
const upModulesFromResolve = upModules?.length
|
|
25
|
-
|
|
26
|
-
mod?.on('moduleBusy', async ({ busy }) => {
|
|
27
|
-
setBusy(busy)
|
|
28
|
-
await delay(2000)
|
|
29
|
-
setBusy(false)
|
|
30
|
-
})
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<FlexCol alignItems="stretch" width="100%" {...props}>
|
|
34
|
-
<FlexRow justifyContent="flex-start">
|
|
35
|
-
<FlexRow>
|
|
36
|
-
<TypographyEx color={busy ? 'gray' : undefined}>{icon ?? <ExtensionIcon />}</TypographyEx>
|
|
37
|
-
<TypographyEx marginX={1}>{mod?.config?.name ?? '<Unknown>'}</TypographyEx>
|
|
38
|
-
</FlexRow>
|
|
39
|
-
{(children ?? (downModulesFromResolve !== undefined && upModulesFromResolve !== undefined))
|
|
40
|
-
? `[${downModulesFromResolve}↓/${upModulesFromResolve}↑]`
|
|
41
|
-
: null}
|
|
42
|
-
</FlexRow>
|
|
43
|
-
</FlexCol>
|
|
44
|
-
)
|
|
45
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
2
|
-
import type { NodeInstance } from '@xyo-network/node-model'
|
|
3
|
-
import { useProvidedNode, useWeakModulesFromNode } from '@xyo-network/react-node'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import { ModuleAccordion } from './ModuleAccordion.tsx'
|
|
7
|
-
import type { ModuleDetailsProps } from './ModuleDetails.tsx'
|
|
8
|
-
|
|
9
|
-
export interface NodeViewerProps extends ModuleDetailsProps<NodeInstance> {}
|
|
10
|
-
|
|
11
|
-
export const NodeDetails: React.FC<NodeViewerProps> = ({ mod, ...props }) => {
|
|
12
|
-
const [node = mod] = useProvidedNode()
|
|
13
|
-
|
|
14
|
-
const [children] = useWeakModulesFromNode(undefined, { node: node ?? undefined })
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<FlexCol alignItems="stretch" {...props}>
|
|
18
|
-
{children
|
|
19
|
-
? (
|
|
20
|
-
<FlexCol alignItems="stretch" marginY={1}>
|
|
21
|
-
{children?.map((child) => {
|
|
22
|
-
const instance = child.deref()
|
|
23
|
-
return instance ? <ModuleAccordion key={instance.address} mod={instance} /> : null
|
|
24
|
-
})}
|
|
25
|
-
</FlexCol>
|
|
26
|
-
)
|
|
27
|
-
: null}
|
|
28
|
-
</FlexCol>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { HubRounded as HubRoundedIcon } from '@mui/icons-material'
|
|
2
|
-
import { usePromise } from '@xylabs/react-promise'
|
|
3
|
-
import type { NodeManifest } from '@xyo-network/manifest'
|
|
4
|
-
import type { NodeInstance } from '@xyo-network/node-model'
|
|
5
|
-
import { useWeakModulesFromNode } from '@xyo-network/react-node'
|
|
6
|
-
import React from 'react'
|
|
7
|
-
|
|
8
|
-
import type { ModuleSummaryProps } from './ModuleSummary.tsx'
|
|
9
|
-
import { ModuleSummary } from './ModuleSummary.tsx'
|
|
10
|
-
|
|
11
|
-
export const NodeSummary: React.FC<ModuleSummaryProps<NodeInstance>> = ({ mod, ...props }) => {
|
|
12
|
-
const [manifest] = usePromise(async () => {
|
|
13
|
-
return (await mod?.manifest()) as NodeManifest
|
|
14
|
-
}, [mod])
|
|
15
|
-
|
|
16
|
-
const [downModules] = useWeakModulesFromNode(undefined, { direction: 'down' })
|
|
17
|
-
const [upModules] = useWeakModulesFromNode(undefined, { direction: 'up' })
|
|
18
|
-
|
|
19
|
-
const downModulesFromResolve = downModules?.length
|
|
20
|
-
const upModulesFromResolve = upModules?.length
|
|
21
|
-
|
|
22
|
-
const manifestPublicModules = manifest?.modules?.public?.length
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<ModuleSummary mod={mod} icon={<HubRoundedIcon />} {...props}>
|
|
26
|
-
{manifestPublicModules !== undefined && downModulesFromResolve !== undefined && upModulesFromResolve !== undefined
|
|
27
|
-
? `[${manifestPublicModules}m/${downModulesFromResolve}↓/${upModulesFromResolve}↑]`
|
|
28
|
-
: null}
|
|
29
|
-
</ModuleSummary>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { Paper } from '@mui/material'
|
|
2
|
-
import { useAsyncEffect } from '@xylabs/react-async-effect'
|
|
3
|
-
import type { ButtonExProps } from '@xylabs/react-button'
|
|
4
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
5
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
6
|
-
import { delay, forget } from '@xylabs/sdk-js'
|
|
7
|
-
import type { Module } from '@xyo-network/module-model'
|
|
8
|
-
import type { NodeInstance } from '@xyo-network/node-model'
|
|
9
|
-
import { useProvidedNode } from '@xyo-network/react-node'
|
|
10
|
-
import type { KeyboardEvent } from 'react'
|
|
11
|
-
import React, { useMemo, useState } from 'react'
|
|
12
|
-
|
|
13
|
-
import { DebugDialog } from './DebugDialog.tsx'
|
|
14
|
-
import type { PoweredByXyoButtonProps } from './PoweredByXyoButton.tsx'
|
|
15
|
-
import { PoweredByXyoButton } from './PoweredByXyoButton.tsx'
|
|
16
|
-
|
|
17
|
-
export interface PoweredByXyoProps extends FlexBoxProps {
|
|
18
|
-
autoStop?: boolean
|
|
19
|
-
busy?: boolean
|
|
20
|
-
buttonProps?: Omit<PoweredByXyoButtonProps, 'href' | 'to' | 'toOptions'>
|
|
21
|
-
debugDialog?: boolean
|
|
22
|
-
disableAnimation?: boolean
|
|
23
|
-
href?: ButtonExProps['href']
|
|
24
|
-
logoHeight?: number
|
|
25
|
-
logoTextSize?: number
|
|
26
|
-
node?: NodeInstance
|
|
27
|
-
onButtonClick?: ButtonExProps['onClick']
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export const PoweredByXyo: React.FC<PoweredByXyoProps> = ({
|
|
31
|
-
autoStop,
|
|
32
|
-
busy,
|
|
33
|
-
buttonProps,
|
|
34
|
-
debugDialog = false,
|
|
35
|
-
disableAnimation = false,
|
|
36
|
-
href = 'https://xyo.network',
|
|
37
|
-
logoHeight,
|
|
38
|
-
logoTextSize,
|
|
39
|
-
onButtonClick,
|
|
40
|
-
node: propNode,
|
|
41
|
-
...props
|
|
42
|
-
}) => {
|
|
43
|
-
const [node] = useProvidedNode()
|
|
44
|
-
const [debugDialogOpen, setDebugDialogOpen] = useState(false)
|
|
45
|
-
|
|
46
|
-
const busyMap: Record<string, boolean> = useMemo(() => ({}), [node])
|
|
47
|
-
|
|
48
|
-
const activeBusy = busy ?? Object.values(busyMap).includes(true)
|
|
49
|
-
|
|
50
|
-
const activeOnButtonClick: PoweredByXyoProps['onButtonClick']
|
|
51
|
-
= (debugDialog
|
|
52
|
-
? (event) => {
|
|
53
|
-
if (event.shiftKey && event.altKey) {
|
|
54
|
-
setDebugDialogOpen(true)
|
|
55
|
-
} else if (href) {
|
|
56
|
-
window.open(href, undefined, 'noopener,noreferrer')
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
: undefined) ?? onButtonClick
|
|
60
|
-
|
|
61
|
-
const activeHref = activeOnButtonClick ? undefined : href
|
|
62
|
-
|
|
63
|
-
const onKeyDownEscListener = (event: KeyboardEvent<HTMLDivElement>) => {
|
|
64
|
-
if (event.key === 'Escape' && debugDialogOpen) {
|
|
65
|
-
setDebugDialogOpen(false)
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
useAsyncEffect(
|
|
70
|
-
async () => {
|
|
71
|
-
const activeNode = propNode ?? node
|
|
72
|
-
if (disableAnimation) {
|
|
73
|
-
return
|
|
74
|
-
} else if (activeNode) {
|
|
75
|
-
const mods = await activeNode?.resolve('*')
|
|
76
|
-
mods?.map((mod) => {
|
|
77
|
-
return mod.on('moduleBusy', ({ mod, busy }) => {
|
|
78
|
-
busyMap[(mod as Module).address] = busy
|
|
79
|
-
if (autoStop) {
|
|
80
|
-
forget(
|
|
81
|
-
(async () => {
|
|
82
|
-
await delay(1000)
|
|
83
|
-
busyMap[(mod as Module).address] = false
|
|
84
|
-
})(),
|
|
85
|
-
)
|
|
86
|
-
}
|
|
87
|
-
})
|
|
88
|
-
})
|
|
89
|
-
activeNode?.on('moduleBusy', ({ mod, busy }) => {
|
|
90
|
-
busyMap[(mod as Module).address] = busy
|
|
91
|
-
if (autoStop) {
|
|
92
|
-
forget(
|
|
93
|
-
(async () => {
|
|
94
|
-
await delay(1000)
|
|
95
|
-
busyMap[(mod as Module).address] = false
|
|
96
|
-
})(),
|
|
97
|
-
)
|
|
98
|
-
}
|
|
99
|
-
})
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
[disableAnimation, propNode, node, busyMap, autoStop],
|
|
103
|
-
)
|
|
104
|
-
|
|
105
|
-
return (
|
|
106
|
-
<FlexCol alignItems="stretch" position="absolute" bottom="0" left="0" {...props}>
|
|
107
|
-
<Paper sx={{ borderRadius: 0 }}>
|
|
108
|
-
{activeHref
|
|
109
|
-
? (
|
|
110
|
-
<PoweredByXyoButton
|
|
111
|
-
onClick={activeOnButtonClick}
|
|
112
|
-
href={activeHref}
|
|
113
|
-
busy={activeBusy}
|
|
114
|
-
logoHeight={logoHeight}
|
|
115
|
-
logoTextSize={logoTextSize}
|
|
116
|
-
fullWidth
|
|
117
|
-
{...buttonProps}
|
|
118
|
-
/>
|
|
119
|
-
)
|
|
120
|
-
: (
|
|
121
|
-
<PoweredByXyoButton
|
|
122
|
-
onClick={activeOnButtonClick}
|
|
123
|
-
busy={activeBusy}
|
|
124
|
-
logoHeight={logoHeight}
|
|
125
|
-
logoTextSize={logoTextSize}
|
|
126
|
-
fullWidth
|
|
127
|
-
{...buttonProps}
|
|
128
|
-
/>
|
|
129
|
-
)}
|
|
130
|
-
</Paper>
|
|
131
|
-
{debugDialog && debugDialogOpen
|
|
132
|
-
? <DebugDialog fullScreen open={debugDialogOpen} onClose={() => setDebugDialogOpen(false)} onKeyDown={onKeyDownEscListener} />
|
|
133
|
-
: null}
|
|
134
|
-
</FlexCol>
|
|
135
|
-
)
|
|
136
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Typography } from '@mui/material'
|
|
2
|
-
import type { ButtonExProps } from '@xylabs/react-button'
|
|
3
|
-
import { ButtonEx } from '@xylabs/react-button'
|
|
4
|
-
import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
-
import React, { useEffect, useState } from 'react'
|
|
6
|
-
|
|
7
|
-
import { xyoColorLogoText } from '../img/index.ts'
|
|
8
|
-
import { XyoBusy } from './XyoBusy.tsx'
|
|
9
|
-
|
|
10
|
-
export type PoweredByXyoButtonProps = ButtonExProps & {
|
|
11
|
-
busy?: boolean
|
|
12
|
-
logoHeight?: number
|
|
13
|
-
logoTextSize?: number
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const PoweredByXyoButton: React.FC<PoweredByXyoButtonProps> = ({
|
|
17
|
-
busy = false,
|
|
18
|
-
logoHeight,
|
|
19
|
-
logoTextSize,
|
|
20
|
-
...props
|
|
21
|
-
}) => {
|
|
22
|
-
// preloading image to prevent shifting
|
|
23
|
-
const [imageLoaded, setImageLoaded] = useState(false)
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const img = new Image()
|
|
26
|
-
const onImageLoaded = () => setImageLoaded(true)
|
|
27
|
-
img.addEventListener('load', onImageLoaded)
|
|
28
|
-
img.src = xyoColorLogoText
|
|
29
|
-
return () => {
|
|
30
|
-
img.removeEventListener('load', onImageLoaded)
|
|
31
|
-
}
|
|
32
|
-
}, [])
|
|
33
|
-
return imageLoaded
|
|
34
|
-
? (
|
|
35
|
-
<ButtonEx
|
|
36
|
-
{...props}
|
|
37
|
-
target={props.target ?? '_blank'}
|
|
38
|
-
variant={props.variant ?? 'text'}
|
|
39
|
-
sx={{
|
|
40
|
-
textDecoration: 'none', borderRadius: 0, padding: 0, ...props.sx,
|
|
41
|
-
}}
|
|
42
|
-
>
|
|
43
|
-
<FlexCol padding={0.5}>
|
|
44
|
-
<Typography style={{ fontSize: logoTextSize ?? 10 }} fontSize="small">
|
|
45
|
-
Powered by
|
|
46
|
-
</Typography>
|
|
47
|
-
<FlexRow>
|
|
48
|
-
<XyoBusy busy={busy} />
|
|
49
|
-
<img src={xyoColorLogoText} height={logoHeight ?? 24} width={45} />
|
|
50
|
-
</FlexRow>
|
|
51
|
-
</FlexCol>
|
|
52
|
-
</ButtonEx>
|
|
53
|
-
)
|
|
54
|
-
: null
|
|
55
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { TimerRounded as TimerRoundedIcon } from '@mui/icons-material'
|
|
2
|
-
import type { SentinelInstance } from '@xyo-network/sentinel-model'
|
|
3
|
-
import React from 'react'
|
|
4
|
-
|
|
5
|
-
import type { ModuleSummaryProps } from './ModuleSummary.tsx'
|
|
6
|
-
import { ModuleSummary } from './ModuleSummary.tsx'
|
|
7
|
-
|
|
8
|
-
export const SentinelSummary: React.FC<ModuleSummaryProps<SentinelInstance>> = ({ mod, ...props }) => {
|
|
9
|
-
return <ModuleSummary mod={mod} icon={<TimerRoundedIcon />} {...props} />
|
|
10
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { isArchivistInstance } from '@xyo-network/archivist-model'
|
|
2
|
-
import { isBridgeInstance } from '@xyo-network/bridge-model'
|
|
3
|
-
import { isDivinerInstance } from '@xyo-network/diviner-model'
|
|
4
|
-
import { isNodeInstance } from '@xyo-network/node-model'
|
|
5
|
-
import { isSentinelInstance } from '@xyo-network/sentinel-model'
|
|
6
|
-
import { isWitnessInstance } from '@xyo-network/witness-model'
|
|
7
|
-
import React from 'react'
|
|
8
|
-
|
|
9
|
-
import { ArchivistSummary } from './ArchivistSummary.tsx'
|
|
10
|
-
import { BridgeSummary } from './BridgeSummary.tsx'
|
|
11
|
-
import { DivinerSummary } from './DivinerSummary.tsx'
|
|
12
|
-
import type { ModuleSummaryProps } from './ModuleSummary.tsx'
|
|
13
|
-
import { ModuleSummary } from './ModuleSummary.tsx'
|
|
14
|
-
import { NodeSummary } from './NodeSummary.tsx'
|
|
15
|
-
import { SentinelSummary } from './SentinelSummary.tsx'
|
|
16
|
-
import { WitnessSummary } from './WitnessSummary.tsx'
|
|
17
|
-
|
|
18
|
-
export const TypedModuleSummary: React.FC<ModuleSummaryProps> = ({ mod, ...props }) => {
|
|
19
|
-
if (isArchivistInstance(mod)) {
|
|
20
|
-
return <ArchivistSummary mod={mod} {...props} />
|
|
21
|
-
}
|
|
22
|
-
if (isDivinerInstance(mod)) {
|
|
23
|
-
return <DivinerSummary mod={mod} {...props} />
|
|
24
|
-
}
|
|
25
|
-
if (isNodeInstance(mod)) {
|
|
26
|
-
return <NodeSummary mod={mod} {...props} />
|
|
27
|
-
}
|
|
28
|
-
if (isWitnessInstance(mod)) {
|
|
29
|
-
return <WitnessSummary mod={mod} {...props} />
|
|
30
|
-
}
|
|
31
|
-
if (isBridgeInstance(mod)) {
|
|
32
|
-
return <BridgeSummary mod={mod} {...props} />
|
|
33
|
-
}
|
|
34
|
-
if (isSentinelInstance(mod)) {
|
|
35
|
-
return <SentinelSummary mod={mod} {...props} />
|
|
36
|
-
}
|
|
37
|
-
return <ModuleSummary mod={mod} {...props} />
|
|
38
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { VisibilityRounded as VisibilityRoundedIcon } from '@mui/icons-material'
|
|
2
|
-
import type { WitnessInstance } from '@xyo-network/witness-model'
|
|
3
|
-
import React from 'react'
|
|
4
|
-
|
|
5
|
-
import type { ModuleSummaryProps } from './ModuleSummary.tsx'
|
|
6
|
-
import { ModuleSummary } from './ModuleSummary.tsx'
|
|
7
|
-
|
|
8
|
-
export const WitnessSummary: React.FC<ModuleSummaryProps<WitnessInstance>> = ({ mod, ...props }) => {
|
|
9
|
-
return <ModuleSummary mod={mod} icon={<VisibilityRoundedIcon />} {...props} />
|
|
10
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
2
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
3
|
-
import React, { useState } from 'react'
|
|
4
|
-
|
|
5
|
-
import { xyoColorLogo } from '../img/index.ts'
|
|
6
|
-
|
|
7
|
-
export type XyoBusyProps = Omit<FlexBoxProps, 'children'> & {
|
|
8
|
-
busy?: boolean
|
|
9
|
-
spinsPerSecond?: number
|
|
10
|
-
widthInPixels?: number
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const XyoBusy: React.FC<XyoBusyProps> = ({
|
|
14
|
-
widthInPixels, busy, spinsPerSecond = 0.5, ...props
|
|
15
|
-
}) => {
|
|
16
|
-
// preloading image to prevent shifting
|
|
17
|
-
const [imageLoaded, setImageLoaded] = useState(false)
|
|
18
|
-
if (!imageLoaded) {
|
|
19
|
-
const img = new Image()
|
|
20
|
-
img.addEventListener('load', () => setImageLoaded(true))
|
|
21
|
-
img.src = xyoColorLogo
|
|
22
|
-
}
|
|
23
|
-
return imageLoaded
|
|
24
|
-
? (
|
|
25
|
-
<FlexCol
|
|
26
|
-
sx={{
|
|
27
|
-
'@keyframes spin': {
|
|
28
|
-
'0%': { transform: 'rotate(360deg)' },
|
|
29
|
-
'100%': { transform: 'rotate(0deg)' },
|
|
30
|
-
},
|
|
31
|
-
'animation': busy ? `spin ${1 / spinsPerSecond}s linear infinite` : undefined,
|
|
32
|
-
'animationDirection': 'reverse',
|
|
33
|
-
}}
|
|
34
|
-
{...props}
|
|
35
|
-
>
|
|
36
|
-
<img src={xyoColorLogo} height={widthInPixels ?? 22} />
|
|
37
|
-
</FlexCol>
|
|
38
|
-
)
|
|
39
|
-
: null
|
|
40
|
-
}
|
package/src/components/index.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export * from './ArchivistSummary.tsx'
|
|
2
|
-
export * from './BridgeSummary.tsx'
|
|
3
|
-
export * from './DebugDialog.tsx'
|
|
4
|
-
export * from './DivinerSummary.tsx'
|
|
5
|
-
export * from './ModuleAccordion.tsx'
|
|
6
|
-
export * from './ModuleDetails.tsx'
|
|
7
|
-
export * from './ModuleSummary.tsx'
|
|
8
|
-
export * from './NodeDetails.tsx'
|
|
9
|
-
export * from './PoweredByXyo.tsx'
|
|
10
|
-
export * from './PoweredByXyoButton.tsx'
|
|
11
|
-
export * from './SentinelSummary.tsx'
|
|
12
|
-
export * from './TypedModuleSummary.tsx'
|
|
13
|
-
export * from './WitnessSummary.tsx'
|
|
14
|
-
export * from './XyoBusy.tsx'
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import { useAsyncEffect } from '@xylabs/react-async-effect'
|
|
3
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
4
|
-
import { usePromise } from '@xylabs/react-promise'
|
|
5
|
-
import type { Hash } from '@xylabs/sdk-js'
|
|
6
|
-
import { delay } from '@xylabs/sdk-js'
|
|
7
|
-
import { asArchivistInstance } from '@xyo-network/archivist-model'
|
|
8
|
-
import type { PackageManifestPayload } from '@xyo-network/manifest'
|
|
9
|
-
import { ManifestWrapper } from '@xyo-network/manifest'
|
|
10
|
-
import { ModuleFactoryLocator } from '@xyo-network/module-factory-locator'
|
|
11
|
-
import type { NodeInstance } from '@xyo-network/node-model'
|
|
12
|
-
import { NodeProvider } from '@xyo-network/react-node'
|
|
13
|
-
import { HDWallet } from '@xyo-network/wallet'
|
|
14
|
-
import React, { useState } from 'react'
|
|
15
|
-
|
|
16
|
-
import type { PoweredByXyoProps } from '../PoweredByXyo.tsx'
|
|
17
|
-
import { PoweredByXyo } from '../PoweredByXyo.tsx'
|
|
18
|
-
import { simpleNodeInlineManifest } from './manifest.ts'
|
|
19
|
-
|
|
20
|
-
const StorybookEntry = {
|
|
21
|
-
component: PoweredByXyo,
|
|
22
|
-
parameters: { docs: { page: null } },
|
|
23
|
-
title: 'Badge/PoweredByXyo',
|
|
24
|
-
} as Meta<typeof PoweredByXyo>
|
|
25
|
-
|
|
26
|
-
const TemplateContainer: StoryFn<typeof PoweredByXyo> = (props: PoweredByXyoProps) => (
|
|
27
|
-
<FlexCol height="300px" width="100%" sx={{ backgroundColor: 'grey' }}>
|
|
28
|
-
<PoweredByXyo {...props} />
|
|
29
|
-
</FlexCol>
|
|
30
|
-
)
|
|
31
|
-
|
|
32
|
-
const TemplateWithNodeContainer: StoryFn<typeof PoweredByXyo> = (props: PoweredByXyoProps) => {
|
|
33
|
-
const [node, setNode] = useState<NodeInstance>()
|
|
34
|
-
useAsyncEffect(
|
|
35
|
-
async () => {
|
|
36
|
-
const wallet = await HDWallet.random()
|
|
37
|
-
const manifest = new ManifestWrapper(simpleNodeInlineManifest as unknown as PackageManifestPayload, wallet, new ModuleFactoryLocator())
|
|
38
|
-
const [node] = await manifest.loadNodes()
|
|
39
|
-
setNode(node)
|
|
40
|
-
},
|
|
41
|
-
[],
|
|
42
|
-
)
|
|
43
|
-
|
|
44
|
-
usePromise(async () => {
|
|
45
|
-
if (node) {
|
|
46
|
-
const archivist = asArchivistInstance(await node.resolve('Archivist'))
|
|
47
|
-
if (archivist) {
|
|
48
|
-
let calls = 1
|
|
49
|
-
while (calls) {
|
|
50
|
-
calls--
|
|
51
|
-
await archivist.get(['' as Hash])
|
|
52
|
-
await delay(100)
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}, [node])
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<NodeProvider node={node}>
|
|
60
|
-
<FlexCol height="300px" width="100%" sx={{ backgroundColor: 'grey' }}>
|
|
61
|
-
<PoweredByXyo node={node} {...props} />
|
|
62
|
-
</FlexCol>
|
|
63
|
-
</NodeProvider>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const Default = TemplateContainer.bind({})
|
|
68
|
-
|
|
69
|
-
const Busy = TemplateContainer.bind({})
|
|
70
|
-
Busy.args = { busy: true }
|
|
71
|
-
|
|
72
|
-
const WithNode = TemplateWithNodeContainer.bind({})
|
|
73
|
-
|
|
74
|
-
const WithNodeAndDebug = TemplateWithNodeContainer.bind({})
|
|
75
|
-
WithNodeAndDebug.args = { debugDialog: true }
|
|
76
|
-
|
|
77
|
-
export {
|
|
78
|
-
Busy, Default, WithNode, WithNodeAndDebug,
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export default StorybookEntry
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { PoweredByXyoButtonProps } from '../PoweredByXyoButton.tsx'
|
|
5
|
-
import { PoweredByXyoButton } from '../PoweredByXyoButton.tsx'
|
|
6
|
-
|
|
7
|
-
const StorybookEntry = {
|
|
8
|
-
component: PoweredByXyoButton,
|
|
9
|
-
parameters: { docs: { page: null } },
|
|
10
|
-
title: 'Badge/PoweredByXyoButton',
|
|
11
|
-
} as Meta<typeof PoweredByXyoButton>
|
|
12
|
-
|
|
13
|
-
const TemplateContainer: StoryFn<typeof PoweredByXyoButton> = (props: PoweredByXyoButtonProps) => <PoweredByXyoButton {...props} />
|
|
14
|
-
|
|
15
|
-
const Default = TemplateContainer.bind({})
|
|
16
|
-
const Busy = TemplateContainer.bind({})
|
|
17
|
-
Busy.args = { busy: true }
|
|
18
|
-
|
|
19
|
-
export { Busy, Default }
|
|
20
|
-
|
|
21
|
-
export default StorybookEntry
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
|
|
4
|
-
import type { XyoBusyProps } from '../XyoBusy.tsx'
|
|
5
|
-
import { XyoBusy } from '../XyoBusy.tsx'
|
|
6
|
-
|
|
7
|
-
const StorybookEntry = {
|
|
8
|
-
component: XyoBusy,
|
|
9
|
-
parameters: { docs: { page: null } },
|
|
10
|
-
title: 'Badge/XyoBusy',
|
|
11
|
-
} as Meta<typeof XyoBusy>
|
|
12
|
-
|
|
13
|
-
const TemplateContainer: StoryFn<typeof XyoBusy> = (props: XyoBusyProps) => <XyoBusy {...props} />
|
|
14
|
-
|
|
15
|
-
const Default = TemplateContainer.bind({})
|
|
16
|
-
const Busy = TemplateContainer.bind({})
|
|
17
|
-
Busy.args = { busy: true }
|
|
18
|
-
|
|
19
|
-
export { Busy, Default }
|
|
20
|
-
|
|
21
|
-
export default StorybookEntry
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as simpleNodeInlineManifest } from './simple-node-inline-manifest.json' with { type: 'json' }
|