Show Disabled Send Button on /pushtx (#1302)

* Fixes #1291. Implemented a new boolean that allows you to toggle whether you are using a disabled send tx button that persists or a send tx button that remains invisible until a valid transaction is present.

* Fixed object shorthand precommit error.

* Cleanup boolean logic, remove redundant code, make comparision elements more obvious

common/components/SendButton.tsx

@@ -5,15 +5,17 @@ import { ConfirmationModal } from 'components/ConfirmationModal';
 
 export const SendButton: React.SFC<{
   onlyTransactionParameters?: boolean;
+  toggleDisabled?: boolean;
   customModal?: typeof ConfirmationModal;
-}> = ({ onlyTransactionParameters, customModal }) => (
+}> = ({ onlyTransactionParameters, toggleDisabled, customModal }) => (
   <SendButtonFactory
     onlyTransactionParameters={!!onlyTransactionParameters}
+    toggleDisabled={toggleDisabled}
     Modal={customModal ? customModal : ConfirmationModal}
-    withProps={({ onClick }) => (
+    withProps={({ disabled, onClick }) => (
       <div className="row form-group">
         <div className="col-xs-12">
-          <button className="btn btn-primary btn-block" onClick={onClick}>
+          <button disabled={disabled} className="btn btn-primary btn-block" onClick={onClick}>
             {translate('SEND_trans')}
           </button>
         </div>

common/components/SendButtonFactory/OnlineSend.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { getOffline } from 'selectors/config';
 import { AppState } from 'reducers';
 import { connect } from 'react-redux';
-import { CallbackProps } from '../SendButtonFactory';
 import { getCurrentTransactionStatus, currentTransactionBroadcasted } from 'selectors/transaction';
 import { showNotification, TShowNotification } from 'actions/notifications';
 import { ITransactionStatus } from 'reducers/transaction/broadcast';
@@ -26,7 +25,7 @@ interface DispatchProps {
 
 interface OwnProps {
   Modal: typeof ConfirmationModal;
-  withProps(props: CallbackProps): React.ReactElement<any> | null;
+  withOnClick(onClick: { onClick(): void }): React.ReactElement<any> | null;
 }
 
 const INITIAL_STATE: State = {
@@ -41,7 +40,7 @@ class OnlineSendClass extends Component<Props, State> {
   public render() {
     return !this.props.offline ? (
       <React.Fragment>
-        {this.props.withProps({ onClick: this.openModal })}
+        {this.props.withOnClick({ onClick: this.openModal })}
         <this.props.Modal isOpen={this.state.showModal} onClose={this.closeModal} />
       </React.Fragment>
     ) : null;

common/components/SendButtonFactory/SendButtonFactory.tsx

@@ -1,7 +1,6 @@
 import translate from 'translations';
 import { getTransactionFields, makeTransaction } from 'libs/transaction';
 import { OfflineBroadcast } from './OfflineBroadcast';
-import { SerializedTransaction } from 'components/renderCbs';
 import { OnlineSend } from './OnlineSend';
 import { addHexPrefix } from 'ethereumjs-util';
 import { getWalletType, IWalletType } from 'selectors/wallet';
@@ -10,60 +9,94 @@ import { connect } from 'react-redux';
 import { AppState } from 'reducers';
 import { ConfirmationModal } from 'components/ConfirmationModal';
 import { TextArea } from 'components/ui';
+import { getSerializedTransaction } from 'selectors/transaction';
 
 export interface CallbackProps {
+  disabled: boolean;
   onClick(): void;
 }
 
 interface StateProps {
   walletType: IWalletType;
+  serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
 }
 
 interface OwnProps {
   onlyTransactionParameters?: boolean;
+  toggleDisabled?: boolean;
   Modal: typeof ConfirmationModal;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 
-const getStringifiedTx = (serializedTransaction: string) =>
+const getStringifiedTx = (serializedTransaction: Buffer) =>
   JSON.stringify(getTransactionFields(makeTransaction(serializedTransaction)), null, 2);
 
 type Props = StateProps & OwnProps;
+
 class SendButtonFactoryClass extends Component<Props> {
   public render() {
-    const { onlyTransactionParameters } = this.props;
+    const {
+      onlyTransactionParameters,
+      serializedTransaction,
+      toggleDisabled,
+      walletType
+    } = this.props;
     const columnSize = onlyTransactionParameters ? 12 : 6;
+
+    /* Left and right transaction comparision boxes, only displayed when a serialized transaction
+    exists in state */
+
+    // shows the json representation of the transaction
+    const leftTxCompare = serializedTransaction && (
+      <div className={`col-sm-${columnSize}`}>
+        <label>{walletType.isWeb3Wallet ? 'Transaction Parameters' : translate('SEND_raw')}</label>
+        <TextArea value={getStringifiedTx(serializedTransaction)} rows={4} readOnly={true} />
+      </div>
+    );
+
+    // shows the serialized representation of the transaction
+    // "onlyTransactionParameters" used in broadcast tx so the same serialized tx isnt redundantly
+    // displayed
+    const rightTxCompare = serializedTransaction &&
+      !onlyTransactionParameters && (
+        <div className="col-sm-6">
+          <label>
+            {walletType.isWeb3Wallet
+              ? 'Serialized Transaction Parameters'
+              : translate('SEND_signed')}
+          </label>
+          <TextArea
+            value={addHexPrefix(serializedTransaction.toString('hex'))}
+            rows={4}
+            readOnly={true}
+          />
+        </div>
+      );
+
+    const shouldDisplayOnlineSend = toggleDisabled || serializedTransaction;
+
     return (
-      <SerializedTransaction
-        withSerializedTransaction={serializedTransaction => (
-          <React.Fragment>
-            <div className={`col-sm-${columnSize}`}>
-              <label>
-                {this.props.walletType.isWeb3Wallet
-                  ? 'Transaction Parameters'
-                  : translate('SEND_raw')}
-              </label>
-              <TextArea value={getStringifiedTx(serializedTransaction)} rows={4} readOnly={true} />
-            </div>
-            {!onlyTransactionParameters && (
-              <div className="col-sm-6">
-                <label>
-                  {this.props.walletType.isWeb3Wallet
-                    ? 'Serialized Transaction Parameters'
-                    : translate('SEND_signed')}
-                </label>
-                <TextArea value={addHexPrefix(serializedTransaction)} rows={4} readOnly={true} />
-              </div>
-            )}
-            <OfflineBroadcast />
-            <OnlineSend withProps={this.props.withProps} Modal={this.props.Modal} />
-          </React.Fragment>
+      <>
+        {leftTxCompare}
+        {rightTxCompare}
+        <OfflineBroadcast />
+        {shouldDisplayOnlineSend && (
+          <OnlineSend
+            withOnClick={({ onClick }) =>
+              this.props.withProps({
+                disabled: !!(toggleDisabled && !serializedTransaction),
+                onClick
+              })
+            }
+            Modal={this.props.Modal}
+          />
         )}
-      />
+      </>
     );
   }
 }
 
 export const SendButtonFactory = connect((state: AppState) => ({
-  walletType: getWalletType(state)
+  walletType: getWalletType(state),
+  serializedTransaction: getSerializedTransaction(state)
 }))(SendButtonFactoryClass);

common/containers/Tabs/BroadcastTx/index.tsx

@@ -66,7 +66,7 @@ class BroadcastTx extends Component<Props> {
                     </label>
                   </div>
 
-                  <SendButton onlyTransactionParameters={true} />
+                  <SendButton toggleDisabled={true} onlyTransactionParameters={true} />
 
                   <div className="BroadcastTx-qr">
                     {stateTransaction && <QRCode data={bufferToHex(stateTransaction)} />}