mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
add support for images base64 and urls on new ui
This commit is contained in:
parent
8f5b80a0fe
commit
a4c3f6b65c
@ -61,9 +61,9 @@ class PreferencesController {
|
|||||||
addSuggestedToken (tokenOpts) {
|
addSuggestedToken (tokenOpts) {
|
||||||
this._validateSuggestedTokenParams(tokenOpts)
|
this._validateSuggestedTokenParams(tokenOpts)
|
||||||
const suggested = this.getSuggestedTokens()
|
const suggested = this.getSuggestedTokens()
|
||||||
const { rawAddress, symbol, decimals } = tokenOpts
|
const { rawAddress, symbol, decimals, imageUrl } = tokenOpts
|
||||||
const address = normalizeAddress(rawAddress)
|
const address = normalizeAddress(rawAddress)
|
||||||
const newEntry = { address, symbol, decimals }
|
const newEntry = { address, symbol, decimals, imageUrl }
|
||||||
suggested[address] = newEntry
|
suggested[address] = newEntry
|
||||||
this.store.updateState({ suggestedTokens: suggested })
|
this.store.updateState({ suggestedTokens: suggested })
|
||||||
}
|
}
|
||||||
@ -78,12 +78,13 @@ class PreferencesController {
|
|||||||
*/
|
*/
|
||||||
requestAddToken (req, res, next, end) {
|
requestAddToken (req, res, next, end) {
|
||||||
if (req.method === 'metamask_watchToken') {
|
if (req.method === 'metamask_watchToken') {
|
||||||
const [ rawAddress, symbol, decimals ] = req.params
|
const [ rawAddress, symbol, decimals, imageUrl ] = req.params
|
||||||
this._validateSuggestedTokenParams({ rawAddress, symbol, decimals })
|
this._validateSuggestedTokenParams({ rawAddress, symbol, decimals })
|
||||||
const tokenOpts = {
|
const tokenOpts = {
|
||||||
rawAddress,
|
rawAddress,
|
||||||
decimals,
|
decimals,
|
||||||
symbol,
|
symbol,
|
||||||
|
imageUrl,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.addSuggestedToken(tokenOpts)
|
this.addSuggestedToken(tokenOpts)
|
||||||
@ -283,10 +284,9 @@ class PreferencesController {
|
|||||||
* @returns {Promise<array>} Promises the new array of AddedToken objects.
|
* @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 address = normalizeAddress(rawAddress)
|
||||||
const newEntry = { address, symbol, decimals }
|
const newEntry = { address, symbol, decimals, imageUrl }
|
||||||
|
|
||||||
const tokens = this.store.getState().tokens
|
const tokens = this.store.getState().tokens
|
||||||
const previousEntry = tokens.find((token, index) => {
|
const previousEntry = tokens.find((token, index) => {
|
||||||
return token.address === address
|
return token.address === address
|
||||||
@ -299,6 +299,7 @@ class PreferencesController {
|
|||||||
tokens.push(newEntry)
|
tokens.push(newEntry)
|
||||||
}
|
}
|
||||||
this._updateAccountTokens(tokens)
|
this._updateAccountTokens(tokens)
|
||||||
|
|
||||||
return Promise.resolve(tokens)
|
return Promise.resolve(tokens)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1569,11 +1569,11 @@ function showAddSuggestedTokenPage (transitionForward = true) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addToken (address, symbol, decimals) {
|
function addToken (address, symbol, decimals, imageUrl) {
|
||||||
return (dispatch) => {
|
return (dispatch) => {
|
||||||
dispatch(actions.showLoadingIndication())
|
dispatch(actions.showLoadingIndication())
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
background.addToken(address, symbol, decimals, (err, tokens) => {
|
background.addToken(address, symbol, decimals, imageUrl, (err, tokens) => {
|
||||||
dispatch(actions.hideLoadingIndication())
|
dispatch(actions.hideLoadingIndication())
|
||||||
if (err) {
|
if (err) {
|
||||||
dispatch(actions.displayWarning(err.message))
|
dispatch(actions.displayWarning(err.message))
|
||||||
|
@ -33,6 +33,8 @@ function BalanceComponent () {
|
|||||||
BalanceComponent.prototype.render = function () {
|
BalanceComponent.prototype.render = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const { token, network } = props
|
const { token, network } = props
|
||||||
|
let imageUrl
|
||||||
|
if (token) imageUrl = token.imageUrl
|
||||||
|
|
||||||
return h('div.balance-container', {}, [
|
return h('div.balance-container', {}, [
|
||||||
|
|
||||||
@ -45,6 +47,7 @@ BalanceComponent.prototype.render = function () {
|
|||||||
diameter: 50,
|
diameter: 50,
|
||||||
address: token && token.address,
|
address: token && token.address,
|
||||||
network,
|
network,
|
||||||
|
imageUrl,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
token ? this.renderTokenBalance() : this.renderBalance(),
|
token ? this.renderTokenBalance() : this.renderBalance(),
|
||||||
|
@ -26,12 +26,20 @@ function mapStateToProps (state) {
|
|||||||
|
|
||||||
IdenticonComponent.prototype.render = function () {
|
IdenticonComponent.prototype.render = function () {
|
||||||
var props = this.props
|
var props = this.props
|
||||||
const { className = '', address } = props
|
const { className = '', address, imageUrl } = props
|
||||||
var diameter = props.diameter || this.defaultDiameter
|
var diameter = props.diameter || this.defaultDiameter
|
||||||
|
// for tokens added with `watchToken` we need to render the given image
|
||||||
return address
|
if (imageUrl) {
|
||||||
? (
|
return h('img.balance-icon', {
|
||||||
h('div', {
|
src: imageUrl,
|
||||||
|
style: {
|
||||||
|
height: diameter,
|
||||||
|
width: diameter,
|
||||||
|
borderRadius: diameter / 2,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else if (address) {
|
||||||
|
return h('div', {
|
||||||
className: `${className} identicon`,
|
className: `${className} identicon`,
|
||||||
key: 'identicon-' + address,
|
key: 'identicon-' + address,
|
||||||
style: {
|
style: {
|
||||||
@ -45,9 +53,8 @@ IdenticonComponent.prototype.render = function () {
|
|||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
)
|
} else {
|
||||||
: (
|
return h('img.balance-icon', {
|
||||||
h('img.balance-icon', {
|
|
||||||
src: './images/eth_logo.svg',
|
src: './images/eth_logo.svg',
|
||||||
style: {
|
style: {
|
||||||
height: diameter,
|
height: diameter,
|
||||||
@ -55,7 +62,7 @@ IdenticonComponent.prototype.render = function () {
|
|||||||
borderRadius: diameter / 2,
|
borderRadius: diameter / 2,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
IdenticonComponent.prototype.componentDidMount = function () {
|
IdenticonComponent.prototype.componentDidMount = function () {
|
||||||
|
@ -13,7 +13,7 @@ export default class ConfirmAddSuggestedToken extends Component {
|
|||||||
static propTypes = {
|
static propTypes = {
|
||||||
history: PropTypes.object,
|
history: PropTypes.object,
|
||||||
clearPendingTokens: PropTypes.func,
|
clearPendingTokens: PropTypes.func,
|
||||||
addTokens: PropTypes.func,
|
addToken: PropTypes.func,
|
||||||
pendingTokens: PropTypes.object,
|
pendingTokens: PropTypes.object,
|
||||||
removeSuggestedTokens: PropTypes.func,
|
removeSuggestedTokens: PropTypes.func,
|
||||||
}
|
}
|
||||||
@ -33,7 +33,9 @@ export default class ConfirmAddSuggestedToken extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
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 (
|
return (
|
||||||
<div className="page-container">
|
<div className="page-container">
|
||||||
@ -59,7 +61,7 @@ export default class ConfirmAddSuggestedToken extends Component {
|
|||||||
{
|
{
|
||||||
Object.entries(pendingTokens)
|
Object.entries(pendingTokens)
|
||||||
.map(([ address, token ]) => {
|
.map(([ address, token ]) => {
|
||||||
const { name, symbol } = token
|
const { name, symbol, imageUrl } = token
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -71,6 +73,7 @@ export default class ConfirmAddSuggestedToken extends Component {
|
|||||||
className="confirm-add-token__token-icon"
|
className="confirm-add-token__token-icon"
|
||||||
diameter={48}
|
diameter={48}
|
||||||
address={address}
|
address={address}
|
||||||
|
imageUrl={imageUrl}
|
||||||
/>
|
/>
|
||||||
<div className="confirm-add-token__name">
|
<div className="confirm-add-token__name">
|
||||||
{ this.getTokenName(name, symbol) }
|
{ this.getTokenName(name, symbol) }
|
||||||
@ -102,14 +105,14 @@ export default class ConfirmAddSuggestedToken extends Component {
|
|||||||
large
|
large
|
||||||
className="page-container__footer-button"
|
className="page-container__footer-button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
addTokens(pendingTokens)
|
addToken(pendingToken)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
clearPendingTokens()
|
clearPendingTokens()
|
||||||
removeSuggestedTokens()
|
removeSuggestedTokens()
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{ this.context.t('addTokens') }
|
{ this.context.t('addToken') }
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,7 +3,7 @@ import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
|
|||||||
|
|
||||||
const extend = require('xtend')
|
const extend = require('xtend')
|
||||||
|
|
||||||
const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
|
const { addToken, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
|
||||||
|
|
||||||
const mapStateToProps = ({ metamask }) => {
|
const mapStateToProps = ({ metamask }) => {
|
||||||
const { pendingTokens, suggestedTokens } = metamask
|
const { pendingTokens, suggestedTokens } = metamask
|
||||||
@ -16,7 +16,7 @@ const mapStateToProps = ({ metamask }) => {
|
|||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
const mapDispatchToProps = dispatch => {
|
||||||
return {
|
return {
|
||||||
addTokens: tokens => dispatch(addTokens(tokens)),
|
addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
|
||||||
clearPendingTokens: () => dispatch(clearPendingTokens()),
|
clearPendingTokens: () => dispatch(clearPendingTokens()),
|
||||||
removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
|
removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
|
||||||
}
|
}
|
||||||
|
@ -56,8 +56,8 @@ TokenCell.prototype.render = function () {
|
|||||||
sidebarOpen,
|
sidebarOpen,
|
||||||
currentCurrency,
|
currentCurrency,
|
||||||
// userAddress,
|
// userAddress,
|
||||||
|
imageUrl,
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
let currentTokenToFiatRate
|
let currentTokenToFiatRate
|
||||||
let currentTokenInFiat
|
let currentTokenInFiat
|
||||||
let formattedFiat = ''
|
let formattedFiat = ''
|
||||||
@ -97,6 +97,7 @@ TokenCell.prototype.render = function () {
|
|||||||
diameter: 50,
|
diameter: 50,
|
||||||
address,
|
address,
|
||||||
network,
|
network,
|
||||||
|
imageUrl,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
h('div.token-list-item__balance-ellipsis', null, [
|
h('div.token-list-item__balance-ellipsis', null, [
|
||||||
|
@ -9,10 +9,15 @@ const selectors = require('../selectors')
|
|||||||
const log = require('loglevel')
|
const log = require('loglevel')
|
||||||
|
|
||||||
function mapStateToProps (state) {
|
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 {
|
return {
|
||||||
network: state.metamask.network,
|
network: state.metamask.network,
|
||||||
tokens: state.metamask.tokens,
|
tokens: state.metamask.tokens,
|
||||||
userAddress: selectors.getSelectedAddress(state),
|
userAddress: selectors.getSelectedAddress(state),
|
||||||
|
tokenImagesHashes: tokenImagesHashes,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,10 +49,9 @@ function TokenList () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
TokenList.prototype.render = function () {
|
TokenList.prototype.render = function () {
|
||||||
const { userAddress } = this.props
|
const { userAddress, tokenImagesHashes } = this.props
|
||||||
const state = this.state
|
const state = this.state
|
||||||
const { tokens, isLoading, error } = state
|
const { tokens, isLoading, error } = state
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return this.message(this.context.t('loadingTokens'))
|
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)
|
||||||
|
}))
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user