@xyo-network/os-react-runtime 4.1.4 → 4.2.0-rc.10

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

@@ -1,57 +1,59 @@
-/* eslint-disable @eslint-react/no-array-index-key */
 import { ErrorBoundary, ErrorRender } from '@xylabs/react-error'
 import { FlexCol } from '@xylabs/react-flexbox'
-import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+import type { DappIntent } from '@xyo-network/os-model'
+import type { RegisteredReactDappSet, XyOsUiContext } from '@xyo-network/os-react-model'
 import { NameTransforms } from '@xyo-network/os-runtime'
 import { NodeProvider } from '@xyo-network/react-node'
 import { WalletProvider } from '@xyo-network/react-wallet'
+import type { WalletInstance } from '@xyo-network/wallet-model'
 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 type { DappState } from './hooks/index.ts'
 import {
-  dappState, decomposeDappSet, useDappMenu, useManageDappBasedOffRoute, useSyncOsRegisteredAccessInterfaces,
+  decomposeDappSet, useDappMenu, useManageDappInjectableParamsFromRoute, useManageDappPathFromRoute, useSyncOsRegisteredAccessInterfaces,
 } from './hooks/index.ts'
 import { DappLoadingFlexbox } from './LoadingFlexbox.js'
 import { DappBottomNavigation, DappMenuDrawer } from './menu/index.ts'
 
 export interface DappWindowProps {
+  context?: XyOsUiContext | null
   dappSet?: RegisteredReactDappSet
-  xnsNetwork: string | undefined
-  xnsNodeUrl: string | undefined
+  dappState?: DappState
+  dappWallet?: WalletInstance
+  errors?: Error[]
+  intent?: DappIntent
+  nodeCreateError?: Error
 }
 
 /** 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,
+  context, dappSet, dappState, dappWallet, errors, nodeCreateError,
 }) => {
   const {
-    DappComponent, dapp, name, scrollable = true, version,
+    DappComponent, name, scrollable = true, version,
   } = decomposeDappSet(dappSet)
-  const {
-    dappWallet, context, nodeCreateError,
-  } = useDappContextCreator(xnsNodeUrl, xnsNetwork, dapp)
-  const { dappIntentType: intentType, intentPayload } = useDappIntentListener(name)
-  const {
-    active, minimized, open,
-  } = dappState(intentType, context)
+
+  const { active, minimized } = dappState ?? {}
 
   const TypedDappComponent = useMemo(() => DappComponent as React.FC<{
     name?: string
   }>, [])
 
-  const errors = useManageDappBasedOffRoute(intentPayload, name, context)
   useSyncOsRegisteredAccessInterfaces(context)
+  useManageDappPathFromRoute(context, name)
+  useManageDappInjectableParamsFromRoute(context)
 
   const {
     activePath, error: menuError, menuConfig, menuItemsVisible, onPathChange,
   } = useDappMenu(context, name)
 
-  const resolvedError = nodeCreateError || menuError
+  const resolvedErrors = [nodeCreateError, menuError, ...(errors ?? [])].filter(Boolean)
+  const hasErrors = resolvedErrors.length > 0
 
   return (
     <>
@@ -78,7 +80,7 @@ export const DappWindow: React.FC<DappWindowProps> = ({
           )}
           height="100dvh"
           width="100dvw"
-          largeScreenMenu={(
+          largeScreenMenu={active && (
             <DappMenuDrawer
               context={context}
               name={name}
@@ -89,7 +91,7 @@ export const DappWindow: React.FC<DappWindowProps> = ({
               menuItems={menuItemsVisible}
             />
           )}
-          smallScreenMenu={(
+          smallScreenMenu={active && (
             <DappBottomNavigation
               activePath={activePath}
               onPathChange={onPathChange}
@@ -99,16 +101,13 @@ export const DappWindow: React.FC<DappWindowProps> = ({
             />
           )}
           /* Ensure that loading goes away when error occurs */
-          splashScreen={resolvedError ? null : <DappLoadingFlexbox minimize={minimized} name={name} open={open} />}
+          splashScreen={hasErrors ? null : <DappLoadingFlexbox minimize={!!minimized} name={name} open={!!active} />}
         >
-          {resolvedError || errors?.length > 0
+          {hasErrors
             ? (
                 <FlexCol padding={2}>
-                  {resolvedError
-                    ? <ErrorRender error={resolvedError} scope="DappWindow" />
-                    : null}
-                  {errors.map((error, index) => (
-                    <ErrorRender key={index} error={error} scope="DappWindowErrors" />
+                  {resolvedErrors?.map(error => (
+                    <ErrorRender key={error?.message} error={error} scope="DappWindow" />
                   ))}
                 </FlexCol>
               )

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

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

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

@@ -0,0 +1,20 @@
+import type { DappIntent } from '@xyo-network/os-model'
+import { DappIntentTypes } from '@xyo-network/os-model'
+
+export interface DappState {
+  active: boolean
+  closed: boolean
+  minimized: boolean
+}
+
+export const deriveDappState = (intent?: DappIntent): DappState => {
+  const minimized = intent?.intent === DappIntentTypes.Minimize
+  const active = intent?.intent === DappIntentTypes.Launch
+  const closed = intent?.intent === DappIntentTypes.Close
+
+  return {
+    active,
+    closed,
+    minimized,
+  }
+}

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

@@ -1 +1,2 @@
-export * from './DappPathHelpers.js'
+export * from './DappPathHelpers.ts'
+export * from './deriveDappState.ts'

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

@@ -6,7 +6,7 @@ import {
 import { useNavigate, useParams } from 'react-router-dom'
 
 import { DappPathHelpers } from '../lib/index.ts'
-import { useDappMenuDependencies } from '../useDappMenuResourceValues.js'
+import { useDappMenuDependencies } from '../useDappMenuResourceValues.tsx'
 
 /**
  * Use the passed in dapp Node to resolve menu related modules and return the menu related items

package/src/modules/Dapp/modules/Window/hooks/route/helpers/RoutingNodes.md

@@ -0,0 +1,7 @@
+# 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
+ 1. Update the menu archivist based off changes in the the `path` route param
+ 1. Update the dapp archivist with injectable params based off changes in the query params

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

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

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

@@ -9,7 +9,7 @@ import {
   useNavigate, useParams, useSearchParams,
 } from 'react-router-dom'
 
-/** React to change in the query params */
+/** Update the dapp archivist with injectable params based off changes in the query params */
 export const useManageDappInjectableParamsFromRoute = (context?: XyOsContext | null) => {
   const [queryParams] = useSearchParams()
   const params = useParams()

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

@@ -10,6 +10,8 @@ import { DappPathHelpers } from '../../lib/index.ts'
 import { useDappMenuDependencies } from '../../useDappMenuResourceValues.js'
 
 /**
+ * Update the menu archivist based off changes in the the `path` route param
+ *
  * Test Cases:
  *
  * 1. Clicking sidebar menu

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

@@ -2,44 +2,50 @@ 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 { useRef } from 'react'
+import { 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) => {
+/** Launch or close the dapp based off changes to the `dappName` route param */
+export const useManageDappStateFromRoute = (intentPayload?: DappIntent) => {
   const params = useParams()
   const { dappName: dappNameParam } = params
   const sendIntent = useSendDappIntent()
-  const navigationType = useNavigationType()
   const intentCaller = useDappIntentCaller()
 
+  // refs to track the dappName param and the last intent sent
+  const dappNameParamRef = useRef<string>()
+  const intentRef = useRef<DappIntent>()
+
   // 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)
+    const dappNameParamRemoved = !!dappNameParamRef.current && dappNameParam === undefined
+    // The last intent was Launch and the dappName param was removed
+    if (launched && dappNameParamRemoved && sendIntent) {
+      const closeIntent = DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Close)
       await sendIntent(closeIntent)
     }
-  }, [dappName, dappNameParam, intentPayload, navigationType, sendIntent])
+
+    // sync back the dappNameParamRef for future checks
+    dappNameParamRef.current = dappNameParam
+  }, [dappNameParam, intentPayload, sendIntent])
 
   // auto-launch the dapp if the route param matches the dapp name
   usePromise(async () => {
-    if (dappNameParam && dappName && sendIntent && intentCaller) {
+    if (dappNameParam && sendIntent && intentCaller) {
       const dappNameParamDeSlugged = new NameTransforms(dappNameParam).deSlug()
+      // no intents have been sent yet and the dappName param is set so we need to auto launch the dapp
+      const autoLaunchNeeded = intentRef.current === undefined && dappNameParam
 
-      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
-        }
+      if (autoLaunchNeeded) {
+        const launchIntent = DappIntentCaller.buildIntent(DappIntentCaller.OsDappName, DappIntentTypes.Launch, dappNameParamDeSlugged)
+        await sendIntent(launchIntent)
+        // sync back the intentRef to ensure the auto launch only happens once
+        intentRef.current = launchIntent
+        return
       }
     }
-  }, [dappNameParam, dappName, sendIntent, intentCaller, intentPayload?.intent])
+  }, [dappNameParam, sendIntent, intentCaller, intentPayload?.intent])
 }

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

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

package/dist/browser/helpers/widgets/UpperWidgetTrayLayout.d.ts

@@ -1,6 +0,0 @@
-import type { WidgetTrayLayout } from '@xyo-network/os-model';
-/**
- * NOTE: Hardcoded widget tray layout and hashes are of the widget config payloads located within the dapp's payloads
- */
-export declare const UpperWidgetTrayLayout: WidgetTrayLayout;
-//# sourceMappingURL=UpperWidgetTrayLayout.d.ts.map

package/dist/browser/helpers/widgets/UpperWidgetTrayLayout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpperWidgetTrayLayout.d.ts","sourceRoot":"","sources":["../../../../src/helpers/widgets/UpperWidgetTrayLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAG7D;;GAEG;AAEH,eAAO,MAAM,qBAAqB,EAAE,gBAYnC,CAAA"}

package/dist/browser/helpers/widgets/index.d.ts

@@ -1,2 +0,0 @@
-export * from './UpperWidgetTrayLayout.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/browser/helpers/widgets/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/widgets/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/hooks/route/useManageDappBasedOffRoute.d.ts

@@ -1,19 +0,0 @@
-import type { DappIntent, XyOsContext } from '@xyo-network/os-model';
-/**
- * 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 declare const useManageDappBasedOffRoute: (intentPayload?: DappIntent, dappName?: string, context?: XyOsContext | null) => (Error | undefined)[];
-//# sourceMappingURL=useManageDappBasedOffRoute.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/hooks/route/useManageDappBasedOffRoute.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useManageDappBasedOffRoute.d.ts","sourceRoot":"","sources":["../../../../../../../../src/modules/Dapp/modules/Window/hooks/route/useManageDappBasedOffRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AASpE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,0BAA0B,mBAAoB,UAAU,aAAa,MAAM,YAAY,WAAW,GAAG,IAAI,0BAOrH,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/hooks/useDappState.d.ts

@@ -1,8 +0,0 @@
-import type { XyOsContext } from '@xyo-network/os-model';
-import { DappIntentTypes } from '@xyo-network/os-model';
-export declare const dappState: (intentType?: DappIntentTypes, context?: XyOsContext | null) => {
-    active: boolean | null | undefined;
-    minimized: boolean;
-    open: boolean;
-};
-//# sourceMappingURL=useDappState.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/hooks/useDappState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDappState.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/hooks/useDappState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,eAAO,MAAM,SAAS,gBAAiB,eAAe,YAAY,WAAW,GAAG,IAAI;;;;CAUnF,CAAA"}

package/src/helpers/widgets/UpperWidgetTrayLayout.ts

@@ -1,20 +0,0 @@
-import type { WidgetTrayLayout } from '@xyo-network/os-model'
-import { WidgetTrayLayoutSchema } from '@xyo-network/os-model'
-
-/**
- * NOTE: Hardcoded widget tray layout and hashes are of the widget config payloads located within the dapp's payloads
- */
-
-export const UpperWidgetTrayLayout: WidgetTrayLayout = {
-  label: 'Lower Widget Tray Layout',
-  layout: [
-    { dappId: 'TimeClock', mode: 'FlatClock' },
-    {
-      configHash: 'bb0ea5701c20e86d77b1a369f77d17658df62572d54f1f1aafdf15e3c29e3b3b', dappId: 'Markets', mode: 'PriceWidget',
-    },
-    {
-      configHash: 'ea8afca9d4a9b0843035e3722d9f6400058a1eab71996b8e4e20e2449662e2bf', dappId: 'Markets', mode: 'PriceWidget',
-    },
-  ],
-  schema: WidgetTrayLayoutSchema,
-}

package/src/helpers/widgets/index.ts

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

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

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

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