diff options
Diffstat (limited to 'ui/app/components/pages')
6 files changed, 163 insertions, 4 deletions
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js new file mode 100644 index 000000000..2220ae685 --- /dev/null +++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { DEFAULT_ROUTE } from '../../../routes' +import Button from '../../button' +import Identicon from '../../../components/identicon' +import TokenBalance from '../confirm-add-token/token-balance' + +export default class ConfirmAddSuggestedToken extends Component { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + history: PropTypes.object, + clearPendingTokens: PropTypes.func, + addTokens: PropTypes.func, + pendingTokens: PropTypes.object, + removeSuggestedTokens: PropTypes.func, + } + + componentDidMount () { + const { pendingTokens = {}, history } = this.props + + if (Object.keys(pendingTokens).length === 0) { + history.push(DEFAULT_ROUTE) + } + } + + getTokenName (name, symbol) { + return typeof name === 'undefined' + ? symbol + : `${name} (${symbol})` + } + + render () { + const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props + + return ( + <div className="page-container"> + <div className="page-container__header"> + <div className="page-container__title"> + { this.context.t('addSuggestedTokens') } + </div> + <div className="page-container__subtitle"> + { this.context.t('likeToAddTokens') } + </div> + </div> + <div className="page-container__content"> + <div className="confirm-add-token"> + <div className="confirm-add-token__header"> + <div className="confirm-add-token__token"> + { this.context.t('token') } + </div> + <div className="confirm-add-token__balance"> + { this.context.t('balance') } + </div> + </div> + <div className="confirm-add-token__token-list"> + { + Object.entries(pendingTokens) + .map(([ address, token ]) => { + const { name, symbol } = token + + return ( + <div + className="confirm-add-token__token-list-item" + key={address} + > + <div className="confirm-add-token__token confirm-add-token__data"> + <Identicon + className="confirm-add-token__token-icon" + diameter={48} + address={address} + /> + <div className="confirm-add-token__name"> + { this.getTokenName(name, symbol) } + </div> + </div> + <div className="confirm-add-token__balance"> + <TokenBalance token={token} /> + </div> + </div> + ) + }) + } + </div> + </div> + </div> + <div className="page-container__footer"> + <Button + type="default" + large + className="page-container__footer-button" + onClick={() => { + removeSuggestedTokens() + }} + > + { this.context.t('cancel') } + </Button> + <Button + type="primary" + large + className="page-container__footer-button" + onClick={() => { + addTokens(pendingTokens) + .then(() => { + clearPendingTokens() + removeSuggestedTokens() + }) + }} + > + { this.context.t('addTokens') } + </Button> + </div> + </div> + ) + } +} diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js new file mode 100644 index 000000000..938c363b4 --- /dev/null +++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js @@ -0,0 +1,25 @@ +import { connect } from 'react-redux' +import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component' + +const extend = require('xtend') + +const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions') + +const mapStateToProps = ({ metamask }) => { + const { pendingTokens, suggestedTokens } = metamask + const params = extend(pendingTokens, suggestedTokens) + + return { + pendingTokens: params, + } +} + +const mapDispatchToProps = dispatch => { + return { + addTokens: tokens => dispatch(addTokens(tokens)), + clearPendingTokens: () => dispatch(clearPendingTokens()), + removeSuggestedTokens: () => dispatch(removeSuggestedTokens()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddSuggestedToken) diff --git a/ui/app/components/pages/confirm-add-suggested-token/index.js b/ui/app/components/pages/confirm-add-suggested-token/index.js new file mode 100644 index 000000000..2ca56b43c --- /dev/null +++ b/ui/app/components/pages/confirm-add-suggested-token/index.js @@ -0,0 +1,2 @@ +import ConfirmAddSuggestedToken from './confirm-add-suggested-token.container' +module.exports = ConfirmAddSuggestedToken diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js index 65d654b92..0f27ceb53 100644 --- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js @@ -90,7 +90,9 @@ export default class ConfirmAddToken extends Component { type="default" large className="page-container__footer-button" - onClick={() => history.push(ADD_TOKEN_ROUTE)} + onClick={() => { + history.push(ADD_TOKEN_ROUTE) + }} > { this.context.t('back') } </Button> diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js index 0190024d9..500b406bb 100644 --- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js +++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js @@ -1,12 +1,16 @@ import { connect } from 'react-redux' import ConfirmAddToken from './confirm-add-token.component' +const extend = require('xtend') + const { addTokens, clearPendingTokens } = require('../../../actions') const mapStateToProps = ({ metamask }) => { - const { pendingTokens } = metamask + const { pendingTokens, suggestedTokens } = metamask + const params = extend(pendingTokens, suggestedTokens) + return { - pendingTokens, + pendingTokens: params, } } diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js index 5e3fdc9af..6ee083579 100644 --- a/ui/app/components/pages/home.js +++ b/ui/app/components/pages/home.js @@ -25,6 +25,7 @@ const { RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, NOTICE_ROUTE, + CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, } = require('../../routes') const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction') @@ -33,9 +34,15 @@ class Home extends Component { componentDidMount () { const { history, + suggestedTokens = {}, unconfirmedTransactionsCount = 0, } = this.props + // suggested new tokens + if (Object.keys(suggestedTokens).length > 0) { + history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) + } + // unapprovedTxs and unapproved messages if (unconfirmedTransactionsCount > 0) { history.push(CONFIRM_TRANSACTION_ROUTE) @@ -165,6 +172,7 @@ Home.propTypes = { isPopup: PropTypes.bool, isMouseUser: PropTypes.bool, t: PropTypes.func, + suggestedTokens: PropTypes.object, unconfirmedTransactionsCount: PropTypes.number, } @@ -226,7 +234,7 @@ function mapStateToProps (state) { isRevealingSeedWords: state.metamask.isRevealingSeedWords, Qr: state.appState.Qr, welcomeScreenSeen: state.metamask.welcomeScreenSeen, - + suggestedTokens: state.metamask.suggestedTokens, // state needed to get account dropdown temporarily rendering from app bar selected, unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state), |