@xyo-network/os-react-runtime 2.3.0

package/src/components/Widgets/WidgetCard.tsx

@@ -0,0 +1,110 @@
+import {
+  ArrowForwardRounded, HistoryRounded, RefreshRounded,
+} from '@mui/icons-material'
+import {
+  alpha, Box, CardContent, IconButton, Tooltip, Typography, useTheme,
+} from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import {
+  FlexCol, FlexGrowRow, FlexRow,
+} from '@xylabs/react-flexbox'
+import type { SimpleCardProps } from '@xyo-network/react-card'
+import { CardEx } from '@xyo-network/react-card'
+import { DateTime } from 'luxon'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+export interface WidgetCardProps extends SimpleCardProps {
+  timeOfData: number
+  widgetContent: ReactNode
+  widgetName: string
+  widgetPath: string
+}
+
+export const WidgetCard: React.FC<WidgetCardProps> = ({
+  widgetName, widgetContent, widgetPath, timeOfData = 1_715_875_087, ...props
+}) => {
+  const theme = useTheme()
+
+  const formatTimeOfData = () => {
+    const timeNow = DateTime.now().toSeconds()
+    const secondsSinceDataRefreshed: number = timeNow - timeOfData
+
+    const getYearsAndMonths = () => {
+      const years = Math.floor(secondsSinceDataRefreshed / 31_536_000)
+      const months = Math.ceil((secondsSinceDataRefreshed - years * 31_536_000) / 2_628_288)
+      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`
+      }
+    }
+
+    if (secondsSinceDataRefreshed < 60) {
+      return 'Less than 1 Minute Ago'
+    } else if (secondsSinceDataRefreshed < 3600) {
+      return `${DateTime.fromSeconds(secondsSinceDataRefreshed).toFormat('m')} Minutes Ago`
+    } else if (secondsSinceDataRefreshed < 86_400) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 3600)} Hours Ago`
+    } else if (secondsSinceDataRefreshed < 2_628_288) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 86_400)} Days Ago`
+    } else if (secondsSinceDataRefreshed < 31_536_000) {
+      return `${Math.ceil(secondsSinceDataRefreshed / 2_628_288)} Months Ago`
+    } else {
+      return getYearsAndMonths()
+    }
+  }
+
+  return (
+    <CardEx
+      {...props}
+      sx={{
+        backgroundColor: alpha(theme.palette.background.paper, 0.4),
+        display: 'flex',
+        height: '300px',
+        width: '300px',
+      }}
+    >
+      <CardContent sx={{ height: '100%', padding: 1 }}>
+        <FlexCol sx={{
+          alignItems: 'stretch', height: '100%', justifyContent: 'space-between',
+        }}
+        >
+          <FlexCol alignItems="stretch">
+            <FlexGrowRow justifyContent="space-between" alignItems="center">
+              <Typography color={theme.palette.text.primary} fontWeight={theme.typography.fontWeightMedium} variant="h6">
+                {widgetName}
+              </Typography>
+              <IconButton>
+                <RefreshRounded />
+              </IconButton>
+            </FlexGrowRow>
+            <Box paddingY={2}>{widgetContent}</Box>
+          </FlexCol>
+          <FlexRow justifyContent="space-between" alignItems="center">
+            <Tooltip title={DateTime.fromSeconds(timeOfData).toFormat('DD ttt')}>
+              <FlexRow
+                gap={0.5}
+                sx={{ opacity: 0.5 }}
+              >
+                <HistoryRounded fontSize="small" color="inherit" />
+                <Typography variant="body2">{formatTimeOfData()}</Typography>
+              </FlexRow>
+            </Tooltip>
+            <ButtonEx size="small" to={widgetPath}>
+              <ArrowForwardRounded fontSize="small" />
+            </ButtonEx>
+          </FlexRow>
+        </FlexCol>
+      </CardContent>
+    </CardEx>
+  )
+}

package/src/components/Widgets/WidgetCardExamples.tsx

@@ -0,0 +1,31 @@
+import { Stack } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { useColorSchemeEx } from '@xylabs/react-invertible-theme'
+import React from 'react'
+
+import { DappPage } from '../../DappPage.js'
+import { xyoDark, xyoLight } from '../../img/index.ts'
+import { StackOfWidgets } from './StackOfWidgets.js'
+import {
+  ExampleBarGraphWidget, ExampleBooleanTableWidget, ExampleTwoColTwoStatWidget,
+} from './Types/index.ts'
+
+export const WidgetCardExamples: React.FC<FlexBoxProps> = () => {
+  // resolve the default name code for the palette
+  const { darkMode } = useColorSchemeEx()
+
+  return (
+    <DappPage
+      sx={{ backgroundImage: darkMode ? `url(${xyoDark})` : `url(${xyoLight})`, backgroundSize: 'cover' }}
+      container="xl"
+      title="Example Widget Cards"
+    >
+      <Stack gap={2} flexDirection="row" flexWrap="wrap">
+        <ExampleTwoColTwoStatWidget />
+        <ExampleBarGraphWidget />
+        <ExampleBooleanTableWidget />
+        <StackOfWidgets />
+      </Stack>
+    </DappPage>
+  )
+}

package/src/components/Widgets/index.ts

@@ -0,0 +1,2 @@
+export * from './WidgetCard.js'
+export * from './WidgetCardExamples.js'

package/src/components/alerts/errors/RenderErrorWithSupportLink.tsx

@@ -0,0 +1,45 @@
+import { ButtonEx } from '@xylabs/react-button'
+import type { ErrorAlertProps } from '@xyo-network/react-error'
+import { ErrorAlert } from '@xyo-network/react-error'
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export interface ErrorRenderWithSupportProps extends ErrorAlertProps {
+  supportHref?: string
+  supportLinkText?: string
+  supportTo?: string
+}
+
+export const ErrorRenderWithSupport: React.FC<ErrorRenderWithSupportProps> = ({
+  supportHref = '',
+  supportTo,
+  supportLinkText = 'Support',
+  error,
+  errorContext,
+  onCancel,
+  ...props
+}) => {
+  const location = useLocation()
+  useEffect(() => {
+    // ensure we end up at the same place we are now after logging in
+    location.state = { from: { pathname: window.location.pathname } }
+  }, [location])
+  return (
+    <ErrorAlert
+      action={(
+        <ButtonEx target="_blank" href={supportHref} to={supportTo} color="inherit" size="small">
+          {supportLinkText}
+        </ButtonEx>
+      )}
+      error={error}
+      errorContext={errorContext}
+      onCancel={onCancel}
+      {...props}
+    >
+    </ErrorAlert>
+  )
+}
+
+export const ErrorRenderWithSupportDefault: React.FC<ErrorRenderWithSupportProps> = (props) => {
+  return <ErrorRenderWithSupport supportHref="https://discord.com/channels/935586624392298547/1228436997375393885" {...props} />
+}

package/src/components/alerts/errors/index.ts

@@ -0,0 +1 @@
+export * from './RenderErrorWithSupportLink.tsx'

package/src/components/alerts/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './alerts/index.ts'
+export * from './RenderHtml.tsx'
+export * from './Widgets/index.ts'

package/src/dapps/index.ts

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

package/src/dapps/shared/accounts/components/AccountCard.tsx

@@ -0,0 +1,58 @@
+import type { CardProps } from '@mui/material'
+import {
+  Card, CardContent, Divider, Typography,
+} from '@mui/material'
+import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+interface AccountSectionProps {
+  component?: ReactNode
+  desc: string
+  title: string
+}
+
+interface AccountCardProps extends CardProps {
+  items: Array<AccountSectionProps>
+}
+
+export const AccountCard: React.FC<AccountCardProps> = ({ items, ...props }) => {
+  return (
+    <Card {...props}>
+      <CardContent>
+        <FlexGrowCol width="100%" gap={2}>
+          {items.map((item, index) => {
+            return (
+
+              <FlexGrowCol gap={2} key={index} width="100%" alignItems="stretch">
+                <FlexGrowRow
+                  sx={{
+                    alignItems: 'stretch',
+                    flexDirection: { md: 'row', xs: 'column' },
+                    justifyContent: 'space-between',
+                  }}
+                  gap={2}
+                >
+                  <FlexGrowCol
+                    alignItems="flex-start"
+                    width="100%"
+                    sx={{ maxWidth: { md: '40%', xs: '100%' } }}
+                  >
+                    <Typography variant="h5" gutterBottom>
+                      {item.title}
+                    </Typography>
+                    <Typography variant="body1" gutterBottom>
+                      {item.desc}
+                    </Typography>
+                  </FlexGrowCol>
+                  {item?.component}
+                </FlexGrowRow>
+                {items.length === 1 || index === items.length - 1 ? null : <Divider flexItem />}
+              </FlexGrowCol>
+            )
+          })}
+        </FlexGrowCol>
+      </CardContent>
+    </Card>
+  )
+}

package/src/dapps/shared/accounts/components/AnimatedComponents/GenericAnimations/ShiftAnimation.tsx

@@ -0,0 +1,116 @@
+// Inspired by https://www.joshwcomeau.com/react/rotate/#bonus-that-star-animation-8
+
+import { animated, useSpring } from '@react-spring/web'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import React, { useEffect, useState } from 'react'
+
+export interface ShiftAnimationProps extends FlexBoxProps {
+  animationDirection: Direction
+  startAnimation?: boolean
+}
+
+type Direction = 'wiggle' | 'jump' | 'up' | 'down' | 'left' | 'right'
+interface PointData {
+  FromXMovement?: Readonly<number>
+  FromYMovement?: Readonly<number>
+  ToXMovement?: Readonly<number>
+  ToYMovement?: Readonly<number>
+}
+const MovementData: Readonly<Record<Direction, Readonly<PointData[]>>> = {
+  down: [
+    {
+      FromYMovement: 0,
+      ToYMovement: -3,
+    },
+    {
+      FromYMovement: -3,
+      ToYMovement: 0,
+    },
+  ],
+  jump: [
+    {
+      FromYMovement: 0,
+      ToYMovement: -3,
+    },
+    {
+      FromYMovement: -3,
+      ToYMovement: 0,
+    },
+  ],
+  left: [
+    {
+      FromXMovement: 0,
+      ToXMovement: -3,
+    },
+    {
+      FromXMovement: -3,
+      ToXMovement: 0,
+    },
+  ],
+  right: [
+    {
+      FromXMovement: 0,
+      ToXMovement: -3,
+    },
+    {
+      FromXMovement: -3,
+      ToXMovement: 0,
+    },
+  ],
+  up: [
+    {
+      FromYMovement: 0,
+      ToYMovement: -3,
+    },
+    {
+      FromYMovement: -3,
+      ToYMovement: 0,
+    },
+  ],
+  wiggle: [
+    {
+      FromXMovement: 0,
+      ToXMovement: -3,
+    },
+    {
+      FromXMovement: -3,
+      ToXMovement: 0,
+    },
+  ],
+}
+
+export const ShiftAnimation: React.FC<ShiftAnimationProps> = ({
+  startAnimation = false, animationDirection, children,
+}) => {
+  const [isShifted, setIsShifted] = useState(startAnimation)
+  const anim = useSpring({
+    backfaceVisibility: 'hidden',
+    config: {
+      friction: 10,
+      tension: 300,
+    },
+    from: {
+      x: startAnimation ? MovementData[animationDirection][1].FromXMovement : 0,
+      y: startAnimation ? MovementData[animationDirection][1].FromYMovement : 0,
+    },
+    reset: true,
+    to: {
+      x: startAnimation ? MovementData[animationDirection][0].FromXMovement : 0,
+      y: startAnimation ? MovementData[animationDirection][0].FromYMovement : 0,
+    },
+  })
+
+  useEffect(() => {
+    if (!isShifted) {
+      return
+    }
+    const timeoutId = window.setTimeout(() => {
+      setIsShifted(false)
+    }, 5)
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [isShifted])
+
+  return <animated.div style={anim}>{children}</animated.div>
+}

package/src/dapps/shared/accounts/components/AnimatedComponents/GenericAnimations/index.ts

@@ -0,0 +1 @@
+export { ShiftAnimation } from './ShiftAnimation.js'

package/src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPoint.tsx

@@ -0,0 +1,24 @@
+import { FiberManualRecordRounded } from '@mui/icons-material'
+import type { BoxProps } from '@mui/material'
+import {
+  alpha, Box, useTheme,
+} from '@mui/material'
+import React from 'react'
+
+export const TwoToneBulletPoint: React.FC<BoxProps> = (props) => {
+  const theme = useTheme()
+  return (
+    <Box {...props}>
+      <FiberManualRecordRounded
+        fontSize="small"
+        sx={{
+          '&:hover': { padding: 0.2 },
+          'backgroundColor': alpha(theme.palette.secondary.main, 0.2),
+          'borderRadius': 2,
+          'padding': 0.4,
+        }}
+        color="primary"
+      />
+    </Box>
+  )
+}

package/src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/TwoToneBulletPointList.tsx

@@ -0,0 +1,24 @@
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import { TwoToneBulletPoint } from './TwoToneBulletPoint.js'
+
+export interface TwoToneBulletPointListProps {
+  list: ReactNode[]
+}
+
+export const TwoToneBulletPointList: React.FC<TwoToneBulletPointListProps> = ({ list }) => {
+  return (
+    <FlexCol alignItems="flex-start" gap={1}>
+      {list.map((item, index) => {
+        return (
+          <FlexGrowRow key={index + 'bulletPointList'} alignItems="flex-start" justifyContent="flex-start" gap={1}>
+            <TwoToneBulletPoint marginTop="4px" />
+            {item}
+          </FlexGrowRow>
+        )
+      })}
+    </FlexCol>
+  )
+}

package/src/dapps/shared/accounts/components/AnimatedComponents/IconAnimations/index.ts

@@ -0,0 +1,2 @@
+export { TwoToneBulletPoint } from './TwoToneBulletPoint.js'
+export { TwoToneBulletPointList } from './TwoToneBulletPointList.js'

package/src/dapps/shared/accounts/components/AnimatedComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './GenericAnimations/index.ts'
+export * from './IconAnimations/index.ts'

package/src/dapps/shared/accounts/components/InputFields/CoinbaseEmail.tsx

@@ -0,0 +1,41 @@
+import type { StandardTextFieldProps } from '@mui/material'
+import { FormControl, TextField } from '@mui/material'
+import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
+import React, { useState } from 'react'
+
+export interface CoinbaseEmailInputProps extends StandardTextFieldProps {
+  existingEmail?: string
+}
+
+export const CoinbaseEmailInput: React.FC<CoinbaseEmailInputProps> = ({ existingEmail, ...props }) => {
+  const [email, setEmail] = useState(existingEmail)
+  const [valid, setValid] = useState<boolean | undefined>()
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setValid(!!event.target.value)
+  }
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const emailFromEvent = event.target.value
+    setValid(!!emailFromEvent)
+    setEmail(emailFromEvent)
+  }
+  return (
+    <FormControl fullWidth>
+      <LabeledTextFieldWrapper label="Primary Cryptowallet">
+        <TextField
+          fullWidth
+          variant="filled"
+          error={valid === false}
+          hiddenLabel
+          onBlur={handleBlur}
+          value={email}
+          onChange={handleChange}
+          size="small"
+          {...props}
+        />
+      </LabeledTextFieldWrapper>
+    </FormControl>
+  )
+}

package/src/dapps/shared/accounts/components/InputFields/PrimaryCryptowallet.tsx

@@ -0,0 +1,42 @@
+import type { StandardTextFieldProps } from '@mui/material'
+import { FormControl, TextField } from '@mui/material'
+import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
+import React, { useState } from 'react'
+
+export interface PrimaryCryptoWalletInputProps extends StandardTextFieldProps {
+  existingPrimaryCryptoWallet?: string
+}
+
+export const PrimaryCryptoWalletInput: React.FC<PrimaryCryptoWalletInputProps> = ({ existingPrimaryCryptoWallet, ...props }) => {
+  const [primaryWallet, setPrimaryWallet] = useState(existingPrimaryCryptoWallet)
+  const [valid, setValid] = useState<boolean | undefined>()
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setValid(!!event.target.value)
+  }
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const nameFromEvent = event.target.value
+    setValid(!!nameFromEvent)
+    setPrimaryWallet(nameFromEvent)
+  }
+  return (
+    <FormControl fullWidth>
+      <LabeledTextFieldWrapper label="Primary Cryptowallet">
+        <TextField
+          fullWidth
+          variant="filled"
+          error={valid === false}
+          hiddenLabel
+          onBlur={handleBlur}
+          value={primaryWallet}
+          onChange={handleChange}
+          size="small"
+          required
+          {...props}
+        />
+      </LabeledTextFieldWrapper>
+    </FormControl>
+  )
+}

package/src/dapps/shared/accounts/components/InputFields/SecondaryCryptowallet.tsx

@@ -0,0 +1,42 @@
+import type { StandardTextFieldProps } from '@mui/material'
+import { FormControl, TextField } from '@mui/material'
+import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
+import React, { useState } from 'react'
+
+export interface SecondaryCryptoWalletInputProps extends StandardTextFieldProps {
+  existingSecondaryCryptoWallet?: string
+}
+
+export const SecondaryCryptoWalletInput: React.FC<SecondaryCryptoWalletInputProps> = ({ existingSecondaryCryptoWallet, ...props }) => {
+  const [secondaryWallet, setSecondaryWallet] = useState(existingSecondaryCryptoWallet)
+  const [valid, setValid] = useState<boolean | undefined>()
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setValid(!!event.target.value)
+  }
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const walletFromEvent = event.target.value
+    setValid(!!walletFromEvent)
+    setSecondaryWallet(walletFromEvent)
+  }
+  return (
+    <FormControl fullWidth>
+      <LabeledTextFieldWrapper label="Secondary Cryptowallet">
+        <TextField
+          variant="filled"
+          fullWidth
+          error={valid === false}
+          hiddenLabel
+          onBlur={handleBlur}
+          value={secondaryWallet}
+          onChange={handleChange}
+          size="small"
+          required
+          {...props}
+        />
+      </LabeledTextFieldWrapper>
+    </FormControl>
+  )
+}

package/src/dapps/shared/accounts/components/InputFields/index.ts

@@ -0,0 +1,3 @@
+export * from './CoinbaseEmail.js'
+export * from './PrimaryCryptowallet.js'
+export * from './SecondaryCryptowallet.js'

package/src/dapps/shared/accounts/components/PaymentMethods.tsx

@@ -0,0 +1,51 @@
+import { Grid } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FormGroupCreditCardProvider } from '@xyo-network/react-form-credit-card'
+import React from 'react'
+
+import { DappPage } from '../../../../DappPage.js'
+import { AccountCard } from './AccountCard.js'
+import {
+  CoinbaseEmailInput, PrimaryCryptoWalletInput, SecondaryCryptoWalletInput,
+} from './InputFields/index.ts'
+
+export const PaymentMethods: React.FC<FlexBoxProps> = () => {
+  return (
+    <DappPage title="Payment Methods">
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <AccountCard
+            sx={{ height: '100%' }}
+            items={[
+              {
+                // TODO - needs a default implementation
+                component: (
+                  <FormGroupCreditCardProvider>
+                    <></>
+                  </FormGroupCreditCardProvider>
+                ),
+                desc: 'Save a credit card to your node to complete credit payments seamlessly.',
+                title: 'Credit Card',
+              },
+              {
+                component: <CoinbaseEmailInput />,
+                desc: 'Use your Coinbase Account receive payments easily.',
+                title: 'Coinbase Email',
+              },
+              {
+                component: <PrimaryCryptoWalletInput />,
+                desc: 'This is the primary crypto wallet on your node.',
+                title: 'Primary Crypto Wallet',
+              },
+              {
+                component: <SecondaryCryptoWalletInput />,
+                desc: 'This is the secondary crypto wallet on your node.',
+                title: 'Secondary Crypto Wallet',
+              },
+            ]}
+          />
+        </Grid>
+      </Grid>
+    </DappPage>
+  )
+}

package/src/dapps/shared/accounts/components/index.ts

@@ -0,0 +1,3 @@
+export * from './AnimatedComponents/index.ts'
+export * from './InputFields/index.ts'
+export * from './PaymentMethods.js'