@xylabs/sdk-react 2.12.12 → 2.13.3

package/src/components/CookieConsent/CookieConsent.stories.tsx

@@ -1,65 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { CookieConsentLoader, useCookieConsent } from '../../contexts'
-import { ButtonEx } from '../ButtonEx'
-import { FlexRow } from '../FlexBox'
-import { CookieConsent } from './CookieConsent'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: CookieConsent,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/CookieConsent',
-} as ComponentMeta<typeof CookieConsent>
-
-const TemplateWithContext: ComponentStory<typeof CookieConsent> = (args) => {
-  const Inner: React.FC = () => {
-    const { clearAccepted } = useCookieConsent()
-    return (
-      <FlexRow>
-        <ButtonEx
-          variant="contained"
-          onClick={() => {
-            clearAccepted?.()
-          }}
-        >
-          Clear Local Storage
-        </ButtonEx>
-        <CookieConsent {...args}></CookieConsent>
-      </FlexRow>
-    )
-  }
-
-  return (
-    <CookieConsentLoader>
-      <Inner />
-    </CookieConsentLoader>
-  )
-}
-
-const TemplateWithoutContext: ComponentStory<typeof CookieConsent> = (args) => {
-  return (
-    <FlexRow>
-      <CookieConsent {...args}></CookieConsent>
-    </FlexRow>
-  )
-}
-
-const WithContext = TemplateWithContext.bind({})
-WithContext.args = {
-  title: 'With Context',
-}
-
-const WithoutContext = TemplateWithoutContext.bind({})
-WithoutContext.args = {
-  title: 'Without Context',
-}
-
-export { WithContext, WithoutContext }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/CookieConsent/CookieConsent.tsx

@@ -1,23 +0,0 @@
-import { CookieConsentLoader, useCookieConsent } from '../../contexts'
-import { CookieConsentBody } from './CookieConsentBody'
-import { CookieConsentProps } from './CookieConsentProps'
-
-export const CookieConsent: React.FC<CookieConsentProps> = (props) => {
-  const { storageName } = useCookieConsent()
-
-  const Inner: React.FC = () => {
-    const { accepted } = useCookieConsent()
-    return accepted ? null : <CookieConsentBody background paper position="fixed" bottom={0} maxWidth="100vw" width="100%" zIndex={1000} {...props} />
-  }
-
-  //if not inside a context, make a context
-  if (!storageName) {
-    return (
-      <CookieConsentLoader>
-        <Inner />
-      </CookieConsentLoader>
-    )
-  }
-
-  return <Inner />
-}

package/src/components/CookieConsent/CookieConsentBody.tsx

@@ -1,72 +0,0 @@
-import { Link, Typography } from '@mui/material'
-import { useEffect } from 'react'
-
-import { useCookieConsent } from '../../contexts'
-import { ButtonEx } from '../ButtonEx'
-import { FlexRow } from '../FlexBox'
-import { CookieConsentProps } from './CookieConsentProps'
-
-export const CookieConsentBody: React.FC<CookieConsentProps> = ({ acceptOnScroll, acceptOnTimer = 0, onAccept, ...props }) => {
-  const { accepted, setAccepted, storageName } = useCookieConsent()
-
-  const onScroll = () => {
-    //hide it one the user has scrolled at least one page
-    if (window.scrollY > window.innerHeight && !accepted) {
-      onAcceptClick()
-    }
-  }
-
-  useEffect(() => {
-    if (acceptOnScroll) {
-      window.addEventListener('scroll', onScroll)
-
-      return () => {
-        window.removeEventListener('scroll', onScroll)
-      }
-    }
-  })
-
-  const onAcceptClick = () => {
-    if (setAccepted) {
-      setAccepted?.(true)
-    } else {
-      localStorage.setItem(storageName ?? 'CookiesAccepted', 'true')
-    }
-    onAccept?.(true)
-  }
-
-  if (acceptOnTimer > 0 && !accepted) {
-    setTimeout(() => {
-      onAcceptClick()
-    }, acceptOnTimer)
-  }
-
-  if (!storageName) {
-    return (
-      <FlexRow justifyContent="center" paddingY={2} {...props}>
-        <Typography color="error" variant="body1">
-          Missing CookieConsentContext
-        </Typography>
-      </FlexRow>
-    )
-  }
-
-  return accepted ? null : (
-    <FlexRow justifyContent="space-between" {...props}>
-      <Typography variant="body2" margin={2}>
-        {'This site uses '}
-        <Link href="https://cookiesandyou.com/" rel="noopener noreferrer" target="_blank">
-          cookies
-        </Link>
-        {' and '}
-        <Link href="https://policies.google.com/technologies/partner-sites" rel="noopener noreferrer" target="_blank">
-          Google&nbsp;tools
-        </Link>
-        {' to analyze traffic and for ads measurement purposes.'}
-      </Typography>
-      <ButtonEx variant="contained" color="secondary" onClick={onAcceptClick} margin={2}>
-        Accept
-      </ButtonEx>
-    </FlexRow>
-  )
-}

package/src/components/CookieConsent/CookieConsentProps.tsx

@@ -1,7 +0,0 @@
-import { FlexBoxProps } from '../FlexBox'
-
-export interface CookieConsentProps extends FlexBoxProps {
-  acceptOnScroll?: boolean
-  acceptOnTimer?: number
-  onAccept?: (accepted: boolean) => void
-}

package/src/components/CookieConsent/index.ts

@@ -1,3 +0,0 @@
-export * from './CookieConsent'
-export * from './CookieConsentBody'
-export * from './CookieConsentProps'

package/src/components/CoverProgress.tsx

@@ -1,26 +0,0 @@
-import { CircularProgress, useTheme } from '@mui/material'
-import React from 'react'
-
-import { ErrorsViewer } from './Errors'
-import { FlexGrowRow } from './FlexBox'
-
-export interface CoverProgressProps {
-  errors?: Error[]
-  onRetry?: () => void
-  opacity?: number | string
-  open?: boolean
-  paper?: boolean
-}
-
-export const CoverProgress: React.FC<CoverProgressProps> = (props) => {
-  const { paper = true, open, opacity = 0.25, errors, onRetry } = props
-  const theme = useTheme()
-  if (open) {
-    return (
-      <FlexGrowRow position="absolute" margin={-1} top={0} bottom={0} right={0} left={0} bgcolor={paper ? theme.palette.background.paper : theme.palette.background.default}>
-        {(errors?.length ?? 0) === 0 ? <CircularProgress style={{ opacity }} /> : <ErrorsViewer margin={1} errors={errors} onRetry={onRetry} />}
-      </FlexGrowRow>
-    )
-  }
-  return null
-}

package/src/components/Errors/ErrorViewer.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { ErrorViewer } from './ErrorViewer'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: ErrorViewer,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/ErrorViewer',
-} as ComponentMeta<typeof ErrorViewer>
-
-const Template: ComponentStory<typeof ErrorViewer> = (args) => <ErrorViewer {...args}></ErrorViewer>
-
-const Default = Template.bind({})
-Default.args = {
-  title: 'Default',
-}
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/Errors/ErrorViewer.tsx

@@ -1,22 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import React from 'react'
-
-import { FlexCol } from '../FlexBox'
-import { ErrorViewerProps } from './ErrorViewerProps'
-
-const ErrorViewer: React.FC<ErrorViewerProps> = (props) => {
-  const { error, ...boxProps } = props
-  const theme = useTheme()
-  return (
-    <FlexCol color={theme.palette.error.main} {...boxProps}>
-      <Typography align="center" variant="subtitle1">
-        {error?.name}
-      </Typography>
-      <Typography align="center" variant="body2">
-        {error?.message}
-      </Typography>
-    </FlexCol>
-  )
-}
-
-export { ErrorViewer }

package/src/components/Errors/ErrorViewerProps.ts

@@ -1,7 +0,0 @@
-import { BoxProps } from '@mui/material'
-
-interface ErrorViewerProps extends BoxProps {
-  error?: Error
-}
-
-export type { ErrorViewerProps }

package/src/components/Errors/ErrorsViewer.stories.tsx

@@ -1,27 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { ErrorsViewer } from './ErrorsViewer'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: ErrorsViewer,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/ErrorsViewer',
-} as ComponentMeta<typeof ErrorsViewer>
-
-const Template: ComponentStory<typeof ErrorsViewer> = (args) => <ErrorsViewer {...args}></ErrorsViewer>
-
-const Default = Template.bind({})
-Default.args = {
-  errors: [Error('Error One'), Error('Error Two')],
-  title: 'Default',
-}
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/Errors/ErrorsViewer.tsx

@@ -1,25 +0,0 @@
-import ReplayIcon from '@mui/icons-material/Replay'
-import { IconButton } from '@mui/material'
-import React from 'react'
-
-import { FlexGrowCol } from '../FlexBox'
-import { ErrorsViewerProps } from './ErrorsViewerProps'
-import { ErrorViewer } from './ErrorViewer'
-
-const ErrorsViewer: React.FC<ErrorsViewerProps> = (props) => {
-  const { onRetry, errors, ...boxProps } = props
-  return (
-    <FlexGrowCol padding={1} {...boxProps}>
-      {errors?.map((error, index) => {
-        return <ErrorViewer error={error} key={index} />
-      })}
-      {onRetry ? (
-        <IconButton onClick={onRetry}>
-          <ReplayIcon />
-        </IconButton>
-      ) : null}
-    </FlexGrowCol>
-  )
-}
-
-export { ErrorsViewer }

package/src/components/Errors/ErrorsViewerProps.ts

@@ -1,8 +0,0 @@
-import { BoxProps } from '@mui/material'
-
-interface ErrorsViewerProps extends BoxProps {
-  errors?: Error[]
-  onRetry?: () => void
-}
-
-export type { ErrorsViewerProps }

package/src/components/Errors/index.ts

@@ -1,4 +0,0 @@
-import { ErrorsViewer } from './ErrorsViewer'
-import { ErrorViewer } from './ErrorViewer'
-
-export { ErrorsViewer, ErrorViewer }

package/src/components/EthAccount/EthAccountBox.stories.tsx

@@ -1,106 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { EthAddress } from '@xylabs/sdk-js'
-
-import { FlexRow } from '../FlexBox'
-import { EthAccountBox } from './EthAccountBox'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: EthAccountBox,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'EthAccount/Box',
-} as ComponentMeta<typeof EthAccountBox>
-
-const Template: ComponentStory<typeof EthAccountBox> = (args) => (
-  <FlexRow>
-    <EthAccountBox height={40} {...args}></EthAccountBox>
-  </FlexRow>
-)
-
-const Long = Template.bind({})
-Long.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'long',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const LongEmpty = Template.bind({})
-LongEmpty.args = {
-  addressLength: 'long',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Medium = Template.bind({})
-Medium.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'short',
-  icon: true,
-  shortenedLength: 8,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const MediumEmpty = Template.bind({})
-MediumEmpty.args = {
-  addressLength: 'short',
-  icon: true,
-  shortenedLength: 8,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Short = Template.bind({})
-Short.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'short',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const ShortEmpty = Template.bind({})
-ShortEmpty.args = {
-  addressLength: 'short',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Auto = Template.bind({})
-Auto.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'auto',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const AutoEmpty = Template.bind({})
-AutoEmpty.args = {
-  addressLength: 'auto',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const IconOnly = Template.bind({})
-IconOnly.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  icon: true,
-  iconOnly: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-export { Auto, AutoEmpty, IconOnly, Long, LongEmpty, Medium, MediumEmpty, Short, ShortEmpty }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/EthAccount/EthAccountBox.tsx

@@ -1,56 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import { assertEx, EthAddress } from '@xylabs/sdk-js'
-import { useContext } from 'react'
-
-import { EthersContext } from '../../contexts'
-import { useMediaQuery } from '../../hooks'
-import { FlexBoxProps, FlexRow } from '../FlexBox'
-import { Identicon } from '../Identicon'
-import { EthAccountProps } from './EthAccountProps'
-
-export const EthAccountBox: React.FC<EthAccountProps & FlexBoxProps> = ({
-  address,
-  icon = false,
-  iconSize = 16,
-  iconOnly = false,
-  shortenedLength,
-  height,
-  addressLength = 'auto',
-  fontFamily = '"Source Code Pro",monospace',
-  ...props
-}) => {
-  const { localAddress } = useContext(EthersContext)
-  const theme = useTheme()
-
-  const large = useMediaQuery(theme.breakpoints.up('md'))
-
-  const isLocalAddress = address ? localAddress?.toString() === address.toString() : false
-
-  const addressToDisplay = assertEx(address ?? EthAddress.fromString('0x00'), 'Bad Eth Address')
-
-  const textToDisplay = address
-    ? addressLength === 'long'
-      ? addressToDisplay.toString()
-      : addressLength === 'short'
-      ? addressToDisplay.toShortString(shortenedLength)
-      : large
-      ? addressToDisplay.toString()
-      : addressToDisplay.toShortString()
-    : '-- --'
-
-  // Note: We use the all zero address for spacing in case it is
-
-  return (
-    <FlexRow height={height} justifyContent="space-between" alignItems="stretch" minHeight={theme.spacing(3)} {...props}>
-      {icon ? (
-        <Identicon minHeight={height ?? theme.spacing(3)} minWidth={height ?? theme.spacing(3)} bgcolor={theme.palette.secondary.main} size={iconSize} value={address?.toHex()} />
-      ) : null}
-      {iconOnly ? null : (
-        <Typography alignSelf="center" marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily}>
-          {textToDisplay}
-        </Typography>
-      )}
-      {isLocalAddress ? <FlexRow marginLeft={0.5}>(You)</FlexRow> : null}
-    </FlexRow>
-  )
-}

package/src/components/EthAccount/EthAccountButton.stories.tsx

@@ -1,97 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { EthAddress } from '@xylabs/sdk-js'
-
-import { FlexRow } from '../FlexBox'
-import { EthAccountButton } from './EthAccountButton'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: EthAccountButton,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'EthAccount/Button',
-} as ComponentMeta<typeof EthAccountButton>
-
-const Template: ComponentStory<typeof EthAccountButton> = (args) => (
-  <FlexRow>
-    <EthAccountButton variant="outlined" {...args}></EthAccountButton>
-  </FlexRow>
-)
-
-const Long = Template.bind({})
-Long.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'long',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const LongEmpty = Template.bind({})
-LongEmpty.args = {
-  addressLength: 'long',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Medium = Template.bind({})
-Medium.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'short',
-  icon: true,
-  shortenedLength: 8,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const MediumEmpty = Template.bind({})
-MediumEmpty.args = {
-  addressLength: 'short',
-  icon: true,
-  shortenedLength: 8,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Short = Template.bind({})
-Short.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'short',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const ShortEmpty = Template.bind({})
-ShortEmpty.args = {
-  addressLength: 'short',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const Auto = Template.bind({})
-Auto.args = {
-  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  addressLength: 'auto',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-const AutoEmpty = Template.bind({})
-AutoEmpty.args = {
-  addressLength: 'auto',
-  icon: true,
-  title: 'Sample EthAccount',
-  toEtherScan: true,
-}
-
-export { Auto, AutoEmpty, Long, LongEmpty, Medium, MediumEmpty, Short, ShortEmpty }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/EthAccount/EthAccountButton.tsx

@@ -1,58 +0,0 @@
-import { useTheme } from '@mui/material'
-import { MouseEvent } from 'react'
-
-import { ButtonEx, ButtonExProps } from '../ButtonEx'
-import { FlexRow } from '../FlexBox'
-import { Identicon } from '../Identicon'
-import { EthAccountBox } from './EthAccountBox'
-import { EthAccountProps } from './EthAccountProps'
-
-export interface EthAccountButtonProps extends EthAccountProps {
-  toEtherScan?: boolean
-}
-
-export const EthAccountButton: React.FC<EthAccountButtonProps & ButtonExProps> = ({
-  address,
-  full,
-  icon = false,
-  iconSize = 16,
-  iconOnly = false,
-  shortenedLength,
-  addressLength = 'auto',
-  fontFamily = '"Source Code Pro",monospace',
-  toEtherScan,
-  onClick,
-  ...props
-}) => {
-  const onClickLocal = (event: MouseEvent<HTMLButtonElement>) => {
-    onClick?.(event)
-    if (toEtherScan && address) {
-      window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
-    }
-  }
-
-  const theme = useTheme()
-
-  return (
-    <ButtonEx onClick={onClickLocal} title={`0x${address?.toHex()}`} {...props}>
-      {icon ? (
-        <FlexRow position="absolute" top={0} left={0} bottom={0} paddingX={0.5} bgcolor={theme.palette.secondary.main}>
-          <Identicon minHeight={theme.spacing(3)} minWidth={theme.spacing(3)} bgcolor={theme.palette.secondary.main} size={iconSize} value={address?.toHex()} />
-        </FlexRow>
-      ) : null}
-      <EthAccountBox
-        marginLeft={icon ? 3 : 0}
-        address={address}
-        addressLength={addressLength}
-        shortenedLength={shortenedLength}
-        full={full}
-        iconSize={iconSize}
-        iconOnly={iconOnly}
-        fontFamily={fontFamily}
-      />
-    </ButtonEx>
-  )
-}
-
-/** @deprecated use EthAccountButton or EthAccountBox */
-export const EthAccount = EthAccountButton

package/src/components/EthAccount/EthAccountProps.tsx

@@ -1,15 +0,0 @@
-import { EthAddress } from '@xylabs/sdk-js'
-
-interface EthAccountProps {
-  address?: EthAddress | null
-  addressLength?: 'auto' | 'short' | 'long'
-  shortenedLength?: number
-  full?: boolean
-  icon?: boolean
-  iconSize?: number
-  iconOnly?: boolean
-  toEtherScan?: boolean
-  fontFamily?: string
-}
-
-export type { EthAccountProps }

package/src/components/EthAccount/index.ts

@@ -1,3 +0,0 @@
-export * from './EthAccountBox'
-export * from './EthAccountButton'
-export * from './EthAccountProps'