All files / app/components/tx-signing sign-transaction-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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import {
  StackingModalButton as Button,
  StackingModalFooter as Footer,
} from '../../modals/components/stacking-modal-layout';
import { SignTransactionProps } from './sign-transaction';
import {
  useCreateLedgerContractCallTx,
  useCreateLedgerTokenTransferTx,
} from '@hooks/use-create-ledger-contract-call-tx';
import { LedgerConnectStep, usePrepareLedger } from '@hooks/use-prepare-ledger';
import { SignTxWithLedger } from '@modals/components/sign-tx-with-ledger';
import { RootState } from '@store/index';
import { selectAddress } from '@store/keys';
import { capitalize } from '@utils/capitalize';
import { safeAwait } from '@utils/safe-await';
import React, { useCallback, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
 
type SignTransactionLedgerProps = SignTransactionProps;
 
export const SignTransactionLedger = (props: SignTransactionLedgerProps) => {
  const { action, txOptions, isBroadcasting, onTransactionSigned, onClose } = props;
  const [ledgerAddress, setLedgerAddress] = useState<null | string>(null);
 
  const {
    step: ledgerStep,
    isLocked,
    isSupportedAppVersion,
    appVersionErrorText,
    publicKeysDoNotMatchError,
  } = usePrepareLedger();
 
  const [hasSubmitted, setHasSubmitted] = useState(false);
  const { persistedAddress } = useSelector((state: RootState) => ({
    persistedAddress: selectAddress(state),
  }));
  const { createLedgerContractCallTx } = useCreateLedgerContractCallTx();
  const { createLedgerTokenTransferTx } = useCreateLedgerTokenTransferTx();
 
  const createLedgerTx = useCallback(async () => {
    const data = await main.ledger.showStxAddress();
    Iif (persistedAddress !== data.address) {
      setLedgerAddress(data.address);
    }
    Iif ('recipient' in txOptions) {
      return createLedgerTokenTransferTx(txOptions);
    }
    return createLedgerContractCallTx(txOptions);
  }, [createLedgerContractCallTx, createLedgerTokenTransferTx, persistedAddress, txOptions]);
 
  const ledgerError = useMemo(() => {
    Iif (!isSupportedAppVersion) return appVersionErrorText;
    Iif (ledgerAddress && persistedAddress !== ledgerAddress) return publicKeysDoNotMatchError;
    return null;
  }, [
    appVersionErrorText,
    isSupportedAppVersion,
    ledgerAddress,
    persistedAddress,
    publicKeysDoNotMatchError,
  ]);
 
  return (
    <>
      <SignTxWithLedger step={ledgerStep} isLocked={isLocked} ledgerError={ledgerError} />
      <Footer>
        <Button mode="tertiary" onClick={onClose}>
          Close
        </Button>
        <Button
          isLoading={hasSubmitted || isBroadcasting}
          isDisabled={
            hasSubmitted ||
            ledgerStep !== LedgerConnectStep.ConnectedAppOpen ||
            isBroadcasting ||
            isLocked
          }
          onClick={async () => {
            setHasSubmitted(true);
 
            const [error, tx] = await safeAwait(createLedgerTx());
            Iif (error) {
              console.log(error);
              setHasSubmitted(false);
            }
            Iif (tx) onTransactionSigned(tx);
          }}
        >
          {capitalize(action)}
        </Button>
      </Footer>
    </>
  );
};