metamask-extension/ui/app/send.js

const { inherits } = require('util')
const PersistentForm = require('../lib/persistent-form')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const Identicon = require('./components/identicon')
const EnsInput = require('./components/ens-input')
const GasTooltip = require('./components/send/gas-tooltip')
const CurrencyToggle = require('./components/send/currency-toggle')
const GasFeeDisplay = require('./components/send/gas-fee-display')
const { getSelectedIdentity } = require('./selectors')

const {
  showAccountsPage,
  backToAccountDetail,
  displayWarning,
  hideWarning,
  addToAddressBook,
  signTx,
  estimateGas,
  getGasPrice,
} = require('./actions')
const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util')
const { isHex, numericBalance, isValidAddress, allNull } = require('./util')
const { conversionUtil, conversionGreaterThan } = require('./conversion-util')

module.exports = connect(mapStateToProps)(SendTransactionScreen)

function mapStateToProps (state) {
  const {
    selectedAddress: address,
    accounts,
    identities,
    network,
    addressBook,
    conversionRate,
    currentBlockGasLimit: blockGasLimit,
  } = state.metamask
  const { warning } = state.appState
  const selectedIdentity = getSelectedIdentity(state)
  const account = accounts[address]

  return {
    address,
    accounts,
    identities,
    network,
    addressBook,
    conversionRate,
    blockGasLimit,
    warning,
    selectedIdentity,
    error: warning && warning.split('.')[0],
    account,
    identity: identities[address],
    balance: account ? account.balance : null,
  }
}

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

  // [WIP] These are the bare minimum of tx props needed to sign a transaction
  // We will need a few more for contract-related interactions
  this.state = {
    newTx: {
      from: '',
      to: '',
      amountToSend: '0x0',
      gasPrice: null,
      gas: null,
      amount: '0x0', 
      txData: null,
      memo: '',
    },
    activeCurrency: 'USD', 
    tooltipIsOpen: false,
    errors: {},
    isValid: false,
  }

  this.back = this.back.bind(this)
  this.closeTooltip = this.closeTooltip.bind(this)
  this.onSubmit = this.onSubmit.bind(this)
  this.setActiveCurrency = this.setActiveCurrency.bind(this)
  this.toggleTooltip = this.toggleTooltip.bind(this)
  this.validate = this.validate.bind(this)
  this.getAmountToSend = this.getAmountToSend.bind(this)
  this.setErrorsFor = this.setErrorsFor.bind(this)
  this.clearErrorsFor = this.clearErrorsFor.bind(this)

  this.renderFromInput = this.renderFromInput.bind(this)
  this.renderToInput = this.renderToInput.bind(this)
  this.renderAmountInput = this.renderAmountInput.bind(this)
  this.renderGasInput = this.renderGasInput.bind(this)
  this.renderMemoInput = this.renderMemoInput.bind(this)
  this.renderErrorMessage = this.renderErrorMessage.bind(this)
}

SendTransactionScreen.prototype.componentWillMount = function () {
  const { newTx } = this.state
  const { address } = this.props

  Promise.all([
    this.props.dispatch(getGasPrice()),
    this.props.dispatch(estimateGas({
      from: address,
      gas: '746a528800',
    })),
  ])
  .then(([blockGasPrice, estimatedGas]) => {
    console.log({ blockGasPrice, estimatedGas})
    this.setState({
      newTx: {
        ...newTx,
        gasPrice: blockGasPrice,
        gas: estimatedGas,
      },
    })
  })
}

SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) {
  const { errors } = this.state
  const errorMessage = errors[errorType];

  return errorMessage || warning
    ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ])
    : null
}

SendTransactionScreen.prototype.renderFromInput = function (from, identities) {
  return h('div.send-screen-input-wrapper', [

    h('div', 'From:'),

    h('input.large-input.send-screen-input', {
      list: 'accounts',
      placeholder: 'Account',
      value: from,
      onChange: (event) => {
        this.setState({
          newTx: {
            ...this.state.newTx,
            from: event.target.value,
          },
        })
      },
      onBlur: () => this.setErrorsFor('from'),
      onFocus: event => {
        this.clearErrorsFor('from')
        this.state.newTx.from && event.target.select()
      },
    }),

    h('datalist#accounts', [
      Object.entries(identities).map(([key, { address, name }]) => {
        return h('option', {
          value: address,
          label: name,
          key: address,
        })
      }),
    ]),

    this.renderErrorMessage('from'),

  ])
}

SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) {
  return h('div.send-screen-input-wrapper', [

    h('div', 'To:'),

    h('input.large-input.send-screen-input', {
      name: 'address',
      list: 'addresses',
      placeholder: 'Address',
      value: to,
      onChange: (event) => {
        this.setState({
          newTx: {
            ...this.state.newTx,
            to: event.target.value,
          },
        })
      },
      onBlur: () => {
        this.setErrorsFor('to')
      },
      onFocus: event => {
        this.clearErrorsFor('to')
        this.state.newTx.to && event.target.select()
      },
    }),

    h('datalist#addresses', [
      // Corresponds to the addresses owned.
      ...Object.entries(identities).map(([key, { address, name }]) => {
        return h('option', {
          value: address,
          label: name,
          key: address,
        })
      }),
      // Corresponds to previously sent-to addresses.
      ...addressBook.map(({ address, name }) => {
        return h('option', {
          value: address,
          label: name,
          key: address,
        })
      }),
    ]),

    this.renderErrorMessage('to'),

  ])
}

SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) {
  return h('div.send-screen-input-wrapper', [

    h('div.send-screen-amount-labels', [
      h('span', 'Amount'),
      h(CurrencyToggle, {
        activeCurrency,
        onClick: (newCurrency) => this.setActiveCurrency(newCurrency),
      }), // holding on icon from design
    ]),

    h('input.large-input.send-screen-input', {
      placeholder: `0 ${activeCurrency}`,
      type: 'number',
      onChange: (event) => {
        const amountToSend = event.target.value
          ? this.getAmountToSend(event.target.value)
          : '0x0'

        this.setState({
          newTx: Object.assign(
            this.state.newTx,
            {
              amount: event.target.value,
              amountToSend: amountToSend,
            }
          ),
        })
      },
      onBlur: () => {
        this.setErrorsFor('amount')
      },
      onFocus: () => this.clearErrorsFor('amount'),
    }),

    this.renderErrorMessage('amount'),

  ])
}

SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) {
  return h('div.send-screen-input-wrapper', [
    this.state.tooltipIsOpen && h(GasTooltip, {
      className: 'send-tooltip',
      gasPrice,
      gasLimit: gas,
      onClose: this.closeTooltip,
      onFeeChange: ({gasLimit, gasPrice}) => {
        this.setState({
          newTx: {
            ...this.state.newTx,
            gas: gasLimit,
            gasPrice,
          },
        })
      },
    }),

    h('div.send-screen-gas-labels', [
      h('span', [
        h('i.fa.fa-bolt'),
        'Gas fee:',
      ]),
      h('span', 'What\'s this?'),
    ]),

    // TODO: handle loading time when switching to USD
    h('div.large-input.send-screen-gas-input', {}, [
      h(GasFeeDisplay, {
        activeCurrency,
        conversionRate,
        gas,
        gasPrice,
        blockGasLimit,
      }),
      h('div.send-screen-gas-input-customize', {
        onClick: this.toggleTooltip,
      }, [
        'Customize',
      ]),
    ]),

  ])
}

SendTransactionScreen.prototype.renderMemoInput = function () {
  return h('div.send-screen-input-wrapper', [
    h('div', 'Transaction memo (optional)'),
    h('input.large-input.send-screen-input', {
      onChange: () => {
        this.setState({
          newTx: Object.assign(
            this.state.newTx,
            {
              memo: event.target.value,
            }
          ),
        })
      },
    }),
  ])
}

SendTransactionScreen.prototype.render = function () {
  this.persistentFormParentId = 'send-tx-form'

  const props = this.props
  const {
    warning,
    identities,
    addressBook,
    conversionRate,
  } = props

  const {
    blockGasLimit,
    newTx,
    activeCurrency,
    isValid,
  } = this.state
  const { gas, gasPrice } = newTx

  return (

    h('div.send-screen-wrapper', [
      // Main Send token Card
      h('div.send-screen-card', [

        h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),

        h('div.send-screen__title', 'Send'),

        h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),

        this.renderFromInput(this.state.newTx.from, identities),

        this.renderToInput(this.state.newTx.to, identities, addressBook),

        this.renderAmountInput(activeCurrency),

        this.renderGasInput(
          gasPrice || '0x0',
          gas || '0x0',
          activeCurrency,
          conversionRate,
          blockGasLimit
        ),

        this.renderMemoInput(),

        this.renderErrorMessage(null, warning),

      ]),

      // Buttons underneath card
      h('section.flex-column.flex-center', [
        h('button.btn-secondary.send-screen__send-button', {
          className: !isValid && 'send-screen__send-button__disabled',
          onClick: (event) => isValid && this.onSubmit(event),
        }, 'Next'),
        h('button.btn-tertiary.send-screen__cancel-button', {
          onClick: this.back,
        }, 'Cancel'),
      ]),
    ])

  )
}

SendTransactionScreen.prototype.toggleTooltip = function () {
  this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen })
}

SendTransactionScreen.prototype.closeTooltip = function () {
  this.setState({ tooltipIsOpen: false })
}

SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) {
  this.setState({ activeCurrency: newCurrency })
}

SendTransactionScreen.prototype.back = function () {
  var address = this.props.address
  this.props.dispatch(backToAccountDetail(address))
}

SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) {
  const sufficientBalance = conversionGreaterThan(
    {
      value: balance,
      fromNumericBase: 'hex',
    },
    {
      value: amountToSend,
      fromNumericBase: 'hex',
    },
  )

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

  const errors = {}

  if (!sufficientBalance) {
    errors.amount = 'Insufficient funds.'
  }

  if (amountLessThanZero) {
    errors.amount = 'Can not send negative amounts of ETH.'
  }

  if (!from) {
    errors.from = 'Required'
  }

  if (from && !isValidAddress(from)) {
    errors.from = 'Sender address is invalid.'
  }

  if (!to) {
    errors.to = 'Required'
  }

  if (to && !isValidAddress(to)) {
    errors.to = 'Recipient address is invalid.'
  }

  // if (txData && !isHex(stripHexPrefix(txData))) {
  //   message = 'Transaction data must be hex string.'
  //   return this.props.dispatch(displayWarning(message))
  // }

  return {
    isValid: allNull(errors),
    errors,
  }
}

SendTransactionScreen.prototype.getAmountToSend = function (amount) {
  const { activeCurrency } = this.state
  const { conversionRate } = this.props

  return conversionUtil(amount, {
    fromNumericBase: 'dec',
    toNumericBase: 'hex',
    fromCurrency: activeCurrency,
    toCurrency: 'ETH',
    toDenomination: 'WEI',
    conversionRate,
    invertConversionRate: activeCurrency !== 'ETH',
  })
}

SendTransactionScreen.prototype.setErrorsFor = function (field) {
  const { balance } = this.props
  const { newTx, errors: previousErrors } = this.state
  const { amountToSend } = newTx

  const {
    isValid,
    errors: newErrors
  } = this.validate(balance, amountToSend, newTx)

  const nextErrors = Object.assign({}, previousErrors, {
    [field]: newErrors[field] || null
  })

  if (!isValid) {
    this.setState({
      errors: nextErrors,
      isValid,
    })
  }
}

SendTransactionScreen.prototype.clearErrorsFor = function (field) {
  const { errors: previousErrors } = this.state
  const nextErrors = Object.assign({}, previousErrors, {
    [field]: null
  })

  this.setState({
    errors: nextErrors,
    isValid: allNull(nextErrors),
  })
}

SendTransactionScreen.prototype.onSubmit = function (event) {
  event.preventDefault()
  const { warning, balance } = this.props
  const state = this.state || {}

  const recipient = state.newTx.to
  const sender = state.newTx.from
  const nickname = state.nickname || ' '

  // TODO: convert this to hex when created and include it in send
  const txData = state.newTx.memo

  this.props.dispatch(hideWarning())

  this.props.dispatch(addToAddressBook(recipient, nickname))

  var txParams = {
    from: this.state.newTx.from,
    to: this.state.newTx.to,

    value: this.state.newTx.amountToSend,

    gas: this.state.newTx.gas,
    gasPrice: this.state.newTx.gasPrice,
  }

  if (recipient) txParams.to = addHexPrefix(recipient)
  if (txData) txParams.data = txData

  this.props.dispatch(signTx(txParams))
}