Fix integration tests

app/_locales/en/messages.json

@@ -982,6 +982,9 @@
   "sign": {
     "message": "Sign"
   },
+  "signatureRequest": {
+    "message": "Signature Request"
+  },
   "signed": {
     "message": "Signed"
   },

test/integration/lib/add-token.js

@@ -86,7 +86,7 @@ async function runAddTokenFlowTest (assert, done) {
   $('button.btn-primary.btn--large')[0].click()
 
   // Verify added token image
-  let heroBalance = await queryAsync($, '.hero-balance')
+  let heroBalance = await queryAsync($, '.token-view-balance__balance-container')
   assert.ok(heroBalance, 'rendered hero balance')
   assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
 
@@ -134,7 +134,7 @@ async function runAddTokenFlowTest (assert, done) {
   // $('button.btn-primary--lg')[0].click()
 
   // Verify added token image
-  heroBalance = await queryAsync($, '.hero-balance')
+  heroBalance = await queryAsync($, '.token-view-balance__balance-container')
   assert.ok(heroBalance, 'rendered hero balance')
   assert.ok(heroBalance.find('.identicon')[0], 'token added')
 }

test/integration/lib/confirm-sig-requests.js

@@ -19,7 +19,7 @@ async function runConfirmSigRequestsTest (assert, done) {
   selectState.val('confirm sig requests')
   reactTriggerChange(selectState[0])
 
-  const pendingRequestItem = $.find('.tx-list-item.tx-list-pending-item-container.tx-list-clickable')
+  const pendingRequestItem = $.find('.transaction-list-item')
 
   if (pendingRequestItem[0]) {
     pendingRequestItem[0].click()

test/integration/lib/currency-localization.js

@@ -22,8 +22,8 @@ async function runCurrencyLocalizationTest (assert, done) {
   await timeout(1000)
   reactTriggerChange(selectState[0])
   await timeout(1000)
-  const txView = await queryAsync($, '.tx-view')
+  const txView = await queryAsync($, '.token-view')
-  const heroBalance = await findAsync($(txView), '.hero-balance')
+  const heroBalance = await findAsync($(txView), '.token-view-balance__balance')
-  const fiatAmount = await findAsync($(heroBalance), '.fiat-amount')
+  const fiatAmount = await findAsync($(heroBalance), '.token-view-balance__secondary-balance')
   assert.equal(fiatAmount[0].textContent, '₱102,707.97')
 }

test/integration/lib/send-new-ui.js

@@ -58,7 +58,7 @@ async function runSendFlowTest (assert, done) {
   selectState.val('send new ui')
   reactTriggerChange(selectState[0])
 
-  const sendScreenButton = await queryAsync($, 'button.btn-primary.hero-balance-button')
+  const sendScreenButton = await queryAsync($, 'button.btn-primary.token-view-balance__button')
   assert.ok(sendScreenButton[1], 'send screen button present')
   sendScreenButton[1].click()
 

test/integration/lib/tx-list-items.js

@@ -29,37 +29,34 @@ async function runTxListItemsTest (assert, done) {
   assert.ok(metamaskLogo[0], 'metamask logo present')
   metamaskLogo[0].click()
 
-  const txListItems = await queryAsync($, '.tx-list-item')
+  const txListItems = await queryAsync($, '.transaction-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-container span')
+  const retryTxLink = await findAsync($(retryTx), '.transaction-list-item__retry')
   assert.equal(retryTxLink[0].textContent, 'Taking too long? Increase the gas price on your transaction', 'retryTx has expected link')
 
   const approvedTx = txListItems[2]
-  const approvedTxRenderedStatus = await findAsync($(approvedTx), '.tx-list-status')
+  const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status')
-  assert.equal(approvedTxRenderedStatus[0].textContent, 'Approved', 'approvedTx has correct label')
+  assert.equal(approvedTxRenderedStatus[0].textContent, 'pending', 'approvedTx has correct label')
 
   const unapprovedMsg = txListItems[3]
-  const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.tx-list-account')
+  const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__action')
   assert.equal(unapprovedMsgDescription[0].textContent, 'Signature Request', 'unapprovedMsg has correct description')
 
   const failedTx = txListItems[4]
-  const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
+  const failedTxRenderedStatus = await findAsync($(failedTx), '.transaction-list-item__status')
-  assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
+  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')
+  const confirmedTokenTxAddress = await findAsync($(confirmedTokenTx), '.transaction-list-item__status')
-  assert.equal(confirmedTokenTxAddress[0].textContent, '0xE7884118...81a9', 'confirmedTokenTx has correct address')
+  assert.equal(confirmedTokenTxAddress[0].textContent, 'confirmed', 'confirmedTokenTx has correct address')
 
   const rejectedTx = txListItems[7]
-  const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.tx-list-status')
+  const rejectedTxRenderedStatus = await findAsync($(rejectedTx), '.transaction-list-item__status')
-  assert.equal(rejectedTxRenderedStatus[0].textContent, 'Rejected', 'rejectedTx has correct label')
+  assert.equal(rejectedTxRenderedStatus[0].textContent, 'rejected', 'rejectedTx has correct label')
 }

ui/app/components/shift-list-item.js

@@ -35,12 +35,13 @@ function ShiftListItem () {
 }
 
 ShiftListItem.prototype.render = function () {
-  return h('div.tx-list-item.tx-list-clickable', {
+  return h('div.transaction-list-item.tx-list-clickable', {
     style: {
       paddingTop: '20px',
       paddingBottom: '20px',
       justifyContent: 'space-around',
       alignItems: 'center',
+      flexDirection: 'row',
     },
   }, [
     h('div', {

ui/app/components/transaction-list-item/transaction-list-item.component.js

@@ -67,7 +67,10 @@ export default class TransactionListItem extends PureComponent {
     const { txParams = {} } = transaction
     const nonce = hexToDecimal(txParams.nonce)
 
-    const nonceAndDateText = `#${nonce} - ${formatDate(transaction.time)}`
+    const nonceAndDateText = nonce
+      ? `#${nonce} - ${formatDate(transaction.time)}`
+      : formatDate(transaction.time)
+
     const fiatDisplayText = `-${fiatDisplayValue}`
     const ethDisplayText = ethTransactionAmount && `-${ethTransactionAmount} ETH`
 

ui/app/components/transaction-list/transaction-list.container.js

@@ -4,6 +4,7 @@ import { compose } from 'recompose'
 import TransactionList from './transaction-list.component'
 import {
   pendingTransactionsSelector,
+  submittedPendingTransactionsSelector,
   completedTransactionsSelector,
 } from '../../selectors/transactions'
 import { selectedTokenSelector } from '../../selectors/tokens'
@@ -11,11 +12,12 @@ import { getLatestSubmittedTxWithEarliestNonce } from '../../helpers/transaction
 
 const mapStateToProps = state => {
   const pendingTransactions = pendingTransactionsSelector(state)
+  const submittedPendingTransactions = submittedPendingTransactionsSelector(state)
 
   return {
     completedTransactions: completedTransactionsSelector(state),
     pendingTransactions,
-    transactionToRetry: getLatestSubmittedTxWithEarliestNonce(pendingTransactions),
+    transactionToRetry: getLatestSubmittedTxWithEarliestNonce(submittedPendingTransactions),
     selectedToken: selectedTokenSelector(state),
   }
 }

ui/app/components/transaction-status/index.scss

@@ -21,7 +21,7 @@
     color: #609a1c;
   }
 
-  &--approved {
+  &--approved, &--submitted {
     background-color: #FFF2DB;
     color: #CA810A;
   }

ui/app/constants/transactions.js

@@ -16,5 +16,6 @@ export const DEPLOY_CONTRACT_ACTION_KEY = 'contractDeployment'
 export const APPROVE_ACTION_KEY = 'approve'
 export const SEND_TOKEN_ACTION_KEY = 'outgoing'
 export const TRANSFER_FROM_ACTION_KEY = 'transferFrom'
+export const SIGNATURE_REQUEST_KEY = 'signatureRequest'
 
 export const TRANSACTION_TYPE_SHAPESHIFT = 'shapeshift'

ui/app/helpers/transactions.util.js

@@ -13,6 +13,7 @@ import {
   APPROVE_ACTION_KEY,
   SEND_TOKEN_ACTION_KEY,
   TRANSFER_FROM_ACTION_KEY,
+  SIGNATURE_REQUEST_KEY,
 } from '../constants/transactions'
 
 abiDecoder.addABI(abi)
@@ -41,7 +42,11 @@ export function isConfirmDeployContract (txData = {}) {
 }
 
 export function getTransactionActionKey (transaction, methodData) {
-  const { txParams: { data } = {} } = transaction
+  const { txParams: { data } = {}, msgParams } = transaction
+
+  if (msgParams) {
+    return SIGNATURE_REQUEST_KEY
+  }
 
   if (isConfirmDeployContract(transaction)) {
     return DEPLOY_CONTRACT_ACTION_KEY

ui/app/selectors/transactions.js

@@ -43,6 +43,13 @@ export const pendingTransactionsSelector = createSelector(
   )
 )
 
+export const submittedPendingTransactionsSelector = createSelector(
+  transactionsSelector,
+  (transactions = []) => (
+    transactions.filter(transaction => transaction.status === SUBMITTED_STATUS)
+  )
+)
+
 export const completedTransactionsSelector = createSelector(
   transactionsSelector,
   (transactions = []) => (