@xyo-network/os-react-runtime 2.3.0

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

@@ -0,0 +1,220 @@
+import { BugReport } from '@mui/icons-material'
+import type { DrawerProps } from '@mui/material'
+import {
+  Divider,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  styled,
+  Toolbar,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material'
+import { RotationAnimation } from '@xylabs/react-animation'
+import {
+  FlexCol, FlexGrowRow, FlexRow,
+} from '@xylabs/react-flexbox'
+import { DarkModeIconButtonForColorScheme, useColorSchemeEx } from '@xylabs/react-invertible-theme'
+import { LinkEx } from '@xylabs/react-link'
+import type {
+  DappName, DappNavItem, DappNavMenuConfig, DappVersion, XyOsContext,
+} from '@xyo-network/os-model'
+import { XyOsMonitor } from '@xyo-network/os-runtime'
+import React, { useEffect, useState } from 'react'
+
+import { RenderHtml } from '../../../../../components/index.ts'
+import { useDebugClick } from '../../../../../hooks/index.ts'
+import { DebugDialogWithNode } from '../../../Debug/index.ts'
+// eslint-disable-next-line import-x/no-internal-modules
+import XyoOSLogoBlack from './img/xyoOS-Icon-Black.svg'
+// eslint-disable-next-line import-x/no-internal-modules
+import XyoOSLogoWhite from './img/xyoOS-Icon-White.svg'
+import { socialLinksData } from './SocialData.js'
+
+interface DappMenuDrawerProps extends DrawerProps {
+  activePath?: string
+  context?: XyOsContext | null
+  iconSvg?: string
+  menuConfig?: DappNavMenuConfig
+  menuItems?: DappNavItem[]
+  name?: DappName
+  onPathChange?: (to: string) => void
+  version?: DappVersion
+}
+
+export const DappMenuDrawer: React.FC<DappMenuDrawerProps> = ({
+  activePath,
+  context,
+  iconSvg,
+  name,
+  menuConfig,
+  menuItems,
+  onPathChange,
+  version,
+  ...props
+}) => {
+  const [path, setPath] = useState('')
+  const { darkMode } = useColorSchemeEx()
+  const theme = useTheme()
+  const activeColor = darkMode ? theme.palette.primary.main : theme.palette.secondary.main
+  const logo = darkMode ? XyoOSLogoWhite : XyoOSLogoBlack
+
+  // update based off active path changes
+  useEffect(() => {
+    if (menuConfig?.defaultPath && menuItems && activePath) {
+      const newPath = menuItems.find(item => activePath === item.path)?.path ?? ''
+      setPath(newPath)
+    }
+  }, [activePath, menuConfig, menuItems])
+
+  const handleChange = (to: string) => {
+    XyOsMonitor.trackEvent('Visit dApp Page', { Page: to })
+    setPath(to)
+    onPathChange?.(to)
+  }
+
+  const {
+    closeDebug, debugOpen, openDebug,
+  } = useDebugClick()
+
+  return (
+    <Drawer
+      variant="permanent"
+      anchor="left"
+      PaperProps={{
+        sx: {
+          background: 'transparent', borderRight: 'none', position: 'static',
+        },
+      }}
+      sx={{ borderRight: `solid ${darkMode ? theme.palette.grey[900] : theme.palette.grey[300]}`, maxWidth: '280px' }}
+      {...props}
+    >
+      <FlexCol alignItems="stretch" justifyContent="space-between" height="100dvh">
+        <FlexCol paddingY={1} paddingX={2} alignItems="stretch">
+          <Tooltip title={version}>
+            <FlexGrowRow
+              marginBottom={2}
+              justifyContent="flex-start"
+              gap={1}
+              sx={{ cursor: 'pointer' }}
+            >
+              {iconSvg
+                ? RenderHtml({ htmlString: iconSvg })
+                : null}
+              <Typography noWrap variant="h5" letterSpacing="-1px" fontWeight="300">
+                {name}
+              </Typography>
+            </FlexGrowRow>
+          </Tooltip>
+          <DebugDialogWithNode closeDebug={closeDebug} debugOpen={debugOpen} context={context} />
+          <List sx={{ p: 0 }}>
+            {menuItems?.map(({
+              svgIcon: icon, primaryText, path: pathFromPayload,
+            }) => {
+              return (
+                <ListItem
+                  key={primaryText}
+                  disablePadding
+                  sx={{
+                    // Note: setting color here lets it cascade down to both text and svg elements with fill="currentColor"
+                    // see - https://css-tricks.com/cascading-svg-fill-color/
+                    color: pathFromPayload === path ? activeColor : undefined,
+                  }}
+                >
+                  <ListItemButton onClick={() => handleChange(pathFromPayload)}>
+                    <ListItemIcon sx={{ color: 'inherit' }}>
+                      <StyledMenuIconWrapSpan
+                        ref={(ref) => {
+                          if (ref) {
+                            ref.innerHTML = icon ?? ''
+                          }
+                        }}
+                      >
+                      </StyledMenuIconWrapSpan>
+                    </ListItemIcon>
+                    <ListItemText primary={primaryText} />
+                  </ListItemButton>
+                </ListItem>
+              )
+            })}
+          </List>
+        </FlexCol>
+        <FlexCol>
+          <Divider variant="middle" flexItem />
+          <FlexCol padding={2}>
+            <Toolbar sx={{ paddingX: 1.5 }}>
+              <Tooltip title="Debug Node View">
+                <IconButton onClick={openDebug}>
+                  <BugReport sx={{ color: theme.palette.text.primary }} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Toggle Light/Dark Mode">
+                <span>
+                  <DarkModeIconButtonForColorScheme defaultLightModeColor="warning" />
+                </span>
+              </Tooltip>
+            </Toolbar>
+            <FlexRow flexWrap="wrap">
+              {socialLinksData.map((social, index) => {
+                return (
+                  <RotationAnimation key={index} rotation={20}>
+                    <IconButton
+                      sx={{ color: theme.palette.text.primary }}
+                      href={social.link}
+                      target="_blank"
+                    >
+                      {social.icon}
+                    </IconButton>
+                  </RotationAnimation>
+                )
+              })}
+            </FlexRow>
+            <FlexRow padding={1} justifyContent="center" gap={0.5}>
+              <Typography variant="body2" color={theme.palette.text.primary}>
+                Powered By
+              </Typography>
+              <img
+                style={{ color: theme.palette.text.primary, fill: theme.palette.text.primary }}
+                src={logo}
+                width="auto"
+                height="20px"
+              />
+            </FlexRow>
+            <LinkEx target="_blank" href="https://xylabs.com/">
+              <Typography variant="caption">Copyright © 2024 XY Labs, Inc.</Typography>
+            </LinkEx>
+            <Stack gap={0.5} flexDirection="row">
+              <LinkEx target="_blank" href="https://xylabs.com/privacy/">
+                <Typography variant="caption">Privacy</Typography>
+              </LinkEx>
+              {' '}
+              •
+              {' '}
+              <LinkEx target="_blank" href="https://xylabs.com/terms/">
+                <Typography variant="caption">Terms</Typography>
+              </LinkEx>
+              {' '}
+              •
+              {' '}
+              <LinkEx target="_blank" href="https://xyo.network/">
+                <Typography variant="caption">XYO Website</Typography>
+              </LinkEx>
+            </Stack>
+          </FlexCol>
+        </FlexCol>
+      </FlexCol>
+    </Drawer>
+  )
+}
+
+const StyledMenuIconWrapSpan = styled('span', { name: 'StyledMenuIconWrapSpan' })(() => ({
+  alignItems: 'center',
+  display: 'inline-flex',
+  flexDirection: 'column',
+}))

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

@@ -0,0 +1,71 @@
+import {
+  Facebook, Instagram, LinkedIn, Reddit, StorefrontRounded, Telegram, X, YouTube,
+} from '@mui/icons-material'
+import type { ReactNode } from 'react'
+import React from 'react'
+import {
+  FaDiscord,
+// eslint-disable-next-line import-x/no-internal-modules
+} from 'react-icons/fa'
+
+interface socialLinksDataProps {
+  icon: ReactNode
+  link: string
+}
+
+export const socialLinksData: socialLinksDataProps[] = [
+  {
+    icon: (
+      <Facebook style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://www.facebook.com/OfficialXYO',
+  },
+  {
+    icon: (
+      <X style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://twitter.com/OfficialXYO',
+  },
+  {
+    icon: (
+      <Instagram style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://www.instagram.com/officialxyo/',
+  },
+  {
+    icon: (
+      <Telegram style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://t.me/xyonetwork',
+  },
+  {
+    icon: (
+      <Reddit style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://www.reddit.com/r/XYONetwork/',
+  },
+  {
+    icon: (
+      <YouTube style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://www.youtube.com/channel/UCyZDqb9pgntVHJVt1pxXtsw',
+  },
+  {
+    icon: (
+      <LinkedIn style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://www.linkedin.com/company/officialxyo/',
+  },
+  {
+    icon: (
+      <FaDiscord style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://discord.gg/officialxyo',
+  },
+  {
+    icon: (
+      <StorefrontRounded style={{ fontSize: '24px' }} />
+    ),
+    link: 'https://shop.xyo.network',
+  },
+]

package/src/modules/Dapp/modules/Window/menu/img/xyoOS-Icon-Black.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900"><defs><style>.cls-1{fill:#000;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#a8a8a8;opacity:.21;}</style></defs><path class="cls-2" d="M864.29,297.43c-2.44-6.58-9.76-9.94-16.34-7.5l-143.74,53.26L533.2,21.88c-1.85-3.48-5.21-5.9-9.09-6.56-3.89-.66-7.85.51-10.75,3.18l-267.76,246.55-118-97.86c-5.4-4.48-13.42-3.73-17.9,1.67-4.48,5.4-3.73,13.42,1.67,17.9l118,97.86L36.62,593.37c-2.09,3.34-2.5,7.46-1.14,11.15s4.37,6.54,8.13,7.72l347.4,108.61-25.75,151.12c-1.18,6.92,3.48,13.49,10.4,14.67.24.04.47.07.7.1,6.66.76,12.82-3.81,13.96-10.5l25.75-151.12,363.77,12.56c3.94.14,7.71-1.56,10.22-4.59,2.51-3.03,3.48-7.06,2.62-10.9l-79.64-355.16,143.75-53.26c6.58-2.44,9.94-9.75,7.5-16.34ZM518.49,48.34l156.33,293.75-401.12-68.35,244.79-225.4ZM674.37,367.8l-264.69,319.16-144.06-388.81,408.75,69.65ZM66.9,592.88l176.22-282.26,141.37,381.56-317.59-99.29ZM431.72,700.22l259.75-313.21,72.81,324.69-332.56-11.48Z"/><path class="cls-1" d="M865.04,302.64c.01-.2.02-.4.03-.6,0-.33,0-.66-.03-.99-.01-.2-.02-.39-.04-.58-.04-.35-.1-.71-.17-1.06-.03-.16-.05-.32-.09-.48-.12-.5-.26-1.01-.45-1.5-.18-.49-.4-.97-.64-1.43-.08-.15-.17-.29-.25-.43-.17-.31-.35-.61-.55-.9-.12-.17-.24-.33-.37-.49-.19-.25-.39-.5-.6-.74-.14-.16-.29-.32-.45-.47-.22-.22-.45-.44-.68-.65-.1-.08-.18-.18-.27-.26L530.1,18.07c-.34-.28-.7-.53-1.07-.77-.09-.06-.17-.13-.26-.19-.62-.39-1.26-.7-1.92-.98-.18-.07-.36-.14-.54-.21-.71-.26-1.43-.47-2.16-.6,0,0-.01,0-.02,0,0,0,0,0-.01,0-.67-.11-1.35-.15-2.03-.16-.37,0-.73,0-1.09.03-.23.02-.46.06-.7.09-.86.11-1.69.31-2.5.59-.07.03-.15.04-.23.07l-.32.12c-.2.08-.4.13-.59.22L115.08,165.06c-.11.04-.22.1-.33.15-.3.12-.59.25-.88.39-.19.1-.38.19-.57.3-.27.15-.54.32-.81.5-.17.12-.35.22-.52.35-.27.2-.53.42-.79.64-.14.12-.28.23-.41.35-.35.33-.68.68-1,1.05-.04.05-.08.1-.12.14-.32.38-.6.78-.87,1.2-.09.14-.16.29-.25.43-.18.31-.36.62-.51.94-.08.17-.15.35-.23.53-.13.31-.25.62-.36.93-.06.19-.12.38-.17.57-.09.33-.17.65-.23.98-.02.11-.06.22-.08.33l-72.09,423.12c-.07.43-.11.87-.13,1.3,0,.11-.03.22-.03.33-.03.73.02,1.44.12,2.16.02.19.06.38.09.57.13.74.31,1.48.57,2.19,0,0,0,0,0,0,0,.02.01.03.02.04.2.53.43,1.04.7,1.53.12.22.26.42.38.63.17.28.33.56.52.82.17.23.35.44.54.66.18.22.36.44.56.65.2.21.42.4.63.6.16.14.29.3.46.43l330.39,274c.08.07.17.12.25.18.32.25.65.49.99.71.15.09.29.19.44.28.44.26.9.5,1.37.7.04.02.08.04.12.06.51.21,1.03.39,1.56.53.17.05.35.08.53.12.24.06.47.12.71.16.23.04.46.07.69.1.47.05.95.08,1.42.08.15,0,.3-.02.45-.02.32-.01.65-.02.97-.06.18-.02.36-.06.54-.08.29-.04.58-.09.86-.15.19-.04.38-.1.56-.15.28-.08.55-.16.82-.25.08-.03.15-.04.23-.07l402.48-149.13s.06-.03.09-.04c.39-.15.76-.32,1.13-.51.12-.06.24-.1.35-.16.44-.24.88-.51,1.29-.8.03-.02.06-.04.09-.06.55-.39,1.07-.85,1.56-1.34.83-.82,1.54-1.76,2.11-2.78.09-.17.19-.33.27-.5.32-.64.61-1.3.82-2,.03-.11.05-.22.08-.33.12-.42.23-.84.3-1.27l72.09-423.12c.02-.11.02-.22.03-.33.05-.34.08-.67.1-1.01ZM771.44,701.13l-101.05-83.8,158.61-254.06-57.56,337.86ZM121.2,242.67l65.53,292.26-123.1,45.61,57.57-337.87ZM656.65,591.33l-141.37-381.56,317.59,99.3-176.22,282.26ZM508.76,181.1l22.05-129.41,263.81,218.79-285.86-89.37ZM483.7,176.83l-299.33-10.33L505.75,47.42l-22.05,129.41ZM208.31,514.94l-72.81-324.69,332.56,11.48-259.75,313.21ZM490.1,214.98l144.06,388.81-382.98-65.25-25.77-4.39L490.1,214.98ZM246.9,563.6l379.17,64.6-244.79,225.4-156.33-293.74,21.95,3.74ZM654.16,636.9l101.05,83.8-321.38,119.08,220.33-202.88ZM72.47,604.37l123.1-45.61,140.72,264.4-84.17-69.81-179.65-148.98Z"/></svg>

package/src/modules/Dapp/modules/Window/menu/img/xyoOS-Icon-White.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900"><defs><style>.cls-1{fill:#a8a8a8;opacity:.21;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M864.29,297.43c-2.44-6.58-9.76-9.94-16.34-7.5l-143.74,53.26L533.2,21.88c-1.85-3.48-5.21-5.9-9.09-6.56-3.89-.66-7.85.51-10.75,3.18l-267.76,246.55-118-97.86c-5.4-4.48-13.42-3.73-17.9,1.67-4.48,5.4-3.73,13.42,1.67,17.9l118,97.86L36.62,593.37c-2.09,3.34-2.5,7.46-1.14,11.15s4.37,6.54,8.13,7.72l347.4,108.61-25.75,151.12c-1.18,6.92,3.48,13.49,10.4,14.67.24.04.47.07.7.1,6.66.76,12.82-3.81,13.96-10.5l25.75-151.12,363.77,12.56c3.94.14,7.71-1.56,10.22-4.59,2.51-3.03,3.48-7.06,2.62-10.9l-79.64-355.16,143.75-53.26c6.58-2.44,9.94-9.75,7.5-16.34ZM518.49,48.34l156.33,293.75-401.12-68.35,244.79-225.4ZM674.37,367.8l-264.69,319.16-144.06-388.81,408.75,69.65ZM66.9,592.88l176.22-282.26,141.37,381.56-317.59-99.29ZM431.72,700.22l259.75-313.21,72.81,324.69-332.56-11.48Z"/><path class="cls-2" d="M865.04,302.64c.01-.2.02-.4.03-.6,0-.33,0-.66-.03-.99-.01-.2-.02-.39-.04-.58-.04-.35-.1-.71-.17-1.06-.03-.16-.05-.32-.09-.48-.12-.5-.26-1.01-.45-1.5-.18-.49-.4-.97-.64-1.43-.08-.15-.17-.29-.25-.43-.17-.31-.35-.61-.55-.9-.12-.17-.24-.33-.37-.49-.19-.25-.39-.5-.6-.74-.14-.16-.29-.32-.45-.47-.22-.22-.45-.44-.68-.65-.1-.08-.18-.18-.27-.26L530.1,18.07c-.34-.28-.7-.53-1.07-.77-.09-.06-.17-.13-.26-.19-.62-.39-1.26-.7-1.92-.98-.18-.07-.36-.14-.54-.21-.71-.26-1.43-.47-2.16-.6,0,0-.01,0-.02,0,0,0,0,0-.01,0-.67-.11-1.35-.15-2.03-.16-.37,0-.73,0-1.09.03-.23.02-.46.06-.7.09-.86.11-1.69.31-2.5.59-.07.03-.15.04-.23.07l-.32.12c-.2.08-.4.13-.59.22L115.08,165.06c-.11.04-.22.1-.33.15-.3.12-.59.25-.88.39-.19.1-.38.19-.57.3-.27.15-.54.32-.81.5-.17.12-.35.22-.52.35-.27.2-.53.42-.79.64-.14.12-.28.23-.41.35-.35.33-.68.68-1,1.05-.04.05-.08.1-.12.14-.32.38-.6.78-.87,1.2-.09.14-.16.29-.25.43-.18.31-.36.62-.51.94-.08.17-.15.35-.23.53-.13.31-.25.62-.36.93-.06.19-.12.38-.17.57-.09.33-.17.65-.23.98-.02.11-.06.22-.08.33l-72.09,423.12c-.07.43-.11.87-.13,1.3,0,.11-.03.22-.03.33-.03.73.02,1.44.12,2.16.02.19.06.38.09.57.13.74.31,1.48.57,2.19,0,0,0,0,0,0,0,.02.01.03.02.04.2.53.43,1.04.7,1.53.12.22.26.42.38.63.17.28.33.56.52.82.17.23.35.44.54.66.18.22.36.44.56.65.2.21.42.4.63.6.16.14.29.3.46.43l330.39,274c.08.07.17.12.25.18.32.25.65.49.99.71.15.09.29.19.44.28.44.26.9.5,1.37.7.04.02.08.04.12.06.51.21,1.03.39,1.56.53.17.05.35.08.53.12.24.06.47.12.71.16.23.04.46.07.69.1.47.05.95.08,1.42.08.15,0,.3-.02.45-.02.32-.01.65-.02.97-.06.18-.02.36-.06.54-.08.29-.04.58-.09.86-.15.19-.04.38-.1.56-.15.28-.08.55-.16.82-.25.08-.03.15-.04.23-.07l402.48-149.13s.06-.03.09-.04c.39-.15.76-.32,1.13-.51.12-.06.24-.1.35-.16.44-.24.88-.51,1.29-.8.03-.02.06-.04.09-.06.55-.39,1.07-.85,1.56-1.34.83-.82,1.54-1.76,2.11-2.78.09-.17.19-.33.27-.5.32-.64.61-1.3.82-2,.03-.11.05-.22.08-.33.12-.42.23-.84.3-1.27l72.09-423.12c.02-.11.02-.22.03-.33.05-.34.08-.67.1-1.01ZM771.44,701.13l-101.05-83.8,158.61-254.06-57.56,337.86ZM121.2,242.67l65.53,292.26-123.1,45.61,57.57-337.87ZM656.65,591.33l-141.37-381.56,317.59,99.3-176.22,282.26ZM508.76,181.1l22.05-129.41,263.81,218.79-285.86-89.37ZM483.7,176.83l-299.33-10.33L505.75,47.42l-22.05,129.41ZM208.31,514.94l-72.81-324.69,332.56,11.48-259.75,313.21ZM490.1,214.98l144.06,388.81-382.98-65.25-25.77-4.39L490.1,214.98ZM246.9,563.6l379.17,64.6-244.79,225.4-156.33-293.74,21.95,3.74ZM654.16,636.9l101.05,83.8-321.38,119.08,220.33-202.88ZM72.47,604.37l123.1-45.61,140.72,264.4-84.17-69.81-179.65-148.98Z"/></svg>

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

@@ -0,0 +1,2 @@
+export * from './BottomNavigation.js'
+export * from './Drawer.js'

package/src/modules/Dapp/modules/access-interface/components/Dialog.tsx

@@ -0,0 +1,129 @@
+import { ArrowForward } from '@mui/icons-material'
+import type { DialogProps } from '@mui/material'
+import {
+  Alert,
+  Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography,
+} from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import type {
+  DappAccessRequest, RegisteredDappAccess, XyOsContext,
+} from '@xyo-network/os-model'
+import { RegisteredNames } from '@xyo-network/os-model'
+import { AccessNodeQueries } from '@xyo-network/os-runtime'
+import { ErrorRender } from '@xyo-network/react-error'
+import React, { useState } from 'react'
+
+export interface AccessDialogProps extends DialogProps {
+  accessRequest?: DappAccessRequest
+  dappNode?: XyOsContext | null
+  registeredDappAccess?: RegisteredDappAccess
+}
+
+export const DappAccessDialog: React.FC<AccessDialogProps> = ({
+  accessRequest, children, dappNode, registeredDappAccess, ...props
+}) => {
+  const [error, setError] = useState<Error>()
+  const [noPayloadsInserted, setNoPayloadsInserted] = useState(false)
+
+  const onClose = () => {
+    setNoPayloadsInserted(false)
+    props.onClose?.({}, 'escapeKeyDown')
+  }
+
+  const handleAllow = async () => {
+    if (accessRequest && registeredDappAccess && dappNode) {
+      try {
+        switch (registeredDappAccess.name) {
+          case RegisteredNames: {
+            const accessNodeQueries = new AccessNodeQueries(dappNode, accessRequest, registeredDappAccess)
+            const payloads = await accessNodeQueries.run()
+            if (payloads.length === 0) {
+              setNoPayloadsInserted(true)
+            } else {
+              onClose()
+            }
+            return
+          }
+          default: {
+            const message = `no helper for interface ${registeredDappAccess.name} found`
+            console.error(message)
+            setError(new Error(message))
+          }
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e as Error)
+      }
+    } else {
+      setError(new Error('No registered dapp access or dappNode found'))
+    }
+  }
+
+  return (
+    <Dialog {...props}>
+      <DialogTitle>Message from XYO OS</DialogTitle>
+      <DialogContent
+        dividers
+        sx={{
+          display: 'flex', flexDirection: 'column', gap: 3,
+        }}
+      >
+        <ErrorRender error={error} scope="DappAccessDialog" />
+        <FlexCol gap={1}>
+          <Typography variant="subtitle2">dApp to dApp Access Request</Typography>
+          <FlexRow gap={1}>
+            <Typography fontSize={16}>
+              <strong>{accessRequest?.requestingDappId}</strong>
+&nbsp;
+            </Typography>
+            <ArrowForward />
+            <Typography fontSize={16}>
+              <strong>{registeredDappAccess?.registeringDappId}</strong>
+            </Typography>
+          </FlexRow>
+        </FlexCol>
+      </DialogContent>
+      <DialogContent
+        dividers
+        sx={{
+          display: 'flex', flexDirection: 'column', gap: 3,
+        }}
+      >
+        <FlexCol gap={1}>
+          <Typography>
+            <strong>{accessRequest?.requestingDappId}</strong>
+            {' '}
+            dApp would like to access your
+            <strong>{registeredDappAccess?.name}</strong>
+            {' '}
+            from
+            {' '}
+            <strong>{registeredDappAccess?.registeringDappId}</strong>
+            {' '}
+            dApp
+          </Typography>
+        </FlexCol>
+        {noPayloadsInserted
+          ? (
+              <Alert severity="warning">
+                {registeredDappAccess?.name}
+                {' '}
+                Access Request did not find payloads to insert
+              </Alert>
+            )
+          : null}
+      </DialogContent>
+      {children
+        ? <DialogContent dividers>{children}</DialogContent>
+        : null}
+      <DialogActions>
+        <Button variant="outlined" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={() => { handleAllow().catch(console.error) }}>
+          Allow
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/modules/Dapp/modules/access-interface/components/Flexbox.tsx

@@ -0,0 +1,29 @@
+import type { XyOsContext } from '@xyo-network/os-model'
+import { ErrorRender } from '@xyo-network/react-error'
+import React from 'react'
+
+import { useDialogState } from '../hooks/index.ts'
+import { DappAccessDialog } from './Dialog.js'
+
+export interface DappAccessFlexboxProps {
+  context?: XyOsContext | null
+}
+
+export const DappAccessFlexbox: React.FC<DappAccessFlexboxProps> = ({ context }) => {
+  const {
+    accessRequests, allowAccessDialogError, openAccessDialog, registeredInterface, setOpenAccessDialog,
+  } = useDialogState(context)
+  return (
+    <DappAccessDialog
+      accessRequest={accessRequests?.[0]}
+      dappNode={context}
+      open={openAccessDialog}
+      onClose={() => setOpenAccessDialog(false)}
+      registeredDappAccess={registeredInterface}
+    >
+      {allowAccessDialogError
+        ? <ErrorRender error={allowAccessDialogError} scope="DappAccessFlexbox" />
+        : null}
+    </DappAccessDialog>
+  )
+}

package/src/modules/Dapp/modules/access-interface/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Dialog.js'
+export * from './Flexbox.js'

package/src/modules/Dapp/modules/access-interface/hooks/index.ts

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

package/src/modules/Dapp/modules/access-interface/hooks/useDialogState.tsx

@@ -0,0 +1,28 @@
+import { usePromise } from '@xylabs/react-promise'
+import type { RegisteredDappAccess, XyOsContext } from '@xyo-network/os-model'
+import { isRegisteredDappAccess, RegisteredNames } from '@xyo-network/os-model'
+import type { WithMeta } from '@xyo-network/payload-model'
+import { useState } from 'react'
+
+import { DappAccessRequestResourceHooks, useDappCaller } from '../../../../../hooks/index.ts'
+
+export const useDialogState = (context?: XyOsContext | null) => {
+  const dappCaller = useDappCaller()
+  const { accessRequests } = DappAccessRequestResourceHooks.useResourceViewsFromContext(context)
+  const [openAccessDialog, setOpenAccessDialog] = useState(false)
+  const [registeredInterface, setRegisteredInterface] = useState<WithMeta<RegisteredDappAccess>>()
+
+  const [, allowAccessDialogError] = usePromise(async () => {
+    const accessRequest = accessRequests?.[0]
+    if (accessRequest && context && dappCaller) {
+      setOpenAccessDialog(true)
+      const payload = await dappCaller.getRegisteredDappAccessByName(RegisteredNames)
+
+      setRegisteredInterface(isRegisteredDappAccess(payload) ? payload : undefined)
+    }
+  }, [accessRequests, dappCaller, context])
+
+  return {
+    accessRequests, allowAccessDialogError, openAccessDialog, registeredInterface, setOpenAccessDialog,
+  }
+}

package/src/modules/Dapp/modules/access-interface/index.ts

@@ -0,0 +1,2 @@
+export * from './components/index.ts'
+export * from './hooks/index.ts'

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

@@ -0,0 +1,2 @@
+export * from './access-interface/index.ts'
+export * from './Window/index.ts'

package/src/modules/LoadingOsLogo/LoadingOsLogo.tsx

@@ -0,0 +1,54 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import React, { useState } from 'react'
+
+import { XyoOSIcon } from './img/index.ts'
+
+export type LoadingOsLogoProps = Omit<FlexBoxProps, 'children'> & {
+  busy?: boolean
+  spinsPerSecond?: number
+  widthInPixels?: number
+}
+
+export const LoadingOsLogo: React.FC<LoadingOsLogoProps> = ({
+  widthInPixels, busy, spinsPerSecond = 0.5, ...props
+}) => {
+  // preloading image to prevent shifting
+  const [imageLoaded, setImageLoaded] = useState(false)
+  if (!imageLoaded) {
+    const img = new Image()
+    img.addEventListener('load', () => setImageLoaded(true))
+    img.src = XyoOSIcon
+  }
+  return imageLoaded
+    ? (
+        <FlexCol
+          sx={{
+            '@keyframes fadeOut': {
+              '0%': { opacity: 1 },
+              '100%': { opacity: 0.1 },
+              '35%': { opacity: 1 },
+            },
+            'animation': busy ? 'fadeOut linear' : undefined,
+            'animationDuration': '1500ms',
+            'animationFillMode': 'both',
+          }}
+          {...props}
+        >
+          <FlexCol
+            sx={{
+              '@keyframes spin': {
+                '0%': { transform: 'rotate(360deg)' },
+                '100%': { transform: 'rotate(0deg)' },
+              },
+              'animation': busy ? `spin ${1 / spinsPerSecond}s linear infinite` : undefined,
+              'animationDirection': 'reverse',
+            }}
+            {...props}
+          >
+            <img src={XyoOSIcon} height={widthInPixels ?? 22} />
+          </FlexCol>
+        </FlexCol>
+      )
+    : null
+}

package/src/modules/LoadingOsLogo/img/index.ts

@@ -0,0 +1 @@
+export { default as XyoOSIcon } from './xyoOS-Icon.svg'

package/src/modules/LoadingOsLogo/img/xyoOS-Icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 900"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#a8a8a8;opacity:.21;}</style><linearGradient id="linear-gradient" x1="34.7" y1="450.98" x2="865.07" y2="450.98" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#579fd6"/><stop offset=".52" stop-color="#eb407a"/><stop offset="1" stop-color="#f27046"/></linearGradient></defs><path class="cls-2" d="M864.29,297.43c-2.44-6.58-9.76-9.94-16.34-7.5l-143.74,53.26L533.2,21.88c-1.85-3.48-5.21-5.9-9.09-6.56-3.89-.66-7.85.51-10.75,3.18l-267.76,246.55-118-97.86c-5.4-4.48-13.42-3.73-17.9,1.67-4.48,5.4-3.73,13.42,1.67,17.9l118,97.86L36.62,593.37c-2.09,3.34-2.5,7.46-1.14,11.15s4.37,6.54,8.13,7.72l347.4,108.61-25.75,151.12c-1.18,6.92,3.48,13.49,10.4,14.67.24.04.47.07.7.1,6.66.76,12.82-3.81,13.96-10.5l25.75-151.12,363.77,12.56c3.94.14,7.71-1.56,10.22-4.59,2.51-3.03,3.48-7.06,2.62-10.9l-79.64-355.16,143.75-53.26c6.58-2.44,9.94-9.75,7.5-16.34ZM518.49,48.34l156.33,293.75-401.12-68.35,244.79-225.4ZM674.37,367.8l-264.69,319.16-144.06-388.81,408.75,69.65ZM66.9,592.88l176.22-282.26,141.37,381.56-317.59-99.29ZM431.72,700.22l259.75-313.21,72.81,324.69-332.56-11.48Z"/><path class="cls-1" d="M865.04,302.64c.01-.2.02-.4.03-.6,0-.33,0-.66-.03-.99-.01-.2-.02-.39-.04-.58-.04-.35-.1-.71-.17-1.06-.03-.16-.05-.32-.09-.48-.12-.5-.26-1.01-.45-1.5-.18-.49-.4-.97-.64-1.43-.08-.15-.17-.29-.25-.43-.17-.31-.35-.61-.55-.9-.12-.17-.24-.33-.37-.49-.19-.25-.39-.5-.6-.74-.14-.16-.29-.32-.45-.47-.22-.22-.45-.44-.68-.65-.1-.08-.18-.18-.27-.26L530.1,18.07c-.34-.28-.7-.53-1.07-.77-.09-.06-.17-.13-.26-.19-.62-.39-1.26-.7-1.92-.98-.18-.07-.36-.14-.54-.21-.71-.26-1.43-.47-2.16-.6,0,0-.01,0-.02,0,0,0,0,0-.01,0-.67-.11-1.35-.15-2.03-.16-.37,0-.73,0-1.09.03-.23.02-.46.06-.7.09-.86.11-1.69.31-2.5.59-.07.03-.15.04-.23.07l-.32.12c-.2.08-.4.13-.59.22L115.08,165.06c-.11.04-.22.1-.33.15-.3.12-.59.25-.88.39-.19.1-.38.19-.57.3-.27.15-.54.32-.81.5-.17.12-.35.22-.52.35-.27.2-.53.42-.79.64-.14.12-.28.23-.41.35-.35.33-.68.68-1,1.05-.04.05-.08.1-.12.14-.32.38-.6.78-.87,1.2-.09.14-.16.29-.25.43-.18.31-.36.62-.51.94-.08.17-.15.35-.23.53-.13.31-.25.62-.36.93-.06.19-.12.38-.17.57-.09.33-.17.65-.23.98-.02.11-.06.22-.08.33l-72.09,423.12c-.07.43-.11.87-.13,1.3,0,.11-.03.22-.03.33-.03.73.02,1.44.12,2.16.02.19.06.38.09.57.13.74.31,1.48.57,2.19,0,0,0,0,0,0,0,.02.01.03.02.04.2.53.43,1.04.7,1.53.12.22.26.42.38.63.17.28.33.56.52.82.17.23.35.44.54.66.18.22.36.44.56.65.2.21.42.4.63.6.16.14.29.3.46.43l330.39,274c.08.07.17.12.25.18.32.25.65.49.99.71.15.09.29.19.44.28.44.26.9.5,1.37.7.04.02.08.04.12.06.51.21,1.03.39,1.56.53.17.05.35.08.53.12.24.06.47.12.71.16.23.04.46.07.69.1.47.05.95.08,1.42.08.15,0,.3-.02.45-.02.32-.01.65-.02.97-.06.18-.02.36-.06.54-.08.29-.04.58-.09.86-.15.19-.04.38-.1.56-.15.28-.08.55-.16.82-.25.08-.03.15-.04.23-.07l402.48-149.13s.06-.03.09-.04c.39-.15.76-.32,1.13-.51.12-.06.24-.1.35-.16.44-.24.88-.51,1.29-.8.03-.02.06-.04.09-.06.55-.39,1.07-.85,1.56-1.34.83-.82,1.54-1.76,2.11-2.78.09-.17.19-.33.27-.5.32-.64.61-1.3.82-2,.03-.11.05-.22.08-.33.12-.42.23-.84.3-1.27l72.09-423.12c.02-.11.02-.22.03-.33.05-.34.08-.67.1-1.01ZM771.44,701.13l-101.05-83.8,158.61-254.06-57.56,337.86ZM121.2,242.67l65.53,292.26-123.1,45.61,57.57-337.87ZM656.65,591.33l-141.37-381.56,317.59,99.3-176.22,282.26ZM508.76,181.1l22.05-129.41,263.81,218.79-285.86-89.37ZM483.7,176.83l-299.33-10.33L505.75,47.42l-22.05,129.41ZM208.31,514.94l-72.81-324.69,332.56,11.48-259.75,313.21ZM490.1,214.98l144.06,388.81-382.98-65.25-25.77-4.39L490.1,214.98ZM246.9,563.6l379.17,64.6-244.79,225.4-156.33-293.74,21.95,3.74ZM654.16,636.9l101.05,83.8-321.38,119.08,220.33-202.88ZM72.47,604.37l123.1-45.61,140.72,264.4-84.17-69.81-179.65-148.98Z"/></svg>

package/src/modules/LoadingOsLogo/index.ts

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

package/src/modules/XyOsUi/contexts/XyOsUiContext.ts

@@ -0,0 +1,10 @@
+import type { XyOsUiContext as XyOsUiContextImport } from '@xyo-network/os-react-model'
+import { createContext, useContext } from 'react'
+
+export const XyOsUiContext = createContext<XyOsUiContextImport | undefined>(undefined)
+
+export const useXyOsUiContext = () => {
+  return useContext(XyOsUiContext)
+}
+
+export const XyOsUiContextProvider = XyOsUiContext.Provider

package/src/modules/XyOsUi/contexts/index.ts

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

package/src/modules/XyOsUi/index.ts

@@ -0,0 +1,2 @@
+export * from './contexts/index.ts'
+export * from './lib/index.ts'

package/src/modules/XyOsUi/lib/XyOsUi.ts

@@ -0,0 +1,50 @@
+import { forget } from '@xylabs/forget'
+import { ModuleFactoryLocator } from '@xyo-network/module-factory-locator'
+import type { SplashScreenLoadingMessages, XyOsUiGlobal } from '@xyo-network/os-model'
+import type { ReactDappRegistrationResults, XyOsUiContext } from '@xyo-network/os-react-model'
+import type { XyOsMonitor, XyOsParams } from '@xyo-network/os-runtime'
+import { dappsReadyConnection, XyOs } from '@xyo-network/os-runtime'
+import type { WalletInstance } from '@xyo-network/wallet-model'
+
+import { XyOsBrowserMonitor } from '../../../helpers/index.ts'
+
+export class XyOsUi extends XyOs implements XyOsUiContext {
+  dappRegistrationResults: ReactDappRegistrationResults = { failed: [], succeeded: [] }
+
+  private dappsReadyConnection = dappsReadyConnection()
+
+  constructor(params: XyOsParams) {
+    super(params)
+
+    this.eventBus.addConnection(this.dappsReadyConnection)
+  }
+
+  static override get monitoring(): XyOsMonitor | undefined {
+    return new XyOsBrowserMonitor()
+  }
+
+  static get xyOsUiGlobal(): XyOsUiGlobal {
+    return XyOs.xyOsGlobal as XyOsUiGlobal
+  }
+
+  static hideSplash() {
+    this.xyOsUiGlobal.splashScreen.hideSplash()
+    this.xyOsUiGlobal.splashScreen.onComplete()
+    this.setSplashStatus('complete')
+  }
+
+  static setSplashStatus(status: SplashScreenLoadingMessages) {
+    const statusText = this.xyOsUiGlobal.splashScreen._LOADING_MESSAGES[status]
+    this.xyOsUiGlobal.splashScreen.setStatusText(statusText)
+  }
+
+  override async boot(wallet: WalletInstance, locator = new ModuleFactoryLocator()): Promise<this> {
+    await super.boot(wallet, locator)
+    const registerLazy = async () => {
+      this.dappRegistrationResults = (await this.dappRegistrationService.start()) as ReactDappRegistrationResults
+      await this.dappsReadyConnection.emit('dappsReady', {})
+    }
+    forget(registerLazy())
+    return this
+  }
+}

package/src/modules/XyOsUi/lib/index.ts

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

package/src/modules/index.ts

@@ -0,0 +1,4 @@
+export * from './Dapp/index.ts'
+export * from './LoadingOsLogo/index.ts'
+export * from './network/index.ts'
+export * from './XyOsUi/index.ts'