Fix Send Regressions (#170)

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>
+    );
+  }
+}

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) => {

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>

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);
     }

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 {

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}

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";

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;
+      }
+    }
+  }
+}

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;