ciphermask/ui/app/components/pages/add-token.js

const inherits = require('util').inherits
const Component = require('react').Component
const classnames = require('classnames')
const h = require('react-hyperscript')
const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const R = require('ramda')
const Fuse = require('fuse.js')
const contractMap = require('eth-contract-metadata')
const TokenBalance = require('../../components/token-balance')
const Identicon = require('../../components/identicon')
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 },
    ],
})
const actions = require('../../actions')
const ethUtil = require('ethereumjs-util')
const { tokenInfoGetter } = require('../../token-util')
const { DEFAULT_ROUTE } = require('../../routes')

const emptyAddr = '0x0000000000000000000000000000000000000000'

AddTokenScreen.contextTypes = {
  t: PropTypes.func,
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)


function mapStateToProps (state) {
  const { identities, tokens } = state.metamask
  return {
    identities,
    tokens,
  }
}

function mapDispatchToProps (dispatch) {
  return {
    addTokens: tokens => dispatch(actions.addTokens(tokens)),
  }
}

inherits(AddTokenScreen, Component)
function AddTokenScreen () {
  this.state = {
    isShowingConfirmation: false,
    isShowingInfoBox: true,
    customAddress: '',
    customSymbol: '',
    customDecimals: '',
    searchQuery: '',
    selectedTokens: {},
    errors: {},
    autoFilled: false,
    displayedTab: 'SEARCH',
  }
  this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this)
  this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this)
  this.tokenDecimalsDidChange = this.tokenDecimalsDidChange.bind(this)
  this.onNext = this.onNext.bind(this)
  Component.call(this)
}

AddTokenScreen.prototype.componentWillMount = function () {
  this.tokenInfoGetter = tokenInfoGetter()
}

AddTokenScreen.prototype.toggleToken = function (address, token) {
  const { selectedTokens = {}, errors } = this.state
  const selectedTokensCopy = { ...selectedTokens }

  if (address in selectedTokensCopy) {
    delete selectedTokensCopy[address]
  } else {
    selectedTokensCopy[address] = token
  }

  this.setState({
    selectedTokens: selectedTokensCopy,
    errors: {
      ...errors,
      tokenSelector: null,
    },
  })
}

AddTokenScreen.prototype.onNext = function () {
  const { isValid, errors } = this.validate()

  return !isValid
    ? this.setState({ errors })
    : this.setState({ isShowingConfirmation: true })
}

AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
  const customAddress = e.target.value.trim()
  this.setState({ customAddress })
  if (ethUtil.isValidAddress(customAddress) && customAddress !== emptyAddr) {
    this.attemptToAutoFillTokenParams(customAddress)
  } else {
    this.setState({
      customSymbol: '',
      customDecimals: 0,
    })
  }
}

AddTokenScreen.prototype.tokenSymbolDidChange = function (e) {
  const customSymbol = e.target.value.trim()
  this.setState({ customSymbol })
}

AddTokenScreen.prototype.tokenDecimalsDidChange = function (e) {
  const customDecimals = e.target.value.trim()
  this.setState({ customDecimals })
}

AddTokenScreen.prototype.checkExistingAddresses = function (address) {
  if (!address) return false
  const tokensList = this.props.tokens
  const matchesAddress = existingToken => {
    return existingToken.address.toLowerCase() === address.toLowerCase()
  }

  return R.any(matchesAddress)(tokensList)
}

AddTokenScreen.prototype.validate = function () {
  const errors = {}
  const identitiesList = Object.keys(this.props.identities)
  const { customAddress, customSymbol, customDecimals, selectedTokens } = this.state
  const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase()

  if (customAddress) {
    const validAddress = ethUtil.isValidAddress(customAddress)
    if (!validAddress) {
      errors.customAddress = this.context.t('invalidAddress')
    }

    const validDecimals = customDecimals !== null &&
      customDecimals !== '' &&
      customDecimals >= 0 &&
      customDecimals < 36
    if (!validDecimals) {
      errors.customDecimals = this.context.t('decimalsMustZerotoTen')
    }

    const symbolLen = customSymbol.trim().length
    const validSymbol = symbolLen > 0 && symbolLen < 10
    if (!validSymbol) {
      errors.customSymbol = this.context.t('symbolBetweenZeroTen')
    }

    const ownAddress = identitiesList.includes(standardAddress)
    if (ownAddress) {
      errors.customAddress = this.context.t('personalAddressDetected')
    }

    const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
    if (tokenAlreadyAdded) {
      errors.customAddress = this.context.t('tokenAlreadyAdded')
    }
  } else if (
    Object.entries(selectedTokens)
      .reduce((isEmpty, [ symbol, isSelected ]) => (
        isEmpty && !isSelected
      ), true)
  ) {
    errors.tokenSelector = this.context.t('mustSelectOne')
  }

  return {
    isValid: !Object.keys(errors).length,
    errors,
  }
}

AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) {
  const { symbol, decimals } = await this.tokenInfoGetter(address)
  if (symbol && decimals) {
    this.setState({
      customSymbol: symbol,
      customDecimals: decimals.toString(),
      autoFilled: true,
    })
  }
}

AddTokenScreen.prototype.renderCustomForm = function () {
  const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state

  return (
    h('div.add-token__add-custom-form', [
      h('div', {
        className: classnames('add-token__add-custom-field', {
          'add-token__add-custom-field--error': errors.customAddress,
        }),
      }, [
        h('div.add-token__add-custom-label', this.context.t('tokenAddress')),
        h('input.add-token__add-custom-input', {
          type: 'text',
          onChange: this.tokenAddressDidChange,
          value: customAddress,
        }),
        h('div.add-token__add-custom-error-message', errors.customAddress),
      ]),
      h('div', {
        className: classnames('add-token__add-custom-field', {
          'add-token__add-custom-field--error': errors.customSymbol,
        }),
      }, [
        h('div.add-token__add-custom-label', this.context.t('tokenSymbol')),
        h('input.add-token__add-custom-input', {
          type: 'text',
          onChange: this.tokenSymbolDidChange,
          value: customSymbol,
          disabled: autoFilled,
        }),
        h('div.add-token__add-custom-error-message', errors.customSymbol),
      ]),
      h('div', {
        className: classnames('add-token__add-custom-field', {
          'add-token__add-custom-field--error': errors.customDecimals,
        }),
      }, [
        h('div.add-token__add-custom-label', this.context.t('decimal')),
        h('input.add-token__add-custom-input', {
          type: 'number',
          onChange: this.tokenDecimalsDidChange,
          value: customDecimals,
          disabled: autoFilled,
        }),
        h('div.add-token__add-custom-error-message', errors.customDecimals),
      ]),
    ])
  )
}

AddTokenScreen.prototype.renderTokenList = function () {
  const { searchQuery = '', selectedTokens } = this.state
  const fuseSearchResult = fuse.search(searchQuery)
  const addressSearchResult = contractList.filter(token => {
    return token.address.toLowerCase() === searchQuery.toLowerCase()
  })
  const results = [...addressSearchResult, ...fuseSearchResult]

  return h('div', [
      results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')),
      h('div.add-token__token-icons-container', Array(6).fill(undefined)
        .map((_, i) => {
          const { logo, symbol, name, address } = results[i] || {}
          const tokenAlreadyAdded = this.checkExistingAddresses(address)
          return Boolean(logo || symbol || name) && (
            h('div.add-token__token-wrapper', {
              className: classnames({
                'add-token__token-wrapper--selected': selectedTokens[address],
                'add-token__token-wrapper--disabled': tokenAlreadyAdded,
              }),
              onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
            }, [
              h('div.add-token__token-icon', {
                style: {
                  backgroundImage: logo && `url(images/contract/${logo})`,
                },
              }),
              h('div.add-token__token-data', [
                h('div.add-token__token-symbol', symbol),
                h('div.add-token__token-name', name),
              ]),
              // tokenAlreadyAdded && (
              //   h('div.add-token__token-message', 'Already added')
              // ),
            ])
          )
      })),
    ])
}

AddTokenScreen.prototype.renderConfirmation = function () {
  const {
    customAddress: address,
    customSymbol: symbol,
    customDecimals: decimals,
    selectedTokens,
  } = this.state

  const { addTokens, history } = this.props

  const customToken = {
    address,
    symbol,
    decimals,
  }

  const tokens = address && symbol && decimals
    ? { ...selectedTokens, [address]: customToken }
    : selectedTokens

  return (
    h('div.add-token', [
      h('div.add-token__wrapper', [
        h('div.add-token__content-container.add-token__confirmation-content', [
          h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
          h('div.add-token__confirmation-token-list',
            Object.entries(tokens)
              .map(([ address, token ]) => (
                h('span.add-token__confirmation-token-list-item', [
                  h(Identicon, {
                    className: 'add-token__confirmation-token-icon',
                    diameter: 75,
                    address,
                  }),
                  h(TokenBalance, { token }),
                ])
              ))
          ),
        ]),
      ]),
      h('div.add-token__buttons', [
        h('button.btn-secondary--lg.add-token__cancel-button', {
          onClick: () => this.setState({ isShowingConfirmation: false }),
        }, this.context.t('back')),
        h('button.btn-primary--lg', {
          onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
        }, this.context.t('addTokens')),
      ]),
    ])
  )
}

AddTokenScreen.prototype.displayTab = function (selectedTab) {
  this.setState({ displayedTab: selectedTab })
}

AddTokenScreen.prototype.renderTabs = function () {
  const { isShowingInfoBox, displayedTab, errors } = this.state

  return displayedTab === 'CUSTOM_TOKEN'
    ? this.renderCustomForm()
    : h('div', [
    h('div.add-token__wrapper', [
      h('div.add-token__content-container', [
        isShowingInfoBox && h('div.add-token__info-box', [
          h('div.add-token__info-box__close', {
            onClick: () => this.setState({ isShowingInfoBox: false }),
          }),
          h('div.add-token__info-box__title', this.context.t('whatsThis')),
          h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
          h('a.add-token__info-box__copy--blue', {
            href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
            target: '_blank',
          }, this.context.t('learnMore')),
        ]),
        h('div.add-token__input-container', [
          h('input.add-token__input', {
            type: 'text',
            placeholder: this.context.t('searchTokens'),
            onChange: e => this.setState({ searchQuery: e.target.value }),
          }),
          h('div.add-token__search-input-error-message', errors.tokenSelector),
        ]),
        this.renderTokenList(),
      ]),
    ]),
  ])
}

AddTokenScreen.prototype.render = function () {
  const {
    isShowingConfirmation,
    displayedTab,
  } = this.state
  const { history } = this.props

  return h('div.add-token', [
    h('div.add-token__header', [
      h('div.add-token__header__cancel', {
        onClick: () => history.push(DEFAULT_ROUTE),
      }, [
        h('i.fa.fa-angle-left.fa-lg'),
        h('span', this.context.t('cancel')),
      ]),
      h('div.add-token__header__title', this.context.t('addTokens')),
      isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')),
      !isShowingConfirmation && h('div.add-token__header__tabs', [

        h('div.add-token__header__tabs__tab', {
          className: classnames('add-token__header__tabs__tab', {
            'add-token__header__tabs__selected': displayedTab === 'SEARCH',
            'add-token__header__tabs__unselected': displayedTab !== 'SEARCH',
          }),
          onClick: () => this.displayTab('SEARCH'),
        }, this.context.t('search')),

        h('div.add-token__header__tabs__tab', {
          className: classnames('add-token__header__tabs__tab', {
            'add-token__header__tabs__selected': displayedTab === 'CUSTOM_TOKEN',
            'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN',
          }),
          onClick: () => this.displayTab('CUSTOM_TOKEN'),
        }, this.context.t('customToken')),

      ]),
    ]),

    isShowingConfirmation
      ? this.renderConfirmation()
      : this.renderTabs(),

    !isShowingConfirmation && h('div.add-token__buttons', [
      h('button.btn-secondary--lg.add-token__cancel-button', {
        onClick: () => history.push(DEFAULT_ROUTE),
      }, this.context.t('cancel')),
      h('button.btn-primary--lg.add-token__confirm-button', {
        onClick: this.onNext,
      }, this.context.t('next')),
    ]),
  ])
}