All files / app/pages/onboarding/03-create-wallet create-wallet.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  Onboarding,
  OnboardingTitle,
  OnboardingButton,
  OnboardingText,
  OnboardingFooter,
  OnboardingFooterLink,
} from '@components/onboarding';
import { TREZOR_HELP_URL } from '@constants/index';
import routes from '@constants/routes.json';
import { useBackButton } from '@hooks/use-back-url';
import { onboardingMnemonicGenerationStep } from '@store/keys';
import { openExternalLink } from '@utils/external-links';
import React from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
 
export const CreateWallet: React.FC = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  useBackButton(routes.WELCOME);
 
  const createSoftwareWallet = () => {
    dispatch(onboardingMnemonicGenerationStep({ stepDelayMs: 1_250 }));
    history.push(routes.GENERATING);
  };
 
  const openTrezorHelpPage = () => openExternalLink(TREZOR_HELP_URL);
 
  return (
    <Onboarding>
      <OnboardingTitle>Create a new wallet</OnboardingTitle>
      <OnboardingText>
        Please choose whether you’d like to connect a Ledger hardware wallet or to create a software
        wallet
      </OnboardingText>
 
      <OnboardingButton mt="extra-loose" onClick={() => history.push(routes.CONNECT_LEDGER)}>
        Use a Ledger wallet
      </OnboardingButton>
 
      <OnboardingButton onClick={createSoftwareWallet} mode="secondary">
        Create a software wallet
      </OnboardingButton>
 
      <OnboardingFooter>
        <OnboardingFooterLink onClick={openTrezorHelpPage}>
          I have a Trezor wallet
        </OnboardingFooterLink>
      </OnboardingFooter>
    </Onboarding>
  );
};