@xyo-network/os-react-runtime 7.2.0 → 7.3.0

package/src/modules/Dapp/ContainerFlexbox.tsx

@@ -1,30 +0,0 @@
-import type { ContainerProps } from '@mui/material'
-import { Container } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-export interface ContainerFlexboxProps extends PropsWithChildren, FlexBoxProps {
-  containerProps?: ContainerProps
-  scrollable?: boolean
-}
-
-export const ContainerFlexbox: React.FC<ContainerFlexboxProps> = ({
-  children, containerProps, scrollable = true, ...props
-}) => {
-  return (
-    <FlexCol
-      id="container-flexbox"
-      alignItems="center"
-      justifyContent="start"
-      width="100%"
-      pt={2}
-      gap={2}
-      overflow={scrollable ? 'auto' : 'unset'}
-      {...props}
-    >
-      <Container {...containerProps}>{children}</Container>
-    </FlexCol>
-  )
-}

package/src/modules/Dapp/Debug/Dialog.tsx

@@ -1,54 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Dialog, DialogActions, DialogContent,
-} from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { XyOsContext } from '@xyo-network/os-model'
-import { NodeProvider } from '@xyo-network/react-node'
-import React, { lazy, Suspense } from 'react'
-
-const Debug = lazy(() => import(/* webpackChunkName: "Debug" */ '@xyo-network/os-react-debug'))
-
-export interface DebugDialogProps extends Omit<DialogProps, 'open'> {
-  closeDebug: () => void
-  debugOpen: boolean
-}
-
-export const LazyDebug = () => (
-  <Suspense fallback={<FlexCol />}>
-    <FlexCol />
-    <Debug height="100%" />
-  </Suspense>
-)
-
-export const DebugDialog: React.FC<DebugDialogProps> = ({
-  closeDebug, debugOpen, ...props
-}) => {
-  return (
-    <Dialog open={debugOpen} onClose={closeDebug} fullScreen {...props}>
-      <DialogContent>
-        <LazyDebug />
-      </DialogContent>
-      <DialogActions>
-        <ButtonEx variant="outlined" onClick={closeDebug}>
-          Close
-        </ButtonEx>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export interface DebugDialogWithNodeProps extends DebugDialogProps {
-  context: XyOsContext | undefined | null
-}
-
-export const DebugDialogWithNode: React.FC<DebugDialogWithNodeProps> = ({
-  closeDebug, debugOpen, context, ...props
-}) => {
-  return (
-    <NodeProvider node={context?.root}>
-      <DebugDialog closeDebug={closeDebug} debugOpen={debugOpen} {...props} />
-    </NodeProvider>
-  )
-}

package/src/modules/Dapp/Debug/index.ts

@@ -1 +0,0 @@
-export * from './Dialog.tsx'

package/src/modules/Dapp/EnterAnimation.tsx

@@ -1,54 +0,0 @@
-import { animated, useSpring } from '@react-spring/web'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import React, { useEffect, useState } from 'react'
-
-export interface RotationAnimationProps extends FlexBoxProps {
-  rotation: number
-}
-export const RotationAnimation: React.FC<RotationAnimationProps> = ({ children, rotation }) => {
-  const [isRotated, setIsRotated] = useState(false)
-  const [springs, api] = useSpring(() => ({
-    backfaceVisibility: 'hidden',
-    config: {
-      friction: 10,
-      tension: 300,
-    },
-    display: 'inline-block',
-    from: { rotate: '0deg' },
-  }))
-
-  const handleHover = () => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    api.start({
-      from: { rotate: '0deg' },
-      to: { rotate: `${rotation}deg` },
-    })
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    api.start({
-      from: { rotate: `${rotation}deg` },
-      to: { rotate: '0deg' },
-    })
-  }
-
-  useEffect(() => {
-    if (!isRotated) {
-      return
-    }
-    const timeoutId = globalThis.setTimeout(() => {
-      setIsRotated(false)
-    }, 5)
-    return () => {
-      globalThis.clearTimeout(timeoutId)
-    }
-  }, [isRotated])
-
-  return (
-    <animated.div
-      onMouseEnter={handleHover}
-      style={{ ...springs }}
-    >
-      {children}
-    </animated.div>
-  )
-}

package/src/modules/Dapp/Page/DappPage.tsx

@@ -1,115 +0,0 @@
-import type { Breakpoint, TypographyProps } from '@mui/material'
-import { Container, Typography } from '@mui/material'
-import { ThrownErrorBoundary } from '@xylabs/react-error'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { ModuleError } from '@xyo-network/payload-model'
-import React from 'react'
-import type Rollbar from 'rollbar'
-
-import { NetworkReadyFlexBox } from '../../network/index.ts'
-import { ErrorRenderWithSupportDefault } from '../Alert/index.ts'
-
-export interface SharedDappPageProps extends FlexBoxProps {
-  checkNetwork?: boolean
-  noScroll?: boolean
-  subtitle?: string
-  titleProps?: TypographyProps
-}
-
-export interface DappPageProps extends SharedDappPageProps {
-  container?: true | Breakpoint
-  rollbar?: Rollbar
-}
-
-export const DappTitle: React.FC<SharedDappPageProps> = ({
-  subtitle, title, ...props
-}) => {
-  return title
-    ? (
-        <FlexCol alignItems="flex-start" gap={1} {...props}>
-          <Typography variant="h3">
-            <b>{title}</b>
-          </Typography>
-          <Typography gutterBottom variant="subtitle2">
-            {subtitle}
-          </Typography>
-        </FlexCol>
-      )
-    : null
-}
-
-const InnerDappPage: React.FC<SharedDappPageProps> = ({
-  noScroll, children, subtitle, title, sx, titleProps, ...props
-}) => {
-  return (
-    <FlexCol
-      id="innerPage"
-      sx={{
-        margin: 2,
-        ...sx,
-      }}
-      gap={noScroll ? 0 : 2}
-      alignItems="stretch"
-      justifyContent="flex-start"
-      {...props}
-    >
-      {title
-        ? <DappTitle subtitle={subtitle} title={title} {...titleProps} />
-        : null}
-      {children}
-    </FlexCol>
-  )
-}
-// This component is written to be used inside of a DappWindow Component
-export const DappPage: React.FC<DappPageProps> = ({
-  checkNetwork, noScroll, subtitle, title, container, rollbar, ...props
-}) => {
-  return (
-    <ThrownErrorBoundary<ModuleError>
-      errorComponent={(error, boundaryName) => <ErrorRenderWithSupportDefault scope={boundaryName} error={error} />}
-      rollbar={rollbar}
-      scope="DappPage"
-    >
-      <NetworkReadyFlexBox skipCheck={!checkNetwork}>
-        {container
-          ? (
-              <Container disableGutters maxWidth={container === true ? 'md' : container}>
-                {noScroll
-                  ? (
-                      <FlexCol sx={{
-                        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
-                      }}
-                      >
-                        <InnerDappPage noScroll={noScroll} title={title} subtitle={subtitle} {...props} flexGrow={1} />
-                      </FlexCol>
-                    )
-                  : (
-                      <FlexCol width="100%" height="100%" alignItems="stretch">
-                        <InnerDappPage noScroll={noScroll} title={title} subtitle={subtitle} {...props} flexGrow={1} />
-                      </FlexCol>
-                    )}
-              </Container>
-            )
-          : noScroll
-            ? (
-                <InnerDappPage
-                  sx={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                  noScroll={noScroll}
-                  title={title}
-                  subtitle={subtitle}
-                  {...props}
-                  flexGrow={1}
-                />
-              )
-            : <InnerDappPage noScroll={noScroll} title={title} subtitle={subtitle} {...props} flexGrow={1} />}
-      </NetworkReadyFlexBox>
-    </ThrownErrorBoundary>
-  )
-}

package/src/modules/Dapp/Page/DappPathSwitcher.tsx

@@ -1,58 +0,0 @@
-/* eslint-disable react-x/jsx-no-iife */
-import { animated, useTransition } from '@react-spring/web'
-import { ErrorRender } from '@xylabs/react-error'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-export interface PathToComponent<PathNames extends string = string> {
-  component: ReactNode
-  path: PathNames
-}
-
-export interface DappPathSwitcherProps {
-  activePath?: string
-  pathToComponent?: PathToComponent[]
-}
-
-export const DappPathSwitcher: React.FC<DappPathSwitcherProps> = ({ activePath, pathToComponent }) => {
-  // inspired by - https://codesandbox.io/p/sandbox/react-spring-page-transition-3vrk8
-  const transitions = useTransition(activePath, {
-    enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
-    from: { opacity: 0, transform: 'translate3d(100vw, 0, 0)' },
-    leave: { opacity: 0, transform: 'translate3d(0, 0, 0)' },
-  })
-  const possibleZIndex = pathToComponent?.findIndex(item => item.path === activePath)
-  const zIndex = possibleZIndex !== -1 && possibleZIndex !== undefined ? possibleZIndex : 1
-
-  return (
-    <>
-      {transitions((transitionProps, activePathRef) => (
-        <animated.div
-          style={{
-            ...transitionProps,
-            alignItems: 'stretch',
-            bottom: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'stretch',
-            left: 0,
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            zIndex,
-          }}
-        >
-          {(() => {
-            const activeIndex = pathToComponent?.findIndex(({ path: componentPath }) => activePathRef === componentPath)
-            const activeItem = pathToComponent && activeIndex !== -1 && activeIndex !== undefined ? pathToComponent[activeIndex] : undefined
-            return activeItem
-              ? activeItem.component
-              : <ErrorRender error={new Error(`No component found for path: ${activePathRef}`)} scope="DappPathSwitcher" />
-          })()}
-        </animated.div>
-      ))}
-    </>
-  )
-}

package/src/modules/Dapp/Page/DividerChip.tsx

@@ -1,31 +0,0 @@
-import type { ChipProps } from '@mui/material'
-import { Chip, CircularProgress } from '@mui/material'
-import type { RegisteredDappSet } from '@xyo-network/os-model'
-import React from 'react'
-
-export interface DividerChipProps extends ChipProps {
-  registeredDapps?: RegisteredDappSet[]
-}
-
-export const DividerChip: React.FC<DividerChipProps> = ({ registeredDapps, ...props }) => {
-  return (
-    <Chip
-      avatar={
-        registeredDapps === undefined
-          ? (
-              <span>
-                <CircularProgress
-                  size="small"
-                  sx={{ display: 'inline' }}
-                />
-              </span>
-            )
-          : undefined
-      }
-      label={`${registeredDapps?.length ? '' : 'Loading '}Beta dApps`}
-      size="small"
-      sx={{ gap: 0.5 }}
-      {...props}
-    />
-  )
-}

package/src/modules/Dapp/Page/Row.tsx

@@ -1,69 +0,0 @@
-import {
-  Divider, Fade, styled,
-} from '@mui/material'
-import type { DappIntent, InstallationType } from '@xyo-network/os-model'
-import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
-import React, { useMemo } from 'react'
-
-import { DappInstallTypeFilters } from '../../../utils/index.ts'
-import { DappContainerMemo } from '../Container.tsx'
-import { DividerChip } from './DividerChip.js'
-
-export interface DappsRowProps {
-  chipLabel: string
-  currentIntent?: DappIntent
-  installType: InstallationType
-  registeredDappsSet?: RegisteredReactDappSet[]
-  xnsNetwork: string | undefined
-  xnsNodeUrl: string | undefined
-}
-
-export const DappsRow: React.FC<DappsRowProps> = ({
-  chipLabel, currentIntent, installType, registeredDappsSet, xnsNetwork, xnsNodeUrl,
-}) => {
-  const filteredRegisteredDappSets = useMemo(() => DappInstallTypeFilters[installType](registeredDappsSet), [installType, registeredDappsSet])
-
-  return (
-    <>
-      <Divider
-        variant="middle"
-        sx={{ marginY: 3 }}
-        flexItem
-      >
-        <DividerChip
-          label={`${filteredRegisteredDappSets === undefined ? 'Loading ' : ''}${chipLabel}`}
-          registeredDapps={filteredRegisteredDappSets}
-        />
-      </Divider>
-      {filteredRegisteredDappSets?.length
-        ? (
-            <Fade in={!!filteredRegisteredDappSets?.length} timeout={1000}>
-              <StyledGridContainer>
-                {filteredRegisteredDappSets?.map(
-                  dappSet => (
-                    <DappContainerMemo
-                      currentIntent={currentIntent}
-                      key={dappSet.dapp.config.name}
-                      dappSet={dappSet as RegisteredReactDappSet}
-                      xnsNodeUrl={xnsNodeUrl}
-                      xnsNetwork={xnsNetwork}
-                    />
-                  ),
-                )}
-              </StyledGridContainer>
-            </Fade>
-          )
-        : null}
-    </>
-  )
-}
-
-export const StyledGridContainer = styled('div', { name: 'StyledGridContainer' })(({ theme }) => ({
-  display: 'grid',
-  gridGap: theme.spacing(2),
-  gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(8)})`,
-  justifyContent: 'center',
-  justifyItems: 'center',
-  paddingTop: theme.spacing(1),
-  width: '100%',
-}))

package/src/modules/Dapp/Page/index.ts

@@ -1,3 +0,0 @@
-export * from './DappPage.tsx'
-export * from './DappPathSwitcher.tsx'
-export * from './Row.js'

package/src/modules/Dapp/RenderHtml.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-export const RenderHtml = ({ htmlString }: {
-  htmlString: string
-}) => {
-  return (
-    <div
-      style={{ height: 64, width: 64 }}
-      dangerouslySetInnerHTML={{ __html: htmlString }}
-    />
-  )
-}

package/src/modules/Dapp/index.ts

@@ -1,8 +0,0 @@
-export * from './Alert/index.ts'
-export * from './Container.js'
-export * from './ContainerFlexbox.js'
-export * from './Debug/index.ts'
-export * from './modules/index.ts'
-export * from './Page/index.ts'
-export * from './RenderHtml.tsx'
-export * from './useDappCaller.ts'

package/src/modules/Dapp/lib/DappState.ts

@@ -1,5 +0,0 @@
-export interface DappState {
-  active: boolean
-  closed: boolean
-  minimized: boolean
-}

package/src/modules/Dapp/lib/DefaultIconSize.ts

@@ -1 +0,0 @@
-export const DEFAULT_ICON_SIZE = 84

package/src/modules/Dapp/lib/deriveDappState.ts

@@ -1,16 +0,0 @@
-import type { DappIntent } from '@xyo-network/os-model'
-import { DappIntentTypes } from '@xyo-network/os-model'
-
-import type { DappState } from './DappState.ts'
-
-export const deriveDappState = (intent?: DappIntent): DappState => {
-  const minimized = intent?.intent === DappIntentTypes.Minimize
-  const active = intent?.intent === DappIntentTypes.Launch
-  const closed = intent?.intent === DappIntentTypes.Close
-
-  return {
-    active,
-    closed,
-    minimized,
-  }
-}

package/src/modules/Dapp/lib/index.ts

@@ -1,3 +0,0 @@
-export * from './DappState.ts'
-export * from './DefaultIconSize.ts'
-export * from './deriveDappState.ts'

package/src/modules/Dapp/modules/Window/AppBar.tsx

@@ -1,115 +0,0 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
-import {
-  BugReport,
-  CloseRounded,
-  RemoveRounded,
-} from '@mui/icons-material'
-import type { AppBarProps } from '@mui/material'
-import {
-  AppBar, Box, Divider, IconButton, Toolbar, Tooltip, Typography,
-} from '@mui/material'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import { ColorSchemeButton } from '@xylabs/react-theme'
-import type {
-  DappName, DappVersion, XyOsContext,
-} from '@xyo-network/os-model'
-import { DappIntentTypes } from '@xyo-network/os-model'
-import { DappIntentCaller } from '@xyo-network/os-runtime'
-import React from 'react'
-
-import { useSendDappIntent } from '../../../intent/index.ts'
-import { DebugDialogWithNode } from '../../Debug/index.ts'
-import { useDebugClick } from './hooks/index.ts'
-
-export interface DappBarProps extends AppBarProps {
-  context?: XyOsContext | null
-  name?: DappName
-  simplifiedAppBar?: boolean
-  version?: DappVersion
-}
-
-export const EmptyDappBarForPadding: React.FC<DappBarProps> = (props) => {
-  return (
-    <AppBar
-      color="primary"
-      sx={{ flexDirection: 'row' }}
-      component="div"
-      position="fixed"
-      {...props}
-    >
-    </AppBar>
-  )
-}
-
-export const DappBar: React.FC<DappBarProps> = ({
-  title, context, name, ...props
-}) => {
-  const sendIntent = useSendDappIntent()
-
-  const {
-    closeDebug, debugOpen, openDebug,
-  } = useDebugClick()
-
-  return (
-    <AppBar
-      elevation={0}
-      color="transparent"
-      sx={{ backgroundColor: 'transparent', flexDirection: 'row' }}
-      component="div"
-      position="sticky"
-      {...props}
-    >
-      <Toolbar
-        disableGutters
-        sx={{ paddingX: 2 }}
-      >
-        <Typography noWrap variant="h6" letterSpacing="-1px">
-          {title}
-        </Typography>
-      </Toolbar>
-      <FlexGrowRow />
-      <Toolbar
-        disableGutters
-        sx={{ paddingX: 2 }}
-      >
-        <IconButton
-          onClick={openDebug}
-          sx={{ display: { md: 'none', xs: 'flex' } }}
-        >
-          <BugReport />
-        </IconButton>
-        <Tooltip
-          title="Toggle Light/Dark Mode"
-          sx={{ display: { md: 'none', xs: 'flex' } }}
-        >
-          <Box>
-            <ColorSchemeButton />
-          </Box>
-        </Tooltip>
-        <Divider
-          orientation="vertical"
-          flexItem
-          sx={{
-            display: { md: 'none', xs: 'flex' },
-            m: 1,
-          }}
-        />
-        <Tooltip title="Minimize">
-          <IconButton
-            onClick={async () => await sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Minimize, name))}
-          >
-            <RemoveRounded htmlColor="inherit" />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Close">
-          <IconButton
-            onClick={async () => await sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Close, name))}
-          >
-            <CloseRounded htmlColor="inherit" />
-          </IconButton>
-        </Tooltip>
-      </Toolbar>
-      <DebugDialogWithNode closeDebug={closeDebug} debugOpen={debugOpen} context={context} />
-    </AppBar>
-  )
-}

package/src/modules/Dapp/modules/Window/Chrome.tsx

@@ -1,79 +0,0 @@
-import type { Theme } from '@mui/material'
-import { useMediaQuery } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import {
-  FlexCol, FlexGrowCol, FlexRow,
-} from '@xylabs/react-flexbox'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-export interface DappChromeBaseProps extends FlexBoxProps {
-  appBar?: ReactNode
-  children?: ReactNode
-  screenMenu?: ReactNode
-  splashScreen?: ReactNode
-}
-
-export interface DappChromeProps extends DappChromeBaseProps {
-  largeScreenMenu?: ReactNode
-  smallScreenMenu?: ReactNode
-}
-
-const DappChromeSmall: React.FC<DappChromeBaseProps> = ({
-  appBar, children, screenMenu, splashScreen, ...props
-}) => {
-  return (
-    <FlexCol alignItems="stretch" id="dapp-chrome-container-small" {...props}>
-      {splashScreen}
-      <FlexGrowCol
-        alignItems="stretch"
-        id="dapp-chrome-small"
-        justifyContent="start"
-        sx={{ background: (theme: Theme) => theme.vars?.palette.background.default }}
-      >
-        {appBar}
-        <FlexGrowCol
-          sx={{ overflowY: 'auto' }}
-          alignItems="stretch"
-        >
-          {children}
-        </FlexGrowCol>
-        {screenMenu}
-      </FlexGrowCol>
-    </FlexCol>
-  )
-}
-
-export const DappChromeLarge: React.FC<DappChromeBaseProps> = ({
-  appBar, children, screenMenu, splashScreen, ...props
-}) => {
-  return (
-    <FlexRow alignItems="stretch" id="dapp-chrome-container-large" {...props}>
-      {splashScreen}
-      {screenMenu}
-      <FlexGrowCol
-        alignItems="stretch"
-        id="dapp-chrome-large"
-        justifyContent="start"
-        sx={{ background: (theme: Theme) => theme.vars?.palette.background.default }}
-      >
-        {appBar}
-        <FlexGrowCol
-          sx={{ overflowY: 'auto' }}
-          alignItems="stretch"
-          justifyContent="flex-start"
-        >
-          {children}
-        </FlexGrowCol>
-      </FlexGrowCol>
-    </FlexRow>
-  )
-}
-
-export const DappChrome: React.FC<DappChromeProps> = ({
-  largeScreenMenu, smallScreenMenu, ...props
-}) => {
-  const isMedium = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'))
-
-  return isMedium ? <DappChromeLarge screenMenu={largeScreenMenu} {...props} /> : <DappChromeSmall screenMenu={smallScreenMenu} {...props} />
-}