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

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';
@@ -19,7 +18,7 @@ export interface CallbackProps {
 
 interface StateProps {
   walletType: IWalletType;
-  stateTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
+  serializedTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
 }
 
 interface OwnProps {
@@ -29,73 +28,75 @@ interface OwnProps {
   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, stateTransaction, toggleDisabled } = 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 (
-      <div>
-        <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 />
-              {!toggleDisabled ? (
-                <OnlineSend
-                  withOnClick={({ onClick }) =>
-                    this.props.withProps({
-                      disabled: toggleDisabled ? (stateTransaction !== null ? false : true) : false,
-                      onClick
-                    })
-                  }
-                  Modal={this.props.Modal}
-                />
-              ) : null}
-            </React.Fragment>
-          )}
-        />
-        {toggleDisabled ? (
+      <>
+        {leftTxCompare}
+        {rightTxCompare}
+        <OfflineBroadcast />
+        {shouldDisplayOnlineSend && (
           <OnlineSend
             withOnClick={({ onClick }) =>
               this.props.withProps({
-                disabled: toggleDisabled ? (stateTransaction !== null ? false : true) : false,
+                disabled: !!(toggleDisabled && !serializedTransaction),
                 onClick
               })
             }
             Modal={this.props.Modal}
           />
-        ) : null}
-      </div>
+        )}
+      </>
     );
   }
 }
 
 export const SendButtonFactory = connect((state: AppState) => ({
   walletType: getWalletType(state),
-  stateTransaction: getSerializedTransaction(state)
+  serializedTransaction: getSerializedTransaction(state)
 }))(SendButtonFactoryClass);