From a4c3f6b65c9a25da0319b9077d830c23f729b32f Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Tue, 14 Aug 2018 20:08:12 -0300 Subject: [PATCH] add support for images base64 and urls on new ui --- app/scripts/controllers/preferences.js | 13 ++-- ui/app/actions.js | 4 +- ui/app/components/balance-component.js | 3 + ui/app/components/identicon.js | 65 ++++++++++--------- .../confirm-add-suggested-token.component.js | 13 ++-- .../confirm-add-suggested-token.container.js | 4 +- ui/app/components/token-cell.js | 3 +- ui/app/components/token-list.js | 13 +++- 8 files changed, 70 insertions(+), 48 deletions(-) diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 4cc08a9af..a92db15c7 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -61,9 +61,9 @@ class PreferencesController { addSuggestedToken (tokenOpts) { this._validateSuggestedTokenParams(tokenOpts) const suggested = this.getSuggestedTokens() - const { rawAddress, symbol, decimals } = tokenOpts + const { rawAddress, symbol, decimals, imageUrl } = tokenOpts const address = normalizeAddress(rawAddress) - const newEntry = { address, symbol, decimals } + const newEntry = { address, symbol, decimals, imageUrl } suggested[address] = newEntry this.store.updateState({ suggestedTokens: suggested }) } @@ -78,12 +78,13 @@ class PreferencesController { */ requestAddToken (req, res, next, end) { if (req.method === 'metamask_watchToken') { - const [ rawAddress, symbol, decimals ] = req.params + const [ rawAddress, symbol, decimals, imageUrl ] = req.params this._validateSuggestedTokenParams({ rawAddress, symbol, decimals }) const tokenOpts = { rawAddress, decimals, symbol, + imageUrl, } this.addSuggestedToken(tokenOpts) @@ -283,10 +284,9 @@ class PreferencesController { * @returns {Promise} Promises the new array of AddedToken objects. * */ - async addToken (rawAddress, symbol, decimals) { + async addToken (rawAddress, symbol, decimals, imageUrl) { const address = normalizeAddress(rawAddress) - const newEntry = { address, symbol, decimals } - + const newEntry = { address, symbol, decimals, imageUrl } const tokens = this.store.getState().tokens const previousEntry = tokens.find((token, index) => { return token.address === address @@ -299,6 +299,7 @@ class PreferencesController { tokens.push(newEntry) } this._updateAccountTokens(tokens) + return Promise.resolve(tokens) } diff --git a/ui/app/actions.js b/ui/app/actions.js index d1168c168..4e3c87756 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1569,11 +1569,11 @@ function showAddSuggestedTokenPage (transitionForward = true) { } } -function addToken (address, symbol, decimals) { +function addToken (address, symbol, decimals, imageUrl) { return (dispatch) => { dispatch(actions.showLoadingIndication()) return new Promise((resolve, reject) => { - background.addToken(address, symbol, decimals, (err, tokens) => { + background.addToken(address, symbol, decimals, imageUrl, (err, tokens) => { dispatch(actions.hideLoadingIndication()) if (err) { dispatch(actions.displayWarning(err.message)) diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index e31552f2d..5e2919fca 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -33,6 +33,8 @@ function BalanceComponent () { BalanceComponent.prototype.render = function () { const props = this.props const { token, network } = props + let imageUrl + if (token) imageUrl = token.imageUrl return h('div.balance-container', {}, [ @@ -45,6 +47,7 @@ BalanceComponent.prototype.render = function () { diameter: 50, address: token && token.address, network, + imageUrl, }), token ? this.renderTokenBalance() : this.renderBalance(), diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 424048745..eadd6d5a2 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -26,36 +26,43 @@ function mapStateToProps (state) { IdenticonComponent.prototype.render = function () { var props = this.props - const { className = '', address } = props + const { className = '', address, imageUrl } = props var diameter = props.diameter || this.defaultDiameter - - return address - ? ( - h('div', { - className: `${className} identicon`, - key: 'identicon-' + address, - style: { - display: 'flex', - flexShrink: 0, - alignItems: 'center', - justifyContent: 'center', - height: diameter, - width: diameter, - borderRadius: diameter / 2, - overflow: 'hidden', - }, - }) - ) - : ( - h('img.balance-icon', { - src: './images/eth_logo.svg', - style: { - height: diameter, - width: diameter, - borderRadius: diameter / 2, - }, - }) - ) + // for tokens added with `watchToken` we need to render the given image + if (imageUrl) { + return h('img.balance-icon', { + src: imageUrl, + style: { + height: diameter, + width: diameter, + borderRadius: diameter / 2, + }, + }) + } else if (address) { + return h('div', { + className: `${className} identicon`, + key: 'identicon-' + address, + style: { + display: 'flex', + flexShrink: 0, + alignItems: 'center', + justifyContent: 'center', + height: diameter, + width: diameter, + borderRadius: diameter / 2, + overflow: 'hidden', + }, + }) + } else { + return h('img.balance-icon', { + src: './images/eth_logo.svg', + style: { + height: diameter, + width: diameter, + borderRadius: diameter / 2, + }, + }) + } } IdenticonComponent.prototype.componentDidMount = function () { 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 index 2220ae685..5de0859cd 100644 --- 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 @@ -13,7 +13,7 @@ export default class ConfirmAddSuggestedToken extends Component { static propTypes = { history: PropTypes.object, clearPendingTokens: PropTypes.func, - addTokens: PropTypes.func, + addToken: PropTypes.func, pendingTokens: PropTypes.object, removeSuggestedTokens: PropTypes.func, } @@ -33,7 +33,9 @@ export default class ConfirmAddSuggestedToken extends Component { } render () { - const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props + const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props + const pendingTokenKey = Object.keys(pendingTokens)[0] + const pendingToken = pendingTokens[pendingTokenKey] return (
@@ -59,7 +61,7 @@ export default class ConfirmAddSuggestedToken extends Component { { Object.entries(pendingTokens) .map(([ address, token ]) => { - const { name, symbol } = token + const { name, symbol, imageUrl } = token return (
{ this.getTokenName(name, symbol) } @@ -102,14 +105,14 @@ export default class ConfirmAddSuggestedToken extends Component { large className="page-container__footer-button" onClick={() => { - addTokens(pendingTokens) + addToken(pendingToken) .then(() => { clearPendingTokens() removeSuggestedTokens() }) }} > - { this.context.t('addTokens') } + { this.context.t('addToken') }
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 index 938c363b4..fba33222e 100644 --- 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 @@ -3,7 +3,7 @@ import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component' const extend = require('xtend') -const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions') +const { addToken, clearPendingTokens, removeSuggestedTokens } = require('../../../actions') const mapStateToProps = ({ metamask }) => { const { pendingTokens, suggestedTokens } = metamask @@ -16,7 +16,7 @@ const mapStateToProps = ({ metamask }) => { const mapDispatchToProps = dispatch => { return { - addTokens: tokens => dispatch(addTokens(tokens)), + addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)), clearPendingTokens: () => dispatch(clearPendingTokens()), removeSuggestedTokens: () => dispatch(removeSuggestedTokens()), } diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 4100d76a5..a84d8eda0 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -56,8 +56,8 @@ TokenCell.prototype.render = function () { sidebarOpen, currentCurrency, // userAddress, + imageUrl, } = props - let currentTokenToFiatRate let currentTokenInFiat let formattedFiat = '' @@ -97,6 +97,7 @@ TokenCell.prototype.render = function () { diameter: 50, address, network, + imageUrl, }), h('div.token-list-item__balance-ellipsis', null, [ diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 42351cf89..a59c2e4e0 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -9,10 +9,15 @@ const selectors = require('../selectors') const log = require('loglevel') function mapStateToProps (state) { + // In order to get `imageUrl` from token added with `eth_watchToken` + // TODO do this with cache memory for browsers, add support for image object, var names + const tokenImagesHashes = {} + state.metamask.tokens.forEach((token) => { tokenImagesHashes[token.address] = token.imageUrl }) return { network: state.metamask.network, tokens: state.metamask.tokens, userAddress: selectors.getSelectedAddress(state), + tokenImagesHashes: tokenImagesHashes, } } @@ -44,10 +49,9 @@ function TokenList () { } TokenList.prototype.render = function () { - const { userAddress } = this.props + const { userAddress, tokenImagesHashes } = this.props const state = this.state const { tokens, isLoading, error } = state - if (isLoading) { return this.message(this.context.t('loadingTokens')) } @@ -74,7 +78,10 @@ TokenList.prototype.render = function () { ]) } - return h('div', tokens.map((tokenData) => h(TokenCell, tokenData))) + return h('div', tokens.map((tokenData) => { + tokenData.imageUrl = tokenImagesHashes[tokenData.address] + return h(TokenCell, tokenData) + })) }