packages/components/containers/mnemonic/MnemonicInputField.tsx

   1 import { useEffect, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
   6 import TextAreaTwo from '@proton/components/components/v2/input/TextArea';
   7 import { validateMnemonic } from '@proton/shared/lib/mnemonic';
   8
   9 import type { InputFieldProps } from '../../components/v2/field/InputField';
  10
  11 export const useMnemonicInputValidation = (
  12     mnemonic: string,
  13     {
  14         invalidFormatError = c('Error').t`Wrong recovery phrase. Try again or use another recovery method.`,
  15     }: { invalidFormatError?: string } = {}
  16 ) => {
  17     const [mnemonicError, setMnemonicError] = useState('');
  18
  19     useEffect(() => {
  20         validateMnemonic(mnemonic)
  21             .then((isValid) => setMnemonicError(!isValid ? invalidFormatError : ''))
  22             .catch(() => setMnemonicError(''));
  23     }, [mnemonic]);
  24
  25     return [
  26         (() => {
  27             const splitWords = mnemonic.split(/\s+/);
  28             return splitWords.length !== 12 ? invalidFormatError : '';
  29         })(),
  30         (() => {
  31             return mnemonicError;
  32         })(),
  33     ];
  34 };
  35
  36 interface Props extends Omit<InputFieldProps<typeof TextAreaTwo>, 'as'> {}
  37
  38 const MnemonicInputField = ({
  39     id = 'mnemonic',
  40     bigger = true,
  41     rows = 3,
  42     label = c('Label').t`Recovery phrase`,
  43     assistiveText = c('Label').t`Phrase consists of 12 unique words in a specific order`,
  44     onValue,
  45     ...rest
  46 }: Props) => {
  47     return (
  48         <InputFieldTwo
  49             id={id}
  50             bigger={bigger}
  51             as={TextAreaTwo}
  52             rows={rows}
  53             label={label}
  54             assistiveText={assistiveText}
  55             onValue={(newValue: string) => {
  56                 const splitWords = newValue.split(/\s+/);
  57                 const mnemonic = splitWords.slice(0, 12).join(' ');
  58                 return onValue?.(mnemonic);
  59             }}
  60             {...rest}
  61         />
  62     );
  63 };
  64
  65 export default MnemonicInputField;