From d654b609497e73d9795748706eaf11f26f68a40d Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Thu, 7 Sep 2017 15:14:52 -0500
Subject: [PATCH] Fix Send Regressions (#170)

---
 common/components/ui/SimpleDropDown.jsx       | 62 +++++++++++++++
 .../{SimpleDropdown.jsx => SimpleSelect.jsx}  | 12 +--
 .../components/EnterPassword.jsx              |  6 +-
 .../components/UnitDropdown.jsx               | 76 ++++---------------
 .../containers/Tabs/SendTransaction/index.jsx |  2 +-
 .../Tabs/Swap/components/CurrencySwap.jsx     |  6 +-
 common/sass/styles/overrides.scss             |  1 +
 common/sass/styles/overrides/dropdowns.scss   | 33 ++++++++
 .../sass/styles/overrides/input-groups.scss   |  2 +-
 9 files changed, 123 insertions(+), 77 deletions(-)
 create mode 100644 common/components/ui/SimpleDropDown.jsx
 rename common/components/ui/{SimpleDropdown.jsx => SimpleSelect.jsx} (73%)
 create mode 100644 common/sass/styles/overrides/dropdowns.scss

diff --git a/common/components/ui/SimpleDropDown.jsx b/common/components/ui/SimpleDropDown.jsx
new file mode 100644
index 00000000..fa951cb4
--- /dev/null
+++ b/common/components/ui/SimpleDropDown.jsx
@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react';
+
+type Props = {
+  value?: string,
+  options: string[],
+  onChange: (value: string) => void
+};
+
+export default class SimpleDropDown extends Component {
+  props: Props;
+  state: {
+    expanded: boolean
+  } = {
+    expanded: false
+  };
+
+  toggleExpanded = () => {
+    this.setState(state => {
+      return { expanded: !state.expanded };
+    });
+  };
+
+  onClick = (event: SyntheticInputEvent) => {
+    const value = event.target.getAttribute('data-value') || '';
+    this.props.onChange(value);
+    this.setState({ expanded: false });
+  };
+
+  render() {
+    const { options, value } = this.props;
+    const { expanded } = this.state;
+    return (
+      <div className={`dropdown ${expanded ? 'open' : ''}`}>
+        <a
+          className="btn btn-default dropdown-toggle"
+          onClick={this.toggleExpanded}
+        >
+          {value}
+          <i className="caret" />
+        </a>
+
+        {expanded &&
+          <ul className="dropdown-menu dropdown-menu-right">
+            {options.map((option, i) => {
+              return (
+                <li key={i}>
+                  <a
+                    className={option === value ? 'active' : ''}
+                    onClick={this.onClick}
+                    data-value={option}
+                  >
+                    {option}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>}
+      </div>
+    );
+  }
+}
diff --git a/common/components/ui/SimpleDropdown.jsx b/common/components/ui/SimpleSelect.jsx
similarity index 73%
rename from common/components/ui/SimpleDropdown.jsx
rename to common/components/ui/SimpleSelect.jsx
index 10c5ccb2..49cca406 100644
--- a/common/components/ui/SimpleDropdown.jsx
+++ b/common/components/ui/SimpleSelect.jsx
@@ -1,20 +1,20 @@
 // @flow
 import React, { Component } from 'react';
 
-type Props<T> = {
-  value?: T,
-  options: Array<T>,
+type Props = {
+  value?: string,
+  options: string[],
   onChange: (event: SyntheticInputEvent) => void
 };
 
-export default class SimpleDropDown<T: *> extends Component {
-  props: Props<T>;
+export default class SimpleSelect extends Component {
+  props: Props;
 
   render() {
     return (
       <select
         value={this.props.value || this.props.options[0]}
-        className="form-control"
+        className={'form-control'}
         onChange={this.props.onChange}
       >
         {this.props.options.map((obj, i) => {
diff --git a/common/containers/Tabs/GenerateWallet/components/EnterPassword.jsx b/common/containers/Tabs/GenerateWallet/components/EnterPassword.jsx
index 90f3a509..82447d2c 100644
--- a/common/containers/Tabs/GenerateWallet/components/EnterPassword.jsx
+++ b/common/containers/Tabs/GenerateWallet/components/EnterPassword.jsx
@@ -93,7 +93,7 @@ class EnterPassword extends Component {
             <span>
               {' '}{translate('GEN_Help_2')}
             </span>
-            <span translate="GEN_Help_3" className="ng-scope">
+            <span>
               {' '}{translate('GEN_Help_3')}
             </span>
           </li>
@@ -129,9 +129,7 @@ class EnterPassword extends Component {
           </li>
         </ul>
 
-        <h4 translate="GEN_Help_4" className="ng-scope">
-          Guides & FAQ
-        </h4>
+        <h4>Guides & FAQ</h4>
         <ul>
           <li>
             <strong>
diff --git a/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx b/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx
index a7b20639..6191165d 100644
--- a/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx
+++ b/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx
@@ -1,34 +1,16 @@
 // @flow
 import React from 'react';
+import SimpleDropDown from 'components/ui/SimpleDropDown';
 
-class Option extends React.Component {
-  props: {
-    value: string,
-    active: boolean,
-    onChange: (value: string) => void
-  };
-  render() {
-    const { value, active } = this.props;
-    return (
-      <li>
-        <a className={active ? 'active' : ''} onClick={this.onChange}>
-          {value}
-        </a>
-      </li>
-    );
-  }
-
-  onChange = () => {
-    this.props.onChange(this.props.value);
-  };
-}
+type UnitDropdownProps = {
+  value: string,
+  options: string[],
+  onChange?: (value: string) => void
+};
 
 export default class UnitDropdown extends React.Component {
-  props: {
-    value: string,
-    options: string[],
-    onChange?: (value: string) => void
-  };
+  props: UnitDropdownProps;
+
   state: {
     expanded: boolean
   } = {
@@ -36,50 +18,20 @@ export default class UnitDropdown extends React.Component {
   };
 
   render() {
-    const { value, options, onChange } = this.props;
-    const isReadonly = !onChange;
+    const { value, options } = this.props;
 
     return (
       <div className="input-group-btn">
-        <a
-          style={{ minWidth: 170 }}
-          className="btn btn-default dropdown-toggle"
-          onClick={this.onToggleExpand}
-        >
-          <strong>
-            {value}
-            <i className="caret" />
-          </strong>
-        </a>
-        {this.state.expanded &&
-          !isReadonly &&
-          <ul className="dropdown-menu dropdown-menu-right">
-            {options.map(o =>
-              <Option
-                key={o}
-                active={value === o}
-                value={o}
-                onChange={this.onChange}
-              />
-            )}
-          </ul>}
+        <SimpleDropDown
+          value={value}
+          onChange={this.onChange}
+          options={options}
+        />
       </div>
     );
   }
 
-  onToggleExpand = () => {
-    this.setState(state => {
-      return {
-        expanded: !state.expanded
-      };
-    });
-  };
-
   onChange = (value: string) => {
-    this.setState({
-      expanded: false
-    });
-
     if (this.props.onChange) {
       this.props.onChange(value);
     }
diff --git a/common/containers/Tabs/SendTransaction/index.jsx b/common/containers/Tabs/SendTransaction/index.jsx
index 4ddafbb1..52b857b2 100644
--- a/common/containers/Tabs/SendTransaction/index.jsx
+++ b/common/containers/Tabs/SendTransaction/index.jsx
@@ -412,7 +412,7 @@ export class SendTransaction extends React.Component {
         const weiBalance = toWei(balance, 'ether');
         value = getBalanceMinusGasCosts(
           new Big(gasLimit),
-          gasPrice,
+          new Big(gasPrice),
           weiBalance
         );
       } else {
diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.jsx b/common/containers/Tabs/Swap/components/CurrencySwap.jsx
index 6d2e40bf..50e03cd8 100644
--- a/common/containers/Tabs/Swap/components/CurrencySwap.jsx
+++ b/common/containers/Tabs/Swap/components/CurrencySwap.jsx
@@ -2,7 +2,7 @@ import './CurrencySwap.scss';
 import React, { Component } from 'react';
 import translate from 'translations';
 import { combineAndUpper } from 'utils/formatters';
-import SimpleDropDown from 'components/ui/SimpleDropdown';
+import SimpleSelect from 'components/ui/SimpleSelect';
 import SimpleButton from 'components/ui/SimpleButton';
 import type {
   OriginKindSwapAction,
@@ -183,7 +183,7 @@ export default class CurrencySwap extends Component {
             onChange={this.onChangeOriginAmount}
           />
 
-          <SimpleDropDown
+          <SimpleSelect
             value={originKind}
             onChange={this.onChangeOriginKind.bind(this)}
             options={originKindOptions}
@@ -208,7 +208,7 @@ export default class CurrencySwap extends Component {
             onChange={this.onChangeDestinationAmount}
           />
 
-          <SimpleDropDown
+          <SimpleSelect
             value={destinationKind}
             onChange={this.onChangeDestinationKind}
             options={destinationKindOptions}
diff --git a/common/sass/styles/overrides.scss b/common/sass/styles/overrides.scss
index c416321e..c435fa7a 100644
--- a/common/sass/styles/overrides.scss
+++ b/common/sass/styles/overrides.scss
@@ -3,6 +3,7 @@
 @import "./overrides/alerts";
 @import "./overrides/buttons";
 @import "./overrides/button-groups";
+@import "./overrides/dropdowns";
 @import "./overrides/forms";
 @import "./overrides/grid";
 @import "./overrides/input-groups";
diff --git a/common/sass/styles/overrides/dropdowns.scss b/common/sass/styles/overrides/dropdowns.scss
new file mode 100644
index 00000000..50c37430
--- /dev/null
+++ b/common/sass/styles/overrides/dropdowns.scss
@@ -0,0 +1,33 @@
+// Button overrides
+@import "common/sass/variables";
+
+.dropdown {
+  .caret {
+    margin-left: $space-sm;
+  }
+}
+
+.dropdown-menu {
+  padding: 0;
+  border: none;
+
+  > li {
+    margin: 0;
+
+    &:first-child {
+      padding-top: 4px;
+    }
+
+    &:last-child {
+      padding-bottom: 4px;
+    }
+
+    > a {
+      font-weight: 300;
+
+      &.active {
+        color: $link-color;
+      }
+    }
+  }
+}
diff --git a/common/sass/styles/overrides/input-groups.scss b/common/sass/styles/overrides/input-groups.scss
index 35ab24e1..67624d41 100644
--- a/common/sass/styles/overrides/input-groups.scss
+++ b/common/sass/styles/overrides/input-groups.scss
@@ -19,7 +19,7 @@
 }
 
 .input-group-btn {
-  > .btn {
+  .btn {
     margin-bottom: 0;
     margin-top: 0;
     font-size: $font-size-base;