Merge #2101 from jg-fixes

Misc small UI fixes (recently broken)

js/src/modals/AddAddress/addAddress.js

@@ -22,14 +22,9 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
 import { Modal, Form, Input, InputAddress } from '../../ui';
 import { ERRORS, validateAddress, validateName } from '../../util/validation';
 
-import styles from './addAddress.css';
-
 export default class AddAddress extends Component {
-  static contextTypes = {
-    contacts: PropTypes.array.isRequired
-  };
-
   static propTypes = {
+    contacts: PropTypes.object.isRequired,
     onClose: PropTypes.func
   };
 
@@ -45,10 +40,8 @@ export default class AddAddress extends Component {
     return (
       <Modal
         visible
-        actions={ this.renderDialogActions() }>
-        <div className={ styles.header }>
-          <h3>add saved address</h3>
-        </div>
+        actions={ this.renderDialogActions() }
+        title='add saved address'>
         { this.renderFields() }
       </Modal>
     );
@@ -102,11 +95,11 @@ export default class AddAddress extends Component {
   }
 
   onEditAddress = (event, _address) => {
-    const { contacts } = this.context;
+    const { contacts } = this.props;
     let { address, addressError } = validateAddress(_address);
 
     if (!addressError) {
-      const contact = contacts.find((contact) => contact.address === address);
+      const contact = contacts[address];
 
       if (contact) {
         addressError = ERRORS.duplicateAddress;

js/src/modals/Transfer/Details/details.js

@@ -116,42 +116,44 @@ export default class Details extends Component {
     const { api } = this.context;
     const { balance, tag } = this.props;
 
-    const items = balance.tokens.map((balance, idx) => {
-      const token = balance.token;
-      const isEth = idx === 0;
-      let value = 0;
-
-      if (isEth) {
-        value = api.format.fromWei(balance.value).toFormat(3);
-      } else {
-        value = new BigNumber(balance.value).div(balance.token.format || 1).toFormat(3);
-      }
-
-      const label = (
-        <div className={ styles.token }>
-          <img src={ token.images.small } />
-          <div className={ styles.tokenname }>
-            { token.name }
+    const items = balance.tokens
+      .filter((token) => token.value.gt(0))
+      .map((balance, idx) => {
+        const token = balance.token;
+        const isEth = idx === 0;
+        let value = 0;
+
+        if (isEth) {
+          value = api.format.fromWei(balance.value).toFormat(3);
+        } else {
+          value = new BigNumber(balance.value).div(balance.token.format || 1).toFormat(3);
+        }
+
+        const label = (
+          <div className={ styles.token }>
+            <img src={ token.image } />
+            <div className={ styles.tokenname }>
+              { token.name }
+            </div>
+            <div className={ styles.tokenbalance }>
+              { value }<small> { token.tag }</small>
+            </div>
           </div>
-          <div className={ styles.tokenbalance }>
-            { value }<small> { token.tag }</small>
-          </div>
-        </div>
-      );
-
-      return (
-        <MenuItem
-          key={ token.tag }
-          value={ token.tag }
-          label={ label }>
-          { label }
-        </MenuItem>
-      );
-    });
+        );
+
+        return (
+          <MenuItem
+            key={ token.tag }
+            value={ token.tag }
+            label={ label }>
+            { label }
+          </MenuItem>
+        );
+      });
 
     return (
       <Select
-        label='type of transfer'
+        label='type of token transfer'
         hint='type of token to transfer'
         value={ tag }
         onChange={ this.onChangeToken }>

js/src/modals/Transfer/transfer.js

@@ -21,7 +21,6 @@ import { bindActionCreators } from 'redux';
 import { FlatButton } from 'material-ui';
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
-import ContentSend from 'material-ui/svg-icons/content/send';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 
@@ -86,12 +85,12 @@ class Transfer extends Component {
   render () {
     const { stage, extras } = this.state;
 
+    // title={ this.renderAccount() }
     return (
       <Modal
         actions={ this.renderDialogActions() }
         current={ stage }
         steps={ extras ? STAGES_EXTRA : STAGES_BASIC }
-        title={ this.renderAccount() }
         visible>
         { this.renderPage() }
       </Modal>
@@ -181,6 +180,7 @@ class Transfer extends Component {
   }
 
   renderDialogActions () {
+    const { account } = this.props;
     const { extras, sending, stage } = this.state;
 
     const cancelBtn = (
@@ -205,7 +205,7 @@ class Transfer extends Component {
     const sendBtn = (
       <FlatButton
         disabled={ !this.isValid() || sending }
-        icon={ <ContentSend /> }
+        icon={ <IdentityIcon address={ account.address } button /> }
         label='Send' primary
         onTouchTap={ this.onSend } />
     );
@@ -501,7 +501,7 @@ class Transfer extends Component {
     const { gas, gasPrice, tag, valueAll, isEth } = this.state;
     const gasTotal = new BigNumber(gasPrice || 0).mul(new BigNumber(gas || 0));
     const balance_ = balance.tokens.find((b) => tag === b.token.tag);
-    const availableEth = new BigNumber(balance_.value);
+    const availableEth = new BigNumber(balance.tokens[0].value);
     const available = new BigNumber(balance_.value);
     const format = new BigNumber(balance_.token.format || 1);
 

js/src/redux/providers/balances.js

@@ -18,27 +18,20 @@ import { getBalances, getTokens } from './balancesActions';
 
 import { eip20Abi, registryAbi, tokenRegAbi } from '../../util/abi';
 
-import imagesEthereum32 from '../../images/contracts/ethereum-32.png';
-import imagesEthereum56 from '../../images/contracts/ethereum-56.png';
-import imagesGavcoin32 from '../../images/contracts/gavcoin-32.png';
-import imagesGavcoin56 from '../../images/contracts/gavcoin-56.png';
+import imagesEthereum from '../../images/contracts/ethereum-56.png';
+import imagesGavcoin from '../../images/contracts/gavcoin-56.png';
+import imagesUnknown from '../../images/contracts/unknown-56.png';
 
 // TODO: Images should not be imported like this, should be via the content from GitHubHint contract (here until it is ready)
 const images = {
-  ethereum: {
-    small: imagesEthereum32,
-    normal: imagesEthereum56
-  },
-  gavcoin: {
-    small: imagesGavcoin32,
-    normal: imagesGavcoin56
-  }
+  ethereum: imagesEthereum,
+  gavcoin: imagesGavcoin
 };
 
 const ETH = {
   name: 'Ethereum',
   tag: 'ΞTH',
-  images: images.ethereum
+  image: images.ethereum
 };
 
 export default class Balances {
@@ -107,7 +100,7 @@ export default class Balances {
             name,
             tag,
             format: format.toString(),
-            images: images[name.toLowerCase()],
+            image: images[name.toLowerCase()] || imagesUnknown,
             contract: this._api.newContract(eip20Abi, address)
           };
           tokens[address] = token;
@@ -164,7 +157,7 @@ export default class Balances {
           this._tokens.forEach((token, tidx) => {
             balance.tokens.push({
               token,
-              value: balanceOf[tidx].toString()
+              value: balanceOf[tidx]
             });
           });
         });

js/src/ui/Balance/balance.js

@@ -49,7 +49,7 @@ export default class Balance extends Component {
             className={ styles.balance }
             key={ token.tag }>
             <img
-              src={ token.images.small }
+              src={ token.image }
               alt={ token.name } />
             <div>{ value }<small> { token.tag }</small></div>
           </div>

js/src/ui/IdentityIcon/identityIcon.js

@@ -58,9 +58,9 @@ export default class IdentityIcon extends Component {
     const { button, tokens, inline } = this.props;
     const token = (tokens || {})[_address];
 
-    if (token && token.images) {
+    if (token && token.image) {
       this.setState({
-        iconsrc: token.images[inline ? 'small' : 'normal']
+        iconsrc: token.image
       });
 
       return;

js/src/ui/Modal/ModalSteps/index.js → js/src/ui/Modal/Title/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './modalSteps';
+export default from './title';

js/src/ui/Modal/ModalSteps/modalSteps.js → js/src/ui/Modal/Title/title.js

@@ -20,7 +20,7 @@ import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
 
 import styles from '../modal.css';
 
-export default class ModalSteps extends Component {
+export default class Title extends Component {
   static propTypes = {
     current: PropTypes.number,
     steps: PropTypes.array.isRequired,
@@ -35,13 +35,26 @@ export default class ModalSteps extends Component {
 
     return (
       <div className={ styles.title }>
-        <h3>{ steps[current] }</h3>
-        <div>{ title }</div>
+        <h3>{ steps ? steps[current] : title }</h3>
+        { this.renderSteps() }
+        { this.renderWaiting() }
+      </div>
+    );
+  }
+
+  renderSteps () {
+    const { current, steps } = this.props;
+
+    if (!steps) {
+      return;
+    }
+
+    return (
+      <div className={ styles.steps }>
         <Stepper
           activeStep={ current }>
           { this.renderTimeline() }
         </Stepper>
-        { this.renderWaiting() }
       </div>
     );
   }

js/src/ui/Modal/modal.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .title {
-  padding: 1em 1em 0 1em;
+  padding: 1em;
   background: rgba(0, 0, 0, 0.175);
 }
 
@@ -24,6 +24,10 @@
   text-transform: uppercase;
 }
 
+.title .steps {
+  margin-bottom: -1em;
+}
+
 .waiting {
   margin: 0 -1em 0 -1em;
 }

js/src/ui/Modal/modal.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 
 import { Dialog } from 'material-ui';
 
-import ModalSteps from './ModalSteps';
+import Title from './Title';
 
 const ACTIONS_STYLE = { borderStyle: 'none' };
 const TITLE_STYLE = { borderStyle: 'none' };
@@ -43,23 +43,13 @@ export default class Modal extends Component {
 
   render () {
     const { actions, current, children, scroll, steps, waiting, title, visible } = this.props;
-    let header;
-
-    if (steps) {
-      header = (
-        <ModalSteps
-          current={ current }
-          waiting={ waiting }
-          steps={ steps }
-          title={ title } />
-      );
-    } else {
-      header = (
-        <div className={ styles.title }>
-          <h3>{ title }</h3>
-        </div>
-      );
-    }
+    const header = (
+      <Title
+        current={ current }
+        waiting={ waiting }
+        steps={ steps }
+        title={ title } />
+    );
 
     return (
       <Dialog