Cherry-pick and merge WIP from whilei/account-popup

src/components/accounts/account.js

@@ -5,15 +5,16 @@ import { TableRow, TableRowColumn } from 'material-ui/Table';
 import { gotoScreen } from 'store/screenActions';
 import log from 'loglevel';
 import { link, tables } from 'lib/styles';
+import AccountPopup from './popup';
 
 const Render = ({ account, openAccount }) => (
-    <TableRow onClick={openAccount} selectable={false}>
-        <TableRowColumn style={tables.shortStyle}>
+    <TableRow selectable={false}>
+        <TableRowColumn style={tables.shortStyle} onClick={openAccount}>
             <span style={link}>
                 {account.get('name')}
             </span>
         </TableRowColumn>
-        <TableRowColumn style={tables.wideStyle}>
+        <TableRowColumn style={tables.wideStyle} onClick={openAccount} >
             <span style={link}>
                 {account.get('id')}
             </span>
@@ -22,6 +23,9 @@ const Render = ({ account, openAccount }) => (
             <span style={link}>
                 {account.get('balance') ? account.get('balance').getEther() : '?'} Ether
             </span>
+            <span>
+                <AccountPopup account={account}/>
+            </span>
         </TableRowColumn>
     </TableRow>
 );

src/components/accounts/popup-button.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import RaisedButton from 'material-ui/RaisedButton';
+import FontIcon from 'material-ui/FontIcon';
+
+import log from 'loglevel';
+import { accountPopupOpen } from 'store/accountActions';
+
+const TokenRow = ({ token }) => {
+    const balance = token.get('balance') ? token.get('balance').getDecimalized() : '0';
+
+    return (
+        <div><span>{balance} {token.get('symbol')}</span></div>
+    );
+};
+TokenRow.propTypes = {
+    token: PropTypes.object.isRequired,
+};
+
+const Render = ({ account, handleOpenAccountDialog }) => (
+    <RaisedButton label="Add ETC"
+            icon={<FontIcon className="fa fa-qrcode"/>}
+            onTouchTap={handleOpenAccountDialog(account)} />
+);
+
+Render.propTypes = {
+    account: PropTypes.object.isRequired,
+    handleOpenAccountDialog: PropTypes.func.isRequired,
+};
+
+const AccountPopupButton = connect(
+    (state, ownProps) => ({}),
+    (dispatch, ownProps) => ({
+        handleOpenAccountDialog: (account) => {
+            log.debug('popup open', account);
+            dispatch(accountPopupOpen(account));
+        },
+    })
+)(Render);
+
+export default AccountPopupButton;

src/components/accounts/popup.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import { connect } from 'react-redux';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import FontIcon from 'material-ui/FontIcon';
+import { Row, Col } from 'react-flexbox-grid/lib/index';
+import { DescriptionList, DescriptionTitle, DescriptionData } from 'elements/dl';
+import QRCode from 'qrcode.react';
+import log from 'loglevel';
+import { translate } from 'react-i18next';
+import { cardSpace } from 'lib/styles';
+import { accountPopupClose } from 'store/accountActions';
+
+
+const TokenRow = ({ token }) => {
+    const balance = token.get('balance') ? token.get('balance').getDecimalized() : '0';
+
+    return (
+        <div><span>{balance} {token.get('symbol')}</span></div>
+    );
+};
+TokenRow.propTypes = {
+    token: PropTypes.object.isRequired,
+};
+
+const Render = translate('accounts')(({ t, account, fiat, handleCloseAccountDialog, open }) => {
+    const value = t('show.value', {value: account.get('balance') ? account.get('balance').getEther() : '?'});
+    const pending = account.get('balancePending') ? `(${account.get('balancePending').getEther()} pending)` : null;
+
+    return (
+            <Dialog style={cardSpace} modal={false} open={open} onRequestClose={handleCloseAccountDialog}>
+                <Row>
+                    <Col xs={12}>
+                        <h1>Add Ether</h1>
+                        <FlatButton
+                            label="Cancel"
+                            primary={true}
+                            onTouchTap={handleCloseAccountDialog}
+                            icon={<FontIcon className="fa fa-close" />}
+                          />
+                    </Col>
+                </Row>
+                <Row>
+                    <Col xs={8}>
+                        <DescriptionList>
+                            {account.get('description') && <div>
+                            <DescriptionTitle>{t('show.description.title')}</DescriptionTitle>
+                            <DescriptionData>{account.get('description')}</DescriptionData>
+                            </div>}
+
+                            <DescriptionTitle>{t('show.description.address')}</DescriptionTitle>
+                            <DescriptionData>{account.get('id')}</DescriptionData>
+
+                            <DescriptionTitle>{t('show.description.sentTransactions')}</DescriptionTitle>
+                            <DescriptionData>{account.get('txcount') || '0'}</DescriptionData>
+
+                            <DescriptionTitle>{t('show.description.etherBalance')}</DescriptionTitle>
+                            <DescriptionData>{value}</DescriptionData>
+                            <DescriptionData>{value} {pending}</DescriptionData>
+
+                            <DescriptionTitle>{t('show.description.tokenBalance')}</DescriptionTitle>
+                            <DescriptionData>
+                                {account
+                                    .get('tokens')
+                                    .map((tok) =>
+                                        <TokenRow token={tok} key={tok.get('address')}/>
+                                )}
+                            </DescriptionData>
+
+                            <DescriptionTitle>Equivalent Values</DescriptionTitle>
+                            <DescriptionData>
+                                <div><span>BTC {fiat.btc}</span></div>
+                                <div><span>USD {fiat.usd}</span></div>
+                                <div><span>CNY {fiat.cny}</span></div>
+                            </DescriptionData>
+
+                        </DescriptionList>
+                    </Col>
+                    <Col xs={4} md={2} mdOffset={2}>
+                        <QRCode value={account.get('id')} />
+                    </Col>
+                </Row>
+            </Dialog>
+    );
+});
+
+Render.propTypes = {
+    account: PropTypes.object.isRequired,
+    handleCloseAccountDialog: PropTypes.func.isRequired,
+    open: PropTypes.bool.isRequired,
+};
+
+const AccountPopup = connect(
+    (state, ownProps) => {
+        const account = state.get('accountPopup', Immutable.fromJS());
+        const open = account === {};
+
+        let fiat = {};
+        if (open) {
+            const balance = account.get('balance');
+            const rates = state.accounts.get('rates');
+            if (rates && balance) {
+                fiat = {
+                    btc: balance.getFiat(rates.get('btc')),
+                    eur: balance.getFiat(rates.get('eur')),
+                    usd: balance.getFiat(rates.get('usd')),
+                    cny: balance.getFiat(rates.get('cny')),
+                };
+            }
+        }
+
+        return {
+            account,
+            open,
+            fiat,
+        };
+    },
+    (dispatch, ownProps) => ({
+        handleCloseAccountDialog: () => {
+            log.debug('close popup');
+            dispatch(accountPopupClose());
+        },
+    })
+)(Render);
+
+export default AccountPopup;

src/components/main.js

@@ -12,8 +12,9 @@ import { gotoScreen } from 'store/screenActions';
 import './main.scss';
 import Screen from './screen';
 import Header from './layout/header';
+import AccountPopup from './accounts/popup';
 
-const Render = translate("common")(({t, ...props}) => (
+const Render = translate('common')(({t, ...props}) => (
     <Grid>
         <Row>
             <Col xs={12}>
@@ -36,6 +37,7 @@ const Render = translate("common")(({t, ...props}) => (
                 </div>
             </Col>
         </Row>
+        <AccountPopup />
     </Grid>
 ));
 

src/store/accountReducers.js

@@ -4,6 +4,7 @@ import { toNumber } from '../lib/convert';
 
 const initial = Immutable.fromJS({
     accounts: [],
+    accountPopup: {},
     trackedTransactions: [],
     loading: false,
     gasPrice: new Wei(23000000000),
@@ -96,6 +97,15 @@ function onSetBalance(state, action) {
     return state;
 }
 
+function onAccountPopup(state, action) {
+    if (action.type === 'ACCOUNT/POPUP/OPEN') {
+        state.set('accountPopup', action.account);
+    } else {
+        state.set('accountPopup', {});
+    }
+    return state;
+}
+
 function onSetTokenBalance(state, action) {
     if (action.type === 'ACCOUNT/SET_TOKEN_BALANCE') {
         return updateAccount(state, action.accountId, (acc) => {
@@ -219,5 +229,6 @@ export default function accountsReducers(state, action) {
     state = onLoadPending(state, action);
     state = onPendingBalance(state, action);
     state = onExchangeRates(state, action);
+    state = onAccountPopup(state, action);
     return state;
 }