From d72b478c897b1cd5b227f4a776ecdffb294920b3 Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Mon, 23 Oct 2017 13:48:55 -0700
Subject: [PATCH] Broadcast Tx (#304)

* create MVP of broadcast TX component

* add broadcastTx to routes and tab options

* Update BroadcastTx path to /pushTx

* - add sanitizeHex and padLeftEven functions from V3

* - Move decodeTransaction logic out of ConfirmationModal.
- Add from key to getTransactionFields

* Simplify ConfirmationModal:

1. Move business logic out of component (decodeTransaction).
2. Don't pass node props when Component is already smart. Map from state instead.
3. Pass walletAddress instead of the entire wallet object to component as prop.
4. Handle

* - Don't map node state (child component grabs from state)
- implement and call setWalletAddressOnUpdate

* correct tab to path.

* 1. Integrate Confirmation Modal
2. Validate signedTx input and disable Send Transaction button when invalid

* disable tslint error. EthTx expect a Data type object, but a string is passed. However, tx object is created as expected. Need to investigate

* adjust type definition to match allowed string input. Remove tslint disable

* fix tslint errors

* add textarea valid/invalid stlying based on disabled status

* remove unused imports

* cleanup / address PR comments

* Address PR comments
---
 common/Root.tsx                               |   2 +
 .../Header/components/Navigation.tsx          |   4 +
 common/containers/Tabs/BroadcastTx/index.scss |   7 +
 common/containers/Tabs/BroadcastTx/index.tsx  | 140 ++++++++++++++++++
 .../components/ConfirmationModal.tsx          |  87 ++++-------
 .../containers/Tabs/SendTransaction/index.tsx |  38 +++--
 common/libs/transaction.ts                    |  38 ++++-
 common/libs/values.ts                         |  13 ++
 common/typescript/ethereumjs-tx.d.ts          |   2 +-
 9 files changed, 252 insertions(+), 79 deletions(-)
 create mode 100644 common/containers/Tabs/BroadcastTx/index.scss
 create mode 100644 common/containers/Tabs/BroadcastTx/index.tsx

diff --git a/common/Root.tsx b/common/Root.tsx
index 34e362a571d..e3dfbb23ccd 100644
--- a/common/Root.tsx
+++ b/common/Root.tsx
@@ -9,6 +9,7 @@ import Help from 'containers/Tabs/Help';
 import SendTransaction from 'containers/Tabs/SendTransaction';
 import Swap from 'containers/Tabs/Swap';
 import ViewWallet from 'containers/Tabs/ViewWallet';
+import BroadcastTx from 'containers/Tabs/BroadcastTx';
 
 // TODO: fix this
 interface Props {
@@ -31,6 +32,7 @@ export default class Root extends Component<Props, {}> {
             <Route path="/send-transaction" component={SendTransaction} />
             <Route path="/contracts" component={Contracts} />
             <Route path="/ens" component={ENS} />
+            <Route path="/pushTx" component={BroadcastTx} />
           </div>
         </Router>
       </Provider>
diff --git a/common/components/Header/components/Navigation.tsx b/common/components/Header/components/Navigation.tsx
index dd230aa75a7..d20a30530a3 100644
--- a/common/components/Header/components/Navigation.tsx
+++ b/common/components/Header/components/Navigation.tsx
@@ -28,6 +28,10 @@ const tabs = [
     name: 'NAV_ENS',
     to: 'ens'
   },
+  {
+    name: 'Broadcast Transaction',
+    to: 'pushTx'
+  },
   {
     name: 'NAV_Help',
     to: 'https://myetherwallet.groovehq.com/help_center',
diff --git a/common/containers/Tabs/BroadcastTx/index.scss b/common/containers/Tabs/BroadcastTx/index.scss
new file mode 100644
index 00000000000..1ed9ce43f54
--- /dev/null
+++ b/common/containers/Tabs/BroadcastTx/index.scss
@@ -0,0 +1,7 @@
+@import "common/sass/variables";
+
+.BroadcastTx {
+  &-title {
+    margin: $space auto $space * 2.5;
+  }
+}
diff --git a/common/containers/Tabs/BroadcastTx/index.tsx b/common/containers/Tabs/BroadcastTx/index.tsx
new file mode 100644
index 00000000000..d06bb7873d8
--- /dev/null
+++ b/common/containers/Tabs/BroadcastTx/index.tsx
@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { AppState } from 'reducers';
+import TabSection from 'containers/TabSection';
+import { translateRaw } from 'translations';
+import { broadcastTx as dBroadcastTx, TBroadcastTx } from 'actions/wallet';
+import { QRCode } from 'components/ui';
+import './index.scss';
+import {
+  BroadcastTransactionStatus,
+  getTransactionFields
+} from 'libs/transaction';
+import EthTx from 'ethereumjs-tx';
+import { ConfirmationModal } from 'containers/Tabs/SendTransaction/components';
+import classnames from 'classnames';
+
+interface Props {
+  broadcastTx: TBroadcastTx;
+  transactions: BroadcastTransactionStatus[];
+}
+
+interface State {
+  signedTx: string;
+  showConfirmationModal: boolean;
+  disabled: boolean;
+}
+
+const initialState: State = {
+  showConfirmationModal: false,
+  signedTx: '',
+  disabled: true
+};
+
+class BroadcastTx extends Component<Props, State> {
+  public state = initialState;
+
+  public ensureValidSignedTxInputOnUpdate() {
+    try {
+      const tx = new EthTx(this.state.signedTx);
+      getTransactionFields(tx);
+      if (this.state.disabled) {
+        this.setState({ disabled: false });
+      }
+    } catch (e) {
+      if (!this.state.disabled) {
+        this.setState({ disabled: true });
+      }
+    }
+  }
+
+  public componentDidUpdate() {
+    this.ensureValidSignedTxInputOnUpdate();
+  }
+
+  public render() {
+    const { signedTx, disabled, showConfirmationModal } = this.state;
+
+    const inputClasses = classnames({
+      'form-control': true,
+      'is-valid': !disabled,
+      'is-invalid': disabled
+    });
+
+    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>
+            <label>{translateRaw('SEND_signed')}</label>
+            <textarea
+              className={inputClasses}
+              rows={7}
+              value={signedTx}
+              onChange={this.handleChange}
+            />
+            <button
+              className="btn btn-primary"
+              disabled={disabled || signedTx === ''}
+              onClick={this.handleBroadcastTx}
+            >
+              {translateRaw('SEND_trans')}
+            </button>
+          </div>
+
+          <div className="col-md-6" style={{ marginTop: '70px' }}>
+            <div
+              className="qr-code text-center"
+              style={{
+                maxWidth: '15rem',
+                margin: '1rem auto',
+                width: '100%'
+              }}
+            >
+              {signedTx && <QRCode data={signedTx} />}
+            </div>
+          </div>
+        </div>
+        {showConfirmationModal && (
+          <ConfirmationModal
+            signedTx={signedTx}
+            onClose={this.handleClose}
+            onConfirm={this.handleConfirm}
+          />
+        )}
+      </TabSection>
+    );
+  }
+
+  public handleClose = () => {
+    this.setState({ showConfirmationModal: false });
+  };
+
+  public handleBroadcastTx = () => {
+    this.setState({ showConfirmationModal: true });
+  };
+
+  public handleConfirm = () => {
+    this.props.broadcastTx(this.state.signedTx);
+  };
+
+  protected handleChange = event => {
+    this.setState({ signedTx: event.target.value });
+  };
+}
+
+function mapStateToProps(state: AppState) {
+  return {
+    transactions: state.wallet.transactions
+  };
+}
+
+export default connect(mapStateToProps, { broadcastTx: dBroadcastTx })(
+  BroadcastTx
+);
diff --git a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx
index 18c173b4844..5a704d49262 100644
--- a/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx
+++ b/common/containers/Tabs/SendTransaction/components/ConfirmationModal.tsx
@@ -1,19 +1,20 @@
-import Big from 'bignumber.js';
 import Identicon from 'components/ui/Identicon';
 import Modal, { IButton } from 'components/ui/Modal';
 import Spinner from 'components/ui/Spinner';
 import { NetworkConfig, NodeConfig } from 'config/data';
 import EthTx from 'ethereumjs-tx';
-import ERC20 from 'libs/erc20';
 import {
   BroadcastTransactionStatus,
-  getTransactionFields
+  getTransactionFields,
+  decodeTransaction
 } from 'libs/transaction';
-import { toTokenDisplay, toUnit } from 'libs/units';
-import { IWallet } from 'libs/wallet/IWallet';
 import React from 'react';
 import { connect } from 'react-redux';
-import { getLanguageSelection, getNetworkConfig } from 'selectors/config';
+import {
+  getLanguageSelection,
+  getNetworkConfig,
+  getNodeConfig
+} from 'selectors/config';
 import { getTokens, getTxFromState, MergedToken } from 'selectors/wallet';
 import translate, { translateRaw } from 'translations';
 import './ConfirmationModal.scss';
@@ -21,9 +22,8 @@ import './ConfirmationModal.scss';
 interface Props {
   signedTx: string;
   transaction: EthTx;
-  wallet: IWallet;
   node: NodeConfig;
-  token: MergedToken | undefined;
+  token: MergedToken;
   network: NetworkConfig;
   lang: string;
   broadCastTxStatus: BroadcastTransactionStatus;
@@ -32,30 +32,22 @@ interface Props {
 }
 
 interface State {
-  fromAddress: string;
   timeToRead: number;
   hasBroadCasted: boolean;
 }
 
 class ConfirmationModal extends React.Component<Props, State> {
   public state = {
-    fromAddress: '',
     timeToRead: 5,
     hasBroadCasted: false
   };
 
   private readTimer = 0;
 
-  public componentWillReceiveProps(newProps: Props) {
-    // Reload address if the wallet changes
-    if (newProps.wallet !== this.props.wallet) {
-      this.setWalletAddress(this.props.wallet);
-    }
-  }
-
   public componentDidUpdate() {
     if (
       this.state.hasBroadCasted &&
+      this.props.broadCastTxStatus &&
       !this.props.broadCastTxStatus.isBroadcasting
     ) {
       this.props.onClose();
@@ -71,20 +63,22 @@ class ConfirmationModal extends React.Component<Props, State> {
         window.clearInterval(this.readTimer);
       }
     }, 1000);
-
-    this.setWalletAddress(this.props.wallet);
   }
 
   public render() {
-    const { node, token, network, onClose, broadCastTxStatus } = this.props;
-    const { fromAddress, timeToRead } = this.state;
     const {
-      toAddress,
-      value,
-      gasPrice,
-      data,
-      nonce
-    } = this.decodeTransaction();
+      node,
+      token,
+      network,
+      onClose,
+      broadCastTxStatus,
+      transaction
+    } = this.props;
+    const { timeToRead } = this.state;
+    const { toAddress, value, gasPrice, data, from, nonce } = decodeTransaction(
+      transaction,
+      token
+    );
 
     const buttonPrefix = timeToRead > 0 ? `(${timeToRead}) ` : '';
     const buttons: IButton[] = [
@@ -124,7 +118,7 @@ class ConfirmationModal extends React.Component<Props, State> {
               <div>
                 <div className="ConfModal-summary">
                   <div className="ConfModal-summary-icon ConfModal-summary-icon--from">
-                    <Identicon size="100%" address={fromAddress} />
+                    <Identicon size="100%" address={from} />
                   </div>
                   <div className="ConfModal-summary-amount">
                     <div className="ConfModal-summary-amount-arrow" />
@@ -139,7 +133,7 @@ class ConfirmationModal extends React.Component<Props, State> {
 
                 <ul className="ConfModal-details">
                   <li className="ConfModal-details-detail">
-                    You are sending from <code>{fromAddress}</code>
+                    You are sending from <code>{from}</code>
                   </li>
                   <li className="ConfModal-details-detail">
                     You are sending to <code>{toAddress}</code>
@@ -192,38 +186,6 @@ class ConfirmationModal extends React.Component<Props, State> {
     window.clearInterval(this.readTimer);
   }
 
-  private async setWalletAddress(wallet: IWallet) {
-    // TODO move getAddress to saga
-    const fromAddress = await wallet.getAddress();
-    this.setState({ fromAddress });
-  }
-
-  private decodeTransaction() {
-    const { transaction, token } = this.props;
-    const { to, value, data, gasPrice, nonce } = getTransactionFields(
-      transaction
-    );
-    let fixedValue;
-    let toAddress;
-
-    if (token) {
-      const tokenData = ERC20.$transfer(data);
-      fixedValue = toTokenDisplay(new Big(tokenData.value), token).toString();
-      toAddress = tokenData.to;
-    } else {
-      fixedValue = toUnit(new Big(value, 16), 'wei', 'ether').toString();
-      toAddress = to;
-    }
-
-    return {
-      value: fixedValue,
-      gasPrice: toUnit(new Big(gasPrice, 16), 'wei', 'gwei').toString(),
-      data,
-      toAddress,
-      nonce
-    };
-  }
-
   private confirm = () => {
     if (this.state.timeToRead < 1) {
       this.props.onConfirm(this.props.signedTx);
@@ -239,6 +201,8 @@ function mapStateToProps(state, props) {
   // Network config for defaults
   const network = getNetworkConfig(state);
 
+  const node = getNodeConfig(state);
+
   const lang = getLanguageSelection(state);
 
   const broadCastTxStatus = getTxFromState(state, props.signedTx);
@@ -249,6 +213,7 @@ function mapStateToProps(state, props) {
   const token = data && tokens.find(t => t.address === to);
 
   return {
+    node,
     broadCastTxStatus,
     transaction,
     token,
diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx
index 35dc14266f2..e81c0dc75ca 100644
--- a/common/containers/Tabs/SendTransaction/index.tsx
+++ b/common/containers/Tabs/SendTransaction/index.tsx
@@ -15,7 +15,7 @@ import {
 } from './components';
 import NavigationPrompt from './components/NavigationPrompt';
 // CONFIG
-import { donationAddressMap, NetworkConfig, NodeConfig } from 'config/data';
+import { donationAddressMap, NetworkConfig } from 'config/data';
 // LIBS
 import { stripHexPrefix } from 'libs/values';
 import { TransactionWithoutGas } from 'libs/messages';
@@ -51,7 +51,6 @@ import {
 import {
   getGasPriceGwei,
   getNetworkConfig,
-  getNodeConfig,
   getNodeLib
 } from 'selectors/config';
 import {
@@ -86,12 +85,12 @@ interface State {
   nonce: number | null | undefined;
   hasSetDefaultNonce: boolean;
   generateTxProcessing: boolean;
+  walletAddress: string | null;
 }
 
 interface Props {
   wallet: IWallet;
   balance: Ether;
-  node: NodeConfig;
   nodeLib: RPCNode;
   network: NetworkConfig;
   tokens: MergedToken[];
@@ -122,7 +121,8 @@ const initialState: State = {
   generateDisabled: true,
   nonce: null,
   hasSetDefaultNonce: false,
-  generateTxProcessing: false
+  generateTxProcessing: false,
+  walletAddress: null
 };
 
 export class SendTransaction extends React.Component<Props, State> {
@@ -220,12 +220,22 @@ export class SendTransaction extends React.Component<Props, State> {
     }
   }
 
+  public async setWalletAddressOnUpdate() {
+    if (this.props.wallet) {
+      const walletAddress = await this.props.wallet.getAddress();
+      if (walletAddress !== this.state.walletAddress) {
+        this.setState({ walletAddress });
+      }
+    }
+  }
+
   public componentDidUpdate(prevProps: Props, prevState: State) {
     this.handleGasEstimationOnUpdate(prevState);
     this.handleGenerateDisabledOnUpdate();
     this.handleBroadcastTransactionOnUpdate();
     this.handleSetNonceWhenOfflineOnUpdate();
     this.handleWalletStateOnUpdate(prevProps);
+    this.setWalletAddressOnUpdate();
   }
 
   public onNonceChange = (value: number) => {
@@ -297,14 +307,14 @@ export class SendTransaction extends React.Component<Props, State> {
                     onChange={readOnly ? void 0 : this.onGasChange}
                   />
                   {(offline || forceOffline) && (
-                      <div>
-                        <NonceField
-                          value={nonce}
-                          onChange={this.onNonceChange}
-                          placeholder={'0'}
-                        />
-                      </div>
-                    )}
+                    <div>
+                      <NonceField
+                        value={nonce}
+                        onChange={this.onNonceChange}
+                        placeholder={'0'}
+                      />
+                    </div>
+                  )}
                   {unit === 'ether' && (
                     <DataField
                       value={data}
@@ -398,8 +408,7 @@ export class SendTransaction extends React.Component<Props, State> {
           {transaction &&
             showTxConfirm && (
               <ConfirmationModal
-                wallet={this.props.wallet}
-                node={this.props.node}
+                fromAddress={this.state.walletAddress}
                 signedTx={transaction.signedTx}
                 onClose={this.hideConfirmTx}
                 onConfirm={this.confirmTx}
@@ -640,7 +649,6 @@ function mapStateToProps(state: AppState) {
     wallet: state.wallet.inst,
     balance: state.wallet.balance,
     tokenBalances: getTokenBalances(state),
-    node: getNodeConfig(state),
     nodeLib: getNodeLib(state),
     network: getNetworkConfig(state),
     tokens: getTokens(state),
diff --git a/common/libs/transaction.ts b/common/libs/transaction.ts
index d6e1cdc8863..751998322ec 100644
--- a/common/libs/transaction.ts
+++ b/common/libs/transaction.ts
@@ -5,9 +5,16 @@ import ERC20 from 'libs/erc20';
 import { TransactionWithoutGas } from 'libs/messages';
 import { RPCNode } from 'libs/nodes';
 import { INode } from 'libs/nodes/INode';
-import { Ether, toTokenUnit, UnitKey, Wei } from 'libs/units';
+import {
+  Ether,
+  toTokenUnit,
+  UnitKey,
+  Wei,
+  toTokenDisplay,
+  toUnit
+} from 'libs/units';
 import { isValidETHAddress } from 'libs/validators';
-import { stripHexPrefixAndLower, valueToHex } from 'libs/values';
+import { stripHexPrefixAndLower, valueToHex, sanitizeHex } from 'libs/values';
 import { IWallet } from 'libs/wallet';
 import { translateRaw } from 'translations';
 import Big, { BigNumber } from 'bignumber.js';
@@ -61,6 +68,7 @@ export function getTransactionFields(tx: EthTx) {
     data: data === '0x' ? null : data,
     // To address is unchecksummed, which could cause mismatches in comparisons
     to: toChecksumAddress(to),
+    from: sanitizeHex(tx.getSenderAddress().toString('hex')),
     // Everything else is as-is
     nonce,
     gasPrice,
@@ -281,3 +289,29 @@ export function getBalanceMinusGasCosts(
   const weiBalanceMinusGasCosts = balance.amount.minus(weiGasCosts);
   return new Ether(weiBalanceMinusGasCosts);
 }
+
+export function decodeTransaction(transaction: EthTx, token: Token | false) {
+  const { to, value, data, gasPrice, nonce, from } = getTransactionFields(
+    transaction
+  );
+  let fixedValue;
+  let toAddress;
+
+  if (token) {
+    const tokenData = ERC20.$transfer(data);
+    fixedValue = toTokenDisplay(new Big(tokenData.value), token).toString();
+    toAddress = tokenData.to;
+  } else {
+    fixedValue = toUnit(new Big(value, 16), 'wei', 'ether').toString();
+    toAddress = to;
+  }
+
+  return {
+    value: fixedValue,
+    gasPrice: toUnit(new Big(gasPrice, 16), 'wei', 'gwei').toString(),
+    data,
+    toAddress,
+    nonce,
+    from
+  };
+}
diff --git a/common/libs/values.ts b/common/libs/values.ts
index f213ececd15..7b598bd57d1 100644
--- a/common/libs/values.ts
+++ b/common/libs/values.ts
@@ -14,3 +14,16 @@ export function valueToHex(value: Ether): string {
   // Finally, hex it up!
   return `0x${wei.toString(16)}`;
 }
+
+export function padLeftEven(hex: string) {
+  return hex.length % 2 !== 0 ? `0${hex}` : hex;
+}
+
+// TODO: refactor to not mutate argument
+export function sanitizeHex(hex: string) {
+  hex = hex.substring(0, 2) === '0x' ? hex.substring(2) : hex;
+  if (hex === '') {
+    return '';
+  }
+  return `0x${padLeftEven(hex)}`;
+}
diff --git a/common/typescript/ethereumjs-tx.d.ts b/common/typescript/ethereumjs-tx.d.ts
index 3b72cc1c641..33786e99696 100644
--- a/common/typescript/ethereumjs-tx.d.ts
+++ b/common/typescript/ethereumjs-tx.d.ts
@@ -42,7 +42,7 @@ declare module 'ethereumjs-tx' {
   class ITx {
     public raw: Buffer;
 
-    constructor(data: Data);
+    constructor(data: Data | string);
     /**
      * If the tx's `to` is to the creation address
      * @return {Boolean}