Account popup

package.json

@@ -46,11 +46,13 @@
   "dependencies": {
     "bignumber.js": "4.0.0",
     "classnames": "^2.1.2",
+    "copy-to-clipboard": "^3.0.6",
     "eslint-plugin-react": "^6.10.3",
     "ethereumjs-abi": "0.6.4",
     "ethereumjs-util": "5.1.1",
     "fbjs": "0.8.9",
     "flexboxgrid": "^6.3.0",
+    "follow-redirects": "1.2.3",
     "font-awesome": "4.7.0",
     "i18next": "^8.3.0",
     "i18next-browser-languagedetector": "^1.0.1",
@@ -59,6 +61,7 @@
     "i18next-xhr-backend": "^1.4.1",
     "immutable": "3.8.1",
     "isomorphic-fetch": "^2.2.1",
+    "kbpgp": "2.0.72",
     "lib": "^2.2.5",
     "loglevel": "1.4.0",
     "material-ui": "^0.16.6",
@@ -83,9 +86,7 @@
     "redux-thunk": "2.2.0",
     "roboto-fontface": "0.7.0",
     "store": "^2.0.4",
-    "unzip2": "0.2.5",
-    "follow-redirects": "1.2.3",
-    "kbpgp": "2.0.72"
+    "unzip2": "0.2.5"
   },
   "devDependencies": {
     "@elastic/webpack-directory-name-as-main": "2.0.2",

src/components/accounts/account.js

@@ -5,24 +5,30 @@ 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}>
-            <span style={link}>
+    <TableRow selectable={false} >
+        <TableRowColumn xs={3} >
+            <span style={link} onClick={openAccount}>
                 {account.get('name')}
             </span>
         </TableRowColumn>
-        <TableRowColumn style={tables.wideStyle}>
-            <span style={link}>
+        <TableRowColumn xs={5} >
+            <span style={link} onClick={openAccount}>
                 {account.get('id')}
             </span>
         </TableRowColumn>
-        <TableRowColumn style={tables.shortStyle}>
+        <TableRowColumn xs={3}>
             <span style={link}>
                 {account.get('balance') ? account.get('balance').getEther() : '?'} Ether
             </span>
         </TableRowColumn>
+        <TableRowColumn xs={1} >
+            <span>
+            <AccountPopup account={account}/>
+            </span>
+        </TableRowColumn>
     </TableRow>
 );
 

src/components/accounts/add/add.js

@@ -41,7 +41,8 @@ const Render = translate("accounts")(({ t, handleSubmit, submitting, generate, i
         <CardActions>
             <FlatButton label={t("common:cancel")}
                         onClick={cancel}
-                        icon={<FontIcon className="fa fa-ban" />}/>
+                        icon={<FontIcon className="fa fa-ban" />}
+                        secondary={true} />
         </CardActions>
     </Card>
 ));

src/components/accounts/add/generate.js

@@ -67,7 +67,8 @@ const Render = translate("accounts")(({ t, account, submitSucceeded, handleSubmi
         <CardActions>
             <FlatButton label={t("common:cancel")}
                         onClick={cancel}
-                        icon={<FontIcon className="fa fa-ban" />}/>
+                        icon={<FontIcon className="fa fa-ban" />}
+                        secondary={true} />
         </CardActions>
     </Card>
 ));

src/components/accounts/list.js

@@ -6,7 +6,7 @@ import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';
 import FontIcon from 'material-ui/FontIcon';
 import Avatar from 'material-ui/Avatar';
-import { cardSpace, tables } from 'lib/styles';
+import { cardSpace } from 'lib/styles';
 import Immutable from 'immutable';
 import { translate } from 'react-i18next';
 import { gotoScreen } from 'store/screenActions';
@@ -16,9 +16,10 @@ const Render = translate('accounts')(({ t, accounts, createAccount }) => {
     const table = <Table selectable={false}>
         <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
             <TableRow>
-                <TableHeaderColumn style={tables.shortStyle}>Account</TableHeaderColumn>
-                <TableHeaderColumn style={tables.wideStyle}>Address</TableHeaderColumn>
-                <TableHeaderColumn style={tables.shortStyle}>Balance</TableHeaderColumn>
+                <TableHeaderColumn xs={3}>Account</TableHeaderColumn>
+                <TableHeaderColumn xs={5}>Address</TableHeaderColumn>
+                <TableHeaderColumn xs={3}>Balance</TableHeaderColumn>
+                <TableHeaderColumn xs={1}>Add Ether</TableHeaderColumn>
             </TableRow>
         </TableHeader>
         <TableBody displayRowCheckbox={false}>

src/components/accounts/popup.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import { connect } from 'react-redux';
+import { translate } from 'react-i18next';
+import log from 'loglevel';
+import QRCode from 'qrcode.react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import FontIcon from 'material-ui/FontIcon';
+import copy from 'copy-to-clipboard';
+import { Row, Col } from 'react-flexbox-grid/lib/index';
+import { DescriptionList, DescriptionTitle, DescriptionData } from 'elements/dl';
+import { link, align, cardSpace } from 'lib/styles';
+import { Wei } from 'lib/types';
+
+/**
+ * Dialog with action buttons. The actions are passed in as an array of React objects,
+ * in this example [FlatButtons](/#/components/flat-button).
+ *
+ * You can also close this dialog by clicking outside the dialog, or with the 'Esc' key.
+ */
+class AccountPopupRender extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false,
+        }
+
+    }
+
+  handleOpen = () => {
+    this.setState({open: true});
+  };
+
+  handleClose = () => {
+    this.setState({open: false});
+  };
+
+  render() {
+    const { account, rates, gasPrice } = this.props;
+    const styles = {
+        container: {
+            display: 'inline',
+        },
+        closeButton: {
+            float: 'right',
+            color: 'green',
+        },
+        openButton: {
+            display: 'inline',
+            backgroundColor: 'dimgray',
+            color: 'white',
+        },
+        qr: {
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: '90%',
+        },
+        usageText: {
+            color: 'gray',
+        },
+        usageWarning: {
+            color: 'crimson',
+            fontSize: '0.9rem',
+        },
+        accountId: {
+            overflow: 'scroll',
+            backgroundColor: 'whitesmoke',
+            padding: '0.1rem 0.3rem',
+            display: 'inline',
+            fontSize: '0.8rem', /* to better ensure fit for all screen sizes */
+        },
+        copyIcon: {
+            display: 'inline',
+            fontSize: '0.9rem',
+            color: 'darkgray',
+            marginLeft: '0.3rem',
+        },
+    };
+
+    function copyAccountToClipBoard() {
+        copy(account.get('id'));
+    }
+
+    return (
+        <div style={styles.container}>
+        <FlatButton
+            label="Add ETC"
+            icon={<FontIcon className='fa fa-qrcode' />}
+            onTouchTap={this.handleOpen}
+            style={styles.openButton} />
+        <Dialog
+          modal={false}
+          open={this.state.open}
+          onRequestClose={this.handleClose}
+        >
+            <Row>
+                <Col xs={11}>
+                    <h1>Add ETC</h1>
+                </Col>
+                <Col xs={1}>
+                    <FlatButton
+                      icon={<FontIcon className='fa fa-close' />}
+                      primary={true}
+                      onTouchTap={this.handleClose}
+                      style={styles.closeButton}
+                    />
+                </Col>
+            </Row>
+            <Row>
+                <Col xs={7}>
+                    <p>Top up your wallet with BTC</p>
+                    <DescriptionList>
+                        {account.get('description') && <div>
+        -                            <DescriptionData>{account.get('description')}</DescriptionData>
+        -                            </div>}
+                        <DescriptionData>
+                            <span>
+                            <code style={styles.accountId}>
+                            {account.get('id')}
+                            </code>
+                            <FontIcon className='fa fa-clone' onClick={copyAccountToClipBoard} style={Object.assign({}, link, styles.copyIcon)} />
+                            </span>
+                        </DescriptionData>
+                    </DescriptionList>
+
+                    <p>Exchange Rate</p>
+                    <strong>
+                        1 ETC ~ {rates.get('btc')} BTC
+                    </strong>
+
+                    <p style={styles.usageText}>
+                        Share your wallet address and use it to top up your wallet with BTC from any
+                        &nbsp;<a href='https://shapeshift.io' >other service</a>. All BTC will be converted to ETC.
+                        It may take some time for your coins be deposited.
+                    </p>
+
+                    <p>Minimal amount</p>
+                    <p>{gasPrice.getEther(10)} ~ {gasPrice.getFiat(rates.get('btc'), 10)} BTC</p>
+
+                    <p style={styles.usageWarning}>
+                        Please note that if an amount is less than the minimum, it is mostly non-refundable.
+                    </p>
+                </Col>
+                <Col xs={5} style={align.center}>
+                     <QRCode value={account.get('id')} size={256} style={styles.qr} />
+                 </Col>
+            </Row>
+        </Dialog>
+        </div>
+    );
+  }
+}
+
+AccountPopupRender.propTypes = {
+    account: PropTypes.object.isRequired,
+};
+
+const AccountPopup = connect(
+    (state, ownProps) => {
+        const accounts = state.accounts.get('accounts');
+        const pos = accounts.findKey((acc) => acc.get('id') === ownProps.account.get('id'));
+        const rates = state.accounts.get('rates');
+        const gasPrice = new Wei(21338000000); // Rough estimate tx gasprice; 21000 * 10^6
+        return {
+            account: (accounts.get(pos) || Immutable.Map({})),
+            rates,
+            gasPrice,
+        };
+    },
+    (dispatch, ownProps) => ({})
+)(AccountPopupRender);
+
+export default AccountPopup;

src/components/accounts/show.js

@@ -14,6 +14,7 @@ import { cardSpace } from 'lib/styles';
 import { gotoScreen } from 'store/screenActions';
 import { updateAccount } from 'store/accountActions';
 import AccountEdit from './edit';
+import AccountPopup from './popup';
 
 const TokenRow = ({ token }) => {
     const balance = token.get('balance') ? token.get('balance').getDecimalized() : '0';
@@ -51,19 +52,16 @@ class AccountRender extends React.Component {
         this.setState({ edit: false });
     }
 
-    showModal = () => {
-        this.setState({ showModal: true });
-    }
-
-    closeModal = () => {
-        this.setState({ showModal: false });
-    }
-
     render() {
         const { account, rates, createTx, goBack } = this.props;
         const value = account.get('balance') ? account.get('balance').getEther() : '?';
         const pending = account.get('balancePending') ? `(${account.get('balancePending').getEther()} pending)` : null;
 
+        const styles = {
+                sendButton: {
+                    color: 'green',
+                },
+        };
 
         return (
         <Card style={cardSpace}>
@@ -88,7 +86,7 @@ class AccountRender extends React.Component {
                             primary={account.get('name')}
                             onClick={this.handleEdit}
                         />}
-                        {this.state.edit && <AccountEdit 
+                        {this.state.edit && <AccountEdit
                             address={account}
                             submit={this.handleSave}
                             cancel={this.cancelEdit}
@@ -100,22 +98,12 @@ class AccountRender extends React.Component {
                 </Row>
             </CardText>
             <CardActions>
-                <FlatButton label="ADD ETHER"
-                            onClick={this.showModal}
-                            icon={<FontIcon className="fa fa-qrcode" />}/>
+                <AccountPopup account={account}/>
                 <FlatButton label="SEND"
                             onClick={createTx}
-                            icon={<FontIcon className="fa fa-arrow-circle-o-right" />}/>
+                            icon={<FontIcon className="fa fa-arrow-circle-o-right" />}
+                            style={styles.sendButton} />
             </CardActions>
-            {/*
-                TODO: Replace with @whilei's ADD ETHER modal
-            */}
-            <Dialog
-              title="ADD ETHER!!"
-              modal={false}
-              open={this.state.showModal}
-              onRequestClose={this.closeModal}
-            />
         </Card>
         );
     }

src/components/addressbook/form.js

@@ -27,6 +27,7 @@ const Render = ({ handleSubmit, blockAddress, invalid, pristine, submitting, can
                 <FlatButton label="Save" type="submit"
                             disabled={pristine || submitting || invalid } />
                 <FlatButton label="Cancel"
+                            secondary={true}
                             onClick={cancel} />
             </form>
         </CardText>

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

src/components/tx/create.js

@@ -25,7 +25,7 @@ const traceValidate = (data, dispatch) => {
     const resolveValidate = (response, resolve) => {
         let errors = null;
         dataObj.data = (((response.trace || [])[0] || {}).action || {}).input;
-        let gasEst; 
+        let gasEst;
         if (response.gas) gasEst = response.gas;
         else {
             gasEst = estimateGasFromTrace(dataObj, response);
@@ -147,7 +147,7 @@ const CreateTx = connect(
             dispatch(change('createTx', 'to', item.props.value));
         },
         cancel: () => {
-            dispatch(gotoScreen('home'));
+            dispatch(gotoScreen('account', ownProps.account));
         },
     })
 )(CreateTxForm);