aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorEsteban MIno <efmino@uc.cl>2018-08-15 07:08:12 +0800
committerEsteban MIno <efmino@uc.cl>2018-08-15 07:08:12 +0800
commita4c3f6b65c9a25da0319b9077d830c23f729b32f (patch)
tree39d272a7364f97d6f676a102e97f65d0195c450c /ui
parent8f5b80a0fe13c53a602a5b2883ae1cdfba0123e1 (diff)
downloadtangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar.gz
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar.bz2
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar.lz
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar.xz
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.tar.zst
tangerine-wallet-browser-a4c3f6b65c9a25da0319b9077d830c23f729b32f.zip
add support for images base64 and urls on new ui
Diffstat (limited to 'ui')
-rw-r--r--ui/app/actions.js4
-rw-r--r--ui/app/components/balance-component.js3
-rw-r--r--ui/app/components/identicon.js65
-rw-r--r--ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js13
-rw-r--r--ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js4
-rw-r--r--ui/app/components/token-cell.js3
-rw-r--r--ui/app/components/token-list.js13
7 files changed, 63 insertions, 42 deletions
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 (
<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>
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)
+ }))
}