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

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

@@ -1,39 +0,0 @@
-import { Snackbar } from '@mui/material'
-import { ErrorBoundary, ErrorRender } from '@xylabs/react-error'
-import type { PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
-
-import {
-  useManageDappInjectableParamsFromRoute, useManageDappPathFromRoute, useSyncOsRegisteredAccessInterfaces,
-} from './hooks/index.ts'
-import { DappMetaTags } from './MetaTags.tsx'
-import type { DappWindowProps } from './types/index.ts'
-
-/** A component that can load immediately, but delays node loading and dapp mounting till corresponding launch intent arrives */
-export const DappWindow: React.FC<DappWindowProps & PropsWithChildren> = ({
-  children, context, dapp, dappMenuProperties, dappState,
-}) => {
-  const { name } = dapp?.config ?? {}
-
-  const { active } = dappState ?? {}
-
-  useSyncOsRegisteredAccessInterfaces(context)
-  const routingError = useManageDappPathFromRoute(context, name)
-  const injectableErrors = useManageDappInjectableParamsFromRoute(context)
-
-  const resolvedErrors = useMemo(() => [...injectableErrors, routingError].filter(Boolean), [injectableErrors, routingError])
-
-  return (
-    <ErrorBoundary>
-      <DappMetaTags active={active} activePath={dappMenuProperties?.activePath} dappName={name} />
-      {resolvedErrors.map(error => (
-        <Snackbar
-          key={error?.message}
-          open={!!error}
-          message={<ErrorRender error={error} scope="DappWindow" />}
-        />
-      ))}
-      {children}
-    </ErrorBoundary>
-  )
-}

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

@@ -1,99 +0,0 @@
-import {
-  Fade, styled, Typography,
-} from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { DappName } from '@xyo-network/os-model'
-import React, { useEffect, useState } from 'react'
-
-import { LoadingOsLogo } from '../../../LoadingOsLogo/index.ts'
-import { useSkipLoadingScreen } from './hooks/index.ts'
-import { TextTrail } from './Trail.js'
-
-export interface DappLoadingFlexBoxProps extends FlexBoxProps {
-  minimize: boolean
-  name?: DappName
-  open: boolean
-}
-
-export const DappLoadingFlexbox: React.FC<DappLoadingFlexBoxProps> = ({
-  minimize, open, name, ...props
-}) => {
-  // keep slash visible when open is false
-  const [fadeIn, setFadeIn] = useState(!open)
-  const [trail, setTrail] = useState(false)
-  const skipLoadingScreen = useSkipLoadingScreen()
-
-  // For now, loading of the node is instantaneous so this is meant to ensure we pause 1.5s minimum before
-  // hiding splash ui
-  useEffect(() => {
-    if (open) {
-      if (skipLoadingScreen) {
-        setFadeIn(false)
-        return
-      }
-      // Sets time of load experience & fade
-      const fadeInTimeout = setTimeout(() => {
-        setFadeIn(false)
-      }, 2000)
-
-      let trailTimeout = setTimeout(() => {
-        setTrail(true)
-        // Re-set trail after time passes
-        trailTimeout = setTimeout(() => {
-          setTrail(false)
-        }, 4000)
-      }, 300)
-      return () => {
-        clearTimeout(fadeInTimeout)
-        clearTimeout(trailTimeout)
-      }
-    }
-    // if not open and not minimized, reset fadeIn
-    if (!minimize) {
-      setFadeIn(true)
-    }
-  }, [minimize, open, skipLoadingScreen])
-
-  return (
-    <Fade in={fadeIn} unmountOnExit>
-      <StyledSplashContainer {...props}>
-        <LoadingOsLogo widthInPixels={100} busy position="absolute" />
-        <TextTrail open={trail} flexDirection="row">
-          <Typography
-            textAlign="center"
-            sx={{ fontSize: { md: '3em', xs: '2em' } }}
-          >
-            Loading
-          </Typography>
-          <Typography
-            textAlign="center"
-            sx={{ fontSize: { md: '3em', xs: '2em' } }}
-          >
-            {name}
-          </Typography>
-          <Typography
-            textAlign="center"
-            sx={{ fontSize: { md: '3em', xs: '2em' } }}
-          >
-            dApp
-          </Typography>
-        </TextTrail>
-      </StyledSplashContainer>
-    </Fade>
-  )
-}
-
-const StyledSplashContainer = styled(FlexCol, { name: 'StyledSplashContainer' })(({ theme }) => {
-  return {
-    background: theme.vars?.palette.background.default,
-    color: theme.vars?.palette.text.primary,
-    gap: theme.spacing(1),
-    height: '100%',
-    left: 0,
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    zIndex: 999,
-  }
-})

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

@@ -1,27 +0,0 @@
-import { NameTransforms } from '@xyo-network/os-runtime'
-import React from 'react'
-import { Helmet } from 'react-helmet'
-
-export interface DappMetaTagsProps {
-  active?: boolean
-  activePath?: string
-  dappName?: string
-}
-
-export const DappMetaTags: React.FC<DappMetaTagsProps> = ({
-  active, activePath, dappName,
-}) => {
-  return active
-    ? (
-        <Helmet>
-          <title>
-            {activePath ? `${new NameTransforms(activePath).deSlug()} | ` : ''}
-            {' '}
-            {dappName}
-            {' '}
-            dApp
-          </title>
-        </Helmet>
-      )
-    : null
-}

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

@@ -1,16 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { useProvidedNode } from '@xyo-network/react-node'
-import React from 'react'
-
-export const NodeManifest = () => {
-  const [node] = useProvidedNode()
-  const [nodeManifest] = usePromise(async () => await node?.manifest(3), [node])
-
-  return (
-    <>
-      {node
-        ? <pre>{JSON.stringify(nodeManifest, null, 2)}</pre>
-        : null}
-    </>
-  )
-}

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

@@ -1,101 +0,0 @@
-import { ErrorRender } from '@xylabs/react-error'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { NameTransforms } from '@xyo-network/os-runtime'
-import { NodeProvider } from '@xyo-network/react-node'
-import { WalletProvider } from '@xyo-network/react-wallet'
-import React from 'react'
-
-import { XyOsUiContextProvider } from '../../../XyOsUi/index.ts'
-import { DappAccessFlexbox } from '../access-interface/index.ts'
-import { DappBar } from './AppBar.tsx'
-import { DappChrome } from './Chrome.tsx'
-import { DappBottomNavigation, DappMenuDrawer } from './components/index.ts'
-import { useDecomposeDapp } from './hooks/index.ts'
-import { DappLoadingFlexbox } from './LoadingFlexbox.tsx'
-import type { DappWindowProps } from './types/index.ts'
-
-/** A pure component that can render a dapp via props only */
-export const DappRendered: React.FC<DappWindowProps> = ({
-  context, dapp, dappMenuProperties, dappState, dappWallet, errors,
-}) => {
-  const {
-    DappComponent, name, scrollable = true, version,
-  } = useDecomposeDapp(dapp)
-
-  const { active, minimized } = dappState ?? {}
-
-  const hasErrors = errors && errors.length > 0
-
-  return (
-    <DappChrome
-    /* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */
-      appBar={(
-        <DappBar
-          context={context}
-          name={name}
-          version={version}
-          title={dappMenuProperties?.activePath ? new NameTransforms(dappMenuProperties.activePath).deSlug() : ''}
-        />
-      )}
-      height="100dvh"
-      width="100dvw"
-      largeScreenMenu={active && (
-        <DappMenuDrawer
-          context={context}
-          name={name}
-          version={version}
-          {...dappMenuProperties}
-        />
-      )}
-      smallScreenMenu={active && (
-        <DappBottomNavigation
-          {...dappMenuProperties}
-          sx={{ display: dappMenuProperties?.menuConfig ? 'flex' : 'none' }}
-        />
-      )}
-      /* Ensure that loading goes away when error occurs */
-      splashScreen={hasErrors ? null : <DappLoadingFlexbox minimize={!!minimized} name={name} open={!!active} />}
-    >
-      {hasErrors
-        ? (
-            <FlexCol padding={2}>
-              {errors?.map(error => (
-                <ErrorRender key={error?.message} error={error} scope="DappWindow" />
-              ))}
-            </FlexCol>
-          )
-        : null}
-      <WalletProvider rootWallet={dappWallet}>
-        {/* Only load the dapp component when the dapp's node exists and dapp is launched */}
-        {context === null
-          ? null
-          : (
-              <XyOsUiContextProvider value={context}>
-                {/* Prevent dapps from reaching out to the os node */}
-                <NodeProvider node={context?.root}>
-                  {active
-                    ? (
-                        <>
-                          <FlexCol
-                            position="absolute"
-                            top={0}
-                            left={0}
-                            right={0}
-                            bottom={0}
-                            alignItems="stretch"
-                            justifyContent="stretch"
-                            sx={{ overflowY: scrollable ? 'auto' : 'hidden' }}
-                          >
-                            <DappComponent name={dapp?.config.name} />
-                          </FlexCol>
-                          <DappAccessFlexbox context={context} />
-                        </>
-                      )
-                    : null}
-                </NodeProvider>
-              </XyOsUiContextProvider>
-            )}
-      </WalletProvider>
-    </DappChrome>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { a, useTrail } from '@react-spring/web'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import React from 'react'
-
-interface TextTrailProps extends FlexBoxProps {
-  open: boolean
-}
-
-export const TextTrail: React.FC<TextTrailProps> = ({ open, children }) => {
-  const items = React.Children.toArray(children)
-  const trail = useTrail(items.length, {
-    config: {
-      friction: 200, mass: 5, tension: 2000,
-    },
-    from: {
-      height: 'auto', opacity: 0, y: 20,
-    },
-    height: 'auto',
-    opacity: open ? 1 : 0,
-    y: open ? 0 : 60,
-  })
-  return (
-    <div>
-      {trail.map(({ height, ...style }, index) => (
-        <a.div key={index} style={style}>
-          <a.div style={{ height }}>
-            {items[index]}
-          </a.div>
-        </a.div>
-      ))}
-    </div>
-  )
-}

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/DefaultComingSoon.tsx

@@ -1,82 +0,0 @@
-import {
-  Card, CardContent, Chip, Container, Divider, Typography, useTheme,
-} from '@mui/material'
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
-import { alphaCss } from '@xylabs/react-theme'
-import type { DappName, DappVersion } from '@xyo-network/os-model'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { InstallButtonSection } from './InstallButtonSection.js'
-import { SummarySection } from './SummarySection.js'
-
-export interface DefaultComingSoonProps extends PropsWithChildren {
-  children?: React.ReactNode
-  dappIconSvg?: string
-  desc?: Array<string>
-  developerLink?: string
-  name?: DappName
-  version?: DappVersion
-}
-
-const defaultDescription = ['Description coming soon!']
-
-export const DefaultComingSoon: React.FC<DefaultComingSoonProps> = ({
-  children,
-  desc = defaultDescription,
-  developerLink = 'https://xylabs.com',
-  name,
-  dappIconSvg,
-  version,
-}) => {
-  const theme = useTheme()
-
-  return (
-    <Container
-      maxWidth="md"
-      sx={{
-        minHeight: '100%', overflow: 'auto', paddingTop: 2, width: '100%',
-      }}
-    >
-      {version
-        ? null
-        : (
-            <FlexRow width="100%" paddingBottom={2}>
-              <Chip
-                label="This app is not yet publicly available on xyOS"
-                sx={{
-                  backgroundColor: alphaCss(theme.vars?.palette.info.main ?? '#000', 0.2), color: theme.vars?.palette.info.main, width: '100%',
-                }}
-              >
-              </Chip>
-            </FlexRow>
-          )}
-      <FlexGrowCol width="100%" alignItems="flex-start" minHeight="100%">
-        <FlexGrowCol width="100%" alignItems="stretch" justifyContent="flex-start" gap={2}>
-          <SummarySection dappIconSvg={dappIconSvg} name={name} version={version} developerLink={developerLink} />
-          <InstallButtonSection />
-          <Divider flexItem />
-          <Card>
-            <CardContent>
-              <FlexGrowCol justifyContent="flex-start" alignItems="flex-start">
-                <Typography variant="h6" gutterBottom>
-                  Learn more about
-                  {' '}
-                  {name}
-                </Typography>
-                {desc?.map((paragraph: string, index: number) => {
-                  return (
-                    <Typography gutterBottom paddingBottom={1} key={index} variant="body1">
-                      {paragraph}
-                    </Typography>
-                  )
-                })}
-              </FlexGrowCol>
-            </CardContent>
-          </Card>
-          {children}
-        </FlexGrowCol>
-      </FlexGrowCol>
-    </Container>
-  )
-}

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/DeveloperLinkSection.tsx

@@ -1,27 +0,0 @@
-import { useTheme } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import { LinkEx } from '@xylabs/react-link'
-import React from 'react'
-
-export interface DeveloperLinkSectionProps extends FlexBoxProps {
-  developerLink: string
-}
-
-export const DeveloperLinkSection: React.FC<DeveloperLinkSectionProps> = ({ developerLink = 'https://xylabs.com', ...props }) => {
-  const theme = useTheme()
-  return (
-    <FlexGrowRow
-      gap={1}
-      sx={{
-        alignItems: 'flex-start',
-        flexDirection: { md: 'row', xs: 'column' },
-      }}
-      {...props}
-    >
-      <LinkEx color={theme.vars?.palette.info.main} href={developerLink} target="_blank">
-        {developerLink}
-      </LinkEx>
-    </FlexGrowRow>
-  )
-}

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/InstallButtonSection.tsx

@@ -1,34 +0,0 @@
-import { ButtonEx } from '@xylabs/react-button'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export interface InstallButtonSectionProps extends FlexBoxProps {
-  installLink?: string
-  notificationLink?: string
-}
-
-export const InstallButtonSection: React.FC<InstallButtonSectionProps> = ({
-  installLink = '',
-  notificationLink = 'https://xyo.network/newsletter',
-  ...props
-}) => {
-  return (
-    <FlexRow
-      width="100%"
-      gap={1}
-      sx={{
-        alignItems: 'flex-start',
-        flexDirection: { md: 'row', xs: 'column' },
-      }}
-      {...props}
-    >
-      <ButtonEx fullWidth variant="contained" disabled href={installLink}>
-        Install
-      </ButtonEx>
-      <ButtonEx fullWidth variant="outlined" href={notificationLink} target="_blank">
-        Get Notified When Available
-      </ButtonEx>
-    </FlexRow>
-  )
-}

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/SummarySection.tsx

@@ -1,73 +0,0 @@
-import { VerifiedRounded } from '@mui/icons-material'
-import {
-  Card, CardContent, Typography, useTheme,
-} from '@mui/material'
-import {
-  FlexGrowCol, FlexGrowRow, FlexRow,
-} from '@xylabs/react-flexbox'
-import type { DappName, DappVersion } from '@xyo-network/os-model'
-import React from 'react'
-
-import { RenderHtml } from '../../../../RenderHtml.tsx'
-import { DeveloperLinkSection } from './DeveloperLinkSection.js'
-
-export interface SummarySectionProps {
-  dappIconSvg?: string
-  developerLink: string
-  name?: DappName
-  version?: DappVersion
-}
-
-export const SummarySection: React.FC<SummarySectionProps> = ({
-  name, dappIconSvg, version = '1.0', developerLink = 'https://xylabs.com',
-}) => {
-  const theme = useTheme()
-  return (
-    <Card sx={{ width: '100%' }}>
-      <CardContent>
-        <FlexRow
-          gap={3}
-          alignItems="flex-start"
-          sx={{ flexDirection: 'column', width: '100%' }}
-        >
-          <FlexGrowRow
-            sx={{ gap: { md: 2, xs: 1 } }}
-            alignItems="flex-start"
-          >
-            <Card elevation={0} variant="outlined">
-              <CardContent>
-                {dappIconSvg
-                  ? <RenderHtml htmlString={dappIconSvg} />
-                  : null}
-              </CardContent>
-            </Card>
-            <FlexGrowCol alignItems="flex-start">
-              <FlexGrowCol alignItems="flex-start">
-                <Typography
-                  sx={{ fontSize: { md: theme.typography.h1.fontSize, xs: theme.typography.h5.fontSize } }}
-                  fontWeight={theme.typography.fontWeightBold}
-                >
-                  {name}
-                </Typography>
-                <Typography gutterBottom variant="subtitle2">
-                  Version:
-                  {' '}
-                  {version}
-                </Typography>
-              </FlexGrowCol>
-              <FlexGrowRow gap={0.5} alignItems="center" justifyContent="center">
-                <VerifiedRounded color="success" fontSize="small" />
-                <Typography variant="body1" color={theme.vars?.palette.success.main}>
-                  XY Labs
-                </Typography>
-              </FlexGrowRow>
-              {developerLink
-                ? <DeveloperLinkSection developerLink={developerLink} />
-                : null}
-            </FlexGrowCol>
-          </FlexGrowRow>
-        </FlexRow>
-      </CardContent>
-    </Card>
-  )
-}

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/index.ts

@@ -1 +0,0 @@
-export * from './DefaultComingSoon.js'

package/src/modules/Dapp/modules/Window/components/index.ts

@@ -1,2 +0,0 @@
-export * from './DefaultComingSoon/index.ts'
-export * from './menu/index.ts'

package/src/modules/Dapp/modules/Window/components/menu/BottomMenuArea.tsx

@@ -1,130 +0,0 @@
-import {
-  BugReport, KeyboardArrowDownRounded, KeyboardArrowUpRounded,
-} from '@mui/icons-material'
-import {
-  Card,
-  Collapse,
-  Divider,
-  IconButton,
-  Stack,
-  Toolbar,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material'
-import { RotationAnimation } from '@xylabs/react-animation'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { LinkEx } from '@xylabs/react-link'
-import { ColorSchemeButton } from '@xylabs/react-theme'
-import React, { useState } from 'react'
-
-import { XyoOSLogoWhite } from './img/index.ts'
-import { socialLinksData } from './SocialData.js'
-
-export interface BottomMenuAreaProps {
-  backgroundColor: string
-  openDebug: () => void
-}
-
-export const BottomMenuArea: React.FC<BottomMenuAreaProps> = ({ openDebug, backgroundColor }) => {
-  const theme = useTheme()
-  const [expanded, setExpanded] = useState(false)
-
-  // Toggle expand/collapse
-  const handleExpandClick = () => {
-    setExpanded(!expanded)
-  }
-
-  return (
-    <Card
-      sx={{
-        position: 'relative',
-        borderTopLeftRadius: '10px',
-        borderTopRightRadius: '10px',
-        borderBottomLeftRadius: '0px',
-        borderBottomRightRadius: '0px',
-        backgroundColor: backgroundColor,
-        overflow: 'hidden',
-      }}
-      elevation={4}
-    >
-      {/* Collapsed View */}
-      <FlexCol paddingY={1} alignItems="stretch">
-        <Stack
-          paddingX={2}
-          justifyContent="space-between"
-          flexDirection="row"
-          gap={0.5}
-          onClick={handleExpandClick}
-          sx={{ textTransform: 'none', cursor: 'pointer' }}
-        >
-          <Typography gutterBottom={false}>More</Typography>
-          {expanded ? <KeyboardArrowUpRounded sx={{ color: '#fff' }} /> : <KeyboardArrowDownRounded sx={{ color: '#fff' }} />}
-        </Stack>
-      </FlexCol>
-      {/* Expanded Content */}
-      <Collapse in={expanded} timeout="auto" unmountOnExit sx={{ paddingBottom: 3, color: '#fff' }}>
-        <Divider flexItem></Divider>
-        <FlexCol alignItems="center">
-          <Toolbar sx={{ paddingX: 1.5 }}>
-            <Tooltip title="Debug Node View">
-              <IconButton onClick={openDebug} sx={{ color: '#fff' }}>
-                <BugReport />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Toggle Light/Dark Mode">
-              <span>
-                <ColorSchemeButton />
-              </span>
-            </Tooltip>
-          </Toolbar>
-          <FlexRow flexWrap="wrap">
-            {socialLinksData.map(social => (
-              <RotationAnimation key={social.link} rotation={20}>
-                <IconButton
-                  sx={{ color: '#fff' }}
-                  href={social.link}
-                  target="_blank"
-
-                >
-                  {social.icon}
-                </IconButton>
-              </RotationAnimation>
-            ))}
-          </FlexRow>
-          <FlexRow padding={1} justifyContent="center" gap={0.5}>
-            <Typography variant="body2" color={theme.vars?.palette.text.primary}>
-              Powered By
-            </Typography>
-            <img
-              style={{ color: theme.vars?.palette.text.primary, fill: theme.vars?.palette.text.primary }}
-              src={XyoOSLogoWhite}
-              width="auto"
-              height="20px"
-            />
-          </FlexRow>
-          <Typography variant="caption" color={theme.vars?.palette.text.primary}>
-            Copyright © 2024 XY Labs, Inc.
-          </Typography>
-          <Stack gap={0.5} flexDirection="row">
-            <LinkEx color="inherit" target="_blank" href="https://xylabs.com/privacy/">
-              <Typography variant="caption">Privacy</Typography>
-            </LinkEx>
-            {' '}
-            •
-            {' '}
-            <LinkEx color="inherit" target="_blank" href="https://xylabs.com/terms/">
-              <Typography variant="caption">Terms</Typography>
-            </LinkEx>
-            {' '}
-            •
-            {' '}
-            <LinkEx color="inherit" target="_blank" href="https://xyo.network/">
-              <Typography variant="caption">XYO Website</Typography>
-            </LinkEx>
-          </Stack>
-        </FlexCol>
-      </Collapse>
-    </Card>
-  )
-}