@xyo-network/os-react-runtime 5.0.6 → 5.0.8

package/dist/browser/index.mjs

@@ -478,14 +478,54 @@ var useKernel = /* @__PURE__ */ __name((locator, params) => {
   return kernelExternalInterface;
 }, "useKernel");
 
+// src/modules/Dapp/Alert/RenderErrorWithSupportLink.tsx
+import { ButtonEx } from "@xylabs/react-button";
+import { ErrorAlert } from "@xylabs/react-error";
+import React2, { useEffect as useEffect4 } from "react";
+import { useLocation } from "react-router-dom";
+var ErrorRenderWithSupport = /* @__PURE__ */ __name(({ supportHref = "", supportTo, supportLinkText = "Support", error, onCancel, ...props }) => {
+  const location2 = useLocation();
+  useEffect4(() => {
+    location2.state = {
+      from: {
+        pathname: globalThis.location.pathname
+      }
+    };
+  }, [
+    location2
+  ]);
+  return /* @__PURE__ */ React2.createElement(ErrorAlert, {
+    action: supportTo ? /* @__PURE__ */ React2.createElement(ButtonEx, {
+      target: "_blank",
+      to: supportTo,
+      color: "inherit",
+      size: "small"
+    }, supportLinkText) : /* @__PURE__ */ React2.createElement(ButtonEx, {
+      target: "_blank",
+      href: supportHref,
+      color: "inherit",
+      size: "small"
+    }, supportLinkText),
+    error,
+    onCancel,
+    ...props
+  });
+}, "ErrorRenderWithSupport");
+var ErrorRenderWithSupportDefault = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ React2.createElement(ErrorRenderWithSupport, {
+    supportHref: "https://discord.com/channels/935586624392298547/1228436997375393885",
+    ...props
+  });
+}, "ErrorRenderWithSupportDefault");
+
 // src/modules/Dapp/Container.tsx
-import React25, { memo, useMemo as useMemo14 } from "react";
+import React26, { memo, useMemo as useMemo14 } from "react";
 
 // src/modules/os/hooks/useDappContextCreator.ts
 import { useAsyncEffect } from "@xylabs/react-async-effect";
 import { DappIntentTypes } from "@xyo-network/os-model";
 import { DappContextCreator, RunningDappCache } from "@xyo-network/os-runtime";
-import { useCallback, useEffect as useEffect4, useRef, useState } from "react";
+import { useCallback, useEffect as useEffect5, useRef, useState } from "react";
 var useDappContextCreator = /* @__PURE__ */ __name((xnsNodeUrl, xnsNetwork, dapp, currentIntent, allowedNames, createOnMount = false) => {
   const context = useXyOsUiContext();
   const [windowDappNodeSet, setWindowDappNodeSet] = useState({
@@ -495,7 +535,7 @@ var useDappContextCreator = /* @__PURE__ */ __name((xnsNodeUrl, xnsNetwork, dapp
   const [dappWindowNodeError, setDappWindowNodeError] = useState();
   const targetedDapp = !!(dapp && context && currentIntent?.targetDappId === dapp?.config.name);
   const windowDappNodeSetRef = useRef(windowDappNodeSet);
-  useEffect4(() => {
+  useEffect5(() => {
     windowDappNodeSetRef.current = windowDappNodeSet;
   }, [
     windowDappNodeSet
@@ -515,7 +555,7 @@ var useDappContextCreator = /* @__PURE__ */ __name((xnsNodeUrl, xnsNetwork, dapp
     context,
     allowedNames
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (createOnMount) {
       void (async () => {
         await createNode();
@@ -557,11 +597,11 @@ var useDappContextCreator = /* @__PURE__ */ __name((xnsNodeUrl, xnsNetwork, dapp
 
 // src/modules/os/hooks/useDappRegistrationResults.ts
 import { EventBusPubSubConnection } from "@xyo-network/os-runtime";
-import { useEffect as useEffect5, useState as useState2 } from "react";
+import { useEffect as useEffect6, useState as useState2 } from "react";
 var useDappRegistrationResults = /* @__PURE__ */ __name(() => {
   const context = useXyOsUiContext();
   const [registeredDappSetResults, setRegisteredDappSetResults] = useState2();
-  useEffect5(() => {
+  useEffect6(() => {
     const listener = /* @__PURE__ */ __name(() => {
       setRegisteredDappSetResults(context?.dappRegistrationResults);
     }, "listener");
@@ -632,13 +672,13 @@ import { useMemo as useMemo4 } from "react";
 // src/modules/stack/useStackReady.ts
 import { assertEx as assertEx3 } from "@xylabs/assert";
 import { EventBusPubSubConnection as EventBusPubSubConnection2 } from "@xyo-network/os-runtime";
-import { useEffect as useEffect6, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState3 } from "react";
 var useStackReady = /* @__PURE__ */ __name((stackReadyEvent, stackName, context) => {
   const providedContext = useXyOsUiContext();
   const [stackReady, setStackReady] = useState3({
     ready: false
   });
-  useEffect6(() => {
+  useEffect7(() => {
     const derivedContext = context ?? providedContext;
     const listener = /* @__PURE__ */ __name(() => {
       if (!derivedContext) throw new Error("no context found");
@@ -737,9 +777,9 @@ var usePhraseFile = /* @__PURE__ */ __name((phrase) => {
 }, "usePhraseFile");
 
 // src/modules/os/hooks/useTabs.ts
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation as useLocation2, useNavigate } from "react-router-dom";
 var useTabs = /* @__PURE__ */ __name(() => {
-  const location2 = useLocation();
+  const location2 = useLocation2();
   const navigate = useNavigate();
   const rootFolder = location2.pathname.split("/")[1];
   const tab = rootFolder?.length > 0 ? rootFolder : "node";
@@ -800,10 +840,10 @@ var getApiDomain = /* @__PURE__ */ __name((localHost, apiDomain) => {
 }, "getApiDomain");
 
 // src/utils/useOnWindowResize.tsx
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState4 } from "react";
 var useOnWindowResize = /* @__PURE__ */ __name(() => {
   const [resized, setResized] = useState4();
-  useEffect7(() => {
+  useEffect8(() => {
     const onResize = /* @__PURE__ */ __name((event) => {
       setResized(event);
     }, "onResize");
@@ -843,7 +883,7 @@ import { Circle } from "@mui/icons-material";
 import { FlexCol } from "@xylabs/react-flexbox";
 import { DappIntentTypes as DappIntentTypes6 } from "@xyo-network/os-model";
 import { DappIntentCaller as DappIntentCaller2, XyOsMonitor as XyOsMonitor2 } from "@xyo-network/os-runtime";
-import React4, { useRef as useRef2 } from "react";
+import React5, { useRef as useRef2 } from "react";
 
 // src/modules/intent/DappIntentResourceHooks.ts
 import { usePromise as usePromise7 } from "@xylabs/react-promise";
@@ -906,12 +946,12 @@ var useDappIntentCaller = /* @__PURE__ */ __name((xyOsContext) => {
 import { filterAs } from "@xylabs/array";
 import { asOptionalDappIntent, DappIntentTypes as DappIntentTypes2, DappMode } from "@xyo-network/os-model";
 import { useWeakArchivistFromNode as useWeakArchivistFromNode2 } from "@xyo-network/react-archivist";
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect9, useState as useState6 } from "react";
 var useDappIntentListener = /* @__PURE__ */ __name((dappName, targetMode = DappMode.Window) => {
   const [dappIntentType, setDappIntentType] = useState6(DappIntentTypes2.Close);
   const [intentPayload, setIntentPayload] = useState6();
   const [intentArchivist] = useWeakArchivistFromNode2("IntentArchivist");
-  useEffect8(() => {
+  useEffect9(() => {
     const listener = /* @__PURE__ */ __name(({ payloads }) => {
       const filteredPayloads = filterAs(payloads, asOptionalDappIntent);
       for (const payload of filteredPayloads) {
@@ -956,11 +996,11 @@ var useDappIntentListener = /* @__PURE__ */ __name((dappName, targetMode = DappM
 
 // src/modules/intent/useDappIntentListener2.ts
 import { DappIntentTypes as DappIntentTypes3, DappMode as DappMode2 } from "@xyo-network/os-model";
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState7 } from "react";
 var useDappIntentListener2 = /* @__PURE__ */ __name((dappName, sourceMode = DappMode2.Window) => {
   const { latestDappIntent } = DappIntentResourceHooks.useResourceViewsFromProvidedNode();
   const [dappIntentType, setDappIntentType] = useState7(DappIntentTypes3.Close);
-  useEffect9(() => {
+  useEffect10(() => {
     if (sourceMode === DappMode2.Window) {
       for (const payload of latestDappIntent ?? []) {
         if (payload.targetDappId === dappName) {
@@ -1084,9 +1124,9 @@ var deriveDappState = /* @__PURE__ */ __name((intent) => {
 }, "deriveDappState");
 
 // src/modules/Dapp/RenderHtml.tsx
-import React2 from "react";
+import React3 from "react";
 var RenderHtml = /* @__PURE__ */ __name(({ htmlString }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React3.createElement("div", {
     style: {
       height: 64,
       width: 64
@@ -1101,7 +1141,7 @@ var RenderHtml = /* @__PURE__ */ __name(({ htmlString }) => {
 // src/modules/Dapp/Button/LaunchFrame.tsx
 import { useTheme } from "@mui/material";
 import { animated, config, useSpring } from "@react-spring/web";
-import React3, { useMemo as useMemo7 } from "react";
+import React4, { useMemo as useMemo7 } from "react";
 var DappLaunchFrame = /* @__PURE__ */ __name(({ bgColor, children, id, launchLeft, open, launchTop, ref }) => {
   const theme = useTheme();
   const frameOpenSpringConfig = useMemo7(() => ({
@@ -1131,10 +1171,10 @@ var DappLaunchFrame = /* @__PURE__ */ __name(({ bgColor, children, id, launchLef
       transform: open ? "scale(1)" : "scale(0)"
     }
   });
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     id,
     ref
-  }, /* @__PURE__ */ React3.createElement(animated.div, {
+  }, /* @__PURE__ */ React4.createElement(animated.div, {
     id: "dapp-launch-frame-transition-width-height",
     style: {
       ...frameProps,
@@ -1145,7 +1185,7 @@ var DappLaunchFrame = /* @__PURE__ */ __name(({ bgColor, children, id, launchLef
       // Set to one above the mui app bar
       zIndex: 1101
     }
-  }, /* @__PURE__ */ React3.createElement(animated.div, {
+  }, /* @__PURE__ */ React4.createElement(animated.div, {
     id: "dapp-launch-frame-transition-scale",
     style: {
       ...scaleProps,
@@ -1176,10 +1216,10 @@ var decomposeProps = /* @__PURE__ */ __name((dappIcon, props) => {
 
 // src/modules/Dapp/Button/StyledComponents.tsx
 import { alpha, styled } from "@mui/material";
-import { ButtonEx } from "@xylabs/react-button";
+import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
 import { TypographyEx } from "@xyo-network/react-shared";
 var borderRadiusFactor = 1.5;
-var StyledDappIconButtonEx = styled(ButtonEx, {
+var StyledDappIconButtonEx = styled(ButtonEx2, {
   name: "DappIconButton",
   shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
     "iconBgBaseColor"
@@ -1256,20 +1296,20 @@ var DappIconButton = /* @__PURE__ */ __name(({ children, dappIcon, dappIconSvg,
     });
     await sendIntent?.(DappIntentCaller2.buildIntent(DappIntentCaller2.OsDappName, DappIntentTypes6.Launch, dappName));
   }, "onClickIcon");
-  return /* @__PURE__ */ React4.createElement(FlexCol, {
+  return /* @__PURE__ */ React5.createElement(FlexCol, {
     alignItems: "stretch",
     justifyContent: "stretch"
-  }, /* @__PURE__ */ React4.createElement(DappLaunchFrame, {
+  }, /* @__PURE__ */ React5.createElement(DappLaunchFrame, {
     id: "dapp-launch-frame",
     open: !!active,
     launchLeft,
     launchTop
-  }, children), /* @__PURE__ */ React4.createElement("span", {
+  }, children), /* @__PURE__ */ React5.createElement("span", {
     style: {
       cursor: "pointer"
     },
     onClick: onClickIcon
-  }, /* @__PURE__ */ React4.createElement(StyledDappIconButtonEx, {
+  }, /* @__PURE__ */ React5.createElement(StyledDappIconButtonEx, {
     iconBgBaseColor: color,
     ref: iconButtonRef,
     sx: {
@@ -1279,16 +1319,16 @@ var DappIconButton = /* @__PURE__ */ __name(({ children, dappIcon, dappIconSvg,
       ...sx
     },
     ...nonSxProps
-  }, dappIconSvg ? /* @__PURE__ */ React4.createElement(RenderHtml, {
+  }, dappIconSvg ? /* @__PURE__ */ React5.createElement(RenderHtml, {
     htmlString: dappIconSvg
-  }) : /* @__PURE__ */ React4.createElement(StyledDefaultDappIcon, {
+  }) : /* @__PURE__ */ React5.createElement(StyledDefaultDappIcon, {
     fontSize: DappIconSize
-  }, dappIcon?.name.at(0))), /* @__PURE__ */ React4.createElement(FlexCol, {
+  }, dappIcon?.name.at(0))), /* @__PURE__ */ React5.createElement(FlexCol, {
     gap: 0.25
-  }, /* @__PURE__ */ React4.createElement(StyledDappName, {
+  }, /* @__PURE__ */ React5.createElement(StyledDappName, {
     variant: "body2",
     maxWidth: iconSize
-  }, MiddleEllipsisFunction(dappIcon?.name)), /* @__PURE__ */ React4.createElement(Circle, {
+  }, MiddleEllipsisFunction(dappIcon?.name)), /* @__PURE__ */ React5.createElement(Circle, {
     sx: {
       height: 8,
       opacity: minimized ? 1 : 0,
@@ -1304,7 +1344,7 @@ import { ErrorRender } from "@xylabs/react-error";
 import { FlexCol as FlexCol2, FlexRow } from "@xylabs/react-flexbox";
 import { RegisteredNames } from "@xyo-network/os-model";
 import { AccessNodeQueries } from "@xyo-network/os-runtime";
-import React5, { useState as useState8 } from "react";
+import React6, { useState as useState8 } from "react";
 var DappAccessDialog = /* @__PURE__ */ __name(({ accessRequest, children, dappNode, registeredDappAccess, ...props }) => {
   const [error, setError] = useState8();
   const [noPayloadsInserted, setNoPayloadsInserted] = useState8(false);
@@ -1343,43 +1383,43 @@ var DappAccessDialog = /* @__PURE__ */ __name(({ accessRequest, children, dappNo
       setError(new Error("No registered dapp access or dappNode found"));
     }
   }, "handleAllow");
-  return /* @__PURE__ */ React5.createElement(Dialog, props, /* @__PURE__ */ React5.createElement(DialogTitle, null, "Message from XYO OS"), /* @__PURE__ */ React5.createElement(DialogContent, {
+  return /* @__PURE__ */ React6.createElement(Dialog, props, /* @__PURE__ */ React6.createElement(DialogTitle, null, "Message from XYO OS"), /* @__PURE__ */ React6.createElement(DialogContent, {
     dividers: true,
     sx: {
       display: "flex",
       flexDirection: "column",
       gap: 3
     }
-  }, /* @__PURE__ */ React5.createElement(ErrorRender, {
+  }, /* @__PURE__ */ React6.createElement(ErrorRender, {
     error,
     scope: "DappAccessDialog"
-  }), /* @__PURE__ */ React5.createElement(FlexCol2, {
+  }), /* @__PURE__ */ React6.createElement(FlexCol2, {
     gap: 1
-  }, /* @__PURE__ */ React5.createElement(Typography, {
+  }, /* @__PURE__ */ React6.createElement(Typography, {
     variant: "subtitle2"
-  }, "dApp to dApp Access Request"), /* @__PURE__ */ React5.createElement(FlexRow, {
+  }, "dApp to dApp Access Request"), /* @__PURE__ */ React6.createElement(FlexRow, {
     gap: 1
-  }, /* @__PURE__ */ React5.createElement(Typography, {
+  }, /* @__PURE__ */ React6.createElement(Typography, {
     fontSize: 16
-  }, /* @__PURE__ */ React5.createElement("strong", null, accessRequest?.requestingDappId), "\xA0"), /* @__PURE__ */ React5.createElement(ArrowForward, null), /* @__PURE__ */ React5.createElement(Typography, {
+  }, /* @__PURE__ */ React6.createElement("strong", null, accessRequest?.requestingDappId), "\xA0"), /* @__PURE__ */ React6.createElement(ArrowForward, null), /* @__PURE__ */ React6.createElement(Typography, {
     fontSize: 16
-  }, /* @__PURE__ */ React5.createElement("strong", null, registeredDappAccess?.registeringDappId))))), /* @__PURE__ */ React5.createElement(DialogContent, {
+  }, /* @__PURE__ */ React6.createElement("strong", null, registeredDappAccess?.registeringDappId))))), /* @__PURE__ */ React6.createElement(DialogContent, {
     dividers: true,
     sx: {
       display: "flex",
       flexDirection: "column",
       gap: 3
     }
-  }, /* @__PURE__ */ React5.createElement(FlexCol2, {
+  }, /* @__PURE__ */ React6.createElement(FlexCol2, {
     gap: 1
-  }, /* @__PURE__ */ React5.createElement(Typography, null, /* @__PURE__ */ React5.createElement("strong", null, accessRequest?.requestingDappId), " ", "dApp would like to access your", /* @__PURE__ */ React5.createElement("strong", null, registeredDappAccess?.name), " ", "from", " ", /* @__PURE__ */ React5.createElement("strong", null, registeredDappAccess?.registeringDappId), " ", "dApp")), noPayloadsInserted ? /* @__PURE__ */ React5.createElement(Alert, {
+  }, /* @__PURE__ */ React6.createElement(Typography, null, /* @__PURE__ */ React6.createElement("strong", null, accessRequest?.requestingDappId), " ", "dApp would like to access your", /* @__PURE__ */ React6.createElement("strong", null, registeredDappAccess?.name), " ", "from", " ", /* @__PURE__ */ React6.createElement("strong", null, registeredDappAccess?.registeringDappId), " ", "dApp")), noPayloadsInserted ? /* @__PURE__ */ React6.createElement(Alert, {
     severity: "warning"
-  }, registeredDappAccess?.name, " ", "Access Request did not find payloads to insert") : null), children ? /* @__PURE__ */ React5.createElement(DialogContent, {
+  }, registeredDappAccess?.name, " ", "Access Request did not find payloads to insert") : null), children ? /* @__PURE__ */ React6.createElement(DialogContent, {
     dividers: true
-  }, children) : null, /* @__PURE__ */ React5.createElement(DialogActions, null, /* @__PURE__ */ React5.createElement(Button, {
+  }, children) : null, /* @__PURE__ */ React6.createElement(DialogActions, null, /* @__PURE__ */ React6.createElement(Button, {
     variant: "outlined",
     onClick: onClose
-  }, "Cancel"), /* @__PURE__ */ React5.createElement(Button, {
+  }, "Cancel"), /* @__PURE__ */ React6.createElement(Button, {
     variant: "contained",
     onClick: handleAllow
   }, "Allow")));
@@ -1387,7 +1427,7 @@ var DappAccessDialog = /* @__PURE__ */ __name(({ accessRequest, children, dappNo
 
 // src/modules/Dapp/modules/access-interface/components/Flexbox.tsx
 import { ErrorRender as ErrorRender2 } from "@xylabs/react-error";
-import React6 from "react";
+import React7 from "react";
 
 // src/modules/Dapp/modules/access-interface/hooks/useDialogState.tsx
 import { usePromise as usePromise8 } from "@xylabs/react-promise";
@@ -1440,13 +1480,13 @@ var useDialogState = /* @__PURE__ */ __name((context) => {
 // src/modules/Dapp/modules/access-interface/components/Flexbox.tsx
 var DappAccessFlexbox = /* @__PURE__ */ __name(({ context }) => {
   const { accessRequests, allowAccessDialogError, openAccessDialog, registeredInterface, setOpenAccessDialog } = useDialogState(context);
-  return /* @__PURE__ */ React6.createElement(DappAccessDialog, {
+  return /* @__PURE__ */ React7.createElement(DappAccessDialog, {
     accessRequest: accessRequests?.[0],
     dappNode: context,
     open: openAccessDialog,
     onClose: /* @__PURE__ */ __name(() => setOpenAccessDialog(false), "onClose"),
     registeredDappAccess: registeredInterface
-  }, allowAccessDialogError ? /* @__PURE__ */ React6.createElement(ErrorRender2, {
+  }, allowAccessDialogError ? /* @__PURE__ */ React7.createElement(ErrorRender2, {
     error: allowAccessDialogError,
     scope: "DappAccessFlexbox"
   }) : null);
@@ -1459,38 +1499,38 @@ import { FlexGrowRow } from "@xylabs/react-flexbox";
 import { ColorSchemeButton } from "@xylabs/react-theme";
 import { DappIntentTypes as DappIntentTypes9 } from "@xyo-network/os-model";
 import { DappIntentCaller as DappIntentCaller5 } from "@xyo-network/os-runtime";
-import React9 from "react";
+import React10 from "react";
 
 // src/modules/Dapp/Debug/Dialog.tsx
 import { Dialog as Dialog2, DialogActions as DialogActions2, DialogContent as DialogContent2 } from "@mui/material";
-import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
+import { ButtonEx as ButtonEx3 } from "@xylabs/react-button";
 import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
 import { NodeProvider } from "@xyo-network/react-node";
-import React7, { lazy, Suspense } from "react";
+import React8, { lazy, Suspense } from "react";
 var Debug = /* @__PURE__ */ lazy(() => import(
   /* webpackChunkName: "Debug" */
   "@xyo-network/os-react-debug"
 ));
-var LazyDebug = /* @__PURE__ */ __name(() => /* @__PURE__ */ React7.createElement(Suspense, {
-  fallback: /* @__PURE__ */ React7.createElement(FlexCol3, null)
-}, /* @__PURE__ */ React7.createElement(FlexCol3, null), /* @__PURE__ */ React7.createElement(Debug, {
+var LazyDebug = /* @__PURE__ */ __name(() => /* @__PURE__ */ React8.createElement(Suspense, {
+  fallback: /* @__PURE__ */ React8.createElement(FlexCol3, null)
+}, /* @__PURE__ */ React8.createElement(FlexCol3, null), /* @__PURE__ */ React8.createElement(Debug, {
   height: "100%"
 })), "LazyDebug");
 var DebugDialog = /* @__PURE__ */ __name(({ closeDebug, debugOpen, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(Dialog2, {
+  return /* @__PURE__ */ React8.createElement(Dialog2, {
     open: debugOpen,
     onClose: closeDebug,
     fullScreen: true,
     ...props
-  }, /* @__PURE__ */ React7.createElement(DialogContent2, null, /* @__PURE__ */ React7.createElement(LazyDebug, null)), /* @__PURE__ */ React7.createElement(DialogActions2, null, /* @__PURE__ */ React7.createElement(ButtonEx2, {
+  }, /* @__PURE__ */ React8.createElement(DialogContent2, null, /* @__PURE__ */ React8.createElement(LazyDebug, null)), /* @__PURE__ */ React8.createElement(DialogActions2, null, /* @__PURE__ */ React8.createElement(ButtonEx3, {
     variant: "outlined",
     onClick: closeDebug
   }, "Close")));
 }, "DebugDialog");
 var DebugDialogWithNode = /* @__PURE__ */ __name(({ closeDebug, debugOpen, context, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(NodeProvider, {
+  return /* @__PURE__ */ React8.createElement(NodeProvider, {
     node: context?.root
-  }, /* @__PURE__ */ React7.createElement(DebugDialog, {
+  }, /* @__PURE__ */ React8.createElement(DebugDialog, {
     closeDebug,
     debugOpen,
     ...props
@@ -1621,7 +1661,7 @@ var useAddDappMenuItems = /* @__PURE__ */ __name((payloads) => {
 }, "useAddDappMenuItems");
 
 // src/modules/Dapp/modules/Window/hooks/menu/useDappMenu.ts
-import { useEffect as useEffect10, useRef as useRef3, useState as useState10 } from "react";
+import { useEffect as useEffect11, useRef as useRef3, useState as useState10 } from "react";
 import { useNavigate as useNavigate3, useParams as useParams2 } from "react-router-dom";
 
 // src/modules/Dapp/modules/Window/hooks/menu/useDappMenuDependencies.ts
@@ -1649,26 +1689,26 @@ var useDappMenu = /* @__PURE__ */ __name((context, dappName) => {
   const { defaultPath, menuConfigs, menuItemsVisible, menuSelection, resourceError } = useDappMenuDependencies(context);
   const activePath = menuSelection ?? defaultPath;
   const currentPathRef = useRef3(void 0);
-  useEffect10(() => {
+  useEffect11(() => {
     if (params && currentPathRef.current === void 0) {
       currentPathRef.current = params.path ?? "";
     }
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (context === null) {
       currentPathRef.current = void 0;
     }
   }, [
     context
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (menuSelection) {
       currentPathRef.current = menuSelection;
     }
   }, [
     menuSelection
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (resourceError) setError(resourceError);
   }, [
     resourceError
@@ -1748,7 +1788,7 @@ import { findAs as findAs2 } from "@xylabs/array";
 import { useAtomicPromise, usePromise as usePromise12 } from "@xylabs/react-promise";
 import { asOptionalDappIntent as asOptionalDappIntent2, DappIntentTypes as DappIntentTypes7 } from "@xyo-network/os-model";
 import { DappIntentCaller as DappIntentCaller3 } from "@xyo-network/os-runtime";
-import { useEffect as useEffect11, useState as useState11 } from "react";
+import { useEffect as useEffect12, useState as useState11 } from "react";
 var useManageDappIntentRequest = /* @__PURE__ */ __name((context, dappId) => {
   const dappCaller = useDappCaller(context);
   const sendIntent = useSendDappIntent();
@@ -1782,7 +1822,7 @@ var useManageDappIntentRequest = /* @__PURE__ */ __name((context, dappId) => {
     intentPayload,
     sendIntent
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     const listener = /* @__PURE__ */ __name(({ payloads }) => {
       if (context) {
         const intentPayload2 = findAs2(payloads, asOptionalDappIntent2);
@@ -1807,7 +1847,7 @@ 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 useCallback4, useEffect as useEffect12, useRef as useRef4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef4 } from "react";
 import { useNavigate as useNavigate5, useParams as useParams3 } from "react-router-dom";
 var useManageDappPathFromRoute = /* @__PURE__ */ __name((context, dappName) => {
   const params = useParams3();
@@ -1832,7 +1872,7 @@ var useManageDappPathFromRoute = /* @__PURE__ */ __name((context, dappName) => {
     context,
     defaultPath
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (context && menuSelection) {
       const pathIsInUnchanged = DappPathHelpers.detectDuplicateSelections(currentPathRef.current ?? "", menuSelection, defaultPath);
       if (pathIsInUnchanged) return;
@@ -1905,7 +1945,7 @@ var useManageDappStateFromRoute = /* @__PURE__ */ __name((intentPayload) => {
 }, "useManageDappStateFromRoute");
 
 // src/modules/Dapp/modules/Window/hooks/useDebugClick.ts
-import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef6, useState as useState12 } from "react";
 import { useNavigate as useNavigate6, useSearchParams as useSearchParams2 } from "react-router-dom";
 var useDebugClick = /* @__PURE__ */ __name(() => {
   const [params, setParams] = useSearchParams2();
@@ -1934,7 +1974,7 @@ var useDebugClick = /* @__PURE__ */ __name(() => {
   }, [
     navigate
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     const initialOpen = openFromClick.current && !closeFromClick.current && params.has("debug");
     const backButtonClicked = openFromClick.current && !closeFromClick.current && !params.has("debug");
     if (initialOpen) {
@@ -1962,13 +2002,13 @@ 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";
-import React8 from "react";
+import React9 from "react";
 var NodeManifest = /* @__PURE__ */ __name(() => {
   const [node] = useProvidedNode();
   const [nodeManifest] = usePromise15(async () => await node?.manifest(3), [
     node
   ]);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, node ? /* @__PURE__ */ React8.createElement("pre", null, JSON.stringify(nodeManifest, null, 2)) : null);
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, node ? /* @__PURE__ */ React9.createElement("pre", null, JSON.stringify(nodeManifest, null, 2)) : null);
 }, "NodeManifest");
 
 // src/modules/Dapp/modules/Window/hooks/useDecomposeDapp.tsx
@@ -2043,7 +2083,7 @@ var useSyncOsRegisteredAccessInterfaces = /* @__PURE__ */ __name((context) => {
 
 // src/modules/Dapp/modules/Window/AppBar.tsx
 var EmptyDappBarForPadding = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React9.createElement(AppBar, {
+  return /* @__PURE__ */ React10.createElement(AppBar, {
     color: "primary",
     sx: {
       flexDirection: "row"
@@ -2056,7 +2096,7 @@ var EmptyDappBarForPadding = /* @__PURE__ */ __name((props) => {
 var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
   const sendIntent = useSendDappIntent();
   const { closeDebug, debugOpen, openDebug } = useDebugClick();
-  return /* @__PURE__ */ React9.createElement(AppBar, {
+  return /* @__PURE__ */ React10.createElement(AppBar, {
     elevation: 0,
     color: "transparent",
     sx: {
@@ -2066,21 +2106,21 @@ var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
     component: "div",
     position: "sticky",
     ...props
-  }, /* @__PURE__ */ React9.createElement(Toolbar, {
+  }, /* @__PURE__ */ React10.createElement(Toolbar, {
     disableGutters: true,
     sx: {
       paddingX: 2
     }
-  }, /* @__PURE__ */ React9.createElement(Typography2, {
+  }, /* @__PURE__ */ React10.createElement(Typography2, {
     noWrap: true,
     variant: "h6",
     letterSpacing: "-1px"
-  }, title)), /* @__PURE__ */ React9.createElement(FlexGrowRow, null), /* @__PURE__ */ React9.createElement(Toolbar, {
+  }, title)), /* @__PURE__ */ React10.createElement(FlexGrowRow, null), /* @__PURE__ */ React10.createElement(Toolbar, {
     disableGutters: true,
     sx: {
       paddingX: 2
     }
-  }, /* @__PURE__ */ React9.createElement(IconButton, {
+  }, /* @__PURE__ */ React10.createElement(IconButton, {
     onClick: openDebug,
     sx: {
       display: {
@@ -2088,7 +2128,7 @@ var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
         xs: "flex"
       }
     }
-  }, /* @__PURE__ */ React9.createElement(BugReport, null)), /* @__PURE__ */ React9.createElement(Tooltip, {
+  }, /* @__PURE__ */ React10.createElement(BugReport, null)), /* @__PURE__ */ React10.createElement(Tooltip, {
     title: "Toggle Light/Dark Mode",
     sx: {
       display: {
@@ -2096,7 +2136,7 @@ var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
         xs: "flex"
       }
     }
-  }, /* @__PURE__ */ React9.createElement(Box, null, /* @__PURE__ */ React9.createElement(ColorSchemeButton, null))), /* @__PURE__ */ React9.createElement(Divider, {
+  }, /* @__PURE__ */ React10.createElement(Box, null, /* @__PURE__ */ React10.createElement(ColorSchemeButton, null))), /* @__PURE__ */ React10.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
     sx: {
@@ -2106,19 +2146,19 @@ var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
       },
       m: 1
     }
-  }), /* @__PURE__ */ React9.createElement(Tooltip, {
+  }), /* @__PURE__ */ React10.createElement(Tooltip, {
     title: "Minimize"
-  }, /* @__PURE__ */ React9.createElement(IconButton, {
+  }, /* @__PURE__ */ React10.createElement(IconButton, {
     onClick: /* @__PURE__ */ __name(async () => await sendIntent?.(DappIntentCaller5.buildIntent(DappIntentCaller5.OsDappName, DappIntentTypes9.Minimize, name)), "onClick")
-  }, /* @__PURE__ */ React9.createElement(RemoveRounded, {
+  }, /* @__PURE__ */ React10.createElement(RemoveRounded, {
     htmlColor: "inherit"
-  }))), /* @__PURE__ */ React9.createElement(Tooltip, {
+  }))), /* @__PURE__ */ React10.createElement(Tooltip, {
     title: "Close"
-  }, /* @__PURE__ */ React9.createElement(IconButton, {
+  }, /* @__PURE__ */ React10.createElement(IconButton, {
     onClick: /* @__PURE__ */ __name(async () => await sendIntent?.(DappIntentCaller5.buildIntent(DappIntentCaller5.OsDappName, DappIntentTypes9.Close, name)), "onClick")
-  }, /* @__PURE__ */ React9.createElement(CloseRounded, {
+  }, /* @__PURE__ */ React10.createElement(CloseRounded, {
     htmlColor: "inherit"
-  })))), /* @__PURE__ */ React9.createElement(DebugDialogWithNode, {
+  })))), /* @__PURE__ */ React10.createElement(DebugDialogWithNode, {
     closeDebug,
     debugOpen,
     context
@@ -2128,20 +2168,20 @@ var DappBar = /* @__PURE__ */ __name(({ title, context, name, ...props }) => {
 // src/modules/Dapp/modules/Window/Chrome.tsx
 import { useMediaQuery } from "@mui/material";
 import { FlexCol as FlexCol4, FlexGrowCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React10 from "react";
+import React11 from "react";
 var DappChromeSmall = /* @__PURE__ */ __name(({ appBar, children, screenMenu, splashScreen, ...props }) => {
-  return /* @__PURE__ */ React10.createElement(FlexCol4, {
+  return /* @__PURE__ */ React11.createElement(FlexCol4, {
     alignItems: "stretch",
     id: "dapp-chrome-container-small",
     ...props
-  }, splashScreen, /* @__PURE__ */ React10.createElement(FlexGrowCol, {
+  }, splashScreen, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     alignItems: "stretch",
     id: "dapp-chrome-small",
     justifyContent: "start",
     sx: {
       background: /* @__PURE__ */ __name((theme) => theme.palette.background.default, "background")
     }
-  }, appBar, /* @__PURE__ */ React10.createElement(FlexGrowCol, {
+  }, appBar, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     sx: {
       overflowY: "auto"
     },
@@ -2149,18 +2189,18 @@ var DappChromeSmall = /* @__PURE__ */ __name(({ appBar, children, screenMenu, sp
   }, children), screenMenu));
 }, "DappChromeSmall");
 var DappChromeLarge = /* @__PURE__ */ __name(({ appBar, children, screenMenu, splashScreen, ...props }) => {
-  return /* @__PURE__ */ React10.createElement(FlexRow2, {
+  return /* @__PURE__ */ React11.createElement(FlexRow2, {
     alignItems: "stretch",
     id: "dapp-chrome-container-large",
     ...props
-  }, splashScreen, screenMenu, /* @__PURE__ */ React10.createElement(FlexGrowCol, {
+  }, splashScreen, screenMenu, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     alignItems: "stretch",
     id: "dapp-chrome-large",
     justifyContent: "start",
     sx: {
       background: /* @__PURE__ */ __name((theme) => theme.palette.background.default, "background")
     }
-  }, appBar, /* @__PURE__ */ React10.createElement(FlexGrowCol, {
+  }, appBar, /* @__PURE__ */ React11.createElement(FlexGrowCol, {
     sx: {
       overflowY: "auto"
     },
@@ -2170,10 +2210,10 @@ var DappChromeLarge = /* @__PURE__ */ __name(({ appBar, children, screenMenu, sp
 }, "DappChromeLarge");
 var DappChrome = /* @__PURE__ */ __name(({ largeScreenMenu, smallScreenMenu, ...props }) => {
   const isMedium = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  return isMedium ? /* @__PURE__ */ React10.createElement(DappChromeLarge, {
+  return isMedium ? /* @__PURE__ */ React11.createElement(DappChromeLarge, {
     screenMenu: largeScreenMenu,
     ...props
-  }) : /* @__PURE__ */ React10.createElement(DappChromeSmall, {
+  }) : /* @__PURE__ */ React11.createElement(DappChromeSmall, {
     screenMenu: smallScreenMenu,
     ...props
   });
@@ -2182,14 +2222,14 @@ var DappChrome = /* @__PURE__ */ __name(({ largeScreenMenu, smallScreenMenu, ...
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/DefaultComingSoon.tsx
 import { alpha as alpha2, Card as Card2, CardContent as CardContent2, Chip, Container, Divider as Divider2, Typography as Typography4, useTheme as useTheme4 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol3, FlexRow as FlexRow5 } from "@xylabs/react-flexbox";
-import React14 from "react";
+import React15 from "react";
 
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/InstallButtonSection.tsx
-import { ButtonEx as ButtonEx3 } from "@xylabs/react-button";
+import { ButtonEx as ButtonEx4 } from "@xylabs/react-button";
 import { FlexRow as FlexRow3 } from "@xylabs/react-flexbox";
-import React11 from "react";
+import React12 from "react";
 var InstallButtonSection = /* @__PURE__ */ __name(({ installLink = "", notificationLink = "https://xyo.network/newsletter", ...props }) => {
-  return /* @__PURE__ */ React11.createElement(FlexRow3, {
+  return /* @__PURE__ */ React12.createElement(FlexRow3, {
     width: "100%",
     gap: 1,
     sx: {
@@ -2200,12 +2240,12 @@ var InstallButtonSection = /* @__PURE__ */ __name(({ installLink = "", notificat
       }
     },
     ...props
-  }, /* @__PURE__ */ React11.createElement(ButtonEx3, {
+  }, /* @__PURE__ */ React12.createElement(ButtonEx4, {
     fullWidth: true,
     variant: "contained",
     disabled: true,
     href: installLink
-  }, "Install"), /* @__PURE__ */ React11.createElement(ButtonEx3, {
+  }, "Install"), /* @__PURE__ */ React12.createElement(ButtonEx4, {
     fullWidth: true,
     variant: "outlined",
     href: notificationLink,
@@ -2217,16 +2257,16 @@ var InstallButtonSection = /* @__PURE__ */ __name(({ installLink = "", notificat
 import { VerifiedRounded } from "@mui/icons-material";
 import { Card, CardContent, Typography as Typography3, useTheme as useTheme3 } from "@mui/material";
 import { FlexGrowCol as FlexGrowCol2, FlexGrowRow as FlexGrowRow3, FlexRow as FlexRow4 } from "@xylabs/react-flexbox";
-import React13 from "react";
+import React14 from "react";
 
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/DeveloperLinkSection.tsx
 import { useTheme as useTheme2 } from "@mui/material";
 import { FlexGrowRow as FlexGrowRow2 } from "@xylabs/react-flexbox";
 import { LinkEx } from "@xylabs/react-link";
-import React12 from "react";
+import React13 from "react";
 var DeveloperLinkSection = /* @__PURE__ */ __name(({ developerLink = "https://xylabs.com", ...props }) => {
   const theme = useTheme2();
-  return /* @__PURE__ */ React12.createElement(FlexGrowRow2, {
+  return /* @__PURE__ */ React13.createElement(FlexGrowRow2, {
     gap: 1,
     sx: {
       alignItems: "flex-start",
@@ -2236,7 +2276,7 @@ var DeveloperLinkSection = /* @__PURE__ */ __name(({ developerLink = "https://xy
       }
     },
     ...props
-  }, /* @__PURE__ */ React12.createElement(LinkEx, {
+  }, /* @__PURE__ */ React13.createElement(LinkEx, {
     color: theme.palette.info.main,
     href: developerLink,
     target: "_blank"
@@ -2246,18 +2286,18 @@ var DeveloperLinkSection = /* @__PURE__ */ __name(({ developerLink = "https://xy
 // src/modules/Dapp/modules/Window/components/DefaultComingSoon/SummarySection.tsx
 var SummarySection = /* @__PURE__ */ __name(({ name, dappIconSvg, version = "1.0", developerLink = "https://xylabs.com" }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ React13.createElement(Card, {
+  return /* @__PURE__ */ React14.createElement(Card, {
     sx: {
       width: "100%"
     }
-  }, /* @__PURE__ */ React13.createElement(CardContent, null, /* @__PURE__ */ React13.createElement(FlexRow4, {
+  }, /* @__PURE__ */ React14.createElement(CardContent, null, /* @__PURE__ */ React14.createElement(FlexRow4, {
     gap: 3,
     alignItems: "flex-start",
     sx: {
       flexDirection: "column",
       width: "100%"
     }
-  }, /* @__PURE__ */ React13.createElement(FlexGrowRow3, {
+  }, /* @__PURE__ */ React14.createElement(FlexGrowRow3, {
     sx: {
       gap: {
         md: 2,
@@ -2265,16 +2305,16 @@ var SummarySection = /* @__PURE__ */ __name(({ name, dappIconSvg, version = "1.0
       }
     },
     alignItems: "flex-start"
-  }, /* @__PURE__ */ React13.createElement(Card, {
+  }, /* @__PURE__ */ React14.createElement(Card, {
     elevation: 0,
     variant: "outlined"
-  }, /* @__PURE__ */ React13.createElement(CardContent, null, dappIconSvg ? /* @__PURE__ */ React13.createElement(RenderHtml, {
+  }, /* @__PURE__ */ React14.createElement(CardContent, null, dappIconSvg ? /* @__PURE__ */ React14.createElement(RenderHtml, {
     htmlString: dappIconSvg
-  }) : null)), /* @__PURE__ */ React13.createElement(FlexGrowCol2, {
+  }) : null)), /* @__PURE__ */ React14.createElement(FlexGrowCol2, {
     alignItems: "flex-start"
-  }, /* @__PURE__ */ React13.createElement(FlexGrowCol2, {
+  }, /* @__PURE__ */ React14.createElement(FlexGrowCol2, {
     alignItems: "flex-start"
-  }, /* @__PURE__ */ React13.createElement(Typography3, {
+  }, /* @__PURE__ */ React14.createElement(Typography3, {
     sx: {
       fontSize: {
         md: theme.typography.h1.fontSize,
@@ -2282,20 +2322,20 @@ var SummarySection = /* @__PURE__ */ __name(({ name, dappIconSvg, version = "1.0
       }
     },
     fontWeight: theme.typography.fontWeightBold
-  }, name), /* @__PURE__ */ React13.createElement(Typography3, {
+  }, name), /* @__PURE__ */ React14.createElement(Typography3, {
     gutterBottom: true,
     variant: "subtitle2"
-  }, "Version:", " ", version)), /* @__PURE__ */ React13.createElement(FlexGrowRow3, {
+  }, "Version:", " ", version)), /* @__PURE__ */ React14.createElement(FlexGrowRow3, {
     gap: 0.5,
     alignItems: "center",
     justifyContent: "center"
-  }, /* @__PURE__ */ React13.createElement(VerifiedRounded, {
+  }, /* @__PURE__ */ React14.createElement(VerifiedRounded, {
     color: "success",
     fontSize: "small"
-  }), /* @__PURE__ */ React13.createElement(Typography3, {
+  }), /* @__PURE__ */ React14.createElement(Typography3, {
     variant: "body1",
     color: theme.palette.success.main
-  }, "XY Labs")), developerLink ? /* @__PURE__ */ React13.createElement(DeveloperLinkSection, {
+  }, "XY Labs")), developerLink ? /* @__PURE__ */ React14.createElement(DeveloperLinkSection, {
     developerLink
   }) : null)))));
 }, "SummarySection");
@@ -2306,7 +2346,7 @@ var defaultDescription = [
 ];
 var DefaultComingSoon = /* @__PURE__ */ __name(({ children, desc = defaultDescription, developerLink = "https://xylabs.com", name, dappIconSvg, version }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ React14.createElement(Container, {
+  return /* @__PURE__ */ React15.createElement(Container, {
     maxWidth: "md",
     sx: {
       minHeight: "100%",
@@ -2314,40 +2354,40 @@ var DefaultComingSoon = /* @__PURE__ */ __name(({ children, desc = defaultDescri
       paddingTop: 2,
       width: "100%"
     }
-  }, version ? null : /* @__PURE__ */ React14.createElement(FlexRow5, {
+  }, version ? null : /* @__PURE__ */ React15.createElement(FlexRow5, {
     width: "100%",
     paddingBottom: 2
-  }, /* @__PURE__ */ React14.createElement(Chip, {
+  }, /* @__PURE__ */ React15.createElement(Chip, {
     label: "This app is not yet publicly available on xyOS",
     sx: {
       backgroundColor: alpha2(theme.palette.info.main, 0.2),
       color: theme.palette.info.main,
       width: "100%"
     }
-  })), /* @__PURE__ */ React14.createElement(FlexGrowCol3, {
+  })), /* @__PURE__ */ React15.createElement(FlexGrowCol3, {
     width: "100%",
     alignItems: "flex-start",
     minHeight: "100%"
-  }, /* @__PURE__ */ React14.createElement(FlexGrowCol3, {
+  }, /* @__PURE__ */ React15.createElement(FlexGrowCol3, {
     width: "100%",
     alignItems: "stretch",
     justifyContent: "flex-start",
     gap: 2
-  }, /* @__PURE__ */ React14.createElement(SummarySection, {
+  }, /* @__PURE__ */ React15.createElement(SummarySection, {
     dappIconSvg,
     name,
     version,
     developerLink
-  }), /* @__PURE__ */ React14.createElement(InstallButtonSection, null), /* @__PURE__ */ React14.createElement(Divider2, {
+  }), /* @__PURE__ */ React15.createElement(InstallButtonSection, null), /* @__PURE__ */ React15.createElement(Divider2, {
     flexItem: true
-  }), /* @__PURE__ */ React14.createElement(Card2, null, /* @__PURE__ */ React14.createElement(CardContent2, null, /* @__PURE__ */ React14.createElement(FlexGrowCol3, {
+  }), /* @__PURE__ */ React15.createElement(Card2, null, /* @__PURE__ */ React15.createElement(CardContent2, null, /* @__PURE__ */ React15.createElement(FlexGrowCol3, {
     justifyContent: "flex-start",
     alignItems: "flex-start"
-  }, /* @__PURE__ */ React14.createElement(Typography4, {
+  }, /* @__PURE__ */ React15.createElement(Typography4, {
     variant: "h6",
     gutterBottom: true
   }, "Learn more about", " ", name), desc?.map((paragraph, index) => {
-    return /* @__PURE__ */ React14.createElement(Typography4, {
+    return /* @__PURE__ */ React15.createElement(Typography4, {
       gutterBottom: true,
       paddingBottom: 1,
       key: index,
@@ -2359,10 +2399,10 @@ var DefaultComingSoon = /* @__PURE__ */ __name(({ children, desc = defaultDescri
 // src/modules/Dapp/modules/Window/components/menu/BottomNavigation.tsx
 import { BottomNavigation, BottomNavigationAction, Paper, styled as styled2 } from "@mui/material";
 import { useIsDark } from "@xylabs/react-theme";
-import React15, { useEffect as useEffect14, useState as useState13 } from "react";
+import React16, { useEffect as useEffect15, useState as useState13 } from "react";
 var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, menuItems, onPathChange, ...props }) => {
   const [activeIndex, setActiveIndex] = useState13(0);
-  useEffect14(() => {
+  useEffect15(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       setActiveIndex(menuItems.findIndex((item) => activePath === item.path));
     }
@@ -2371,23 +2411,23 @@ var DappBottomNavigation = /* @__PURE__ */ __name(({ activePath, menuConfig, men
     menuConfig,
     menuItems
   ]);
-  return /* @__PURE__ */ React15.createElement(Paper, {
+  return /* @__PURE__ */ React16.createElement(Paper, {
     elevation: 3
-  }, /* @__PURE__ */ React15.createElement(BottomNavigation, {
+  }, /* @__PURE__ */ React16.createElement(BottomNavigation, {
     value: activeIndex,
     onChange: /* @__PURE__ */ __name((_, value) => {
       setActiveIndex(value);
-      const to = menuItems?.[value].path;
-      if (to) onPathChange?.(to);
+      const to2 = menuItems?.[value].path;
+      if (to2) onPathChange?.(to2);
     }, "onChange"),
     showLabels: true,
     ...props
   }, menuItems?.map(({ svgIcon: icon, primaryText }, index) => {
-    return /* @__PURE__ */ React15.createElement(StyledBottomNavigationAction, {
+    return /* @__PURE__ */ React16.createElement(StyledBottomNavigationAction, {
       className: "bottom-nav-action",
       key: index,
       label: primaryText,
-      icon: /* @__PURE__ */ React15.createElement("span", {
+      icon: /* @__PURE__ */ React16.createElement("span", {
         ref: /* @__PURE__ */ __name((ref) => {
           if (ref) {
             ref.innerHTML = icon ?? "";
@@ -2413,7 +2453,7 @@ import { alpha as alpha3, darken, Drawer, List, ListItem, ListItemIcon, ListItem
 import { FlexCol as FlexCol6, FlexGrowRow as FlexGrowRow4, FlexRow as FlexRow7 } from "@xylabs/react-flexbox";
 import { useIsDark as useIsDark2 } from "@xylabs/react-theme";
 import { XyOsMonitor as XyOsMonitor3 } from "@xyo-network/os-runtime";
-import React18, { useEffect as useEffect15, useState as useState15 } from "react";
+import React19, { useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/modules/Dapp/modules/Window/components/menu/BottomMenuArea.tsx
 import { BugReport as BugReport2, KeyboardArrowDownRounded, KeyboardArrowUpRounded } from "@mui/icons-material";
@@ -2422,7 +2462,7 @@ import { RotationAnimation } from "@xylabs/react-animation";
 import { FlexCol as FlexCol5, FlexRow as FlexRow6 } from "@xylabs/react-flexbox";
 import { LinkEx as LinkEx2 } from "@xylabs/react-link";
 import { ColorSchemeButton as ColorSchemeButton2 } from "@xylabs/react-theme";
-import React17, { useState as useState14 } from "react";
+import React18, { useState as useState14 } from "react";
 
 // src/modules/Dapp/modules/Window/components/menu/img/index.ts
 import { default as default20 } from "./xyoOS-Icon-Black-ACSS4SEQ.svg";
@@ -2430,11 +2470,11 @@ import { default as default21 } from "./xyoOS-Icon-White-47MP66MD.svg";
 
 // src/modules/Dapp/modules/Window/components/menu/SocialData.tsx
 import { Facebook, Instagram, LinkedIn, Reddit, StorefrontRounded, Telegram, X, YouTube } from "@mui/icons-material";
-import React16 from "react";
+import React17 from "react";
 import { FaDiscord } from "react-icons/fa";
 var socialLinksData = [
   {
-    icon: /* @__PURE__ */ React16.createElement(Facebook, {
+    icon: /* @__PURE__ */ React17.createElement(Facebook, {
       style: {
         fontSize: "24px"
       }
@@ -2442,7 +2482,7 @@ var socialLinksData = [
     link: "https://www.facebook.com/OfficialXYO"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(X, {
+    icon: /* @__PURE__ */ React17.createElement(X, {
       style: {
         fontSize: "24px"
       }
@@ -2450,7 +2490,7 @@ var socialLinksData = [
     link: "https://twitter.com/OfficialXYO"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(Instagram, {
+    icon: /* @__PURE__ */ React17.createElement(Instagram, {
       style: {
         fontSize: "24px"
       }
@@ -2458,7 +2498,7 @@ var socialLinksData = [
     link: "https://www.instagram.com/officialxyo/"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(Telegram, {
+    icon: /* @__PURE__ */ React17.createElement(Telegram, {
       style: {
         fontSize: "24px"
       }
@@ -2466,7 +2506,7 @@ var socialLinksData = [
     link: "https://t.me/xyonetwork"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(Reddit, {
+    icon: /* @__PURE__ */ React17.createElement(Reddit, {
       style: {
         fontSize: "24px"
       }
@@ -2474,7 +2514,7 @@ var socialLinksData = [
     link: "https://www.reddit.com/r/XYONetwork/"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(YouTube, {
+    icon: /* @__PURE__ */ React17.createElement(YouTube, {
       style: {
         fontSize: "24px"
       }
@@ -2482,7 +2522,7 @@ var socialLinksData = [
     link: "https://www.youtube.com/channel/UCyZDqb9pgntVHJVt1pxXtsw"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(LinkedIn, {
+    icon: /* @__PURE__ */ React17.createElement(LinkedIn, {
       style: {
         fontSize: "24px"
       }
@@ -2490,7 +2530,7 @@ var socialLinksData = [
     link: "https://www.linkedin.com/company/officialxyo/"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(FaDiscord, {
+    icon: /* @__PURE__ */ React17.createElement(FaDiscord, {
       style: {
         fontSize: "24px"
       }
@@ -2498,7 +2538,7 @@ var socialLinksData = [
     link: "https://discord.gg/officialxyo"
   },
   {
-    icon: /* @__PURE__ */ React16.createElement(StorefrontRounded, {
+    icon: /* @__PURE__ */ React17.createElement(StorefrontRounded, {
       style: {
         fontSize: "24px"
       }
@@ -2514,7 +2554,7 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
   const handleExpandClick = /* @__PURE__ */ __name(() => {
     setExpanded(!expanded);
   }, "handleExpandClick");
-  return /* @__PURE__ */ React17.createElement(Card3, {
+  return /* @__PURE__ */ React18.createElement(Card3, {
     sx: {
       position: "relative",
       borderTopLeftRadius: "10px",
@@ -2525,10 +2565,10 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       overflow: "hidden"
     },
     elevation: 4
-  }, /* @__PURE__ */ React17.createElement(FlexCol5, {
+  }, /* @__PURE__ */ React18.createElement(FlexCol5, {
     paddingY: 1,
     alignItems: "stretch"
-  }, /* @__PURE__ */ React17.createElement(Stack, {
+  }, /* @__PURE__ */ React18.createElement(Stack, {
     paddingX: 2,
     justifyContent: "space-between",
     flexDirection: "row",
@@ -2538,17 +2578,17 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       textTransform: "none",
       cursor: "pointer"
     }
-  }, /* @__PURE__ */ React17.createElement(Typography5, {
+  }, /* @__PURE__ */ React18.createElement(Typography5, {
     gutterBottom: false
-  }, "More"), expanded ? /* @__PURE__ */ React17.createElement(KeyboardArrowUpRounded, {
+  }, "More"), expanded ? /* @__PURE__ */ React18.createElement(KeyboardArrowUpRounded, {
     sx: {
       color: "#fff"
     }
-  }) : /* @__PURE__ */ React17.createElement(KeyboardArrowDownRounded, {
+  }) : /* @__PURE__ */ React18.createElement(KeyboardArrowDownRounded, {
     sx: {
       color: "#fff"
     }
-  }))), /* @__PURE__ */ React17.createElement(Collapse, {
+  }))), /* @__PURE__ */ React18.createElement(Collapse, {
     in: expanded,
     timeout: "auto",
     unmountOnExit: true,
@@ -2556,42 +2596,42 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
       paddingBottom: 3,
       color: "#fff"
     }
-  }, /* @__PURE__ */ React17.createElement(Divider3, {
+  }, /* @__PURE__ */ React18.createElement(Divider3, {
     flexItem: true
-  }), /* @__PURE__ */ React17.createElement(FlexCol5, {
+  }), /* @__PURE__ */ React18.createElement(FlexCol5, {
     alignItems: "center"
-  }, /* @__PURE__ */ React17.createElement(Toolbar2, {
+  }, /* @__PURE__ */ React18.createElement(Toolbar2, {
     sx: {
       paddingX: 1.5
     }
-  }, /* @__PURE__ */ React17.createElement(Tooltip2, {
+  }, /* @__PURE__ */ React18.createElement(Tooltip2, {
     title: "Debug Node View"
-  }, /* @__PURE__ */ React17.createElement(IconButton2, {
+  }, /* @__PURE__ */ React18.createElement(IconButton2, {
     onClick: openDebug,
     sx: {
       color: "#fff"
     }
-  }, /* @__PURE__ */ React17.createElement(BugReport2, null))), /* @__PURE__ */ React17.createElement(Tooltip2, {
+  }, /* @__PURE__ */ React18.createElement(BugReport2, null))), /* @__PURE__ */ React18.createElement(Tooltip2, {
     title: "Toggle Light/Dark Mode"
-  }, /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement(ColorSchemeButton2, null)))), /* @__PURE__ */ React17.createElement(FlexRow6, {
+  }, /* @__PURE__ */ React18.createElement("span", null, /* @__PURE__ */ React18.createElement(ColorSchemeButton2, null)))), /* @__PURE__ */ React18.createElement(FlexRow6, {
     flexWrap: "wrap"
-  }, socialLinksData.map((social) => /* @__PURE__ */ React17.createElement(RotationAnimation, {
+  }, socialLinksData.map((social) => /* @__PURE__ */ React18.createElement(RotationAnimation, {
     key: social.link,
     rotation: 20
-  }, /* @__PURE__ */ React17.createElement(IconButton2, {
+  }, /* @__PURE__ */ React18.createElement(IconButton2, {
     sx: {
       color: "#fff"
     },
     href: social.link,
     target: "_blank"
-  }, social.icon)))), /* @__PURE__ */ React17.createElement(FlexRow6, {
+  }, social.icon)))), /* @__PURE__ */ React18.createElement(FlexRow6, {
     padding: 1,
     justifyContent: "center",
     gap: 0.5
-  }, /* @__PURE__ */ React17.createElement(Typography5, {
+  }, /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "body2",
     color: theme.palette.text.primary
-  }, "Powered By"), /* @__PURE__ */ React17.createElement("img", {
+  }, "Powered By"), /* @__PURE__ */ React18.createElement("img", {
     style: {
       color: theme.palette.text.primary,
       fill: theme.palette.text.primary
@@ -2599,29 +2639,29 @@ var BottomMenuArea = /* @__PURE__ */ __name(({ openDebug, backgroundColor }) =>
     src: default21,
     width: "auto",
     height: "20px"
-  })), /* @__PURE__ */ React17.createElement(Typography5, {
+  })), /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "caption",
     color: theme.palette.text.primary
-  }, "Copyright \xA9 2024 XY Labs, Inc."), /* @__PURE__ */ React17.createElement(Stack, {
+  }, "Copyright \xA9 2024 XY Labs, Inc."), /* @__PURE__ */ React18.createElement(Stack, {
     gap: 0.5,
     flexDirection: "row"
-  }, /* @__PURE__ */ React17.createElement(LinkEx2, {
+  }, /* @__PURE__ */ React18.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xylabs.com/privacy/"
-  }, /* @__PURE__ */ React17.createElement(Typography5, {
+  }, /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "caption"
-  }, "Privacy")), " ", "\u2022", " ", /* @__PURE__ */ React17.createElement(LinkEx2, {
+  }, "Privacy")), " ", "\u2022", " ", /* @__PURE__ */ React18.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xylabs.com/terms/"
-  }, /* @__PURE__ */ React17.createElement(Typography5, {
+  }, /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "caption"
-  }, "Terms")), " ", "\u2022", " ", /* @__PURE__ */ React17.createElement(LinkEx2, {
+  }, "Terms")), " ", "\u2022", " ", /* @__PURE__ */ React18.createElement(LinkEx2, {
     color: "inherit",
     target: "_blank",
     href: "https://xyo.network/"
-  }, /* @__PURE__ */ React17.createElement(Typography5, {
+  }, /* @__PURE__ */ React18.createElement(Typography5, {
     variant: "caption"
   }, "XYO Website"))))));
 }, "BottomMenuArea");
@@ -2670,7 +2710,7 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
   const theme = useTheme6();
   const drawerColor = darkMode ? theme.palette.background.paper : darken(theme.palette.primary.main, 0.5);
   const activeColor = theme.palette.primary.light;
-  useEffect15(() => {
+  useEffect16(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       const newPath = menuItems.find((item) => activePath === item.path)?.path ?? "";
       setPath(newPath);
@@ -2680,15 +2720,15 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     menuConfig,
     menuItems
   ]);
-  const handleChange = /* @__PURE__ */ __name((to) => {
+  const handleChange = /* @__PURE__ */ __name((to2) => {
     XyOsMonitor3.trackEvent("Visit dApp Page", {
-      Page: to
+      Page: to2
     });
-    setPath(to);
-    onPathChange?.(to);
+    setPath(to2);
+    onPathChange?.(to2);
   }, "handleChange");
   const { closeDebug, debugOpen, openDebug } = useDebugClick();
-  return /* @__PURE__ */ React18.createElement(Drawer, {
+  return /* @__PURE__ */ React19.createElement(Drawer, {
     variant: "permanent",
     anchor: "left",
     PaperProps: {
@@ -2702,18 +2742,18 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
       width: "280px"
     },
     ...props
-  }, /* @__PURE__ */ React18.createElement(FlexCol6, {
+  }, /* @__PURE__ */ React19.createElement(FlexCol6, {
     alignItems: "stretch",
     justifyContent: "space-between",
     height: "100dvh"
-  }, /* @__PURE__ */ React18.createElement(FlexCol6, {
+  }, /* @__PURE__ */ React19.createElement(FlexCol6, {
     alignItems: "stretch",
     justifyContent: "flex-start",
     flexGrow: 1,
     overflow: "auto"
-  }, /* @__PURE__ */ React18.createElement(Tooltip3, {
+  }, /* @__PURE__ */ React19.createElement(Tooltip3, {
     title: version
-  }, /* @__PURE__ */ React18.createElement(FlexGrowRow4, {
+  }, /* @__PURE__ */ React19.createElement(FlexGrowRow4, {
     id: "dapp-name-and-icon",
     padding: 2,
     justifyContent: "flex-start",
@@ -2724,31 +2764,31 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     flexGrow: 0
   }, iconSvg ? RenderHtml({
     htmlString: iconSvg
-  }) : null, /* @__PURE__ */ React18.createElement(Typography6, {
+  }) : null, /* @__PURE__ */ React19.createElement(Typography6, {
     noWrap: true,
     variant: "h6",
     letterSpacing: "-1px"
-  }, name))), /* @__PURE__ */ React18.createElement(DebugDialogWithNode, {
+  }, name))), /* @__PURE__ */ React19.createElement(DebugDialogWithNode, {
     closeDebug,
     debugOpen,
     context
-  }), /* @__PURE__ */ React18.createElement(List, {
+  }), /* @__PURE__ */ React19.createElement(List, {
     sx: {
       p: 0,
       overflow: "auto"
     }
-  }, menuItems?.map(({ svgIcon: icon, primaryText, path: pathFromPayload }) => /* @__PURE__ */ React18.createElement(ListItem, {
+  }, menuItems?.map(({ svgIcon: icon, primaryText, path: pathFromPayload }) => /* @__PURE__ */ React19.createElement(ListItem, {
     key: primaryText,
     disablePadding: true,
     sx: {
       paddingBottom: 1
     }
-  }, /* @__PURE__ */ React18.createElement(StyledListItemButton, {
+  }, /* @__PURE__ */ React19.createElement(StyledListItemButton, {
     onClick: /* @__PURE__ */ __name(() => handleChange(pathFromPayload), "onClick"),
     active: pathFromPayload === path,
     disableRipple: true,
     disableTouchRipple: true
-  }, /* @__PURE__ */ React18.createElement(FlexRow7, {
+  }, /* @__PURE__ */ React19.createElement(FlexRow7, {
     flexGrow: 1,
     paddingX: 2,
     paddingY: 0.5,
@@ -2758,18 +2798,18 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
       },
       "borderRadius": "10px"
     }
-  }, /* @__PURE__ */ React18.createElement(ListItemIcon, {
+  }, /* @__PURE__ */ React19.createElement(ListItemIcon, {
     sx: {
       color: pathFromPayload === path ? activeColor : alpha3("#fff", 0.3),
       justifyContent: "center"
     }
-  }, /* @__PURE__ */ React18.createElement(StyledMenuIconWrapSpan, {
+  }, /* @__PURE__ */ React19.createElement(StyledMenuIconWrapSpan, {
     ref: /* @__PURE__ */ __name((ref) => {
       if (ref) {
         ref.innerHTML = icon ?? "";
       }
     }, "ref")
-  })), /* @__PURE__ */ React18.createElement(ListItemText, {
+  })), /* @__PURE__ */ React19.createElement(ListItemText, {
     primaryTypographyProps: {
       fontWeight: path === pathFromPayload ? "bold" : "inherit",
       color: pathFromPayload === path ? "inherit" : alpha3(theme.palette.text.primary, 0.5)
@@ -2778,7 +2818,7 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
     style: {
       opacity: pathFromPayload === path ? 1 : 0.5
     }
-  }))))))), /* @__PURE__ */ React18.createElement(BottomMenuArea, {
+  }))))))), /* @__PURE__ */ React19.createElement(BottomMenuArea, {
     openDebug,
     backgroundColor: theme.palette.primary.dark
   })));
@@ -2787,14 +2827,14 @@ var DappMenuDrawer = /* @__PURE__ */ __name(({ activePath, context, iconSvg, nam
 // src/modules/Dapp/modules/Window/DappWindow.tsx
 import { Snackbar } from "@mui/material";
 import { ErrorBoundary, ErrorRender as ErrorRender3 } from "@xylabs/react-error";
-import React20, { useMemo as useMemo13 } from "react";
+import React21, { useMemo as useMemo13 } from "react";
 
 // src/modules/Dapp/modules/Window/MetaTags.tsx
 import { NameTransforms as NameTransforms4 } from "@xyo-network/os-runtime";
-import React19 from "react";
+import React20 from "react";
 import { Helmet } from "react-helmet";
 var DappMetaTags = /* @__PURE__ */ __name(({ active, activePath, dappName }) => {
-  return active ? /* @__PURE__ */ React19.createElement(Helmet, null, /* @__PURE__ */ React19.createElement("title", null, activePath ? `${new NameTransforms4(activePath).deSlug()} | ` : "", " ", dappName, " ", "dApp")) : null;
+  return active ? /* @__PURE__ */ React20.createElement(Helmet, null, /* @__PURE__ */ React20.createElement("title", null, activePath ? `${new NameTransforms4(activePath).deSlug()} | ` : "", " ", dappName, " ", "dApp")) : null;
 }, "DappMetaTags");
 
 // src/modules/Dapp/modules/Window/DappWindow.tsx
@@ -2811,14 +2851,14 @@ var DappWindow = /* @__PURE__ */ __name(({ children, context, dapp, dappMenuProp
     injectableErrors,
     routingError
   ]);
-  return /* @__PURE__ */ React20.createElement(ErrorBoundary, null, /* @__PURE__ */ React20.createElement(DappMetaTags, {
+  return /* @__PURE__ */ React21.createElement(ErrorBoundary, null, /* @__PURE__ */ React21.createElement(DappMetaTags, {
     active,
     activePath: dappMenuProperties?.activePath,
     dappName: name
-  }), resolvedErrors.map((error) => /* @__PURE__ */ React20.createElement(Snackbar, {
+  }), resolvedErrors.map((error) => /* @__PURE__ */ React21.createElement(Snackbar, {
     key: error?.message,
     open: !!error,
-    message: /* @__PURE__ */ React20.createElement(ErrorRender3, {
+    message: /* @__PURE__ */ React21.createElement(ErrorRender3, {
       error,
       scope: "DappWindow"
     })
@@ -2831,16 +2871,16 @@ import { FlexCol as FlexCol9 } 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 React24 from "react";
+import React25 from "react";
 
 // src/modules/Dapp/modules/Window/LoadingFlexbox.tsx
 import { Fade, styled as styled4, Typography as Typography7 } from "@mui/material";
 import { FlexCol as FlexCol8 } from "@xylabs/react-flexbox";
-import React23, { useEffect as useEffect16, useState as useState17 } from "react";
+import React24, { useEffect as useEffect17, useState as useState17 } from "react";
 
 // src/modules/LoadingOsLogo/LoadingOsLogo.tsx
 import { FlexCol as FlexCol7 } from "@xylabs/react-flexbox";
-import React21, { useState as useState16 } from "react";
+import React22, { useState as useState16 } from "react";
 
 // src/modules/LoadingOsLogo/img/index.ts
 import { default as default22 } from "./xyoOS-Icon-2Q4XCUPP.svg";
@@ -2853,7 +2893,7 @@ var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecon
     img.addEventListener("load", () => setImageLoaded(true));
     img.src = default22;
   }
-  return imageLoaded ? /* @__PURE__ */ React21.createElement(FlexCol7, {
+  return imageLoaded ? /* @__PURE__ */ React22.createElement(FlexCol7, {
     sx: {
       "@keyframes fadeOut": {
         "0%": {
@@ -2871,7 +2911,7 @@ var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecon
       "animationFillMode": "both"
     },
     ...props
-  }, /* @__PURE__ */ React21.createElement(FlexCol7, {
+  }, /* @__PURE__ */ React22.createElement(FlexCol7, {
     sx: {
       "@keyframes spin": {
         "0%": {
@@ -2885,7 +2925,7 @@ var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecon
       "animationDirection": "reverse"
     },
     ...props
-  }, /* @__PURE__ */ React21.createElement("img", {
+  }, /* @__PURE__ */ React22.createElement("img", {
     src: default22,
     height: widthInPixels ?? 22
   }))) : null;
@@ -2893,9 +2933,9 @@ var LoadingOsLogo = /* @__PURE__ */ __name(({ widthInPixels, busy, spinsPerSecon
 
 // src/modules/Dapp/modules/Window/Trail.tsx
 import { a, useTrail } from "@react-spring/web";
-import React22 from "react";
+import React23 from "react";
 var TextTrail = /* @__PURE__ */ __name(({ open, children }) => {
-  const items = React22.Children.toArray(children);
+  const items = React23.Children.toArray(children);
   const trail = useTrail(items.length, {
     config: {
       friction: 200,
@@ -2911,10 +2951,10 @@ var TextTrail = /* @__PURE__ */ __name(({ open, children }) => {
     opacity: open ? 1 : 0,
     y: open ? 0 : 60
   });
-  return /* @__PURE__ */ React22.createElement("div", null, trail.map(({ height, ...style }, index) => /* @__PURE__ */ React22.createElement(a.div, {
+  return /* @__PURE__ */ React23.createElement("div", null, trail.map(({ height, ...style }, index) => /* @__PURE__ */ React23.createElement(a.div, {
     key: index,
     style
-  }, /* @__PURE__ */ React22.createElement(a.div, {
+  }, /* @__PURE__ */ React23.createElement(a.div, {
     style: {
       height
     }
@@ -2926,7 +2966,7 @@ var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...prop
   const [fadeIn, setFadeIn] = useState17(!open);
   const [trail, setTrail] = useState17(false);
   const skipLoadingScreen = useSkipLoadingScreen();
-  useEffect16(() => {
+  useEffect17(() => {
     if (open) {
       if (skipLoadingScreen) {
         setFadeIn(false);
@@ -2954,17 +2994,17 @@ var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...prop
     open,
     skipLoadingScreen
   ]);
-  return /* @__PURE__ */ React23.createElement(Fade, {
+  return /* @__PURE__ */ React24.createElement(Fade, {
     in: fadeIn,
     unmountOnExit: true
-  }, /* @__PURE__ */ React23.createElement(StyledSplashContainer, props, /* @__PURE__ */ React23.createElement(LoadingOsLogo, {
+  }, /* @__PURE__ */ React24.createElement(StyledSplashContainer, props, /* @__PURE__ */ React24.createElement(LoadingOsLogo, {
     widthInPixels: 100,
     busy: true,
     position: "absolute"
-  }), /* @__PURE__ */ React23.createElement(TextTrail, {
+  }), /* @__PURE__ */ React24.createElement(TextTrail, {
     open: trail,
     flexDirection: "row"
-  }, /* @__PURE__ */ React23.createElement(Typography7, {
+  }, /* @__PURE__ */ React24.createElement(Typography7, {
     textAlign: "center",
     sx: {
       fontSize: {
@@ -2972,7 +3012,7 @@ var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...prop
         xs: "2em"
       }
     }
-  }, "Loading"), /* @__PURE__ */ React23.createElement(Typography7, {
+  }, "Loading"), /* @__PURE__ */ React24.createElement(Typography7, {
     textAlign: "center",
     sx: {
       fontSize: {
@@ -2980,7 +3020,7 @@ var DappLoadingFlexbox = /* @__PURE__ */ __name(({ minimize, open, name, ...prop
         xs: "2em"
       }
     }
-  }, name), /* @__PURE__ */ React23.createElement(Typography7, {
+  }, name), /* @__PURE__ */ React24.createElement(Typography7, {
     textAlign: "center",
     sx: {
       fontSize: {
@@ -3011,9 +3051,9 @@ var DappRendered = /* @__PURE__ */ __name(({ context, dapp, dappMenuProperties,
   const { DappComponent, name, scrollable = true, version } = useDecomposeDapp(dapp);
   const { active, minimized } = dappState ?? {};
   const hasErrors = errors && errors.length > 0;
-  return /* @__PURE__ */ React24.createElement(DappChrome, {
+  return /* @__PURE__ */ React25.createElement(DappChrome, {
     /* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */
-    appBar: /* @__PURE__ */ React24.createElement(DappBar, {
+    appBar: /* @__PURE__ */ React25.createElement(DappBar, {
       context,
       name,
       version,
@@ -3021,37 +3061,37 @@ var DappRendered = /* @__PURE__ */ __name(({ context, dapp, dappMenuProperties,
     }),
     height: "100dvh",
     width: "100dvw",
-    largeScreenMenu: active && /* @__PURE__ */ React24.createElement(DappMenuDrawer, {
+    largeScreenMenu: active && /* @__PURE__ */ React25.createElement(DappMenuDrawer, {
       context,
       name,
       version,
       ...dappMenuProperties
     }),
-    smallScreenMenu: active && /* @__PURE__ */ React24.createElement(DappBottomNavigation, {
+    smallScreenMenu: active && /* @__PURE__ */ React25.createElement(DappBottomNavigation, {
       ...dappMenuProperties,
       sx: {
         display: dappMenuProperties?.menuConfig ? "flex" : "none"
       }
     }),
     /* Ensure that loading goes away when error occurs */
-    splashScreen: hasErrors ? null : /* @__PURE__ */ React24.createElement(DappLoadingFlexbox, {
+    splashScreen: hasErrors ? null : /* @__PURE__ */ React25.createElement(DappLoadingFlexbox, {
       minimize: !!minimized,
       name,
       open: !!active
     })
-  }, hasErrors ? /* @__PURE__ */ React24.createElement(FlexCol9, {
+  }, hasErrors ? /* @__PURE__ */ React25.createElement(FlexCol9, {
     padding: 2
-  }, errors?.map((error) => /* @__PURE__ */ React24.createElement(ErrorRender4, {
+  }, errors?.map((error) => /* @__PURE__ */ React25.createElement(ErrorRender4, {
     key: error?.message,
     error,
     scope: "DappWindow"
-  }))) : null, /* @__PURE__ */ React24.createElement(WalletProvider, {
+  }))) : null, /* @__PURE__ */ React25.createElement(WalletProvider, {
     rootWallet: dappWallet
-  }, context === null ? null : /* @__PURE__ */ React24.createElement(XyOsUiContextProvider, {
+  }, context === null ? null : /* @__PURE__ */ React25.createElement(XyOsUiContextProvider, {
     value: context
-  }, /* @__PURE__ */ React24.createElement(NodeProvider2, {
+  }, /* @__PURE__ */ React25.createElement(NodeProvider2, {
     node: context?.root
-  }, active ? /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(FlexCol9, {
+  }, active ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(FlexCol9, {
     position: "absolute",
     top: 0,
     left: 0,
@@ -3062,9 +3102,9 @@ var DappRendered = /* @__PURE__ */ __name(({ context, dapp, dappMenuProperties,
     sx: {
       overflowY: scrollable ? "auto" : "hidden"
     }
-  }, /* @__PURE__ */ React24.createElement(DappComponent, {
+  }, /* @__PURE__ */ React25.createElement(DappComponent, {
     name: dapp?.config.name
-  })), /* @__PURE__ */ React24.createElement(DappAccessFlexbox, {
+  })), /* @__PURE__ */ React25.createElement(DappAccessFlexbox, {
     context
   })) : null))));
 }, "DappRendered");
@@ -3103,21 +3143,21 @@ var DappContainer = /* @__PURE__ */ __name(({ currentIntent, dappSet, xnsNodeUrl
     dappWallet,
     errors
   ]);
-  return /* @__PURE__ */ React25.createElement(DappIconButton, {
+  return /* @__PURE__ */ React26.createElement(DappIconButton, {
     dappIcon,
     dappIconSvg: dapp.params.iconSvg,
     dappName: dapp?.config.name,
     dappState
-  }, /* @__PURE__ */ React25.createElement(DappWindow, dappWindowProps, /* @__PURE__ */ React25.createElement(DappRendered, dappWindowProps)));
+  }, /* @__PURE__ */ React26.createElement(DappWindow, dappWindowProps, /* @__PURE__ */ React26.createElement(DappRendered, dappWindowProps)));
 }, "DappContainer");
 var DappContainerMemo = /* @__PURE__ */ memo(DappContainer);
 
 // src/modules/Dapp/ContainerFlexbox.tsx
 import { Container as Container2 } from "@mui/material";
 import { FlexCol as FlexCol10 } from "@xylabs/react-flexbox";
-import React26 from "react";
+import React27 from "react";
 var ContainerFlexbox = /* @__PURE__ */ __name(({ children, containerProps, scrollable = true, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(FlexCol10, {
+  return /* @__PURE__ */ React27.createElement(FlexCol10, {
     id: "container-flexbox",
     alignItems: "center",
     justifyContent: "start",
@@ -3126,7 +3166,7 @@ var ContainerFlexbox = /* @__PURE__ */ __name(({ children, containerProps, scrol
     gap: 2,
     overflow: scrollable ? "auto" : "unset",
     ...props
-  }, /* @__PURE__ */ React26.createElement(Container2, containerProps, children));
+  }, /* @__PURE__ */ React27.createElement(Container2, containerProps, children));
 }, "ContainerFlexbox");
 
 // src/modules/Dapp/Page/DappPage.tsx
@@ -3139,7 +3179,7 @@ import React31 from "react";
 import { SignalCellularAltOutlined } from "@mui/icons-material";
 import { Tooltip as Tooltip4, useTheme as useTheme7 } from "@mui/material";
 import { useIsDark as useIsDark3 } from "@xylabs/react-theme";
-import React27, { useMemo as useMemo17 } from "react";
+import React28, { useMemo as useMemo17 } from "react";
 
 // src/modules/network/hooks/useOsNetwork.tsx
 import { OsPubSubNetworkReadyEvent } from "@xyo-network/os-runtime";
@@ -3255,9 +3295,9 @@ var StyledNetworkLoadingIndicator = styled5("div", {
 }));
 
 // src/modules/network/components/LoadingIndicator.tsx
-var WaitingForNetwork = /* @__PURE__ */ __name(() => /* @__PURE__ */ React27.createElement(Tooltip4, {
+var WaitingForNetwork = /* @__PURE__ */ __name(() => /* @__PURE__ */ React28.createElement(Tooltip4, {
   title: "Waiting for Network initialization"
-}, /* @__PURE__ */ React27.createElement(StyledNetworkLoadingIndicator, null)), "WaitingForNetwork");
+}, /* @__PURE__ */ React28.createElement(StyledNetworkLoadingIndicator, null)), "WaitingForNetwork");
 var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
   const darkMode = useIsDark3();
   const theme = useTheme7();
@@ -3269,15 +3309,15 @@ var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
   const NetworkComponent = useMemo17(() => {
     if (networkReady) {
       const connectionReady = true;
-      return connectionReady ? () => /* @__PURE__ */ React27.createElement(Tooltip4, {
+      return connectionReady ? () => /* @__PURE__ */ React28.createElement(Tooltip4, {
         title: "Connected to Network"
-      }, /* @__PURE__ */ React27.createElement(SignalCellularAltOutlined, {
+      }, /* @__PURE__ */ React28.createElement(SignalCellularAltOutlined, {
         sx: {
           color: successColor
         }
-      })) : () => /* @__PURE__ */ React27.createElement(Tooltip4, {
+      })) : () => /* @__PURE__ */ React28.createElement(Tooltip4, {
         title: "Error Connecting to Network"
-      }, /* @__PURE__ */ React27.createElement(SignalCellularAltOutlined, {
+      }, /* @__PURE__ */ React28.createElement(SignalCellularAltOutlined, {
         sx: {
           color: errorColor
         }
@@ -3290,18 +3330,18 @@ var NetworkLoadingIndicator = /* @__PURE__ */ __name(({ highContrast }) => {
     networkReady,
     successColor
   ]);
-  return /* @__PURE__ */ React27.createElement(NetworkComponent, null);
+  return /* @__PURE__ */ React28.createElement(NetworkComponent, null);
 }, "NetworkLoadingIndicator");
 
 // src/modules/network/components/NetworkButton.tsx
 import { NotInterested } from "@mui/icons-material";
 import { Button as Button2 } from "@mui/material";
-import React28 from "react";
+import React29 from "react";
 var NetworkButton = /* @__PURE__ */ __name(({ disabled, startIcon, ...props }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ React28.createElement(Button2, {
+  return /* @__PURE__ */ React29.createElement(Button2, {
     disabled: disabled || !networkReady,
-    startIcon: /* @__PURE__ */ React28.createElement(React28.Fragment, null, startIcon, networkReady === false ? /* @__PURE__ */ React28.createElement(NotInterested, null) : null),
+    startIcon: /* @__PURE__ */ React29.createElement(React29.Fragment, null, startIcon, networkReady === false ? /* @__PURE__ */ React29.createElement(NotInterested, null) : null),
     ...props
   });
 }, "NetworkButton");
@@ -3309,60 +3349,20 @@ var NetworkButton = /* @__PURE__ */ __name(({ disabled, startIcon, ...props }) =
 // src/modules/network/components/NetworkReady.tsx
 import { Typography as Typography8 } from "@mui/material";
 import { FlexCol as FlexCol11 } from "@xylabs/react-flexbox";
-import React29 from "react";
+import React30 from "react";
 var NetworkReadyFlexBox = /* @__PURE__ */ __name(({ children, skipCheck, ...props }) => {
   const { networkReady } = useOsNetwork();
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, networkReady || skipCheck ? children : /* @__PURE__ */ React29.createElement(FlexCol11, {
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, networkReady || skipCheck ? children : /* @__PURE__ */ React30.createElement(FlexCol11, {
     height: "100%",
     ...props
-  }, /* @__PURE__ */ React29.createElement(LoadingOsLogo, {
+  }, /* @__PURE__ */ React30.createElement(LoadingOsLogo, {
     widthInPixels: 100,
     busy: true
-  }), /* @__PURE__ */ React29.createElement(Typography8, {
+  }), /* @__PURE__ */ React30.createElement(Typography8, {
     fontFamily: "monospace"
   }, "Loading XYO Name Service...")));
 }, "NetworkReadyFlexBox");
 
-// src/modules/Dapp/Alert/RenderErrorWithSupportLink.tsx
-import { ButtonEx as ButtonEx4 } from "@xylabs/react-button";
-import { ErrorAlert } from "@xylabs/react-error";
-import React30, { useEffect as useEffect17 } from "react";
-import { useLocation as useLocation2 } from "react-router-dom";
-var ErrorRenderWithSupport = /* @__PURE__ */ __name(({ supportHref = "", supportTo, supportLinkText = "Support", error, onCancel, ...props }) => {
-  const location2 = useLocation2();
-  useEffect17(() => {
-    location2.state = {
-      from: {
-        pathname: globalThis.location.pathname
-      }
-    };
-  }, [
-    location2
-  ]);
-  return /* @__PURE__ */ React30.createElement(ErrorAlert, {
-    action: supportTo ? /* @__PURE__ */ React30.createElement(ButtonEx4, {
-      target: "_blank",
-      to: supportTo,
-      color: "inherit",
-      size: "small"
-    }, supportLinkText) : /* @__PURE__ */ React30.createElement(ButtonEx4, {
-      target: "_blank",
-      href: supportHref,
-      color: "inherit",
-      size: "small"
-    }, supportLinkText),
-    error,
-    onCancel,
-    ...props
-  });
-}, "ErrorRenderWithSupport");
-var ErrorRenderWithSupportDefault = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React30.createElement(ErrorRenderWithSupport, {
-    supportHref: "https://discord.com/channels/935586624392298547/1228436997375393885",
-    ...props
-  });
-}, "ErrorRenderWithSupportDefault");
-
 // src/modules/Dapp/Page/DappPage.tsx
 var DappTitle = /* @__PURE__ */ __name(({ subtitle, title, ...props }) => {
   return title ? /* @__PURE__ */ React31.createElement(FlexCol12, {
@@ -4014,12 +4014,526 @@ var NextIteratorFlexbox = /* @__PURE__ */ __name(({ next: changePage, loading, .
   }, /* @__PURE__ */ React45.createElement(ArrowCircleRightOutlined, null))));
 }, "NextIteratorFlexbox");
 
+// src/modules/widgets/WidgetCard.tsx
+import { ArrowForwardRounded, HistoryRounded, RefreshRounded } from "@mui/icons-material";
+import { alpha as alpha5, Box as Box3, CardContent as CardContent4, IconButton as IconButton4, Tooltip as Tooltip6, Typography as Typography11, useTheme as useTheme9 } from "@mui/material";
+import { ButtonEx as ButtonEx5 } from "@xylabs/react-button";
+import { FlexCol as FlexCol14, FlexGrowRow as FlexGrowRow7, FlexRow as FlexRow9 } from "@xylabs/react-flexbox";
+import { CardEx } from "@xyo-network/react-card";
+import { DateTime } from "luxon";
+import React46 from "react";
+var WidgetCard = /* @__PURE__ */ __name(({ widgetName, widgetContent, widgetPath, timeOfData = 1715875087, ...props }) => {
+  const theme = useTheme9();
+  const formatTimeOfData = /* @__PURE__ */ __name(() => {
+    const timeNow = DateTime.now().toSeconds();
+    const secondsSinceDataRefreshed = timeNow - timeOfData;
+    const getYearsAndMonths = /* @__PURE__ */ __name(() => {
+      const years = Math.floor(secondsSinceDataRefreshed / 31536e3);
+      const months = Math.ceil((secondsSinceDataRefreshed - years * 31536e3) / 2628288);
+      if (months === 12) {
+        return `${years + 1} Years Ago`;
+      } else if (years > 1 && months > 1) {
+        return `${years} Years, ${months} Months Ago`;
+      } else if (years === 1 && months > 1) {
+        return `${years} Year, ${months} Months Ago`;
+      } else if (years > 1 && months === 1) {
+        return `${years} Years, ${months} Month Ago`;
+      } else if (years === 1 && months === 1) {
+        return `${years} Year, ${months} Month Ago`;
+      } else {
+        return `About ${years} Years Ago`;
+      }
+    }, "getYearsAndMonths");
+    if (secondsSinceDataRefreshed < 60) {
+      return "Less than 1 Minute Ago";
+    } else if (secondsSinceDataRefreshed < 3600) {
+      return `${DateTime.fromSeconds(secondsSinceDataRefreshed).toFormat("m")} Minutes Ago`;
+    } else if (secondsSinceDataRefreshed < 86400) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 3600)} Hours Ago`;
+    } else if (secondsSinceDataRefreshed < 2628288) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 86400)} Days Ago`;
+    } else if (secondsSinceDataRefreshed < 31536e3) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 2628288)} Months Ago`;
+    } else {
+      return getYearsAndMonths();
+    }
+  }, "formatTimeOfData");
+  return /* @__PURE__ */ React46.createElement(CardEx, {
+    ...props,
+    sx: {
+      backgroundColor: alpha5(theme.palette.background.paper, 0.4),
+      display: "flex",
+      height: "300px",
+      width: "300px"
+    }
+  }, /* @__PURE__ */ React46.createElement(CardContent4, {
+    sx: {
+      height: "100%",
+      padding: 1
+    }
+  }, /* @__PURE__ */ React46.createElement(FlexCol14, {
+    sx: {
+      alignItems: "stretch",
+      height: "100%",
+      justifyContent: "space-between"
+    }
+  }, /* @__PURE__ */ React46.createElement(FlexCol14, {
+    alignItems: "stretch"
+  }, /* @__PURE__ */ React46.createElement(FlexGrowRow7, {
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, /* @__PURE__ */ React46.createElement(Typography11, {
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
+    variant: "h6"
+  }, widgetName), /* @__PURE__ */ React46.createElement(IconButton4, null, /* @__PURE__ */ React46.createElement(RefreshRounded, null))), /* @__PURE__ */ React46.createElement(Box3, {
+    paddingY: 2
+  }, widgetContent)), /* @__PURE__ */ React46.createElement(FlexRow9, {
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, /* @__PURE__ */ React46.createElement(Tooltip6, {
+    title: DateTime.fromSeconds(timeOfData).toFormat("DD ttt")
+  }, /* @__PURE__ */ React46.createElement(FlexRow9, {
+    gap: 0.5,
+    sx: {
+      opacity: 0.5
+    }
+  }, /* @__PURE__ */ React46.createElement(HistoryRounded, {
+    fontSize: "small",
+    color: "inherit"
+  }), /* @__PURE__ */ React46.createElement(Typography11, {
+    variant: "body2"
+  }, formatTimeOfData()))), /* @__PURE__ */ React46.createElement(ButtonEx5, {
+    size: "small",
+    to: widgetPath
+  }, /* @__PURE__ */ React46.createElement(ArrowForwardRounded, {
+    fontSize: "small"
+  }))))));
+}, "WidgetCard");
+
+// src/modules/widgets/WidgetCardExamples.tsx
+import { Stack as Stack2 } from "@mui/material";
+import { useIsDark as useIsDark4 } from "@xylabs/react-theme";
+import React54 from "react";
+
+// src/modules/widgets/StackOfWidgets.tsx
+import { alpha as alpha8, Box as Box4, useTheme as useTheme11 } from "@mui/material";
+import { animated as animated4, to as interpolate, useSprings } from "@react-spring/web";
+import React53, { useState as useState22 } from "react";
+import { useDrag } from "react-use-gesture";
+
+// src/modules/widgets/Types/BarGraph/HorizontalBarGraph.tsx
+import { Typography as Typography12 } from "@mui/material";
+import { FlexCol as FlexCol15, FlexGrowRow as FlexGrowRow8 } from "@xylabs/react-flexbox";
+import React47 from "react";
+
+// src/modules/widgets/Types/BarGraph/StyledLinearProgress.tsx
+import { alpha as alpha6, LinearProgress as LinearProgress2, styled as styled8 } from "@mui/material";
+var StyledLinearProgress = styled8(LinearProgress2, {
+  name: "StyledLinearProgress"
+})(({ theme }) => ({
+  "& .MuiLinearProgress-bar": {
+    borderRadius: theme.shape.borderRadius
+  },
+  "MozBoxSizing": "border-box",
+  "WebkitBoxSizing": "border-box",
+  "background": "transparent",
+  "borderBottom": `1px solid ${alpha6(theme.palette.text.secondary, 0.3)}`,
+  "boxSizing": "border-box",
+  "height": theme.spacing(0.25)
+}));
+
+// src/modules/widgets/Types/BarGraph/HorizontalBarGraph.tsx
+var sampleData = [
+  {
+    name: "United States",
+    value: 134
+  },
+  {
+    name: "South Africa",
+    value: 400
+  },
+  {
+    name: "Canada",
+    value: 382
+  },
+  {
+    name: "Philippines",
+    value: 423
+  },
+  {
+    name: "Denmark",
+    value: 123
+  },
+  {
+    name: "Greece",
+    value: 321
+  },
+  {
+    name: "Japan",
+    value: 421
+  }
+];
+var HorizontalBarGraph = /* @__PURE__ */ __name(({ items = sampleData, ...props }) => {
+  const itemsSortedByValue = items.sort(function(a2, b) {
+    const keyA = a2.value, keyB = b.value;
+    if (keyA > keyB) return -1;
+    if (keyA < keyB) return 1;
+    return 0;
+  });
+  console.log(itemsSortedByValue);
+  const topValue = itemsSortedByValue[0].value;
+  return /* @__PURE__ */ React47.createElement(FlexCol15, {
+    alignItems: "stretch",
+    gap: 0.5,
+    ...props
+  }, items.slice(0, 5).map((item, index) => (
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    /* @__PURE__ */ React47.createElement(FlexCol15, {
+      alignItems: "stretch",
+      key: index
+    }, /* @__PURE__ */ React47.createElement(FlexGrowRow8, {
+      justifyContent: "space-between"
+    }, /* @__PURE__ */ React47.createElement(Typography12, {
+      variant: "caption",
+      maxWidth: "50%",
+      noWrap: true
+    }, item.name), /* @__PURE__ */ React47.createElement(Typography12, {
+      variant: "caption",
+      maxWidth: "50%"
+    }, item.value)), /* @__PURE__ */ React47.createElement(StyledLinearProgress, {
+      color: "primary",
+      value: item.value / (topValue * 1.25) * 100,
+      variant: "determinate"
+    }))
+  )));
+}, "HorizontalBarGraph");
+
+// src/modules/widgets/Types/DataColumns/TwoColTwoStat.tsx
+import { Typography as Typography13, useTheme as useTheme10 } from "@mui/material";
+import { FlexCol as FlexCol16, FlexGrowRow as FlexGrowRow9 } from "@xylabs/react-flexbox";
+import React48, { useEffect as useEffect19 } from "react";
+var MAX_LENGTH = 2;
+var validateProps = /* @__PURE__ */ __name((props) => {
+  if (props.length > MAX_LENGTH) {
+    throw new Error(`The length of items for the Two Column Two Stat widget should not exceed ${MAX_LENGTH}`);
+  }
+}, "validateProps");
+var TwoColTwoStat = /* @__PURE__ */ __name(({ items, ...props }) => {
+  const theme = useTheme10();
+  useEffect19(() => {
+    validateProps(items);
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ React48.createElement(FlexGrowRow9, {
+    gap: 2,
+    ...props
+  }, items.map((item, index) => (
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    /* @__PURE__ */ React48.createElement(FlexCol16, {
+      key: `stat-${index}-${item.unit}`,
+      flexGrow: 1,
+      alignItems: "start"
+    }, /* @__PURE__ */ React48.createElement(Typography13, {
+      variant: "h2",
+      fontWeight: theme.typography.fontWeightMedium
+    }, item.rawInsightValue), /* @__PURE__ */ React48.createElement(Typography13, {
+      variant: "body2"
+    }, item.subtitle))
+  )));
+}, "TwoColTwoStat");
+
+// src/modules/widgets/Types/Examples/BarGraph.tsx
+import React49 from "react";
+var ExampleBarGraphWidget = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React49.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React49.createElement(HorizontalBarGraph, null),
+    widgetName: "Friend Locations",
+    timeOfData: 1715713478,
+    widgetPath: "/profile"
+  });
+}, "ExampleBarGraphWidget");
+
+// src/modules/widgets/Types/Examples/BooleanTable.tsx
+import React51 from "react";
+
+// src/modules/widgets/Types/Tables/BooleanTable.tsx
+import { CircleRounded } from "@mui/icons-material";
+import { alpha as alpha7, Paper as Paper2, styled as styled9, TableRow as TableRow2, Typography as Typography14 } from "@mui/material";
+import { FlexCol as FlexCol17, FlexGrowRow as FlexGrowRow10, FlexRow as FlexRow10 } from "@xylabs/react-flexbox";
+import React50 from "react";
+var sampleData2 = [
+  {
+    name: "@arietrouw",
+    value: true
+  },
+  {
+    name: "@officialxyo",
+    value: false
+  },
+  {
+    name: "0x187623121928634124",
+    value: true
+  },
+  {
+    name: "@coinwithus",
+    value: true
+  },
+  {
+    name: "0x871218376123894321",
+    value: true
+  }
+];
+var StyledLightTableRow = styled9(Paper2, {
+  name: "StyledLightTableRow"
+})(({ theme }) => ({
+  backgroundColor: "transparent",
+  padding: theme.spacing(0.75)
+}));
+var StyledTableColumnTitle = styled9(Typography14, {
+  name: "StyledTableColumnTitle"
+})(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontWeight: theme.typography.fontWeightBold,
+  textTransform: "uppercase"
+}));
+var DefaultTrueOutput = styled9(CircleRounded, {
+  name: "DefaultTrueOutput"
+})(({ theme }) => ({
+  fill: theme.palette.success.main,
+  fontSize: "10px"
+}));
+var DefaultFalseOutput = styled9(CircleRounded, {
+  name: "DefaultFalseOutput"
+})(({ theme }) => ({
+  fill: alpha7(theme.palette.text.disabled, 0.5),
+  fontSize: "10px"
+}));
+var defaultTrueOutput = /* @__PURE__ */ React50.createElement(DefaultTrueOutput, null);
+var defaultFalseOutput = /* @__PURE__ */ React50.createElement(DefaultFalseOutput, null);
+var BooleanTable = /* @__PURE__ */ __name(({ items = sampleData2, tableHeaders, trueOutput = defaultTrueOutput, falseOutput = defaultFalseOutput, ...props }) => {
+  return /* @__PURE__ */ React50.createElement(FlexCol17, {
+    alignItems: "stretch",
+    ...props
+  }, /* @__PURE__ */ React50.createElement(FlexRow10, {
+    paddingBottom: 0.5,
+    justifyContent: "space-between"
+  }, tableHeaders.map((name) => /* @__PURE__ */ React50.createElement(StyledTableColumnTitle, {
+    key: name,
+    variant: "caption"
+  }, name))), /* @__PURE__ */ React50.createElement(FlexCol17, {
+    alignItems: "stretch",
+    gap: 0.25
+  }, items.slice(0, 4).map((item, index) => /* @__PURE__ */ React50.createElement(TableRow2, {
+    key: index
+  }, /* @__PURE__ */ React50.createElement(FlexGrowRow10, {
+    flexGrow: 1,
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ React50.createElement(Typography14, {
+    variant: "caption",
+    noWrap: true,
+    maxWidth: "70%"
+  }, item.name), item.value ? trueOutput : falseOutput)))));
+}, "BooleanTable");
+
+// src/modules/widgets/Types/Examples/BooleanTable.tsx
+var ExampleBooleanTableWidget = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React51.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React51.createElement(BooleanTable, {
+      items: [
+        {
+          name: "@arietrouw",
+          value: true
+        },
+        {
+          name: "@officialxyo",
+          value: false
+        },
+        {
+          name: "0x187623121928634124",
+          value: true
+        },
+        {
+          name: "@coinwithus",
+          value: true
+        },
+        {
+          name: "0x871218376123894321",
+          value: true
+        }
+      ],
+      tableHeaders: [
+        "Id",
+        "Online"
+      ]
+    }),
+    widgetName: "Friends",
+    timeOfData: 1715875797,
+    widgetPath: "/profile"
+  });
+}, "ExampleBooleanTableWidget");
+
+// src/modules/widgets/Types/Examples/TwoColTwoStat.tsx
+import React52 from "react";
+var ExampleTwoColTwoStatWidget = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React52.createElement(WidgetCard, {
+    widgetContent: /* @__PURE__ */ React52.createElement(TwoColTwoStat, {
+      items: [
+        {
+          rawInsightValue: 218,
+          subtitle: "Inbound Access Requests",
+          uiInsightValue: 218,
+          unit: "requests"
+        },
+        {
+          rawInsightValue: 18,
+          subtitle: "Outbound Access Requests",
+          uiInsightValue: 18,
+          unit: "requests"
+        }
+      ]
+    }),
+    widgetName: "Network Activity",
+    timeOfData: 1642637397,
+    widgetPath: "/network"
+  });
+}, "ExampleTwoColTwoStatWidget");
+
+// src/modules/widgets/StackOfWidgets.tsx
+var cards = [
+  /* @__PURE__ */ React53.createElement(ExampleBarGraphWidget, {
+    key: "bar-graph"
+  }),
+  /* @__PURE__ */ React53.createElement(ExampleBooleanTableWidget, {
+    key: "boolean-table"
+  }),
+  /* @__PURE__ */ React53.createElement(ExampleTwoColTwoStatWidget, {
+    key: "two-column"
+  })
+];
+var to = /* @__PURE__ */ __name((i) => ({
+  delay: i * 100,
+  rot: -10 + Math.random() * 15,
+  scale: 1,
+  x: 0,
+  y: i * -4
+}), "to");
+var from = /* @__PURE__ */ __name((_i) => ({
+  rot: 0,
+  scale: 1.5,
+  x: 0,
+  y: -1e3
+}), "from");
+var trans = /* @__PURE__ */ __name((r, s) => `perspective(1500px)  rotateY(${r / 10}deg) scale(${s})`, "trans");
+function Deck() {
+  const [gone] = useState22(() => /* @__PURE__ */ new Set());
+  const theme = useTheme11();
+  const [props, api] = useSprings(cards.length, (i) => ({
+    ...to(i),
+    from: from(i)
+  }));
+  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
+    const trigger = velocity > 0.2;
+    const dir = xDir < 0 ? -1 : 1;
+    if (!down && trigger) gone.add(index);
+    api.start((i) => {
+      if (index !== i) return;
+      const isGone = gone.has(index);
+      const x = isGone ? (200 + globalThis.innerWidth) * dir : down ? mx : 0;
+      const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0);
+      const scale = down ? 1.1 : 1;
+      return {
+        config: {
+          friction: 50,
+          tension: down ? 800 : isGone ? 200 : 500
+        },
+        delay: void 0,
+        rot,
+        scale,
+        x
+      };
+    });
+    if (!down && gone.size === cards.length) setTimeout(() => {
+      gone.clear();
+      api.start((i) => to(i));
+    }, 600);
+  });
+  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, props.map(({ x, y, rot, scale }, i) => /* @__PURE__ */ React53.createElement(animated4.div, {
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    key: i,
+    style: {
+      alignItems: "center",
+      display: "flex",
+      height: "300px",
+      justifyContent: "center",
+      position: "absolute",
+      touchAction: "none",
+      width: "300px",
+      willChange: "transform",
+      x,
+      y
+    }
+  }, /* @__PURE__ */ React53.createElement(animated4.div, {
+    ...bind(i),
+    style: {
+      // WebkitBackdropFilter: 'blur(10px)',
+      // backdropFilter: 'blur(10px)',
+      backgroundColor: alpha8(theme.palette.background.paper, 0.2),
+      backgroundPosition: "center center",
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "auto 85%",
+      borderRadius: " 10px",
+      boxShadow: theme.shadows[7],
+      height: "85vh",
+      maxHeight: "300px",
+      maxWidth: "300px",
+      transform: interpolate([
+        rot,
+        scale
+      ], trans),
+      width: "45vh",
+      willChange: "transform"
+    }
+  }, cards[i]))));
+}
+__name(Deck, "Deck");
+var StackOfWidgets = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React53.createElement(Box4, {
+    sx: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex",
+      height: "300px",
+      justifyContent: "center",
+      width: "300px"
+    }
+  }, /* @__PURE__ */ React53.createElement(Deck, null));
+}, "StackOfWidgets");
+
+// src/modules/widgets/WidgetCardExamples.tsx
+var WidgetCardExamples = /* @__PURE__ */ __name(() => {
+  const darkMode = useIsDark4();
+  return /* @__PURE__ */ React54.createElement(DappPage, {
+    sx: {
+      backgroundImage: darkMode ? `url(${default18})` : `url(${default19})`,
+      backgroundSize: "cover"
+    },
+    container: "xl",
+    title: "Example Widget Cards"
+  }, /* @__PURE__ */ React54.createElement(Stack2, {
+    gap: 2,
+    flexDirection: "row",
+    flexWrap: "wrap"
+  }, /* @__PURE__ */ React54.createElement(ExampleTwoColTwoStatWidget, null), /* @__PURE__ */ React54.createElement(ExampleBarGraphWidget, null), /* @__PURE__ */ React54.createElement(ExampleBooleanTableWidget, null), /* @__PURE__ */ React54.createElement(StackOfWidgets, null)));
+}, "WidgetCardExamples");
+
 // src/settings/Theme/ThemeProvider.tsx
 import { ThemeProvider } from "@mui/material";
-import React46, { useMemo as useMemo20 } from "react";
+import React55, { useMemo as useMemo20 } from "react";
 
 // src/settings/Theme/ThemeCssVars.ts
-import { alpha as alpha5, createTheme, darken as darken2, lighten } from "@mui/material";
+import { alpha as alpha9, createTheme, darken as darken2, lighten } from "@mui/material";
 var defaultIconBackground = "#A060E0";
 var defaultIconBackgroundHover = "#bdade8";
 var DynamicIconBgGradientBuilder = {
@@ -4128,7 +4642,7 @@ var ThemeCssVars = createTheme({
         root: /* @__PURE__ */ __name(({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha5(theme.palette.background.paper, 0.2),
+          backgroundColor: alpha9(theme.palette.background.paper, 0.2),
           boxShadow: "none",
           color: "#16163D",
           ...theme.applyStyles("dark", {
@@ -4145,7 +4659,7 @@ var ThemeCssVars = createTheme({
         root: /* @__PURE__ */ __name(({ theme }) => ({
           WebkitBackdropFilter: "blur(20px)",
           backdropFilter: "blur(20px)",
-          backgroundColor: alpha5(theme.palette.background.paper, 0.7),
+          backgroundColor: alpha9(theme.palette.background.paper, 0.7),
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between"
@@ -4320,7 +4834,7 @@ var AppOsThemeProvider = /* @__PURE__ */ __name(({ children }) => {
     if (savedValue && validValues.includes(savedValue)) return savedValue;
     return "system";
   }, []);
-  return /* @__PURE__ */ React46.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React55.createElement(ThemeProvider, {
     theme: ThemeCssVars,
     defaultMode: initialValue
   }, children);
@@ -4357,6 +4871,8 @@ export {
   DebugDialogWithNode,
   DefaultComingSoon,
   EmptyDappBarForPadding,
+  ErrorRenderWithSupport,
+  ErrorRenderWithSupportDefault,
   GenericPayloadDivinerTags,
   LazyDebug,
   LoadingOsLogo,
@@ -4368,6 +4884,7 @@ export {
   OsPalettes,
   PaymentMethods,
   PrimaryCryptoWalletInput,
+  RenderHtml,
   ResourceHooks,
   SecondaryCryptoWalletInput,
   ShiftAnimation,
@@ -4379,6 +4896,8 @@ export {
   TwoToneBulletPoint,
   TwoToneBulletPointList,
   WidgetCaller,
+  WidgetCard,
+  WidgetCardExamples,
   XnsDomainIcon,
   XyOsBrowserMonitor,
   XyOsUi,
@@ -4400,6 +4919,7 @@ export {
   useCleanUpResource,
   useClearIntents,
   useDappAccessRequestResourceViews,
+  useDappCaller,
   useDappContextCreator,
   useDappIntentCaller,
   useDappIntentListener,