-
-
- )
- }
-}
diff --git a/ui/app/components/pages/add-token/token-list/token-list.container.js b/ui/app/components/pages/add-token/token-list/token-list.container.js
deleted file mode 100644
index cd7b07a37..000000000
--- a/ui/app/components/pages/add-token/token-list/token-list.container.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux'
-import TokenList from './token-list.component'
-
-const mapStateToProps = ({ metamask }) => {
- const { tokens } = metamask
- return {
- tokens,
- }
-}
-
-export default connect(mapStateToProps)(TokenList)
diff --git a/ui/app/components/pages/add-token/token-search/index.js b/ui/app/components/pages/add-token/token-search/index.js
deleted file mode 100644
index acaa6b084..000000000
--- a/ui/app/components/pages/add-token/token-search/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import TokenSearch from './token-search.component'
-module.exports = TokenSearch
diff --git a/ui/app/components/pages/add-token/token-search/token-search.component.js b/ui/app/components/pages/add-token/token-search/token-search.component.js
deleted file mode 100644
index 036b2db1e..000000000
--- a/ui/app/components/pages/add-token/token-search/token-search.component.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import contractMap from 'eth-contract-metadata'
-import Fuse from 'fuse.js'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import TextField from '../../../text-field'
-
-const contractList = Object.entries(contractMap)
- .map(([ _, tokenData]) => tokenData)
- .filter(tokenData => Boolean(tokenData.erc20))
-
-const fuse = new Fuse(contractList, {
- shouldSort: true,
- threshold: 0.45,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- keys: [
- { name: 'name', weight: 0.5 },
- { name: 'symbol', weight: 0.5 },
- ],
-})
-
-export default class TokenSearch extends Component {
- static contextTypes = {
- t: PropTypes.func,
- }
-
- static defaultProps = {
- error: null,
- }
-
- static propTypes = {
- onSearch: PropTypes.func,
- error: PropTypes.string,
- }
-
- constructor (props) {
- super(props)
-
- this.state = {
- searchQuery: '',
- }
- }
-
- handleSearch (searchQuery) {
- this.setState({ searchQuery })
- const fuseSearchResult = fuse.search(searchQuery)
- const addressSearchResult = contractList.filter(token => {
- return token.address.toLowerCase() === searchQuery.toLowerCase()
- })
- const results = [...addressSearchResult, ...fuseSearchResult]
- this.props.onSearch({ searchQuery, results })
- }
-
- renderAdornment () {
- return (
-
- { this.context.t('searchResults') }
-
-
- {
- Array(6).fill(undefined)
- .map((_, i) => {
- const { logo, symbol, name, address } = results[i] || {}
- const tokenAlreadyAdded = checkExistingAddresses(address, tokens)
-
- return Boolean(logo || symbol || name) && (
-
- !tokenAlreadyAdded && onToggleToken(results[i])}
- key={i}
- >
-
- )
- })
- }
-
-
-
- { `${name} (${symbol})` }
-
- 
-
- { string + (withSymbol ? ` ${symbol}` : '') }
-
- )
- }
-}
diff --git a/ui/app/components/token-balance/token-balance.container.js b/ui/app/components/token-balance/token-balance.container.js
deleted file mode 100644
index adc001f83..000000000
--- a/ui/app/components/token-balance/token-balance.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withTokenTracker from '../../higher-order-components/with-token-tracker'
-import TokenBalance from './token-balance.component'
-import selectors from '../../selectors'
-
-const mapStateToProps = state => {
- return {
- userAddress: selectors.getSelectedAddress(state),
- }
-}
-
-export default compose(
- connect(mapStateToProps),
- withTokenTracker
-)(TokenBalance)
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
new file mode 100644
index 000000000..edf8b2661
--- /dev/null
+++ b/ui/app/components/token-cell.js
@@ -0,0 +1,160 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('./identicon')
+const ethNetProps = require('eth-net-props')
+const selectors = require('../selectors')
+const actions = require('../actions')
+const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
+
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
+function mapStateToProps (state) {
+ return {
+ network: state.metamask.network,
+ currentCurrency: state.metamask.currentCurrency,
+ selectedTokenAddress: state.metamask.selectedTokenAddress,
+ userAddress: selectors.getSelectedAddress(state),
+ contractExchangeRates: state.metamask.contractExchangeRates,
+ conversionRate: state.metamask.conversionRate,
+ sidebarOpen: state.appState.sidebar.isOpen,
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+ hideSidebar: () => dispatch(actions.hideSidebar()),
+ }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
+
+inherits(TokenCell, Component)
+function TokenCell () {
+ Component.call(this)
+
+ this.state = {
+ tokenMenuOpen: false,
+ }
+}
+
+TokenCell.prototype.render = function () {
+ const { tokenMenuOpen } = this.state
+ const props = this.props
+ const {
+ address,
+ symbol,
+ string,
+ network,
+ setSelectedToken,
+ selectedTokenAddress,
+ contractExchangeRates,
+ conversionRate,
+ hideSidebar,
+ sidebarOpen,
+ currentCurrency,
+ // userAddress,
+ image,
+ } = props
+ let currentTokenToFiatRate
+ let currentTokenInFiat
+ let formattedFiat = ''
+
+ if (contractExchangeRates[address]) {
+ currentTokenToFiatRate = multiplyCurrencies(
+ contractExchangeRates[address],
+ conversionRate
+ )
+ currentTokenInFiat = conversionUtil(string, {
+ fromNumericBase: 'dec',
+ fromCurrency: symbol,
+ toCurrency: currentCurrency.toUpperCase(),
+ numberOfDecimals: 2,
+ conversionRate: currentTokenToFiatRate,
+ })
+ formattedFiat = currentTokenInFiat.toString() === '0'
+ ? ''
+ : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
+ }
+
+ const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
+
+ return (
+ h('div.token-list-item', {
+ className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
+ // style: { cursor: network === '1' ? 'pointer' : 'default' },
+ // onClick: this.view.bind(this, address, userAddress, network),
+ onClick: () => {
+ setSelectedToken(address)
+ selectedTokenAddress !== address && sidebarOpen && hideSidebar()
+ },
+ }, [
+
+ h(Identicon, {
+ className: 'token-list-item__identicon',
+ diameter: 50,
+ address,
+ network,
+ image,
+ }),
+
+ 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 })
+ },
+ }),
+
+ ]),
+
+
+ tokenMenuOpen && h(TokenMenuDropdown, {
+ onClose: () => this.setState({ tokenMenuOpen: false }),
+ token: { symbol, address },
+ }),
+
+ /*
+ h('button', {
+ onClick: this.send.bind(this, address),
+ }, 'SEND'),
+ */
+
+ ])
+ )
+}
+
+TokenCell.prototype.send = function (address, event) {
+ event.preventDefault()
+ event.stopPropagation()
+ const url = tokenFactoryFor(address)
+ if (url) {
+ navigateTo(url)
+ }
+}
+
+TokenCell.prototype.view = function (address, userAddress, network, event) {
+ const url = ethNetProps.explorerLinks.getExplorerTokenLinkFor(address, userAddress, network)
+ if (url) {
+ navigateTo(url)
+ }
+}
+
+function navigateTo (url) {
+ global.platform.openWindow({ url })
+}
+
+function tokenFactoryFor (tokenAddress) {
+ return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
+}
+
diff --git a/ui/app/components/token-currency-display/index.js b/ui/app/components/token-currency-display/index.js
deleted file mode 100644
index 6065cae1f..000000000
--- a/ui/app/components/token-currency-display/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './token-currency-display.component'
diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
deleted file mode 100644
index 4bb09a4b6..000000000
--- a/ui/app/components/token-currency-display/token-currency-display.component.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyDisplay from '../currency-display/currency-display.component'
-import { getTokenData } from '../../helpers/transactions.util'
-import { getTokenValue, calcTokenAmount } from '../../token-util'
-
-export default class TokenCurrencyDisplay extends PureComponent {
- static propTypes = {
- transactionData: PropTypes.string,
- token: PropTypes.object,
- }
-
- state = {
- displayValue: '',
- }
-
- componentDidMount () {
- this.setDisplayValue()
- }
-
- componentDidUpdate (prevProps) {
- const { transactionData } = this.props
- const { transactionData: prevTransactionData } = prevProps
-
- if (transactionData !== prevTransactionData) {
- this.setDisplayValue()
- }
- }
-
- setDisplayValue () {
- const { transactionData: data, token } = this.props
- const { decimals = '', symbol = '' } = token
- const tokenData = getTokenData(data)
-
- let displayValue
-
- if (tokenData.params && tokenData.params.length) {
- const tokenValue = getTokenValue(tokenData.params)
- const tokenAmount = calcTokenAmount(tokenValue, decimals)
- displayValue = `${tokenAmount} ${symbol}`
- }
-
- this.setState({ displayValue })
- }
-
- render () {
- return (
-