Fix merge conflicts. Modify send workflow

6 files changed, 343 insertions, 2 deletions

diff --git a/test/e2e/metamask.spec.js b/test/e2e/metamask.spec.js
index d2ffa041e..e0ff2a57e 100644
--- a/test/e2e/metamask.spec.js
+++ b/test/e2e/metamask.spec.js
@@ -38,6 +38,8 @@ describe('Metamask popup page', function () {
       const tabs = await driver.getAllWindowHandles()
       await driver.switchTo().window(tabs[0])
       await delay(300)
+      await setProviderType('localhost')
+      await delay(300)
     })
 
     it('should match title', async () => {
@@ -124,6 +126,10 @@ describe('Metamask popup page', function () {
     })
   })
 
+  async function setProviderType(type) {
+    await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
+  }
+
   async function verboseReportOnFailure(test) {
     const artifactDir = `./test-artifacts/${test.title}`
     const filepathBase = `${artifactDir}/test-failure`
diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
new file mode 100644
index 000000000..d0056eb94
--- /dev/null
+++ b/test/integration/lib/tx-list-items.js
@@ -0,0 +1,61 @@
+const reactTriggerChange = require('../../lib/react-trigger-change')
+const {
+  timeout,
+  queryAsync,
+  findAsync,
+} = require('../../lib/util')
+
+QUnit.module('tx list items')
+
+QUnit.test('renders list items successfully', (assert) => {
+  const done = assert.async()
+  runTxListItemsTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+async function runTxListItemsTest(assert, done) {
+  console.log('*** start runTxListItemsTest')
+  const selectState = await queryAsync($, 'select')
+  selectState.val('tx list items')
+  reactTriggerChange(selectState[0])
+
+  const metamaskLogo = await queryAsync($, '.left-menu-wrapper')
+  assert.ok(metamaskLogo[0], 'metamask logo present')
+  metamaskLogo[0].click()
+
+  const txListItems = await queryAsync($, '.tx-list-item')
+  assert.equal(txListItems.length, 8, 'all tx list items are rendered')
+
+  const unapprovedTx = txListItems[0]
+  assert.equal($(unapprovedTx).hasClass('tx-list-pending-item-container'), true, 'unapprovedTx has the correct class')
+
+  const retryTx = txListItems[1]
+  const retryTxLink = await findAsync($(retryTx), '.tx-list-item-retry-link')
+  assert.equal(retryTxLink[0].textContent, 'Increase the gas price on your transaction', 'retryTx has expected link')
+
+  const approvedTx = txListItems[2]
+  const approvedTxRenderedStatus = await findAsync($(approvedTx), '.tx-list-status')
+  assert.equal(approvedTxRenderedStatus[0].textContent, 'Approved', 'approvedTx has correct label')
+
+  const unapprovedMsg = txListItems[3]
+  const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.tx-list-account')
+  assert.equal(unapprovedMsgDescription[0].textContent, 'Signature Request', 'unapprovedMsg has correct description')
+
+  const failedTx = txListItems[4]
+  const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
+  assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
+  
+  const shapeShiftTx = txListItems[5]
+  const shapeShiftTxStatus = await findAsync($(shapeShiftTx), '.flex-column div:eq(1)')
+  assert.equal(shapeShiftTxStatus[0].textContent, 'No deposits received', 'shapeShiftTx has correct status')
+
+  const confirmedTokenTx = txListItems[6]
+  const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.tx-list-account')
+  assert.equal(confirmedTokenTxAddress[0].textContent, '0xe7884118...81a9', 'confirmedTokenTx has correct address')
+
+  const rejectedTx = txListItems[7]
+  const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.tx-list-status')
+  assert.equal(rejectedTxRenderedStatus[0].textContent, 'Rejected', 'rejectedTx has correct label')
+}
diff --git a/test/screens/func.js b/test/screens/func.js
new file mode 100644
index 000000000..733225565
--- /dev/null
+++ b/test/screens/func.js
@@ -0,0 +1,18 @@
+require('chromedriver')
+const webdriver = require('selenium-webdriver')
+
+exports.delay = function delay (time) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+
+exports.buildWebDriver = function buildWebDriver (extPath) {
+  return new webdriver.Builder()
+    .withCapabilities({
+      chromeOptions: {
+        args: [`load-extension=${extPath}`],
+      },
+    })
+    .forBrowser('chrome')
+    .build()
+}
diff --git a/test/screens/new-ui.js b/test/screens/new-ui.js
new file mode 100644
index 000000000..91b3a9633
--- /dev/null
+++ b/test/screens/new-ui.js
@@ -0,0 +1,230 @@
+const path = require('path')
+const fs = require('fs')
+const pify = require('pify')
+const mkdirp = require('mkdirp')
+const rimraf = require('rimraf')
+const webdriver = require('selenium-webdriver')
+const endOfStream = require('end-of-stream')
+const GIFEncoder = require('gifencoder')
+const pngFileStream = require('png-file-stream')
+const sizeOfPng = require('image-size/lib/types/png')
+const By = webdriver.By
+const { delay, buildWebDriver } = require('./func')
+const localesIndex = require('../../app/_locales/index.json')
+
+let driver
+
+captureAllScreens().catch((err) => {
+  try {
+    console.error(err)
+    verboseReportOnFailure()
+    driver.quit()
+  } catch (err) {
+    console.error(err)
+  }
+  process.exit(1)
+})
+
+async function captureAllScreens() {
+  let screenshotCount = 0
+
+  // common names
+  let button
+  let tabs
+  let element
+
+  await cleanScreenShotDir()
+
+  // setup selenium and install extension
+  const extPath = path.resolve('dist/chrome')
+  driver = buildWebDriver(extPath)
+  await driver.get('chrome://extensions-frame')
+  const elems = await driver.findElements(By.css('.extension-list-item-wrapper'))
+  const extensionId = await elems[1].getAttribute('id')
+  await driver.get(`chrome-extension://${extensionId}/home.html`)
+  await delay(500)
+  tabs = await driver.getAllWindowHandles()
+  await driver.switchTo().window(tabs[0])
+  await delay(1000)
+  await setProviderType('localhost')
+  await delay(300)
+
+  // click try new ui
+  await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-row.flex-center.flex-grow > p')).click()
+  await delay(300)
+
+  // close metamask homepage and extra home.html
+  tabs = await driver.getAllWindowHandles()
+  // metamask homepage is opened on prod, not dev
+  if (tabs.length > 2) {
+    await driver.switchTo().window(tabs[2])
+    driver.close()
+  }
+  await driver.switchTo().window(tabs[1])
+  driver.close()
+  await driver.switchTo().window(tabs[0])
+  await delay(300)
+  await captureLanguageScreenShots('welcome-new-ui')
+
+  // setup account
+  await delay(1000)
+  await driver.findElement(By.css('body')).click()
+  await delay(300)
+  await captureLanguageScreenShots('welcome')
+
+  await driver.findElement(By.css('button')).click()
+  await captureLanguageScreenShots('create password')
+
+  const passwordBox = await driver.findElement(By.css('input[type=password]:nth-of-type(1)'))
+  const passwordBoxConfirm = await driver.findElement(By.css('input[type=password]:nth-of-type(2)'))
+  passwordBox.sendKeys('123456789')
+  passwordBoxConfirm.sendKeys('123456789')
+  await delay(500)
+  await captureLanguageScreenShots('choose-password-filled')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(500)
+  await captureLanguageScreenShots('unique account image')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(500)
+  await captureLanguageScreenShots('privacy note')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureLanguageScreenShots('terms')
+
+  await delay(300)
+  element = driver.findElement(By.linkText('Attributions'))
+  await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+  await delay(300)
+  await captureLanguageScreenShots('terms-scrolled')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureLanguageScreenShots('secret backup phrase')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureLanguageScreenShots('secret backup phrase')
+
+  await driver.findElement(By.css('.backup-phrase__reveal-button')).click()
+  await delay(300)
+  await captureLanguageScreenShots('secret backup phrase - reveal')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureLanguageScreenShots('confirm secret backup phrase')
+
+  // finish up
+  console.log('building gif...')
+  await generateGif()
+  await driver.quit()
+  return
+
+  //
+  // await button.click()
+  // await delay(700)
+  // this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
+  // await captureScreenShot('seed phrase')
+  //
+  // const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
+  // await continueAfterSeedPhrase.click()
+  // await delay(300)
+  // await captureScreenShot('main screen')
+  //
+  // await driver.findElement(By.css('.sandwich-expando')).click()
+  // await delay(500)
+  // await captureScreenShot('menu')
+
+  // await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click()
+  // await captureScreenShot('main screen')
+  // it('should accept account password after lock', async () => {
+  //   await delay(500)
+  //   await driver.findElement(By.id('password-box')).sendKeys('123456789')
+  //   await driver.findElement(By.css('button')).click()
+  //   await delay(500)
+  // })
+  //
+  // it('should show QR code option', async () => {
+  //   await delay(300)
+  //   await driver.findElement(By.css('.fa-ellipsis-h')).click()
+  //   await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
+  //   await delay(300)
+  // })
+  //
+  // it('should show the account address', async () => {
+  //   this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+  //   await driver.findElement(By.css('.fa-arrow-left')).click()
+  //   await delay(500)
+  // })
+
+  async function captureLanguageScreenShots(label) {
+    const nonEnglishLocales = localesIndex.filter(localeMeta => localeMeta.code !== 'en')
+    // take english shot
+    await captureScreenShot(`${label} (en)`)
+    for (let localeMeta of nonEnglishLocales) {
+      // set locale and take shot
+      await setLocale(localeMeta.code)
+      await delay(300)
+      await captureScreenShot(`${label} (${localeMeta.code})`)
+    }
+    // return locale to english
+    await setLocale('en')
+    await delay(300)
+  }
+
+  async function setLocale(code) {
+    await driver.executeScript('window.metamask.updateCurrentLocale(arguments[0])', code)
+  }
+
+  async function setProviderType(type) {
+    await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
+  }
+
+  // cleanup
+  await driver.quit()
+
+  async function cleanScreenShotDir() {
+    await pify(rimraf)(`./test-artifacts/screens/`)
+  }
+
+  async function captureScreenShot(label) {
+    const shotIndex = screenshotCount.toString().padStart(4, '0')
+    screenshotCount++
+    const artifactDir = `./test-artifacts/screens/`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${artifactDir}/${shotIndex} - ${label}.png`, screenshot, { encoding: 'base64' })
+  }
+
+  async function generateGif(){
+    // calculate screenshot size
+    const screenshot = await driver.takeScreenshot()
+    const pngBuffer = Buffer.from(screenshot, 'base64')
+    const size = sizeOfPng.calculate(pngBuffer)
+
+    // read only the english pngs into gif
+    const encoder = new GIFEncoder(size.width, size.height)
+    const stream = pngFileStream('./test-artifacts/screens/* (en).png')
+      .pipe(encoder.createWriteStream({ repeat: 0, delay: 1000, quality: 10 }))
+      .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough (en).gif'))
+
+    // wait for end
+    await pify(endOfStream)(stream)
+  }
+
+}
+
+async function verboseReportOnFailure(test) {
+  const artifactDir = `./test-artifacts/${test.title}`
+  const filepathBase = `${artifactDir}/test-failure`
+  await pify(mkdirp)(artifactDir)
+  // capture screenshot
+  const screenshot = await driver.takeScreenshot()
+  await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
+  // capture dom source
+  const htmlSource = await driver.getPageSource()
+  await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
+}
diff --git a/test/unit/tx-controller-test.js b/test/unit/tx-controller-test.js
index 712097fce..6bd010e7a 100644
--- a/test/unit/tx-controller-test.js
+++ b/test/unit/tx-controller-test.js
@@ -162,7 +162,7 @@ describe('Transaction Controller', function () {
   describe('#addUnapprovedTransaction', function () {
 
     it('should add an unapproved transaction and return a valid txMeta', function (done) {
-      txController.addUnapprovedTransaction({})
+      txController.addUnapprovedTransaction({ from: '0x1678a085c290ebd122dc42cba69373b5953b831d' })
       .then((txMeta) => {
         assert(('id' in txMeta), 'should have a id')
         assert(('time' in txMeta), 'should have a time stamp')
@@ -182,7 +182,7 @@ describe('Transaction Controller', function () {
         assert(txMetaFromEmit, 'txMeta is falsey')
         done()
       })
-      txController.addUnapprovedTransaction({})
+      txController.addUnapprovedTransaction({ from: '0x1678a085c290ebd122dc42cba69373b5953b831d' })
       .catch(done)
     })
 
@@ -213,6 +213,7 @@ describe('Transaction Controller', function () {
   describe('#validateTxParams', function () {
     it('does not throw for positive values', function (done) {
       var sample = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
         value: '0x01',
       }
       txController.txGasUtil.validateTxParams(sample).then(() => {
@@ -222,6 +223,7 @@ describe('Transaction Controller', function () {
 
     it('returns error for negative values', function (done) {
       var sample = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
         value: '-0x01',
       }
       txController.txGasUtil.validateTxParams(sample)
diff --git a/test/unit/tx-gas-util-test.js b/test/unit/tx-gas-util-test.js
index d9a12d1c3..15d412c72 100644
--- a/test/unit/tx-gas-util-test.js
+++ b/test/unit/tx-gas-util-test.js
@@ -29,4 +29,28 @@ describe('Tx Gas Util', function () {
     }
     assert.throws(() => { txGasUtil.validateRecipient(zeroRecipientTxParams) }, Error, 'Invalid recipient address')
   })
+
+  it('should error when from is not a hex string', function () {
+
+    // where from is undefined
+    const txParams = {}
+    assert.throws(() => { txGasUtil.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+    // where from is array
+    txParams.from = []
+    assert.throws(() => { txGasUtil.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+    // where from is a object
+    txParams.from = {}
+    assert.throws(() => { txGasUtil.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+    // where from is a invalid address
+    txParams.from = 'im going to fail'
+    assert.throws(() => { txGasUtil.validateFrom(txParams) }, Error, `Invalid from address`)
+
+    // should run
+    txParams.from ='0x1678a085c290ebd122dc42cba69373b5953b831d'
+    txGasUtil.validateFrom(txParams)
+    })
+
 })