1  import React, { Component } from 'react';
  2  import { connect } from 'react-redux';
  3  import EthTx from 'ethereumjs-tx';
  4  import { addHexPrefix } from 'ethereumjs-util';
  5  
  6  import translate from 'translations';
  7  import { getTransactionFields, makeTransaction } from 'libs/transaction';
  8  import { AppState } from 'features/reducers';
  9  import * as derivedSelectors from 'features/selectors';
 10  import {
 11    transactionNetworkSelectors,
 12    transactionSignSelectors,
 13    transactionSelectors
 14  } from 'features/transaction';
 15  import { walletSelectors } from 'features/wallet';
 16  import { OfflineBroadcast } from 'components/SendButtonFactory/OfflineBroadcast';
 17  import { CodeBlock } from 'components/ui';
 18  import { WithSigner } from './Container';
 19  
 20  export interface CallbackProps {
 21    disabled: boolean;
 22    isWeb3Wallet: boolean;
 23    onClick(): void;
 24  }
 25  
 26  interface StateProps {
 27    transaction: EthTx;
 28    walletType: walletSelectors.IWalletType;
 29    serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
 30    networkRequestPending: boolean;
 31    isFullTransaction: boolean;
 32    isWeb3Wallet: boolean;
 33    validGasPrice: boolean;
 34    validGasLimit: boolean;
 35    signedTx: boolean;
 36  }
 37  
 38  interface OwnProps {
 39    withProps(props: CallbackProps): React.ReactElement<any> | null;
 40  }
 41  
 42  type Props = OwnProps & StateProps;
 43  
 44  export class GenerateTransactionFactoryClass extends Component<Props> {
 45    public render() {
 46      const {
 47        walletType,
 48        serializedTransaction,
 49        isFullTransaction,
 50        isWeb3Wallet,
 51        networkRequestPending,
 52        validGasPrice,
 53        validGasLimit,
 54        transaction,
 55        signedTx
 56      } = this.props;
 57  
 58      const getStringifiedTx = (serializedTx: Buffer) =>
 59        JSON.stringify(getTransactionFields(makeTransaction(serializedTx)), null, 2);
 60  
 61      const isButtonDisabled =
 62        !isFullTransaction || networkRequestPending || !validGasPrice || !validGasLimit;
 63  
 64      return (
 65        <React.Fragment>
 66          <WithSigner
 67            isWeb3={isWeb3Wallet}
 68            withSigner={signer =>
 69              this.props.withProps({
 70                disabled: isButtonDisabled,
 71                isWeb3Wallet,
 72                onClick: () => signer(transaction)
 73              })
 74            }
 75          />
 76          {signedTx && (
 77            <React.Fragment>
 78              {/* shows the json representation of the transaction */}
 79              <div className="col-xs-12">
 80                <label>
 81                  {walletType.isWeb3Wallet ? 'Transaction Parameters' : translate('SEND_RAW')}
 82                </label>
 83                <CodeBlock>{getStringifiedTx(serializedTransaction as Buffer)}</CodeBlock>
 84              </div>
 85              {serializedTransaction && (
 86                <div className="col-xs-12">
 87                  <label>
 88                    {walletType.isWeb3Wallet
 89                      ? 'Serialized Transaction Parameters'
 90                      : translate('SEND_SIGNED')}
 91                  </label>
 92                  <CodeBlock>{addHexPrefix(serializedTransaction.toString('hex'))}</CodeBlock>
 93                </div>
 94              )}
 95              <OfflineBroadcast />
 96            </React.Fragment>
 97          )}
 98        </React.Fragment>
 99      );
100    }
101  }
102  
103  export const GenerateTransactionFactory = connect((state: AppState) => ({
104    ...derivedSelectors.getTransaction(state),
105    walletType: walletSelectors.getWalletType(state),
106    serializedTransaction: derivedSelectors.getSerializedTransaction(state),
107    networkRequestPending: transactionNetworkSelectors.isNetworkRequestPending(state),
108    isWeb3Wallet: walletSelectors.getWalletType(state).isWeb3Wallet,
109    validGasPrice: transactionSelectors.isValidGasPrice(state),
110    validGasLimit: transactionSelectors.isValidGasLimit(state),
111    signedTx: !!transactionSignSelectors.getSignedTx(state)
112  }))(GenerateTransactionFactoryClass);