nanoid#urlAlphabet TypeScript Examples

The following examples show how to use nanoid#urlAlphabet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From rabet-extension with GNU General Public License v3.0 4 votes vote down vote up 
Backup = ({ onClose, needTitle }: BackupProps) => {
  const dlRef = useRef(null);
  const [user, accounts] = useTypedSelector((store) => [
    store.user,
    store.accounts,
  ]);
  const [fileDownloadUrl, setFileDownloadUrl] = useState('');
  const [id, setId] = useState('');

  useEffect(() => {
    const nanoid = customAlphabet(urlAlphabet, 10);

    setId(nanoid(20));
  }, []);

  const onSubmit = (values: FormValues) => {
    if (user.password !== values.password) {
      return {
        password: 'Password is incorrect',
      };
    }

    const accountsJSON = JSON.stringify(accounts, null, 2);
    const jsonEncrypted = encrypt(id, accountsJSON);
    const blob = new Blob([jsonEncrypted]);
    const fileDlUrl = URL.createObjectURL(blob);

    setFileDownloadUrl(fileDlUrl);

    setTimeout(() => {
      dlRef?.current?.click();

      onClose();
    }, 100);

    return {};
  };

  return (
    <S.Container style={{ maxWidth: '460px' }}>
      {needTitle && (
        <PageTitle
          isSetting
          padding="0"
          title="Backup"
          onClose={onClose}
        />
      )}

      <S.info>
        Save the key and download the backup file. With this file and
        key, you will import all wallets when you want.
      </S.info>
      <div style={{ marginTop: '24px' }}>
        <TooltipLabel
          text="Key"
          tooltipText="Please make sure you save this key because the backup file will be encrypted with it, and if you lose it, you will not be able to import your wallets."
        />
        <S.Box>
          {id}
          <S.Copy>
            <CopyText fullIcon text={id} />
          </S.Copy>
        </S.Box>
      </div>
      <Form
        onSubmit={onSubmit}
        render={({
          submitError,
          handleSubmit,
          submitting,
          pristine,
        }) => (
          <form
            className="form"
            onSubmit={handleSubmit}
            autoComplete="off"
          >
            <Field name="password">
              {({ input, meta }) => (
                <div>
                  <S.Label>Password</S.Label>
                  <Input
                    type="password"
                    placeholder="Enter your password"
                    size="medium"
                    variant="password"
                    input={input}
                    meta={meta}
                    autoFocus
                  />
                </div>
              )}
            </Field>

            {submitError && (
              <div className="error">{submitError}</div>
            )}

            <ButtonContainer btnSize={120} mt={32} justify="end">
              <Button
                type="submit"
                variant="primary"
                size="medium"
                content="Download"
                disabled={pristine || submitting}
              />
            </ButtonContainer>

            <a
              className="hidden"
              download="backup.txt"
              href={fileDownloadUrl}
              ref={dlRef}
            >
              download it
            </a>
          </form>
        )}
      />
    </S.Container>
  );
}