1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 03:20:23 +01:00
metamask-extension/ui/app/components/token-cell.js

166 lines
4.5 KiB
JavaScript
Raw Normal View History

const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
2017-04-21 18:01:51 +02:00
const Identicon = require('./identicon')
2017-06-27 23:49:41 +02:00
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
2017-09-06 12:17:49 +02:00
const selectors = require('../selectors')
const actions = require('../actions')
const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
2017-09-29 12:10:50 +02:00
const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
2017-09-06 12:17:49 +02:00
function mapStateToProps (state) {
return {
network: state.metamask.network,
2017-10-21 03:26:18 +02:00
currentCurrency: state.metamask.currentCurrency,
2017-09-06 12:17:49 +02:00
selectedTokenAddress: state.metamask.selectedTokenAddress,
userAddress: selectors.getSelectedAddress(state),
contractExchangeRates: state.metamask.contractExchangeRates,
conversionRate: state.metamask.conversionRate,
sidebarOpen: state.appState.sidebar.isOpen,
2017-09-06 12:17:49 +02:00
}
}
function mapDispatchToProps (dispatch) {
return {
setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
2017-09-28 13:55:04 +02:00
hideSidebar: () => dispatch(actions.hideSidebar()),
2017-09-06 12:17:49 +02:00
}
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
inherits(TokenCell, Component)
function TokenCell () {
Component.call(this)
2017-09-29 12:10:50 +02:00
this.state = {
tokenMenuOpen: false,
}
}
TokenCell.prototype.render = function () {
2017-09-29 12:10:50 +02:00
const { tokenMenuOpen } = this.state
const props = this.props
2017-09-05 10:48:52 +02:00
const {
address,
symbol,
string,
network,
2017-09-06 12:17:49 +02:00
setSelectedToken,
selectedTokenAddress,
contractExchangeRates,
conversionRate,
2017-09-28 13:55:04 +02:00
hideSidebar,
sidebarOpen,
2017-10-21 03:26:18 +02:00
currentCurrency,
2017-09-05 10:48:52 +02:00
// userAddress,
2018-08-23 20:54:40 +02:00
image,
2017-09-05 10:48:52 +02:00
} = props
2017-11-02 13:15:59 +01:00
let currentTokenToFiatRate
let currentTokenInFiat
let formattedFiat = ''
2017-09-15 14:31:25 +02:00
if (contractExchangeRates[address]) {
currentTokenToFiatRate = multiplyCurrencies(
contractExchangeRates[address],
conversionRate
)
2017-10-21 03:26:18 +02:00
currentTokenInFiat = conversionUtil(string, {
2017-09-15 14:31:25 +02:00
fromNumericBase: 'dec',
fromCurrency: symbol,
toCurrency: currentCurrency.toUpperCase(),
2017-09-15 14:31:25 +02:00
numberOfDecimals: 2,
conversionRate: currentTokenToFiatRate,
2017-09-15 14:31:25 +02:00
})
formattedFiat = currentTokenInFiat.toString() === '0'
? ''
: `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
2017-09-15 14:31:25 +02:00
}
const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
2017-11-02 13:15:59 +01:00
return (
2017-09-05 10:48:52 +02:00
h('div.token-list-item', {
className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
2017-09-06 12:17:49 +02:00
// style: { cursor: network === '1' ? 'pointer' : 'default' },
2017-09-05 10:48:52 +02:00
// onClick: this.view.bind(this, address, userAddress, network),
2017-09-28 13:55:04 +02:00
onClick: () => {
setSelectedToken(address)
selectedTokenAddress !== address && sidebarOpen && hideSidebar()
},
}, [
2017-04-21 18:01:51 +02:00
h(Identicon, {
2017-09-05 10:48:52 +02:00
className: 'token-list-item__identicon',
2018-01-11 06:09:09 +01:00
diameter: 50,
2017-04-21 18:01:51 +02:00
address,
2017-04-24 22:55:19 +02:00
network,
2018-08-23 20:54:40 +02:00
image,
2017-04-21 18:01:51 +02:00
}),
h('div.token-list-item__balance-ellipsis', null, [
h('div.token-list-item__balance-wrapper', null, [
h('div.token-list-item__token-balance', `${string || 0}`),
h('div.token-list-item__token-symbol', symbol),
showFiat && h('div.token-list-item__fiat-amount', {
style: {},
}, formattedFiat),
]),
h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
onClick: (e) => {
e.stopPropagation()
this.setState({ tokenMenuOpen: true })
},
}),
]),
2017-09-29 12:10:50 +02:00
tokenMenuOpen && h(TokenMenuDropdown, {
onClose: () => this.setState({ tokenMenuOpen: false }),
2017-09-29 21:03:29 +02:00
token: { symbol, address },
2017-09-29 12:10:50 +02:00
}),
/*
h('button', {
onClick: this.send.bind(this, address),
}, 'SEND'),
*/
])
)
}
2017-04-24 22:55:19 +02:00
TokenCell.prototype.send = function (address, event) {
event.preventDefault()
2017-06-20 17:01:00 +02:00
event.stopPropagation()
const url = tokenFactoryFor(address)
if (url) {
navigateTo(url)
}
}
TokenCell.prototype.view = function (address, userAddress, network, event) {
const url = etherscanLinkFor(address, userAddress, network)
if (url) {
navigateTo(url)
}
}
function navigateTo (url) {
global.platform.openWindow({ url })
}
function etherscanLinkFor (tokenAddress, address, network) {
2017-06-27 23:49:41 +02:00
const prefix = prefixForNetwork(network)
return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
}
function tokenFactoryFor (tokenAddress) {
return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
}