@xyo-network/react-wallet 7.5.8 → 7.5.11

package/src/components/MaxAccounts/MaxAccountsTableRow.tsx

@@ -1,75 +0,0 @@
-import type { TableRowProps } from '@mui/material'
-import {
-  ButtonGroup, TableCell, TableRow, Typography,
-} from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import React, { useState } from 'react'
-
-import { OutOfBoundsSnackBar } from './OutOfBoundsSnackBar.tsx'
-
-/** @public */
-export interface MaxAccountsTableRow extends TableRowProps {
-  activeAccountIndex?: number
-  changeMaxAccounts?: (maxAccounts: number) => void
-  maxAccounts?: number
-}
-
-/** @public */
-export const MaxAccountsTableRow: React.FC<MaxAccountsTableRow> = ({
-  activeAccountIndex, changeMaxAccounts, maxAccounts,
-}) => {
-  const [desiredMaximumAccounts, setDesiredMaximumAccounts] = useState<number | undefined>()
-  const [showSnackBar, setShowSnackBar] = useState(false)
-
-  const handleChangeMaxAccounts = (change: 'increase' | 'decrease') => {
-    if (maxAccounts !== undefined && activeAccountIndex !== undefined) {
-      switch (change) {
-        case 'decrease': {
-          const desiredMaximumAccounts = maxAccounts - 1
-          const validMaximumAccounts = desiredMaximumAccounts > 0
-          const maxAccountsWithinRange = activeAccountIndex + 1 <= desiredMaximumAccounts
-          if (validMaximumAccounts && maxAccountsWithinRange) {
-            changeMaxAccounts?.(desiredMaximumAccounts)
-          }
-          if (!maxAccountsWithinRange) setShowSnackBar(true)
-          setDesiredMaximumAccounts(desiredMaximumAccounts)
-          return
-        }
-        case 'increase': {
-          changeMaxAccounts?.(maxAccounts + 1)
-          return
-        }
-        default: {
-          console.error(change, 'is not a recognized value')
-        }
-      }
-    } else {
-      throw new Error('Max Accounts is unset and needs a default')
-    }
-  }
-
-  return (
-    <TableRow>
-      <TableCell>Maximum Accounts</TableCell>
-      <TableCell align="center">
-        <Typography variant="caption">{maxAccounts}</Typography>
-      </TableCell>
-      <TableCell align="center">
-        <ButtonGroup>
-          <ButtonEx onClick={() => handleChangeMaxAccounts('decrease')} variant="contained" size="small">
-            -
-          </ButtonEx>
-          <ButtonEx onClick={() => handleChangeMaxAccounts('increase')} variant="contained" size="small">
-            +
-          </ButtonEx>
-        </ButtonGroup>
-        <OutOfBoundsSnackBar
-          desiredMaximumAccounts={desiredMaximumAccounts}
-          activeAccountIndex={activeAccountIndex}
-          setShowSnackBar={setShowSnackBar}
-          showSnackBar={showSnackBar}
-        />
-      </TableCell>
-    </TableRow>
-  )
-}

package/src/components/MaxAccounts/OutOfBoundsSnackBar.tsx

@@ -1,41 +0,0 @@
-import type { SnackbarProps } from '@mui/material'
-import {
-  Alert, AlertTitle, Snackbar,
-} from '@mui/material'
-import type { Dispatch, SetStateAction } from 'react'
-import React from 'react'
-
-/** @public */
-export interface OutOfBoundsSnackBarProps extends SnackbarProps {
-  activeAccountIndex?: number
-  desiredMaximumAccounts?: number
-  setShowSnackBar?: Dispatch<SetStateAction<boolean>>
-  showSnackBar?: boolean
-}
-
-/** @public */
-export const OutOfBoundsSnackBar: React.FC<OutOfBoundsSnackBarProps> = ({
-  activeAccountIndex,
-  desiredMaximumAccounts,
-  setShowSnackBar,
-  showSnackBar,
-}) => {
-  return (
-    <Snackbar
-      anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
-      autoHideDuration={5000}
-      onClose={() => setShowSnackBar?.(false)}
-      open={showSnackBar}
-    >
-      <Alert severity="error" onClose={() => setShowSnackBar?.(false)}>
-        <AlertTitle>Maximum Accounts Error</AlertTitle>
-        Your currently selected account number (
-        {activeAccountIndex === undefined ? '' : activeAccountIndex + 1}
-        ) cannot be greater than the desired
-        Maximum Accounts (
-        {desiredMaximumAccounts}
-        ).
-      </Alert>
-    </Snackbar>
-  )
-}

package/src/components/MaxAccounts/index.ts

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

package/src/components/SeedPhrase/DefaultSeedPhrase.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { DefaultSeedPhrase } from './DefaultSeedPhrase.tsx'
-
-export default {
-  component: DefaultSeedPhrase,
-  title: 'Wallet/DefaultSeedPhrase',
-} as Meta
-
-const Template: StoryFn<typeof DefaultSeedPhrase> = props => <DefaultSeedPhrase {...props} />
-
-const Default = Template.bind({})
-Default.args = { seedPhrase: 'test me' }
-
-const WithoutDefaultSeedPhrase = Template.bind({})
-WithoutDefaultSeedPhrase.args = { changeSeedPhrase: (mnemonic?: string) => alert(`Generated Default Seed Phrase: ${mnemonic}`) }
-
-const WithHiddenDefaultSeedPhrase = Template.bind({})
-WithHiddenDefaultSeedPhrase.args = {
-  hideDefaultSeedPhraseMessage: true,
-  ...WithoutDefaultSeedPhrase.args,
-}
-
-export {
-  Default, WithHiddenDefaultSeedPhrase, WithoutDefaultSeedPhrase,
-}

package/src/components/SeedPhrase/DefaultSeedPhrase.tsx

@@ -1,52 +0,0 @@
-import {
-  Alert, AlertTitle, Snackbar,
-} from '@mui/material'
-import { generateMnemonic } from '@scure/bip39'
-import { wordlist } from '@scure/bip39/wordlists/english.js'
-import { isUndefinedOrNull } from '@xylabs/sdk-js'
-import type { PropsWithChildren } from 'react'
-import React, { useState } from 'react'
-
-/** @public */
-export interface DefaultSeedPhraseProps extends PropsWithChildren {
-  changeSeedPhrase?: (seedPhrase: string) => void
-  hideDefaultSeedPhraseMessage?: boolean
-  seedPhrase?: string
-}
-
-/** @public */
-export const DefaultSeedPhrase: React.FC<DefaultSeedPhraseProps> = ({
-  changeSeedPhrase, children, hideDefaultSeedPhraseMessage, seedPhrase,
-}) => {
-  const [showSnackBar, setShowSnackBar] = useState(false)
-  const [previousSeedPhrase, setPreviousSeedPhrase] = useState<string | undefined>()
-  if (seedPhrase !== previousSeedPhrase) {
-    setPreviousSeedPhrase(seedPhrase)
-    if (isUndefinedOrNull(previousSeedPhrase) && !isUndefinedOrNull(seedPhrase)) {
-      const mnemonic = generateMnemonic(wordlist, 256)
-      changeSeedPhrase?.(mnemonic)
-      setShowSnackBar(true)
-    }
-  }
-
-  return (
-    <>
-      {hideDefaultSeedPhraseMessage
-        ? null
-        : (
-            <Snackbar
-              open={showSnackBar}
-              autoHideDuration={5000}
-              onClose={() => setShowSnackBar(false)}
-              anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
-            >
-              <Alert severity="success">
-                <AlertTitle>Default Seed Phrase Generated</AlertTitle>
-                Go to application settings to save it.
-              </Alert>
-            </Snackbar>
-          )}
-      {children}
-    </>
-  )
-}

package/src/components/SeedPhrase/_shared/SeedPhraseIconButton.tsx

@@ -1,53 +0,0 @@
-import { HelpOutline as HelpOutlineIcon } from '@mui/icons-material'
-import type { IconButtonProps } from '@mui/material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Link,
-  List,
-  ListItem,
-  Typography,
-} from '@mui/material'
-import React, { useState } from 'react'
-
-/** @internal */
-export const SeedPhraseIconButton: React.FC<IconButtonProps> = (props) => {
-  const [open, setOpen] = useState(false)
-  const onClose = () => setOpen(false)
-  return (
-    <>
-      <IconButton onClick={() => setOpen(true)} {...props}>
-        <HelpOutlineIcon fontSize="small" />
-      </IconButton>
-      <Dialog open={open}>
-        <DialogTitle>Understanding your Seed Phrase</DialogTitle>
-        <DialogContent>
-          <Typography>
-            Your Seed Phrase should adhere to the
-            {' '}
-            <Link target="_blank" href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">
-              bip39 specification
-            </Link>
-            {' '}
-            and is used to generate accounts which identify your data on the XYO Network.
-          </Typography>
-          <List>
-            <ListItem>Do not share this phrase with anyone.</ListItem>
-            <ListItem>Do not save it to a public computer.</ListItem>
-            <ListItem>Do not use a existing phrase from another wallet (i.e. Metamask).</ListItem>
-            <ListItem>Do not use before copying it down somewhere safe.</ListItem>
-          </List>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={onClose} variant="outlined">
-            OK
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}

package/src/components/SeedPhrase/_shared/index.ts

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

package/src/components/SeedPhrase/dialog/SeedPhraseDialog.stories.tsx

@@ -1,33 +0,0 @@
-import { Button, Typography } from '@mui/material'
-import { generateMnemonic } from '@scure/bip39'
-import { wordlist } from '@scure/bip39/wordlists/english.js'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
-
-import { SeedPhraseDialog } from './SeedPhraseDialog.tsx'
-
-export default {
-  component: SeedPhraseDialog,
-  title: 'Wallet/SeedPhraseDialog',
-} as Meta
-
-const Template: StoryFn<typeof SeedPhraseDialog> = (props) => {
-  const mnemonic = generateMnemonic(wordlist, 256)
-  const [seedPhrase, setSeedPhrase] = useState(mnemonic)
-  const [open, setOpen] = useState(false)
-  return (
-    <FlexCol rowGap={3}>
-      <Button variant="contained" onClick={() => setOpen(true)}>
-        Open Dialog
-      </Button>
-      <Typography>Seed Phrase</Typography>
-      <code>{seedPhrase}</code>
-      <SeedPhraseDialog showCopyButton seedPhrase={seedPhrase} changeSeedPhrase={setSeedPhrase} {...props} open={open} onClose={() => setOpen(false)} />
-    </FlexCol>
-  )
-}
-
-const Default = Template.bind({})
-
-export { Default }

package/src/components/SeedPhrase/dialog/SeedPhraseDialog.tsx

@@ -1,84 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Dialog, DialogContent, DialogTitle, FormLabel,
-} from '@mui/material'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { SeedPhraseProvider, useSeedPhrase } from '../../../contexts/index.ts'
-import { SeedPhraseIconButton } from '../_shared/index.ts'
-import {
-  DialogActionButtons,
-  NewPhraseTextField,
-  OverwriteWarning,
-  PhraseDialogActions,
-  PhraseHeaderBox,
-  SavedPhraseTextField,
-} from './components/index.ts'
-
-/** @public */
-export interface SeedPhraseDialogProps extends DialogProps {
-  changeSeedPhrase?: (value: string) => void
-  dialogTitle?: ReactNode
-  seedPhrase?: string
-  seedPhraseTextFieldTitle?: ReactNode
-  showCopyButton?: boolean
-}
-
-/** @public */
-export const SeedPhraseDialog: React.FC<SeedPhraseDialogProps> = ({
-  changeSeedPhrase, dialogTitle = 'Update Your Seed Phrase', seedPhrase, seedPhraseTextFieldTitle = 'New Seed Phrase', ...props
-}) => {
-  return (
-    <SeedPhraseProvider
-      seedPhrase={seedPhrase}
-      handleChangeSeedPhrase={changeSeedPhrase}
-      open={props.open}
-      saveCallback={() => props.onClose?.({}, 'escapeKeyDown')}
-    >
-      <SeedPhraseDialogInner dialogTitle={dialogTitle} seedPhraseTextFieldTitle={seedPhraseTextFieldTitle} {...props} />
-    </SeedPhraseProvider>
-  )
-}
-
-/** @public */
-export const SeedPhraseDialogInner: React.FC<SeedPhraseDialogProps> = ({
-  dialogTitle, seedPhraseTextFieldTitle, showCopyButton, ...props
-}) => {
-  const {
-    overwriteWarning, seedPhrase, validPhrase,
-  } = useSeedPhrase()
-
-  return (
-    <Dialog aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" fullWidth maxWidth="sm" {...props}>
-      <DialogTitle
-        id="alert-dialog-title"
-        sx={{
-          alignItems: 'center', display: 'inline-flex', flexDirection: 'row',
-        }}
-      >
-        {dialogTitle}
-        <SeedPhraseIconButton />
-      </DialogTitle>
-      <DialogContent sx={{
-        display: 'flex', flexDirection: 'column', rowGap: 2,
-      }}
-      >
-
-        <NewPhraseTextField>
-          <FormLabel>
-            <PhraseHeaderBox conditional={validPhrase}>{seedPhraseTextFieldTitle}</PhraseHeaderBox>
-          </FormLabel>
-        </NewPhraseTextField>
-        <PhraseDialogActions />
-        {seedPhrase
-          ? <SavedPhraseTextField showCopyButton={showCopyButton} />
-          : null}
-        {overwriteWarning
-          ? <OverwriteWarning />
-          : null}
-      </DialogContent>
-      <DialogActionButtons onClose={props.onClose} />
-    </Dialog>
-  )
-}

package/src/components/SeedPhrase/dialog/components/DialogActionButtons.tsx

@@ -1,33 +0,0 @@
-import type { DialogActionsProps, DialogProps } from '@mui/material'
-import { Button, DialogActions } from '@mui/material'
-import type { MouseEvent } from 'react'
-import React from 'react'
-
-import { useSeedPhrase } from '../../../../contexts/index.ts'
-
-/** @public */
-export interface DialogActionButtonsProps extends DialogActionsProps {
-  onClose?: DialogProps['onClose']
-}
-
-/** @public */
-export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({ onClose, ...props }) => {
-  const { handleSave, setPhrase } = useSeedPhrase()
-
-  const wrappedOnClose = (e: MouseEvent<HTMLElement>) => {
-    // clear local copy of phrase when modal closes
-    setPhrase?.('')
-    onClose?.(e, 'escapeKeyDown')
-  }
-
-  return (
-    <DialogActions {...props}>
-      <Button variant="outlined" onClick={wrappedOnClose}>
-        Cancel
-      </Button>
-      <Button type="submit" variant="contained" onClick={handleSave}>
-        Save
-      </Button>
-    </DialogActions>
-  )
-}

package/src/components/SeedPhrase/dialog/components/OverwriteWarning.tsx

@@ -1,28 +0,0 @@
-import { Alert, Button } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { useSeedPhrase } from '../../../../contexts/index.ts'
-
-/** @public */
-export const OverwriteWarning = () => {
-  const { handleCancelOverwrite, handleSave } = useSeedPhrase()
-  return (
-    <Alert
-      variant="outlined"
-      severity="warning"
-      action={(
-        <FlexRow sx={{ columnGap: 1 }}>
-          <Button variant="outlined" color="inherit" size="small" onClick={handleSave}>
-            Overwrite
-          </Button>
-          <Button variant="outlined" color="inherit" size="small" onClick={handleCancelOverwrite}>
-            Cancel
-          </Button>
-        </FlexRow>
-      )}
-    >
-      Are you sure you want to overwrite existing seed phrase? This action cannot be undone.
-    </Alert>
-  )
-}

package/src/components/SeedPhrase/dialog/components/fields/NewPhraseTextField.tsx

@@ -1,45 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import { FormControl, TextField } from '@mui/material'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { useSeedPhrase } from '../../../../../contexts/index.ts'
-import { colorParser, InvalidPhraseTypography } from './validation-messages/index.ts'
-
-/** @public */
-export interface NewPhraseTextFieldProps extends StandardTextFieldProps {
-  children?: ReactNode
-  disableColor?: boolean
-}
-
-/** @public */
-export const NewPhraseTextField: React.FC<NewPhraseTextFieldProps> = ({
-  children, disableColor, ...props
-}) => {
-  const {
-    phrase, setPhrase, validPhrase,
-  } = useSeedPhrase()
-  return (
-    <FormControl
-      fullWidth
-      size="small"
-      sx={{
-        display: 'flex', flexDirection: 'column', rowGap: 1,
-      }}
-    >
-      {children}
-      <TextField
-        focused
-        color={disableColor ? undefined : colorParser(validPhrase)}
-        error={validPhrase === false}
-        helperText={validPhrase === false ? <InvalidPhraseTypography /> : null}
-        fullWidth
-        maxRows={Number.POSITIVE_INFINITY}
-        multiline
-        onChange={e => setPhrase?.(e.target.value)}
-        value={phrase}
-        {...props}
-      />
-    </FormControl>
-  )
-}

package/src/components/SeedPhrase/dialog/components/fields/PhraseDialogActions.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { SeedPhraseProvider } from '../../../../../contexts/index.ts'
-import { PhraseDialogActions } from './PhraseDialogActions.tsx'
-
-export default {
-  title: 'Wallet/PhraseDialogActions',
-  component: PhraseDialogActions,
-} as Meta
-
-const Template: StoryFn<typeof PhraseDialogActions> = args => (
-  <SeedPhraseProvider>
-    <PhraseDialogActions {...args} />
-  </SeedPhraseProvider>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithHideGenerate = Template.bind({})
-WithHideGenerate.args = { hideGenerate: true }
-
-const WithHideClear = Template.bind({})
-WithHideClear.args = { hideClear: true }
-
-export {
-  Default, WithHideClear, WithHideGenerate,
-}

package/src/components/SeedPhrase/dialog/components/fields/PhraseDialogActions.tsx

@@ -1,38 +0,0 @@
-import type { DialogActionsProps } from '@mui/material'
-import { Button, DialogActions } from '@mui/material'
-import React from 'react'
-
-import { useSeedPhrase } from '../../../../../contexts/index.ts'
-
-export interface PhraseDialogActionsProps extends DialogActionsProps {
-  hideClear?: boolean
-  hideGenerate?: boolean
-}
-
-/** @public */
-export const PhraseDialogActions: React.FC<PhraseDialogActionsProps> = ({
-  hideClear, hideGenerate, ...props
-}) => {
-  const {
-    handleClear, handleGenerate, overwriteWarning,
-  } = useSeedPhrase()
-  return (
-    <DialogActions sx={{ justifyContent: 'center' }} {...props}>
-      {hideGenerate
-        ? null
-        : (
-            <Button disabled={overwriteWarning} variant="contained" onClick={handleGenerate}>
-              Generate
-            </Button>
-          )}
-      {hideClear
-        ? null
-        : (
-            <Button variant="outlined" onClick={handleClear}>
-              Clear
-            </Button>
-
-          )}
-    </DialogActions>
-  )
-}

package/src/components/SeedPhrase/dialog/components/fields/SavedPhraseTextField.tsx

@@ -1,113 +0,0 @@
-import { ContentCopy } from '@mui/icons-material'
-import type { StandardTextFieldProps } from '@mui/material'
-import {
-  Chip, FormControl, FormLabel, IconButton, TextField,
-  Tooltip,
-  useTheme,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
-
-import { useSeedPhrase } from '../../../../../contexts/index.ts'
-import { InvalidPhraseTypography, PhraseHeaderBox } from './validation-messages/index.ts'
-
-/** @public */
-export interface SavedPhraseTextFieldProps extends StandardTextFieldProps {
-  fullWidth?: boolean
-  showCopyButton?: boolean
-  showPhraseHeader?: boolean
-  visible?: boolean
-}
-
-/** @public */
-export const SavedPhraseTextField: React.FC<SavedPhraseTextFieldProps> = ({
-
-  fullWidth, showCopyButton, showPhraseHeader, visible: visibleProp, ...props
-}) => {
-  const { validSeedPhrase, seedPhrase } = useSeedPhrase()
-  const theme = useTheme()
-
-  const [visible, setVisible] = useState(visibleProp)
-
-  const [previousVisibleProp, setPreviousVisibleProp] = useState(visibleProp)
-  if (visibleProp !== previousVisibleProp) {
-    setPreviousVisibleProp(visibleProp)
-    setVisible(visibleProp)
-  }
-
-  const [copied, setCopied] = useState(false)
-  const onCopyPhrase = async () => {
-    if (seedPhrase) {
-      try {
-        await navigator.clipboard.writeText(seedPhrase)
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
-      } catch (e) {
-        console.error('Error copying resolvedSelectedAddress to clipboard', e)
-      }
-    }
-  }
-
-  return (
-    <FormControl
-      fullWidth={fullWidth}
-      size="small"
-      sx={{
-        display: 'flex', flexDirection: 'column', rowGap: 1,
-      }}
-    >
-      <FlexRow gap={0.5}>
-        <Chip
-          label="Show Seed Phrase"
-          onClick={() => setVisible(!visible)}
-          // Margin is set to 2px to match the Copy Button size and remove jumping during animation
-          sx={{ alignSelf: 'center', my: '2px' }}
-        />
-        <Tooltip title={copied ? 'Copied!' : 'Copy'}>
-          <IconButton
-            onClick={() => void onCopyPhrase()}
-            sx={{
-              height: visible ? 'auto' : 0,
-              opacity: visible ? 1 : 0,
-              overflow: 'hidden',
-              padding: visible ? theme.spacing(1) : 0,
-              transition: 'all .25s ease-in-out',
-              width: visible ? 'max-content' : 0,
-            }}
-          >
-            <ContentCopy fontSize="small" />
-          </IconButton>
-        </Tooltip>
-      </FlexRow>
-      {visible && showPhraseHeader
-        ? (
-            <FormLabel>
-              <PhraseHeaderBox conditional={validSeedPhrase}>Saved Seed Phrase</PhraseHeaderBox>
-            </FormLabel>
-          )
-        : null}
-      <TextField
-        defaultValue={seedPhrase}
-        disabled
-        error={validSeedPhrase === false}
-        helperText={validSeedPhrase === false ? <InvalidPhraseTypography /> : null}
-        fullWidth
-        maxRows={Number.POSITIVE_INFINITY}
-        multiline
-        slotProps={{
-          input: {
-            style: {
-              height: visible ? 'auto' : '0',
-              overflow: 'hidden',
-              opacity: visible ? 1 : 0,
-              padding: visible ? theme.spacing(1) : 0,
-              transition: 'all .25s ease-in-out',
-            },
-          },
-        }}
-        {...props}
-      />
-
-    </FormControl>
-  )
-}

package/src/components/SeedPhrase/dialog/components/fields/index.ts

@@ -1,4 +0,0 @@
-export * from './NewPhraseTextField.tsx'
-export * from './PhraseDialogActions.tsx'
-export * from './SavedPhraseTextField.tsx'
-export * from './validation-messages/index.ts'