metamask-extension/ui/app/components/pending-tx.js

const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const actions = require('../actions')
const clone = require('clone')

const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN
const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
const util = require('../util')

const MIN_GAS_PRICE_GWEI_BN = new BN(1)
const GWEI_FACTOR = new BN(1e9)
const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)


// Faked, for Icon
const Identicon = require('./identicon')
const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'

// Next: create separate react components
// roughly 5 components:
//   heroIcon
//   numericDisplay (contains symbol + currency)
//   divider
//   contentBox
//   actionButtons
const sectionDivider = h('div', {
  style: {
    height: '1px',
    background: '#E7E7E7',
  },
})

const contentDivider = h('div', {
  style: {
    marginLeft: '16px',
    marginRight: '16px',
    height: '1px',
    background: '#E7E7E7',
  },
})

module.exports = PendingTx
inherits(PendingTx, Component)
function PendingTx () {
  Component.call(this)
  this.state = {
    valid: true,
    txData: null,
    submitting: false,
  }
}

PendingTx.prototype.render = function () {
  const props = this.props
  const { blockGasLimit } = props

  const txMeta = this.gatherTxMeta()
  const txParams = txMeta.txParams || {}

  // Account Details
  const address = txParams.from || props.selectedAddress
  const account = props.accounts[address]
  const balance = account ? account.balance : '0x0'

  // recipient check
  const isValidAddress = !txParams.to || util.isValidAddress(txParams.to)

  // Gas
  const gas = txParams.gas
  const gasBn = hexToBn(gas)

  // Gas Price
  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
  const gasPriceBn = hexToBn(gasPrice)

  const txFeeBn = gasBn.mul(gasPriceBn)
  const valueBn = hexToBn(txParams.value)
  const maxCost = txFeeBn.add(valueBn)

  const balanceBn = hexToBn(balance)
  const insufficientBalance = balanceBn.lt(maxCost)

  this.inputs = []

  return (
    h('div.flex-column.flex-grow', {
      style: {
        // overflow: 'scroll',
        minWidth: '355px', // TODO: maxWidth TBD, use home.html
      },
    }, [

      // Main Send token Card
      h('div.send-screen.flex-column.flex-grow', {
        style: {
          marginLeft: '3.5%',
          marginRight: '3.5%',
          background: '#FFFFFF', // $background-white
          boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
        },
      }, [
        h('section.flex-center.flex-row', {
          style: {
            zIndex: 15, // $token-icon-z-index
            marginTop: '-35px',
          },
        }, [
          h(Identicon, {
            address: ARAGON,
            diameter: 76,
          }),
        ]),

        //
        // Required Fields
        //

        h('h3.flex-center', {
          style: {
            marginTop: '-18px',
            fontSize: '16px',
          },
        }, [
          'Confirm Transaction',
        ]),

        h('h3.flex-center', {
          style: {
            textAlign: 'center',
            fontSize: '12px',
          },
        }, [
          'You\'re sending to Recipient ...5924',
        ]),

        h('h3.flex-center', {
          style: {
            textAlign: 'center',
            fontSize: '36px',
            marginTop: '8px',
          },
        }, [
          '0.24',
        ]),

        h('h3.flex-center', {
          style: {
            textAlign: 'center',
            fontSize: '12px',
            marginTop: '4px',
          },
        }, [
          'ANT',
        ]),

        // error message
        props.error && h('span.error.flex-center', props.error),

        sectionDivider,

        h('section.flex-row.flex-center', {
        }, [
          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('span', {
              style: {
                textAlign: 'left',
                fontSize: '12px',
              },
            }, [
              'From',
            ]),
          ]),

          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '10px',
                marginBottom: '-10px',
              },
            }, 'Aragon Token'),

            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '8px',
              },
            }, 'Your Balance 2.34 ANT'),
          ]),
        ]),

        contentDivider,

        h('section.flex-row.flex-center', {
        }, [
          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('span', {
              style: {
                textAlign: 'left',
                fontSize: '12px',
              },
            }, [
              'To',
            ]),
          ]),

          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '10px',
                marginBottom: '-10px',
              },
            }, 'Ethereum Address'),

            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '8px',
              },
            }, '...5924'),
          ]),
        ]),

        contentDivider,

        h('section.flex-row.flex-center', {
        }, [
          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('span', {
              style: {
                textAlign: 'left',
                fontSize: '12px',
              },
            }, [
              'Gas Fee',
            ]),
          ]),

          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '10px',
                marginBottom: '-10px',
              },
            }, '$0.04 USD'),

            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '8px',
              },
            }, '0.001575 ETH'),
          ]),
        ]),

        contentDivider,

        h('section.flex-row.flex-center', {
          style: {
            backgroundColor: '#F6F6F6', // $wild-sand
            borderRadius: '8px',
            marginLeft: '10px',
            marginRight: '10px',
            paddingLeft: '6px',
            paddingRight: '6px',
            marginBottom: '10px',
          },
        }, [
          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '12px',
                marginBottom: '-10px',
              },
            }, [
              'Total Tokens',
            ]),

            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '8px',
              },
            }, [
              'Total Gas',
            ]),

          ]),

          h('div', {
            style: {
              width: '50%',
            },
          }, [
            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '10px',
                marginBottom: '-10px',
              },
            }, '0.24 ANT (127.00 USD)'),

            h('div', {
              style: {
                textAlign: 'left',
                fontSize: '8px',
              },
            }, '0.249 ETH'),
          ]),
        ]),

      ]), // end of container

      h('form#pending-tx-form.flex-column.flex-center', {
        onSubmit: this.onSubmit.bind(this),
      }, [
        // Reset Button
        // h('button', {
        //   onClick: (event) => {
        //     this.resetGasFields()
        //     event.preventDefault()
        //   },
        // }, 'Reset'),

        // Accept Button
        h('input.confirm.btn-green', {
          type: 'submit',
          value: 'CONFIRM',
          style: {
            marginTop: '8px',
            width: '8em',
            color: '#FFFFFF',
            borderRadius: '2px',
            fontSize: '12px',
            lineHeight: '20px',
            textAlign: 'center',
            borderStyle: 'none',
          },
          disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
        }),

        // Cancel Button
        h('button.cancel.btn-light', {
          style: {
            background: '#F7F7F7', // $alabaster
            border: 'none',
            opacity: 1,
            width: '8em',
          },
          onClick: props.cancelTransaction,
        }, 'CANCEL'),
      ]),
    ]) // end of minwidth wrapper
  )
}

// PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
//   log.info(`Gas price changed to: ${newBN.toString(10)}`)
//   const txMeta = this.gatherTxMeta()
//   txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
//   this.setState({
//     txData: clone(txMeta),
//     valid,
//   })
// }

// PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
//   log.info(`Gas limit changed to ${newBN.toString(10)}`)
//   const txMeta = this.gatherTxMeta()
//   txMeta.txParams.gas = '0x' + newBN.toString('hex')
//   this.setState({
//     txData: clone(txMeta),
//     valid,
//   })
// }

// PendingTx.prototype.resetGasFields = function () {
//   log.debug(`pending-tx resetGasFields`)

//   this.inputs.forEach((hexInput) => {
//     if (hexInput) {
//       hexInput.setValid()
//     }
//   })

//   this.setState({
//     txData: null,
//     valid: true,
//   })
// }

PendingTx.prototype.onSubmit = function (event) {
  event.preventDefault()
  const txMeta = this.gatherTxMeta()
  const valid = this.checkValidity()
  this.setState({ valid, submitting: true })
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
    this.setState({ submitting: false })
  }
}

PendingTx.prototype.checkValidity = function () {
  const form = this.getFormEl()
  const valid = form.checkValidity()
  return valid
}

PendingTx.prototype.getFormEl = function () {
  const form = document.querySelector('form#pending-tx-form')
  // Stub out form for unit tests:
  if (!form) {
    return { checkValidity () { return true } }
  }
  return form
}

// After a customizable state value has been updated,
PendingTx.prototype.gatherTxMeta = function () {
  log.debug(`pending-tx gatherTxMeta`)
  const props = this.props
  const state = this.state
  const txData = clone(state.txData) || clone(props.txData)

  log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
  return txData
}

PendingTx.prototype.verifyGasParams = function () {
  // We call this in case the gas has not been modified at all
  if (!this.state) { return true }
  return (
    this._notZeroOrEmptyString(this.state.gas) &&
    this._notZeroOrEmptyString(this.state.gasPrice)
  )
}

PendingTx.prototype._notZeroOrEmptyString = function (obj) {
  return obj !== '' && obj !== '0x0'
}

PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
  const numBN = new BN(numerator)
  const denomBN = new BN(denominator)
  return targetBN.mul(numBN).div(denomBN)
}