All files / app/modals/reset-wallet reset-wallet-modal.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { TxModalFooter } from '../send-stx/send-stx-modal-layout';
import { useAnalytics } from '@hooks/use-analytics';
import { Modal } from '@modals/components/base-modal';
import { ModalHeader } from '@modals/components/modal-header';
import { ButtonGroup, Button, Box, color } from '@stacks/ui';
import { clearDiskStorage } from '@utils/disk-store';
import { SettingsSelectors } from 'app/tests/features/settings.selectors';
import React, { FC, useState, useRef, useCallback } from 'react';
 
interface ResetWalletModalProps {
  isOpen: boolean;
  onClose(): void;
}
 
export const ResetWalletModal: FC<ResetWalletModalProps> = ({ isOpen, onClose }) => {
  const [wipingWallet, setWipingWallet] = useState(false);
  const timer = useRef<number>(0);
  const cancelBtnRef = useRef<HTMLDivElement>();
  const PANIC_CANCEL_TIME = 3500;
  const analytics = useAnalytics();
 
  const closeModal = useCallback(() => {
    setWipingWallet(false);
    clearTimeout(timer.current);
    onClose();
  }, [timer, onClose]);
 
  const clearStorage = async () => {
    await clearDiskStorage();
    void main.reloadApp();
  };
 
  const resetWallet = useCallback(() => {
    setWipingWallet(true);
    void analytics.track('reset_wallet');
    // Allow user to grace period to panic cancel operations
    // Focusing cancel btn ensures any key press of: enter, space, esc
    // will cancel the pending operation
    cancelBtnRef.current?.focus();
    timer.current = window.setTimeout(() => void clearStorage(), PANIC_CANCEL_TIME);
  }, [cancelBtnRef, timer, analytics]);
 
  return (
    <Modal isOpen={isOpen} handleClose={onClose} minWidth={['100%', '488px']}>
      <ModalHeader onSelectClose={closeModal}>Reset wallet</ModalHeader>
      <Box mx="extra-loose" my="loose" textStyle="body.large">
        Warning: you may lose funds if you do not have backups of your 24-word Secret Key
      </Box>
      <TxModalFooter>
        <ButtonGroup size="md">
          <Button mode="tertiary" onClick={closeModal} ref={cancelBtnRef as any}>
            Cancel
          </Button>
          <Button
            style={{ background: color('feedback-error') }}
            onClick={resetWallet}
            isLoading={wipingWallet}
            data-test={SettingsSelectors.BtnResetWallet}
          >
            Reset wallet
          </Button>
        </ButtonGroup>
      </TxModalFooter>
    </Modal>
  );
};