@xyo-network/os-react-runtime 2.3.0

package/src/modules/Dapp/Button/StyledComponents.tsx

@@ -0,0 +1,68 @@
+import { alpha, styled } from '@mui/material'
+import type { ButtonExProps } from '@xylabs/react-button'
+import { ButtonEx } from '@xylabs/react-button'
+import { TypographyEx } from '@xyo-network/react-shared'
+import React, { forwardRef } from 'react'
+
+const ForwardedRefButtonEx = forwardRef<HTMLSpanElement, ButtonExProps>((props, ref) => {
+  return (
+    <span ref={ref}>
+      {/* Ideally, we could pass the ref to ButtonEx directly, but unclear why the ref isn't properly forwarded.
+      For now, using a wrapping span solves the issue */}
+      <ButtonEx {...props} />
+    </span>
+  )
+})
+
+ForwardedRefButtonEx.displayName = 'ForwardedRefButtonEx'
+
+const borderRadiusFactor = 1.5
+
+export const StyledDappIconButtonEx = styled(ForwardedRefButtonEx, {
+  name: 'DappIconButton',
+  shouldForwardProp: prop => !['iconBgBaseColor'].includes(prop as string),
+})<{
+  iconBgBaseColor?: string
+}>(({ theme }) => {
+  return {
+    // :before hack in place since css transitions not supported in css
+    '&:before': {
+      WebkitBackdropFilter: 'blur(20px)',
+      backdropFilter: 'blur(20px)',
+      backgroundColor: alpha(theme.palette.background.paper, 0.5),
+      borderRadius: theme.spacing(borderRadiusFactor),
+      content: "''",
+      inset: 0,
+      opacity: 0,
+      position: 'absolute',
+      transition: 'transform 0.15s linear, opacity 0.15s linear',
+      zIndex: '-1',
+    },
+    '&:hover': { transform: 'translateY(-2px)' },
+    '&:hover:before': { opacity: 1 },
+    'WebkitBackdropFilter': 'blur(20px)',
+    'backdropFilter': 'blur(20px)',
+    'backgroundColor': alpha(theme.palette.background.paper, 0.5),
+    'borderRadius': theme.spacing(borderRadiusFactor),
+    'color': theme.palette.text.primary,
+    'position': 'relative',
+    'transition': 'transform 0.15s linear',
+  }
+})
+
+export const StyledDappName = styled(TypographyEx, { name: 'StyledDappName' })(({ theme }) => ({
+  // WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  color: theme.palette.text.primary,
+  flexWrap: 'wrap',
+  fontWeight: 700,
+  letterSpacing: '-0.5px',
+  lineClamp: 2,
+  textAlign: 'center',
+  textOverflow: 'ellipsis',
+  textShadow: `1px 1px 3px ${alpha(theme.palette.common.black, 0.3)}`,
+  whiteSpace: 'initial',
+  wordWrap: 'break-word',
+}))
+
+export const StyledDefaultDappIcon = styled(TypographyEx, { name: 'StyledDappName' })(() => ({ lineHeight: 1 }))

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

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

package/src/modules/Dapp/Button/hooks/useLaunchPoint.tsx

@@ -0,0 +1,31 @@
+import type { RefObject } from 'react'
+import { useLayoutEffect, useState } from 'react'
+
+import { useOnWindowResize } from '../../../../utils/index.ts'
+
+/**
+ * For a given element, determine the left and top distance from the edge of the viewport
+ * to the element's center
+ **/
+export const useLaunchPoint = (spanRef: RefObject<HTMLSpanElement | null>) => {
+  const [coordinates, setCoordinates] = useState<{
+    left: number
+    top: number
+  }>({ left: 0, top: 0 })
+  const resized = useOnWindowResize()
+
+  useLayoutEffect(() => {
+    const rect = spanRef.current?.getBoundingClientRect() ?? null
+    if (rect) {
+      const {
+        width, height, left, top,
+      } = rect
+      setCoordinates({
+        left: left + width / 2,
+        top: top + height / 2,
+      })
+    }
+  }, [spanRef, resized])
+
+  return coordinates
+}

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

@@ -0,0 +1,3 @@
+export * from './hooks/index.ts'
+export * from './IconEx.js'
+export * from './lib/index.ts'

package/src/modules/Dapp/Button/lib/decomposeProps.tsx

@@ -0,0 +1,15 @@
+import type { ButtonExProps } from '@xylabs/react-button'
+import type { DappIcon } from '@xyo-network/os-model'
+
+import { DEFAULT_ICON_SIZE } from '../../lib/index.ts'
+
+export const decomposeProps = (dappIcon?: DappIcon, props?: ButtonExProps) => {
+  // Decompose the Payload into various properties
+  const { color, windowId: id } = dappIcon ?? {}
+  const DappIconSize = DEFAULT_ICON_SIZE * 0.8
+  const { sx, ...nonSxProps } = props ?? {}
+
+  return {
+    DappIconSize, color, id, nonSxProps, sx,
+  }
+}

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

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

package/src/modules/Dapp/Container.tsx

@@ -0,0 +1,22 @@
+import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+import React from 'react'
+
+import { DappIconButton } from './Button/index.ts'
+import { DappWindow } from './modules/Window/index.ts'
+
+export interface DappContainerProps {
+  dappSet: RegisteredReactDappSet
+  xnsNetwork: string | undefined
+  xnsNodeUrl: string | undefined
+}
+
+export const DappContainer: React.FC<DappContainerProps> = ({
+  dappSet, xnsNodeUrl, xnsNetwork,
+}) => {
+  const { dapp, dappIcon } = dappSet
+  return (
+    <DappIconButton dappIcon={dappIcon} dappIconSvg={dapp.params.iconSvg} dappName={dapp?.config.name}>
+      <DappWindow dappSet={dappSet} xnsNodeUrl={xnsNodeUrl} xnsNetwork={xnsNetwork} />
+    </DappIconButton>
+  )
+}

package/src/modules/Dapp/ContainerFlexbox.tsx

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

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

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

package/src/modules/Dapp/EnterAnimation.tsx

@@ -0,0 +1,54 @@
+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 = window.setTimeout(() => {
+      setIsRotated(false)
+    }, 5)
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [isRotated])
+
+  return (
+    <animated.div
+      onMouseEnter={handleHover}
+      style={{ ...springs }}
+    >
+      {children}
+    </animated.div>
+  )
+}

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

@@ -0,0 +1,31 @@
+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>
+            )
+          : <></>
+      }
+      label={`${registeredDapps?.length ? '' : 'Loading '}Beta dApps`}
+      size="small"
+      sx={{ gap: 0.5 }}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,59 @@
+import {
+  Divider, Fade, styled,
+} from '@mui/material'
+import type { 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 { DappContainer } from '../Container.js'
+import { DividerChip } from './DividerChip.js'
+
+export interface DappsRowProps {
+  chipLabel: string
+  installType: InstallationType
+  registeredDappsSet?: RegisteredReactDappSet[]
+  xnsNetwork: string | undefined
+  xnsNodeUrl: string | undefined
+}
+
+export const DappsRow: React.FC<DappsRowProps> = ({
+  chipLabel, 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, index) => <DappContainer key={index} 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

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

package/src/modules/Dapp/index.ts

@@ -0,0 +1,5 @@
+export * from './Container.js'
+export * from './ContainerFlexbox.js'
+export * from './Debug/index.ts'
+export * from './modules/index.ts'
+export * from './Page/index.ts'

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

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

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

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

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

@@ -0,0 +1,111 @@
+import {
+  ArrowDropDownCircleOutlined, BugReport, CancelOutlined,
+} 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 { DarkModeIconButtonForColorScheme } from '@xylabs/react-invertible-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 { useDebugClick, useSendDappIntent } from '../../../../hooks/index.ts'
+import { DebugDialogWithNode } from '../../Debug/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="h5" letterSpacing="-1px" fontWeight="300">
+          {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>
+            <DarkModeIconButtonForColorScheme defaultLightModeColor="warning" />
+          </Box>
+        </Tooltip>
+        <Divider
+          orientation="vertical"
+          flexItem
+          sx={{
+            display: { md: 'none', xs: 'flex' },
+            m: 1,
+          }}
+        />
+        <Tooltip title="Minimize">
+          <IconButton
+            onClick={() => { sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Minimize, name))?.catch(console.error) }}
+          >
+            <ArrowDropDownCircleOutlined htmlColor="inherit" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Close">
+          <IconButton
+            onClick={() => { sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Close, name))?.catch(console.error) }}
+          >
+            <CancelOutlined htmlColor="inherit" />
+          </IconButton>
+        </Tooltip>
+      </Toolbar>
+      <DebugDialogWithNode closeDebug={closeDebug} debugOpen={debugOpen} context={context} />
+    </AppBar>
+  )
+}

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

@@ -0,0 +1,79 @@
+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.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.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} />
+}