metamask-extension/ui/app/send-v2.js

const { inherits } = require('util')
const PropTypes = require('prop-types')
const PersistentForm = require('../lib/persistent-form')
const h = require('react-hyperscript')

const ethAbi = require('ethereumjs-abi')
const ethUtil = require('ethereumjs-util')

const FromDropdown = require('./components/send/from-dropdown')
const EnsInput = require('./components/ens-input')
const CurrencyDisplay = require('./components/send/currency-display')
const MemoTextArea = require('./components/send/memo-textarea')
const GasFeeDisplay = require('./components/send/gas-fee-display-v2')

const {
  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
} = require('./components/send/send-constants')

const {
  multiplyCurrencies,
  conversionGreaterThan,
  subtractCurrencies,
} = require('./conversion-util')
const {
  calcTokenAmount,
} = require('./token-util')
const {
  isBalanceSufficient,
  isTokenBalanceSufficient,
  getGasTotal,
} = require('./components/send/send-utils')
const { isValidAddress } = require('./util')
const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
const Button = require('./components/button')

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

module.exports = SendTransactionScreen

inherits(SendTransactionScreen, PersistentForm)
function SendTransactionScreen () {
  PersistentForm.call(this)

  this.state = {
    fromDropdownOpen: false,
    toDropdownOpen: false,
    errors: {
      to: null,
      amount: null,
    },
    gasLoadingError: false,
  }

  this.handleToChange = this.handleToChange.bind(this)
  this.handleAmountChange = this.handleAmountChange.bind(this)
  this.validateAmount = this.validateAmount.bind(this)
}

const getParamsForGasEstimate = function (selectedAddress, symbol, data) {
  const estimatedGasParams = {
    from: selectedAddress,
    gas: '746a528800',
  }

  if (symbol) {
    Object.assign(estimatedGasParams, { value: '0x0' })
  }

  if (data) {
    Object.assign(estimatedGasParams, { data })
  }

  return estimatedGasParams
}

SendTransactionScreen.prototype.updateSendTokenBalance = function (usersToken) {
  if (!usersToken) return

  const {
    selectedToken = {},
    updateSendTokenBalance,
  } = this.props
  const { decimals } = selectedToken || {}
  const tokenBalance = calcTokenAmount(usersToken.balance.toString(), decimals)

  updateSendTokenBalance(tokenBalance)
}

SendTransactionScreen.prototype.componentWillMount = function () {
  this.updateGas()
}

SendTransactionScreen.prototype.updateGas = function () {
  const {
    selectedToken = {},
    getGasPrice,
    estimateGas,
    selectedAddress,
    data,
    updateGasTotal,
    from,
    tokenContract,
    editingTransactionId,
    gasPrice,
    gasLimit,
  } = this.props

  const { symbol } = selectedToken || {}

  const tokenBalancePromise = tokenContract
    ? tokenContract.balanceOf(from.address)
    : Promise.resolve()
  tokenBalancePromise
      .then(usersToken => this.updateSendTokenBalance(usersToken))

  if (!editingTransactionId) {
    const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data)

    Promise
      .all([
        getGasPrice(),
        estimateGas(estimateGasParams),
      ])
      .then(([gasPrice, gas]) => {
        const newGasTotal = getGasTotal(gas, gasPrice)
        updateGasTotal(newGasTotal)
        this.setState({ gasLoadingError: false })
      })
      .catch(err => {
        this.setState({ gasLoadingError: true })
      })
  } else {
    const newGasTotal = getGasTotal(gasLimit, gasPrice)
    updateGasTotal(newGasTotal)
  }
}

SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
  const {
    from: { balance },
    gasTotal,
    tokenBalance,
    amount,
    selectedToken,
    network,
  } = this.props

  const {
    from: { balance: prevBalance },
    gasTotal: prevGasTotal,
    tokenBalance: prevTokenBalance,
    network: prevNetwork,
  } = prevProps

  const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)

  const balanceHasChanged = balance !== prevBalance
  const gasTotalHasChange = gasTotal !== prevGasTotal
  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
  const amountValidationChange = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged

  if (!uninitialized) {
    if (amountValidationChange) {
      this.validateAmount(amount)
    }

    if (network !== prevNetwork && network !== 'loading') {
      this.updateGas()
    }
  }
}

SendTransactionScreen.prototype.renderHeader = function () {
  const { selectedToken, clearSend, history } = this.props

  return h('div.page-container__header', [

    h('div.page-container__title', selectedToken ? this.context.t('sendTokens') : this.context.t('sendETH')),

    h('div.page-container__subtitle', this.context.t('onlySendToEtherAddress')),

    h('div.page-container__header-close', {
      onClick: () => {
        clearSend()
        history.push(DEFAULT_ROUTE)
      },
    }),

  ])
}

SendTransactionScreen.prototype.renderErrorMessage = function (errorType) {
  const { errors } = this.props
  const errorMessage = errors[errorType]

  return errorMessage
    ? h('div.send-v2__error', [ errorMessage ])
    : null
}

SendTransactionScreen.prototype.handleFromChange = async function (newFrom) {
  const {
    updateSendFrom,
    tokenContract,
  } = this.props

  if (tokenContract) {
    const usersToken = await tokenContract.balanceOf(newFrom.address)
    this.updateSendTokenBalance(usersToken)
  }
  updateSendFrom(newFrom)
}

SendTransactionScreen.prototype.renderFromRow = function () {
  const {
    from,
    fromAccounts,
    conversionRate,
  } = this.props

  const { fromDropdownOpen } = this.state

  return h('div.send-v2__form-row', [

    h('div.send-v2__form-label', this.context.t('from')),

    h('div.send-v2__form-field', [
      h(FromDropdown, {
        dropdownOpen: fromDropdownOpen,
        accounts: fromAccounts,
        selectedAccount: from,
        onSelect: newFrom => this.handleFromChange(newFrom),
        openDropdown: () => this.setState({ fromDropdownOpen: true }),
        closeDropdown: () => this.setState({ fromDropdownOpen: false }),
        conversionRate,
      }),
    ]),

  ])
}

SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
  const {
    updateSendTo,
    updateSendErrors,
  } = this.props
  let toError = null

  if (!to) {
    toError = this.context.t('required')
  } else if (!isValidAddress(to)) {
    toError = this.context.t('invalidAddressRecipient')
  }

  updateSendTo(to, nickname)
  updateSendErrors({ to: toError })
}

SendTransactionScreen.prototype.renderToRow = function () {
  const { toAccounts, errors, to, network } = this.props

  const { toDropdownOpen } = this.state

  return h('div.send-v2__form-row', [

    h('div.send-v2__form-label', [

      this.context.t('to'),

      this.renderErrorMessage(this.context.t('to')),

    ]),

    h('div.send-v2__form-field', [
      h(EnsInput, {
        name: 'address',
        placeholder: 'Recipient Address',
        network,
        to,
        accounts: Object.entries(toAccounts).map(([key, account]) => account),
        dropdownOpen: toDropdownOpen,
        openDropdown: () => this.setState({ toDropdownOpen: true }),
        closeDropdown: () => this.setState({ toDropdownOpen: false }),
        onChange: this.handleToChange,
        inError: Boolean(errors.to),
      }),
    ]),

  ])
}

SendTransactionScreen.prototype.handleAmountChange = function (value) {
  const amount = value
  const { updateSendAmount, setMaxModeTo } = this.props

  setMaxModeTo(false)
  this.validateAmount(amount)
  updateSendAmount(amount)
}

SendTransactionScreen.prototype.setAmountToMax = function () {
  const {
    from: { balance },
    updateSendAmount,
    updateSendErrors,
    tokenBalance,
    selectedToken,
    gasTotal,
  } = this.props
  const { decimals } = selectedToken || {}
  const multiplier = Math.pow(10, Number(decimals || 0))

  const maxAmount = selectedToken
    ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
    : subtractCurrencies(
      ethUtil.addHexPrefix(balance),
      ethUtil.addHexPrefix(gasTotal),
      { toNumericBase: 'hex' }
    )

  updateSendErrors({ amount: null })

  updateSendAmount(maxAmount)
}

SendTransactionScreen.prototype.validateAmount = function (value) {
  const {
    from: { balance },
    updateSendErrors,
    amountConversionRate,
    conversionRate,
    primaryCurrency,
    selectedToken,
    gasTotal,
    tokenBalance,
  } = this.props
  const { decimals } = selectedToken || {}
  const amount = value

  let amountError = null

  let sufficientBalance = true

  if (gasTotal) {
    sufficientBalance = isBalanceSufficient({
      amount: selectedToken ? '0x0' : amount,
      gasTotal,
      balance,
      primaryCurrency,
      amountConversionRate,
      conversionRate,
    })
  }

  const verifyTokenBalance = selectedToken && tokenBalance !== null
  let sufficientTokens
  if (verifyTokenBalance) {
    sufficientTokens = isTokenBalanceSufficient({
      tokenBalance,
      amount,
      decimals,
    })
  }

  const amountLessThanZero = conversionGreaterThan(
    { value: 0, fromNumericBase: 'dec' },
    { value: amount, fromNumericBase: 'hex' },
  )

  if (conversionRate && !sufficientBalance) {
    amountError = this.context.t('insufficientFunds')
  } else if (verifyTokenBalance && !sufficientTokens) {
    amountError = this.context.t('insufficientTokens')
  } else if (amountLessThanZero) {
    amountError = this.context.t('negativeETH')
  }

  updateSendErrors({ amount: amountError })
}

SendTransactionScreen.prototype.renderAmountRow = function () {
  const {
    selectedToken,
    primaryCurrency = 'ETH',
    convertedCurrency,
    amountConversionRate,
    errors,
    amount,
    setMaxModeTo,
    maxModeOn,
    gasTotal,
  } = this.props

  return h('div.send-v2__form-row', [

    h('div.send-v2__form-label', [
      this.context.t('amount'),
      this.renderErrorMessage('amount'),
      !errors.amount && gasTotal && h('div.send-v2__amount-max', {
        onClick: (event) => {
          event.preventDefault()
          setMaxModeTo(true)
          this.setAmountToMax()
        },
      }, [ !maxModeOn ? this.context.t('max') : '' ]),
    ]),

    h('div.send-v2__form-field', [
      h(CurrencyDisplay, {
        inError: Boolean(errors.amount),
        primaryCurrency,
        convertedCurrency,
        selectedToken,
        value: amount || '0x0',
        conversionRate: amountConversionRate,
        handleChange: this.handleAmountChange,
      }),
    ]),

  ])
}

SendTransactionScreen.prototype.renderGasRow = function () {
  const {
    conversionRate,
    convertedCurrency,
    showCustomizeGasModal,
    gasTotal,
  } = this.props
  const { gasLoadingError } = this.state

  return h('div.send-v2__form-row', [

    h('div.send-v2__form-label', this.context.t('gasFee')),

    h('div.send-v2__form-field', [

      h(GasFeeDisplay, {
        gasTotal,
        conversionRate,
        convertedCurrency,
        onClick: showCustomizeGasModal,
        gasLoadingError,
      }),

    ]),

  ])
}

SendTransactionScreen.prototype.renderMemoRow = function () {
  const { updateSendMemo, memo } = this.props

  return h('div.send-v2__form-row', [

    h('div.send-v2__form-label', 'Transaction Memo:'),

    h('div.send-v2__form-field', [
      h(MemoTextArea, {
        memo,
        onChange: (event) => updateSendMemo(event.target.value),
      }),
    ]),

  ])
}

SendTransactionScreen.prototype.renderForm = function () {
  return h('.page-container__content', {}, [
    h('.send-v2__form', [
      this.renderFromRow(),

      this.renderToRow(),

      this.renderAmountRow(),

      this.renderGasRow(),

      // this.renderMemoRow(),

    ]),
  ])
}

SendTransactionScreen.prototype.renderFooter = function () {
  const {
    clearSend,
    gasTotal,
    tokenBalance,
    selectedToken,
    errors: { amount: amountError, to: toError },
    history,
  } = this.props

  const missingTokenBalance = selectedToken && (tokenBalance === null || tokenBalance === undefined)
  const noErrors = !amountError && toError === null

  return h('div.page-container__footer', [
    h(Button, {
      type: 'default',
      large: true,
      className: 'page-container__footer-button',
      onClick: () => {
        clearSend()
        history.push(DEFAULT_ROUTE)
      },
    }, this.context.t('cancel')),
    h(Button, {
      type: 'primary',
      large: true,
      className: 'page-container__footer-button',
      disabled: !noErrors || !gasTotal || missingTokenBalance,
      onClick: event => this.onSubmit(event),
    }, this.context.t('next')),
  ])
}

SendTransactionScreen.prototype.render = function () {
  return (

    h('div.page-container', [

      this.renderHeader(),

      this.renderForm(),

      this.renderFooter(),
    ])

  )
}

SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') {
  const { toAccounts, addToAddressBook } = this.props
  if (!toAccounts.find(({ address }) => newAddress === address)) {
    // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
    addToAddressBook(newAddress, nickname)
  }
}

SendTransactionScreen.prototype.getEditedTx = function () {
  const {
    from: {address: from},
    to,
    amount,
    gasLimit: gas,
    gasPrice,
    selectedToken,
    editingTransactionId,
    unapprovedTxs,
  } = this.props

  const editingTx = {
    ...unapprovedTxs[editingTransactionId],
    txParams: {
      from: ethUtil.addHexPrefix(from),
      gas: ethUtil.addHexPrefix(gas),
      gasPrice: ethUtil.addHexPrefix(gasPrice),
    },
  }

  if (selectedToken) {
    const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
      x => ('00' + x.toString(16)).slice(-2)
    ).join('')

    Object.assign(editingTx.txParams, {
      value: ethUtil.addHexPrefix('0'),
      to: ethUtil.addHexPrefix(selectedToken.address),
      data,
    })
  } else {
    const { data } = unapprovedTxs[editingTransactionId].txParams

    Object.assign(editingTx.txParams, {
      value: ethUtil.addHexPrefix(amount),
      to: ethUtil.addHexPrefix(to),
      data,
    })

    if (typeof editingTx.txParams.data === 'undefined') {
      delete editingTx.txParams.data
    }
  }

  return editingTx
}

SendTransactionScreen.prototype.onSubmit = function (event) {
  event.preventDefault()
  const {
    from: {address: from},
    to: _to,
    amount,
    gasLimit: gas,
    gasPrice,
    signTokenTx,
    signTx,
    updateTx,
    selectedToken,
    editingTransactionId,
    toNickname,
    errors: { amount: amountError, to: toError },
  } = this.props

  const noErrors = !amountError && toError === null

  if (!noErrors) {
    return
  }

  const to = ethUtil.addHexPrefix(_to)

  this.addToAddressBookIfNew(to, toNickname)

  if (editingTransactionId) {
    const editedTx = this.getEditedTx()
    updateTx(editedTx)
  } else {

    const txParams = {
      from,
      value: '0',
      gas,
      gasPrice,
    }

    if (!selectedToken) {
      txParams.value = amount
      txParams.to = to
    }

    Object.keys(txParams).forEach(key => {
      txParams[key] = ethUtil.addHexPrefix(txParams[key])
    })

    selectedToken
      ? signTokenTx(selectedToken.address, to, amount, txParams)
      : signTx(txParams)
  }

  this.props.history.push(CONFIRM_TRANSACTION_ROUTE)
}