@xyo-network/react-powered-by-xyo 7.5.8 → 7.5.12

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.
Files changed (32) hide show
  1. package/dist/browser/components/PoweredByXyo.d.ts.map +1 -1
  2. package/dist/browser/components/XyoBusy.d.ts.map +1 -1
  3. package/dist/browser/index.mjs +274 -336
  4. package/dist/browser/index.mjs.map +1 -1
  5. package/package.json +151 -44
  6. package/src/components/ArchivistSummary.tsx +0 -10
  7. package/src/components/BridgeSummary.tsx +0 -10
  8. package/src/components/DebugDialog.tsx +0 -23
  9. package/src/components/DivinerSummary.tsx +0 -10
  10. package/src/components/JsonViewerButton.tsx +0 -37
  11. package/src/components/ModuleAccordion.tsx +0 -28
  12. package/src/components/ModuleDetails.tsx +0 -92
  13. package/src/components/ModuleSummary.tsx +0 -45
  14. package/src/components/NodeDetails.tsx +0 -30
  15. package/src/components/NodeSummary.tsx +0 -31
  16. package/src/components/PoweredByXyo.tsx +0 -136
  17. package/src/components/PoweredByXyoButton.tsx +0 -55
  18. package/src/components/SentinelSummary.tsx +0 -10
  19. package/src/components/TypedModuleSummary.tsx +0 -38
  20. package/src/components/WitnessSummary.tsx +0 -10
  21. package/src/components/XyoBusy.tsx +0 -40
  22. package/src/components/index.ts +0 -14
  23. package/src/components/stories/PoweredByXyo.stories.tsx +0 -81
  24. package/src/components/stories/PoweredByXyoButton.stories.tsx +0 -21
  25. package/src/components/stories/XyoBusy.stories.tsx +0 -21
  26. package/src/components/stories/manifest.ts +0 -1
  27. package/src/components/stories/simple-node-inline-manifest.json +0 -56
  28. package/src/img/index.ts +0 -2
  29. package/src/img/xyo-color-logo-text-only.svg +0 -1
  30. package/src/img/xyo-color-logo.svg +0 -1
  31. package/src/index.ts +0 -1
  32. 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
- }
@@ -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' }