Merge branch 'master' into mascara-deploy

7 files changed, 721 insertions, 112 deletions

diff --git a/test/integration/helpers.js b/test/integration/helpers.js
deleted file mode 100644
index eede103b4..000000000
--- a/test/integration/helpers.js
+++ /dev/null
@@ -1,7 +0,0 @@
-function wait(time) {
-  return new Promise(function(resolve, reject) {
-    setTimeout(function() {
-      resolve()
-    }, time * 3 || 1500)
-  })
-}
diff --git a/test/integration/index.js b/test/integration/index.js
index ff6d1baf8..144303dbb 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -1,21 +1,26 @@
-var fs = require('fs')
-var path = require('path')
-var browserify = require('browserify');
-var tests = fs.readdirSync(path.join(__dirname, 'lib'))
-var bundlePath = path.join(__dirname, 'bundle.js')
+const fs = require('fs')
+const path = require('path')
+const pump = require('pump')
+const browserify = require('browserify')
+const tests = fs.readdirSync(path.join(__dirname, 'lib'))
+const bundlePath = path.join(__dirname, 'bundle.js')
 
-var b = browserify();
+const b = browserify()
 
-// Remove old bundle
-try {
-  fs.unlinkSync(bundlePath)
-} catch (e) {}
+const writeStream = fs.createWriteStream(bundlePath)
 
-var writeStream = fs.createWriteStream(bundlePath)
-
-tests.forEach(function(fileName) {
-  b.add(path.join(__dirname, 'lib', fileName))
+tests.forEach(function (fileName) {
+  const filePath = path.join(__dirname, 'lib', fileName)
+  console.log(`bundling test "${filePath}"`)
+  b.add(filePath)
 })
 
-b.bundle().pipe(writeStream);
-
+pump(
+  b.bundle(),
+  writeStream,
+  (err) => {
+    if (err) throw err
+    console.log(`Integration test build completed: "${bundlePath}"`)
+    process.exit(0)
+  }
+)
\ No newline at end of file
diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
new file mode 100644
index 000000000..dd4251cc4
--- /dev/null
+++ b/test/integration/lib/add-token.js
@@ -0,0 +1,153 @@
+const reactTriggerChange = require('react-trigger-change')
+
+QUnit.module('Add token flow')
+
+QUnit.test('successful add token flow', (assert) => {
+  const done = assert.async()
+  runAddTokenFlowTest(assert)
+    .then(done)
+    .catch(err => {
+      assert.notOk(err, `Error was thrown: ${err.stack}`)
+      done()
+    })
+})
+
+async function runAddTokenFlowTest (assert, done) {
+  const selectState = $('select')
+  selectState.val('add token')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  // Check that no tokens have been added
+  assert.ok($('.token-list-item').length === 0, 'no tokens added')
+
+  // Go to Add Token screen
+  let addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  // Verify Add Token screen
+  let addTokenWrapper = $('.add-token__wrapper')
+  assert.ok(addTokenWrapper[0], 'add token wrapper renders')
+
+  let addTokenTitle = $('.add-token__title')
+  assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
+
+  // Cancel Add Token
+  const cancelAddTokenButton = $('button.btn-cancel.add-token__button')
+  assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
+  cancelAddTokenButton.click()
+
+  await timeout(1000)
+
+  assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
+
+  // Return to Add Token Screen
+  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  // Verify Add Token Screen
+  addTokenWrapper = $('.add-token__wrapper')
+  addTokenTitle = $('.add-token__title')
+  assert.ok(addTokenWrapper[0], 'add token wrapper renders')
+  assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
+
+  // Search for token
+  const searchInput = $('input.add-token__input')
+  searchInput.val('a')
+  reactTriggerChange(searchInput[0])
+
+  await timeout()
+
+  // Click token to add
+  const tokenWrapper = $('div.add-token__token-wrapper')
+  assert.ok(tokenWrapper[0], 'token found')
+  const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
+  const tokenImageUrl = tokenImageProp.slice(5, -2)
+  tokenWrapper[0].click()
+
+  await timeout()
+
+  // Click Next button
+  let nextButton = $('button.btn-clear.add-token__button')
+  assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
+  nextButton[0].click()
+
+  await timeout()
+
+  // Confirm Add token
+  assert.equal(
+    $('.add-token__description')[0].textContent,
+    'Would you like to add these tokens?',
+    'confirm add token rendered'
+  )
+  assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
+  $('button.btn-clear.add-token__button')[0].click()
+
+  await timeout(2000)
+
+  // Verify added token image
+  let heroBalance = $('.hero-balance')
+  assert.ok(heroBalance, 'rendered hero balance')
+  assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
+
+  // Return to Add Token Screen
+  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  const addCustom = $('.add-token__add-custom')
+  assert.ok(addCustom[0], 'add custom token button present')
+  addCustom[0].click()
+
+  await timeout()
+
+  // Input token contract address
+  const customInput = $('input.add-token__add-custom-input')
+  customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
+  reactTriggerChange(customInput[0])
+
+  await timeout(1000)
+
+  // Click Next button
+  nextButton = $('button.btn-clear.add-token__button')
+  assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
+  nextButton[0].click()
+
+  await timeout(1000)
+
+  // Verify symbol length error since contract address won't return symbol
+  const errorMessage = $('.add-token__add-custom-error-message')
+  assert.ok(errorMessage[0], 'error rendered')
+  $('button.btn-cancel.add-token__button')[0].click()
+
+  await timeout(2000)
+
+  // // Confirm Add token
+  // assert.equal(
+  //   $('.add-token__description')[0].textContent,
+  //   'Would you like to add these tokens?',
+  //   'confirm add token rendered'
+  // )
+  // assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
+  // $('button.btn-clear.add-token__button')[0].click()
+
+  // // Verify added token image
+  // heroBalance = $('.hero-balance')
+  // assert.ok(heroBalance, 'rendered hero balance')
+  // assert.ok(heroBalance.find('.identicon')[0], 'token added')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
new file mode 100644
index 000000000..e49424c37
--- /dev/null
+++ b/test/integration/lib/confirm-sig-requests.js
@@ -0,0 +1,67 @@
+const reactTriggerChange = require('react-trigger-change')
+
+const PASSWORD = 'password123'
+
+QUnit.module('confirm sig requests')
+
+QUnit.test('successful confirmation of sig requests', (assert) => {
+  const done = assert.async()
+  runConfirmSigRequestsTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+async function runConfirmSigRequestsTest(assert, done) {
+  let selectState = $('select')
+  selectState.val('confirm sig requests')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  let confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  let confirmSigRowValue = $('.request-signature__row-value')
+  assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
+
+  let confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  let confirmSigMessage = $('.request-signature__notice')
+  assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
+
+  confirmSigRowValue = $('.request-signature__row-value')
+  assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
+
+  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  confirmSigRowValue = $('.request-signature__row-value')
+  assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
+  assert.equal(confirmSigRowValue[1].textContent, '1337')
+
+  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  const txView = $('.tx-view')
+  assert.ok(txView[0], 'Should return to the account details screen after confirming')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
\ No newline at end of file
diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js
index dbb88a3da..764eae47c 100644
--- a/test/integration/lib/first-time.js
+++ b/test/integration/lib/first-time.js
@@ -1,120 +1,138 @@
+const reactTriggerChange = require('react-trigger-change')
 const PASSWORD = 'password123'
+const runMascaraFirstTimeTest = require('./mascara-first-time')
 
 QUnit.module('first time usage')
 
-QUnit.test('render init screen', function (assert) {
-  var done = assert.async()
-  let app
-
-  wait().then(function() {
-    app = $('iframe').contents().find('#app-content .mock-app-root')
-
-    const recurseNotices = function () {
-      let button = app.find('button')
-      if (button.html() === 'Continue') {
-        let termsPage = app.find('.markdown')[0]
-        termsPage.scrollTop = termsPage.scrollHeight
-        return wait().then(() => {
-          button.click()
-          return wait()
-        }).then(() => {
-          return recurseNotices()
-        })
-      } else {
-        return wait()
-      }
+QUnit.test('render init screen', (assert) => {
+  const done = assert.async()
+  runFirstTimeUsageTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+async function runFirstTimeUsageTest(assert, done) {
+  if (window.METAMASK_PLATFORM_TYPE === 'mascara') {
+    return runMascaraFirstTimeTest(assert, done)
+  }
+
+  const selectState = $('select')
+  selectState.val('first time')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+  const app = $('#app-content')
+
+  // recurse notices
+  while (true) {
+    const button = app.find('button')
+    if (button.html() === 'Accept') {
+      // still notices to accept
+      const termsPage = app.find('.markdown')[0]
+      termsPage.scrollTop = termsPage.scrollHeight
+      await timeout()
+      console.log('Clearing notice')
+      button.click()
+      await timeout()
+    } else {
+      // exit loop
+      console.log('No more notices...')
+      break
     }
-    return recurseNotices()
-  }).then(function() {
-    // Scroll through terms
-    var title = app.find('h1').text()
-    assert.equal(title, 'MetaMask', 'title screen')
+  }
 
-    // enter password
-    var pwBox = app.find('#password-box')[0]
-    var confBox = app.find('#password-box-confirm')[0]
-    pwBox.value = PASSWORD
-    confBox.value = PASSWORD
+  await timeout()
 
-    return wait()
-  }).then(function() {
+  // Scroll through terms
+  const title = app.find('h1')[0]
+  assert.equal(title.textContent, 'MetaMask', 'title screen')
 
-    // create vault
-    var createButton = app.find('button.primary')[0]
-    createButton.click()
+  // enter password
+  const pwBox = app.find('#password-box')[0]
+  const confBox = app.find('#password-box-confirm')[0]
+  pwBox.value = PASSWORD
+  confBox.value = PASSWORD
 
-    return wait(1500)
-  }).then(function() {
+  await timeout()
 
-    var created = app.find('h3')[0]
-    assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
+  // create vault
+  const createButton = app.find('button.primary')[0]
+  createButton.click()
 
-    // Agree button
-    var button = app.find('button')[0]
-    assert.ok(button, 'button present')
-    button.click()
+  await timeout(3000)
 
-    return wait(1000)
-  }).then(function() {
+  const created = app.find('h3')[0]
+  assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
 
-    var detail = app.find('.account-detail-section')[0]
-    assert.ok(detail, 'Account detail section loaded.')
+  // Agree button
+  const button = app.find('button')[0]
+  assert.ok(button, 'button present')
+  button.click()
 
-    var sandwich = app.find('.sandwich-expando')[0]
-    sandwich.click()
+  await timeout(1000)
 
-    return wait()
-  }).then(function() {
+  const detail = app.find('.account-detail-section')[0]
+  assert.ok(detail, 'Account detail section loaded.')
 
-    var sandwich = app.find('.menu-droppo')[0]
-    var children = sandwich.children
-    var lock = children[children.length - 2]
-    assert.ok(lock, 'Lock menu item found')
-    lock.click()
+  const sandwich = app.find('.sandwich-expando')[0]
+  sandwich.click()
 
-    return wait(1000)
-  }).then(function() {
+  await timeout()
 
-    var pwBox = app.find('#password-box')[0]
-    pwBox.value = PASSWORD
+  const menu = app.find('.menu-droppo')[0]
+  const children = menu.children
+  const logout = children[2]
+  assert.ok(logout, 'Lock menu item found')
+  logout.click()
 
-    var createButton = app.find('button.primary')[0]
-    createButton.click()
+  await timeout(1000)
 
-    return wait(1000)
-  }).then(function() {
+  const pwBox2 = app.find('#password-box')[0]
+  pwBox2.value = PASSWORD
 
-    var detail = app.find('.account-detail-section')[0]
-    assert.ok(detail, 'Account detail section loaded again.')
+  const createButton2 = app.find('button.primary')[0]
+  createButton2.click()
 
-    return wait()
-  }).then(function (){
+  await timeout(1000)
 
-    var qrButton = app.find('.fa.fa-qrcode')[0]
-    qrButton.click()
+  const detail2 = app.find('.account-detail-section')[0]
+  assert.ok(detail2, 'Account detail section loaded again.')
 
-    return wait(1000)
-  }).then(function (){
+  await timeout()
 
-    var qrHeader = app.find('.qr-header')[0]
-    var qrContainer = app.find('#qr-container')[0]
-    assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
-    assert.ok(qrContainer, 'QR Container found')
+  // open account settings dropdown
+  const qrButton = app.find('.fa.fa-ellipsis-h')[0]
+  qrButton.click()
 
-    return wait()
-  }).then(function (){
+  await timeout(1000)
 
-    var networkMenu = app.find('.network-indicator')[0]
-    networkMenu.click()
+  // qr code item
+  const qrButton2 = app.find('.dropdown-menu-item')[1]
+  qrButton2.click()
 
-    return wait()
-  }).then(function (){
+  await timeout(1000)
 
-    var networkMenu = app.find('.network-indicator')[0]
-    var children = networkMenu.children
-    children.length[3]
-    assert.ok(children, 'All network options present')
+  const qrHeader = app.find('.qr-header')[0]
+  const qrContainer = app.find('#qr-container')[0]
+  assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
+  assert.ok(qrContainer, 'QR Container found')
 
-    done()
+  await timeout()
+
+  const networkMenu = app.find('.network-indicator')[0]
+  networkMenu.click()
+
+  await timeout()
+
+  const networkMenu2 = app.find('.network-indicator')[0]
+  const children2 = networkMenu2.children
+  children2.length[3]
+  assert.ok(children2, 'All network options present')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
   })
-})
+}
\ No newline at end of file
diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js
new file mode 100644
index 000000000..515c7f383
--- /dev/null
+++ b/test/integration/lib/mascara-first-time.js
@@ -0,0 +1,148 @@
+const PASSWORD = 'password123'
+const reactTriggerChange = require('react-trigger-change')
+
+async function runFirstTimeUsageTest (assert, done) {
+  await timeout(4000)
+
+  const app = $('#app-content')
+
+  await skipNotices(app)
+
+  await timeout()
+
+  // Scroll through terms
+  const title = app.find('.create-password__title').text()
+  assert.equal(title, 'Create Password', 'create password screen')
+
+  // enter password
+  const pwBox = app.find('.first-time-flow__input')[0]
+  const confBox = app.find('.first-time-flow__input')[1]
+  pwBox.value = PASSWORD
+  confBox.value = PASSWORD
+  reactTriggerChange(pwBox)
+  reactTriggerChange(confBox)
+
+
+  await timeout()
+
+  // Create Password
+  const createButton = app.find('button.first-time-flow__button')[0]
+  createButton.click()
+
+  await timeout(3000)
+
+  const created = app.find('.unique-image__title')[0]
+  assert.equal(created.textContent, 'Your unique account image', 'unique image screen')
+
+  // Agree button
+  let button = app.find('button')[0]
+  assert.ok(button, 'button present')
+  button.click()
+
+  await timeout(1000)
+
+  await skipNotices(app)
+
+  // secret backup phrase
+  const seedTitle = app.find('.backup-phrase__title')[0]
+  assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen')
+  app.find('.backup-phrase__reveal-button').click()
+
+  await timeout(1000)
+  const seedPhrase = app.find('.backup-phrase__secret-words').text().split(' ')
+  app.find('.first-time-flow__button').click()
+
+  const selectPhrase = text => {
+    const option = $('.backup-phrase__confirm-seed-option')
+      .filter((i, d) => d.textContent === text)[0]
+
+    $(option).click()
+  }
+
+  await timeout(1000)
+
+  seedPhrase.forEach(sp => selectPhrase(sp))
+  app.find('.first-time-flow__button').click()
+  await timeout(1000)
+
+  // Deposit Ether Screen
+  const buyEthTitle = app.find('.buy-ether__title')[0]
+  assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
+  app.find('.buy-ether__do-it-later').click()
+  await timeout(1000)
+
+  const menu = app.find('.account-menu__icon')[0]
+  menu.click()
+
+  await timeout()
+
+  const lock = app.find('.account-menu__logout-button')[0]
+  assert.ok(lock, 'Lock menu item found')
+  lock.click()
+
+  await timeout(1000)
+
+  const pwBox2 = app.find('#password-box')[0]
+  pwBox2.value = PASSWORD
+
+  const createButton2 = app.find('button.primary')[0]
+  createButton2.click()
+
+  await timeout(1000)
+
+  const detail2 = app.find('.wallet-view')[0]
+  assert.ok(detail2, 'Account detail section loaded again.')
+
+  await timeout()
+
+  // open account settings dropdown
+  const qrButton = app.find('.wallet-view__details-button')[0]
+  qrButton.click()
+
+  await timeout(1000)
+
+  const qrHeader = app.find('.editable-label__value')[0]
+  const qrContainer = app.find('.qr-wrapper')[0]
+  assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
+  assert.ok(qrContainer, 'QR Container found')
+
+  await timeout()
+
+  const networkMenu = app.find('.network-component')[0]
+  networkMenu.click()
+
+  await timeout()
+
+  const networkMenu2 = app.find('.network-indicator')[0]
+  const children2 = networkMenu2.children
+  children2.length[3]
+  assert.ok(children2, 'All network options present')
+}
+
+module.exports = runFirstTimeUsageTest
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
+
+async function skipNotices (app) {
+  while (true) {
+    const button = app.find('button')
+    if (button && button.html() === 'Accept') {
+      // still notices to accept
+      const termsPage = app.find('.markdown')[0]
+      if (!termsPage) {
+        break
+      }
+      termsPage.scrollTop = termsPage.scrollHeight
+      await timeout()
+      button.click()
+      await timeout()
+    } else {
+      console.log('No more notices...')
+      break
+    }
+  }
+}
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
new file mode 100644
index 000000000..3456f2367
--- /dev/null
+++ b/test/integration/lib/send-new-ui.js
@@ -0,0 +1,225 @@
+const reactTriggerChange = require('react-trigger-change')
+
+const PASSWORD = 'password123'
+
+QUnit.module('new ui send flow')
+
+QUnit.test('successful send flow', (assert) => {
+  const done = assert.async()
+  runSendFlowTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+global.ethQuery = {
+  sendTransaction: () => {},
+}
+
+async function runSendFlowTest(assert, done) {
+  console.log('*** start runSendFlowTest')
+  const selectState = $('select')
+  selectState.val('send new ui')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  const sendScreenButton = $('button.btn-clear.hero-balance-button')
+  assert.ok(sendScreenButton[1], 'send screen button present')
+  sendScreenButton[1].click()
+
+  await timeout(1000)
+
+  const sendTitle = $('.page-container__title')
+  assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
+
+  const sendCopy = $('.page-container__subtitle')
+  assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
+
+  const sendFromField = $('.send-v2__form-field')
+  assert.ok(sendFromField[0], 'send screen has a from field')
+
+  let sendFromFieldItemAddress = $('.account-list-item__account-name')
+  assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name')
+
+  const sendFromFieldItem = $('.account-list-item')
+  sendFromFieldItem[0].click()
+
+  await timeout()
+
+  const sendFromDropdownList = $('.send-v2__from-dropdown__list')
+  assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts')
+  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromDropdownList.children()[1]`, sendFromDropdownList.children()[1]);
+  sendFromDropdownList.children()[1].click()
+
+  await timeout()
+
+  sendFromFieldItemAddress = $('.account-list-item__account-name')
+  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromFieldItemAddress[0]`, sendFromFieldItemAddress[0]);
+  assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name')
+
+  let sendToFieldInput = $('.send-v2__to-autocomplete__input')
+  sendToFieldInput[0].focus()
+
+  await timeout()
+
+  const sendToDropdownList = $('.send-v2__from-dropdown__list')
+  assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts')
+
+  sendToDropdownList.children()[2].click()
+
+  await timeout()
+
+  const sendToAccountAddress = sendToFieldInput.val()
+  assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address')
+
+  const sendAmountField = $('.send-v2__form-row:eq(2)')
+  sendAmountField.find('.currency-display')[0].click()
+
+  await timeout()
+
+  const sendAmountFieldInput = sendAmountField.find('input:text')
+  sendAmountFieldInput.val('5.1')
+  reactTriggerChange(sendAmountField.find('input')[0])
+
+  await timeout()
+
+  let errorMessage = $('.send-v2__error')
+  assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')
+
+  sendAmountFieldInput.val('2.0')
+  reactTriggerChange(sendAmountFieldInput[0])
+
+  await timeout()
+  errorMessage = $('.send-v2__error')
+  assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
+
+  const sendGasField = $('.send-v2__gas-fee-display')
+  assert.equal(
+    sendGasField.find('.currency-display__input-wrapper > input').val(),
+    '0.000198',
+    'send gas field should show estimated gas total'
+  )
+  assert.equal(
+    sendGasField.find('.currency-display__converted-value')[0].textContent,
+    '0.24 USD',
+    'send gas field should show estimated gas total converted to USD'
+  )
+
+  const sendGasOpenCustomizeModalButton = $('.send-v2__sliders-icon-container'
+  )
+  sendGasOpenCustomizeModalButton[0].click()
+
+  await timeout(1000)
+
+  const customizeGasModal = $('.send-v2__customize-gas')
+  assert.ok(customizeGasModal[0], 'should render the customize gas modal')
+
+  const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input')
+  customizeGasPriceInput.val(50)
+  reactTriggerChange(customizeGasPriceInput[0])
+  const customizeGasLimitInput = $('.send-v2__gas-modal-card').last().find('input')
+  customizeGasLimitInput.val(60000)
+  reactTriggerChange(customizeGasLimitInput[0])
+
+  await timeout()
+
+  const customizeGasSaveButton = $('.send-v2__customize-gas__save')
+  customizeGasSaveButton[0].click()
+
+  await timeout()
+
+  assert.equal(
+    sendGasField.find('.currency-display__input-wrapper > input').val(),
+    '0.003',
+    'send gas field should show customized gas total'
+  )
+  assert.equal(
+    sendGasField.find('.currency-display__converted-value')[0].textContent,
+    '3.60 USD',
+    'send gas field should show customized gas total converted to USD'
+  )
+
+  const sendButton = $('button.btn-clear.page-container__footer-button')
+  assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
+  sendButton[0].click()
+
+  await timeout(2000)
+
+  selectState.val('send edit')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  const confirmFromName = $('.confirm-screen-account-name').first()
+  assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
+
+  const confirmToName = $('.confirm-screen-account-name').last()
+  assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
+
+  const confirmScreenRows = $('.confirm-screen-rows')
+  const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2]
+  assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas')
+  const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3]
+  assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
+
+  const confirmScreenBackButton = $('.confirm-screen-back-button')
+  confirmScreenBackButton[0].click()
+
+  await timeout(1000)
+
+  const sendFromFieldItemInEdit = $('.account-list-item')
+  sendFromFieldItemInEdit[0].click()
+
+  await timeout()
+
+  const sendFromDropdownListInEdit = $('.send-v2__from-dropdown__list')
+  sendFromDropdownListInEdit.children()[2].click()
+
+  await timeout()
+
+  const sendToFieldInputInEdit = $('.send-v2__to-autocomplete__input')
+  sendToFieldInputInEdit[0].focus()
+  sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
+
+  await timeout()
+
+  const sendAmountFieldInEdit = $('.send-v2__form-row:eq(2)')
+  sendAmountFieldInEdit.find('.currency-display')[0].click()
+
+  await timeout()
+
+  const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text')
+  sendAmountFieldInputInEdit.val('1.0')
+  reactTriggerChange(sendAmountFieldInputInEdit[0])
+
+  await timeout()
+
+  const sendButtonInEdit = $('.btn-clear.page-container__footer-button')
+  assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
+  sendButtonInEdit[0].click()
+
+  await timeout()
+
+  // TODO: Need a way to mock background so that we can test correct transition from editing to confirm
+  selectState.val('confirm new ui')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+  const confirmScreenConfirmButton = $('.confirm-screen-confirm-button')
+  console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
+  confirmScreenConfirmButton[0].click()
+
+  await timeout(2000)
+
+  const txView = $('.tx-view')
+  console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
+
+  assert.ok(txView[0], 'Should return to the account details screen after confirming')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
\ No newline at end of file