@xyo-network/os-react-runtime 2.3.0

package/src/modules/network/components/LoadingIndicator.tsx

@@ -0,0 +1,51 @@
+import { SignalCellularAltOutlined } from '@mui/icons-material'
+import { Tooltip, useTheme } from '@mui/material'
+import { useColorSchemeEx } from '@xylabs/react-invertible-theme'
+import React, { useMemo } from 'react'
+
+import { useOsNetwork } from '../hooks/index.ts'
+import { StyledNetworkLoadingIndicator } from './StyledLoadingIndicator.js'
+
+const WaitingForNetwork: React.FC = () => (
+  <Tooltip title="Waiting for Network initialization">
+    <StyledNetworkLoadingIndicator />
+  </Tooltip>
+)
+
+export interface NetworkLoadingIndicatorProps {
+  // helps with contrast on bright backgrounds for dark mode
+  highContrast?: boolean
+}
+
+export const NetworkLoadingIndicator: React.FC<NetworkLoadingIndicatorProps> = ({ highContrast }) => {
+  const { darkMode } = useColorSchemeEx()
+  const theme = useTheme()
+  const { networkReady } = useOsNetwork()
+
+  const highContrastSuccessColor = darkMode ? theme.palette.success.dark : theme.palette.success.main
+  const successColor = highContrast ? highContrastSuccessColor : theme.palette.success.main
+
+  const highContrastErrorColor = darkMode ? theme.palette.success.dark : theme.palette.error.main
+  const errorColor = highContrast ? highContrastErrorColor : theme.palette.error.main
+
+  const NetworkComponent = useMemo(() => {
+    if (networkReady) {
+      const connectionReady = true
+      return connectionReady
+        ? () => (
+            <Tooltip title="Connected to Network">
+              <SignalCellularAltOutlined sx={{ color: successColor }} />
+            </Tooltip>
+          )
+        : () => (
+            <Tooltip title="Error Connecting to Network">
+              <SignalCellularAltOutlined sx={{ color: errorColor }} />
+            </Tooltip>
+          )
+    } else {
+      return WaitingForNetwork
+    }
+  }, [errorColor, networkReady, successColor])
+
+  return <NetworkComponent />
+}

package/src/modules/network/components/NetworkButton.tsx

@@ -0,0 +1,27 @@
+import { NotInterested } from '@mui/icons-material'
+import type { ButtonProps } from '@mui/material'
+import { Button } from '@mui/material'
+import React from 'react'
+
+import { useOsNetwork } from '../hooks/index.ts'
+
+export const NetworkButton: React.FC<ButtonProps> = ({
+  disabled, startIcon, ...props
+}) => {
+  const { networkReady } = useOsNetwork()
+
+  return (
+    <Button
+      disabled={disabled || !networkReady}
+      startIcon={(
+        <>
+          {startIcon}
+          {networkReady === false
+            ? <NotInterested />
+            : null}
+        </>
+      )}
+      {...props}
+    />
+  )
+}

package/src/modules/network/components/NetworkReady.tsx

@@ -0,0 +1,31 @@
+import { Typography } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import type { PropsWithChildren } from 'react'
+import React from 'react'
+
+import { LoadingOsLogo } from '../../LoadingOsLogo/index.ts'
+import { useOsNetwork } from '../hooks/index.ts'
+
+export interface NetworkReadyFlexBoxProps extends PropsWithChildren, FlexBoxProps {
+  skipCheck?: boolean
+}
+
+export const NetworkReadyFlexBox: React.FC<NetworkReadyFlexBoxProps> = ({
+  children, skipCheck, ...props
+}) => {
+  const { networkReady } = useOsNetwork()
+
+  return (
+    <>
+      {networkReady || skipCheck
+        ? children
+        : (
+            <FlexCol height="100%" {...props}>
+              <LoadingOsLogo widthInPixels={100} busy />
+              <Typography fontFamily="monospace">Loading XYO Name Service...</Typography>
+            </FlexCol>
+          )}
+    </>
+  )
+}

package/src/modules/network/components/StyledLoadingIndicator.tsx

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material'
+
+// Inspired by https://codepen.io/andrewarchi/pen/ExVQmQm
+export const StyledNetworkLoadingIndicator = styled('div', { name: 'StyledNetworkLoadingIndicator' })(({ theme }) => ({
+  '&': {
+    '--Loader-color': '#fff',
+    '--Loader-offset': theme.spacing(0.1667),
+    '--Loader-size': theme.spacing(1.5),
+    '--Loader-timing': 'ease-in-out',
+    'alignItems': 'center',
+    'display': 'flex',
+    'justifyContent': 'center',
+    'marginBottom': 'calc(var(--Loader-size) / 2)',
+    'marginTop': 'calc(var(--Loader-size) / 2)',
+    'minHeight': 'var(--Loader-size)',
+    'minWidth': 'var(--Loader-size)',
+    'position': 'relative',
+    'width': '100%',
+  },
+  '&:after': {
+    animationName: 'pulsB',
+    boxShadow: '0 0 0 0 var(--Loader-color)',
+    paddingBottom: 'calc(100% - var(--Loader-offset) * 2)',
+    width: 'calc(100% - var(--Loader-offset) * 2)',
+  },
+  '&:before': {
+    animationName: 'pulsA',
+    boxShadow: 'inset 0 0 0 var(--Loader-offset) var(--Loader-color)',
+    paddingBottom: '100%',
+    width: '100%',
+  },
+  '&:before, &:after': {
+    animationDuration: '1.8s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'var(--Loader-timing)',
+    borderRadius: '50%',
+    content: '""',
+    filter: 'drop-shadow(0 0 var(--Loader-offset)/2.25 rgba(var(--Loader-color), 0.75))',
+    position: 'absolute',
+  },
+  '@keyframes pulsA': {
+    '0%': { boxShadow: 'inset 0 0 0 var(--Loader-offset) var(--Loader-color)' },
+    '50%, 100%': { boxShadow: 'inset 0 0 0 0 var(--Loader-color)' },
+  },
+  '@keyframes pulsB': {
+    '0%, 50%': { boxShadow: '0 0 0 0 var(--Loader-color)' },
+    '100%': { boxShadow: '0 0 0 var(--Loader-offset) var(--Loader-color)' },
+  },
+}))

package/src/modules/network/components/index.ts

@@ -0,0 +1,3 @@
+export * from './LoadingIndicator.js'
+export * from './NetworkButton.js'
+export * from './NetworkReady.js'

package/src/modules/network/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useOsNetwork.tsx'
+export * from './useXyoPublicNetwork.tsx'

package/src/modules/network/hooks/lib/NetworkState.ts

@@ -0,0 +1,8 @@
+import type { AttachableNodeInstance } from '@xyo-network/node-model'
+
+export interface NetworkState {
+  connected: boolean
+  error: Error | undefined
+  networkReady: boolean
+  stack?: AttachableNodeInstance
+}

package/src/modules/network/hooks/lib/createNetworkState.ts

@@ -0,0 +1,20 @@
+import { assertEx } from '@xylabs/assert'
+
+import type { StackReady } from '../../../../index.ts'
+import type { NetworkState } from './NetworkState.ts'
+
+const defaultNetworkState: NetworkState = {
+  connected: false, error: undefined, networkReady: false,
+}
+
+export const createNetworkState = (stackReady?: StackReady) => {
+  const { ready, stack } = stackReady ?? {}
+  if (ready) {
+    const foundStack = assertEx(stack, () => 'stack said it was ready but no stack found')
+    return {
+      connected: true, error: undefined, networkReady: true, stack: foundStack,
+    }
+  } else {
+    return defaultNetworkState
+  }
+}

package/src/modules/network/hooks/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './createNetworkState.ts'
+export * from './NetworkState.ts'

package/src/modules/network/hooks/useOsNetwork.tsx

@@ -0,0 +1,17 @@
+import { OsPubSubNetworkReadyEvent } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useStackReady } from '../../../hooks/index.ts'
+import { useXyOsUiContext } from '../../XyOsUi/index.ts'
+import { createNetworkState, type NetworkState } from './lib/index.ts'
+
+export const useOsNetwork = () => {
+  const context = useXyOsUiContext()
+  const stackReady = useStackReady(OsPubSubNetworkReadyEvent, 'osPubSubNetworkStack', context)
+
+  const networkState = useMemo<NetworkState>(() => {
+    return createNetworkState(stackReady)
+  }, [context, stackReady])
+
+  return networkState
+}

package/src/modules/network/hooks/useXyoPublicNetwork.tsx

@@ -0,0 +1,17 @@
+import { OsXyoPublicNetworkReadyEvent } from '@xyo-network/os-runtime'
+import { useMemo } from 'react'
+
+import { useStackReady } from '../../../hooks/index.ts'
+import { useXyOsUiContext } from '../../XyOsUi/index.ts'
+import { createNetworkState, type NetworkState } from './lib/index.ts'
+
+export const useXyoPublicNetwork = () => {
+  const context = useXyOsUiContext()
+  const stackReady = useStackReady(OsXyoPublicNetworkReadyEvent, 'xyoPublicNetworkStack', context)
+
+  const networkState = useMemo<NetworkState>(() => {
+    return createNetworkState(stackReady)
+  }, [context, stackReady])
+
+  return networkState
+}

package/src/modules/network/index.ts

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

package/src/settings/Theme/ThemeCssVars.ts

@@ -0,0 +1,200 @@
+import {
+  alpha, darken, experimental_extendTheme as extendTheme, lighten,
+} from '@mui/material'
+
+declare module '@mui/material/styles' {
+  interface PaletteOptions {
+    iconBgGradientBuilder: (baseColor: string) => string
+    iconBgHoverGradientBuilder: (baseColor: string) => string
+    iconGradient: string
+    iconGradientHover: string
+  }
+  interface Palette {
+    iconBgGradientBuilder: (baseColor: string) => string
+    iconBgHoverGradientBuilder: (baseColor: string) => string
+    iconGradient: string
+    iconGradientHover: string
+  }
+}
+
+export const defaultIconBackground = '#A060E0'
+export const defaultIconBackgroundHover = '#bdade8'
+
+const DynamicIconBgGradientBuilder = {
+  iconBgGradientBuilder: (baseColor: string) => `linear-gradient(148deg, ${baseColor} 0%, ${darken(baseColor, 0.3)} 100%);`,
+  iconBgHoverGradientBuilder: (baseColor: string) => `linear-gradient(148deg, ${lighten(baseColor, 0.5)} 0%, ${lighten(baseColor, 0.2)} 100%);`,
+}
+
+const StaticIconBgGradient = {
+  iconGradient: `linear-gradient(148deg, ${defaultIconBackground} 0%, ${darken(defaultIconBackground, 0.35)} 100%);`,
+  iconGradientHover: `linear-gradient(148deg, ${defaultIconBackgroundHover} 0%, ${darken(defaultIconBackgroundHover, 0.35)} 100%);`,
+}
+
+const lightPalette = {
+  background: {
+    default: '#F4F4F4',
+    paper: '#FFFFFF',
+  },
+  error: {
+    dark: '#AA0E0E',
+    light: '#F15555',
+    main: '#D81111',
+  },
+  ...DynamicIconBgGradientBuilder,
+  ...StaticIconBgGradient,
+  primary: { main: '#100029' },
+  secondary: { main: '#A060E0' },
+  success: {
+    dark: '#347f21',
+    light: '#94dd80',
+    main: '#62bc50',
+  },
+  text: {
+    disabled: '#49454D',
+    primary: '#1D1B1E',
+    secondary: '#49454D',
+  },
+  warning: { main: '#ffc805' },
+}
+const darkPalette = {
+  background: {
+    default: '#121212',
+    paper: '#1E1E1E',
+  },
+  error: { main: '#ffb4ab' },
+  success: { main: '#94dd80' },
+  ...DynamicIconBgGradientBuilder,
+  ...StaticIconBgGradient,
+  primary: { main: '#C9BFFA' },
+  secondary: { main: '#C9C3DA' },
+  text: {
+    disabled: '#a5acdb',
+    primary: '#F4F4F4',
+    secondary: '#daddf2',
+  },
+}
+
+export const ThemeCssVars = extendTheme({
+  colorSchemes: {
+    dark: { palette: darkPalette },
+    light: { palette: lightPalette },
+  },
+  components: {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          '&.Mui-expanded': { '&$expanded': { margin: '4px 0' } },
+          'boxShadow': 'none',
+        },
+      },
+    },
+    MuiAccordionSummary: { styleOverrides: { root: { boxShadow: 'none' } } },
+    MuiAppBar: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          WebkitBackdropFilter: 'blur(20px)',
+          backdropFilter: 'blur(20px)',
+          backgroundColor: alpha(theme.palette.background.paper, 0.2),
+          boxShadow: 'none',
+          color: '#1D1B1E',
+          [theme.getColorSchemeSelector('dark')]: { color: '#CBC4CE' },
+        }),
+      },
+    },
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          WebkitBackdropFilter: 'blur(20px)',
+          backdropFilter: 'blur(20px)',
+          backgroundColor: alpha(theme.palette.background.paper, 0.7),
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }),
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          // This is to get rid of the extra padding at the end of Card Content that misaligns padding when there's only 1 item
+          '&:last-child': { paddingBottom: '16px' },
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          fontWeight: 400,
+        },
+      },
+    },
+    MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } } },
+    MuiFilledInput: {
+      defaultProps: { disableUnderline: true },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          '&.Mui-error': { border: `${theme.palette.error.main} 1px solid` },
+          'border': 'transparent 1px solid',
+          'borderRadius': theme.shape.borderRadius,
+        }),
+      },
+    },
+    MuiLink: {
+      defaultProps: { underline: 'none' },
+      styleOverrides: { root: { '&:hover': { filter: 'brightness(75%)' } } },
+    },
+    MuiPaper: { defaultProps: { elevation: 0 } },
+    MuiTableCell: {
+      styleOverrides: {
+        body: {
+          fontFamily: 'monospace',
+          whiteSpace: 'nowrap',
+        },
+        head: {
+          fontWeight: 700,
+          whiteSpace: 'nowrap',
+        },
+      },
+    },
+  },
+  spacing: 12,
+  typography: {
+    allVariants: { fontFamily: ['Manrope', 'san-serif'].join(',') },
+    body1: {
+      fontSize: '16px',
+      fontWeight: 400,
+    },
+    button: {
+      fontSize: '1rem',
+      fontWeight: 500,
+      textTransform: 'capitalize',
+    },
+    fontWeightBold: 700,
+    fontWeightLight: 300,
+    fontWeightMedium: 600,
+    fontWeightRegular: 500,
+    h1: { fontSize: '3.2rem' },
+    h2: { fontSize: '2.7rem' },
+    h3: { fontSize: '2.24rem' },
+    h4: { fontSize: '2rem' },
+    h5: { fontSize: '1.5rem' },
+    h6: { fontSize: '1.2rem' },
+    subtitle1: {
+      fontWeight: 300,
+      opacity: '50%',
+      textTransform: 'uppercase',
+    },
+    subtitle2: { opacity: '50%' },
+  },
+})

package/src/settings/Theme/ThemeProvider.tsx

@@ -0,0 +1,22 @@
+// eslint-disable-next-line import-x/no-internal-modules
+import type { DefaultColorScheme } from '@mui/material/styles/createThemeWithVars.js'
+import { InvertibleCssVarsProvider } from '@xylabs/react-invertible-theme'
+import type { WithChildren } from '@xylabs/react-shared'
+import React, { useMemo } from 'react'
+
+import { ThemeCssVars } from './ThemeCssVars.js'
+
+export const AppOsThemeProvider: React.FC<WithChildren> = ({ children }) => {
+  const initialValue: DefaultColorScheme | 'system' = useMemo(() => {
+    const validValues: DefaultColorScheme[] = ['light', 'dark']
+    const savedValue = localStorage.getItem('mui-mode')
+    if (savedValue && validValues.includes(savedValue as DefaultColorScheme)) return savedValue as DefaultColorScheme
+    return 'system'
+  }, [])
+
+  return (
+    <InvertibleCssVarsProvider theme={ThemeCssVars} defaultMode={initialValue}>
+      {children}
+    </InvertibleCssVarsProvider>
+  )
+}

package/src/settings/Theme/index.ts

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

package/src/settings/index.ts

@@ -0,0 +1 @@
+export * from './Theme/index.ts'

package/src/types/global.d.ts

@@ -0,0 +1,8 @@
+import type { XyOsGlobal } from '@xyo-network/os-model'
+
+export declare global {
+  interface Window {
+    ethereum: ethers
+    getXyOsGlobal: () => XyOsGlobal
+  }
+}

package/src/types/images.d.ts

@@ -0,0 +1,13 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.gif'
+declare module '*.webp'
+
+declare module '*.svg' {
+  import type * as React from 'react'
+
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+    title?: string
+  }>
+  export default ReactComponent
+}

package/src/utils/DappInstallTypeFilters.ts

@@ -0,0 +1,27 @@
+import type { InstallationType, RegisteredDappSet } from '@xyo-network/os-model'
+import {
+  isInstalledDappSet, isPreInstalledDappSet, isUnInstalledDappSet,
+} from '@xyo-network/os-model'
+
+export const DappInstallTypeFilters: Record<
+  InstallationType,
+  (registeredDappSets: RegisteredDappSet[] | undefined) => RegisteredDappSet[] | undefined
+> = {
+  installed(registeredDappSets?: RegisteredDappSet[]) {
+    return registeredDappSets && registeredDappSets?.length > 0
+      ? registeredDappSets?.filter(isInstalledDappSet).sort((a, b) => (a.dapp.config.name.toUpperCase() < b.dapp.config.name.toUpperCase() ? -1 : 1))
+      : undefined
+  },
+  preInstalled(registeredDappSets?: RegisteredDappSet[]) {
+    return registeredDappSets && registeredDappSets?.length > 0
+      ? registeredDappSets
+        ?.filter(isPreInstalledDappSet)
+        .sort((a, b) => (a.dapp.config.name.toUpperCase() < b.dapp.config.name.toUpperCase() ? -1 : 1))
+      : undefined
+  },
+  uninstalled(registeredDappSets?: RegisteredDappSet[]) {
+    return registeredDappSets && registeredDappSets?.length > 0
+      ? registeredDappSets.filter(isUnInstalledDappSet).sort((a, b) => (a.dapp.config.name.toUpperCase() < b.dapp.config.name.toUpperCase() ? -1 : 1))
+      : undefined
+  },
+}

package/src/utils/getApiDomain.ts

@@ -0,0 +1,14 @@
+const getApiDomain = (localHost: boolean, apiDomain: string | undefined) => {
+  if (apiDomain !== undefined) {
+    return apiDomain
+  }
+  if (localHost) {
+    return 'http://localhost:8080'
+  }
+  if (location.hostname.startsWith('beta')) {
+    return 'https://beta.archivist.xyo.network'
+  }
+  return 'https://archivist.xyo.network'
+}
+
+export { getApiDomain }

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './DappInstallTypeFilters.js'
+export * from './getApiDomain.ts'
+export * from './useOnWindowResize.js'

package/src/utils/useOnWindowResize.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+export const useOnWindowResize = () => {
+  const [resized, setResized] = useState<UIEvent>()
+
+  useEffect(() => {
+    const onResize = (event: UIEvent) => {
+      setResized(event)
+    }
+    window.addEventListener('resize', onResize, false)
+
+    return () => {
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  return resized
+}

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["./src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: { src: { entry: ['./src/index.ts'] } },
+    neutral: {},
+    node: {},
+  },
+}
+
+export default config