@xyo-network/os-react-runtime 4.2.0-rc.9 → 4.2.1

package/dist/browser/index.mjs

@@ -158,16 +158,16 @@ var WidgetCard = /* @__PURE__ */ __name(({ widgetName, widgetContent, widgetPath
 // src/components/Widgets/WidgetCardExamples.tsx
 import { Stack as Stack2 } from "@mui/material";
 import { useColorSchemeEx as useColorSchemeEx4 } from "@xylabs/react-invertible-theme";
-import React41 from "react";
+import React43 from "react";
 
 // src/DappPage.tsx
 import { Container as Container3, Typography as Typography10 } from "@mui/material";
 import { ThrownErrorBoundary } from "@xylabs/react-error";
 import { FlexCol as FlexCol13 } from "@xylabs/react-flexbox";
-import React33 from "react";
+import React35 from "react";
 
 // src/modules/Dapp/Container.tsx
-import React26, { memo, useMemo as useMemo13 } from "react";
+import React28, { memo, useMemo as useMemo13 } from "react";
 
 // src/hooks/access-requests/useBuildDappAccessRequestResource.ts
 import { usePromise } from "@xylabs/react-promise";
@@ -2067,64 +2067,9 @@ var DefaultComingSoon = /* @__PURE__ */ __name(({ children, desc = defaultDescri
 }, "DefaultComingSoon");
 
 // src/modules/Dapp/modules/Window/DappWindow.tsx
+import { Snackbar } from "@mui/material";
 import { ErrorBoundary, ErrorRender as ErrorRender3 } from "@xylabs/react-error";
-import { FlexCol as FlexCol10 } from "@xylabs/react-flexbox";
-import { NameTransforms as NameTransforms4 } from "@xyo-network/os-runtime";
-import { NodeProvider as NodeProvider2 } from "@xyo-network/react-node";
-import { WalletProvider } from "@xyo-network/react-wallet";
-import React25, { useMemo as useMemo12 } from "react";
-import { Helmet } from "react-helmet";
-
-// src/modules/XyOsUi/contexts/XyOsUiContext.ts
-import { createContext, useContext } from "react";
-var XyOsUiContext = createContext(void 0);
-var useXyOsUiContext = /* @__PURE__ */ __name(() => {
-  return useContext(XyOsUiContext);
-}, "useXyOsUiContext");
-var XyOsUiContextProvider = XyOsUiContext.Provider;
-
-// src/modules/XyOsUi/lib/XyOsUi.ts
-import { forget } from "@xylabs/forget";
-import { ModuleFactoryLocator as ModuleFactoryLocator2 } from "@xyo-network/module-factory-locator";
-import { dappsReadyConnection, XyOs } from "@xyo-network/os-runtime";
-var XyOsUi = class extends XyOs {
-  static {
-    __name(this, "XyOsUi");
-  }
-  dappRegistrationResults = {
-    failed: [],
-    succeeded: []
-  };
-  dappsReadyConnection = dappsReadyConnection();
-  constructor(params) {
-    super(params);
-    this.eventBus.addConnection(this.dappsReadyConnection);
-  }
-  static get monitoring() {
-    return new XyOsBrowserMonitor();
-  }
-  static get xyOsUiGlobal() {
-    return XyOs.xyOsGlobal;
-  }
-  static hideSplash() {
-    this.xyOsUiGlobal.splashScreen.hideSplash();
-    this.xyOsUiGlobal.splashScreen.onComplete();
-    this.setSplashStatus("complete");
-  }
-  static setSplashStatus(status) {
-    const statusText = this.xyOsUiGlobal.splashScreen._LOADING_MESSAGES[status];
-    this.xyOsUiGlobal.splashScreen.setStatusText(statusText);
-  }
-  async boot(wallet, locator = new ModuleFactoryLocator2()) {
-    await super.boot(wallet, locator);
-    const registerLazy = /* @__PURE__ */ __name(async () => {
-      this.dappRegistrationResults = await this.dappRegistrationService.start();
-      await this.dappsReadyConnection.emit("dappsReady", {});
-    }, "registerLazy");
-    forget(registerLazy());
-    return this;
-  }
-};
+import React19 from "react";
 
 // src/modules/Dapp/modules/Window/hooks/lib/DappPathHelpers.ts
 import { NameTransforms as NameTransforms2 } from "@xyo-network/os-runtime";
@@ -2231,7 +2176,7 @@ var useDappMenu = /* @__PURE__ */ __name((context, dappName) => {
     activePath,
     error,
     menuConfig: menuConfigs?.[0],
-    menuItemsVisible,
+    menuItems: menuItemsVisible,
     onPathChange
   };
 }, "useDappMenu");
@@ -2242,21 +2187,19 @@ import { usePromise as usePromise11 } from "@xylabs/react-promise";
 import { asArchivistInstance } from "@xyo-network/archivist-model";
 import { isDappInjectableParams } from "@xyo-network/os-model";
 import { DappCaller as DappCaller2 } from "@xyo-network/os-runtime";
-import { useNavigate as useNavigate5, useParams as useParams3, useSearchParams as useSearchParams2 } from "react-router-dom";
+import { useNavigate as useNavigate5, useSearchParams as useSearchParams2 } from "react-router-dom";
 var useManageDappInjectableParamsFromRoute = /* @__PURE__ */ __name((context) => {
   const [queryParams] = useSearchParams2();
-  const params = useParams3();
   const navigate = useNavigate5();
   const [, callerError] = usePromise11(async () => {
-    if (context && (params || queryParams)) {
+    if (context && queryParams) {
       const dappCaller = new DappCaller2(context);
       const pathname = globalThis.location.pathname;
       await dappCaller.setDappInjectableRouteParams(queryParams, pathname);
     }
   }, [
     context,
-    queryParams,
-    params
+    queryParams
   ]);
   const [, listenerError] = usePromise11(async () => {
     let archivist;
@@ -2355,9 +2298,9 @@ var useManageDappIntentRequest = /* @__PURE__ */ __name((context, dappId) => {
 // src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappPathFromRoute.tsx
 import { usePromise as usePromise13 } from "@xylabs/react-promise";
 import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef5 } from "react";
-import { useNavigate as useNavigate6, useParams as useParams4 } from "react-router-dom";
+import { useNavigate as useNavigate6, useParams as useParams3 } from "react-router-dom";
 var useManageDappPathFromRoute = /* @__PURE__ */ __name((context, dappName) => {
-  const params = useParams4();
+  const params = useParams3();
   const { path: pathParam } = params;
   const dappMenuCaller = useDappMenuCaller(context, {
     ignoreProvidedNode: true
@@ -2393,7 +2336,7 @@ var useManageDappPathFromRoute = /* @__PURE__ */ __name((context, dappName) => {
     defaultPath,
     menuSelection
   ]);
-  usePromise13(async () => {
+  const [, updateErrors] = usePromise13(async () => {
     if (context && pathParam !== currentPathRef.current) {
       await updateMenuArchivist(pathParam);
       currentPathRef.current = pathParam;
@@ -2403,6 +2346,7 @@ var useManageDappPathFromRoute = /* @__PURE__ */ __name((context, dappName) => {
     pathParam,
     updateMenuArchivist
   ]);
+  return updateErrors;
 }, "useManageDappPathFromRoute");
 
 // src/modules/Dapp/modules/Window/hooks/route/helpers/useManageDappStateFromRoute.tsx
@@ -2410,9 +2354,9 @@ import { usePromise as usePromise14 } from "@xylabs/react-promise";
 import { DappIntentTypes as DappIntentTypes9 } from "@xyo-network/os-model";
 import { DappIntentCaller as DappIntentCaller5, NameTransforms as NameTransforms3 } from "@xyo-network/os-runtime";
 import { useRef as useRef6 } from "react";
-import { useParams as useParams5 } from "react-router-dom";
+import { useParams as useParams4 } from "react-router-dom";
 var useManageDappStateFromRoute = /* @__PURE__ */ __name((intentPayload) => {
-  const params = useParams5();
+  const params = useParams4();
   const { dappName: dappNameParam } = params;
   const sendIntent = useSendDappIntent();
   const intentCaller = useDappIntentCaller();
@@ -2450,6 +2394,9 @@ var useManageDappStateFromRoute = /* @__PURE__ */ __name((intentPayload) => {
   ]);
 }, "useManageDappStateFromRoute");
 
+// src/modules/Dapp/modules/Window/hooks/useDecomposeDapp.tsx
+import { useMemo as useMemo11 } from "react";
+
 // src/modules/Dapp/modules/Window/NodeManifest.tsx
 import { usePromise as usePromise15 } from "@xylabs/react-promise";
 import { useProvidedNode } from "@xyo-network/react-node";
@@ -2462,10 +2409,9 @@ var NodeManifest = /* @__PURE__ */ __name(() => {
   return /* @__PURE__ */ React17.createElement(React17.Fragment, null, node ? /* @__PURE__ */ React17.createElement("pre", null, JSON.stringify(nodeManifest, null, 2)) : null);
 }, "NodeManifest");
 
-// src/modules/Dapp/modules/Window/hooks/useDecomposeDappSet.tsx
-var decomposeDappSet = /* @__PURE__ */ __name((dappSet) => {
-  const { dapp } = dappSet ?? {};
-  const DappComponent = dapp?.params.modes?.window?.component ?? NodeManifest;
+// src/modules/Dapp/modules/Window/hooks/useDecomposeDapp.tsx
+var useDecomposeDapp = /* @__PURE__ */ __name((dapp) => {
+  const DappComponent = useMemo11(() => dapp?.params.modes?.window?.component ?? NodeManifest, []);
   const name = dapp?.config.name;
   const version = dapp?.config.version;
   const scrollable = dapp?.params.modes?.window?.scrollable ?? true;
@@ -2476,10 +2422,10 @@ var decomposeDappSet = /* @__PURE__ */ __name((dappSet) => {
     scrollable,
     version
   };
-}, "decomposeDappSet");
+}, "useDecomposeDapp");
 
 // src/modules/Dapp/modules/Window/hooks/useSkipLoadingScreen.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { useSearchParams as useSearchParams3 } from "react-router-dom";
 var PARAMS_TO_TARGET = [
   "username",
@@ -2488,7 +2434,7 @@ var PARAMS_TO_TARGET = [
 var useSkipLoadingScreen = /* @__PURE__ */ __name(() => {
   const [params] = useSearchParams3();
   const customer = detectCustomer();
-  return useMemo11(() => {
+  return useMemo12(() => {
     const hasTargetParams = PARAMS_TO_TARGET.some((param) => params.has(param));
     const isCustomer = !!customer;
     return hasTargetParams || isCustomer;
@@ -2527,186 +2473,46 @@ var useSyncOsRegisteredAccessInterfaces = /* @__PURE__ */ __name((context) => {
   ]);
 }, "useSyncOsRegisteredAccessInterfaces");
 
-// src/modules/Dapp/modules/Window/LoadingFlexbox.tsx
-import { Fade, styled as styled2, Typography as Typography6 } from "@mui/material";
-import { FlexCol as FlexCol7 } from "@xylabs/react-flexbox";
-import React20, { useEffect as useEffect15, useState as useState14 } from "react";
-
-// src/modules/LoadingOsLogo/LoadingOsLogo.tsx
-import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
-import React18, { useState as useState13 } from "react";
-
-// src/modules/LoadingOsLogo/img/index.ts
-import { default as default20 } from "./xyoOS-Icon-2Q4XCUPP.svg";
-
-// src/modules/LoadingOsLogo/LoadingOsLogo.tsx
-var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecond = 0.5, ...props }) => {
-  const [imageLoaded, setImageLoaded] = useState13(false);
-  if (!imageLoaded) {
-    const img = new Image();
-    img.addEventListener("load", () => setImageLoaded(true));
-    img.src = default20;
-  }
-  return imageLoaded ? /* @__PURE__ */ React18.createElement(FlexCol6, {
-    sx: {
-      "@keyframes fadeOut": {
-        "0%": {
-          opacity: 1
-        },
-        "100%": {
-          opacity: 0.1
-        },
-        "35%": {
-          opacity: 1
-        }
-      },
-      "animation": busy ? "fadeOut linear" : void 0,
-      "animationDuration": "1500ms",
-      "animationFillMode": "both"
-    },
-    ...props
-  }, /* @__PURE__ */ React18.createElement(FlexCol6, {
-    sx: {
-      "@keyframes spin": {
-        "0%": {
-          transform: "rotate(360deg)"
-        },
-        "100%": {
-          transform: "rotate(0deg)"
-        }
-      },
-      "animation": busy ? `spin ${1 / spinsPerSecond}s linear infinite` : void 0,
-      "animationDirection": "reverse"
-    },
-    ...props
-  }, /* @__PURE__ */ React18.createElement("img", {
-    src: default20,
-    height: widthInPixels ?? 22
-  }))) : null;
-}, "LoadingOsLogo");
-
-// src/modules/Dapp/modules/Window/Trail.tsx
-import { a, useTrail } from "@react-spring/web";
-import React19 from "react";
-var TextTrail = /* @__PURE__ */ __name(({ open, children }) => {
-  const items = React19.Children.toArray(children);
-  const trail = useTrail(items.length, {
-    config: {
-      friction: 200,
-      mass: 5,
-      tension: 2e3
-    },
-    from: {
-      height: "auto",
-      opacity: 0,
-      y: 20
-    },
-    height: "auto",
-    opacity: open ? 1 : 0,
-    y: open ? 0 : 60
-  });
-  return /* @__PURE__ */ React19.createElement("div", null, trail.map(({ height, ...style }, index) => /* @__PURE__ */ React19.createElement(a.div, {
-    key: index,
-    style
-  }, /* @__PURE__ */ React19.createElement(a.div, {
-    style: {
-      height
-    }
-  }, items[index]))));
-}, "TextTrail");
+// src/modules/Dapp/modules/Window/MetaTags.tsx
+import { NameTransforms as NameTransforms4 } from "@xyo-network/os-runtime";
+import React18 from "react";
+import { Helmet } from "react-helmet";
+var DappMetaTags = /* @__PURE__ */ __name(({ active, activePath, dappName }) => {
+  return active ? /* @__PURE__ */ React18.createElement(Helmet, null, /* @__PURE__ */ React18.createElement("title", null, activePath ? `${new NameTransforms4(activePath).deSlug()} | ` : "", " ", dappName, " ", "dApp")) : null;
+}, "DappMetaTags");
 
-// src/modules/Dapp/modules/Window/LoadingFlexbox.tsx
-var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...props }) => {
-  const [fadeIn, setFadeIn] = useState14(!open);
-  const [trail, setTrail] = useState14(false);
-  const skipLoadingScreen = useSkipLoadingScreen();
-  useEffect15(() => {
-    if (open) {
-      if (skipLoadingScreen) {
-        setFadeIn(false);
-        return;
-      }
-      const fadeInTimeout = setTimeout(() => {
-        setFadeIn(false);
-      }, 2e3);
-      let trailTimeout = setTimeout(() => {
-        setTrail(true);
-        trailTimeout = setTimeout(() => {
-          setTrail(false);
-        }, 4e3);
-      }, 300);
-      return () => {
-        clearTimeout(fadeInTimeout);
-        clearTimeout(trailTimeout);
-      };
-    }
-    if (!minimize) {
-      setFadeIn(true);
-    }
-  }, [
-    minimize,
-    open,
-    skipLoadingScreen
-  ]);
-  return /* @__PURE__ */ React20.createElement(Fade, {
-    in: fadeIn,
-    unmountOnExit: true
-  }, /* @__PURE__ */ React20.createElement(StyledSplashContainer, props, /* @__PURE__ */ React20.createElement(LoadingOsLogo, {
-    widthInPixels: 100,
-    busy: true,
-    position: "absolute"
-  }), /* @__PURE__ */ React20.createElement(TextTrail, {
-    open: trail,
-    flexDirection: "row"
-  }, /* @__PURE__ */ React20.createElement(Typography6, {
-    textAlign: "center",
-    sx: {
-      fontSize: {
-        md: "3em",
-        xs: "2em"
-      }
-    }
-  }, "Loading"), /* @__PURE__ */ React20.createElement(Typography6, {
-    textAlign: "center",
-    sx: {
-      fontSize: {
-        md: "3em",
-        xs: "2em"
-      }
-    }
-  }, name), /* @__PURE__ */ React20.createElement(Typography6, {
-    textAlign: "center",
-    sx: {
-      fontSize: {
-        md: "3em",
-        xs: "2em"
-      }
-    }
-  }, "dApp"))));
-}, "DappLoadingFlexbox");
-var StyledSplashContainer = styled2(FlexCol7, {
-  name: "StyledSplashContainer"
-})(({ theme }) => {
-  return {
-    background: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    gap: theme.spacing(1),
-    height: "100%",
-    left: 0,
-    position: "absolute",
-    top: 0,
-    width: "100%",
-    zIndex: 999
-  };
-});
+// src/modules/Dapp/modules/Window/DappWindow.tsx
+var DappWindow = /* @__PURE__ */ __name(({ children, context, dapp, dappMenuProperties, dappState }) => {
+  const { name } = dapp?.config ?? {};
+  const { active } = dappState ?? {};
+  useSyncOsRegisteredAccessInterfaces(context);
+  const routingError = useManageDappPathFromRoute(context, name);
+  const injectableErrors = useManageDappInjectableParamsFromRoute(context);
+  const resolvedErrors = [
+    ...injectableErrors,
+    routingError
+  ];
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ErrorBoundary, null, /* @__PURE__ */ React19.createElement(DappMetaTags, {
+    active,
+    activePath: dappMenuProperties?.activePath,
+    dappName: name
+  }), resolvedErrors.map((error) => /* @__PURE__ */ React19.createElement(Snackbar, {
+    key: error?.message,
+    open: !!error,
+    message: /* @__PURE__ */ React19.createElement(ErrorRender3, {
+      error,
+      scope: "DappWindow"
+    })
+  })), children));
+}, "DappWindow");
 
 // src/modules/Dapp/modules/Window/menu/BottomNavigation.tsx
-import { BottomNavigation, BottomNavigationAction, Paper, styled as styled3 } from "@mui/material";
+import { BottomNavigation, BottomNavigationAction, Paper, styled as styled2 } from "@mui/material";
 import { useColorSchemeEx } from "@xylabs/react-invertible-theme";
-import React21, { useEffect as useEffect16, useState as useState15 } from "react";
+import React20, { useEffect as useEffect15, useState as useState13 } from "react";
 var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, menuItems, onPathChange, ...props }) => {
-  const [activeIndex, setActiveIndex] = useState15(0);
-  useEffect16(() => {
+  const [activeIndex, setActiveIndex] = useState13(0);
+  useEffect15(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       setActiveIndex(menuItems.findIndex((item) => activePath === item.path));
     }
@@ -2715,9 +2521,9 @@ var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, men
     menuConfig,
     menuItems
   ]);
-  return /* @__PURE__ */ React21.createElement(Paper, {
+  return /* @__PURE__ */ React20.createElement(Paper, {
     elevation: 3
-  }, /* @__PURE__ */ React21.createElement(BottomNavigation, {
+  }, /* @__PURE__ */ React20.createElement(BottomNavigation, {
     value: activeIndex,
     onChange: /* @__PURE__ */ __name((_, value) => {
       setActiveIndex(value);
@@ -2727,11 +2533,11 @@ var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, men
     showLabels: true,
     ...props
   }, menuItems?.map(({ svgIcon: icon, primaryText }, index) => {
-    return /* @__PURE__ */ React21.createElement(StyledBottomNavigationAction, {
+    return /* @__PURE__ */ React20.createElement(StyledBottomNavigationAction, {
       className: "bottom-nav-action",
       key: index,
       label: primaryText,
-      icon: /* @__PURE__ */ React21.createElement("span", {
+      icon: /* @__PURE__ */ React20.createElement("span", {
         ref: /* @__PURE__ */ __name((ref) => {
           if (ref) {
             ref.innerHTML = icon ?? "";
@@ -2741,7 +2547,7 @@ var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, men
     });
   })));
 }, "DappBottomNavigation");
-var StyledBottomNavigationAction = styled3(BottomNavigationAction, {
+var StyledBottomNavigationAction = styled2(BottomNavigationAction, {
   name: "StyledBottomNavigationAction"
 })(({ theme }) => {
   const { darkMode } = useColorSchemeEx();
@@ -2753,29 +2559,29 @@ var StyledBottomNavigationAction = styled3(BottomNavigationAction, {
 });
 
 // src/modules/Dapp/modules/Window/menu/Drawer.tsx
-import { alpha as alpha4, darken, Drawer, List, ListItem, ListItemIcon, ListItemText, Tooltip as Tooltip4, Typography as Typography8, useTheme as useTheme7 } from "@mui/material";
-import { FlexCol as FlexCol9, FlexGrowRow as FlexGrowRow5, FlexRow as FlexRow8 } from "@xylabs/react-flexbox";
+import { alpha as alpha4, darken, Drawer, List, ListItem, ListItemIcon, ListItemText, Tooltip as Tooltip4, Typography as Typography7, useTheme as useTheme7 } from "@mui/material";
+import { FlexCol as FlexCol7, FlexGrowRow as FlexGrowRow5, FlexRow as FlexRow8 } from "@xylabs/react-flexbox";
 import { useColorSchemeEx as useColorSchemeEx2 } from "@xylabs/react-invertible-theme";
 import { XyOsMonitor as XyOsMonitor3 } from "@xyo-network/os-runtime";
-import React24, { useEffect as useEffect17, useState as useState17 } from "react";
+import React23, { useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/modules/Dapp/modules/Window/menu/BottomMenuArea.tsx
 import { BugReport as BugReport2, KeyboardArrowDownRounded, KeyboardArrowUpRounded } from "@mui/icons-material";
-import { Card as Card3, Collapse, Divider as Divider3, IconButton as IconButton3, Stack, Toolbar as Toolbar2, Tooltip as Tooltip3, Typography as Typography7, useTheme as useTheme6 } from "@mui/material";
+import { Card as Card3, Collapse, Divider as Divider3, IconButton as IconButton3, Stack, Toolbar as Toolbar2, Tooltip as Tooltip3, Typography as Typography6, useTheme as useTheme6 } from "@mui/material";
 import { RotationAnimation } from "@xylabs/react-animation";
-import { FlexCol as FlexCol8, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
+import { FlexCol as FlexCol6, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
 import { DarkModeIconButtonForColorScheme as DarkModeIconButtonForColorScheme2 } from "@xylabs/react-invertible-theme";
 import { LinkEx as LinkEx2 } from "@xylabs/react-link";
-import React23, { useState as useState16 } from "react";
+import React22, { useState as useState14 } from "react";
 import XyoOSLogoWhite from "./xyoOS-Icon-White-47MP66MD.svg";
 
 // src/modules/Dapp/modules/Window/menu/SocialData.tsx
 import { Facebook, Instagram, LinkedIn, Reddit, StorefrontRounded, Telegram, X, YouTube } from "@mui/icons-material";
-import React22 from "react";
+import React21 from "react";
 import { FaDiscord } from "react-icons/fa";
 var socialLinksData = [
   {
-    icon: /* @__PURE__ */ React22.createElement(Facebook, {
+    icon: /* @__PURE__ */ React21.createElement(Facebook, {
       style: {
         fontSize: "24px"
       }
@@ -2783,7 +2589,7 @@ var socialLinksData = [
     link: "https://www.facebook.com/OfficialXYO"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(X, {
+    icon: /* @__PURE__ */ React21.createElement(X, {
       style: {
         fontSize: "24px"
       }
@@ -2791,7 +2597,7 @@ var socialLinksData = [
     link: "https://twitter.com/OfficialXYO"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(Instagram, {
+    icon: /* @__PURE__ */ React21.createElement(Instagram, {
       style: {
         fontSize: "24px"
       }
@@ -2799,7 +2605,7 @@ var socialLinksData = [
     link: "https://www.instagram.com/officialxyo/"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(Telegram, {
+    icon: /* @__PURE__ */ React21.createElement(Telegram, {
       style: {
         fontSize: "24px"
       }
@@ -2807,7 +2613,7 @@ var socialLinksData = [
     link: "https://t.me/xyonetwork"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(Reddit, {
+    icon: /* @__PURE__ */ React21.createElement(Reddit, {
       style: {
         fontSize: "24px"
       }
@@ -2815,7 +2621,7 @@ var socialLinksData = [
     link: "https://www.reddit.com/r/XYONetwork/"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(YouTube, {
+    icon: /* @__PURE__ */ React21.createElement(YouTube, {
       style: {
         fontSize: "24px"
       }
@@ -2823,7 +2629,7 @@ var socialLinksData = [
     link: "https://www.youtube.com/channel/UCyZDqb9pgntVHJVt1pxXtsw"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(LinkedIn, {
+    icon: /* @__PURE__ */ React21.createElement(LinkedIn, {
       style: {
         fontSize: "24px"
       }
@@ -2831,7 +2637,7 @@ var socialLinksData = [
     link: "https://www.linkedin.com/company/officialxyo/"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(FaDiscord, {
+    icon: /* @__PURE__ */ React21.createElement(FaDiscord, {
       style: {
         fontSize: "24px"
       }
@@ -2839,7 +2645,7 @@ var socialLinksData = [
     link: "https://discord.gg/officialxyo"
   },
   {
-    icon: /* @__PURE__ */ React22.createElement(StorefrontRounded, {
+    icon: /* @__PURE__ */ React21.createElement(StorefrontRounded, {
       style: {
         fontSize: "24px"
       }
@@ -2851,12 +2657,12 @@ var socialLinksData = [
 // src/modules/Dapp/modules/Window/menu/BottomMenuArea.tsx
 var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) => {
   const theme = useTheme6();
-  const [expanded, setExpanded] = useState16(false);
+  const [expanded, setExpanded] = useState14(false);
   const logo = XyoOSLogoWhite;
   const handleExpandClick = /* @__PURE__ */ __name(() => {
     setExpanded(!expanded);
   }, "handleExpandClick");
-  return /* @__PURE__ */ React23.createElement(Card3, {
+  return /* @__PURE__ */ React22.createElement(Card3, {
     sx: {
       position: "relative",
       borderTopLeftRadius: "10px",
@@ -2867,10 +2673,10 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       overflow: "hidden"
     },
     elevation: 4
-  }, /* @__PURE__ */ React23.createElement(FlexCol8, {
+  }, /* @__PURE__ */ React22.createElement(FlexCol6, {
     paddingY: 1,
     alignItems: "stretch"
-  }, /* @__PURE__ */ React23.createElement(Stack, {
+  }, /* @__PURE__ */ React22.createElement(Stack, {
     paddingX: 2,
     justifyContent: "space-between",
     flexDirection: "row",
@@ -2880,17 +2686,17 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       textTransform: "none",
       cursor: "pointer"
     }
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React22.createElement(Typography6, {
     gutterBottom: false
-  }, "More"), expanded ? /* @__PURE__ */ React23.createElement(KeyboardArrowUpRounded, {
+  }, "More"), expanded ? /* @__PURE__ */ React22.createElement(KeyboardArrowUpRounded, {
     sx: {
       color: "#fff"
     }
-  }) : /* @__PURE__ */ React23.createElement(KeyboardArrowDownRounded, {
+  }) : /* @__PURE__ */ React22.createElement(KeyboardArrowDownRounded, {
     sx: {
       color: "#fff"
     }
-  }))), /* @__PURE__ */ React23.createElement(Collapse, {
+  }))), /* @__PURE__ */ React22.createElement(Collapse, {
     in: expanded,
     timeout: "auto",
     unmountOnExit: true,
@@ -2898,44 +2704,44 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       paddingBottom: 3,
       color: "#fff"
     }
-  }, /* @__PURE__ */ React23.createElement(Divider3, {
+  }, /* @__PURE__ */ React22.createElement(Divider3, {
     flexItem: true
-  }), /* @__PURE__ */ React23.createElement(FlexCol8, {
+  }), /* @__PURE__ */ React22.createElement(FlexCol6, {
     alignItems: "center"
-  }, /* @__PURE__ */ React23.createElement(Toolbar2, {
+  }, /* @__PURE__ */ React22.createElement(Toolbar2, {
     sx: {
       paddingX: 1.5
     }
-  }, /* @__PURE__ */ React23.createElement(Tooltip3, {
+  }, /* @__PURE__ */ React22.createElement(Tooltip3, {
     title: "Debug Node View"
-  }, /* @__PURE__ */ React23.createElement(IconButton3, {
+  }, /* @__PURE__ */ React22.createElement(IconButton3, {
     onClick: openDebug,
     sx: {
       color: "#fff"
     }
-  }, /* @__PURE__ */ React23.createElement(BugReport2, null))), /* @__PURE__ */ React23.createElement(Tooltip3, {
+  }, /* @__PURE__ */ React22.createElement(BugReport2, null))), /* @__PURE__ */ React22.createElement(Tooltip3, {
     title: "Toggle Light/Dark Mode"
-  }, /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(DarkModeIconButtonForColorScheme2, {
+  }, /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(DarkModeIconButtonForColorScheme2, {
     defaultLightModeColor: "warning"
-  })))), /* @__PURE__ */ React23.createElement(FlexRow7, {
+  })))), /* @__PURE__ */ React22.createElement(FlexRow7, {
     flexWrap: "wrap"
-  }, socialLinksData.map((social) => /* @__PURE__ */ React23.createElement(RotationAnimation, {
+  }, socialLinksData.map((social) => /* @__PURE__ */ React22.createElement(RotationAnimation, {
     key: social.link,
     rotation: 20
-  }, /* @__PURE__ */ React23.createElement(IconButton3, {
+  }, /* @__PURE__ */ React22.createElement(IconButton3, {
     sx: {
       color: "#fff"
     },
     href: social.link,
     target: "_blank"
-  }, social.icon)))), /* @__PURE__ */ React23.createElement(FlexRow7, {
+  }, social.icon)))), /* @__PURE__ */ React22.createElement(FlexRow7, {
     padding: 1,
     justifyContent: "center",
     gap: 0.5
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React22.createElement(Typography6, {
     variant: "body2",
     color: theme.palette.text.primary
-  }, "Powered By"), /* @__PURE__ */ React23.createElement("img", {
+  }, "Powered By"), /* @__PURE__ */ React22.createElement("img", {
     style: {
       color: theme.palette.text.primary,
       fill: theme.palette.text.primary
@@ -2943,43 +2749,43 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
     src: logo,
     width: "auto",
     height: "20px"
-  })), /* @__PURE__ */ React23.createElement(Typography7, {
+  })), /* @__PURE__ */ React22.createElement(Typography6, {
     variant: "caption",
     color: theme.palette.text.primary
-  }, "Copyright \xA9 2024 XY Labs, Inc."), /* @__PURE__ */ React23.createElement(Stack, {
+  }, "Copyright \xA9 2024 XY Labs, Inc."), /* @__PURE__ */ React22.createElement(Stack, {
     gap: 0.5,
     flexDirection: "row"
-  }, /* @__PURE__ */ React23.createElement(LinkEx2, {
+  }, /* @__PURE__ */ React22.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xylabs.com/privacy/"
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React22.createElement(Typography6, {
     variant: "caption"
-  }, "Privacy")), " ", "\u2022", " ", /* @__PURE__ */ React23.createElement(LinkEx2, {
+  }, "Privacy")), " ", "\u2022", " ", /* @__PURE__ */ React22.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xylabs.com/terms/"
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React22.createElement(Typography6, {
     variant: "caption"
-  }, "Terms")), " ", "\u2022", " ", /* @__PURE__ */ React23.createElement(LinkEx2, {
+  }, "Terms")), " ", "\u2022", " ", /* @__PURE__ */ React22.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xyo.network/"
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React22.createElement(Typography6, {
     variant: "caption"
   }, "XYO Website"))))));
 }, "BottomMenuArea");
 
 // src/modules/Dapp/modules/Window/menu/StyledListItems.tsx
-import { ListItemButton, styled as styled4 } from "@mui/material";
-var StyledMenuIconWrapSpan = styled4("span", {
+import { ListItemButton, styled as styled3 } from "@mui/material";
+var StyledMenuIconWrapSpan = styled3("span", {
   name: "StyledMenuIconWrapSpan"
 })(() => ({
   alignItems: "center",
   display: "inline-flex",
   flexDirection: "column"
 }));
-var StyledListItemButton = styled4(ListItemButton, {
+var StyledListItemButton = styled3(ListItemButton, {
   name: "StyledListItemButton"
 })(({ theme, active }) => {
   const activeOrHoverColor = theme.palette.primary.main;
@@ -3008,12 +2814,12 @@ var StyledListItemButton = styled4(ListItemButton, {
 
 // src/modules/Dapp/modules/Window/menu/Drawer.tsx
 var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, name, menuConfig, menuItems, onPathChange, version, ...props }) => {
-  const [path, setPath] = useState17("");
+  const [path, setPath] = useState15("");
   const { darkMode } = useColorSchemeEx2();
   const theme = useTheme7();
   const drawerColor = darkMode ? theme.palette.background.paper : darken(theme.palette.primary.main, 0.5);
   const activeColor = theme.palette.primary.light;
-  useEffect17(() => {
+  useEffect16(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       const newPath = menuItems.find((item) => activePath === item.path)?.path ?? "";
       setPath(newPath);
@@ -3031,7 +2837,7 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     onPathChange?.(to2);
   }, "handleChange");
   const { closeDebug, debugOpen, openDebug } = useDebugClick();
-  return /* @__PURE__ */ React24.createElement(Drawer, {
+  return /* @__PURE__ */ React23.createElement(Drawer, {
     variant: "permanent",
     anchor: "left",
     PaperProps: {
@@ -3045,18 +2851,18 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
       width: "280px"
     },
     ...props
-  }, /* @__PURE__ */ React24.createElement(FlexCol9, {
+  }, /* @__PURE__ */ React23.createElement(FlexCol7, {
     alignItems: "stretch",
     justifyContent: "space-between",
     height: "100dvh"
-  }, /* @__PURE__ */ React24.createElement(FlexCol9, {
+  }, /* @__PURE__ */ React23.createElement(FlexCol7, {
     alignItems: "stretch",
     justifyContent: "flex-start",
     flexGrow: 1,
     overflow: "auto"
-  }, /* @__PURE__ */ React24.createElement(Tooltip4, {
+  }, /* @__PURE__ */ React23.createElement(Tooltip4, {
     title: version
-  }, /* @__PURE__ */ React24.createElement(FlexGrowRow5, {
+  }, /* @__PURE__ */ React23.createElement(FlexGrowRow5, {
     id: "dapp-name-and-icon",
     padding: 2,
     justifyContent: "flex-start",
@@ -3067,31 +2873,31 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     flexGrow: 0
   }, iconSvg ? RenderHtml({
     htmlString: iconSvg
-  }) : null, /* @__PURE__ */ React24.createElement(Typography8, {
+  }) : null, /* @__PURE__ */ React23.createElement(Typography7, {
     noWrap: true,
     variant: "h6",
     letterSpacing: "-1px"
-  }, name))), /* @__PURE__ */ React24.createElement(DebugDialogWithNode, {
+  }, name))), /* @__PURE__ */ React23.createElement(DebugDialogWithNode, {
     closeDebug,
     debugOpen,
     context
-  }), /* @__PURE__ */ React24.createElement(List, {
+  }), /* @__PURE__ */ React23.createElement(List, {
     sx: {
       p: 0,
       overflow: "auto"
     }
-  }, menuItems?.map(({ svgIcon: icon, primaryText, path: pathFromPayload }) => /* @__PURE__ */ React24.createElement(ListItem, {
+  }, menuItems?.map(({ svgIcon: icon, primaryText, path: pathFromPayload }) => /* @__PURE__ */ React23.createElement(ListItem, {
     key: primaryText,
     disablePadding: true,
     sx: {
       paddingBottom: 1
     }
-  }, /* @__PURE__ */ React24.createElement(StyledListItemButton, {
+  }, /* @__PURE__ */ React23.createElement(StyledListItemButton, {
     onClick: /* @__PURE__ */ __name(() => handleChange(pathFromPayload), "onClick"),
     active: pathFromPayload === path,
     disableRipple: true,
     disableTouchRipple: true
-  }, /* @__PURE__ */ React24.createElement(FlexRow8, {
+  }, /* @__PURE__ */ React23.createElement(FlexRow8, {
     flexGrow: 1,
     paddingX: 2,
     paddingY: 0.5,
@@ -3101,18 +2907,18 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
       },
       "borderRadius": "10px"
     }
-  }, /* @__PURE__ */ React24.createElement(ListItemIcon, {
+  }, /* @__PURE__ */ React23.createElement(ListItemIcon, {
     sx: {
       color: pathFromPayload === path ? activeColor : alpha4("#fff", 0.3),
       justifyContent: "center"
     }
-  }, /* @__PURE__ */ React24.createElement(StyledMenuIconWrapSpan, {
+  }, /* @__PURE__ */ React23.createElement(StyledMenuIconWrapSpan, {
     ref: /* @__PURE__ */ __name((ref) => {
       if (ref) {
         ref.innerHTML = icon ?? "";
       }
     }, "ref")
-  })), /* @__PURE__ */ React24.createElement(ListItemText, {
+  })), /* @__PURE__ */ React23.createElement(ListItemText, {
     primaryTypographyProps: {
       fontWeight: path === pathFromPayload ? "bold" : "inherit",
       color: pathFromPayload === path ? "inherit" : alpha4(theme.palette.text.primary, 0.5)
@@ -3121,73 +2927,290 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     style: {
       opacity: pathFromPayload === path ? 1 : 0.5
     }
-  }))))))), /* @__PURE__ */ React24.createElement(BottomMenuArea, {
+  }))))))), /* @__PURE__ */ React23.createElement(BottomMenuArea, {
     openDebug,
     backgroundColor: theme.palette.primary.dark
   })));
 }, "DappMenuDrawer");
 
-// src/modules/Dapp/modules/Window/DappWindow.tsx
-var DappWindow = /* @__PURE__ */ __name(({ context, dappSet, dappState, dappWallet, errors, nodeCreateError }) => {
-  const { DappComponent, name, scrollable = true, version } = decomposeDappSet(dappSet);
+// src/modules/Dapp/modules/Window/Rendered.tsx
+import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
+import { FlexCol as FlexCol10 } from "@xylabs/react-flexbox";
+import { NameTransforms as NameTransforms5 } from "@xyo-network/os-runtime";
+import { NodeProvider as NodeProvider2 } from "@xyo-network/react-node";
+import { WalletProvider } from "@xyo-network/react-wallet";
+import React27 from "react";
+
+// src/modules/XyOsUi/contexts/XyOsUiContext.ts
+import { createContext, useContext } from "react";
+var XyOsUiContext = createContext(void 0);
+var useXyOsUiContext = /* @__PURE__ */ __name(() => {
+  return useContext(XyOsUiContext);
+}, "useXyOsUiContext");
+var XyOsUiContextProvider = XyOsUiContext.Provider;
+
+// src/modules/XyOsUi/lib/XyOsUi.ts
+import { forget } from "@xylabs/forget";
+import { ModuleFactoryLocator as ModuleFactoryLocator2 } from "@xyo-network/module-factory-locator";
+import { dappsReadyConnection, XyOs } from "@xyo-network/os-runtime";
+var XyOsUi = class extends XyOs {
+  static {
+    __name(this, "XyOsUi");
+  }
+  dappRegistrationResults = {
+    failed: [],
+    succeeded: []
+  };
+  dappsReadyConnection = dappsReadyConnection();
+  constructor(params) {
+    super(params);
+    this.eventBus.addConnection(this.dappsReadyConnection);
+  }
+  static get monitoring() {
+    return new XyOsBrowserMonitor();
+  }
+  static get xyOsUiGlobal() {
+    return XyOs.xyOsGlobal;
+  }
+  static hideSplash() {
+    this.xyOsUiGlobal.splashScreen.hideSplash();
+    this.xyOsUiGlobal.splashScreen.onComplete();
+    this.setSplashStatus("complete");
+  }
+  static setSplashStatus(status) {
+    const statusText = this.xyOsUiGlobal.splashScreen._LOADING_MESSAGES[status];
+    this.xyOsUiGlobal.splashScreen.setStatusText(statusText);
+  }
+  async boot(wallet, locator = new ModuleFactoryLocator2()) {
+    await super.boot(wallet, locator);
+    const registerLazy = /* @__PURE__ */ __name(async () => {
+      this.dappRegistrationResults = await this.dappRegistrationService.start();
+      await this.dappsReadyConnection.emit("dappsReady", {});
+    }, "registerLazy");
+    forget(registerLazy());
+    return this;
+  }
+};
+
+// src/modules/Dapp/modules/Window/LoadingFlexbox.tsx
+import { Fade, styled as styled4, Typography as Typography8 } from "@mui/material";
+import { FlexCol as FlexCol9 } from "@xylabs/react-flexbox";
+import React26, { useEffect as useEffect17, useState as useState17 } from "react";
+
+// src/modules/LoadingOsLogo/LoadingOsLogo.tsx
+import { FlexCol as FlexCol8 } from "@xylabs/react-flexbox";
+import React24, { useState as useState16 } from "react";
+
+// src/modules/LoadingOsLogo/img/index.ts
+import { default as default20 } from "./xyoOS-Icon-2Q4XCUPP.svg";
+
+// src/modules/LoadingOsLogo/LoadingOsLogo.tsx
+var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecond = 0.5, ...props }) => {
+  const [imageLoaded, setImageLoaded] = useState16(false);
+  if (!imageLoaded) {
+    const img = new Image();
+    img.addEventListener("load", () => setImageLoaded(true));
+    img.src = default20;
+  }
+  return imageLoaded ? /* @__PURE__ */ React24.createElement(FlexCol8, {
+    sx: {
+      "@keyframes fadeOut": {
+        "0%": {
+          opacity: 1
+        },
+        "100%": {
+          opacity: 0.1
+        },
+        "35%": {
+          opacity: 1
+        }
+      },
+      "animation": busy ? "fadeOut linear" : void 0,
+      "animationDuration": "1500ms",
+      "animationFillMode": "both"
+    },
+    ...props
+  }, /* @__PURE__ */ React24.createElement(FlexCol8, {
+    sx: {
+      "@keyframes spin": {
+        "0%": {
+          transform: "rotate(360deg)"
+        },
+        "100%": {
+          transform: "rotate(0deg)"
+        }
+      },
+      "animation": busy ? `spin ${1 / spinsPerSecond}s linear infinite` : void 0,
+      "animationDirection": "reverse"
+    },
+    ...props
+  }, /* @__PURE__ */ React24.createElement("img", {
+    src: default20,
+    height: widthInPixels ?? 22
+  }))) : null;
+}, "LoadingOsLogo");
+
+// src/modules/Dapp/modules/Window/Trail.tsx
+import { a, useTrail } from "@react-spring/web";
+import React25 from "react";
+var TextTrail = /* @__PURE__ */ __name(({ open, children }) => {
+  const items = React25.Children.toArray(children);
+  const trail = useTrail(items.length, {
+    config: {
+      friction: 200,
+      mass: 5,
+      tension: 2e3
+    },
+    from: {
+      height: "auto",
+      opacity: 0,
+      y: 20
+    },
+    height: "auto",
+    opacity: open ? 1 : 0,
+    y: open ? 0 : 60
+  });
+  return /* @__PURE__ */ React25.createElement("div", null, trail.map(({ height, ...style }, index) => /* @__PURE__ */ React25.createElement(a.div, {
+    key: index,
+    style
+  }, /* @__PURE__ */ React25.createElement(a.div, {
+    style: {
+      height
+    }
+  }, items[index]))));
+}, "TextTrail");
+
+// src/modules/Dapp/modules/Window/LoadingFlexbox.tsx
+var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...props }) => {
+  const [fadeIn, setFadeIn] = useState17(!open);
+  const [trail, setTrail] = useState17(false);
+  const skipLoadingScreen = useSkipLoadingScreen();
+  useEffect17(() => {
+    if (open) {
+      if (skipLoadingScreen) {
+        setFadeIn(false);
+        return;
+      }
+      const fadeInTimeout = setTimeout(() => {
+        setFadeIn(false);
+      }, 2e3);
+      let trailTimeout = setTimeout(() => {
+        setTrail(true);
+        trailTimeout = setTimeout(() => {
+          setTrail(false);
+        }, 4e3);
+      }, 300);
+      return () => {
+        clearTimeout(fadeInTimeout);
+        clearTimeout(trailTimeout);
+      };
+    }
+    if (!minimize) {
+      setFadeIn(true);
+    }
+  }, [
+    minimize,
+    open,
+    skipLoadingScreen
+  ]);
+  return /* @__PURE__ */ React26.createElement(Fade, {
+    in: fadeIn,
+    unmountOnExit: true
+  }, /* @__PURE__ */ React26.createElement(StyledSplashContainer, props, /* @__PURE__ */ React26.createElement(LoadingOsLogo, {
+    widthInPixels: 100,
+    busy: true,
+    position: "absolute"
+  }), /* @__PURE__ */ React26.createElement(TextTrail, {
+    open: trail,
+    flexDirection: "row"
+  }, /* @__PURE__ */ React26.createElement(Typography8, {
+    textAlign: "center",
+    sx: {
+      fontSize: {
+        md: "3em",
+        xs: "2em"
+      }
+    }
+  }, "Loading"), /* @__PURE__ */ React26.createElement(Typography8, {
+    textAlign: "center",
+    sx: {
+      fontSize: {
+        md: "3em",
+        xs: "2em"
+      }
+    }
+  }, name), /* @__PURE__ */ React26.createElement(Typography8, {
+    textAlign: "center",
+    sx: {
+      fontSize: {
+        md: "3em",
+        xs: "2em"
+      }
+    }
+  }, "dApp"))));
+}, "DappLoadingFlexbox");
+var StyledSplashContainer = styled4(FlexCol9, {
+  name: "StyledSplashContainer"
+})(({ theme }) => {
+  return {
+    background: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    gap: theme.spacing(1),
+    height: "100%",
+    left: 0,
+    position: "absolute",
+    top: 0,
+    width: "100%",
+    zIndex: 999
+  };
+});
+
+// src/modules/Dapp/modules/Window/Rendered.tsx
+var DappRendered = /* @__PURE__ */ __name(({ context, dapp, dappMenuProperties, dappState, dappWallet, errors }) => {
+  const { DappComponent, name, scrollable = true, version } = useDecomposeDapp(dapp);
   const { active, minimized } = dappState ?? {};
-  const TypedDappComponent = useMemo12(() => DappComponent, []);
-  useSyncOsRegisteredAccessInterfaces(context);
-  useManageDappPathFromRoute(context, name);
-  useManageDappInjectableParamsFromRoute(context);
-  const { activePath, error: menuError, menuConfig, menuItemsVisible, onPathChange } = useDappMenu(context, name);
-  const resolvedErrors = [
-    nodeCreateError,
-    menuError,
-    ...errors ?? []
-  ].filter(Boolean);
-  const hasErrors = resolvedErrors.length > 0;
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, active ? /* @__PURE__ */ React25.createElement(Helmet, null, /* @__PURE__ */ React25.createElement("title", null, activePath ? `${new NameTransforms4(activePath).deSlug()} | ` : "", " ", name, " ", "dApp")) : null, /* @__PURE__ */ React25.createElement(ErrorBoundary, null, /* @__PURE__ */ React25.createElement(DappChrome, {
-    appBar: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(DappBar, {
+  const hasErrors = errors && errors.length > 0;
+  return /* @__PURE__ */ React27.createElement(DappChrome, {
+    /* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */
+    appBar: /* @__PURE__ */ React27.createElement(DappBar, {
       context,
       name,
       version,
-      title: activePath ? new NameTransforms4(activePath).deSlug() : ""
-    })),
+      title: dappMenuProperties?.activePath ? new NameTransforms5(dappMenuProperties.activePath).deSlug() : ""
+    }),
     height: "100dvh",
     width: "100dvw",
-    largeScreenMenu: active && /* @__PURE__ */ React25.createElement(DappMenuDrawer, {
+    largeScreenMenu: active && /* @__PURE__ */ React27.createElement(DappMenuDrawer, {
       context,
       name,
       version,
-      activePath,
-      onPathChange,
-      menuConfig,
-      menuItems: menuItemsVisible
+      ...dappMenuProperties
     }),
-    smallScreenMenu: active && /* @__PURE__ */ React25.createElement(DappBottomNavigation, {
-      activePath,
-      onPathChange,
-      menuConfig,
-      menuItems: menuItemsVisible,
+    smallScreenMenu: active && /* @__PURE__ */ React27.createElement(DappBottomNavigation, {
+      ...dappMenuProperties,
       sx: {
-        display: menuConfig ? "flex" : "none"
+        display: dappMenuProperties?.menuConfig ? "flex" : "none"
       }
     }),
     /* Ensure that loading goes away when error occurs */
-    splashScreen: hasErrors ? null : /* @__PURE__ */ React25.createElement(DappLoadingFlexbox, {
+    splashScreen: hasErrors ? null : /* @__PURE__ */ React27.createElement(DappLoadingFlexbox, {
       minimize: !!minimized,
       name,
       open: !!active
     })
-  }, hasErrors ? /* @__PURE__ */ React25.createElement(FlexCol10, {
+  }, hasErrors ? /* @__PURE__ */ React27.createElement(FlexCol10, {
     padding: 2
-  }, resolvedErrors?.map((error) => /* @__PURE__ */ React25.createElement(ErrorRender3, {
+  }, errors?.map((error) => /* @__PURE__ */ React27.createElement(ErrorRender4, {
     key: error?.message,
     error,
     scope: "DappWindow"
-  }))) : null, /* @__PURE__ */ React25.createElement(WalletProvider, {
+  }))) : null, /* @__PURE__ */ React27.createElement(WalletProvider, {
     rootWallet: dappWallet
-  }, context === null ? null : /* @__PURE__ */ React25.createElement(XyOsUiContextProvider, {
+  }, context === null ? null : /* @__PURE__ */ React27.createElement(XyOsUiContextProvider, {
     value: context
-  }, /* @__PURE__ */ React25.createElement(NodeProvider2, {
+  }, /* @__PURE__ */ React27.createElement(NodeProvider2, {
     node: context?.root
-  }, active ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(FlexCol10, {
+  }, active ? /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(FlexCol10, {
     position: "absolute",
     top: 0,
     left: 0,
@@ -3198,12 +3221,12 @@ var DappWindow = /* @__PURE__ */ __name(({ context, dappSet, dappState, dappWall
     sx: {
       overflowY: scrollable ? "auto" : "hidden"
     }
-  }, /* @__PURE__ */ React25.createElement(TypedDappComponent, {
-    name
-  })), /* @__PURE__ */ React25.createElement(DappAccessFlexbox, {
+  }, /* @__PURE__ */ React27.createElement(DappComponent, {
+    name: dapp?.config.name
+  })), /* @__PURE__ */ React27.createElement(DappAccessFlexbox, {
     context
-  })) : null))))));
-}, "DappWindow");
+  })) : null))));
+}, "DappRendered");
 
 // src/modules/Dapp/Container.tsx
 var DappContainer = /* @__PURE__ */ __name(({ currentIntent, dappSet, xnsNodeUrl, xnsNetwork }) => {
@@ -3217,28 +3240,43 @@ var DappContainer = /* @__PURE__ */ __name(({ currentIntent, dappSet, xnsNodeUrl
     currentIntent,
     dapp
   ]);
-  return /* @__PURE__ */ React26.createElement(DappIconButton, {
+  const { error: menuError, ...dappMenuProperties } = useDappMenu(context, dapp?.config.name);
+  const errors = useMemo13(() => [
+    nodeCreateError,
+    menuError
+  ].filter(Boolean), [
+    nodeCreateError
+  ]);
+  const dappWindowProps = useMemo13(() => ({
+    context,
+    dapp,
+    dappMenuProperties,
+    dappState,
+    dappWallet,
+    errors
+  }), [
+    context,
+    dapp,
+    dappMenuProperties,
+    dappState,
+    dappWallet,
+    errors
+  ]);
+  return /* @__PURE__ */ React28.createElement(DappIconButton, {
     dappIcon,
     dappIconSvg: dapp.params.iconSvg,
     dappName: dapp?.config.name,
     dappState
-  }, /* @__PURE__ */ React26.createElement(DappWindow, {
-    context,
-    dappSet,
-    dappState,
-    dappWallet,
-    intent: currentIntent,
-    nodeCreateError
-  }));
+  }, /* @__PURE__ */ React28.createElement(DappWindow, dappWindowProps, /* @__PURE__ */ React28.createElement(DappRendered, dappWindowProps)));
 }, "DappContainer");
 var DappContainerMemo = /* @__PURE__ */ memo(DappContainer);
 
 // src/modules/Dapp/ContainerFlexbox.tsx
 import { Container as Container2 } from "@mui/material";
 import { FlexCol as FlexCol11 } from "@xylabs/react-flexbox";
-import React27 from "react";
+import React29 from "react";
 var ContainerFlexbox = /* @__PURE__ */ __name(({ children, containerProps, scrollable = true, ...props }) => {
-  return /* @__PURE__ */ React27.createElement(FlexCol11, {
+  return /* @__PURE__ */ React29.createElement(FlexCol11, {
     id: "container-flexbox",
     alignItems: "center",
     justifyContent: "start",
@@ -3247,24 +3285,24 @@ var ContainerFlexbox = /* @__PURE__ */ __name(({ children, containerProps, scrol
     gap: 2,
     overflow: scrollable ? "auto" : "unset",
     ...props
-  }, /* @__PURE__ */ React27.createElement(Container2, containerProps, children));
+  }, /* @__PURE__ */ React29.createElement(Container2, containerProps, children));
 }, "ContainerFlexbox");
 
 // src/modules/Dapp/Page/Row.tsx
 import { Divider as Divider4, Fade as Fade2, styled as styled5 } from "@mui/material";
-import React29, { useMemo as useMemo14 } from "react";
+import React31, { useMemo as useMemo14 } from "react";
 
 // src/modules/Dapp/Page/DividerChip.tsx
 import { Chip as Chip2, CircularProgress } from "@mui/material";
-import React28 from "react";
+import React30 from "react";
 var DividerChip = /* @__PURE__ */ __name(({ registeredDapps, ...props }) => {
-  return /* @__PURE__ */ React28.createElement(Chip2, {
-    avatar: registeredDapps === void 0 ? /* @__PURE__ */ React28.createElement("span", null, /* @__PURE__ */ React28.createElement(CircularProgress, {
+  return /* @__PURE__ */ React30.createElement(Chip2, {
+    avatar: registeredDapps === void 0 ? /* @__PURE__ */ React30.createElement("span", null, /* @__PURE__ */ React30.createElement(CircularProgress, {
       size: "small",
       sx: {
         display: "inline"
       }
-    })) : /* @__PURE__ */ React28.createElement(React28.Fragment, null),
+    })) : /* @__PURE__ */ React30.createElement(React30.Fragment, null),
     label: `${registeredDapps?.length ? "" : "Loading "}Beta dApps`,
     size: "small",
     sx: {
@@ -3280,19 +3318,19 @@ var DappsRow = /* @__PURE__ */ __name(({ chipLabel, currentIntent, installType,
     installType,
     registeredDappsSet
   ]);
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Divider4, {
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Divider4, {
     variant: "middle",
     sx: {
       marginY: 3
     },
     flexItem: true
-  }, /* @__PURE__ */ React29.createElement(DividerChip, {
+  }, /* @__PURE__ */ React31.createElement(DividerChip, {
     label: `${filteredRegisteredDappSets === void 0 ? "Loading " : ""}${chipLabel}`,
     registeredDapps: filteredRegisteredDappSets
-  })), filteredRegisteredDappSets?.length ? /* @__PURE__ */ React29.createElement(Fade2, {
+  })), filteredRegisteredDappSets?.length ? /* @__PURE__ */ React31.createElement(Fade2, {
     in: !!filteredRegisteredDappSets?.length,
     timeout: 1e3
-  }, /* @__PURE__ */ React29.createElement(StyledGridContainer, null, filteredRegisteredDappSets?.map((dappSet) => /* @__PURE__ */ React29.createElement(DappContainerMemo, {
+  }, /* @__PURE__ */ React31.createElement(StyledGridContainer, null, filteredRegisteredDappSets?.map((dappSet) => /* @__PURE__ */ React31.createElement(DappContainerMemo, {
     currentIntent,
     key: dappSet.dapp.config.name,
     dappSet,
@@ -3316,7 +3354,7 @@ var StyledGridContainer = styled5("div", {
 import { SignalCellularAltOutlined } from "@mui/icons-material";
 import { Tooltip as Tooltip5, useTheme as useTheme8 } from "@mui/material";
 import { useColorSchemeEx as useColorSchemeEx3 } from "@xylabs/react-invertible-theme";
-import React30, { useMemo as useMemo17 } from "react";
+import React32, { useMemo as useMemo17 } from "react";
 
 // src/modules/network/hooks/useOsNetwork.tsx
 import { OsPubSubNetworkReadyEvent } from "@xyo-network/os-runtime";
@@ -3432,9 +3470,9 @@ var StyledNetworkLoadingIndicator = styled6("div", {
 }));
 
 // src/modules/network/components/LoadingIndicator.tsx
-var WaitingForNetwork = /* @__PURE__ */ __name(() => /* @__PURE__ */ React30.createElement(Tooltip5, {
+var WaitingForNetwork = /* @__PURE__ */ __name(() => /* @__PURE__ */ React32.createElement(Tooltip5, {
   title: "Waiting for Network initialization"
-}, /* @__PURE__ */ React30.createElement(StyledNetworkLoadingIndicator, null)), "WaitingForNetwork");
+}, /* @__PURE__ */ React32.createElement(StyledNetworkLoadingIndicator, null)), "WaitingForNetwork");
 var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
   const { darkMode } = useColorSchemeEx3();
   const theme = useTheme8();
@@ -3446,15 +3484,15 @@ var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
   const NetworkComponent = useMemo17(() => {
     if (networkReady) {
       const connectionReady = true;
-      return connectionReady ? () => /* @__PURE__ */ React30.createElement(Tooltip5, {
+      return connectionReady ? () => /* @__PURE__ */ React32.createElement(Tooltip5, {
         title: "Connected to Network"
-      }, /* @__PURE__ */ React30.createElement(SignalCellularAltOutlined, {
+      }, /* @__PURE__ */ React32.createElement(SignalCellularAltOutlined, {
         sx: {
           color: successColor
         }
-      })) : () => /* @__PURE__ */ React30.createElement(Tooltip5, {
+      })) : () => /* @__PURE__ */ React32.createElement(Tooltip5, {
         title: "Error Connecting to Network"
-      }, /* @__PURE__ */ React30.createElement(SignalCellularAltOutlined, {
+      }, /* @__PURE__ */ React32.createElement(SignalCellularAltOutlined, {
         sx: {
           color: errorColor
         }
@@ -3467,18 +3505,18 @@ var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
     networkReady,
     successColor
   ]);
-  return /* @__PURE__ */ React30.createElement(NetworkComponent, null);
+  return /* @__PURE__ */ React32.createElement(NetworkComponent, null);
 }, "NetworkLoadingIndicator");
 
 // src/modules/network/components/NetworkButton.tsx
 import { NotInterested } from "@mui/icons-material";
 import { Button as Button2 } from "@mui/material";
-import React31 from "react";
+import React33 from "react";
 var NetworkButton = /* @__PURE__ */ __name(({ disabled, startIcon, ...props }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ React31.createElement(Button2, {
+  return /* @__PURE__ */ React33.createElement(Button2, {
     disabled: disabled || !networkReady,
-    startIcon: /* @__PURE__ */ React31.createElement(React31.Fragment, null, startIcon, networkReady === false ? /* @__PURE__ */ React31.createElement(NotInterested, null) : null),
+    startIcon: /* @__PURE__ */ React33.createElement(React33.Fragment, null, startIcon, networkReady === false ? /* @__PURE__ */ React33.createElement(NotInterested, null) : null),
     ...props
   });
 }, "NetworkButton");
@@ -3486,35 +3524,35 @@ var NetworkButton = /* @__PURE__ */ __name(({ disabled, startIcon, ...props }) =
 // src/modules/network/components/NetworkReady.tsx
 import { Typography as Typography9 } from "@mui/material";
 import { FlexCol as FlexCol12 } from "@xylabs/react-flexbox";
-import React32 from "react";
+import React34 from "react";
 var NetworkReadyFlexBox = /* @__PURE__ */ __name(({ children, skipCheck, ...props }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, networkReady || skipCheck ? children : /* @__PURE__ */ React32.createElement(FlexCol12, {
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, networkReady || skipCheck ? children : /* @__PURE__ */ React34.createElement(FlexCol12, {
     height: "100%",
     ...props
-  }, /* @__PURE__ */ React32.createElement(LoadingOsLogo, {
+  }, /* @__PURE__ */ React34.createElement(LoadingOsLogo, {
     widthInPixels: 100,
     busy: true
-  }), /* @__PURE__ */ React32.createElement(Typography9, {
+  }), /* @__PURE__ */ React34.createElement(Typography9, {
     fontFamily: "monospace"
   }, "Loading XYO Name Service...")));
 }, "NetworkReadyFlexBox");
 
 // src/DappPage.tsx
 var DappTitle = /* @__PURE__ */ __name(({ subtitle, title, ...props }) => {
-  return title ? /* @__PURE__ */ React33.createElement(FlexCol13, {
+  return title ? /* @__PURE__ */ React35.createElement(FlexCol13, {
     alignItems: "flex-start",
     gap: 1,
     ...props
-  }, /* @__PURE__ */ React33.createElement(Typography10, {
+  }, /* @__PURE__ */ React35.createElement(Typography10, {
     variant: "h3"
-  }, /* @__PURE__ */ React33.createElement("b", null, title)), /* @__PURE__ */ React33.createElement(Typography10, {
+  }, /* @__PURE__ */ React35.createElement("b", null, title)), /* @__PURE__ */ React35.createElement(Typography10, {
     gutterBottom: true,
     variant: "subtitle2"
   }, subtitle)) : null;
 }, "DappTitle");
 var InnerDappPage = /* @__PURE__ */ __name(({ noScroll, children, subtitle, title, sx, ...props }) => {
-  return /* @__PURE__ */ React33.createElement(FlexCol13, {
+  return /* @__PURE__ */ React35.createElement(FlexCol13, {
     id: "innerPage",
     sx: {
       margin: 2,
@@ -3524,26 +3562,26 @@ var InnerDappPage = /* @__PURE__ */ __name(({ noScroll, children, subtitle, titl
     alignItems: "stretch",
     justifyContent: "flex-start",
     ...props
-  }, title ? /* @__PURE__ */ React33.createElement(DappTitle, {
+  }, title ? /* @__PURE__ */ React35.createElement(DappTitle, {
     subtitle,
     title,
     marginX: 1
   }) : null, children);
 }, "InnerDappPage");
 var DappPage = /* @__PURE__ */ __name(({ checkNetwork, noScroll, subtitle, title, container, rollbar, ...props }) => {
-  return /* @__PURE__ */ React33.createElement(ThrownErrorBoundary, {
-    errorComponent: /* @__PURE__ */ __name((error, boundaryName) => /* @__PURE__ */ React33.createElement(ErrorRenderWithSupportDefault, {
+  return /* @__PURE__ */ React35.createElement(ThrownErrorBoundary, {
+    errorComponent: /* @__PURE__ */ __name((error, boundaryName) => /* @__PURE__ */ React35.createElement(ErrorRenderWithSupportDefault, {
       scope: boundaryName,
       error
     }), "errorComponent"),
     rollbar,
     scope: "DappPage"
-  }, /* @__PURE__ */ React33.createElement(NetworkReadyFlexBox, {
+  }, /* @__PURE__ */ React35.createElement(NetworkReadyFlexBox, {
     skipCheck: !checkNetwork
-  }, container ? /* @__PURE__ */ React33.createElement(Container3, {
+  }, container ? /* @__PURE__ */ React35.createElement(Container3, {
     disableGutters: true,
     maxWidth: container === true ? "md" : container
-  }, noScroll ? /* @__PURE__ */ React33.createElement(FlexCol13, {
+  }, noScroll ? /* @__PURE__ */ React35.createElement(FlexCol13, {
     sx: {
       position: "absolute",
       top: 0,
@@ -3551,23 +3589,23 @@ var DappPage = /* @__PURE__ */ __name(({ checkNetwork, noScroll, subtitle, title
       right: 0,
       bottom: 0
     }
-  }, /* @__PURE__ */ React33.createElement(InnerDappPage, {
+  }, /* @__PURE__ */ React35.createElement(InnerDappPage, {
     noScroll,
     title,
     subtitle,
     ...props,
     flexGrow: 1
-  })) : /* @__PURE__ */ React33.createElement(FlexCol13, {
+  })) : /* @__PURE__ */ React35.createElement(FlexCol13, {
     width: "100%",
     height: "100%",
     alignItems: "stretch"
-  }, /* @__PURE__ */ React33.createElement(InnerDappPage, {
+  }, /* @__PURE__ */ React35.createElement(InnerDappPage, {
     noScroll,
     title,
     subtitle,
     ...props,
     flexGrow: 1
-  }))) : noScroll ? /* @__PURE__ */ React33.createElement(InnerDappPage, {
+  }))) : noScroll ? /* @__PURE__ */ React35.createElement(InnerDappPage, {
     sx: {
       position: "absolute",
       top: 0,
@@ -3580,7 +3618,7 @@ var DappPage = /* @__PURE__ */ __name(({ checkNetwork, noScroll, subtitle, title
     subtitle,
     ...props,
     flexGrow: 1
-  }) : /* @__PURE__ */ React33.createElement(InnerDappPage, {
+  }) : /* @__PURE__ */ React35.createElement(InnerDappPage, {
     noScroll,
     title,
     subtitle,
@@ -3592,13 +3630,13 @@ var DappPage = /* @__PURE__ */ __name(({ checkNetwork, noScroll, subtitle, title
 // src/components/Widgets/StackOfWidgets.tsx
 import { alpha as alpha7, Box as Box3, useTheme as useTheme10 } from "@mui/material";
 import { animated as animated2, to as interpolate, useSprings } from "@react-spring/web";
-import React40, { useState as useState18 } from "react";
+import React42, { useState as useState18 } from "react";
 import { useDrag } from "react-use-gesture";
 
 // src/components/Widgets/Types/BarGraph/HorizontalBarGraph.tsx
 import { Typography as Typography11 } from "@mui/material";
 import { FlexCol as FlexCol14, FlexGrowRow as FlexGrowRow6 } from "@xylabs/react-flexbox";
-import React34 from "react";
+import React36 from "react";
 
 // src/components/Widgets/Types/BarGraph/StyledLinearProgress.tsx
 import { alpha as alpha5, LinearProgress, styled as styled7 } from "@mui/material";
@@ -3656,25 +3694,25 @@ var HorizontalBarGraph = /* @__PURE__ */ __name(({ items = sampleData, ...props
   });
   console.log(itemsSortedByValue);
   const topValue = itemsSortedByValue[0].value;
-  return /* @__PURE__ */ React34.createElement(FlexCol14, {
+  return /* @__PURE__ */ React36.createElement(FlexCol14, {
     alignItems: "stretch",
     gap: 0.5,
     ...props
   }, items.slice(0, 5).map((item, index) => (
     // eslint-disable-next-line @eslint-react/no-array-index-key
-    /* @__PURE__ */ React34.createElement(FlexCol14, {
+    /* @__PURE__ */ React36.createElement(FlexCol14, {
       alignItems: "stretch",
       key: index
-    }, /* @__PURE__ */ React34.createElement(FlexGrowRow6, {
+    }, /* @__PURE__ */ React36.createElement(FlexGrowRow6, {
       justifyContent: "space-between"
-    }, /* @__PURE__ */ React34.createElement(Typography11, {
+    }, /* @__PURE__ */ React36.createElement(Typography11, {
       variant: "caption",
       maxWidth: "50%",
       noWrap: true
-    }, item.name), /* @__PURE__ */ React34.createElement(Typography11, {
+    }, item.name), /* @__PURE__ */ React36.createElement(Typography11, {
       variant: "caption",
       maxWidth: "50%"
-    }, item.value)), /* @__PURE__ */ React34.createElement(StyledLinearProgress, {
+    }, item.value)), /* @__PURE__ */ React36.createElement(StyledLinearProgress, {
       color: "primary",
       value: item.value / (topValue * 1.25) * 100,
       variant: "determinate"
@@ -3685,7 +3723,7 @@ var HorizontalBarGraph = /* @__PURE__ */ __name(({ items = sampleData, ...props
 // src/components/Widgets/Types/DataColumns/TwoColTwoStat.tsx
 import { Typography as Typography12, useTheme as useTheme9 } from "@mui/material";
 import { FlexCol as FlexCol15, FlexGrowRow as FlexGrowRow7 } from "@xylabs/react-flexbox";
-import React35, { useEffect as useEffect18 } from "react";
+import React37, { useEffect as useEffect18 } from "react";
 var MAX_LENGTH = 2;
 var validateProps = /* @__PURE__ */ __name((props) => {
   if (props.length > MAX_LENGTH) {
@@ -3699,29 +3737,29 @@ var TwoColTwoStat = /* @__PURE__ */ __name(({ items, ...props }) => {
   }, [
     items
   ]);
-  return /* @__PURE__ */ React35.createElement(FlexGrowRow7, {
+  return /* @__PURE__ */ React37.createElement(FlexGrowRow7, {
     gap: 2,
     ...props
   }, items.map((item, index) => (
     // eslint-disable-next-line @eslint-react/no-array-index-key
-    /* @__PURE__ */ React35.createElement(FlexCol15, {
+    /* @__PURE__ */ React37.createElement(FlexCol15, {
       key: `stat-${index}-${item.unit}`,
       flexGrow: 1,
       alignItems: "start"
-    }, /* @__PURE__ */ React35.createElement(Typography12, {
+    }, /* @__PURE__ */ React37.createElement(Typography12, {
       variant: "h2",
       fontWeight: theme.typography.fontWeightMedium
-    }, item.rawInsightValue), /* @__PURE__ */ React35.createElement(Typography12, {
+    }, item.rawInsightValue), /* @__PURE__ */ React37.createElement(Typography12, {
       variant: "body2"
     }, item.subtitle))
   )));
 }, "TwoColTwoStat");
 
 // src/components/Widgets/Types/Examples/BarGraph.tsx
-import React36 from "react";
+import React38 from "react";
 var ExampleBarGraphWidget = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React36.createElement(WidgetCard, {
-    widgetContent: /* @__PURE__ */ React36.createElement(HorizontalBarGraph, null),
+  return /* @__PURE__ */ React38.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React38.createElement(HorizontalBarGraph, null),
     widgetName: "Friend Locations",
     timeOfData: 1715713478,
     widgetPath: "/profile"
@@ -3729,13 +3767,13 @@ var ExampleBarGraphWidget = /* @__PURE__ */ __name(() => {
 }, "ExampleBarGraphWidget");
 
 // src/components/Widgets/Types/Examples/BooleanTable.tsx
-import React38 from "react";
+import React40 from "react";
 
 // src/components/Widgets/Types/Tables/BooleanTable.tsx
 import { CircleRounded } from "@mui/icons-material";
 import { alpha as alpha6, Paper as Paper2, styled as styled8, TableRow, Typography as Typography13 } from "@mui/material";
 import { FlexCol as FlexCol16, FlexGrowRow as FlexGrowRow8, FlexRow as FlexRow9 } from "@xylabs/react-flexbox";
-import React37 from "react";
+import React39 from "react";
 var sampleData2 = [
   {
     name: "@arietrouw",
@@ -3783,27 +3821,27 @@ var DefaultFalseOutput = styled8(CircleRounded, {
   fill: alpha6(theme.palette.text.disabled, 0.5),
   fontSize: "10px"
 }));
-var defaultTrueOutput = /* @__PURE__ */ React37.createElement(DefaultTrueOutput, null);
-var defaultFalseOutput = /* @__PURE__ */ React37.createElement(DefaultFalseOutput, null);
+var defaultTrueOutput = /* @__PURE__ */ React39.createElement(DefaultTrueOutput, null);
+var defaultFalseOutput = /* @__PURE__ */ React39.createElement(DefaultFalseOutput, null);
 var BooleanTable = /* @__PURE__ */ __name(({ items = sampleData2, tableHeaders, trueOutput = defaultTrueOutput, falseOutput = defaultFalseOutput, ...props }) => {
-  return /* @__PURE__ */ React37.createElement(FlexCol16, {
+  return /* @__PURE__ */ React39.createElement(FlexCol16, {
     alignItems: "stretch",
     ...props
-  }, /* @__PURE__ */ React37.createElement(FlexRow9, {
+  }, /* @__PURE__ */ React39.createElement(FlexRow9, {
     paddingBottom: 0.5,
     justifyContent: "space-between"
-  }, tableHeaders.map((name) => /* @__PURE__ */ React37.createElement(StyledTableColumnTitle, {
+  }, tableHeaders.map((name) => /* @__PURE__ */ React39.createElement(StyledTableColumnTitle, {
     key: name,
     variant: "caption"
-  }, name))), /* @__PURE__ */ React37.createElement(FlexCol16, {
+  }, name))), /* @__PURE__ */ React39.createElement(FlexCol16, {
     alignItems: "stretch",
     gap: 0.25
-  }, items.slice(0, 4).map((item, index) => /* @__PURE__ */ React37.createElement(TableRow, {
+  }, items.slice(0, 4).map((item, index) => /* @__PURE__ */ React39.createElement(TableRow, {
     key: index
-  }, /* @__PURE__ */ React37.createElement(FlexGrowRow8, {
+  }, /* @__PURE__ */ React39.createElement(FlexGrowRow8, {
     flexGrow: 1,
     justifyContent: "space-between"
-  }, /* @__PURE__ */ React37.createElement(Typography13, {
+  }, /* @__PURE__ */ React39.createElement(Typography13, {
     variant: "caption",
     noWrap: true,
     maxWidth: "70%"
@@ -3812,8 +3850,8 @@ var BooleanTable = /* @__PURE__ */ __name(({ items = sampleData2, tableHeaders,
 
 // src/components/Widgets/Types/Examples/BooleanTable.tsx
 var ExampleBooleanTableWidget = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React38.createElement(WidgetCard, {
-    widgetContent: /* @__PURE__ */ React38.createElement(BooleanTable, {
+  return /* @__PURE__ */ React40.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React40.createElement(BooleanTable, {
       items: [
         {
           name: "@arietrouw",
@@ -3848,10 +3886,10 @@ var ExampleBooleanTableWidget = /* @__PURE__ */ __name(() => {
 }, "ExampleBooleanTableWidget");
 
 // src/components/Widgets/Types/Examples/TwoColTwoStat.tsx
-import React39 from "react";
+import React41 from "react";
 var ExampleTwoColTwoStatWidget = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React39.createElement(WidgetCard, {
-    widgetContent: /* @__PURE__ */ React39.createElement(TwoColTwoStat, {
+  return /* @__PURE__ */ React41.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React41.createElement(TwoColTwoStat, {
       items: [
         {
           rawInsightValue: 218,
@@ -3875,13 +3913,13 @@ var ExampleTwoColTwoStatWidget = /* @__PURE__ */ __name(() => {
 
 // src/components/Widgets/StackOfWidgets.tsx
 var cards = [
-  /* @__PURE__ */ React40.createElement(ExampleBarGraphWidget, {
+  /* @__PURE__ */ React42.createElement(ExampleBarGraphWidget, {
     key: "bar-graph"
   }),
-  /* @__PURE__ */ React40.createElement(ExampleBooleanTableWidget, {
+  /* @__PURE__ */ React42.createElement(ExampleBooleanTableWidget, {
     key: "boolean-table"
   }),
-  /* @__PURE__ */ React40.createElement(ExampleTwoColTwoStatWidget, {
+  /* @__PURE__ */ React42.createElement(ExampleTwoColTwoStatWidget, {
     key: "two-column"
   })
 ];
@@ -3932,7 +3970,7 @@ function Deck() {
       api.start((i) => to(i));
     }, 600);
   });
-  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, props.map(({ x, y, rot, scale }, i) => /* @__PURE__ */ React40.createElement(animated2.div, {
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, props.map(({ x, y, rot, scale }, i) => /* @__PURE__ */ React42.createElement(animated2.div, {
     // eslint-disable-next-line @eslint-react/no-array-index-key
     key: i,
     style: {
@@ -3947,7 +3985,7 @@ function Deck() {
       x,
       y
     }
-  }, /* @__PURE__ */ React40.createElement(animated2.div, {
+  }, /* @__PURE__ */ React42.createElement(animated2.div, {
     ...bind(i),
     style: {
       // WebkitBackdropFilter: 'blur(10px)',
@@ -3972,7 +4010,7 @@ function Deck() {
 }
 __name(Deck, "Deck");
 var StackOfWidgets = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React40.createElement(Box3, {
+  return /* @__PURE__ */ React42.createElement(Box3, {
     sx: {
       alignItems: "center",
       cursor: "pointer",
@@ -3981,30 +4019,30 @@ var StackOfWidgets = /* @__PURE__ */ __name(() => {
       justifyContent: "center",
       width: "300px"
     }
-  }, /* @__PURE__ */ React40.createElement(Deck, null));
+  }, /* @__PURE__ */ React42.createElement(Deck, null));
 }, "StackOfWidgets");
 
 // src/components/Widgets/WidgetCardExamples.tsx
 var WidgetCardExamples = /* @__PURE__ */ __name(() => {
   const { darkMode } = useColorSchemeEx4();
-  return /* @__PURE__ */ React41.createElement(DappPage, {
+  return /* @__PURE__ */ React43.createElement(DappPage, {
     sx: {
       backgroundImage: darkMode ? `url(${default18})` : `url(${default19})`,
       backgroundSize: "cover"
     },
     container: "xl",
     title: "Example Widget Cards"
-  }, /* @__PURE__ */ React41.createElement(Stack2, {
+  }, /* @__PURE__ */ React43.createElement(Stack2, {
     gap: 2,
     flexDirection: "row",
     flexWrap: "wrap"
-  }, /* @__PURE__ */ React41.createElement(ExampleTwoColTwoStatWidget, null), /* @__PURE__ */ React41.createElement(ExampleBarGraphWidget, null), /* @__PURE__ */ React41.createElement(ExampleBooleanTableWidget, null), /* @__PURE__ */ React41.createElement(StackOfWidgets, null)));
+  }, /* @__PURE__ */ React43.createElement(ExampleTwoColTwoStatWidget, null), /* @__PURE__ */ React43.createElement(ExampleBarGraphWidget, null), /* @__PURE__ */ React43.createElement(ExampleBooleanTableWidget, null), /* @__PURE__ */ React43.createElement(StackOfWidgets, null)));
 }, "WidgetCardExamples");
 
 // src/DappPathSwitcher.tsx
 import { animated as animated3, useTransition } from "@react-spring/web";
-import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
-import React42 from "react";
+import { ErrorRender as ErrorRender5 } from "@xylabs/react-error";
+import React44 from "react";
 var DappPathSwitcher = /* @__PURE__ */ __name(({ activePath, pathToComponent }) => {
   const transitions = useTransition(activePath, {
     enter: {
@@ -4022,7 +4060,7 @@ var DappPathSwitcher = /* @__PURE__ */ __name(({ activePath, pathToComponent })
   });
   const possibleZIndex = pathToComponent?.findIndex((item) => item.path === activePath);
   const zIndex = possibleZIndex !== -1 && possibleZIndex !== void 0 ? possibleZIndex : 1;
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, transitions((transitionProps, activePath2) => /* @__PURE__ */ React42.createElement(animated3.div, {
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, transitions((transitionProps, activePathRef) => /* @__PURE__ */ React44.createElement(animated3.div, {
     style: {
       ...transitionProps,
       alignItems: "stretch",
@@ -4039,10 +4077,10 @@ var DappPathSwitcher = /* @__PURE__ */ __name(({ activePath, pathToComponent })
       zIndex
     }
   }, (() => {
-    const activeIndex = pathToComponent?.findIndex(({ path: componentPath }) => activePath2 === componentPath);
+    const activeIndex = pathToComponent?.findIndex(({ path: componentPath }) => activePathRef === componentPath);
     const activeItem = pathToComponent && activeIndex !== -1 && activeIndex !== void 0 ? pathToComponent[activeIndex] : void 0;
-    return activeItem ? activeItem.component : /* @__PURE__ */ React42.createElement(ErrorRender4, {
-      error: new Error(`No component found for path: ${activePath2}`),
+    return activeItem ? activeItem.component : /* @__PURE__ */ React44.createElement(ErrorRender5, {
+      error: new Error(`No component found for path: ${activePathRef}`),
       scope: "DappPathSwitcher"
     });
   })())));
@@ -4050,7 +4088,7 @@ var DappPathSwitcher = /* @__PURE__ */ __name(({ activePath, pathToComponent })
 
 // src/dapps/shared/accounts/components/AnimatedComponents/GenericAnimations/ShiftAnimation.tsx
 import { animated as animated4, useSpring as useSpring2 } from "@react-spring/web";
-import React43, { useEffect as useEffect19, useState as useState19 } from "react";
+import React45, { useEffect as useEffect19, useState as useState19 } from "react";
 var MovementData = {
   down: [
     {
@@ -4144,7 +4182,7 @@ var ShiftAnimation = /* @__PURE__ */ __name(({ startAnimation = false, animation
   }, [
     isShifted
   ]);
-  return /* @__PURE__ */ React43.createElement(animated4.div, {
+  return /* @__PURE__ */ React45.createElement(animated4.div, {
     style: anim
   }, children);
 }, "ShiftAnimation");
@@ -4152,10 +4190,10 @@ var ShiftAnimation = /* @__PURE__ */ __name(({ startAnimation = false, animation
 // src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPoint.tsx
 import { FiberManualRecordRounded } from "@mui/icons-material";
 import { alpha as alpha8, Box as Box4, useTheme as useTheme11 } from "@mui/material";
-import React44 from "react";
+import React46 from "react";
 var TwoToneBulletPoint = /* @__PURE__ */ __name((props) => {
   const theme = useTheme11();
-  return /* @__PURE__ */ React44.createElement(Box4, props, /* @__PURE__ */ React44.createElement(FiberManualRecordRounded, {
+  return /* @__PURE__ */ React46.createElement(Box4, props, /* @__PURE__ */ React46.createElement(FiberManualRecordRounded, {
     fontSize: "small",
     sx: {
       "&:hover": {
@@ -4171,20 +4209,20 @@ var TwoToneBulletPoint = /* @__PURE__ */ __name((props) => {
 
 // src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPointList.tsx
 import { FlexCol as FlexCol17, FlexGrowRow as FlexGrowRow9 } from "@xylabs/react-flexbox";
-import React45 from "react";
+import React47 from "react";
 var TwoToneBulletPointList = /* @__PURE__ */ __name(({ list }) => {
-  return /* @__PURE__ */ React45.createElement(FlexCol17, {
+  return /* @__PURE__ */ React47.createElement(FlexCol17, {
     alignItems: "flex-start",
     gap: 1
   }, list.map((item, index) => {
     return (
       // eslint-disable-next-line @eslint-react/no-array-index-key
-      /* @__PURE__ */ React45.createElement(FlexGrowRow9, {
+      /* @__PURE__ */ React47.createElement(FlexGrowRow9, {
         key: index + "bulletPointList",
         alignItems: "flex-start",
         justifyContent: "flex-start",
         gap: 1
-      }, /* @__PURE__ */ React45.createElement(TwoToneBulletPoint, {
+      }, /* @__PURE__ */ React47.createElement(TwoToneBulletPoint, {
         marginTop: "4px"
       }), item)
     );
@@ -4194,7 +4232,7 @@ var TwoToneBulletPointList = /* @__PURE__ */ __name(({ list }) => {
 // src/dapps/shared/accounts/components/InputFields/CoinbaseEmail.tsx
 import { FormControl, TextField } from "@mui/material";
 import { LabeledTextFieldWrapper } from "@xyo-network/react-shared";
-import React46, { useState as useState20 } from "react";
+import React48, { useState as useState20 } from "react";
 var CoinbaseEmailInput = /* @__PURE__ */ __name(({ existingEmail, ...props }) => {
   const [email, setEmail] = useState20(existingEmail);
   const [valid, setValid] = useState20();
@@ -4206,11 +4244,11 @@ var CoinbaseEmailInput = /* @__PURE__ */ __name(({ existingEmail, ...props }) =>
     setValid(!!emailFromEvent);
     setEmail(emailFromEvent);
   }, "handleChange");
-  return /* @__PURE__ */ React46.createElement(FormControl, {
+  return /* @__PURE__ */ React48.createElement(FormControl, {
     fullWidth: true
-  }, /* @__PURE__ */ React46.createElement(LabeledTextFieldWrapper, {
+  }, /* @__PURE__ */ React48.createElement(LabeledTextFieldWrapper, {
     label: "Primary Cryptowallet"
-  }, /* @__PURE__ */ React46.createElement(TextField, {
+  }, /* @__PURE__ */ React48.createElement(TextField, {
     fullWidth: true,
     variant: "filled",
     error: valid === false,
@@ -4226,7 +4264,7 @@ var CoinbaseEmailInput = /* @__PURE__ */ __name(({ existingEmail, ...props }) =>
 // src/dapps/shared/accounts/components/InputFields/PrimaryCryptowallet.tsx
 import { FormControl as FormControl2, TextField as TextField2 } from "@mui/material";
 import { LabeledTextFieldWrapper as LabeledTextFieldWrapper2 } from "@xyo-network/react-shared";
-import React47, { useState as useState21 } from "react";
+import React49, { useState as useState21 } from "react";
 var PrimaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingPrimaryCryptoWallet, ...props }) => {
   const [primaryWallet, setPrimaryWallet] = useState21(existingPrimaryCryptoWallet);
   const [valid, setValid] = useState21();
@@ -4238,11 +4276,11 @@ var PrimaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingPrimaryCryptoWa
     setValid(!!nameFromEvent);
     setPrimaryWallet(nameFromEvent);
   }, "handleChange");
-  return /* @__PURE__ */ React47.createElement(FormControl2, {
+  return /* @__PURE__ */ React49.createElement(FormControl2, {
     fullWidth: true
-  }, /* @__PURE__ */ React47.createElement(LabeledTextFieldWrapper2, {
+  }, /* @__PURE__ */ React49.createElement(LabeledTextFieldWrapper2, {
     label: "Primary Cryptowallet"
-  }, /* @__PURE__ */ React47.createElement(TextField2, {
+  }, /* @__PURE__ */ React49.createElement(TextField2, {
     fullWidth: true,
     variant: "filled",
     error: valid === false,
@@ -4259,7 +4297,7 @@ var PrimaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingPrimaryCryptoWa
 // src/dapps/shared/accounts/components/InputFields/SecondaryCryptowallet.tsx
 import { FormControl as FormControl3, TextField as TextField3 } from "@mui/material";
 import { LabeledTextFieldWrapper as LabeledTextFieldWrapper3 } from "@xyo-network/react-shared";
-import React48, { useState as useState22 } from "react";
+import React50, { useState as useState22 } from "react";
 var SecondaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingSecondaryCryptoWallet, ...props }) => {
   const [secondaryWallet, setSecondaryWallet] = useState22(existingSecondaryCryptoWallet);
   const [valid, setValid] = useState22();
@@ -4271,11 +4309,11 @@ var SecondaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingSecondaryCryp
     setValid(!!walletFromEvent);
     setSecondaryWallet(walletFromEvent);
   }, "handleChange");
-  return /* @__PURE__ */ React48.createElement(FormControl3, {
+  return /* @__PURE__ */ React50.createElement(FormControl3, {
     fullWidth: true
-  }, /* @__PURE__ */ React48.createElement(LabeledTextFieldWrapper3, {
+  }, /* @__PURE__ */ React50.createElement(LabeledTextFieldWrapper3, {
     label: "Secondary Cryptowallet"
-  }, /* @__PURE__ */ React48.createElement(TextField3, {
+  }, /* @__PURE__ */ React50.createElement(TextField3, {
     variant: "filled",
     fullWidth: true,
     error: valid === false,
@@ -4292,25 +4330,25 @@ var SecondaryCryptoWalletInput = /* @__PURE__ */ __name(({ existingSecondaryCryp
 // src/dapps/shared/accounts/components/PaymentMethods.tsx
 import { Grid2 } from "@mui/material";
 import { FormGroupCreditCardProvider } from "@xyo-network/react-form-credit-card";
-import React50 from "react";
+import React52 from "react";
 
 // src/dapps/shared/accounts/components/AccountCard.tsx
 import { Card as Card4, CardContent as CardContent4, Divider as Divider5, Typography as Typography14 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol4, FlexGrowRow as FlexGrowRow10 } from "@xylabs/react-flexbox";
-import React49 from "react";
+import React51 from "react";
 var AccountCard = /* @__PURE__ */ __name(({ items, ...props }) => {
-  return /* @__PURE__ */ React49.createElement(Card4, props, /* @__PURE__ */ React49.createElement(CardContent4, null, /* @__PURE__ */ React49.createElement(FlexGrowCol4, {
+  return /* @__PURE__ */ React51.createElement(Card4, props, /* @__PURE__ */ React51.createElement(CardContent4, null, /* @__PURE__ */ React51.createElement(FlexGrowCol4, {
     width: "100%",
     gap: 2
   }, items.map((item, index) => {
     return (
       // eslint-disable-next-line @eslint-react/no-array-index-key
-      /* @__PURE__ */ React49.createElement(FlexGrowCol4, {
+      /* @__PURE__ */ React51.createElement(FlexGrowCol4, {
         gap: 2,
         key: index,
         width: "100%",
         alignItems: "stretch"
-      }, /* @__PURE__ */ React49.createElement(FlexGrowRow10, {
+      }, /* @__PURE__ */ React51.createElement(FlexGrowRow10, {
         sx: {
           alignItems: "stretch",
           flexDirection: {
@@ -4320,7 +4358,7 @@ var AccountCard = /* @__PURE__ */ __name(({ items, ...props }) => {
           justifyContent: "space-between"
         },
         gap: 2
-      }, /* @__PURE__ */ React49.createElement(FlexGrowCol4, {
+      }, /* @__PURE__ */ React51.createElement(FlexGrowCol4, {
         alignItems: "flex-start",
         width: "100%",
         sx: {
@@ -4329,13 +4367,13 @@ var AccountCard = /* @__PURE__ */ __name(({ items, ...props }) => {
             xs: "100%"
           }
         }
-      }, /* @__PURE__ */ React49.createElement(Typography14, {
+      }, /* @__PURE__ */ React51.createElement(Typography14, {
         variant: "h5",
         gutterBottom: true
-      }, item.title), /* @__PURE__ */ React49.createElement(Typography14, {
+      }, item.title), /* @__PURE__ */ React51.createElement(Typography14, {
         variant: "body1",
         gutterBottom: true
-      }, item.desc)), item?.component), items.length === 1 || index === items.length - 1 ? null : /* @__PURE__ */ React49.createElement(Divider5, {
+      }, item.desc)), item?.component), items.length === 1 || index === items.length - 1 ? null : /* @__PURE__ */ React51.createElement(Divider5, {
         flexItem: true
       }))
     );
@@ -4344,38 +4382,38 @@ var AccountCard = /* @__PURE__ */ __name(({ items, ...props }) => {
 
 // src/dapps/shared/accounts/components/PaymentMethods.tsx
 var PaymentMethods = /* @__PURE__ */ __name(() => {
-  return /* @__PURE__ */ React50.createElement(DappPage, {
+  return /* @__PURE__ */ React52.createElement(DappPage, {
     title: "Payment Methods"
-  }, /* @__PURE__ */ React50.createElement(Grid2, {
+  }, /* @__PURE__ */ React52.createElement(Grid2, {
     container: true,
     spacing: 3
-  }, /* @__PURE__ */ React50.createElement(Grid2, {
+  }, /* @__PURE__ */ React52.createElement(Grid2, {
     size: {
       xs: 12
     }
-  }, /* @__PURE__ */ React50.createElement(AccountCard, {
+  }, /* @__PURE__ */ React52.createElement(AccountCard, {
     sx: {
       height: "100%"
     },
     items: [
       {
         // TODO - needs a default implementation
-        component: /* @__PURE__ */ React50.createElement(FormGroupCreditCardProvider, null, /* @__PURE__ */ React50.createElement(React50.Fragment, null)),
+        component: /* @__PURE__ */ React52.createElement(FormGroupCreditCardProvider, null, /* @__PURE__ */ React52.createElement(React52.Fragment, null)),
         desc: "Save a credit card to your node to complete credit payments seamlessly.",
         title: "Credit Card"
       },
       {
-        component: /* @__PURE__ */ React50.createElement(CoinbaseEmailInput, null),
+        component: /* @__PURE__ */ React52.createElement(CoinbaseEmailInput, null),
         desc: "Use your Coinbase Account receive payments easily.",
         title: "Coinbase Email"
       },
       {
-        component: /* @__PURE__ */ React50.createElement(PrimaryCryptoWalletInput, null),
+        component: /* @__PURE__ */ React52.createElement(PrimaryCryptoWalletInput, null),
         desc: "This is the primary crypto wallet on your node.",
         title: "Primary Crypto Wallet"
       },
       {
-        component: /* @__PURE__ */ React50.createElement(SecondaryCryptoWalletInput, null),
+        component: /* @__PURE__ */ React52.createElement(SecondaryCryptoWalletInput, null),
         desc: "This is the secondary crypto wallet on your node.",
         title: "Secondary Crypto Wallet"
       }
@@ -4390,18 +4428,18 @@ var isCreditCardInput = isPayloadOfSchemaType(CreditCardInputSchema);
 
 // src/dapps/shared/name-service/DomainIcon.tsx
 import { createSvgIcon } from "@mui/material";
-import React51 from "react";
-var XnsDomainIcon = createSvgIcon(/* @__PURE__ */ React51.createElement("svg", {
+import React53 from "react";
+var XnsDomainIcon = createSvgIcon(/* @__PURE__ */ React53.createElement("svg", {
   id: "Layer_1",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 400 400"
-}, /* @__PURE__ */ React51.createElement("path", {
+}, /* @__PURE__ */ React53.createElement("path", {
   fill: "currentColor",
   d: "M0,314.34V85.34h43.89l99.55,152.67V85.34h43.89v229h-43.89L43.89,161.68v152.67H0Z"
-}), /* @__PURE__ */ React51.createElement("path", {
+}), /* @__PURE__ */ React53.createElement("path", {
   fill: "currentColor",
   d: "M298.99,319.12c-16.96,0-32.26-3-45.88-8.99-13.62-5.99-24.81-14.58-33.56-25.76-8.75-11.18-14.29-24.52-16.62-40l45.17-6.68c3.18,13.15,9.75,23.27,19.72,30.37,9.96,7.1,21.31,10.65,34.03,10.65,7.1,0,14-1.11,20.67-3.34,6.68-2.23,12.17-5.51,16.46-9.86,4.29-4.35,6.44-9.7,6.44-16.06,0-2.33-.35-4.59-1.03-6.76-.69-2.17-1.83-4.21-3.42-6.12-1.59-1.91-3.84-3.71-6.76-5.41-2.92-1.69-6.6-3.23-11.05-4.61l-59.48-17.49c-4.45-1.27-9.62-3.07-15.5-5.41-5.88-2.33-11.58-5.67-17.1-10.02-5.51-4.35-10.1-10.1-13.76-17.26-3.66-7.16-5.49-16.19-5.49-27.11,0-15.37,3.87-28.15,11.61-38.33,7.74-10.18,18.08-17.76,31.01-22.74,12.93-4.98,27.25-7.42,42.94-7.32,15.8.21,29.9,2.92,42.3,8.11,12.4,5.2,22.79,12.75,31.17,22.66,8.37,9.92,14.42,22.03,18.13,36.34l-46.76,7.95c-1.7-7.42-4.83-13.68-9.38-18.77-4.56-5.09-9.99-8.96-16.3-11.61-6.31-2.65-12.91-4.08-19.8-4.29-6.79-.21-13.17.72-19.16,2.78-5.99,2.07-10.87,5.06-14.63,8.99-3.76,3.92-5.65,8.59-5.65,14,0,4.98,1.54,9.04,4.61,12.17,3.07,3.13,6.94,5.65,11.61,7.55,4.66,1.91,9.44,3.5,14.31,4.77l39.76,10.81c5.94,1.59,12.51,3.68,19.72,6.28,7.21,2.6,14.13,6.2,20.75,10.81,6.62,4.61,12.09,10.68,16.38,18.21,4.29,7.53,6.44,17.07,6.44,28.63,0,12.3-2.57,23.03-7.71,32.2-5.14,9.17-12.06,16.75-20.75,22.74-8.69,5.99-18.53,10.47-29.5,13.44-10.97,2.97-22.29,4.45-33.95,4.45Z"
-}), /* @__PURE__ */ React51.createElement("circle", {
+}), /* @__PURE__ */ React53.createElement("circle", {
   fill: "#3898e7",
   cx: "372.52",
   cy: "291.63",
@@ -4411,7 +4449,7 @@ var XnsDomainIcon = createSvgIcon(/* @__PURE__ */ React51.createElement("svg", {
 // src/dapps/shared/table/head/components/Head.tsx
 import { InfoOutlined } from "@mui/icons-material";
 import { TableCell, TableHead, Tooltip as Tooltip6 } from "@mui/material";
-import React52 from "react";
+import React54 from "react";
 
 // src/dapps/shared/table/head/hooks/useVisibleColumns.tsx
 import { useMediaQuery as useMediaQuery2 } from "@mui/material";
@@ -4443,20 +4481,20 @@ var StyledTableRowHeader = styled9(TableRow2, {
 // src/dapps/shared/table/head/components/Head.tsx
 var TableHeadEx = /* @__PURE__ */ __name(({ payloads, ...props }) => {
   const [VisibleTableCells] = useVisibleColumns(payloads);
-  return /* @__PURE__ */ React52.createElement(TableHead, props, /* @__PURE__ */ React52.createElement(StyledTableRowHeader, null, VisibleTableCells.map((headCell) => /* @__PURE__ */ React52.createElement(TableCell, {
+  return /* @__PURE__ */ React54.createElement(TableHead, props, /* @__PURE__ */ React54.createElement(StyledTableRowHeader, null, VisibleTableCells.map((headCell) => /* @__PURE__ */ React54.createElement(TableCell, {
     key: headCell.id,
     align: headCell.align ?? "left",
     padding: headCell.disablePadding ? "none" : "normal",
     width: headCell.width ?? "auto"
-  }, headCell.tooltip ? /* @__PURE__ */ React52.createElement("span", {
+  }, headCell.tooltip ? /* @__PURE__ */ React54.createElement("span", {
     style: {
       alignItems: "center",
       display: "inline-flex",
       gap: "4px"
     }
-  }, headCell.label, /* @__PURE__ */ React52.createElement(Tooltip6, {
+  }, headCell.label, /* @__PURE__ */ React54.createElement(Tooltip6, {
     title: headCell.tooltip
-  }, /* @__PURE__ */ React52.createElement(InfoOutlined, {
+  }, /* @__PURE__ */ React54.createElement(InfoOutlined, {
     sx: {
       fontSize: "16px"
     }
@@ -4476,28 +4514,28 @@ var isTableHeadCell = isPayloadOfSchemaType2(TableHeadCellSchema);
 import { ArrowCircleLeftOutlined, ArrowCircleRightOutlined } from "@mui/icons-material";
 import { IconButton as IconButton4, LinearProgress as LinearProgress2 } from "@mui/material";
 import { FlexRow as FlexRow10 } from "@xylabs/react-flexbox";
-import React53 from "react";
+import React55 from "react";
 var NextIteratorFlexbox = /* @__PURE__ */ __name(({ next: changePage, loading, ...props }) => {
-  return /* @__PURE__ */ React53.createElement(FlexRow10, {
+  return /* @__PURE__ */ React55.createElement(FlexRow10, {
     justifyContent: "space-between",
     gap: 2,
     ...props
-  }, /* @__PURE__ */ React53.createElement(LinearProgress2, {
+  }, /* @__PURE__ */ React55.createElement(LinearProgress2, {
     sx: {
       display: "flex",
       flexGrow: 1,
       visibility: loading ? "visible" : "hidden"
     }
-  }), /* @__PURE__ */ React53.createElement(FlexRow10, null, /* @__PURE__ */ React53.createElement(IconButton4, {
+  }), /* @__PURE__ */ React55.createElement(FlexRow10, null, /* @__PURE__ */ React55.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => changePage("asc"), "onClick")
-  }, /* @__PURE__ */ React53.createElement(ArrowCircleLeftOutlined, null)), /* @__PURE__ */ React53.createElement(IconButton4, {
+  }, /* @__PURE__ */ React55.createElement(ArrowCircleLeftOutlined, null)), /* @__PURE__ */ React55.createElement(IconButton4, {
     onClick: /* @__PURE__ */ __name(() => changePage("desc"), "onClick")
-  }, /* @__PURE__ */ React53.createElement(ArrowCircleRightOutlined, null))));
+  }, /* @__PURE__ */ React55.createElement(ArrowCircleRightOutlined, null))));
 }, "NextIteratorFlexbox");
 
 // src/settings/Theme/ThemeProvider.tsx
 import { InvertibleMuiThemeProvider } from "@xylabs/react-invertible-theme";
-import React54, { useMemo as useMemo19 } from "react";
+import React56, { useMemo as useMemo19 } from "react";
 
 // src/settings/Theme/ThemeCssVars.ts
 import { alpha as alpha9, createTheme, darken as darken2, lighten } from "@mui/material";
@@ -4801,7 +4839,7 @@ var AppOsThemeProvider = /* @__PURE__ */ __name(({ children }) => {
     if (savedValue && validValues.includes(savedValue)) return savedValue;
     return "system";
   }, []);
-  return /* @__PURE__ */ React54.createElement(InvertibleMuiThemeProvider, {
+  return /* @__PURE__ */ React56.createElement(InvertibleMuiThemeProvider, {
     theme: ThemeCssVars,
     defaultMode: initialValue
   }, children);
@@ -4843,6 +4881,7 @@ export {
   DappPage,
   DappPathHelpers,
   DappPathSwitcher,
+  DappRendered,
   DappTitle,
   DappWindow,
   DappsRow,
@@ -4883,7 +4922,6 @@ export {
   XyOsUi,
   XyOsUiContext,
   XyOsUiContextProvider,
-  decomposeDappSet,
   deriveDappState,
   detectCustomer,
   getApiDomain,
@@ -4913,6 +4951,7 @@ export {
   useDappRegistry,
   useDappSeedPhraseRepository,
   useDebugClick,
+  useDecomposeDapp,
   useDialogState,
   useExposedNode,
   useIntentResourceViews,