@xyo-network/os-react-runtime 2.3.0

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

@@ -0,0 +1,150 @@
+import { FlexCol } from '@xylabs/react-flexbox'
+import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+import { NameTransforms } from '@xyo-network/os-runtime'
+import { ErrorBoundary, ErrorRender } from '@xyo-network/react-error'
+import { NodeProvider } from '@xyo-network/react-node'
+import { WalletProvider } from '@xyo-network/react-wallet'
+import React, { useMemo } from 'react'
+import { Helmet } from 'react-helmet'
+
+import { useDappContextCreator, useDappIntentListener } from '../../../../hooks/index.ts'
+import { XyOsUiContextProvider } from '../../../XyOsUi/index.ts'
+import { DappAccessFlexbox } from '../access-interface/index.ts'
+import { DappBar } from './AppBar.js'
+import { DappChrome } from './Chrome.js'
+import {
+  useDappMenu, useDappState, useDecomposeDappSet, useManageDappBasedOffRoute, useSyncOsRegisteredAccessInterfaces,
+} from './hooks/index.ts'
+import { DappLoadingFlexbox } from './LoadingFlexbox.js'
+import { DappBottomNavigation, DappMenuDrawer } from './menu/index.ts'
+
+export interface DappWindowProps {
+  dappSet?: RegisteredReactDappSet
+  xnsNetwork: string | undefined
+  xnsNodeUrl: string | undefined
+}
+
+/** A component that can load immediately, but delays node loading and dapp mounting till corresponding launch intent arrives */
+export const DappWindow: React.FC<DappWindowProps> = ({
+  dappSet, xnsNodeUrl, xnsNetwork,
+}) => {
+  const {
+    DappComponent, dapp, name, scrollable = true, version,
+  } = useDecomposeDappSet(dappSet)
+  const {
+    dappWallet, context, nodeCreateError,
+  } = useDappContextCreator(xnsNodeUrl, xnsNetwork, dapp)
+  const { dappIntentType: intentType, intentPayload } = useDappIntentListener(name)
+  const {
+    active, minimized, open,
+  } = useDappState(intentType, context)
+
+  const TypedDappComponent = useMemo(() => DappComponent as React.FC<{
+    name?: string
+  }>, [])
+
+  const errors = useManageDappBasedOffRoute(intentPayload, name, context)
+  useSyncOsRegisteredAccessInterfaces(context)
+
+  const {
+    activePath, error: menuError, menuConfig, menuItemsVisible, onPathChange,
+  } = useDappMenu(context, name)
+
+  const resolvedError = nodeCreateError || menuError
+
+  return (
+    <>
+      {active
+        ? (
+            <Helmet>
+              <title>
+                {activePath ? `${new NameTransforms(activePath).deSlug()} | ` : ''}
+                {' '}
+                {name}
+                {' '}
+                dApp
+              </title>
+            </Helmet>
+          )
+        : null}
+      <ErrorBoundary>
+        <DappChrome
+          appBar={(
+            <>
+              {/* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */}
+              <DappBar context={context} name={name} version={version} title={activePath ? new NameTransforms(activePath).deSlug() : ''} />
+            </>
+          )}
+          height="100dvh"
+          width="100dvw"
+          largeScreenMenu={(
+            <DappMenuDrawer
+              context={context}
+              name={name}
+              version={version}
+              activePath={activePath}
+              onPathChange={onPathChange}
+              menuConfig={menuConfig}
+              menuItems={menuItemsVisible}
+            />
+          )}
+          smallScreenMenu={(
+            <DappBottomNavigation
+              activePath={activePath}
+              onPathChange={onPathChange}
+              menuConfig={menuConfig}
+              menuItems={menuItemsVisible}
+              sx={{ display: menuConfig ? 'flex' : 'none' }}
+            />
+          )}
+          /* Ensure that loading goes away when error occurs */
+          splashScreen={resolvedError ? null : <DappLoadingFlexbox minimize={minimized} name={name} open={open} />}
+        >
+          {resolvedError || errors?.length > 0
+            ? (
+                <FlexCol padding={2}>
+                  {resolvedError
+                    ? <ErrorRender error={resolvedError} scope="DappWindow" />
+                    : null}
+                  {errors.map((error, index) => (
+                    <ErrorRender key={index} error={error} scope="DappWindowErrors" />
+                  ))}
+                </FlexCol>
+              )
+            : null}
+          <WalletProvider rootWallet={dappWallet}>
+            {context === null
+              ? null
+              : (
+                  <XyOsUiContextProvider value={context}>
+                    {/* Prevent dapps from reaching out to the os node */}
+                    <NodeProvider node={context?.root}>
+                      {/* Only load the dapp component when the dapp's node exists and dapp is launched */}
+                      {active
+                        ? (
+                            <>
+                              <FlexCol
+                                position="absolute"
+                                top={0}
+                                left={0}
+                                right={0}
+                                bottom={0}
+                                alignItems="stretch"
+                                justifyContent="stretch"
+                                sx={{ overflowY: scrollable ? 'auto' : 'hidden' }}
+                              >
+                                <TypedDappComponent name={name} />
+                              </FlexCol>
+                              <DappAccessFlexbox context={context} />
+                            </>
+                          )
+                        : null}
+                    </NodeProvider>
+                  </XyOsUiContextProvider>
+                )}
+          </WalletProvider>
+        </DappChrome>
+      </ErrorBoundary>
+    </>
+  )
+}

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

@@ -0,0 +1,99 @@
+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.palette.background.default,
+    color: theme.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/NodeManifest.tsx

@@ -0,0 +1,16 @@
+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/Trail.tsx

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,81 @@
+import {
+  alpha, Card, CardContent, Chip, Container, Divider, Typography, useTheme,
+} from '@mui/material'
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+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: alpha(theme.palette.info.main, 0.2), color: theme.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

@@ -0,0 +1,27 @@
+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.palette.info.main} href={developerLink} target="_blank">
+        {developerLink}
+      </LinkEx>
+    </FlexGrowRow>
+  )
+}

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,73 @@
+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 '../../../../../../components/index.ts'
+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.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

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

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

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

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

@@ -0,0 +1,6 @@
+export * from './menu/index.ts'
+export * from './route/index.ts'
+export * from './useDappState.js'
+export * from './useDecomposeDappSet.js'
+export * from './useSkipLoadingScreen.js'
+export * from './useSyncOsRegisteredAccessInterfaces.js'

package/src/modules/Dapp/modules/Window/hooks/lib/DappPathHelpers.ts

@@ -0,0 +1,34 @@
+import { NameTransforms } from '@xyo-network/os-runtime'
+
+export const DappPathHelpers = {
+  // update the url based off the path
+  deriveDestinationPath(path: string, defaultPath: string | undefined, dappName?: string) {
+    const rootPath = `/${new NameTransforms(dappName ?? '').slug()}`
+    const nestedPath = `${rootPath}/${path}`
+    return path === defaultPath ? rootPath : nestedPath
+  },
+  // derive the path for the nav selection
+  derivePathForNavSelection(newPath?: string, currentPath?: string, defaultPath?: string) {
+    let derivedPath: string | undefined
+
+    // If the path is not set, set it to the default path
+    if (newPath === undefined && defaultPath) {
+      derivedPath = defaultPath
+    }
+
+    // If the path has changed, update the selection (the back button case where onPathChanged was not called)
+    if (newPath && currentPath !== newPath) {
+      derivedPath = newPath
+    }
+    return derivedPath
+  },
+  // detect duplicate nav selections
+  detectDuplicateSelections(lastSavedPath?: string, path?: string, defaultPath?: string) {
+    // If the path is the default path and the current path ref is empty, then we are already at the default path
+    const selectedDefaultPathAgain = path === defaultPath && lastSavedPath === ''
+    // If the path is the same as the last seen path, then we don't need to navigate
+    const pathIsUnchanged = lastSavedPath === path
+
+    return selectedDefaultPathAgain || pathIsUnchanged
+  },
+}

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

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

package/src/modules/Dapp/modules/Window/hooks/menu/index.ts

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

package/src/modules/Dapp/modules/Window/hooks/menu/useDappMenu.tsx

@@ -0,0 +1,70 @@
+import type { DappName, XyOsContext } from '@xyo-network/os-model'
+import {
+  useEffect, useRef, useState,
+} from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { DappPathHelpers } from '../lib/index.ts'
+import { useDappMenuDependencies } from '../useDappMenuResourceValues.js'
+
+/**
+ * Use the passed in dapp Node to resolve menu related modules and return the menu related items
+ */
+
+export const useDappMenu = (context?: XyOsContext | null, dappName?: DappName) => {
+  const [error, setError] = useState<Error>()
+  const params = useParams()
+  const navigate = useNavigate()
+  const {
+    defaultPath, menuConfigs, menuItemsVisible, menuSelection, resourceError,
+  } = useDappMenuDependencies(context)
+  const activePath = menuSelection ?? defaultPath
+
+  // Keep track of the current path
+  // If links are clicked within a dapp, the path will change so we need to keep track of it
+  const currentPathRef = useRef<string>()
+
+  // Initialize the current path
+  useEffect(() => {
+    if (params && currentPathRef.current === undefined) {
+      currentPathRef.current = params.path ?? ''
+    }
+  }, [])
+
+  // Reset the current path when the dappNode goes away (e.g. when the dapp is closed)
+  useEffect(() => {
+    if (context === null) {
+      currentPathRef.current = undefined
+    }
+  }, [context])
+
+  // Update the current path when new menuSelections are made without invoking onPathChange (i.e. clicking link within a dapp)
+  useEffect(() => {
+    if (menuSelection) {
+      currentPathRef.current = menuSelection
+    }
+  }, [menuSelection])
+
+  useEffect(() => {
+    if (resourceError) setError(resourceError)
+  }, [resourceError])
+
+  // Callback to invoke when the path changes.  Main purpose is the keep the url in sync with the menu selection
+  const onPathChange = (path: string) => {
+    const pathIsInUnchanged = DappPathHelpers.detectDuplicateSelections(currentPathRef.current, path, defaultPath)
+    if (pathIsInUnchanged) return
+
+    // navigate to the new path so listeners on the route can react
+    const destinationPath = DappPathHelpers.deriveDestinationPath(path, defaultPath, dappName)
+    navigate(destinationPath)
+    currentPathRef.current = path
+  }
+
+  return {
+    activePath,
+    error,
+    menuConfig: menuConfigs?.[0],
+    menuItemsVisible,
+    onPathChange,
+  }
+}

package/src/modules/Dapp/modules/Window/hooks/route/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './useManageDappInjectableParamsFromRoute.js'
+export * from './useManageDappIntentRequest.js'
+export * from './useManageDappPathFromRoute.js'
+export * from './useManageDappStateFromRoute.js'