@xyo-network/os-react-runtime 4.2.0 → 4.2.2

package/dist/browser/modules/Dapp/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/modules/Dapp/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,KAAwB,MAAM,OAAO,CAAA;AAM5C,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B,OAAO,EAAE,sBAAsB,CAAA;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;CAC/B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgCtD,CAAA;AAED,eAAO,MAAM,iBAAiB,gDAAsB,CAAA"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/modules/Dapp/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACzE,OAAO,KAAwB,MAAM,OAAO,CAAA;AAQ5C,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B,OAAO,EAAE,sBAAsB,CAAA;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;CAC/B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA;AAED,eAAO,MAAM,iBAAiB,gDAAsB,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/DappWindow.d.ts

@@ -1,17 +1,6 @@
-import type { DappIntent } from '@xyo-network/os-model';
-import type { RegisteredReactDappSet, XyOsUiContext } from '@xyo-network/os-react-model';
-import type { WalletInstance } from '@xyo-network/wallet-model';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { DappState } from './hooks/index.ts';
-export interface DappWindowProps {
-    context?: XyOsUiContext | null;
-    dappSet?: RegisteredReactDappSet;
-    dappState?: DappState;
-    dappWallet?: WalletInstance;
-    errors?: Error[];
-    intent?: DappIntent;
-    nodeCreateError?: Error;
-}
+import type { DappWindowProps } from './types/index.ts';
 /** A component that can load immediately, but delays node loading and dapp mounting till corresponding launch intent arrives */
-export declare const DappWindow: React.FC<DappWindowProps>;
+export declare const DappWindow: React.FC<DappWindowProps & PropsWithChildren>;
 //# sourceMappingURL=DappWindow.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/DappWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DappWindow.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/DappWindow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAIxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAOjD,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,EAAE,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,eAAe,CAAC,EAAE,KAAK,CAAA;CACxB;AAED,gIAAgI;AAChI,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoHhD,CAAA"}
+{"version":3,"file":"DappWindow.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/DappWindow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,gIAAgI;AAChI,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,iBAAiB,CA4BpE,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/MetaTags.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface DappMetaTagsProps {
+    active?: boolean;
+    activePath?: string;
+    dappName?: string;
+}
+export declare const DappMetaTags: React.FC<DappMetaTagsProps>;
+//# sourceMappingURL=MetaTags.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/MetaTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaTags.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/MetaTags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgBpD,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/Rendered.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DappWindowProps } from './types/index.ts';
+/** A pure component that can render a dapp via props only */
+export declare const DappRendered: React.FC<DappWindowProps>;
+//# sourceMappingURL=Rendered.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/Rendered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rendered.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/Rendered.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,6DAA6D;AAC7D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmFlD,CAAA"}

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

@@ -2,7 +2,7 @@ export * from './lib/index.ts';
 export * from './menu/index.ts';
 export * from './route/index.ts';
 export * from './useDappMenuResourceValues.tsx';
-export * from './useDecomposeDappSet.js';
+export * from './useDecomposeDapp.tsx';
 export * from './useSkipLoadingScreen.js';
 export * from './useSyncOsRegisteredAccessInterfaces.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0CAA0C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0CAA0C,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/hooks/menu/useDappMenu.d.ts

@@ -1,26 +1,7 @@
 import type { DappName, XyOsContext } from '@xyo-network/os-model';
+import type { DappMenuProperties } from '../../types/index.ts';
 /**
  * Use the passed in dapp Node to resolve menu related modules and return the menu related items
  */
-export declare const useDappMenu: (context?: XyOsContext | null, dappName?: DappName) => {
-    activePath: string | undefined;
-    error: Error | undefined;
-    menuConfig: import("@xyo-network/payload-model").WithSources<import("@xylabs/object").DeepRestrictToStringKeys<{
-        schema: "network.xyo.dapp.nav.menu.config";
-        defaultPath?: string | undefined;
-        hideMobileMenu?: boolean | undefined;
-    }>> | undefined;
-    menuItemsVisible: import("@xyo-network/payload-model").WithSources<import("@xylabs/object").DeepRestrictToStringKeys<{
-        schema: "network.xyo.dapp.nav.item";
-        hidden?: boolean | undefined;
-        matchType?: "startsWith" | "exact" | undefined;
-        path: string;
-        primaryText: string;
-        secondaryText?: string | undefined;
-        svgIcon?: string | undefined;
-        svgIconActive?: string | undefined;
-        weight?: number | undefined;
-    }>>[] | undefined;
-    onPathChange: (path: string) => void;
-};
+export declare const useDappMenu: (context?: XyOsContext | null, dappName?: DappName) => DappMenuProperties;
 //# sourceMappingURL=useDappMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDappMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/modules/Dapp/modules/Window/hooks/menu/useDappMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AASlE;;GAEG;AAEH,eAAO,MAAM,WAAW,aAAc,WAAW,GAAG,IAAI,aAAa,QAAQ;;;;;;;;;;;;;;;;;;;yBAuC/C,MAAM;CAiBnC,CAAA"}
+{"version":3,"file":"useDappMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/modules/Dapp/modules/Window/hooks/menu/useDappMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAMlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAI9D;;GAEG;AAEH,eAAO,MAAM,WAAW,aAAc,WAAW,GAAG,IAAI,aAAa,QAAQ,KAAG,kBAwD/E,CAAA"}

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

@@ -0,0 +1,11 @@
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model';
+export declare const useDecomposeDapp: (dapp?: RegisteredReactDapp) => {
+    DappComponent: import("react").FC<{
+        name?: string;
+    }>;
+    dapp: RegisteredReactDapp | undefined;
+    name: string | undefined;
+    scrollable: boolean;
+    version: string | undefined;
+};
+//# sourceMappingURL=useDecomposeDapp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDecomposeDapp.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/hooks/useDecomposeDapp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAKtE,eAAO,MAAM,gBAAgB,UAAW,mBAAmB;;eAEhD,MAAM;;;;;;CAahB,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/index.d.ts

@@ -1,7 +1,9 @@
 export * from './AppBar.tsx';
 export * from './Chrome.tsx';
 export * from './components/index.ts';
-export * from './DappWindow.js';
+export * from './DappWindow.tsx';
 export * from './hooks/index.ts';
 export * from './menu/index.ts';
+export * from './Rendered.tsx';
+export * from './types/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/Dapp/modules/Window/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA"}

package/dist/browser/modules/Dapp/modules/Window/types/DappMenuProperties.d.ts

@@ -0,0 +1,9 @@
+import type { DappNavItem, DappNavMenuConfig } from '@xyo-network/os-model';
+export interface DappMenuProperties {
+    activePath?: string;
+    error?: Error;
+    menuConfig?: DappNavMenuConfig;
+    menuItems?: DappNavItem[];
+    onPathChange: (path: string) => void;
+}
+//# sourceMappingURL=DappMenuProperties.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/types/DappMenuProperties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DappMenuProperties.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/types/DappMenuProperties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAE3E,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC"}

package/dist/browser/modules/Dapp/modules/Window/types/DappWindowProps.d.ts

@@ -0,0 +1,13 @@
+import type { RegisteredReactDapp, XyOsUiContext } from '@xyo-network/os-react-model';
+import type { WalletInstance } from '@xyo-network/wallet-model';
+import type { DappState } from '../hooks/index.ts';
+import type { DappMenuProperties } from './DappMenuProperties.ts';
+export interface DappWindowProps {
+    context?: XyOsUiContext | null;
+    dapp?: RegisteredReactDapp;
+    dappMenuProperties?: DappMenuProperties;
+    dappState?: DappState;
+    dappWallet?: WalletInstance;
+    errors?: (Error | undefined)[];
+}
+//# sourceMappingURL=DappWindowProps.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/types/DappWindowProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DappWindowProps.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/types/DappWindowProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAEjE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,GAAG,SAAS,CAAC,EAAE,CAAA;CAC/B"}

package/dist/browser/modules/Dapp/modules/Window/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DappMenuProperties.ts';
+export * from './DappWindowProps.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/modules/Dapp/modules/Window/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/modules/Dapp/modules/Window/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/os-react-runtime",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "Primary SDK for using XYO Protocol 2.0",
   "homepage": "https://xyo.network",
   "bugs": {
@@ -48,23 +48,23 @@
     "@xylabs/react-shared": "^5.3.14",
     "@xyo-network/archivist-indexeddb": "^3.6.6",
     "@xyo-network/archivist-model": "^3.6.6",
-    "@xyo-network/bios-browser": "^4.2.0",
-    "@xyo-network/bios-model": "^4.2.0",
+    "@xyo-network/bios-browser": "^4.2.2",
+    "@xyo-network/bios-model": "^4.2.2",
     "@xyo-network/diviner-boundwitness-indexeddb": "^3.6.6",
     "@xyo-network/diviner-model": "^3.6.6",
     "@xyo-network/diviner-payload-generic": "^3.6.6",
     "@xyo-network/diviner-payload-indexeddb": "^3.6.6",
     "@xyo-network/diviner-payload-model": "^3.6.6",
-    "@xyo-network/kernel": "^4.2.0",
-    "@xyo-network/kernel-model": "^4.2.0",
+    "@xyo-network/kernel": "^4.2.2",
+    "@xyo-network/kernel-model": "^4.2.2",
     "@xyo-network/module-event-emitter": "^3.6.6",
     "@xyo-network/module-events": "^3.6.6",
     "@xyo-network/module-factory-locator": "^3.6.6",
     "@xyo-network/node-model": "^3.6.6",
-    "@xyo-network/os-model": "^4.2.0",
-    "@xyo-network/os-react-debug": "^4.2.0",
-    "@xyo-network/os-react-model": "^4.2.0",
-    "@xyo-network/os-runtime": "^4.2.0",
+    "@xyo-network/os-model": "^4.2.2",
+    "@xyo-network/os-react-debug": "^4.2.2",
+    "@xyo-network/os-react-model": "^4.2.2",
+    "@xyo-network/os-runtime": "^4.2.2",
     "@xyo-network/payload-model": "^3.6.6",
     "@xyo-network/react-archivist": "^4.3.1",
     "@xyo-network/react-card": "^4.3.1",

package/src/modules/Dapp/Container.tsx

@@ -4,7 +4,9 @@ import React, { memo, useMemo } from 'react'
 
 import { useDappContextCreator } from '../../hooks/index.ts'
 import { DappIconButton } from './Button/index.ts'
-import { DappWindow, deriveDappState } from './modules/index.ts'
+import {
+  DappRendered, DappWindow, deriveDappState, useDappMenu,
+} from './modules/index.ts'
 
 export interface DappContainerProps {
   currentIntent?: DappIntent
@@ -28,6 +30,19 @@ export const DappContainer: React.FC<DappContainerProps> = ({
     }
   }, [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}
@@ -35,14 +50,11 @@ export const DappContainer: React.FC<DappContainerProps> = ({
       dappName={dapp?.config.name}
       dappState={dappState}
     >
-      <DappWindow
-        context={context}
-        dappSet={dappSet}
-        dappState={dappState}
-        dappWallet={dappWallet}
-        intent={currentIntent}
-        nodeCreateError={nodeCreateError}
-      />
+      <DappWindow {...dappWindowProps}>
+        <DappRendered
+          {...dappWindowProps}
+        />
+      </DappWindow>
     </DappIconButton>
   )
 }

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

@@ -1,149 +1,40 @@
+import { Snackbar } from '@mui/material'
 import { ErrorBoundary, ErrorRender } from '@xylabs/react-error'
-import { FlexCol } from '@xylabs/react-flexbox'
-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 type { PropsWithChildren } from 'react'
+import React from 'react'
 
-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 {
-  decomposeDappSet, useDappMenu, useManageDappInjectableParamsFromRoute, useManageDappPathFromRoute, useSyncOsRegisteredAccessInterfaces,
+  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
-  dappState?: DappState
-  dappWallet?: WalletInstance
-  errors?: Error[]
-  intent?: DappIntent
-  nodeCreateError?: Error
-}
+import { DappMetaTags } from './MetaTags.tsx'
+import type { DappWindowProps } from './types/index.ts'
 
 /** A component that can load immediately, but delays node loading and dapp mounting till corresponding launch intent arrives */
-export const DappWindow: React.FC<DappWindowProps> = ({
-  context, dappSet, dappState, dappWallet, errors, nodeCreateError,
+export const DappWindow: React.FC<DappWindowProps & PropsWithChildren> = ({
+  children, context, dapp, dappMenuProperties, dappState,
 }) => {
-  const {
-    DappComponent, name, scrollable = true, version,
-  } = decomposeDappSet(dappSet)
+  const { name } = dapp?.config ?? {}
 
-  const { active, minimized } = dappState ?? {}
-
-  const TypedDappComponent = useMemo(() => DappComponent as React.FC<{
-    name?: string
-  }>, [])
+  const { active } = dappState ?? {}
 
   useSyncOsRegisteredAccessInterfaces(context)
   const routingError = useManageDappPathFromRoute(context, name)
   const injectableErrors = useManageDappInjectableParamsFromRoute(context)
 
-  const {
-    activePath, error: menuError, menuConfig, menuItemsVisible, onPathChange,
-  } = useDappMenu(context, name)
-
-  const resolvedErrors = [...injectableErrors, routingError, nodeCreateError, menuError, ...(errors ?? [])].filter(Boolean)
-  const hasErrors = resolvedErrors.length > 0
+  const resolvedErrors = [...injectableErrors, routingError]
 
   return (
     <>
-      {active
-        ? (
-            <Helmet>
-              <title>
-                {activePath ? `${new NameTransforms(activePath).deSlug()} | ` : ''}
-                {' '}
-                {name}
-                {' '}
-                dApp
-              </title>
-            </Helmet>
-          )
-        : null}
       <ErrorBoundary>
-        <DappChrome
-          appBar={(
-            <>
-              {/* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */}
-              <DappBar context={context} name={name} version={version} title={activePath ? new NameTransforms(activePath).deSlug() : ''} />
-            </>
-          )}
-          height="100dvh"
-          width="100dvw"
-          largeScreenMenu={active && (
-            <DappMenuDrawer
-              context={context}
-              name={name}
-              version={version}
-              activePath={activePath}
-              onPathChange={onPathChange}
-              menuConfig={menuConfig}
-              menuItems={menuItemsVisible}
-            />
-          )}
-          smallScreenMenu={active && (
-            <DappBottomNavigation
-              activePath={activePath}
-              onPathChange={onPathChange}
-              menuConfig={menuConfig}
-              menuItems={menuItemsVisible}
-              sx={{ display: menuConfig ? 'flex' : 'none' }}
-            />
-          )}
-          /* Ensure that loading goes away when error occurs */
-          splashScreen={hasErrors ? null : <DappLoadingFlexbox minimize={!!minimized} name={name} open={!!active} />}
-        >
-          {hasErrors
-            ? (
-                <FlexCol padding={2}>
-                  {resolvedErrors?.map(error => (
-                    <ErrorRender key={error?.message} error={error} scope="DappWindow" />
-                  ))}
-                </FlexCol>
-              )
-            : null}
-          <WalletProvider rootWallet={dappWallet}>
-            {context === null
-              ? null
-              : (
-                  <XyOsUiContextProvider value={context}>
-                    {/* Prevent dapps from reaching out to the os node */}
-                    <NodeProvider node={context?.root}>
-                      {/* Only load the dapp component when the dapp's node exists and dapp is launched */}
-                      {active
-                        ? (
-                            <>
-                              <FlexCol
-                                position="absolute"
-                                top={0}
-                                left={0}
-                                right={0}
-                                bottom={0}
-                                alignItems="stretch"
-                                justifyContent="stretch"
-                                sx={{ overflowY: scrollable ? 'auto' : 'hidden' }}
-                              >
-                                <TypedDappComponent name={name} />
-                              </FlexCol>
-                              <DappAccessFlexbox context={context} />
-                            </>
-                          )
-                        : null}
-                    </NodeProvider>
-                  </XyOsUiContextProvider>
-                )}
-          </WalletProvider>
-        </DappChrome>
+        <DappMetaTags active={active} activePath={dappMenuProperties?.activePath} dappName={name} />
+        {resolvedErrors.map(error => (
+          <Snackbar
+            key={error?.message}
+            open={!!error}
+            message={<ErrorRender error={error} scope="DappWindow" />}
+          />
+        ))}
+        {children}
       </ErrorBoundary>
     </>
   )

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

@@ -0,0 +1,27 @@
+import { NameTransforms } from '@xyo-network/os-runtime'
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+export interface DappMetaTagsProps {
+  active?: boolean
+  activePath?: string
+  dappName?: string
+}
+
+export const DappMetaTags: React.FC<DappMetaTagsProps> = ({
+  active, activePath, dappName,
+}) => {
+  return active
+    ? (
+        <Helmet>
+          <title>
+            {activePath ? `${new NameTransforms(activePath).deSlug()} | ` : ''}
+            {' '}
+            {dappName}
+            {' '}
+            dApp
+          </title>
+        </Helmet>
+      )
+    : null
+}

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

@@ -0,0 +1,101 @@
+import { ErrorRender } from '@xylabs/react-error'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { NameTransforms } from '@xyo-network/os-runtime'
+import { NodeProvider } from '@xyo-network/react-node'
+import { WalletProvider } from '@xyo-network/react-wallet'
+import React from 'react'
+
+import { XyOsUiContextProvider } from '../../../XyOsUi/index.ts'
+import { DappAccessFlexbox } from '../access-interface/index.ts'
+import { DappBar } from './AppBar.tsx'
+import { DappChrome } from './Chrome.tsx'
+import { useDecomposeDapp } from './hooks/index.ts'
+import { DappLoadingFlexbox } from './LoadingFlexbox.tsx'
+import { DappBottomNavigation, DappMenuDrawer } from './menu/index.ts'
+import type { DappWindowProps } from './types/index.ts'
+
+/** A pure component that can render a dapp via props only */
+export const DappRendered: React.FC<DappWindowProps> = ({
+  context, dapp, dappMenuProperties, dappState, dappWallet, errors,
+}) => {
+  const {
+    DappComponent, name, scrollable = true, version,
+  } = useDecomposeDapp(dapp)
+
+  const { active, minimized } = dappState ?? {}
+
+  const hasErrors = errors && errors.length > 0
+
+  return (
+    <DappChrome
+    /* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */
+      appBar={(
+        <DappBar
+          context={context}
+          name={name}
+          version={version}
+          title={dappMenuProperties?.activePath ? new NameTransforms(dappMenuProperties.activePath).deSlug() : ''}
+        />
+      )}
+      height="100dvh"
+      width="100dvw"
+      largeScreenMenu={active && (
+        <DappMenuDrawer
+          context={context}
+          name={name}
+          version={version}
+          {...dappMenuProperties}
+        />
+      )}
+      smallScreenMenu={active && (
+        <DappBottomNavigation
+          {...dappMenuProperties}
+          sx={{ display: dappMenuProperties?.menuConfig ? 'flex' : 'none' }}
+        />
+      )}
+      /* Ensure that loading goes away when error occurs */
+      splashScreen={hasErrors ? null : <DappLoadingFlexbox minimize={!!minimized} name={name} open={!!active} />}
+    >
+      {hasErrors
+        ? (
+            <FlexCol padding={2}>
+              {errors?.map(error => (
+                <ErrorRender key={error?.message} error={error} scope="DappWindow" />
+              ))}
+            </FlexCol>
+          )
+        : null}
+      <WalletProvider rootWallet={dappWallet}>
+        {/* Only load the dapp component when the dapp's node exists and dapp is launched */}
+        {context === null
+          ? null
+          : (
+              <XyOsUiContextProvider value={context}>
+                {/* Prevent dapps from reaching out to the os node */}
+                <NodeProvider node={context?.root}>
+                  {active
+                    ? (
+                        <>
+                          <FlexCol
+                            position="absolute"
+                            top={0}
+                            left={0}
+                            right={0}
+                            bottom={0}
+                            alignItems="stretch"
+                            justifyContent="stretch"
+                            sx={{ overflowY: scrollable ? 'auto' : 'hidden' }}
+                          >
+                            <DappComponent name={dapp?.config.name} />
+                          </FlexCol>
+                          <DappAccessFlexbox context={context} />
+                        </>
+                      )
+                    : null}
+                </NodeProvider>
+              </XyOsUiContextProvider>
+            )}
+      </WalletProvider>
+    </DappChrome>
+  )
+}

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

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

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

@@ -5,6 +5,7 @@ import {
 } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
+import type { DappMenuProperties } from '../../types/index.ts'
 import { DappPathHelpers } from '../lib/index.ts'
 import { useDappMenuDependencies } from '../useDappMenuResourceValues.tsx'
 
@@ -12,7 +13,7 @@ import { useDappMenuDependencies } from '../useDappMenuResourceValues.tsx'
  * Use the passed in dapp Node to resolve menu related modules and return the menu related items
  */
 
-export const useDappMenu = (context?: XyOsContext | null, dappName?: DappName) => {
+export const useDappMenu = (context?: XyOsContext | null, dappName?: DappName): DappMenuProperties => {
   const [error, setError] = useState<Error>()
   const params = useParams()
   const navigate = useNavigate()
@@ -65,7 +66,7 @@ export const useDappMenu = (context?: XyOsContext | null, dappName?: DappName) =
     activePath,
     error,
     menuConfig: menuConfigs?.[0],
-    menuItemsVisible,
+    menuItems: menuItemsVisible,
     onPathChange,
   }
 }

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

@@ -0,0 +1,21 @@
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model'
+import { useMemo } from 'react'
+
+import { NodeManifest } from '../NodeManifest.tsx'
+
+export const useDecomposeDapp = (dapp?: RegisteredReactDapp) => {
+  const DappComponent = useMemo(() => dapp?.params.modes?.window?.component ?? NodeManifest, []) as React.FC<{
+    name?: string
+  }>
+  const name = dapp?.config.name
+  const version = dapp?.config.version
+  const scrollable = dapp?.params.modes?.window?.scrollable ?? true
+
+  return {
+    DappComponent,
+    dapp,
+    name,
+    scrollable,
+    version,
+  }
+}