All files / app/modals/tx-signing-modal tx-signing-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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { StackingModalHeader as Header, modalStyle } from '../components/stacking-modal-layout';
import { SignTransaction } from '@components/tx-signing/sign-transaction';
import { useLatestNonce } from '@hooks/use-latest-nonce';
import { TransactionError } from '@modals/components/transaction-error';
import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
import { ContractCallOptions, StacksTransaction, TokenTransferOptions } from '@stacks/transactions';
import { Modal } from '@stacks/ui';
import React, { FC } from 'react';
 
interface TxSigningModalProps {
  action: string;
  txDetails: TokenTransferOptions | ContractCallOptions;
  isBroadcasting: boolean;
  error: PostCoreNodeTransactionsError | null;
  onTryAgain(): void;
  onTransactionSigned(tx: StacksTransaction): void;
  onClose(): void;
}
 
export const TxSigningModal: FC<TxSigningModalProps> = props => {
  const { action, txDetails, isBroadcasting, error, onTryAgain, onClose, onTransactionSigned } =
    props;
 
  const { nonce } = useLatestNonce();
 
  return (
    <Modal isOpen {...modalStyle}>
      {!error && (
        <>
          <Header onSelectClose={onClose}>Confirm and {action}</Header>
          <SignTransaction
            action={action}
            txOptions={{ ...txDetails, nonce }}
            isBroadcasting={isBroadcasting}
            onClose={onClose}
            onTransactionSigned={onTransactionSigned}
          />
        </>
      )}
 
      {error && <TransactionError error={error} onClose={onClose} onGoBack={() => onTryAgain()} />}
    </Modal>
  );
};