@xyo-network/os-react-runtime 2.3.0 → 2.3.2

package/src/modules/Dapp/modules/Window/components/DefaultComingSoon/DefaultComingSoon.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @eslint-react/no-array-index-key */
 import {
   alpha, Card, CardContent, Chip, Container, Divider, Typography, useTheme,
 } from '@mui/material'

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

@@ -1,3 +1,4 @@
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 import type { DappName, XyOsContext } from '@xyo-network/os-model'
 import {
   useEffect, useRef, useState,

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

@@ -1,6 +1,7 @@
 import type { XyOsContext } from '@xyo-network/os-model'
 import { DappIntentTypes } from '@xyo-network/os-model'
 
+// eslint-disable-next-line @eslint-react/hooks-extra/no-redundant-custom-hook
 export const useDappState = (intentType?: DappIntentTypes, context?: XyOsContext | null) => {
   const minimized = intentType === DappIntentTypes.Minimize
   const open = intentType === DappIntentTypes.Launch

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

@@ -2,6 +2,7 @@ import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
 
 import { NodeManifest } from '../NodeManifest.js'
 
+// eslint-disable-next-line @eslint-react/hooks-extra/no-redundant-custom-hook
 export const useDecomposeDappSet = (dappSet?: RegisteredReactDappSet) => {
   const { dapp } = dappSet ?? {}
   const DappComponent = dapp?.params.modes?.window?.component ?? NodeManifest

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

@@ -0,0 +1,133 @@
+/* eslint-disable @eslint-react/no-array-index-key */
+import {
+  BugReport, KeyboardArrowDownRounded, KeyboardArrowUpRounded,
+} from '@mui/icons-material'
+import {
+  Card,
+  Collapse,
+  Divider,
+  IconButton,
+  Stack,
+  Toolbar,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material'
+import { RotationAnimation } from '@xylabs/react-animation'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { DarkModeIconButtonForColorScheme } from '@xylabs/react-invertible-theme'
+import { LinkEx } from '@xylabs/react-link'
+import React, { useState } from 'react'
+
+// eslint-disable-next-line import-x/no-internal-modules
+import XyoOSLogoWhite from './img/xyoOS-Icon-White.svg'
+import { socialLinksData } from './SocialData.js'
+
+export interface BottomMenuAreaProps {
+  backgroundColor: string
+  openDebug: () => void
+}
+
+export const BottomMenuArea: React.FC<BottomMenuAreaProps> = ({ openDebug, backgroundColor }) => {
+  const theme = useTheme()
+  const [expanded, setExpanded] = useState(false)
+  const logo = XyoOSLogoWhite
+
+  // Toggle expand/collapse
+  const handleExpandClick = () => {
+    setExpanded(!expanded)
+  }
+
+  return (
+    <Card
+      sx={{
+        position: 'relative',
+        borderTopLeftRadius: '10px',
+        borderTopRightRadius: '10px',
+        borderBottomLeftRadius: '0px',
+        borderBottomRightRadius: '0px',
+        backgroundColor: backgroundColor,
+        overflow: 'hidden',
+      }}
+      elevation={4}
+    >
+      {/* Collapsed View */}
+      <FlexCol paddingY={1} alignItems="stretch">
+        <Stack
+          paddingX={2}
+          justifyContent="space-between"
+          flexDirection="row"
+          gap={0.5}
+          onClick={handleExpandClick}
+          sx={{ textTransform: 'none', cursor: 'pointer' }}
+        >
+          <Typography gutterBottom={false}>More</Typography>
+          {expanded ? <KeyboardArrowUpRounded sx={{ color: '#fff' }} /> : <KeyboardArrowDownRounded sx={{ color: '#fff' }} />}
+        </Stack>
+      </FlexCol>
+      {/* Expanded Content */}
+      <Collapse in={expanded} timeout="auto" unmountOnExit sx={{ paddingBottom: 3, color: '#fff' }}>
+        <Divider flexItem></Divider>
+        <FlexCol alignItems="center">
+          <Toolbar sx={{ paddingX: 1.5 }}>
+            <Tooltip title="Debug Node View">
+              <IconButton onClick={openDebug} sx={{ color: '#fff' }}>
+                <BugReport />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Toggle Light/Dark Mode">
+              <span>
+                <DarkModeIconButtonForColorScheme defaultLightModeColor="warning" />
+              </span>
+            </Tooltip>
+          </Toolbar>
+          <FlexRow flexWrap="wrap">
+            {socialLinksData.map((social, index) => (
+              <RotationAnimation key={index} rotation={20}>
+                <IconButton
+                  sx={{ color: '#fff' }}
+                  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>
+          <Typography variant="caption" color={theme.palette.text.primary}>
+            Copyright © 2024 XY Labs, Inc.
+          </Typography>
+          <Stack gap={0.5} flexDirection="row">
+            <LinkEx color="inherit" target="_blank" href="https://xylabs.com/privacy/">
+              <Typography variant="caption">Privacy</Typography>
+            </LinkEx>
+            {' '}
+            •
+            {' '}
+            <LinkEx color="inherit" target="_blank" href="https://xylabs.com/terms/">
+              <Typography variant="caption">Terms</Typography>
+            </LinkEx>
+            {' '}
+            •
+            {' '}
+            <LinkEx color="inherit" target="_blank" href="https://xyo.network/">
+              <Typography variant="caption">XYO Website</Typography>
+            </LinkEx>
+          </Stack>
+        </FlexCol>
+      </Collapse>
+    </Card>
+  )
+}

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

@@ -1,3 +1,5 @@
+/* eslint-disable @eslint-react/no-array-index-key */
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 import type { BottomNavigationProps } from '@mui/material'
 import {
   BottomNavigation, BottomNavigationAction, Paper, styled,

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

@@ -1,27 +1,21 @@
-import { BugReport } from '@mui/icons-material'
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 import type { DrawerProps } from '@mui/material'
 import {
-  Divider,
+  alpha,
+  darken,
   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 { useColorSchemeEx } from '@xylabs/react-invertible-theme'
 import type {
   DappName, DappNavItem, DappNavMenuConfig, DappVersion, XyOsContext,
 } from '@xyo-network/os-model'
@@ -31,13 +25,10 @@ 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'
+import { BottomMenuArea } from './BottomMenuArea.tsx'
+import { StyledListItemButton, StyledMenuIconWrapSpan } from './StyledListItems.tsx'
 
-interface DappMenuDrawerProps extends DrawerProps {
+export interface DappMenuDrawerProps extends DrawerProps {
   activePath?: string
   context?: XyOsContext | null
   iconSvg?: string
@@ -62,10 +53,9 @@ export const DappMenuDrawer: React.FC<DappMenuDrawerProps> = ({
   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
+  const drawerColor = darkMode ? theme.palette.background.paper : darken(theme.palette.primary.main, 0.5)
+  const activeColor = theme.palette.primary.light
 
-  // update based off active path changes
   useEffect(() => {
     if (menuConfig?.defaultPath && menuItems && activePath) {
       const newPath = menuItems.find(item => activePath === item.path)?.path ?? ''
@@ -89,132 +79,78 @@ export const DappMenuDrawer: React.FC<DappMenuDrawerProps> = ({
       anchor="left"
       PaperProps={{
         sx: {
-          background: 'transparent', borderRight: 'none', position: 'static',
+          position: 'static', backgroundColor: drawerColor, borderRight: 'none',
         },
       }}
-      sx={{ borderRight: `solid ${darkMode ? theme.palette.grey[900] : theme.palette.grey[300]}`, maxWidth: '280px' }}
+      sx={{ width: '280px' }}
       {...props}
     >
       <FlexCol alignItems="stretch" justifyContent="space-between" height="100dvh">
-        <FlexCol paddingY={1} paddingX={2} alignItems="stretch">
+        <FlexCol alignItems="stretch" justifyContent="flex-start" flexGrow={1} overflow="auto">
           <Tooltip title={version}>
             <FlexGrowRow
-              marginBottom={2}
+              id="dapp-name-and-icon"
+              padding={2}
               justifyContent="flex-start"
               gap={1}
               sx={{ cursor: 'pointer' }}
+              flexGrow={0}
             >
-              {iconSvg
-                ? RenderHtml({ htmlString: iconSvg })
-                : null}
-              <Typography noWrap variant="h5" letterSpacing="-1px" fontWeight="300">
+              {iconSvg ? RenderHtml({ htmlString: iconSvg }) : null}
+              <Typography noWrap variant="h6" letterSpacing="-1px">
                 {name}
               </Typography>
             </FlexGrowRow>
           </Tooltip>
           <DebugDialogWithNode closeDebug={closeDebug} debugOpen={debugOpen} context={context} />
-          <List sx={{ p: 0 }}>
+          <List sx={{ p: 0, overflow: 'auto' }}>
             {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,
-                  }}
+            }) => (
+              <ListItem
+                key={primaryText}
+                disablePadding
+                sx={{ paddingBottom: 1 }}
+              >
+                <StyledListItemButton
+                  onClick={() => handleChange(pathFromPayload)}
+                  active={pathFromPayload === path}
+                  disableRipple
+                  disableTouchRipple
                 >
-                  <ListItemButton onClick={() => handleChange(pathFromPayload)}>
-                    <ListItemIcon sx={{ color: 'inherit' }}>
+                  <FlexRow
+                    flexGrow={1}
+                    paddingX={2}
+                    paddingY={0.5}
+                    sx={{ '&:hover': { backgroundColor: alpha('#ffffff', 0.05) }, 'borderRadius': '10px' }}
+                  >
+                    <ListItemIcon
+                      sx={{ color: pathFromPayload === path ? activeColor : alpha('#fff', 0.3), justifyContent: 'center' }}
+                    >
                       <StyledMenuIconWrapSpan
                         ref={(ref) => {
                           if (ref) {
                             ref.innerHTML = icon ?? ''
                           }
                         }}
-                      >
-                      </StyledMenuIconWrapSpan>
+                      />
                     </ListItemIcon>
-                    <ListItemText primary={primaryText} />
-                  </ListItemButton>
-                </ListItem>
-              )
-            })}
+                    <ListItemText
+                      primaryTypographyProps={{
+                        fontWeight: path === pathFromPayload ? 'bold' : 'inherit',
+                        color: pathFromPayload === path ? 'inherit' : alpha(theme.palette.text.primary, 0.5),
+                      }}
+                      primary={primaryText}
+                      style={{ opacity: pathFromPayload === path ? 1 : 0.5 }}
+                    />
+                  </FlexRow>
+                </StyledListItemButton>
+              </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>
+        <BottomMenuArea openDebug={openDebug} backgroundColor={theme.palette.primary.dark} />
       </FlexCol>
     </Drawer>
   )
 }
-
-const StyledMenuIconWrapSpan = styled('span', { name: 'StyledMenuIconWrapSpan' })(() => ({
-  alignItems: 'center',
-  display: 'inline-flex',
-  flexDirection: 'column',
-}))

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

@@ -0,0 +1,36 @@
+import { ListItemButton, styled } from '@mui/material'
+
+// Styled span for wrapping menu icons
+export const StyledMenuIconWrapSpan = styled('span', { name: 'StyledMenuIconWrapSpan' })(() => ({
+  alignItems: 'center',
+  display: 'inline-flex',
+  flexDirection: 'column',
+}))
+
+export const StyledListItemButton = styled(ListItemButton, { name: 'StyledListItemButton' })<{
+  active?: boolean
+}>(({ theme, active }) => {
+  const activeOrHoverColor = theme.palette.primary.main
+
+  return {
+    'position': 'relative',
+    'padding': '8px 16px',
+    'borderRadius': '12px',
+    'transition': 'background-color 0.3s ease',
+    '&:hover': {
+      backgroundColor: 'transparent',
+      borderRadius: '12px',
+    },
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: '6px',
+      backgroundColor: active ? activeOrHoverColor : 'transparent',
+      borderRadius: '0 4px 4px 0',
+      transition: 'background-color 0.3s ease',
+    },
+  }
+})

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

@@ -1,2 +1,3 @@
 export * from './BottomNavigation.js'
 export * from './Drawer.js'
+export * from './StyledListItems.tsx'

package/src/modules/Dapp/modules/Window/menu/stories/DefaultData.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable react-refresh/only-export-components */
+/* eslint-disable @stylistic/max-len */
+import type {
+  DappConfig,
+  DappIcon,
+  DappName,
+  DappNavItem,
+  DappNavMenuConfig,
+  DappPackageManifestPayload,
+  DappVersion,
+} from '@xyo-network/os-model'
+import {
+  DappConfigSchema,
+  DappIconSchema,
+  DappMode,
+  DappNavItemSchema,
+  DappNavMenuConfigSchema,
+} from '@xyo-network/os-model'
+
+import DefaultDappManifest from './default.manifest.json'
+
+export const DefaultName: DappName = 'DApp Name' as const
+
+const version: DappVersion = '1.0.0'
+
+export const DefaultConfig: DappConfig = {
+  manifest: DefaultDappManifest as DappPackageManifestPayload,
+  modes: [DappMode.Window],
+  name: DefaultName,
+  schema: DappConfigSchema,
+  sources: ['network.xyo.dapp.Default.source'],
+  version,
+}
+
+export const DefaultDappIcon: DappIcon = {
+  active: false,
+  installed: 'preInstalled',
+  name: DefaultName,
+  schema: DappIconSchema,
+  type: 'system',
+  version,
+}
+
+export const DefaultPayloads = [DefaultConfig, DefaultDappIcon]
+
+export type DefaultMenuItemPaths = 'all' | 'payment-methods' | 'keys' | 'links' | 'crypto' | 'emails' | 'phones' | 'dapps'
+
+export const DefaultMenuItems: DappNavItem<DefaultMenuItemPaths>[] = [
+  {
+    path: 'payment-methods',
+    primaryText: 'Payment Methods',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'keys',
+    primaryText: 'API Keys',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'links',
+    primaryText: 'Linked Default',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'crypto',
+    primaryText: 'Crypto Wallets',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'emails',
+    primaryText: 'Email Addresses',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'phones',
+    primaryText: 'Phone Numbers',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+  {
+    path: 'dapps',
+    primaryText: 'Dapps',
+    schema: DappNavItemSchema,
+    svgIcon: `
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="none"><path fill="currentColor" d="M420-360h120l-23-129q20-10 31.5-29t11.5-42q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 23 11.5 42t31.5 29l-23 129Zm60 280q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>
+    `,
+    weight: 0,
+  },
+]
+
+export const DefaultMenuConfig: DappNavMenuConfig = {
+  defaultPath: 'payment-methods',
+  schema: DappNavMenuConfigSchema,
+}
+
+export const DefaultMenuPayloads = [...DefaultMenuItems, DefaultMenuConfig]

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { DappMenuDrawer } from '../Drawer.tsx'
+import {
+  DefaultConfig, DefaultMenuConfig, DefaultMenuItems,
+} from './DefaultData.tsx'
+
+const StorybookEntry: Meta = {
+  component: DappMenuDrawer,
+  title: 'shared/DappMenuDrawer',
+}
+
+const Template: StoryFn<typeof DappMenuDrawer> = (props) => {
+  return (
+    <BrowserRouter>
+      <DappMenuDrawer {...props}>
+      </DappMenuDrawer>
+    </BrowserRouter>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  activePath: DefaultMenuConfig.defaultPath,
+  menuConfig: DefaultMenuConfig,
+  menuItems: DefaultMenuItems,
+  name: DefaultConfig.name,
+  version: DefaultConfig.version,
+}
+
+export { Default }
+
+export default StorybookEntry

package/src/modules/Dapp/modules/Window/menu/stories/default.manifest.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://raw.githubusercontent.com/XYOracleNetwork/sdk-xyo-client-js/main/packages/manifest/src/compilations/dapp-package-manifest-schema.json",
+  "nodes": [
+    {
+      "config": {
+        "accountPath": "0'",
+        "name": "DefaultNode",
+        "schema": "network.xyo.node.config"
+      }
+    }
+  ],
+  "external": {
+    "modules": [
+      {
+        "name": "OsDefaultNode"
+      }
+    ]
+  },
+  "schema": "network.xyo.manifest.package.dapp"
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
 import { ArrowForward } from '@mui/icons-material'
 import type { DialogProps } from '@mui/material'
 import {
@@ -120,7 +121,7 @@ export const DappAccessDialog: React.FC<AccessDialogProps> = ({
         <Button variant="outlined" onClick={onClose}>
           Cancel
         </Button>
-        <Button variant="contained" onClick={() => { handleAllow().catch(console.error) }}>
+        <Button variant="contained" onClick={handleAllow}>
           Allow
         </Button>
       </DialogActions>