@xyo-network/os-react-runtime 2.3.0

package/src/hooks/os/useDappRegistrationResults.tsx

@@ -0,0 +1,30 @@
+import type { EventListener } from '@xyo-network/module-events'
+import type { DappRegistrationResults, EventBusPubSubConnectionRequest } from '@xyo-network/os-model'
+import { EventBusPubSubConnection } from '@xyo-network/os-runtime'
+import { useEffect, useState } from 'react'
+
+import { useXyOsUiContext } from '../../modules/index.ts'
+
+export const useDappRegistrationResults = () => {
+  const context = useXyOsUiContext()
+
+  const [registeredDappSetResults, setRegisteredDappSetResults] = useState<DappRegistrationResults | undefined>()
+
+  useEffect(() => {
+    const listener: EventListener = () => {
+      setRegisteredDappSetResults(context?.dappRegistrationResults)
+    }
+    const dappsReadyConnectionRequest: EventBusPubSubConnectionRequest = {
+      subscribableEvents: new Map([['dappsReady', listener]]),
+      type: 'PubSub',
+    }
+    const dappsReadyConnection = new EventBusPubSubConnection(dappsReadyConnectionRequest)
+    if (context) {
+      context.eventBus.addConnection(dappsReadyConnection)
+      setRegisteredDappSetResults(context.dappRegistrationResults)
+    }
+    return () => (context && dappsReadyConnection.id ? context.eventBus.removeConnection(dappsReadyConnection.id) : undefined)
+  }, [context])
+
+  return registeredDappSetResults
+}

package/src/hooks/os/useDappRegistry.tsx

@@ -0,0 +1,19 @@
+import { DappRegistry } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useDappSeedPhraseRepository } from './useDappSeedPhraseRepository.js'
+
+let _dappRegistry: DappRegistry
+
+export const useDappRegistry = (allowedNames: string[]) => {
+  const dappSeedPhraseRepository = useDappSeedPhraseRepository(allowedNames)
+
+  return useMemo(() => {
+    if (dappSeedPhraseRepository) {
+      if (!_dappRegistry) {
+        _dappRegistry = new DappRegistry(dappSeedPhraseRepository)
+      }
+      return _dappRegistry
+    }
+  }, [dappSeedPhraseRepository])
+}

package/src/hooks/os/useDappSeedPhraseRepository.tsx

@@ -0,0 +1,19 @@
+import { DappSeedPhraseRepository } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useXyOsUiContext } from '../../modules/index.ts'
+
+let _dappWalletRepository: DappSeedPhraseRepository
+
+export const useDappSeedPhraseRepository = (allowedNames: string[]) => {
+  const context = useXyOsUiContext()
+
+  const dappWalletRepository = useMemo(() => {
+    if (_dappWalletRepository === undefined && context) {
+      _dappWalletRepository = new DappSeedPhraseRepository(context, allowedNames)
+    }
+    return _dappWalletRepository
+  }, [context, allowedNames])
+
+  return dappWalletRepository
+}

package/src/hooks/os/useWidgetDapps.tsx

@@ -0,0 +1,23 @@
+import type { State } from '@xylabs/react-promise'
+import { usePromise } from '@xylabs/react-promise'
+import type { WidgetTrayLayout } from '@xyo-network/os-model'
+import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+import type { JSX } from 'react'
+
+import { WidgetCaller } from '../../helpers/index.ts'
+import { useXyOsUiContext } from '../../modules/index.ts'
+
+type WidgetResults = [(JSX.Element | undefined)[] | undefined, (Error | undefined)[]] | undefined
+
+export const useWidgetDapps = (
+  registeredDapps?: RegisteredReactDappSet[],
+  widgetTrayLayout?: WidgetTrayLayout,
+): [WidgetResults, Error | undefined, State | undefined] => {
+  const context = useXyOsUiContext()
+  return usePromise(async () => {
+    if (registeredDapps && context && widgetTrayLayout) {
+      const caller = new WidgetCaller(context, registeredDapps, widgetTrayLayout)
+      return await caller.buildWidgetComponents()
+    }
+  }, [context, registeredDapps, widgetTrayLayout])
+}

package/src/hooks/useAccountArchivist.ts

@@ -0,0 +1,5 @@
+import { useWeakArchivistFromNode } from '@xyo-network/react-archivist'
+
+export const useAccountArchivist = () => {
+  return useWeakArchivistFromNode('AccountArchivist')
+}

package/src/hooks/useCleanup.tsx

@@ -0,0 +1,10 @@
+import type { ResourceStore } from '@xyo-network/os-runtime'
+import { useEffect } from 'react'
+
+export const useCleanUpResource = (resource?: ResourceStore) => {
+  useEffect(() => {
+    return () => {
+      resource?.cleanupListeners()
+    }
+  }, [resource])
+}

package/src/hooks/useDappCaller.tsx

@@ -0,0 +1,16 @@
+import type { XyOsContext } from '@xyo-network/os-model'
+import { DappCaller } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useXyOsUiContext } from '../modules/index.ts'
+
+export const useDappCaller = (context?: XyOsContext | null) => {
+  const xyOs = useXyOsUiContext()
+
+  return useMemo(() => {
+    const resolvedContext = context ?? xyOs
+    if (resolvedContext) {
+      return new DappCaller(resolvedContext)
+    }
+  }, [context, xyOs])
+}

package/src/hooks/useDappIntentCaller.tsx

@@ -0,0 +1,17 @@
+import { assertEx } from '@xylabs/assert'
+import type { XyOsContext } from '@xyo-network/os-model'
+import { DappIntentCaller } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useXyOsUiContext } from '../modules/index.ts'
+
+export const useDappIntentCaller = (xyOsContext?: XyOsContext | null) => {
+  const xyOs = useXyOsUiContext()
+
+  return useMemo(() => {
+    if (xyOsContext || xyOs) {
+      const context = assertEx(xyOsContext ?? xyOs, () => 'no node was found in context or passed as argument')
+      return new DappIntentCaller(context)
+    }
+  }, [xyOsContext, xyOs])
+}

package/src/hooks/useDebugClick.tsx

@@ -0,0 +1,61 @@
+import {
+  useCallback, useEffect, useRef, useState,
+} from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+export const useDebugClick = () => {
+  const [params, setParams] = useSearchParams()
+  const [debugOpen, setDebugOpen] = useState(false)
+  const openFromClick = useRef(false)
+  const closeFromClick = useRef(false)
+  const initialized = useRef(false)
+  const navigate = useNavigate()
+
+  const openDebug = useCallback(() => {
+    openFromClick.current = true
+    closeFromClick.current = false
+    setParams((params) => {
+      params.set('debug', 'true')
+      return new URLSearchParams(params)
+    })
+    setDebugOpen(true)
+  }, [setParams])
+
+  const closeDebug = useCallback(() => {
+    openFromClick.current = false
+    closeFromClick.current = true
+    initialized.current = false
+    navigate(-1)
+    setDebugOpen(false)
+  }, [navigate])
+
+  // Auto Open Logic (on forward click) - not working
+  // useEffect(() => {
+  //   // Was closed, open wasn't clicked, and debug is in the query params
+  //   const openedFromRoute = !openFromClick.current && !closeFromClick.current && params.has('debug')
+  //   if (openedFromRoute) {
+  //     // openDebug()
+  //   }
+  // }, [openDebug, params])
+
+  // Auto Close Logic (on back click)
+  useEffect(() => {
+    // Was opened, close wasn't clicked, and debug is in the query params
+    const initialOpen = openFromClick.current && !closeFromClick.current && params.has('debug')
+    // Was opened, close wasn't clicked, and debug is missing in the query params
+    const backButtonClicked = openFromClick.current && !closeFromClick.current && !params.has('debug')
+    if (initialOpen) {
+      // using the ref to avoid setting debugOpen to false on the first render
+      if (initialized.current === false) {
+        initialized.current = true
+      }
+    } else if (backButtonClicked) {
+      initialized.current = false
+      closeDebug()
+    }
+  }, [params, closeDebug])
+
+  return {
+    closeDebug, debugOpen, openDebug,
+  }
+}

package/src/hooks/useDetectCustomer.tsx

@@ -0,0 +1,21 @@
+export const CustomerParams = [
+  { key: 'utm_source', value: 'coin' },
+  {
+    key: 'receipt', matches: '*', value: 'receiptHash',
+  },
+]
+
+export const useDetectCustomer = () => {
+  return CustomerParams.find((customerParamSet) => {
+    const searchParams = new URLSearchParams(window.location.search)
+    const searchParamValue = searchParams.get(customerParamSet.key)
+
+    // if the customerParamSet.key is present and matches in *, we don't care about the value
+    if (searchParams.has(customerParamSet.key) && customerParamSet.matches === '*') {
+      return true
+    }
+
+    // if the customerParamSet.value is defined, we care if the key is present and the value matches
+    return searchParamValue && searchParamValue === customerParamSet.value
+  })
+}

package/src/hooks/useExposedNode.ts

@@ -0,0 +1,6 @@
+import { useXyOsUiContext } from '../modules/index.ts'
+
+export const useExposedNode = () => {
+  const xyOS = useXyOsUiContext()
+  return xyOS?.exposedNode
+}

package/src/hooks/useOsSettingsCaller.tsx

@@ -0,0 +1,19 @@
+import { assertEx } from '@xylabs/assert'
+import type { XyOsContext } from '@xyo-network/os-model'
+import { OsSettingsCaller, OsSettingsReadyEvent } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useXyOsUiContext } from '../modules/index.ts'
+import { useStackReady } from './useStackReady.tsx'
+
+export const useOsSettingsCaller = (context?: XyOsContext | null) => {
+  const providedContext = useXyOsUiContext()
+  const { ready } = useStackReady(OsSettingsReadyEvent, 'osSettingsStack', providedContext)
+
+  return useMemo(() => {
+    if (providedContext || context || ready) {
+      const derivedNode = assertEx(context ?? providedContext, () => 'no node was found in context or passed as argument')
+      return new OsSettingsCaller(derivedNode)
+    }
+  }, [context, providedContext])
+}

package/src/hooks/usePhraseFile.tsx

@@ -0,0 +1,33 @@
+import { usePromise } from '@xylabs/react-promise'
+import { buildUserWalletSeedPhrasePayload } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+export const usePhraseFile = (phrase?: string) => {
+  const [payloadAndRootHash] = usePromise(async () => (phrase ? await buildUserWalletSeedPhrasePayload(phrase) : undefined), [phrase])
+
+  const filename = useMemo(() => `xyo-phrase-${payloadAndRootHash?.rootHash}.json`, [payloadAndRootHash?.rootHash])
+
+  const { phraseFile, phraseFileError } = useMemo<{
+    phraseFile?: string
+    phraseFileError?: Error
+  }>(() => {
+    const payload = payloadAndRootHash?.payload
+    if (payload) {
+      try {
+        const data = new Blob([JSON.stringify(payload, null, 2)], { type: 'text/plain' })
+        return { phraseFile: window.URL.createObjectURL(data) }
+      } catch (e) {
+        return { phraseFileError: e as Error }
+      }
+    } else {
+      return {}
+    }
+  }, [payloadAndRootHash])
+
+  return {
+    filename,
+    payload: payloadAndRootHash?.payload,
+    phraseFile,
+    phraseFileError,
+  }
+}

package/src/hooks/useStackReady.tsx

@@ -0,0 +1,53 @@
+import { assertEx } from '@xylabs/assert'
+import type { EventListener } from '@xyo-network/module-events'
+import type { AttachableNodeInstance } from '@xyo-network/node-model'
+import type { EventBusPubSubConnectionRequest, XyOsContext } from '@xyo-network/os-model'
+import { EventBusPubSubConnection } from '@xyo-network/os-runtime'
+import { useEffect, useState } from 'react'
+
+import { useXyOsUiContext } from '../modules/index.ts'
+
+export interface StackReady {
+  ready: boolean
+  stack?: AttachableNodeInstance
+}
+
+export const useStackReady = (stackReadyEvent: string, stackName: string, context?: XyOsContext | null) => {
+  const providedContext = useXyOsUiContext()
+  const [stackReady, setStackReady] = useState<StackReady>({ ready: false })
+
+  useEffect(() => {
+    const derivedContext = context ?? providedContext
+
+    const listener: EventListener = () => {
+      if (!derivedContext) throw new Error('no context found')
+      const stack = assertEx(derivedContext.getStack(stackName).stack, () => `${stackName} missing stack`)
+      setStackReady({ ready: true, stack })
+    }
+
+    const stackReadyReadyConnectionRequest: EventBusPubSubConnectionRequest = {
+      subscribableEvents: new Map([[stackReadyEvent, listener]]),
+      type: 'PubSub',
+    }
+
+    const stackReadyReadyConnection = new EventBusPubSubConnection(stackReadyReadyConnectionRequest)
+
+    if (derivedContext) {
+      // connect to the bus
+      derivedContext.eventBus.addConnection(stackReadyReadyConnection)
+
+      // attempt to see if the stack is already initialized
+      const stack = derivedContext.getStack(stackName)
+      if (stack.initialized) setStackReady({ ready: true, stack: stack.stack })
+    }
+
+    return () => {
+      const derivedContext = context ?? providedContext
+      if (derivedContext && stackReadyReadyConnection._id) {
+        derivedContext.eventBus.removeConnection(stackReadyReadyConnection.id)
+      }
+    }
+  }, [context, providedContext])
+
+  return stackReady
+}

package/src/hooks/useSyncExternalPayloadStore.tsx

@@ -0,0 +1,37 @@
+import type { ResourceStore } from '@xyo-network/os-runtime'
+import { useMemo, useSyncExternalStore } from 'react'
+
+/**
+ * Given a repository and one of its store names, return a stream of payloads
+ */
+export const useSyncExternalPayloadStore = <T extends ResourceStore = ResourceStore, ViewName extends string = string>(
+  viewName: ViewName,
+  repository?: T,
+) => {
+  // Grab the return type of the getSnapshot function to ascertain its payload
+  type PayloadStoreType = ReturnType<T['views'][ViewName]>
+
+  const { getSnapShot, subscribe } = useMemo(() => {
+    // capture the view's subscribe function
+    const subscriber = repository?.subscriptions[viewName]
+    // capture the view's getSnapshot function
+    const snapshot = repository?.views[viewName] as (() => PayloadStoreType) | undefined
+
+    if (snapshot && subscriber) {
+      return {
+        // since useExternalStore calls its methods in it's own lambda function, we lose the `this` context of the calling class.
+        // bind each method to its appropriate object so the `this` calls work as expected.
+        getSnapShot: snapshot,
+        subscribe: subscriber.bind(repository),
+      }
+    }
+    // Return a default implementation to satisfy the hook interface
+    return {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      getSnapShot: () => undefined,
+      subscribe: () => () => {},
+    }
+  }, [repository, viewName])
+
+  return useSyncExternalStore(subscribe, getSnapShot)
+}

package/src/hooks/useTabs.ts

@@ -0,0 +1,14 @@
+import type { Dispatch } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+export const useTabs = (): [string, Dispatch<string>] => {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const rootFolder = location.pathname.split('/')[1]
+  const tab = rootFolder?.length > 0 ? rootFolder : 'node'
+  const setTab = (tab: string) => {
+    navigate(`/${tab}`)
+  }
+  return [tab, setTab]
+}

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

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

package/src/img/backgrounds/index.ts

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

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

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './components/index.ts'
+export * from './DappPage.js'
+export * from './DappPathSwitcher.js'
+export * from './dapps/index.ts'
+export * from './helpers/index.ts'
+export * from './hooks/index.ts'
+export * from './modules/index.ts'
+export * from './settings/index.ts'
+export * from './StyledBuilder.js'
+export * from './utils/index.ts'

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

@@ -0,0 +1,92 @@
+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 { RenderHtml } from '../../../components/index.ts'
+import { useDappIntentListener, useSendDappIntent } from '../../../hooks/index.ts'
+import { DEFAULT_ICON_SIZE } from '../lib/index.ts'
+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 interface DappProps extends ButtonExProps {
+  dappIcon?: DappIcon
+  dappIconSvg?: string
+  dappName?: DappName
+}
+
+export const DappIconButton: React.FC<DappProps> = ({
+  children, dappIcon, dappIconSvg, dappName, ...props
+}) => {
+  const {
+    DappIconSize, color, nonSxProps, sx,
+  } = decomposeProps(dappIcon, props)
+  const iconSize = DEFAULT_ICON_SIZE
+
+  // Functions to invoke Dapp intents
+  const sendIntent = useSendDappIntent()
+
+  // Current state of the dapp based off intents
+  const { dappIntentType: intentType } = useDappIntentListener(dappName)
+
+  // Use the DappIconButton to calculate the launch point for the DappWindow
+  const iconButtonRef = useRef<HTMLSpanElement>(null)
+  const { left: launchLeft, top: launchTop } = useLaunchPoint(iconButtonRef)
+
+  const minimized = intentType === DappIntentTypes.Minimize
+  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 = () => {
+    XyOsMonitor.trackEvent('Launch dApp', { 'Dapp Name': `${dappName}` })
+    sendIntent?.(DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Launch, dappName)).catch(console.error)
+  }
+
+  return (
+    <FlexCol alignItems="stretch" justifyContent="stretch">
+      <DappLaunchFrame id="dapp-launch-frame" open={intentType === DappIntentTypes.Launch} 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

@@ -0,0 +1,78 @@
+import { useTheme } from '@mui/material'
+import {
+  animated, config, useSpring,
+} from '@react-spring/web'
+import type { PropsWithChildren } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+
+export interface DappLaunchFrameProps extends PropsWithChildren {
+  bgColor?: string
+  id?: string
+  launchLeft?: number
+  launchTop?: number
+  open: boolean
+}
+
+export const DappLaunchFrame = forwardRef<HTMLDivElement, 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.palette.background.default,
+            display: 'flex',
+            height: '100%',
+            justifyContent: 'start',
+            transform,
+            width: '100%',
+          }}
+        >
+          {children}
+        </animated.div>
+      </animated.div>
+    </div>
+  )
+})
+
+DappLaunchFrame.displayName = 'DappLaunchFrame'