All files / app/modals/receive-stx/components reveal-stx-address-ledger.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import { AddressDisplayer } from './address-displayer';
import { ErrorLabel } from '@components/error-label';
import { ErrorText } from '@components/error-text';
import { LedgerConnectInstructions } from '@components/ledger/ledger-connect-instructions';
import { SevereWarning } from '@components/severe-warning';
import { LedgerConnectStep, usePrepareLedger } from '@hooks/use-prepare-ledger';
import { Box, Button, Flex, Stack, Spinner, Text, color } from '@stacks/ui';
import { RootState } from '@store/index';
import { selectAddress } from '@store/keys';
import React, { FC, useCallback, useState } from 'react';
import { useSelector } from 'react-redux';
 
export const RevealStxAddressLedger: FC = () => {
  const { step, isLocked, isSupportedAppVersion, appVersionErrorText } = usePrepareLedger();
 
  const [ledgerAddress, setLedgerAddress] = useState<null | string>(null);
  const [success, setSuccess] = useState(false);
  const [pendingLedgerAction, setPendingLedgerAction] = useState<'idle' | 'pending' | 'complete'>(
    'idle'
  );
 
  const { address: persistedAddress } = useSelector((state: RootState) => ({
    address: selectAddress(state),
  }));
 
  const stepToShow = success ? LedgerConnectStep.ActionComplete : step;
 
  const showAddress = persistedAddress === ledgerAddress && ledgerAddress !== null;
 
  const verifyAddress = useCallback(async () => {
    setPendingLedgerAction('pending');
    try {
      const fromDeviceAddr = await main.ledger.showStxAddress();
      Iif (fromDeviceAddr && fromDeviceAddr.address) {
        setSuccess(fromDeviceAddr.address === persistedAddress);
        setLedgerAddress(fromDeviceAddr.address);
      }
      await main.ledger.requestAndConfirmStxAddress();
      setPendingLedgerAction('complete');
    } catch (e) {
      // ignore
    }
  }, [persistedAddress]);
 
  return (
    <Flex
      flexDirection="column"
      alignItems={showAddress ? 'unset' : 'center'}
      mb="base-tight"
      mx="extra-loose"
    >
      {ledgerAddress && persistedAddress ? (
        <>
          <AddressDisplayer address={persistedAddress} />
          <Box>
            {ledgerAddress !== persistedAddress && (
              <SevereWarning mt="tight" mb="base" pr="base-loose">
                The addresses do not match. Make sure you&apos;re using the same Ledger device with
                which you created this wallet.
              </SevereWarning>
            )}
          </Box>
        </>
      ) : (
        <Flex flexDirection="column" mx="extra-loose" width="320px">
          <Stack spacing="base-loose">
            <Box>
              <LedgerConnectInstructions
                action="Verify address"
                step={stepToShow}
                isLocked={isLocked}
              />
            </Box>
            <Button
              mode="secondary"
              mx="extra-loose"
              isDisabled={
                step < LedgerConnectStep.ConnectedAppOpen ||
                pendingLedgerAction === 'pending' ||
                isLocked
              }
              isLoading={pendingLedgerAction === 'pending'}
              onClick={verifyAddress}
            >
              Request Ledger address
            </Button>
          </Stack>
        </Flex>
      )}
      {!isSupportedAppVersion && (
        <ErrorLabel my="base-loose">
          <ErrorText>{appVersionErrorText}</ErrorText>
        </ErrorLabel>
      )}
      <Box>
        {pendingLedgerAction === 'pending' && ledgerAddress && (
          <Flex mb="base">
            <Box>
              <Spinner color={color('text-caption')} size="xs" />
            </Box>
            <Text textStyle="caption" color={color('text-caption')} ml="tight" mt="extra-tight">
              Compare the address above to the one on the screen of your Ledger device, then select
              Approve.
            </Text>
          </Flex>
        )}
      </Box>
    </Flex>
  );
};