1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/pages/add-token/token-list/token-list.component.js

61 lines
2.1 KiB
JavaScript
Raw Normal View History

2018-05-20 08:04:19 +02:00
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { checkExistingAddresses } from '../util'
import TokenListPlaceholder from './token-list-placeholder'
export default class InfoBox extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
tokens: PropTypes.array,
results: PropTypes.array,
selectedTokens: PropTypes.object,
onToggleToken: PropTypes.func,
}
render () {
const { results = [], selectedTokens = {}, onToggleToken, tokens = [] } = this.props
return results.length === 0
? <TokenListPlaceholder />
: (
<div className="token-list">
<div className="token-list__title">
{ this.context.t('searchResults') }
</div>
<div className="token-list__tokens-container">
{
Array(6).fill(undefined)
.map((_, i) => {
const { logo, symbol, name, address } = results[i] || {}
const tokenAlreadyAdded = checkExistingAddresses(address, tokens)
return Boolean(logo || symbol || name) && (
<div
className={classnames('token-list__token', {
'token-list__token--selected': selectedTokens[address],
'token-list__token--disabled': tokenAlreadyAdded,
})}
onClick={() => !tokenAlreadyAdded && onToggleToken(results[i])}
key={i}
>
<div
className="token-list__token-icon"
style={{ backgroundImage: logo && `url(images/contract/${logo})` }}>
</div>
<div className="token-list__token-data">
<span className="token-list__token-name">{ `${name} (${symbol})` }</span>
</div>
</div>
)
})
}
</div>
</div>
)
}
}