All files / app/pages/onboarding/06-secret-key secret-key.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Card } from '@components/card';
import {
  Onboarding,
  OnboardingTitle,
  OnboardingButton,
  OnboardingText,
} from '@components/onboarding';
import { Toast } from '@components/toast';
import routes from '@constants/routes.json';
import { useAnalytics } from '@hooks/use-analytics';
import { useBackButton } from '@hooks/use-back-url';
import { Box, useClipboard, Text, Button, color } from '@stacks/ui';
import { selectMnemonic } from '@store/keys/keys.reducer';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
 
export const SecretKey: React.FC = () => {
  const history = useHistory();
  useBackButton(routes.CREATE);
  const mnemonic = useSelector(selectMnemonic);
  const [hasSavedMnemonic, setHasSavedMnemonic] = useState(false);
 
  Iif (!mnemonic) {
    const err = 'Component `SecretKey` should not render without pre-generated mnemonic';
    throw new Error(err);
  }
 
  const { onCopy, hasCopied } = useClipboard(mnemonic);
  const analytics = useAnalytics();
  const onCopyTracked = () => {
    void analytics.track('copy_secret_key_to_clipboard');
    onCopy();
  };
 
  return (
    <Onboarding>
      <OnboardingTitle>Your Secret Key</OnboardingTitle>
      <OnboardingText>
        Here&apos;s your Secret Key: 24 words that give you access Leather. If you lose your Secret
        Key, you&apos;ll be unable to access your STX tokens. No one can reset it for you.
      </OnboardingText>
      <Card title="Your Secret Key" mt="extra-loose">
        <Text textStyle="body.small" mt="loose" mx="loose" lineHeight="20px" display="block">
          {mnemonic}
        </Text>
        <Button variant="link" mt="tight" onClick={onCopyTracked}>
          <Text textStyle="caption.medium" fontSize="12px">
            Copy to clipboard
          </Text>
        </Button>
      </Card>
      <Box display="block" as="label" mt="loose">
        <input type="checkbox" onChange={e => setHasSavedMnemonic(e.currentTarget.checked)} />
        <Text textStyle="body.small" color={color('text-body')} ml="base-tight">
          I have saved my Secret Key
        </Text>
      </Box>
      <OnboardingButton
        mt="loose"
        isDisabled={!hasSavedMnemonic}
        onClick={() => history.push(routes.VERIFY_KEY)}
      >
        Continue
      </OnboardingButton>
      <Toast show={hasCopied}>Copied to clipboard</Toast>
    </Onboarding>
  );
};