@xyo-network/react-wallet 2.41.46 → 2.41.47

package/dist/types/contexts/SeedPhrase/use.d.ts

@@ -0,0 +1,2 @@
+export declare const useSeedPhrase: () => Omit<import("./State").SeedPhraseContextState & import("@xyo-network/react-shared").ContextExState, "provided">;
+//# sourceMappingURL=use.d.ts.map

package/dist/types/contexts/SeedPhrase/use.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/SeedPhrase/use.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,uHAA4D,CAAA"}

package/dist/types/contexts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Account';
+export * from './SeedPhrase';
 export * from './Wallet';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA"}

package/package.json

@@ -10,15 +10,16 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/eth-address": "^2.6.16",
-    "@xylabs/react-common": "^2.15.17",
-    "@xylabs/react-crypto": "^2.15.17",
-    "@xylabs/react-flexbox": "^2.15.17",
-    "@xylabs/react-identicon": "^2.15.17",
-    "@xylabs/react-number-status": "^2.15.17",
-    "@xylabs/react-shared": "^2.15.17",
-    "@xyo-network/react-network": "^2.41.46",
-    "@xyo-network/react-shared": "^2.41.46"
+    "@scure/bip39": "^1.1.1",
+    "@xylabs/eth-address": "^2.7.1",
+    "@xylabs/react-common": "^2.16.3",
+    "@xylabs/react-crypto": "^2.16.3",
+    "@xylabs/react-flexbox": "^2.16.3",
+    "@xylabs/react-identicon": "^2.16.3",
+    "@xylabs/react-number-status": "^2.16.3",
+    "@xylabs/react-shared": "^2.16.3",
+    "@xyo-network/react-network": "^2.41.47",
+    "@xyo-network/react-shared": "^2.41.47"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -32,10 +33,10 @@
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
     "@storybook/react": "^6.5.16",
-    "@xylabs/ts-scripts-yarn3": "^2.13.9",
-    "@xylabs/tsconfig-react": "^2.13.9",
-    "@xyo-network/account": "^2.43.27",
-    "@xyo-network/wallet": "^2.43.27",
+    "@xylabs/ts-scripts-yarn3": "^2.14.0",
+    "@xylabs/tsconfig-react": "^2.14.0",
+    "@xyo-network/account": "^2.43.30",
+    "@xyo-network/wallet": "^2.43.30",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -81,5 +82,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.41.46"
+  "version": "2.41.47"
 }

package/src/components/SeedPhrase/SeedPhraseIconButton.tsx

@@ -0,0 +1,50 @@
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  IconButtonProps,
+  Link,
+  List,
+  ListItem,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+
+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/dialog/SeedPhraseDialog.stories.tsx

@@ -0,0 +1,35 @@
+import { Button, Typography } from '@mui/material'
+import { generateMnemonic } from '@scure/bip39'
+// eslint-disable-next-line import/no-internal-modules
+import { wordlist } from '@scure/bip39/wordlists/english'
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+import { SeedPhraseDialog } from './SeedPhraseDialog'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: SeedPhraseDialog,
+  title: 'Wallet/SeedPhraseDialog',
+} as Meta
+
+const Template: ComponentStory<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 seedPhrase={seedPhrase} changeSeedPhrase={setSeedPhrase} {...props} open={open} onClose={() => setOpen(false)} />
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+
+export { Default }

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

@@ -0,0 +1,41 @@
+import { Dialog, DialogContent, DialogProps, DialogTitle } from '@mui/material'
+
+import { SeedPhraseProvider, useSeedPhrase } from '../../../contexts'
+import { SeedPhraseIconButton } from '../SeedPhraseIconButton'
+import { DialogActionButtons, NewPhraseTextField, OverwriteWarning, SavedPhraseTextField } from './components'
+
+export interface SeedPhraseDialogProps extends DialogProps {
+  changeSeedPhrase?: (value: string) => void
+  seedPhrase?: string
+}
+
+export const SeedPhraseDialog: React.FC<SeedPhraseDialogProps> = ({ changeSeedPhrase, seedPhrase, ...props }) => {
+  return (
+    <SeedPhraseProvider
+      seedPhrase={seedPhrase}
+      handleChangeSeedPhrase={changeSeedPhrase}
+      open={props.open}
+      saveCallback={() => props.onClose?.({}, 'escapeKeyDown')}
+    >
+      <SeedPhraseDialogInner {...props} />
+    </SeedPhraseProvider>
+  )
+}
+
+export const SeedPhraseDialogInner: React.FC<SeedPhraseDialogProps> = (props) => {
+  const { overwriteWarning, seedPhrase } = useSeedPhrase()
+
+  return (
+    <Dialog aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" fullWidth maxWidth={'sm'} {...props}>
+      <DialogTitle id="alert-dialog-title">
+        Update Your Seed Phrase <SeedPhraseIconButton />
+      </DialogTitle>
+      <DialogContent sx={{ display: 'flex', flexDirection: 'column', rowGap: 2 }}>
+        <NewPhraseTextField />
+        {seedPhrase ? <SavedPhraseTextField /> : null}
+        {overwriteWarning ? <OverwriteWarning /> : null}
+      </DialogContent>
+      <DialogActionButtons onClose={props.onClose} />
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Button, DialogActions, DialogActionsProps, DialogProps } from '@mui/material'
+import { MouseEvent } from 'react'
+
+import { useSeedPhrase } from '../../../../contexts'
+
+interface DialogActionButtonsProps extends DialogActionsProps {
+  onClose?: DialogProps['onClose']
+}
+
+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 variant="outlined" onClick={handleSave}>
+        Save
+      </Button>
+    </DialogActions>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { Alert, Button } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+import { useSeedPhrase } from '../../../../contexts'
+
+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

@@ -0,0 +1,37 @@
+import { Button, DialogActions, FormControl, FormLabel, StandardTextFieldProps, TextField } from '@mui/material'
+
+import { useSeedPhrase } from '../../../../../contexts'
+import { colorParser, InvalidPhraseTypography, PhraseHeaderBox } from './validation-messages'
+
+export const NewPhraseTextField: React.FC<StandardTextFieldProps> = (props) => {
+  const { handleClear, handleGenerate, overwriteWarning, phrase, setPhrase, validPhrase } = useSeedPhrase()
+  return (
+    <>
+      <FormControl fullWidth size="small" sx={{ display: 'flex', flexDirection: 'column', rowGap: 1 }}>
+        <FormLabel>
+          <PhraseHeaderBox conditional={validPhrase}>New Seed Phrase</PhraseHeaderBox>
+        </FormLabel>
+        <TextField
+          focused
+          color={colorParser(validPhrase)}
+          error={validPhrase === false}
+          helperText={validPhrase === false ? <InvalidPhraseTypography /> : null}
+          fullWidth
+          maxRows={Infinity}
+          multiline
+          onChange={(e) => setPhrase?.(e.target.value)}
+          value={phrase}
+          {...props}
+        />
+      </FormControl>
+      <DialogActions sx={{ justifyContent: 'center' }}>
+        <Button disabled={overwriteWarning} variant="outlined" onClick={handleGenerate}>
+          Generate
+        </Button>
+        <Button variant="outlined" onClick={handleClear}>
+          Clear
+        </Button>
+      </DialogActions>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { Chip, FormControl, FormLabel, StandardTextFieldProps, TextField } from '@mui/material'
+import { useState } from 'react'
+
+import { useSeedPhrase } from '../../../../../contexts'
+import { InvalidPhraseTypography, PhraseHeaderBox } from './validation-messages'
+
+export const SavedPhraseTextField: React.FC<StandardTextFieldProps> = (props) => {
+  const { validSeedPhrase, seedPhrase } = useSeedPhrase()
+
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <FormControl fullWidth size="small" sx={{ display: 'flex', flexDirection: 'column', rowGap: 1 }}>
+      <Chip label={visible ? 'Hide Saved Seed Phrase' : 'Reveal Saved Seed Phrase'} onClick={() => setVisible(!visible)} />
+      {visible ? (
+        <>
+          <FormLabel>
+            <PhraseHeaderBox conditional={validSeedPhrase}>Saved Seed Phrase</PhraseHeaderBox>
+          </FormLabel>
+          <TextField
+            defaultValue={seedPhrase}
+            disabled
+            error={validSeedPhrase === false}
+            helperText={validSeedPhrase === false ? <InvalidPhraseTypography /> : null}
+            fullWidth
+            maxRows={Infinity}
+            multiline
+            {...props}
+          />
+        </>
+      ) : null}
+    </FormControl>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './NewPhraseTextField'
+export * from './SavedPhraseTextField'

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/InvalidPhrase.tsx

@@ -0,0 +1,10 @@
+import { Link, Typography, TypographyProps } from '@mui/material'
+
+export const InvalidPhraseTypography: React.FC<TypographyProps> = (props) => (
+  <Typography variant={'caption'} color={'error'} {...props}>
+    Invalid seed phrase. See -{' '}
+    <Link target={'_blank'} href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki">
+      bip39 Proposal
+    </Link>
+  </Typography>
+)

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/PhraseHeaderBox.tsx

@@ -0,0 +1,40 @@
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+import { useMemo } from 'react'
+
+interface PhraseHeaderBox extends FlexBoxProps, WithChildren {
+  conditional?: boolean | null
+}
+
+export const PhraseHeaderBox: React.FC<PhraseHeaderBox> = ({ children, conditional, ...props }) => {
+  const state = useMemo(() => {
+    switch (conditional) {
+      case true:
+        return 'success'
+      case false:
+        return 'error'
+      default:
+        return null
+    }
+  }, [conditional])
+
+  const Icon = useMemo(() => {
+    switch (state) {
+      case 'success':
+        return <CheckCircleOutlineIcon fontSize="small" color="success" />
+      case 'error':
+        return <HighlightOffIcon fontSize="small" color="error" />
+      default:
+        return null
+    }
+  }, [state])
+
+  return (
+    <FlexRow justifyContent={'start'} columnGap={1} {...props}>
+      {Icon}
+      {children}
+    </FlexRow>
+  )
+}

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/colorParser.ts

@@ -0,0 +1,10 @@
+export const colorParser = (conditional?: boolean | null) => {
+  switch (conditional) {
+    case true:
+      return 'success'
+    case false:
+      return 'error'
+    default:
+      return undefined
+  }
+}

package/src/components/SeedPhrase/dialog/components/fields/validation-messages/index.ts

@@ -0,0 +1,3 @@
+export * from './colorParser'
+export * from './InvalidPhrase'
+export * from './PhraseHeaderBox'

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

@@ -0,0 +1,3 @@
+export * from './DialogActionButtons'
+export * from './fields'
+export * from './OverwriteWarning'

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

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

package/src/components/SeedPhrase/index.ts

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

package/src/components/index.ts

@@ -1,2 +1,3 @@
+export * from './SeedPhrase'
 export * from './WalletAccountDetails'
 export * from './WalletAccountSelect'

package/src/contexts/SeedPhrase/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { SeedPhraseContextState } from './State'
+
+export const SeedPhraseContext = createContextEx<SeedPhraseContextState>()

package/src/contexts/SeedPhrase/Provider.tsx

@@ -0,0 +1,100 @@
+import { generateMnemonic, validateMnemonic } from '@scure/bip39'
+// eslint-disable-next-line import/no-internal-modules
+import { wordlist } from '@scure/bip39/wordlists/english'
+import { WithChildren } from '@xylabs/react-shared'
+import { useEffect, useMemo, useState } from 'react'
+
+import { SeedPhraseContext } from './Context'
+
+interface SeedPhraseProviderProps extends WithChildren {
+  defaultPhrase?: string
+  handleChangeSeedPhrase?: (phrase: string) => void
+  open?: boolean
+  saveCallback?: () => void
+  seedPhrase?: string
+}
+
+export const SeedPhraseProvider: React.FC<SeedPhraseProviderProps> = ({
+  children,
+  defaultPhrase,
+  handleChangeSeedPhrase,
+  saveCallback,
+  seedPhrase,
+  open,
+}) => {
+  const [phrase, setPhrase] = useState<string | undefined>()
+  const [overwriteWarning, setOverwriteWarning] = useState(false)
+
+  useEffect(() => {
+    setPhrase(defaultPhrase)
+  }, [defaultPhrase])
+
+  useEffect(() => {
+    if (!open) {
+      handleCancelOverwrite()
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (seedPhrase || open) {
+      setPhrase?.(seedPhrase ?? '')
+    }
+  }, [seedPhrase, open, setPhrase])
+
+  const handleGenerate = () => {
+    const mnemonic = generateMnemonic(wordlist, 256)
+    setPhrase?.(mnemonic)
+    setOverwriteWarning?.(false)
+  }
+
+  const handleCancelOverwrite = () => {
+    setOverwriteWarning?.(false)
+  }
+
+  const handleClear = () => {
+    setPhrase?.('')
+    setOverwriteWarning?.(false)
+  }
+
+  const handleSave = () => {
+    if (!overwriteWarning && seedPhrase && seedPhrase !== phrase) {
+      setOverwriteWarning?.(true)
+    } else {
+      handleChangeSeedPhrase?.(phrase ?? '')
+      saveCallback?.()
+    }
+  }
+
+  const validate = (passedPhrase?: string) => {
+    if (!passedPhrase) {
+      return null
+    }
+    return validateMnemonic(passedPhrase, wordlist)
+  }
+
+  const validSeedPhrase = useMemo(() => validate?.(seedPhrase), [seedPhrase])
+  const validPhrase = useMemo(() => validate?.(phrase), [phrase])
+
+  return (
+    <SeedPhraseContext.Provider
+      value={{
+        handleCancelOverwrite,
+        handleChangeSeedPhrase,
+        handleClear,
+        handleGenerate,
+        handleSave,
+        overwriteWarning,
+        phrase,
+        provided: true,
+        seedPhrase,
+        setOverwriteWarning,
+        setPhrase,
+        validPhrase,
+        validSeedPhrase,
+        validate,
+      }}
+    >
+      {children}
+    </SeedPhraseContext.Provider>
+  )
+}

package/src/contexts/SeedPhrase/State.ts

@@ -0,0 +1,18 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface SeedPhraseContextState extends ContextExState {
+  handleCancelOverwrite?: () => void
+  handleChangeSeedPhrase?: (value: string) => void
+  handleClear?: () => void
+  handleGenerate?: () => void
+  handleSave?: () => void
+  overwriteWarning?: boolean
+  phrase?: string
+  seedPhrase?: string
+  setOverwriteWarning?: Dispatch<SetStateAction<boolean>>
+  setPhrase?: Dispatch<SetStateAction<string | undefined>>
+  validPhrase?: boolean | null
+  validSeedPhrase?: boolean | null
+  validate?: (passedPhrase?: string) => boolean | null
+}

package/src/contexts/SeedPhrase/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/SeedPhrase/use.tsx

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { SeedPhraseContext } from './Context'
+
+export const useSeedPhrase = () => useContextEx(SeedPhraseContext, 'SeedPhrase', true)

package/src/contexts/index.ts

@@ -1,2 +1,3 @@
 export * from './Account'
+export * from './SeedPhrase'
 export * from './Wallet'