m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

add support for images base64 and urls on new ui

Browse Source
This commit is contained in:
Esteban MIno 2018-08-14 20:08:12 -03:00
parent 8f5b80a0fe
commit a4c3f6b65c
8 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/scripts/controllers/preferences.js
View File

@ -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<array>} 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)
}

4
ui/app/actions.js
View File

@ -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))

3
ui/app/components/balance-component.js
View File

@ -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(),

65
ui/app/components/identicon.js
View File

@ -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 () {

13
ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
View File

@ -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 (
<div className="page-container">
@ -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 (
<div
@ -71,6 +73,7 @@ export default class ConfirmAddSuggestedToken extends Component {
className="confirm-add-token__token-icon"
diameter={48}
address={address}
imageUrl={imageUrl}
/>
<div className="confirm-add-token__name">
{ 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') }
</Button>
</div>
</div>

4
ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
View File

@ -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()),
}

3
ui/app/components/token-cell.js
View File

@ -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, [

13
ui/app/components/token-list.js
View File

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