From d279733fd72a72659d94b28099049ba1b9fa6dc3 Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Sun, 24 Dec 2017 15:56:40 -0600
Subject: [PATCH] Broadcast UI Cleanup (#658)

* add onlyTransactionParameters prop to SendButtonFactory to only show Transaction Parameters and not the serialized TX. Useful in Broadcast Signed Transaction so that the user is not presented with redundant data.

* add and pass onlyTransactionParameters props through SendButton from BroadcastTx

* Adjusted spacing of broadcast tx

* Move the qr code styles into css.
---
 common/components/SendButton.tsx              |  5 ++-
 .../SendButtonFactory/SendButtonFactory.tsx   | 33 +++++++++++--------
 common/containers/Tabs/BroadcastTx/index.scss | 14 ++++++--
 common/containers/Tabs/BroadcastTx/index.tsx  | 25 +++++---------
 4 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/common/components/SendButton.tsx b/common/components/SendButton.tsx
index 6495fd54..7840f24f 100644
--- a/common/components/SendButton.tsx
+++ b/common/components/SendButton.tsx
@@ -2,8 +2,11 @@ import React from 'react';
 import { SendButtonFactory } from './SendButtonFactory';
 import translate from 'translations';
 
-export const SendButton: React.SFC<{}> = () => (
+export const SendButton: React.SFC<{ onlyTransactionParameters?: boolean }> = ({
+  onlyTransactionParameters
+}) => (
   <SendButtonFactory
+    onlyTransactionParameters={!!onlyTransactionParameters}
     withProps={({ onClick }) => (
       <div className="row form-group">
         <div className="col-xs-12">
diff --git a/common/components/SendButtonFactory/SendButtonFactory.tsx b/common/components/SendButtonFactory/SendButtonFactory.tsx
index 86280f69..4af374b5 100644
--- a/common/components/SendButtonFactory/SendButtonFactory.tsx
+++ b/common/components/SendButtonFactory/SendButtonFactory.tsx
@@ -18,6 +18,7 @@ interface StateProps {
   walletType: IWalletType;
 }
 interface OwnProps {
+  onlyTransactionParameters?: boolean;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 
@@ -27,11 +28,13 @@ const getStringifiedTx = (serializedTransaction: string) =>
 type Props = StateProps & OwnProps;
 class SendButtonFactoryClass extends Component<Props> {
   public render() {
+    const { onlyTransactionParameters } = this.props;
+    const columnSize = onlyTransactionParameters ? 12 : 6;
     return (
       <SerializedTransaction
         withSerializedTransaction={serializedTransaction => (
           <Aux>
-            <div className="col-sm-6">
+            <div className={`col-sm-${columnSize}`}>
               <label>
                 {this.props.walletType.isWeb3Wallet
                   ? 'Transaction Parameters'
@@ -44,19 +47,21 @@ class SendButtonFactoryClass extends Component<Props> {
                 readOnly={true}
               />
             </div>
-            <div className="col-sm-6">
-              <label>
-                {this.props.walletType.isWeb3Wallet
-                  ? 'Serialized Transaction Parameters'
-                  : translate('SEND_signed')}
-              </label>
-              <textarea
-                className="form-control"
-                value={addHexPrefix(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
+                  className="form-control"
+                  value={addHexPrefix(serializedTransaction)}
+                  rows={4}
+                  readOnly={true}
+                />
+              </div>
+            )}
             <OfflineBroadcast />
             <OnlineSend withProps={this.props.withProps} />
           </Aux>
diff --git a/common/containers/Tabs/BroadcastTx/index.scss b/common/containers/Tabs/BroadcastTx/index.scss
index 1ed9ce43..39f28414 100644
--- a/common/containers/Tabs/BroadcastTx/index.scss
+++ b/common/containers/Tabs/BroadcastTx/index.scss
@@ -1,7 +1,17 @@
 @import "common/sass/variables";
 
 .BroadcastTx {
-  &-title {
-    margin: $space auto $space * 2.5;
+  max-width: 520px;
+  margin: 0 auto;
+
+  &-help {
+    margin-bottom: $space * 1.5;
+  }
+
+  &-qr {
+    max-width: 15rem;
+    margin: 1rem auto;
+    width: 100%;
+    text-align: center;
   }
 }
diff --git a/common/containers/Tabs/BroadcastTx/index.tsx b/common/containers/Tabs/BroadcastTx/index.tsx
index 00fff443..090498a1 100644
--- a/common/containers/Tabs/BroadcastTx/index.tsx
+++ b/common/containers/Tabs/BroadcastTx/index.tsx
@@ -10,13 +10,13 @@ import {
 } from 'actions/transaction';
 import { computeIndexingHash } from 'libs/transaction';
 import { QRCode } from 'components/ui';
-import './index.scss';
 import EthTx from 'ethereumjs-tx';
 import classnames from 'classnames';
 import { SendButton } from 'components/SendButton';
 import { toBuffer, bufferToHex } from 'ethereumjs-util';
 import { getSerializedTransaction } from 'selectors/transaction';
 import { AppState } from 'reducers';
+import './index.scss';
 
 interface StateProps {
   stateTransaction: AppState['transaction']['sign']['local']['signedTransaction'];
@@ -45,11 +45,11 @@ class BroadcastTx extends Component<DispatchProps & StateProps> {
     return (
       <TabSection>
         <div className="Tab-content-pane row block text-center">
-          <div className="col-md-6">
-            <div className="col-md-12 BroadcastTx-title">
-              <h2>Broadcast Signed Transaction</h2>
-            </div>
-            <p>Paste a signed transaction and press the "SEND TRANSACTION" button.</p>
+          <div className="BroadcastTx">
+            <h1 className="BroadcastTx-title">Broadcast Signed Transaction</h1>
+            <p className="BroadcastTx-help">
+              Paste a signed transaction and press the "SEND TRANSACTION" button.
+            </p>
             <label>{translateRaw('SEND_signed')}</label>
             <textarea
               className={inputClasses}
@@ -57,18 +57,9 @@ class BroadcastTx extends Component<DispatchProps & StateProps> {
               value={userInput}
               onChange={this.handleChange}
             />
-            <SendButton />
-          </div>
+            <SendButton onlyTransactionParameters={true} />
 
-          <div className="col-md-6" style={{ marginTop: '70px' }}>
-            <div
-              className="qr-code text-center"
-              style={{
-                maxWidth: '15rem',
-                margin: '1rem auto',
-                width: '100%'
-              }}
-            >
+            <div className="BroadcastTx-qr">
               {stateTransaction && <QRCode data={bufferToHex(stateTransaction)} />}
             </div>
           </div>