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

package/src/helpers/widget/Caller.tsx

@@ -1,124 +0,0 @@
-import { assertEx } from '@xylabs/assert'
-import type { Hash } from '@xylabs/hex'
-import { fulfilled, rejected } from '@xylabs/promise'
-import type {
-  DappWidgetConfig, WidgetTray, WidgetTrayLayout, XyOsContext,
-} from '@xyo-network/os-model'
-import { WidgetTraySchema } from '@xyo-network/os-model'
-import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
-import { OsCallerBase } from '@xyo-network/os-runtime'
-import type { Payload } from '@xyo-network/payload-model'
-import type { FC, JSX } from 'react'
-import React from 'react'
-
-type WidgetResults = [(JSX.Element | undefined)[] | undefined, (Error | undefined)[]] | undefined
-
-export class WidgetCaller extends OsCallerBase {
-  private _registeredDappSets?: RegisteredReactDappSet[]
-  private _widgetTrayLayout?: WidgetTrayLayout
-  constructor(
-    context: XyOsContext,
-    _registeredDappSets?: RegisteredReactDappSet[],
-    _widgetTrayLayout?: WidgetTrayLayout,
-  ) {
-    super(context)
-    this._registeredDappSets = _registeredDappSets
-    this._widgetTrayLayout = _widgetTrayLayout
-  }
-
-  get dappsAsObject() {
-    const acc = {} as Record<string, RegisteredReactDappSet>
-    for (const dapp of this.registeredDappSets) {
-      acc[dapp.dapp.config.name] = dapp
-    }
-    return acc
-  }
-
-  get registeredDappSets() {
-    return assertEx(this._registeredDappSets, () => 'Registered Dapp Sets not available')
-  }
-
-  get widgetTrayLayout() {
-    return assertEx(this._widgetTrayLayout, () => 'Widget Tray Layout not available')
-  }
-
-  async buildWidgetComponents() {
-    const widgetTray = this.widgetTrayFromLayout(this.widgetTrayLayout)
-
-    const results = await Promise.allSettled(
-      widgetTray.widgetConfigs.map(async (config) => {
-        // Find the widget component in the registered Dapps
-        const Param: FC<{
-          payload?: Payload
-        }> | undefined = this.dappsAsObject[config.dappId].dapp.params.modes[config.mode ?? config.dappId]?.component
-
-        // Try to find the config payload
-        let payload: Payload | undefined
-        if (config.configHash) {
-          const archivist = await this.getDappsArchivist()
-          const foundConfig = assertEx((await archivist.get([config.configHash]))?.[0], () => `Config - ${config.configHash} not found`)
-          payload = foundConfig
-        }
-
-        // Return the widget component
-        return Param ? <Param payload={payload} /> : undefined
-      }),
-    )
-
-    const successfulResults = results.filter(fulfilled).map(result => result.value)
-    const failedResults = results.filter(rejected).map(result => new Error(result.reason))
-
-    return [successfulResults, failedResults] as WidgetResults
-  }
-
-  // build a new widget config from the base provided by the dapp
-  // and pass the config hash from the widgetLayout to the new widgetConfig
-  private buildWidgetConfig(widgetConfigToBuild: DappWidgetConfig, configHash?: Hash): DappWidgetConfig {
-    const clonedWidgetConfig = this.cloneWidgetConfig(widgetConfigToBuild)
-    return {
-      ...clonedWidgetConfig,
-      configHash,
-    }
-  }
-
-  private cloneWidgetConfig(widgetConfig: DappWidgetConfig) {
-    return structuredClone(widgetConfig)
-  }
-
-  private widgetTrayFromLayout(widgetLayout: WidgetTrayLayout): WidgetTray {
-    const targetWidgetConfigs: DappWidgetConfig[] = []
-
-    const { layout, label: trayLabel } = widgetLayout
-    for (const dappWidgetLayout of layout) {
-      const {
-        dappId, mode, configHash,
-      } = dappWidgetLayout
-
-      // find the dapp set for the dappWidgetLayout
-      const dappSet = this.registeredDappSets.find(dappSet => dappSet.dapp.config.name === dappId)
-      if (!dappSet) {
-        console.error('unable to find registered dapp set for', dappId)
-        continue
-      }
-
-      // find the widgetConfig for the dapp based on a match of mode or dappId in the dapp's widgetConfig
-      const widgetConfigToBuild = dappSet.dapp.widgetConfigs.find(config => (config.mode ? config.mode === mode : mode === config.dappId))
-      if (!widgetConfigToBuild) {
-        console.error('unable to find widget config for', mode)
-        continue
-      }
-
-      const config = this.buildWidgetConfig(widgetConfigToBuild, configHash)
-
-      // add the foundWidgetConfig to the targetWidgetConfigs
-      targetWidgetConfigs.push(config)
-    }
-
-    return {
-      label: trayLabel ?? 'Widget Tray',
-      position: 'bottom',
-      schema: WidgetTraySchema,
-      widgetConfigs: targetWidgetConfigs,
-    }
-  }
-}

package/src/helpers/widget/index.ts

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

package/src/img/backgrounds/images.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.svg'
-declare module '*.gif'
-declare module '*.webp'

package/src/img/backgrounds/index.ts

@@ -1,18 +0,0 @@
-export { default as candyDark } from './candy-dark@3x.webp'
-export { default as candyLight } from './candy-light@3x.webp'
-export { default as candyAppleDark } from './candyApple-dark@3x.webp'
-export { default as candyAppleLight } from './candyApple-light@3x.webp'
-export { default as mossDark } from './moss-dark@3x.webp'
-export { default as mossLight } from './moss-light@3x.webp'
-export { default as oceanDark } from './ocean-dark@3x.webp'
-export { default as oceanLight } from './ocean-light@3x.webp'
-export { default as peachYogurtDark } from './peachYogurt-dark@3x.webp'
-export { default as peachYogurtLight } from './peachYogurt-light@3x.webp'
-export { default as sherbetDark } from './sherbet-dark@3x.webp'
-export { default as sherbetLight } from './sherbet-light@3x.webp'
-export { default as springDark } from './spring-dark@3x.webp'
-export { default as springLight } from './spring-light@3x.webp'
-export { default as sunsetDark } from './sunset-dark@3x.webp'
-export { default as sunsetLight } from './sunset-light@3x.webp'
-export { default as xyoDark } from './xyo-dark@3x.webp'
-export { default as xyoLight } from './xyo-light@3x.webp'

package/src/img/index.ts

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

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './helpers/index.ts'
-export * from './interfaces/index.ts'
-export * from './modules/index.ts'
-export * from './settings/index.ts'
-export * from './utils/index.ts'

package/src/interfaces/StackReady.ts

@@ -1,6 +0,0 @@
-import type { AttachableNodeInstance } from '@xyo-network/node-model'
-
-export interface StackReady {
-  ready: boolean
-  stack?: AttachableNodeInstance
-}

package/src/interfaces/index.ts

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

package/src/modules/Dapp/Alert/RenderErrorWithSupportLink.tsx

@@ -1,50 +0,0 @@
-import { ButtonEx } from '@xylabs/react-button'
-import type { ErrorAlertProps } from '@xylabs/react-error'
-import { ErrorAlert } from '@xylabs/react-error'
-import type { ModuleError } from '@xyo-network/payload-model'
-import React, { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-
-export interface ErrorRenderWithSupportProps extends ErrorAlertProps<ModuleError> {
-  supportHref?: string
-  supportLinkText?: string
-  supportTo?: string
-}
-
-export const ErrorRenderWithSupport: React.FC<ErrorRenderWithSupportProps> = ({
-  supportHref = '',
-  supportTo,
-  supportLinkText = 'Support',
-  error,
-  onCancel,
-  ...props
-}) => {
-  const location = useLocation()
-  useEffect(() => {
-    // ensure we end up at the same place we are now after logging in
-    location.state = { from: { pathname: globalThis.location.pathname } }
-  }, [location])
-  return (
-    <ErrorAlert
-      action={supportTo
-        ? (
-            <ButtonEx target="_blank" to={supportTo} color="inherit" size="small">
-              {supportLinkText}
-            </ButtonEx>
-          )
-        : (
-            <ButtonEx target="_blank" href={supportHref} color="inherit" size="small">
-              {supportLinkText}
-            </ButtonEx>
-          )}
-      error={error}
-      onCancel={onCancel}
-      {...props}
-    >
-    </ErrorAlert>
-  )
-}
-
-export const ErrorRenderWithSupportDefault: React.FC<ErrorRenderWithSupportProps> = (props) => {
-  return <ErrorRenderWithSupport supportHref="https://discord.com/channels/935586624392298547/1228436997375393885" {...props} />
-}

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

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

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

@@ -1,96 +0,0 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
-import { Circle } from '@mui/icons-material'
-import type { ButtonExProps } from '@xylabs/react-button'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type {
-  DappIcon,
-  DappName,
-} from '@xyo-network/os-model'
-import { DappIntentTypes } from '@xyo-network/os-model'
-import { DappIntentCaller, XyOsMonitor } from '@xyo-network/os-runtime'
-import React, { useRef } from 'react'
-
-import { useSendDappIntent } from '../../intent/index.ts'
-import type { DappState } from '../lib/index.ts'
-import { DEFAULT_ICON_SIZE } from '../lib/index.ts'
-import { RenderHtml } from '../RenderHtml.tsx'
-import { useLaunchPoint } from './hooks/index.ts'
-import { DappLaunchFrame } from './LaunchFrame.js'
-import { decomposeProps } from './lib/index.ts'
-import {
-  StyledDappIconButtonEx, StyledDappName, StyledDefaultDappIcon,
-} from './StyledComponents.js'
-
-export type DappIconButtonProps = ButtonExProps & {
-  dappIcon?: DappIcon
-  dappIconSvg?: string
-  dappName?: DappName
-  dappState?: DappState
-}
-
-export const DappIconButton: React.FC<DappIconButtonProps> = ({
-  children, dappIcon, dappIconSvg, dappName, dappState, ...props
-}) => {
-  const {
-    DappIconSize, color, nonSxProps, sx,
-  } = decomposeProps(dappIcon, props)
-  const iconSize = DEFAULT_ICON_SIZE
-
-  const { active, minimized } = dappState ?? {}
-
-  // Functions to invoke Dapp intents
-  const sendIntent = useSendDappIntent()
-
-  // Use the DappIconButton to calculate the launch point for the DappWindow
-  const iconButtonRef = useRef<HTMLButtonElement>(null)
-  const { left: launchLeft, top: launchTop } = useLaunchPoint(iconButtonRef)
-
-  const MiddleEllipsisFunction = (str: DappName | undefined) => {
-    if (str && str.length > 25) {
-      // console.log(str)
-      // console.log(str.slice(0, 15))
-      // console.log(str.slice(-10, str.length - 10 + str.length))
-      return str.slice(0, 15) + '...' + str.slice(-7, str.length - 7 + str.length)
-    }
-    return str
-  }
-
-  const onClickIcon = async () => {
-    XyOsMonitor.trackEvent('Launch dApp', { 'Dapp Name': `${dappName}` })
-    await sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Launch, dappName))
-  }
-
-  return (
-    <FlexCol alignItems="stretch" justifyContent="stretch">
-      <DappLaunchFrame id="dapp-launch-frame" open={!!active} launchLeft={launchLeft} launchTop={launchTop}>
-        {children}
-      </DappLaunchFrame>
-      <span
-        style={{ cursor: 'pointer' }}
-        onClick={onClickIcon}
-      >
-        <StyledDappIconButtonEx
-          iconBgBaseColor={color}
-          ref={iconButtonRef}
-          sx={{
-            height: iconSize, mb: 0.75, width: iconSize, ...sx,
-          }}
-          {...nonSxProps}
-        >
-          {dappIconSvg
-            ? <RenderHtml htmlString={dappIconSvg} />
-            : <StyledDefaultDappIcon fontSize={DappIconSize}>{dappIcon?.name.at(0)}</StyledDefaultDappIcon>}
-        </StyledDappIconButtonEx>
-        <FlexCol gap={0.25}>
-          <StyledDappName variant="body2" maxWidth={iconSize}>
-            {MiddleEllipsisFunction(dappIcon?.name)}
-          </StyledDappName>
-          <Circle sx={{
-            height: 8, opacity: minimized ? 1 : 0, transition: 'opacity .5s',
-          }}
-          />
-        </FlexCol>
-      </span>
-    </FlexCol>
-  )
-}

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

@@ -1,77 +0,0 @@
-import { useTheme } from '@mui/material'
-import {
-  animated, config, useSpring,
-} from '@react-spring/web'
-import type { PropsWithChildren, Ref } from 'react'
-import React, { useMemo } from 'react'
-
-export interface DappLaunchFrameProps extends PropsWithChildren {
-  bgColor?: string
-  id?: string
-  launchLeft?: number
-  launchTop?: number
-  open: boolean
-  ref?: Ref<HTMLDivElement>
-}
-
-export const DappLaunchFrame: React.FC<DappLaunchFrameProps> = ({
-  bgColor, children, id, launchLeft, open, launchTop, ref,
-}) => {
-  const theme = useTheme()
-
-  const frameOpenSpringConfig = useMemo(
-    () => ({
-      config: config.stiff,
-      from: { height: '0%', width: '0%' },
-      to: {
-        height: open ? '100dvh' : '0%',
-        left: open ? 0 : launchLeft,
-        top: open ? 0 : launchTop,
-        width: open ? '100vw' : '0%',
-      },
-    }),
-    [launchLeft, launchTop, open],
-  )
-
-  const {
-    height, width, ...frameProps
-  } = useSpring(frameOpenSpringConfig)
-  const { transform, ...scaleProps } = useSpring({
-    config: config.stiff,
-    from: { transform: 'scale(0)' },
-    to: { transform: open ? 'scale(1)' : 'scale(0)' },
-  })
-
-  return (
-    <div id={id} ref={ref}>
-      <animated.div
-        id="dapp-launch-frame-transition-width-height"
-        style={{
-          ...frameProps,
-          height,
-          overflow: 'hidden',
-          position: 'fixed',
-          width,
-          // Set to one above the mui app bar
-          zIndex: 1101,
-        }}
-      >
-        <animated.div
-          id="dapp-launch-frame-transition-scale"
-          style={{
-            ...scaleProps,
-            alignItems: 'start',
-            background: bgColor ?? theme.vars?.palette.background.default,
-            display: 'flex',
-            height: '100%',
-            justifyContent: 'start',
-            transform,
-            width: '100%',
-          }}
-        >
-          {children}
-        </animated.div>
-      </animated.div>
-    </div>
-  )
-}

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

@@ -1,55 +0,0 @@
-import { styled } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { alphaCss } from '@xylabs/react-theme'
-import { TypographyEx } from '@xyo-network/react-shared'
-
-const borderRadiusFactor = 1.5
-
-export const StyledDappIconButtonEx = styled(ButtonEx, {
-  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: alphaCss(theme.vars?.palette.background.paper ?? '#fff', 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': alphaCss(theme.vars?.palette.background.paper ?? '#fff', 0.5),
-    'borderRadius': theme.spacing(borderRadiusFactor),
-    'color': theme.vars?.palette.text.primary,
-    'position': 'relative',
-    'transition': 'transform 0.15s linear',
-  }
-})
-
-export const StyledDappName = styled(TypographyEx, { name: 'StyledDappName' })(({ theme }) => ({
-  // WebkitBoxOrient: 'vertical',
-  WebkitLineClamp: 2,
-  color: theme.vars?.palette.text.primary,
-  flexWrap: 'wrap',
-  fontWeight: 700,
-  letterSpacing: '-0.5px',
-  lineClamp: 2,
-  textAlign: 'center',
-  textOverflow: 'ellipsis',
-  textShadow: `1px 1px 3px ${alphaCss(theme.vars?.palette.common.black ?? '#000', 0.3)}`,
-  whiteSpace: 'initial',
-  wordWrap: 'break-word',
-}))
-
-export const StyledDefaultDappIcon = styled(TypographyEx, { name: 'StyledDappName' })(() => ({ lineHeight: 1 }))

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

@@ -1,17 +0,0 @@
-import type { SvgIconComponent } from '@mui/icons-material'
-import type { SvgIcon } from '@mui/material'
-import { styled } from '@mui/material'
-
-export interface StyledDappIconBuilderProps {
-  iconSize?: number
-}
-
-export const StyledDappIconBuilder = (DappIcon: SvgIconComponent) =>
-  styled<typeof SvgIcon>(DappIcon, {
-    name: 'StyledDappIcon',
-    shouldForwardProp: key => !['iconSize'].includes(key as string),
-  })<StyledDappIconBuilderProps>(({ iconSize, theme }) => ({
-    color: theme.vars?.palette.text.primary,
-    height: iconSize,
-    width: iconSize,
-  }))

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

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

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

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

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

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

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

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

package/src/modules/Dapp/Container.tsx

@@ -1,63 +0,0 @@
-import type { DappIntent } from '@xyo-network/os-model'
-import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
-import React, { memo, useMemo } from 'react'
-
-import { useDappContextCreator } from '../os/index.ts'
-import { DappIconButton } from './Button/index.ts'
-import { deriveDappState } from './lib/index.ts'
-import {
-  DappRendered, DappWindow, useDappMenu,
-} from './modules/index.ts'
-
-export interface DappContainerProps {
-  currentIntent?: DappIntent
-  dappSet: RegisteredReactDappSet
-  xnsNetwork: string | undefined
-  xnsNodeUrl: string | undefined
-}
-
-export const DappContainer: React.FC<DappContainerProps> = ({
-  currentIntent, dappSet, xnsNodeUrl, xnsNetwork,
-}) => {
-  const { dapp, dappIcon } = dappSet
-
-  const {
-    dappWallet, context, nodeCreateError,
-  } = useDappContextCreator(xnsNodeUrl, xnsNetwork, dapp, currentIntent)
-
-  const dappState = useMemo(() => {
-    if (currentIntent?.targetDappId === dapp.config.name) {
-      return deriveDappState(currentIntent)
-    }
-  }, [currentIntent, dapp])
-
-  const { error: menuError, ...dappMenuProperties } = useDappMenu(context, dapp?.config.name)
-
-  const errors = useMemo(() => [nodeCreateError, menuError].filter(Boolean), [nodeCreateError])
-
-  const dappWindowProps = useMemo(() => ({
-    context,
-    dapp,
-    dappMenuProperties,
-    dappState,
-    dappWallet,
-    errors,
-  }), [context, dapp, dappMenuProperties, dappState, dappWallet, errors])
-
-  return (
-    <DappIconButton
-      dappIcon={dappIcon}
-      dappIconSvg={dapp.params.iconSvg}
-      dappName={dapp?.config.name}
-      dappState={dappState}
-    >
-      <DappWindow {...dappWindowProps}>
-        <DappRendered
-          {...dappWindowProps}
-        />
-      </DappWindow>
-    </DappIconButton>
-  )
-}
-
-export const DappContainerMemo = memo(DappContainer)