@xyo-network/os-react-runtime 2.3.0

package/src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappInjectableParamsFromRoute.tsx

@@ -0,0 +1,59 @@
+import { assertEx } from '@xylabs/assert'
+import { usePromise } from '@xylabs/react-promise'
+import type { ArchivistInstance, ArchivistModuleEventData } from '@xyo-network/archivist-model'
+import { asArchivistInstance } from '@xyo-network/archivist-model'
+import type { XyOsContext } from '@xyo-network/os-model'
+import { isDappInjectableParams } from '@xyo-network/os-model'
+import { DappCaller } from '@xyo-network/os-runtime'
+import {
+  useNavigate, useParams, useSearchParams,
+} from 'react-router-dom'
+
+/** React to change in the query params */
+export const useManageDappInjectableParamsFromRoute = (context?: XyOsContext | null) => {
+  const [queryParams] = useSearchParams()
+  const params = useParams()
+  const navigate = useNavigate()
+
+  const [, callerError] = usePromise(async () => {
+    if (context && (params || queryParams)) {
+      const dappCaller = new DappCaller(context)
+      const pathname = window.location.pathname
+      await dappCaller.setDappInjectableRouteParams(queryParams, pathname)
+    }
+  }, [context, queryParams, params])
+
+  // Update the route if the dapp inserts a new injectable params payload and the path is different
+  const [, listenerError] = usePromise(async () => {
+    let archivist: ArchivistInstance | undefined
+    const listener = ({ payloads }: ArchivistModuleEventData['inserted']) => {
+      const injectableParams = payloads.find(isDappInjectableParams)
+      if (injectableParams && context) {
+        const pathname = window.location.pathname
+        if (pathname !== injectableParams.path) {
+          navigate(injectableParams.path)
+        }
+      }
+    }
+
+    try {
+      if (context) {
+        const mod = assertEx(await context?.root.resolve('DappArchivist'), () => 'DappArchivist not found')
+        archivist = asArchivistInstance(mod, () => 'DappArchivist not is not an Archivist')
+
+        archivist.on('inserted', listener)
+      }
+    } catch (e) {
+      console.error(e)
+      throw e
+    }
+
+    return () => {
+      archivist?.off('inserted', listener)
+    }
+    // disabling because navigate reference changes unnecessarily for this use case
+    // see - https://stackoverflow.com/a/75329664/2803259
+  }, [context])
+
+  return [callerError, listenerError]
+}

package/src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappIntentRequest.tsx

@@ -0,0 +1,67 @@
+import { useAtomicPromise, usePromise } from '@xylabs/react-promise'
+import type { ArchivistInstance, ArchivistModuleEventData } from '@xyo-network/archivist-model'
+import type {
+  DappId, DappIntent, XyOsContext,
+} from '@xyo-network/os-model'
+import { DappIntentTypes, isDappIntent } from '@xyo-network/os-model'
+import { DappIntentCaller } from '@xyo-network/os-runtime'
+import type { WithMeta } from '@xyo-network/payload-model'
+import { useEffect, useState } from 'react'
+
+import { useDappCaller, useSendDappIntent } from '../../../../../../../hooks/index.ts'
+
+// React to new intents inserted into the dapp archivist
+export const useManageDappIntentRequest = (context?: XyOsContext | null, dappId?: DappId) => {
+  const dappCaller = useDappCaller(context)
+  const sendIntent = useSendDappIntent()
+  const [intentPayload, setIntentPayload] = useState<DappIntent>()
+  const [handleIntentError, setHandleIntentError] = useState<Error>()
+  const [dappArchivist, setDappArchivist] = useState<ArchivistInstance>()
+
+  usePromise(async () => {
+    if (context && dappCaller) {
+      const archivist = await dappCaller.getDappArchivist()
+      if (archivist) setDappArchivist(archivist)
+    }
+  }, [context, dappCaller])
+
+  useAtomicPromise(
+    'manageDappIntent',
+    async () => {
+      if (context && intentPayload?.targetDappId && dappId && sendIntent) {
+        try {
+          const minimizeIntent = DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Minimize, dappId)
+          await sendIntent(minimizeIntent)
+          await sendIntent(intentPayload)
+        } catch (e) {
+          console.error(e)
+          setHandleIntentError(e as Error)
+        }
+        setIntentPayload(undefined)
+      }
+    },
+    [context, dappId, intentPayload, sendIntent],
+  )
+
+  useEffect(() => {
+    // catch the intent sent by the dapp and mirror it inside the os intent archivist
+    const listener = ({ payloads }: ArchivistModuleEventData['inserted']) => {
+      // only dapps with an active context should react to the new intents
+      if (context) {
+        const intentPayload = payloads.find(isDappIntent) as WithMeta<DappIntent>
+        if (intentPayload) {
+          setIntentPayload(intentPayload)
+        }
+      }
+    }
+    dappArchivist?.off('inserted', listener)
+    if (dappArchivist && context) {
+      dappArchivist.on('inserted', listener)
+    }
+    return () => {
+      dappArchivist?.off('inserted', listener)
+    }
+  }, [context, dappArchivist])
+
+  return handleIntentError
+}

package/src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappPathFromRoute.tsx

@@ -0,0 +1,72 @@
+import { usePromise } from '@xylabs/react-promise'
+import type { XyOsContext } from '@xyo-network/os-model'
+import {
+  useCallback, useEffect, useRef,
+} from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { useDappMenuCaller } from '../../../../../../../hooks/index.ts'
+import { DappPathHelpers } from '../../lib/index.ts'
+import { useDappMenuDependencies } from '../../useDappMenuResourceValues.js'
+
+/**
+ * Test Cases:
+ *
+ * 1. Clicking sidebar menu
+ * 2. Clicking sidebar menu twice
+ * 3. Navigating directly to a path on dApp load
+ * 4. Navigating directly to a path from within the dApp by clicking a link
+ * 5. Navigating directly to a path from within the dApp by clicking back
+ */
+
+/** React to changes in the `path` route param */
+export const useManageDappPathFromRoute = (context?: XyOsContext | null, dappName?: string) => {
+  const params = useParams()
+  const { path: pathParam } = params
+  const dappMenuCaller = useDappMenuCaller(context, { ignoreProvidedNode: true })
+  const { menuSelection, defaultPath } = useDappMenuDependencies(context)
+  const navigate = useNavigate()
+
+  // keep track of the current path and avoid making pathParam a dependency
+  const currentPathRef = useRef<string>()
+
+  // Update the menu archivist based off the params
+  const updateMenuArchivist = useCallback(
+    async (pathParam?: string) => {
+      currentPathRef.current = pathParam
+      // ensure the dappNode is active before updating the menu
+      if (context && dappMenuCaller) {
+        const currentPath = await dappMenuCaller?.currentNavSelection()
+        const updatedPath = DappPathHelpers.derivePathForNavSelection(pathParam, currentPath?.[0]?.path, defaultPath)
+
+        if (updatedPath) {
+          await dappMenuCaller.makeNavItemSelection(updatedPath)
+        }
+      }
+    },
+    [dappMenuCaller, context, defaultPath],
+  )
+
+  // Sync the route when the menu archivist updates (no pathParam dependency)
+  useEffect(() => {
+    if (context && menuSelection) {
+      const pathIsInUnchanged = DappPathHelpers.detectDuplicateSelections(currentPathRef.current ?? '', menuSelection, defaultPath)
+      if (pathIsInUnchanged) return
+
+      // navigate to the new path so listeners on the route can react
+      const destinationPath = DappPathHelpers.deriveDestinationPath(menuSelection, defaultPath, dappName)
+      navigate(destinationPath)
+      currentPathRef.current = menuSelection === defaultPath ? undefined : menuSelection
+    }
+    // disabling because navigate reference changes unnecessarily for this use case
+    // see - https://stackoverflow.com/a/75329664/2803259
+  }, [dappName, context, defaultPath, menuSelection])
+
+  // Sync the menu archivist when the route changes (no menuSelection dependency)
+  usePromise(async () => {
+    if (context && pathParam !== currentPathRef.current) {
+      await updateMenuArchivist(pathParam)
+      currentPathRef.current = pathParam
+    }
+  }, [context, pathParam, updateMenuArchivist])
+}

package/src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappStateFromRoute.tsx

@@ -0,0 +1,45 @@
+import { usePromise } from '@xylabs/react-promise'
+import type { DappIntent } from '@xyo-network/os-model'
+import { DappIntentTypes } from '@xyo-network/os-model'
+import { DappIntentCaller, NameTransforms } from '@xyo-network/os-runtime'
+import { useNavigationType, useParams } from 'react-router-dom'
+
+import { useDappIntentCaller, useSendDappIntent } from '../../../../../../../hooks/index.ts'
+
+/** React to changes in `dappName` route param */
+export const useManageDappStateFromRoute = (intentPayload?: DappIntent, dappName?: string) => {
+  const params = useParams()
+  const { dappName: dappNameParam } = params
+  const sendIntent = useSendDappIntent()
+  const navigationType = useNavigationType()
+  const intentCaller = useDappIntentCaller()
+
+  // auto-close the dapp if it was launched and the route param goes undefined (i.e. back button clicked)
+  usePromise(async () => {
+    const launched = intentPayload?.intent === DappIntentTypes.Launch
+    if (launched && dappNameParam === undefined && sendIntent && navigationType === 'POP') {
+      const closeIntent = DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Close, dappName)
+      await sendIntent(closeIntent)
+    }
+  }, [dappName, dappNameParam, intentPayload, navigationType, sendIntent])
+
+  // auto-launch the dapp if the route param matches the dapp name
+  usePromise(async () => {
+    if (dappNameParam && dappName && sendIntent && intentCaller) {
+      const dappNameParamDeSlugged = new NameTransforms(dappNameParam).deSlug()
+
+      const notLaunched = intentPayload?.intent !== DappIntentTypes.Launch
+      const paramMatchesDappName = dappNameParamDeSlugged === dappName
+
+      if (notLaunched && paramMatchesDappName) {
+        const latestIntent = await intentCaller.latestIntent()
+        const existing = latestIntent && latestIntent.targetDappId === dappNameParamDeSlugged
+        if (!existing) {
+          const launchIntent = DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Launch, dappNameParamDeSlugged)
+          await sendIntent(launchIntent)
+          return
+        }
+      }
+    }
+  }, [dappNameParam, dappName, sendIntent, intentCaller, intentPayload?.intent])
+}

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

@@ -0,0 +1,2 @@
+export * from './helpers/index.ts'
+export * from './useManageDappBasedOffRoute.js'

package/src/modules/Dapp/modules/Window/hooks/route/useManageDappBasedOffRoute.tsx

@@ -0,0 +1,33 @@
+import type { DappIntent, XyOsContext } from '@xyo-network/os-model'
+
+import {
+  useManageDappInjectableParamsFromRoute,
+  useManageDappIntentRequest,
+  useManageDappPathFromRoute,
+  useManageDappStateFromRoute,
+} from './helpers/index.ts'
+
+/**
+ * Manage the dapp based off the route params and intent type
+ *
+ * This hook centralizes the logic for managing the dapp based off the route.
+ *
+ * It reacts to changes in the route params and performs the following:
+ *
+ * 1. Launch or close the dapp based off changes to the `dappName` route params
+ * 2. Update the menu archivist based off changes in the the `path` route param
+ * 3. Update the dapp archivist with injectable params based off changes in the query params
+ *
+ * @param intentPayload - The intent type of the dapp
+ * @param dappName - The name of the dapp
+ * @param dappNode - The node instance of the dapp
+ * @param context - The context of the dapp
+ */
+export const useManageDappBasedOffRoute = (intentPayload?: DappIntent, dappName?: string, context?: XyOsContext | null) => {
+  const handleIntentError = useManageDappIntentRequest(context, dappName)
+  useManageDappStateFromRoute(intentPayload, dappName)
+  useManageDappPathFromRoute(context, dappName)
+  const injectableErrors = useManageDappInjectableParamsFromRoute(context)
+
+  return [...injectableErrors, handleIntentError]
+}

package/src/modules/Dapp/modules/Window/hooks/useDappMenuResourceValues.tsx

@@ -0,0 +1,16 @@
+import type { XyOsContext } from '@xyo-network/os-model'
+import { useMemo } from 'react'
+
+import { DappMenuResourceHooks } from '../../../../../hooks/index.ts'
+
+export const useDappMenuDependencies = (context?: XyOsContext | null) => {
+  const {
+    menuConfigs, menuItemSelections, menuItemsVisible, resourceError,
+  } = DappMenuResourceHooks.useResourceViewsFromContext(context)
+  const defaultPath = useMemo(() => menuConfigs?.[0]?.defaultPath, [menuConfigs])
+  const menuSelection = menuItemSelections?.[0]?.path
+
+  return {
+    defaultPath, menuConfigs, menuItemsVisible, menuSelection, resourceError,
+  }
+}

package/src/modules/Dapp/modules/Window/hooks/useDappState.tsx

@@ -0,0 +1,14 @@
+import type { XyOsContext } from '@xyo-network/os-model'
+import { DappIntentTypes } from '@xyo-network/os-model'
+
+export const useDappState = (intentType?: DappIntentTypes, context?: XyOsContext | null) => {
+  const minimized = intentType === DappIntentTypes.Minimize
+  const open = intentType === DappIntentTypes.Launch
+  const active = context && open
+
+  return {
+    active,
+    minimized,
+    open,
+  }
+}

package/src/modules/Dapp/modules/Window/hooks/useDecomposeDappSet.tsx

@@ -0,0 +1,19 @@
+import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+
+import { NodeManifest } from '../NodeManifest.js'
+
+export const useDecomposeDappSet = (dappSet?: RegisteredReactDappSet) => {
+  const { dapp } = dappSet ?? {}
+  const DappComponent = dapp?.params.modes?.window?.component ?? NodeManifest
+  const name = dapp?.config.name
+  const version = dapp?.config.version
+  const scrollable = dapp?.params.modes?.window?.scrollable ?? true
+
+  return {
+    DappComponent,
+    dapp,
+    name,
+    scrollable,
+    version,
+  }
+}

package/src/modules/Dapp/modules/Window/hooks/useSkipLoadingScreen.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import { useDetectCustomer } from '../../../../../hooks/index.ts'
+
+const PARAMS_TO_TARGET = ['username', 'utm_source'] as const
+
+export const useSkipLoadingScreen = () => {
+  const [params] = useSearchParams()
+  const customer = useDetectCustomer()
+  return useMemo(() => {
+    const hasTargetParams = PARAMS_TO_TARGET.some(param => params.has(param))
+    const isCustomer = !!customer
+
+    return hasTargetParams || isCustomer
+  }, [customer, params])
+}

package/src/modules/Dapp/modules/Window/hooks/useSyncOsRegisteredAccessInterfaces.tsx

@@ -0,0 +1,36 @@
+import { usePromise } from '@xylabs/react-promise'
+import type { ArchivistModuleEventData } from '@xyo-network/archivist-model'
+import type { XyOsContext } from '@xyo-network/os-model'
+import { useWeakArchivistFromNode } from '@xyo-network/react-archivist'
+
+import { useDappCaller } from '../../../../../hooks/index.ts'
+
+/**
+ * Syncs the registered access interfaces from the Os with the DappArchivist
+ * @param {NodeInstance | null} dappNode The dapp node
+ */
+export const useSyncOsRegisteredAccessInterfaces = (context?: XyOsContext | null) => {
+  const [registeredInterfacesArchivist] = useWeakArchivistFromNode('RegisteredDappInterfacesArchivist')
+  const dappCaller = useDappCaller(context)
+
+  usePromise(async () => {
+    const listener = async ({ payloads }: ArchivistModuleEventData['inserted']) => {
+      if (context && dappCaller) {
+        await dappCaller.addPayloadsToDappArchivist(payloads)
+      }
+    }
+    if (context && dappCaller) {
+      // Add all registered interfaces to the dapp archivist
+      const registeredInterfaces = await registeredInterfacesArchivist?.deref()?.all()
+      if (registeredInterfaces) {
+        await dappCaller.addPayloadsToDappArchivist(registeredInterfaces)
+      }
+      // Listen for new interfaces and add them to the dapp archivist
+      registeredInterfacesArchivist?.deref()?.on('inserted', listener)
+    }
+
+    return () => {
+      registeredInterfacesArchivist?.deref()?.off('inserted', listener)
+    }
+  }, [dappCaller, context, registeredInterfacesArchivist])
+}

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

@@ -0,0 +1,6 @@
+export * from './AppBar.tsx'
+export * from './Chrome.tsx'
+export * from './components/index.ts'
+export * from './DappWindow.js'
+export * from './hooks/index.ts'
+export * from './menu/index.ts'

package/src/modules/Dapp/modules/Window/menu/BottomNavigation.tsx

@@ -0,0 +1,66 @@
+import type { BottomNavigationProps } from '@mui/material'
+import {
+  BottomNavigation, BottomNavigationAction, Paper, styled,
+} from '@mui/material'
+import { useColorSchemeEx } from '@xylabs/react-invertible-theme'
+import type { DappNavItem, DappNavMenuConfig } from '@xyo-network/os-model'
+import React, { useEffect, useState } from 'react'
+
+export interface DappBottomNavigationProps extends BottomNavigationProps {
+  activePath?: string
+  menuConfig?: DappNavMenuConfig
+  menuItems?: DappNavItem[]
+  onPathChange?: (to: string) => void
+}
+
+export const DappBottomNavigation: React.FC<DappBottomNavigationProps> = ({
+  activePath, menuConfig, menuItems, onPathChange, ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  // update based off active path changes
+  useEffect(() => {
+    if (menuConfig?.defaultPath && menuItems && activePath) {
+      setActiveIndex(menuItems.findIndex(item => activePath === item.path))
+    }
+  }, [activePath, menuConfig, menuItems])
+
+  return (
+    <Paper elevation={3}>
+      <BottomNavigation
+        value={activeIndex}
+        onChange={(_, value) => {
+          setActiveIndex(value)
+          const to = menuItems?.[value].path
+          if (to) onPathChange?.(to)
+        }}
+        showLabels
+        {...props}
+      >
+        {menuItems?.map(({ svgIcon: icon, primaryText }, index) => {
+          return (
+            <StyledBottomNavigationAction
+              className="bottom-nav-action"
+              key={index}
+              label={primaryText}
+              icon={(
+                <span
+                  ref={(ref) => {
+                    if (ref) {
+                      ref.innerHTML = icon ?? ''
+                    }
+                  }}
+                />
+              )}
+            />
+          )
+        })}
+      </BottomNavigation>
+    </Paper>
+  )
+}
+
+const StyledBottomNavigationAction = styled(BottomNavigationAction, { name: 'StyledBottomNavigationAction' })(({ theme }) => {
+  const { darkMode } = useColorSchemeEx()
+  return { '&.Mui-selected': { color: darkMode ? theme.palette.primary.main : theme.palette.secondary.main } }
+})