Merge branch 'master' into mascara

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Current Master
 
+## 3.5.2 2017-3-28
+
+- Fix bug where gas estimate totals were sometimes wrong.
+- Add link to Kovan Test Faucet instructions on buy view.
+- Inject web3 into loaded iFrames.
+
+## 3.5.1 2017-3-27
+
+- Fix edge case where users were unable to enable the notice button if notices were short enough to not require a scrollbar.
+
+## 3.5.0 2017-3-27
+
 - Add better error messages for when a transaction fails on approval
 - Allow sending to ENS names in send form on Ropsten.
 - Added an address book functionality that remembers the last 15 unique addresses sent to.
@@ -9,7 +21,11 @@
 - Removed support for old, lightwallet based vault. Users who have not opened app in over a month will need to recover with their seed phrase. This will allow Firefox support sooner.
 - Fixed bug where spinner wouldn't disappear on incorrect password submission on seed word reveal.
 - Polish the private key UI.
+- Enforce minimum values for gas price and gas limit.
+- Fix bug where total gas was sometimes not live-updated.
+- Fix bug where editing gas value could have some abrupt behaviors (#1233)
 - Add Kovan as an option on our network list.
+- Fixed bug where transactions on other networks would disappear when submitting a transaction on another network.
 
 ## 3.4.0 2017-3-8
 

app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "MetaMask",
   "short_name": "Metamask",
-  "version": "3.4.0",
+  "version": "3.5.2",
   "manifest_version": 2,
   "author": "https://metamask.io",
   "description": "Ethereum Browser Extension",
@@ -51,7 +51,7 @@
         "scripts/contentscript.js"
       ],
       "run_at": "document_start",
-      "all_frames": false
+      "all_frames": true
     }
   ],
   "permissions": [

app/scripts/contentscript.js

@@ -65,10 +65,10 @@ function setupStreams () {
 }
 
 function shouldInjectWeb3 () {
-  return isAllowedSuffix(window.location.href)
+  return doctypeCheck() || suffixCheck()
 }
 
-function isAllowedSuffix (testCase) {
+function doctypeCheck () {
   const doctype = window.document.doctype
   if (doctype) {
     return doctype.name === 'html'
@@ -76,3 +76,16 @@ function isAllowedSuffix (testCase) {
     return false
   }
 }
+
+function suffixCheck() {
+  var prohibitedTypes = ['xml', 'pdf']
+  var currentUrl = window.location.href
+  var currentRegex
+  for (let i = 0; i < prohibitedTypes.length; i++) {
+    currentRegex = new RegExp(`\.${prohibitedTypes[i]}$`)
+    if (currentRegex.test(currentUrl)) {
+      return false
+    }
+  }
+  return true
+}

app/scripts/lib/hex-to-bn.js

@@ -0,0 +1,7 @@
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+
+module.exports = function hexToBn (hex) {
+  return new BN(ethUtil.stripHexPrefix(hex), 16)
+}
+

app/scripts/lib/tx-utils.js

@@ -12,48 +12,49 @@ and used to do things like calculate gas of a tx.
 */
 
 module.exports = class txProviderUtils {
+
   constructor (provider) {
     this.provider = provider
     this.query = new EthQuery(provider)
   }
 
-  analyzeGasUsage (txData, cb) {
+  analyzeGasUsage (txMeta, cb) {
     var self = this
     this.query.getBlockByNumber('latest', true, (err, block) => {
       if (err) return cb(err)
       async.waterfall([
-        self.estimateTxGas.bind(self, txData, block.gasLimit),
-        self.setTxGas.bind(self, txData, block.gasLimit),
+        self.estimateTxGas.bind(self, txMeta, block.gasLimit),
+        self.setTxGas.bind(self, txMeta, block.gasLimit),
       ], cb)
     })
   }
 
-  estimateTxGas (txData, blockGasLimitHex, cb) {
-    const txParams = txData.txParams
+  estimateTxGas (txMeta, blockGasLimitHex, cb) {
+    const txParams = txMeta.txParams
     // check if gasLimit is already specified
-    txData.gasLimitSpecified = Boolean(txParams.gas)
+    txMeta.gasLimitSpecified = Boolean(txParams.gas)
     // if not, fallback to block gasLimit
-    if (!txData.gasLimitSpecified) {
+    if (!txMeta.gasLimitSpecified) {
       txParams.gas = blockGasLimitHex
     }
     // run tx, see if it will OOG
     this.query.estimateGas(txParams, cb)
   }
 
-  setTxGas (txData, blockGasLimitHex, estimatedGasHex, cb) {
-    txData.estimatedGas = estimatedGasHex
-    const txParams = txData.txParams
+  setTxGas (txMeta, blockGasLimitHex, estimatedGasHex, cb) {
+    txMeta.estimatedGas = estimatedGasHex
+    const txParams = txMeta.txParams
 
     // if gasLimit was specified and doesnt OOG,
     // use original specified amount
-    if (txData.gasLimitSpecified) {
-      txData.estimatedGas = txParams.gas
+    if (txMeta.gasLimitSpecified) {
+      txMeta.estimatedGas = txParams.gas
       cb()
       return
     }
     // if gasLimit not originally specified,
     // try adding an additional gas buffer to our estimation for safety
-    const recommendedGasHex = this.addGasBuffer(txData.estimatedGas, blockGasLimitHex)
+    const recommendedGasHex = this.addGasBuffer(txMeta.estimatedGas, blockGasLimitHex)
     txParams.gas = recommendedGasHex
     cb()
     return
@@ -63,7 +64,7 @@ module.exports = class txProviderUtils {
     const initialGasLimitBn = hexToBn(initialGasLimitHex)
     const blockGasLimitBn = hexToBn(blockGasLimitHex)
     const bufferedGasLimitBn = initialGasLimitBn.muln(1.5)
-    
+
     // if initialGasLimit is above blockGasLimit, dont modify it
     if (initialGasLimitBn.gt(blockGasLimitBn)) return bnToHex(initialGasLimitBn)
     // if bufferedGasLimit is below blockGasLimit, use bufferedGasLimit
@@ -90,16 +91,13 @@ module.exports = class txProviderUtils {
 
   // builds ethTx from txParams object
   buildEthTxFromParams (txParams) {
-    // apply gas multiplyer
-    let gasPrice = hexToBn(txParams.gasPrice)
-    // multiply and divide by 100 so as to add percision to integer mul
-    txParams.gasPrice = ethUtil.intToHex(gasPrice.toNumber())
     // normalize values
     txParams.to = normalize(txParams.to)
     txParams.from = normalize(txParams.from)
     txParams.value = normalize(txParams.value)
     txParams.data = normalize(txParams.data)
-    txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas)
+    txParams.gas = normalize(txParams.gas || txParams.gasLimit)
+    txParams.gasPrice = normalize(txParams.gasPrice)
     txParams.nonce = normalize(txParams.nonce)
     // build ethTx
     log.info(`Prepared tx for signing: ${JSON.stringify(txParams)}`)
@@ -134,4 +132,4 @@ function bnToHex(inputBn) {
 
 function hexToBn(inputHex) {
   return new BN(ethUtil.stripHexPrefix(inputHex), 16)
-}
+}

app/scripts/metamask-controller.js

@@ -385,7 +385,7 @@ module.exports = class MetamaskController extends EventEmitter {
     .then((serialized) => {
       const seedWords = serialized.mnemonic
       this.configManager.setSeedWords(seedWords)
-      cb()
+      cb(null, seedWords)
     })
   }
 
@@ -622,6 +622,10 @@ module.exports = class MetamaskController extends EventEmitter {
       case '3':
         url = 'https://faucet.metamask.io/'
         break
+
+      case '42':
+        url = 'https://github.com/kovan-testnet/faucet'
+        break
     }
 
     if (url) extension.tabs.create({ url })

app/scripts/migrations/012.js

@@ -0,0 +1,36 @@
+const version = 12
+
+/*
+
+This migration modifies our notices to delete their body after being read.
+
+*/
+
+const clone = require('clone')
+
+module.exports = {
+  version,
+
+  migrate: function (originalVersionedData) {
+    let versionedData = clone(originalVersionedData)
+    versionedData.meta.version = version
+    try {
+      const state = versionedData.data
+      const newState = transformState(state)
+      versionedData.data = newState
+    } catch (err) {
+      console.warn(`MetaMask Migration #${version}` + err.stack)
+    }
+    return Promise.resolve(versionedData)
+  },
+}
+
+function transformState (state) {
+  const newState = state
+  newState.NoticeController.noticesList.forEach((notice) => {
+    if (notice.read) {
+      notice.body = ''
+    }
+  })
+  return newState
+}

app/scripts/notice-controller.js

@@ -41,6 +41,7 @@ module.exports = class NoticeController extends EventEmitter {
       var notices = this.getNoticesList()
       var index = notices.findIndex((currentNotice) => currentNotice.id === noticeToMark.id)
       notices[index].read = true
+      notices[index].body = ''
       this.setNoticesList(notices)
       const latestNotice = this.getLatestUnreadNotice()
       cb(null, latestNotice)

app/scripts/transaction-manager.js

@@ -4,7 +4,7 @@ const extend = require('xtend')
 const Semaphore = require('semaphore')
 const ObservableStore = require('obs-store')
 const ethUtil = require('ethereumjs-util')
-const BN = require('ethereumjs-util').BN
+const EthQuery = require('eth-query')
 const TxProviderUtil = require('./lib/tx-utils')
 const createId = require('./lib/random-id')
 
@@ -20,6 +20,7 @@ module.exports = class TransactionManager extends EventEmitter {
     this.txHistoryLimit = opts.txHistoryLimit
     this.provider = opts.provider
     this.blockTracker = opts.blockTracker
+    this.query = new EthQuery(this.provider)
     this.txProviderUtils = new TxProviderUtil(this.provider)
     this.blockTracker.on('block', this.checkForTxInBlock.bind(this))
     this.signEthTx = opts.signTransaction
@@ -47,27 +48,40 @@ module.exports = class TransactionManager extends EventEmitter {
   // Returns the tx list
   getTxList () {
     let network = this.getNetwork()
-    let fullTxList = this.store.getState().transactions
+    let fullTxList = this.getFullTxList()
     return fullTxList.filter(txMeta => txMeta.metamaskNetworkId === network)
   }
 
+  // Returns the number of txs for the current network.
+  getTxCount () {
+    return this.getTxList().length
+  }
+
+  // Returns the full tx list across all networks
+  getFullTxList () {
+    return this.store.getState().transactions
+  }
+
   // Adds a tx to the txlist
   addTx (txMeta) {
-    var txList = this.getTxList()
-    var txHistoryLimit = this.txHistoryLimit
+    let txCount = this.getTxCount()
+    let network = this.getNetwork()
+    let fullTxList = this.getFullTxList()
+    let txHistoryLimit = this.txHistoryLimit
 
-    // checks if the length of th tx history is
+    // checks if the length of the tx history is
     // longer then desired persistence limit
     // and then if it is removes only confirmed
     // or rejected tx's.
     // not tx's that are pending or unapproved
-    if (txList.length > txHistoryLimit - 1) {
-      var index = txList.findIndex((metaTx) => metaTx.status === 'confirmed' || metaTx.status === 'rejected')
-      txList.splice(index, 1)
+    if (txCount > txHistoryLimit - 1) {
+      var index = fullTxList.findIndex((metaTx) => ((metaTx.status === 'confirmed' || metaTx.status === 'rejected') && network === txMeta.metamaskNetworkId))
+      fullTxList.splice(index, 1)
     }
-    txList.push(txMeta)
+    fullTxList.push(txMeta)
+    this._saveTxList(fullTxList)
+    this.emit('update')
 
-    this._saveTxList(txList)
     this.once(`${txMeta.id}:signed`, function (txId) {
       this.removeAllListeners(`${txMeta.id}:rejected`)
     })
@@ -89,7 +103,7 @@ module.exports = class TransactionManager extends EventEmitter {
   //
   updateTx (txMeta) {
     var txId = txMeta.id
-    var txList = this.getTxList()
+    var txList = this.getFullTxList()
     var index = txList.findIndex(txData => txData.id === txId)
     txList[index] = txMeta
     this._saveTxList(txList)
@@ -109,44 +123,38 @@ module.exports = class TransactionManager extends EventEmitter {
     async.waterfall([
       // validate
       (cb) => this.txProviderUtils.validateTxParams(txParams, cb),
-      // prepare txMeta
+      // construct txMeta
       (cb) => {
-        // create txMeta obj with parameters and meta data
-        let time = (new Date()).getTime()
-        let txId = createId()
-        txParams.metamaskId = txId
-        txParams.metamaskNetworkId = this.getNetwork()
         txMeta = {
-          id: txId,
-          time: time,
+          id: createId(),
+          time: (new Date()).getTime(),
           status: 'unapproved',
           metamaskNetworkId: this.getNetwork(),
           txParams: txParams,
         }
-        // calculate metadata for tx
-        this.txProviderUtils.analyzeGasUsage(txMeta, cb)
+        cb()
       },
+      // add default tx params
+      (cb) => this.addTxDefaults(txMeta, cb),
       // save txMeta
       (cb) => {
         this.addTx(txMeta)
-        this.setMaxTxCostAndFee(txMeta)
         cb(null, txMeta)
       },
     ], done)
   }
 
-  setMaxTxCostAndFee (txMeta) {
-    var txParams = txMeta.txParams
-    var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-    var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
-    var txFee = gasCost.mul(gasPrice)
-    var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
-    var maxCost = txValue.add(txFee)
-    txMeta.txFee = txFee
-    txMeta.txValue = txValue
-    txMeta.maxCost = maxCost
-    txMeta.gasPrice = gasPrice
-    this.updateTx(txMeta)
+  addTxDefaults (txMeta, cb) {
+    const txParams = txMeta.txParams
+    // ensure value
+    txParams.value = txParams.value || '0x0'
+    this.query.gasPrice((err, gasPrice) => {
+      if (err) return cb(err)
+      // set gasPrice
+      txParams.gasPrice = gasPrice
+      // set gasLimit
+      this.txProviderUtils.analyzeGasUsage(txMeta, cb)
+    })
   }
 
   getUnapprovedTxList () {
@@ -324,7 +332,7 @@ module.exports = class TransactionManager extends EventEmitter {
         }
         return this.setTxStatusFailed(txId, errReason)
       }
-      this.txProviderUtils.query.getTransactionByHash(txHash, (err, txParams) => {
+      this.query.getTransactionByHash(txHash, (err, txParams) => {
         if (err || !txParams) {
           if (!txParams) return
           txMeta.err = {

notices/archive/notice_1.md

@@ -0,0 +1 @@
+MetaMask now lists a new network on our dropdown list: Kovan, a [Proof of Authority](https://github.com/paritytech/parity/wiki/Proof-of-Authority-Chains) testchain managed by several blockchain organizations such as Digix, Etherscan, and Parity. It is designed to be a more stable and reliable testnet alternative to Ropsten and was created in response to recent attacks that slowed down the Ropsten network. You can read more about Kovan [here](https://medium.com/@Digix/announcing-kovan-a-stable-ethereum-public-testnet-10ac7cb6c85f#.6o8sz8cct) and [here](https://medium.com/@Digix/letter-from-the-ceo-some-context-regarding-kovan-7b5121adb901#.kfv7zhw83). As with Ropsten, the default remote node to connect to Kovan is managed by Infura.

notices/notice-nonce.json

@@ -1 +1 @@
-1
+2

test/lib/migrations/004.json

@@ -48,6 +48,13 @@
             "title":"Ending Morden Support",
             "body":"Due to [recent events](https://blog.ethereum.org/2016/11/20/from-morden-to-ropsten/), MetaMask is now deprecating support for the Morden Test Network.\n\nUsers will still be able to access Morden through a locally hosted node, but we will no longer be providing hosted access to this network through [Infura](http://infura.io/).\n\nPlease use the new Ropsten Network as your new default test network.\n\nYou can fund your Ropsten account using the buy button on your account page.\n\nBest wishes!\nThe MetaMask Team\n\n",
             "id":0
+         },
+         {
+           "read":false,
+           "date":"Sat Dec 17 2016",
+           "title":"Keeping It Real",
+           "body":"nonempty",
+           "id":1
          }
       ],
       "conversionRate":12.66441492,

test/unit/account-link-test.js

@@ -3,15 +3,15 @@ var linkGen = require('../../ui/lib/account-link')
 
 describe('account-link', function() {
 
-  it('adds morden prefix to morden test network', function() {
-    var result = linkGen('account', '2')
-    assert.notEqual(result.indexOf('morden'), -1, 'testnet included')
+  it('adds ropsten prefix to ropsten test network', function() {
+    var result = linkGen('account', '3')
+    assert.notEqual(result.indexOf('ropsten'), -1, 'ropsten included')
     assert.notEqual(result.indexOf('account'), -1, 'account included')
   })
 
-  it('adds testnet prefix to ropsten test network', function() {
-    var result = linkGen('account', '3')
-    assert.notEqual(result.indexOf('testnet'), -1, 'testnet included')
+  it('adds kovan prefix to kovan test network', function() {
+    var result = linkGen('account', '42')
+    assert.notEqual(result.indexOf('kovan'), -1, 'kovan included')
     assert.notEqual(result.indexOf('account'), -1, 'account included')
   })
 

test/unit/explorer-link-test.js

@@ -3,9 +3,14 @@ var linkGen = require('../../ui/lib/explorer-link')
 
 describe('explorer-link', function() {
 
-  it('adds testnet prefix to morden test network', function() {
+  it('adds ropsten prefix to ropsten test network', function() {
     var result = linkGen('hash', '3')
-    assert.notEqual(result.indexOf('testnet'), -1, 'testnet injected')
+    assert.notEqual(result.indexOf('ropsten'), -1, 'ropsten injected')
+  })
+
+  it('adds kovan prefix to kovan test network', function() {
+    var result = linkGen('hash', '42')
+    assert.notEqual(result.indexOf('kovan'), -1, 'kovan injected')
   })
 
 })

test/unit/migrations-test.js

@@ -15,6 +15,8 @@ const migration8 = require(path.join('..', '..', 'app', 'scripts', 'migrations',
 const migration9 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '009'))
 const migration10 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '010'))
 const migration11 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '011'))
+const migration12 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '012'))
+
 
 const oldTestRpc = 'https://rawtestrpc.metamask.io/'
 const newTestRpc = 'https://testrpc.metamask.io/'
@@ -91,6 +93,11 @@ describe('wallet1 is migrated successfully', () => {
     }).then((eleventhResult) => {
       assert.equal(eleventhResult.data.isDisclaimerConfirmed, null, 'isDisclaimerConfirmed should not exist')
       assert.equal(eleventhResult.data.TOSHash, null, 'TOSHash should not exist')
+
+      return migration12.migrate(eleventhResult)
+    }).then((twelfthResult) => {
+      assert.equal(twelfthResult.data.NoticeController.noticesList[0].body, '', 'notices that have been read should have an empty body.')
+      assert.equal(twelfthResult.data.NoticeController.noticesList[1].body, 'nonempty', 'notices that have not been read should not have an empty body.')
     })
 
   })

test/unit/tx-manager-test.js

@@ -59,6 +59,17 @@ describe('Transaction Manager', function() {
       assert.equal(result[0].id, 1)
     })
 
+    it('does not override txs from other networks', function() {
+      var tx = { id: 1, status: 'confirmed', metamaskNetworkId: 'unit test', txParams: {} }
+      var tx2 = { id: 2, status: 'confirmed', metamaskNetworkId: 'another net', txParams: {} }
+      txManager.addTx(tx, noop)
+      txManager.addTx(tx2, noop)
+      var result = txManager.getFullTxList()
+      var result2 = txManager.getTxList()
+      assert.equal(result.length, 2, 'txs were deleted')
+      assert.equal(result2.length, 1, 'incorrect number of txs on network.')
+    })
+
     it('cuts off early txs beyond a limit', function() {
       const limit = txManager.txHistoryLimit
       for (let i = 0; i < limit + 1; i++) {

ui/app/accounts/index.js

@@ -11,7 +11,7 @@ module.exports = connect(mapStateToProps)(AccountsScreen)
 
 function mapStateToProps (state) {
   const pendingTxs = valuesFor(state.metamask.unapprovedTxs)
-  .filter(tx => tx.txParams.metamaskNetworkId === state.metamask.network)
+  .filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network)
   const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs)
   const pending = pendingTxs.concat(pendingMsgs)
 

ui/app/actions.js

@@ -273,8 +273,10 @@ function requestRevealSeed (password) {
         return dispatch(actions.displayWarning(err.message))
       }
       log.debug(`background.placeSeedWords`)
-      background.placeSeedWords((err) => {
+      background.placeSeedWords((err, result) => {
         if (err) return dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideLoadingIndication())
+        dispatch(actions.showNewVaultSeed(result))
       })
     })
   }
@@ -397,7 +399,6 @@ function signTx (txData) {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
       dispatch(actions.hideWarning())
-      dispatch(actions.goHome())
     })
     dispatch(this.showConfTxPage())
   }
@@ -422,6 +423,7 @@ function updateAndApproveTx (txData) {
   return (dispatch) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     background.updateAndApproveTransaction(txData, (err) => {
+      dispatch(actions.hideLoadingIndication())
       if (err) {
         dispatch(actions.txError(err))
         return console.error(err.message)

ui/app/components/buy-button-subview.js

@@ -121,15 +121,22 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
       h('h3.text-transform-uppercase', {
         style: {
           width: '225px',
+          marginBottom: '15px',
         },
       }, 'In order to access this feature, please switch to the Main Network'),
-      (this.props.network === '3') ? h('h3.text-transform-uppercase', 'or:') : null,
+      ((this.props.network === '3') || (this.props.network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
       (this.props.network === '3') ? h('button.text-transform-uppercase', {
         onClick: () => this.props.dispatch(actions.buyEth()),
         style: {
           marginTop: '15px',
         },
-      }, 'Go To Test Faucet') : null,
+      }, 'Ropsten Test Faucet') : null,
+      (this.props.network === '42') ? h('button.text-transform-uppercase', {
+        onClick: () => this.props.dispatch(actions.buyEth()),
+        style: {
+          marginTop: '15px',
+        },
+      }, 'Kovan Test Faucet') : null,
     ])
   }
 }

ui/app/components/hex-as-decimal-input.js

@@ -9,6 +9,7 @@ module.exports = HexAsDecimalInput
 
 inherits(HexAsDecimalInput, Component)
 function HexAsDecimalInput () {
+  this.state = { invalid: null }
   Component.call(this)
 }
 
@@ -23,49 +24,120 @@ function HexAsDecimalInput () {
 
 HexAsDecimalInput.prototype.render = function () {
   const props = this.props
-  const { value, onChange } = props
+  const state = this.state
+
+  const { value, onChange, min, max } = props
+
   const toEth = props.toEth
   const suffix = props.suffix
   const decimalValue = decimalize(value, toEth)
   const style = props.style
 
   return (
-    h('.flex-row', {
-      style: {
-        alignItems: 'flex-end',
-        lineHeight: '13px',
-        fontFamily: 'Montserrat Light',
-        textRendering: 'geometricPrecision',
-      },
-    }, [
-      h('input.ether-balance.ether-balance-amount', {
-        type: 'number',
-        style: extend({
-          display: 'block',
-          textAlign: 'right',
-          backgroundColor: 'transparent',
-          border: '1px solid #bdbdbd',
-
-        }, style),
-        value: decimalValue,
-        onChange: (event) => {
-          const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
-          onChange(hexString)
+    h('.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
         },
-      }),
-      h('div', {
+      }, [
+        h('input.hex-input', {
+          type: 'number',
+          required: true,
+          min: min,
+          max: max,
+          style: extend({
+            display: 'block',
+            textAlign: 'right',
+            backgroundColor: 'transparent',
+            border: '1px solid #bdbdbd',
+
+          }, style),
+          value: parseInt(decimalValue),
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
+          onChange: (event) => {
+            this.updateValidity(event)
+            const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
+            onChange(hexString)
+          },
+          onInvalid: (event) => {
+            const msg = this.constructWarning()
+            if (msg === state.invalid) {
+              return
+            }
+            this.setState({ invalid: msg })
+            event.preventDefault()
+            return false
+          },
+        }),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+            marginRight: '6px',
+            width: '20px',
+          },
+        }, suffix),
+      ]),
+
+      state.invalid ? h('span.error', {
         style: {
-          color: ' #AEAEAE',
-          fontSize: '12px',
-          marginLeft: '5px',
-          marginRight: '6px',
-          width: '20px',
+          position: 'absolute',
+          right: '0px',
+          textAlign: 'right',
+          transform: 'translateY(26px)',
+          padding: '3px',
+          background: 'rgba(255,255,255,0.85)',
+          zIndex: '1',
+          textTransform: 'capitalize',
+          border: '2px solid #E20202',
         },
-      }, suffix),
+      }, state.invalid) : null,
     ])
   )
 }
 
+HexAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+HexAsDecimalInput.prototype.updateValidity = function (event) {
+  const target = event.target
+  const value = this.props.value
+  const newValue = target.value
+
+  if (value === newValue) {
+    return
+  }
+
+  const valid = target.checkValidity()
+  if (valid) {
+    this.setState({ invalid: null })
+  }
+}
+
+HexAsDecimalInput.prototype.constructWarning = function () {
+  const { name, min, max } = this.props
+  let message = name ? name + ' ' : ''
+
+  if (min && max) {
+    message += `must be greater than or equal to  ${min} and less than or equal to ${max}.`
+  } else if (min) {
+    message += `must be greater than or equal to ${min}.`
+  } else if (max) {
+    message += `must be less than or equal to ${max}.`
+  } else {
+    message += 'Invalid input.'
+  }
+
+  return message
+}
+
 function hexify (decimalString) {
   const hexBN = new BN(decimalString, 10)
   return '0x' + hexBN.toString('hex')

ui/app/components/notice.js

@@ -92,6 +92,7 @@ Notice.prototype.render = function () {
         },
       }, [
         h(ReactMarkdown, {
+          className: 'notice-box',
           source: body,
           skipHtml: true,
         }),
@@ -99,7 +100,10 @@ Notice.prototype.render = function () {
 
       h('button', {
         disabled,
-        onClick: onConfirm,
+        onClick: () => {
+          this.setState({disclaimerDisabled: true})
+          onConfirm()
+        },
         style: {
           marginTop: '18px',
         },
@@ -111,6 +115,8 @@ Notice.prototype.render = function () {
 Notice.prototype.componentDidMount = function () {
   var node = findDOMNode(this)
   linker.setupListener(node)
+  if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { this.setState({disclaimerDisabled: false}) }
+
 }
 
 Notice.prototype.componentWillUnmount = function () {

ui/app/components/pending-tx-details.js

@@ -1,344 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const extend = require('xtend')
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-
-const MiniAccountPanel = require('./mini-account-panel')
-const EthBalance = require('./eth-balance')
-const util = require('../util')
-const addressSummary = util.addressSummary
-const nameForAddress = require('../../lib/contract-namer')
-const HexInput = require('./hex-as-decimal-input')
-
-module.exports = PendingTxDetails
-
-inherits(PendingTxDetails, Component)
-function PendingTxDetails () {
-  Component.call(this)
-}
-
-const PTXP = PendingTxDetails.prototype
-
-PTXP.render = function () {
-  var props = this.props
-  var state = this.state || {}
-  var txData = state.txMeta || props.txData
-
-  var txParams = txData.txParams || {}
-  var address = txParams.from || props.selectedAddress
-  var identity = props.identities[address] || { address: address }
-  var account = props.accounts[address]
-  var balance = account ? account.balance : '0x0'
-
-  const gas = (state.gas === undefined) ? txParams.gas : state.gas
-  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
-
-  var txFee = state.txFee || txData.txFee || ''
-  var maxCost = state.maxCost || txData.maxCost || ''
-  var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-  var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
-  log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
-
-  return (
-    h('div', [
-
-      h('.flex-row.flex-center', {
-        style: {
-          maxWidth: '100%',
-        },
-      }, [
-
-        h(MiniAccountPanel, {
-          imageSeed: address,
-          imageifyIdenticons: imageify,
-          picOrder: 'right',
-        }, [
-          h('span.font-small', {
-            style: {
-              fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-            },
-          }, identity.name),
-          h('span.font-small', {
-            style: {
-              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-            },
-          }, addressSummary(address, 6, 4, false)),
-
-          h('span.font-small', {
-            style: {
-              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-            },
-          }, [
-            h(EthBalance, {
-              value: balance,
-              inline: true,
-              labelColor: '#F7861C',
-            }),
-          ]),
-
-        ]),
-
-        forwardCarrat(),
-
-        this.miniAccountPanelForRecipient(),
-      ]),
-
-      h('style', `
-        .table-box {
-          margin: 7px 0px 0px 0px;
-          width: 100%;
-        }
-        .table-box .row {
-          margin: 0px;
-          background: rgb(236,236,236);
-          display: flex;
-          justify-content: space-between;
-          font-family: Montserrat Light, sans-serif;
-          font-size: 13px;
-          padding: 5px 25px;
-        }
-        .table-box .row .value {
-          font-family: Montserrat Regular;
-        }
-      `),
-
-      h('.table-box', [
-
-        // Ether Value
-        // Currently not customizable, but easily modified
-        // in the way that gas and gasLimit currently are.
-        h('.row', [
-          h('.cell.label', 'Amount'),
-          h(EthBalance, { value: txParams.value }),
-        ]),
-
-        // Gas Limit (customizable)
-        h('.cell.row', [
-          h('.cell.label', 'Gas Limit'),
-          h('.cell.value', {
-          }, [
-            h(HexInput, {
-              value: gas,
-              suffix: 'UNITS',
-              style: {
-                position: 'relative',
-                top: '5px',
-              },
-              onChange: (newHex) => {
-                log.info(`Gas limit changed to ${newHex}`)
-                this.setState({ gas: newHex })
-              },
-            }),
-          ]),
-        ]),
-
-        // Gas Price (customizable)
-        h('.cell.row', [
-          h('.cell.label', 'Gas Price'),
-          h('.cell.value', {
-          }, [
-            h(HexInput, {
-              value: gasPrice,
-              suffix: 'WEI',
-              style: {
-                position: 'relative',
-                top: '5px',
-              },
-              onChange: (newHex) => {
-                log.info(`Gas price changed to: ${newHex}`)
-                this.setState({ gasPrice: newHex })
-              },
-            }),
-          ]),
-        ]),
-
-        // Max Transaction Fee (calculated)
-        h('.cell.row', [
-          h('.cell.label', 'Max Transaction Fee'),
-          h(EthBalance, { value: txFee.toString(16) }),
-        ]),
-
-        h('.cell.row', {
-          style: {
-            fontFamily: 'Montserrat Regular',
-            background: 'white',
-            padding: '10px 25px',
-          },
-        }, [
-          h('.cell.label', 'Max Total'),
-          h('.cell.value', {
-            style: {
-              display: 'flex',
-              alignItems: 'center',
-            },
-          }, [
-            h(EthBalance, {
-              value: maxCost.toString(16),
-              inline: true,
-              labelColor: 'black',
-              fontSize: '16px',
-            }),
-          ]),
-        ]),
-
-        // Data size row:
-        h('.cell.row', {
-          style: {
-            background: '#f7f7f7',
-            paddingBottom: '0px',
-          },
-        }, [
-          h('.cell.label'),
-          h('.cell.value', {
-            style: {
-              fontFamily: 'Montserrat Light',
-              fontSize: '11px',
-            },
-          }, `Data included: ${dataLength} bytes`),
-        ]),
-      ]), // End of Table
-
-    ])
-  )
-}
-
-PTXP.miniAccountPanelForRecipient = function () {
-  var props = this.props
-  var txData = props.txData
-  var txParams = txData.txParams || {}
-  var isContractDeploy = !('to' in txParams)
-  var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
-  // If it's not a contract deploy, send to the account
-  if (!isContractDeploy) {
-    return h(MiniAccountPanel, {
-      imageSeed: txParams.to,
-      imageifyIdenticons: imageify,
-      picOrder: 'left',
-    }, [
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, nameForAddress(txParams.to, props.identities)),
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-        },
-      }, addressSummary(txParams.to, 6, 4, false)),
-    ])
-  } else {
-    return h(MiniAccountPanel, {
-      imageifyIdenticons: imageify,
-      picOrder: 'left',
-    }, [
-
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, 'New Contract'),
-
-    ])
-  }
-}
-
-PTXP.componentDidUpdate = function (prevProps, previousState) {
-  log.debug(`pending-tx-details componentDidUpdate`)
-  const state = this.state || {}
-  const prevState = previousState || {}
-  const { gas, gasPrice } = state
-
-  // Only if gas or gasPrice changed:
-  if (!prevState ||
-      (gas !== prevState.gas ||
-      gasPrice !== prevState.gasPrice)) {
-    log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
-    this.calculateGas()
-  }
-}
-
-PTXP.calculateGas = function () {
-  const txMeta = this.gatherParams()
-  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
-
-  var txParams = txMeta.txParams
-  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
-  var txFee = gasCost.mul(gasPrice)
-  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
-  var maxCost = txValue.add(txFee)
-
-  const txFeeHex = '0x' + txFee.toString('hex')
-  const maxCostHex = '0x' + maxCost.toString('hex')
-  const gasPriceHex = '0x' + gasPrice.toString('hex')
-
-  txMeta.txFee = txFeeHex
-  txMeta.maxCost = maxCostHex
-  txMeta.txParams.gasPrice = gasPriceHex
-
-  this.setState({
-    txFee: '0x' + txFee.toString('hex'),
-    maxCost: '0x' + maxCost.toString('hex'),
-  })
-
-  if (this.props.onTxChange) {
-    this.props.onTxChange(txMeta)
-  }
-}
-
-PTXP.resetGasFields = function () {
-  log.debug(`pending-tx-details#resetGasFields`)
-  const txData = this.props.txData
-  this.setState({
-    gas: txData.txParams.gas,
-    gasPrice: txData.gasPrice,
-  })
-}
-
-// After a customizable state value has been updated,
-PTXP.gatherParams = function () {
-  log.debug(`pending-tx-details#gatherParams`)
-  const props = this.props
-  const state = this.state || {}
-  const txData = state.txData || props.txData
-  const txParams = txData.txParams
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txParams.gasPrice
-  const resultTx = extend(txParams, {
-    gas,
-    gasPrice,
-  })
-  const resultTxMeta = extend(txData, {
-    txParams: resultTx,
-  })
-  log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
-  return resultTxMeta
-}
-
-PTXP.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)
-}
-
-PTXP._notZeroOrEmptyString = function (obj) {
-  return obj !== '' && obj !== '0x0'
-}
-
-function forwardCarrat () {
-  return (
-
-    h('img', {
-      src: 'images/forward-carrat.svg',
-      style: {
-        padding: '5px 6px 0px 10px',
-        height: '37px',
-      },
-    })
-
-  )
-}

ui/app/components/pending-tx.js

@@ -2,98 +2,413 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-tx-details')
-const extend = require('xtend')
 const actions = require('../actions')
 
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
+
+const MiniAccountPanel = require('./mini-account-panel')
+const EthBalance = require('./eth-balance')
+const util = require('../util')
+const addressSummary = util.addressSummary
+const nameForAddress = require('../../lib/contract-namer')
+const HexInput = require('./hex-as-decimal-input')
+
+const MIN_GAS_PRICE_BN = new BN(20000000)
+const MIN_GAS_LIMIT_BN = new BN(21000)
+
 module.exports = connect(mapStateToProps)(PendingTx)
 
 function mapStateToProps (state) {
-  return {
-
-  }
+  return {}
 }
 
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
+  this.state = {
+    valid: true,
+    txData: null,
+  }
 }
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const newProps = extend(props, {ref: 'details'})
-  const txData = props.txData
+
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const address = txParams.from || props.selectedAddress
+  const identity = props.identities[address] || { address: address }
+  const account = props.accounts[address]
+  const balance = account ? account.balance : '0x0'
+
+  const gas = txParams.gas
+  const gasPrice = txParams.gasPrice
+
+  const gasBn = hexToBn(gas)
+  const gasPriceBn = hexToBn(gasPrice)
+
+  const txFeeBn = gasBn.mul(gasPriceBn)
+  const valueBn = hexToBn(txParams.value)
+  const maxCost = txFeeBn.add(valueBn)
+
+  const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
+  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
+
+  const balanceBn = hexToBn(balance)
+  const insufficientBalance = balanceBn.lt(maxCost)
+
+  this.inputs = []
 
   return (
 
     h('div', {
-      key: txData.id,
+      key: txMeta.id,
     }, [
 
-      // tx info
-      h(PendingTxDetails, newProps),
+      h('form#pending-tx-form', {
+        onSubmit: (event) => {
+          event.preventDefault()
+          const form = document.querySelector('form#pending-tx-form')
+          const valid = form.checkValidity()
+          this.setState({ valid })
+          if (valid && this.verifyGasParams()) {
+            props.sendTransaction(txMeta, event)
+          } else {
+            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+          }
+        },
+      }, [
 
-      h('style', `
-        .conf-buttons button {
-          margin-left: 10px;
-          text-transform: uppercase;
-        }
-      `),
+        // tx info
+        h('div', [
 
-      txData.simulationFails ?
-        h('.error', {
-          style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
-          },
-        }, 'Transaction Error. Exception thrown in contract code.')
-      : null,
+          h('.flex-row.flex-center', {
+            style: {
+              maxWidth: '100%',
+            },
+          }, [
+
+            h(MiniAccountPanel, {
+              imageSeed: address,
+              imageifyIdenticons: imageify,
+              picOrder: 'right',
+            }, [
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+                },
+              }, identity.name),
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+                },
+              }, addressSummary(address, 6, 4, false)),
+
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+                },
+              }, [
+                h(EthBalance, {
+                  value: balance,
+                  inline: true,
+                  labelColor: '#F7861C',
+                }),
+              ]),
+            ]),
+
+            forwardCarrat(),
 
-      props.insufficientBalance ?
-        h('span.error', {
+            this.miniAccountPanelForRecipient(),
+          ]),
+
+          h('style', `
+            .table-box {
+              margin: 7px 0px 0px 0px;
+              width: 100%;
+            }
+            .table-box .row {
+              margin: 0px;
+              background: rgb(236,236,236);
+              display: flex;
+              justify-content: space-between;
+              font-family: Montserrat Light, sans-serif;
+              font-size: 13px;
+              padding: 5px 25px;
+            }
+            .table-box .row .value {
+              font-family: Montserrat Regular;
+            }
+          `),
+
+          h('.table-box', [
+
+            // Ether Value
+            // Currently not customizable, but easily modified
+            // in the way that gas and gasLimit currently are.
+            h('.row', [
+              h('.cell.label', 'Amount'),
+              h(EthBalance, { value: txParams.value }),
+            ]),
+
+            // Gas Limit (customizable)
+            h('.cell.row', [
+              h('.cell.label', 'Gas Limit'),
+              h('.cell.value', {
+              }, [
+                h(HexInput, {
+                  name: 'Gas Limit',
+                  value: gas,
+                  // The hard lower limit for gas.
+                  min: MIN_GAS_LIMIT_BN.toString(10),
+                  suffix: 'UNITS',
+                  style: {
+                    position: 'relative',
+                    top: '5px',
+                  },
+                  onChange: (newHex) => {
+                    log.info(`Gas limit changed to ${newHex}`)
+                    const txMeta = this.gatherTxMeta()
+                    txMeta.txParams.gas = newHex
+                    this.setState({ txData: txMeta })
+                  },
+                  ref: (hexInput) => { this.inputs.push(hexInput) },
+                }),
+              ]),
+            ]),
+
+            // Gas Price (customizable)
+            h('.cell.row', [
+              h('.cell.label', 'Gas Price'),
+              h('.cell.value', {
+              }, [
+                h(HexInput, {
+                  name: 'Gas Price',
+                  value: gasPrice,
+                  suffix: 'WEI',
+                  min: MIN_GAS_PRICE_BN.toString(10),
+                  style: {
+                    position: 'relative',
+                    top: '5px',
+                  },
+                  onChange: (newHex) => {
+                    log.info(`Gas price changed to: ${newHex}`)
+                    const txMeta = this.gatherTxMeta()
+                    txMeta.txParams.gasPrice = newHex
+                    this.setState({ txData: txMeta })
+                  },
+                  ref: (hexInput) => { this.inputs.push(hexInput) },
+                }),
+              ]),
+            ]),
+
+            // Max Transaction Fee (calculated)
+            h('.cell.row', [
+              h('.cell.label', 'Max Transaction Fee'),
+              h(EthBalance, { value: txFeeBn.toString(16) }),
+            ]),
+
+            h('.cell.row', {
+              style: {
+                fontFamily: 'Montserrat Regular',
+                background: 'white',
+                padding: '10px 25px',
+              },
+            }, [
+              h('.cell.label', 'Max Total'),
+              h('.cell.value', {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                },
+              }, [
+                h(EthBalance, {
+                  value: maxCost.toString(16),
+                  inline: true,
+                  labelColor: 'black',
+                  fontSize: '16px',
+                }),
+              ]),
+            ]),
+
+            // Data size row:
+            h('.cell.row', {
+              style: {
+                background: '#f7f7f7',
+                paddingBottom: '0px',
+              },
+            }, [
+              h('.cell.label'),
+              h('.cell.value', {
+                style: {
+                  fontFamily: 'Montserrat Light',
+                  fontSize: '11px',
+                },
+              }, `Data included: ${dataLength} bytes`),
+            ]),
+          ]), // End of Table
+
+        ]),
+
+        h('style', `
+          .conf-buttons button {
+            margin-left: 10px;
+            text-transform: uppercase;
+          }
+        `),
+
+        txMeta.simulationFails ?
+          h('.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Transaction Error. Exception thrown in contract code.')
+        : null,
+
+        insufficientBalance ?
+          h('span.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Insufficient balance for transaction')
+        : null,
+
+        // send + cancel
+        h('.flex-row.flex-space-around.conf-buttons', {
           style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            margin: '14px 25px',
           },
-        }, 'Insufficient balance for transaction')
-      : null,
+        }, [
 
-      // send + cancel
-      h('.flex-row.flex-space-around.conf-buttons', {
-        style: {
-          display: 'flex',
-          justifyContent: 'flex-end',
-          margin: '14px 25px',
-        },
-      }, [
 
-        props.insufficientBalance ?
+          insufficientBalance ?
+            h('button', {
+              onClick: props.buyEth,
+            }, 'Buy Ether')
+          : null,
+
           h('button', {
-            onClick: props.buyEth,
-          }, 'Buy Ether')
-        : null,
+            onClick: (event) => {
+              this.resetGasFields()
+              event.preventDefault()
+            },
+          }, 'Reset'),
 
-        h('button', {
-          onClick: () => {
-            this.refs.details.resetGasFields()
-          },
-        }, 'Reset'),
-
-        h('button.confirm.btn-green', {
-          disabled: props.insufficientBalance,
-          onClick: (txData, event) => {
-            if (this.refs.details.verifyGasParams()) {
-              props.sendTransaction(txData, event)
-            } else {
-              this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-            }
-          },
-        }, 'Accept'),
+          // Accept Button
+          h('input.confirm.btn-green', {
+            type: 'submit',
+            value: 'ACCEPT',
+            style: { marginLeft: '10px' },
+            disabled: insufficientBalance || !this.state.valid,
+          }),
 
-        h('button.cancel.btn-red', {
-          onClick: props.cancelTransaction,
-        }, 'Reject'),
+          h('button.cancel.btn-red', {
+            onClick: props.cancelTransaction,
+          }, 'Reject'),
+        ]),
       ]),
     ])
   )
 }
+
+PendingTx.prototype.miniAccountPanelForRecipient = function () {
+  const props = this.props
+  const txData = props.txData
+  const txParams = txData.txParams || {}
+  const isContractDeploy = !('to' in txParams)
+  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
+
+  // If it's not a contract deploy, send to the account
+  if (!isContractDeploy) {
+    return h(MiniAccountPanel, {
+      imageSeed: txParams.to,
+      imageifyIdenticons: imageify,
+      picOrder: 'left',
+    }, [
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+        },
+      }, nameForAddress(txParams.to, props.identities)),
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+        },
+      }, addressSummary(txParams.to, 6, 4, false)),
+    ])
+  } else {
+    return h(MiniAccountPanel, {
+      imageifyIdenticons: imageify,
+      picOrder: 'left',
+    }, [
+
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+        },
+      }, 'New Contract'),
+
+    ])
+  }
+}
+
+PendingTx.prototype.resetGasFields = function () {
+  log.debug(`pending-tx resetGasFields`)
+
+  this.inputs.forEach((hexInput) => {
+    if (hexInput) {
+      hexInput.setValid()
+    }
+  })
+
+  this.setState({
+    txData: null,
+    valid: true,
+  })
+}
+
+// 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 = state.txData || 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'
+}
+
+function forwardCarrat () {
+  return (
+
+    h('img', {
+      src: 'images/forward-carrat.svg',
+      style: {
+        padding: '5px 6px 0px 10px',
+        height: '37px',
+      },
+    })
+
+  )
+}
+

ui/app/conf-tx.js

@@ -7,8 +7,6 @@ const actions = require('./actions')
 const NetworkIndicator = require('./components/network')
 const txHelper = require('../lib/tx-helper')
 const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification')
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
 
 const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
@@ -43,8 +41,8 @@ ConfirmTxScreen.prototype.render = function () {
     unapprovedMsgs, unapprovedPersonalMsgs } = props
 
   var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
-  var index = props.index !== undefined && unconfTxList[index] ? props.index : 0
-  var txData = unconfTxList[index] || {}
+
+  var txData = unconfTxList[props.index] || {}
   var txParams = txData.params || {}
   var isNotification = isPopupOrNotification() === 'notification'
 
@@ -104,9 +102,6 @@ ConfirmTxScreen.prototype.render = function () {
           selectedAddress: props.selectedAddress,
           accounts: props.accounts,
           identities: props.identities,
-          insufficientBalance: this.checkBalanceAgainstTx(txData),
-          // State actions
-          onTxChange: this.onTxChange.bind(this),
           // Actions
           buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
@@ -145,41 +140,19 @@ function currentTxView (opts) {
   }
 }
 
-ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
-  if (!txData.txParams) return false
-  var props = this.props
-  var address = txData.txParams.from || props.selectedAddress
-  var account = props.accounts[address]
-  var balance = account ? account.balance : '0x0'
-  var maxCost = new BN(txData.maxCost, 16)
-
-  var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
-  return maxCost.gt(balanceBn)
-}
-
 ConfirmTxScreen.prototype.buyEth = function (address, event) {
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.buyEthView(address))
 }
 
-// Allows the detail view to update the gas calculations,
-// for manual gas controls.
-ConfirmTxScreen.prototype.onTxChange = function (txData) {
-  log.debug(`conf-tx onTxChange triggered with ${JSON.stringify(txData)}`)
-  this.setState({ txData })
-}
-
-// Must default to any local state txData,
-// to allow manual override of gas calculations.
 ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
-  event.stopPropagation()
-  const state = this.state || {}
-  const txMeta = state.txData
-  this.props.dispatch(actions.updateAndApproveTx(txMeta || txData))
+  this.stopPropagation(event)
+  this.props.dispatch(actions.updateAndApproveTx(txData))
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
-  event.stopPropagation()
+  this.stopPropagation(event)
+  event.preventDefault()
   this.props.dispatch(actions.cancelTx(txData))
 }
 
@@ -187,32 +160,38 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
   log.info('conf-tx.js: signing message')
   var params = msgData.msgParams
   params.metamaskId = msgData.id
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.signMsg(params))
 }
 
+ConfirmTxScreen.prototype.stopPropagation = function (event) {
+  if (event.stopPropagation) {
+    event.stopPropagation()
+  }
+}
+
 ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
   log.info('conf-tx.js: signing personal message')
   var params = msgData.msgParams
   params.metamaskId = msgData.id
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.signPersonalMsg(params))
 }
 
 ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
   log.info('canceling message')
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.cancelMsg(msgData))
 }
 
 ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
   log.info('canceling personal message')
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.cancelPersonalMsg(msgData))
 }
 
 ConfirmTxScreen.prototype.goHome = function (event) {
-  event.stopPropagation()
+  this.stopPropagation(event)
   this.props.dispatch(actions.goHome())
 }
 

ui/app/css/index.css

@@ -32,7 +32,7 @@ input:focus, textarea:focus {
   height: 500px;
 }
 
-button {
+button, input[type="submit"] {
   font-family: 'Montserrat Bold';
   outline: none;
   cursor: pointer;
@@ -46,17 +46,17 @@ button {
   box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
 }
 
-button.btn-green {
+.btn-green, input[type="submit"].btn-green {
   background: rgba(106, 195, 96, 1);
   box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
 }
 
-button.btn-red {
+.btn-red {
   background: rgba(254, 35, 17, 1);
   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
 }
 
-button[disabled] {
+button[disabled], input[type="submit"][disabled] {
   cursor: not-allowed;
   background: rgba(197, 197, 197, 1);
   box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
@@ -66,10 +66,10 @@ button.spaced {
   margin: 2px;
 }
 
-button:not([disabled]):hover {
+button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
   transform: scale(1.1);
 }
-button:not([disabled]):active {
+button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
   transform: scale(0.95);
 }
 

ui/app/keychains/hd/recover-seed/confirmation.js

@@ -18,11 +18,8 @@ function mapStateToProps (state) {
   }
 }
 
-RevealSeedConfirmation.prototype.confirmationPhrase = 'I understand'
-
 RevealSeedConfirmation.prototype.render = function () {
   const props = this.props
-  const state = this.state
 
   return (
 
@@ -64,31 +61,13 @@ RevealSeedConfirmation.prototype.render = function () {
           },
         }),
 
-        h(`h4${state && state.confirmationWrong ? '.error' : ''}`, {
-          style: {
-            marginTop: '12px',
-          },
-        }, `Enter the phrase "${this.confirmationPhrase}" to proceed.`),
-
-        // confirm confirmation
-        h('input.large-input.letter-spacey', {
-          type: 'text',
-          id: 'confirm-box',
-          placeholder: this.confirmationPhrase,
-          onKeyPress: this.checkConfirmation.bind(this),
-          style: {
-            width: 260,
-            marginTop: 16,
-          },
-        }),
-
         h('.flex-row.flex-space-between', {
           style: {
             marginTop: 30,
             width: '50%',
           },
         }, [
-// cancel
+          // cancel
           h('button.primary', {
             onClick: this.goHome.bind(this),
           }, 'CANCEL'),
@@ -134,15 +113,6 @@ RevealSeedConfirmation.prototype.checkConfirmation = function (event) {
 }
 
 RevealSeedConfirmation.prototype.revealSeedWords = function () {
-  this.setState({ confirmationWrong: false })
-
-  const confirmBox = document.getElementById('confirm-box')
-  const confirmation = confirmBox.value
-  if (confirmation !== this.confirmationPhrase) {
-    confirmBox.value = ''
-    return this.setState({ confirmationWrong: true })
-  }
-
   var password = document.getElementById('password-box').value
   this.props.dispatch(actions.requestRevealSeed(password))
 }

ui/app/reducers.js

@@ -42,6 +42,10 @@ function rootReducer (state, action) {
 }
 
 window.logState = function () {
-  var stateString = JSON.stringify(window.METAMASK_CACHED_LOG_STATE, null, 2)
+  var stateString = JSON.stringify(window.METAMASK_CACHED_LOG_STATE, removeSeedWords, 2)
   console.log(stateString)
 }
+
+function removeSeedWords (key, value) {
+  return key === 'seedWords' ? undefined : value
+}

ui/app/reducers/app.js

@@ -592,8 +592,9 @@ function hasPendingTxs (state) {
 function indexForPending (state, txId) {
   var unapprovedTxs = state.metamask.unapprovedTxs
   var unapprovedMsgs = state.metamask.unapprovedMsgs
+  var unapprovedPersonalMsgs = state.metamask.unapprovedPersonalMsgs
   var network = state.metamask.network
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
   let idx
   unconfTxList.forEach((tx, i) => {
     if (tx.id === txId) {

ui/app/reducers/metamask.js

@@ -94,6 +94,7 @@ function reduceMetamask (state, action) {
       return extend(metamaskState, {
         isUnlocked: true,
         isInitialized: false,
+        seedWords: action.value,
       })
 
     case actions.CLEAR_SEED_WORD_CACHE:

ui/lib/account-link.js

@@ -9,7 +9,7 @@ module.exports = function (address, network) {
       link = `http://morden.etherscan.io/address/${address}`
       break
     case 3: // ropsten test net
-      link = `http://testnet.etherscan.io/address/${address}`
+      link = `http://ropsten.etherscan.io/address/${address}`
       break
     case 42: // kovan test net
       link = `http://kovan.etherscan.io/address/${address}`

ui/lib/explorer-link.js

@@ -6,7 +6,7 @@ module.exports = function (hash, network) {
       prefix = ''
       break
     case 3: // ropsten test net
-      prefix = 'testnet.'
+      prefix = 'ropsten.'
       break
     case 42: // kovan test net
       prefix = 'kovan.'

ui/lib/tx-helper.js

@@ -4,7 +4,7 @@ module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network)
   log.debug('tx-helper called with params:')
   log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, network })
 
-  const txValues = network ? valuesFor(unapprovedTxs).filter(tx => tx.txParams.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
+  const txValues = network ? valuesFor(unapprovedTxs).filter(txMeta => txMeta.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
   log.debug(`tx helper found ${txValues.length} unapproved txs`)
   const msgValues = valuesFor(unapprovedMsgs)
   log.debug(`tx helper found ${msgValues.length} unsigned messages`)
@@ -13,5 +13,5 @@ module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network)
   log.debug(`tx helper found ${personalValues.length} unsigned personal messages`)
   allValues = allValues.concat(personalValues)
 
-  return allValues.sort(tx => tx.time)
+  return allValues.sort(txMeta => txMeta.time)
 }