Skip to content

Commit

Permalink
components/store: basic function account popup
Browse files Browse the repository at this point in the history 
- remove popupstate from global
- place popup in accounts list, show
- unify button and dialog elements into 'popup' directive
  • Loading branch information
@whilei
whilei committed Jun 16, 2017
1 parent 42b433b commit 973c493
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 182 deletions.
10 changes: 5 additions & 5 deletions src/components/accounts/account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import { link, tables } from 'lib/styles';
import AccountPopup from './popup';

const Render = ({ account, openAccount }) => (
<TableRow selectable={false}>
<TableRowColumn style={tables.shortStyle} onClick={openAccount}>
<span style={link}>
<TableRow selectable={false} >
<TableRowColumn style={tables.shortStyle} >
<span style={link} onClick={openAccount}>
{account.get('name')}
</span>
</TableRowColumn>
<TableRowColumn style={tables.wideStyle} onClick={openAccount} >
<span style={link}>
<TableRowColumn style={tables.wideStyle} >
<span style={link} onClick={openAccount}>
{account.get('id')}
</span>
</TableRowColumn>
Expand Down
42 changes: 0 additions & 42 deletions src/components/accounts/popup-button.js
View file

This file was deleted.

184 changes: 84 additions & 100 deletions src/components/accounts/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,127 +2,111 @@ 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 { 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>
/**
* 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,
}

<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>
handleOpen = () => {
this.setState({open: true});
};

<DescriptionTitle>{t('show.description.tokenBalance')}</DescriptionTitle>
<DescriptionData>
{account
.get('tokens')
.map((tok) =>
<TokenRow token={tok} key={tok.get('address')}/>
)}
</DescriptionData>
handleClose = () => {
this.setState({open: false});
};

<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>
render() {
const { account } = this.props;
const styles = {
closeButton: {
float: 'right',
},
openButton: {
display: 'inline-block',
},
};

</DescriptionList>
</Col>
<Col xs={4} md={2} mdOffset={2}>
<QRCode value={account.get('id')} />
</Col>
</Row>
</Dialog>
return (
<div>
<FlatButton
label="Add Ether"
icon={<FontIcon className='fa fa-qrcode' />}
onTouchTap={this.handleOpen}
style={styles.openButton} />
<Dialog
// title="Add Ether"
// actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
<Row>
<Col xs={11}>
<h1>Add Ether</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={8}>
<DescriptionList>
{account.get('description') && <div>
- <DescriptionData>{account.get('description')}</DescriptionData>
- </div>}
<DescriptionData>{account.get('id')}</DescriptionData>
</DescriptionList>

</Col>
<Col xs={4} md={2} mdOffset={2}>
<QRCode value={account.get('id')} />
</Col>
</Row>
</Dialog>
</div>
);
});
}
}

Render.propTypes = {
AccountPopupRender.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')),
};
}
}

// This seems ugly, but is the only way I've gotten it to work so far.
const accounts = state.accounts.get('accounts');
const pos = accounts.findKey((acc) => acc.get('id') === ownProps.account.get('id'));
return {
account,
open,
fiat,
account: (accounts.get(pos) || Immutable.Map({})),
};
},
(dispatch, ownProps) => ({
handleCloseAccountDialog: () => {
log.debug('close popup');
dispatch(accountPopupClose());
},
})
)(Render);
(dispatch, ownProps) => ({})
)(AccountPopupRender);

export default AccountPopup;
24 changes: 3 additions & 21 deletions src/components/accounts/show.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -51,14 +52,6 @@ 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() : '?';
Expand Down Expand Up @@ -88,7 +81,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}
Expand All @@ -100,22 +93,11 @@ 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" />}/>
</CardActions>
{/*
TODO: Replace with @whilei's ADD ETHER modal
*/}
<Dialog
title="ADD ETHER!!"
modal={false}
open={this.state.showModal}
onRequestClose={this.closeModal}
/>
</Card>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/components/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ const Render = translate('common')(({t, ...props}) => (
</div>
</Col>
</Row>
<AccountPopup />
</Grid>
));

Expand Down
2 changes: 1 addition & 1 deletion src/store/accountActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function updateAccount(address, name, description) {
rpc.call('emerald_updateAccounts', [{
name,
description,
address
address,
}]).then((result) => {
dispatch({
type: 'ACCOUNT/UPDATE_ACCOUNT',
Expand Down
13 changes: 1 addition & 12 deletions src/store/accountReducers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { toNumber } from '../lib/convert';

const initial = Immutable.fromJS({
accounts: [],
accountPopup: {},
trackedTransactions: [],
loading: false,
gasPrice: new Wei(23000000000),
Expand Down Expand Up @@ -107,15 +106,6 @@ 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) => {
Expand Down Expand Up @@ -159,7 +149,7 @@ function createTx(data) {
}
if (typeof data.gas === 'string' || typeof data.gas === 'number') {
tx = tx.set('gas', toNumber(data.gas));
}
}
return tx;
}

Expand Down Expand Up @@ -243,6 +233,5 @@ export default function accountsReducers(state, action) {
state = onLoadPending(state, action);
state = onPendingBalance(state, action);
state = onExchangeRates(state, action);
state = onAccountPopup(state, action);
return state;
}

0 comments on commit 973c493

Please sign in to comment.