-
Notifications
You must be signed in to change notification settings - Fork 102
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Account popup #135
Merged
Merged
Account popup #135
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
d407eb4
Cherry-pick and merge WIP from whilei/account-popup
whilei 03829e2
Merge branch 'ethereumproject-elaine/keyimport' into account-popup-wip
whilei 42b433b
store: remove unused import
whilei 973c493
components/store: basic function account popup
whilei 9cc25f0
components: flesh out popup body
whilei f8d7ef7
npm: install and save copy-to-clipboard
whilei b1d3aba
lib: delete tables wide/short style
whilei 9c772fb
components: finish popup content
whilei 7fa91ac
lib: allow getEther and getFiat to accept num decimals arg
whilei 7a0021e
components: try to solve table spacing issue with responsive columns
whilei 989c725
components: problem: cancel buttons not red
whilei 4c195d1
components: problem: canceling tx sent back to dash
whilei 1fe7923
components: problem: accounts 'SEND' button not positive green
whilei 76af489
components: wrap popup in inline div
whilei 1daa093
problem: popup button not gray like design spec
whilei bd71392
Merge branch 'master' into account-popup-wip
whilei 1526ca2
popup: remove impossible comment
whilei 30cb2ea
components/accounts: update gas estimate to current gastracker est.
whilei dc6f69e
lib: use 2 decimals instead of 5 for 'getFiat' default
whilei File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,177 @@ | ||
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 | ||
// title="Add Ether" | ||
// actions={actions} | ||
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 | ||
<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(21000000000); // Rough estimate tx gasprice; 21000 * 10^6 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. current gasprice about 21,338 MWei (http://gastracker.io/) |
||
return { | ||
account: (accounts.get(pos) || Immutable.Map({})), | ||
rates, | ||
gasPrice, | ||
}; | ||
}, | ||
(dispatch, ownProps) => ({}) | ||
)(AccountPopupRender); | ||
|
||
export default AccountPopup; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
doesn't this cause an error?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i have no idea why i got away with that