/ common / components / SendButtonFactory / SendButtonFactory.tsx
SendButtonFactory.tsx
 1  import React, { Component } from 'react';
 2  import { connect } from 'react-redux';
 3  import EthTx from 'ethereumjs-tx';
 4  
 5  import { AppState } from 'features/reducers';
 6  import * as derivedSelectors from 'features/selectors';
 7  import { walletSelectors } from 'features/wallet';
 8  import {
 9    transactionNetworkSelectors,
10    transactionSignSelectors,
11    transactionSelectors
12  } from 'features/transaction';
13  import { ConfirmationModal } from 'components/ConfirmationModal';
14  import { OnlineSend } from './OnlineSend';
15  
16  export interface CallbackProps {
17    disabled: boolean;
18    signTx(): void;
19    openModal(): void;
20  }
21  
22  interface StateProps {
23    walletType: walletSelectors.IWalletType;
24    serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
25    transaction: EthTx;
26    isFullTransaction: boolean;
27    networkRequestPending: boolean;
28    validGasPrice: boolean;
29    validGasLimit: boolean;
30    signedTx: boolean;
31  }
32  
33  interface OwnProps {
34    onlyTransactionParameters?: boolean;
35    signing?: boolean;
36    Modal: typeof ConfirmationModal;
37    withProps(props: CallbackProps): React.ReactElement<any> | null;
38  }
39  
40  type Props = StateProps & OwnProps;
41  
42  export class SendButtonFactoryClass extends Component<Props> {
43    public render() {
44      const {
45        signing,
46        signedTx,
47        transaction,
48        isFullTransaction,
49        serializedTransaction,
50        networkRequestPending,
51        validGasPrice,
52        validGasLimit
53      } = this.props;
54  
55      // return signing ? true : signedTx ? true : false
56      return (
57        (signing || (!signing && signedTx)) && (
58          <OnlineSend
59            withOnClick={({ openModal, signer }) =>
60              this.props.withProps({
61                disabled: signing
62                  ? !isFullTransaction || networkRequestPending || !validGasPrice || !validGasLimit
63                  : !!(signing && !serializedTransaction),
64                signTx: () => signer(transaction),
65                openModal
66              })
67            }
68            Modal={this.props.Modal}
69          />
70        )
71      );
72    }
73  }
74  
75  const mapStateToProps = (state: AppState) => {
76    return {
77      walletType: walletSelectors.getWalletType(state),
78      serializedTransaction: derivedSelectors.getSerializedTransaction(state),
79      ...derivedSelectors.getTransaction(state),
80      networkRequestPending: transactionNetworkSelectors.isNetworkRequestPending(state),
81      validGasPrice: transactionSelectors.isValidGasPrice(state),
82      validGasLimit: transactionSelectors.isValidGasLimit(state),
83      signedTx:
84        !!transactionSignSelectors.getSignedTx(state) || !!transactionSignSelectors.getWeb3Tx(state)
85    };
86  };
87  
88  export const SendButtonFactory = connect(mapStateToProps)(SendButtonFactoryClass);